@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap');

*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
:root{
    --Neutral-900: #0D082D;
    --Neutral-700: #4B4869;
    --Neutral-500: #8784A5;
    --Neutral-300: #D1D0D5;
    --Neutral-0: #FFFFFF;

    --Orange-700: #E1604F;
    --Orange-500: #F57463;
    --Gradient-01: linear-gradient(90deg, #F37362 0%, #FFF 100%);
    
}
body{
    width: 100vw;
    height: 100vh;
    font-family: "Inconsolata", serif;
    /* display: flex; 
    justify-content: center; 
     flex-direction: column;
    align-items: center;  */
    background-image: url(./assets/images/background-desktop.png);
    color: var(--Neutral-0);
    background-repeat: no-repeat;
    background-size: cover;
    overflow-x: hidden;
}
.top-circle-bg{
    width: 217px;
    height: 217px;
    background-image: url(./assets/images/pattern-circle.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: -110px;
}
.container{
    width: 1440px;
    height: 1100px;
display:flex;
flex-direction: column;
align-items: center;
position: relative;
padding-top: 30px;

}
.squiggly-line-top{
    width: 446px;
    height: 208px;
    background-image: url(./assets/images/pattern-squiggly-line-top.svg);
    background-size: 466px 208px;
    position: absolute;
    right:  0;
   transform: translate(-90px,10px);
}
.header-container{
    width: 891px;
    height: 181px;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    margin-top: 30px;
}
.heading{
    font-size: 60px;
    line-height: 110%;
    letter-spacing: -1px;
    font-weight: 800;
    text-align: center;
}
.header-container .tag-line{
    width: 891px;
    height: 29px;
    color: var(--Neutral-300);
    font-size: 24px;
    line-height: 120%;
    letter-spacing: -0.5px;
    font-weight: 500;
    text-align: center;
}
form{
    width: 460px;
    height: 610px;
    display: flex;
    flex-direction: column;
    row-gap: 24px;
    margin-top: 50px;
    z-index: 20;
}
.upload-container{
    width: 460px;
    height: 190px;
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    /* position: relative; */
    
}
.upload-lable{
    font-size: 20px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.5px;
}
.upload-input-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    border-color:var(--Neutral-500);
    border: 1px solid;
    border-style: dashed;
    cursor: pointer;
    /* position: relative; */
}
.upload-input-container:hover{
    background-color: rgba(255, 255, 255, 0.10);
}

input[type=file]{
    display: none;
}
.upload-icon-container{
    width: 50px;
    height: 50px;
    border-radius: 12px;
    border: var(--Neutral-700) solid 1px;
    box-shadow: 0px 2px 4px -2px #040128;
    backdrop-filter: blur(54px);
    background-color: #4b486965;
    
}
.upload-icon{
    width: 50px;
    height: 50px;
    border-radius: 12px;
}
.remove-change-btn-container{
    display: none;
    column-gap: 8px;
   
}
.btn{
    width: auto;
    height: auto;
    padding: 4px 8px;
    border-radius: 4px;
    background-color:rgba(255, 255, 255, 0.096);
    color:var(--Neutral-300);
    border: none;
    font-size: 12px;
    line-height: 120%;
    letter-spacing: -0.2px;
}
.input-instruction{
    font-size: 18px;
    line-height: 120%;
}
.text-hint-container{
    display: none;
    column-gap: 8px;
    align-items: center;    
}

.text-hint-container2{    
    display: flex;
}
.change{
    display: none;
}

.fa-solid{
    border:#E1604F 1px solid ;
    border-radius: 50%;
    color: #040128;
    background-color: #E1604F;  
   
}

/* .text-hint2{
    color: var(--Orange-500);
} */
.text-hint{
color: var(--Neutral-300);
font-size: 12px;
line-height: 120%;
letter-spacing: -0.2px;

}
.input-label-container{
    width: 460px;
    height: 118px;
    display: flex;
    flex-direction: column;
    row-gap: 12px;
}
label{
width: 100%;
font-size: 20px;
font-weight: 500;
line-height: 120%;
letter-spacing: -0.5px;
}
input{
    width: 100%;
    height: 54px;
    border-radius: 12px;
    padding: 0px 16px ;
    background-color: transparent;
    border: 1px solid var(--Neutral-500);
    cursor: pointer;
    
}
input[type="text"]{
color: var(--Neutral-0);
}
input[type="email"]{
color: var(--Neutral-0);
}
input:hover{
    background-color: rgba(255, 255, 255, 0.10);

}
input:focus{
    border-width: 5px;
    border-style: double;
}
input::placeholder{
    color: var(--Neutral-300);
    font-size: 18px;
    line-height: 120%;
}
button{
width: 460px;
height: 54px;
padding: 16px 24px;
border-radius: 12px;
background-color: var(--Orange-500);
color: var(--Neutral-900);
font-size: 20px;
font-weight: 800;
line-height: 100%;
letter-spacing: -0.3px;
font-family: "Inconsolata", serif;
cursor: pointer;
border: none;
}
button:focus{
    
        border-width: 5px;
        border-style: double;
    
}
.input-error{
    border: 1px solid var(--Orange-500);
}
.squiggly-line-bottom{
    width: 825px;
    height: 476px;
    background-image: url(./assets/images/pattern-squiggly-line-bottom-desktop.svg);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(-10px, -67px);
    
}
.middle-circle-bg{
    width: 217px;
    height: 217px;
    background-image: url(./assets/images/pattern-circle.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 620px;
    left: 930px;
}
.container2{
    width: 1440px;
    height: 1024px;
    display: none;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-top: 30px;
}
.header-container2{
    width: 814px;
    height: 251px;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 32px;
    margin-top: 30px;
}
.heading2{
    font-size: 60px;
    line-height: 110%;
    letter-spacing: -1px;
    font-weight: 800;
    text-align: center;
    
}
.customer-name{
background: -webkit-linear-gradient(var(--Orange-500), var(--Neutral-0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tag-line2{
    width: 514px;
    height: 57px;
    text-align: center;
    font-size: 24px;
    line-height: 120%;
    font-weight: 500;
    letter-spacing: -0.5px;
}
.customer-email{
    color: var(--Orange-500);
}
.ticket-container{
    background-image: url(./assets/images/pattern-ticket.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 600px;
    height: 280.4px;
    display: flex;
    flex-direction: column;
    padding: 30px 24px;
    position: relative;
    margin-top: 70px;
    z-index: 50;
    
    
}
.inner-ticket-container{
    display: flex;
}
.logo-mark{
    width: 40px;
    height: 40px;
    /* margin-left: 24px; */
}
.event-info{
    width: 330px;
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    margin-left: 20px;
}
.coding-conf{
    color: var(--Neutral-0);
    font-size: 40px;
    line-height: 110%;
    letter-spacing: -1;
    font-weight: 700;
}
.event-detail{
font-size: 18px;
line-height: 120%;
}
.speaker-info{
    display: flex;
    column-gap: 16px;
    margin-top: 70px;
}
.ticket-num-container{
    display: flex;
    position: absolute;
    right: 0;
    transform: rotate(90deg);
    margin-top: 100px;
    
}
.ticket-num{
width: 85px;
height: 33px;
color: var(--Neutral-500);
font-size: 30px;
line-height: 110%;
letter-spacing: -1px;
}
.avatar{
    width: 80px;
    height: 80px;
    border-radius: 12px;
}
.speaker-details{
    display: flex;
    flex-direction: column;
    row-gap: 8px;
}
.speaker-name{
    font-size: 30px;
    line-height: 110%;
    letter-spacing: -1px;
    font-weight: 500;
}
.speaker-social-info{
    width: auto;
    height: auto;
    display: flex;
    column-gap: 10px;
}
.speaker-img{
    width: 80px;
    height: 80px;
    border-radius: 12px;
}
.speaker-handle{
    color: var(--Neutral-300);
    font-size: 20px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.5px;
}

.squiggly-line-bottom2{
    width: 825px;
    height: 476px;
    background-image: url(./assets/images/pattern-squiggly-line-bottom-desktop.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(-10px, -67px);
    
}
.middle-circle-bg2{
    width: 217px;
    height: 217px;
    background-image: url(./assets/images/pattern-circle.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 480px;
    left: 930px;
}

@media screen and (max-width:821px) {
    *{
        /* background-color: rgba(255, 0, 0, 0.322); */
    }
    body{
        width: 768px;
        height: 1080px;
        
        background-image: url(./assets/images/background-tablet.png);
        /* overflow: hidden; */
       
    }
    
    .container{
    width: 768px;
    height: 1080px;
    padding-top: 30px;   
    overflow-x: hidden; 
    }
    .squiggly-line-top{
        width: 232px;
        height: 108.2px;
        background-image: url(./assets/images/pattern-squiggly-line-top.svg);
        background-size: 232px 108.2px;
        position: absolute;
        right:  0;
       transform: translate(0px,50px);
       /* overflow-x: hidden; */
    }
    .header-container{
        width: 705px;
        height: 181px;        
        margin-top: 50px;
    }
    .header-container .tag-line{
        width: 705px;
    }
    form{
        width: 522px;
    }
    .upload-container{
        width: 522px;
    }
    .upload-lable{
        font-size: 20px;
        font-weight: 500;
        line-height: 120%;
        letter-spacing: -0.5px;
    }
    .input-label-container{
        width: 522px;
        /* height: 90px; */
        
    }
    button{
        width: 522px;
        height: 54px;
        }
    .middle-circle-bg{
        width: 217px;
        height: 217px;
        background-image: url(./assets/images/pattern-circle.svg);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: 620px;
        left: 650px;
        /* overflow: hidden; */
    }
    .squiggly-line-bottom{
        width: 396px;
        height: 276.16px;
        background-image: url(./assets/images/pattern-squiggly-line-bottom-mobile-tablet.svg);
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        bottom: 0;
        left: 0;
        transform: translate(-10px, -0px);
        
    }
    .container2{
        width: 768px;
        height: 1080px;
        padding-top: 40px;
        overflow: hidden;
    }
    .header-container2{
        width: 705px;
        height: 317px;
        row-gap: 32px;
    }
    .heading2{
        font-size: 60px;        
    }
    .tag-line2{
        width: 514px;
        height: 87px;
        font-size: 24px;
    }
    .ticket-container{
        width: 600px;
        height: 280.4px;        
    }
    .logo-mark{
        width: 40px;
        height: 40px;
    }
    .event-info{
        width: 330px;
        row-gap: 12px;
    }
    .coding-conf{
        font-size: 40px;
    }
    .event-detail{
        font-size: 18px;
    }
    .ticket-num-container{
        margin-top: 95px;        
    }
    .ticket-num{
        width: 85px;
        height: 33px;
        font-size: 30px;
    }
    .speaker-info{
        column-gap: 16px;
        margin-top: 69px;
    }
    .avatar{
        width: 80px;
        height: 80px;
        border-radius: 12px;
    }
    .speaker-details{
        row-gap: 8px;
    }
    .speaker-name{
        font-size: 30px;
    }
    .speaker-social-info{
        column-gap: 10px;
    }
    .icon-github{
        width: 21.12px;
        height: 22px;
    }
    .speaker-handle{
        font-size: 20px;
        font-weight: 500;
        letter-spacing: -0.5px;
    }
    .squiggly-line-bottom2{
        width: 396px;
        height: 276.16px;
        background-image: url(./assets/images/pattern-squiggly-line-bottom-mobile-tablet.svg);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        bottom: 0;
        left: 0;
        transform: translate(0px, 0px);
        /* overflow: hidden; */
    }

    .middle-circle-bg2{
        width: 217px;
        height: 217px;
        background-image: url(./assets/images/pattern-circle.svg);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: 580px;
        left: 320px;
        transform: translate(230px, -90px);
        /* overflow: hidden; */
       
    }

        
    
}

@media screen and (max-width:431px) {
    /* *{
        background-color: rgba(255, 0, 0, 0.322);
    } */
    body{
        width: 375px; 
        height: 995px;       
        background-image: url(./assets/images/background-mobile.png);
        /* overflow: auto; */
    }
    .top-circle-bg{
        width: 107px;
        height: 107px;
        top: -50px;                
    }
    
    .container{
        width: 375px;
        height: 995px;
        padding-top: 30px;   
        /* overflow: auto;  */
    }
    .logo{
        width: 166.53px;
        height: 24px;
    }
    .squiggly-line-top{
        width: 112px;
        height: 52.23px;
        background-image: url(./assets/images/pattern-squiggly-line-top.svg);
        background-size: 112px 52.23px;
        position: absolute;
        right:  0;
        transform: translate(0px,-10px);
        }
    .header-container{
        width: 343px;
        height: 134px;        
        margin-top: 50px;
    }
     .heading{
        font-size: 30px;
    }
     .header-container .tag-line{
        width: 343px;
        font-size: 20px;
    }
     form{
        width: 343px;
        height: 610px;
    }
    .upload-container{
        width: 343px;
    }
     .input-label-container{
        width: 343px;
            /* height: 90px; */
            
    }
    button{
        width: 343px;
    }
    .squiggly-line-bottom{
        width: 301px;
        height: 209.91px;
        bottom: 0;
        left: 0;
        transform: translate(-10px, 25px);
        
    }

    .container2{
        width: 375px;
        height: 812px;
        padding-top: 40px;
        /* overflow: hidden; */
    }
    .header-container2{
        width: 343px;
        height: 191px;
        row-gap: 20px;
    }
    .heading2{
        font-size: 30px;        
    }
    .tag-line2{
        width: 343px;
        height: 72px;
        font-size: 20px;
    }
    .ticket-container{
        background-image: url(./assets/images/pattern-ticket.svg);
        width: 343px;
        height: 160px;        
    }
    .logo-mark{
        width: 29px;
        height: 29px;
        /* margin-left: 24px; */
    }
    .event-info{
        width: 177px;
        row-gap: 8px;
    }
    .coding-conf{
        font-size: 24px;
    }
    .event-detail{
        font-size: 14px;
    }
    .ticket-num-container{
        margin-top: 30px;        
    }
    .ticket-num{
        width: 61px;
        height: 24px;
        font-size: 22px;
    }
    .speaker-info{
        display: flex;
        column-gap: 12px;
        margin-top: 19px;
    }
    .avatar{
        width: 45px;
        height: 45px;
        border-radius: 6.75px;
    }
    .speaker-details{
        row-gap: 4px;
    }
    .speaker-name{
        font-size: 20px;
    }
    .speaker-social-info{
        column-gap: 4px;
    }
    .icon-github{
        width: 15.36px;
        height: 16px;
    }
    .speaker-handle{
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
    }
    .squiggly-line-bottom2{
        width: 301px;
        height: 209.91px;
        background-image: url(./assets/images/pattern-squiggly-line-bottom-mobile-tablet.svg);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        bottom: 0;
        left: 0;
        transform: translate(0px, 0px);
        
    }
    .middle-circle-bg2{
        width: 107px;
        height: 107px;
        background-image: url(./assets/images/pattern-circle.svg);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: 580px;
        left: 320px;
        background-color: green;
       
    }
            
        
}