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

:root{
    --black02:#2C2C2C;
    --blue04: #0F29C0;
    --black03:  #3D3D3D;
    --white00:#FEFEFE;
    ---black04:#4D4D4D;
    --black00:#070707;

}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Inter';
}

.overlay{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    backdrop-filter: blur(32px);
    transition: all 200ms ease allow-discrete;
    transform: scale(0);
    opacity: 0;
    
}

.input-flag{
    display: flex;
    gap: 4px;
    border-right: 1px solid #FEFEFE;
}

.input-flag img{
    width: 18px;
}

.input-row{
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.popup-container-text{
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    border-radius: 22px;
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.15);
    padding: 20px;
    background: #FEFEFE;
    align-items: center;
}
.popup-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 0.5px solid #A1A1A1;
    width: 100%;
}

.popup-header h1{
    color: #2C2C2C;
    font-size: 24px;
    font-weight: 500;
}


.popup-container-text p{
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #4D4D4D;
}


.popup-container-text .btn-main-blue{
   width: initial !important;
}




.overlay-bg{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.overlay-bg img.bg{
    position: absolute;
    width: 100%;
    opacity: 0.3;
}

.payment-con  h1{
    text-align: center;
    font-size: 20px;
}

.payment-con img{
    width: initial;
}

.payment-con p{
    font-size: 14px;
    color: #3D3D3D;
    font-weight: 500;
    text-align: center;
}



.payment-con button.t3{
    height: 54px;
    border-radius: 12px;
    background: #F6F5F5;
    border: 1px solid #D6D4D4;
    font-size: 14px;
    font-weight: 700;
    color: #787878;
    transition: all 400ms;
    width: 100%;
}

.payment-con button.t3:hover{
    height: 54px;
    border-radius: 12px;
    background: transparent;
    font-size: 14px;
    
}

.popup-container{
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 90%;
    border-radius: 22px;
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.15);
    padding: 20px;
    background: #FEFEFE;
}

.popup-container svg{
    align-self: flex-end;
    width: 24px;
}

.popup-container h1{
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #151515;
}

.popup-container p{
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #4D4D4D;
}

.popup-container img.img{
    width: 100px;
    align-self: center;
}

.popup-container .btn-container{
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 16px;
}

.btn-container .btn-main-red{
    height: 38px;
    border-radius: 12px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 700;
    color: #FEFEFE;
    background: #E01717;
    border: 1px solid #C10A0A;
    width: 100%;
    transition: all 400ms ease-in-out;
}

.btn-container .btn-main-red:hover{
    background: transparent;
    color: #E01717;
    border: 1px solid #C10A0A;
    width: 100%;
}

.btn-container .btn-main-blue{
    height: 38px;
    border-radius: 12px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 700;
    color: #FEFEFE;
    background: #1330DE;
    border: 1px solid #031897;
    width: 100%;
    transition: all 400ms ease-in-out;
}

.btn-container .btn-main-blue:hover{
    background: transparent;
    color: #1330DE;
    border: 1px solid #031897;
    width: 100%;
}

.btn-container .btn-main-plain{
    height: 38px;
    border-radius: 12px;
    padding: 8px 24px;
    font-size: 14px;
    font-weight: 700;
    color: #3D3D3D;
    border: 1px solid #A1A1A1;
    background: transparent;
    width: 100%;
    transition: all 400ms ease-in-out;

}

.btn-container .btn-main-plain:hover{
    height: 38px;
    border-radius: 12px;
    padding: 8px 24px;
    font-size: 14px;
    font-weight: 700;
    color: #FEFEFE;
    border: 1px solid #3D3D3D;
    background: #3D3D3D;
    width: 100%;

}

.help{
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    font-size: 16px;
}

.help small{
    color:#3E58F2 ;
}

.input-domain{
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
    overflow-x: scroll;
}

.input-domain::-webkit-scrollbar{
    opacity: 0;
    display: none;
}



.domain-card{
    border-radius: 12px;
   border: 1px solid #D6D4D4;
   display: flex;
   flex-direction: column;
   gap: 4px;
   padding: 12px;
   background-color: #F6F5F5;
   width: 180px;
   flex-shrink: 0;
}

.domain-card-active{
    border: 1.5px solid #031897;  
}

.domain-header{
    display: flex;
    justify-content: space-between;
    padding-bottom: 4px;
    align-items: center;
    border-bottom: 0.5px solid #D6D4D4;
}

.domain-header p{
    font-size: 14px;
    color: #151515;
    font-weight: 500;
}

.domain-card > p{
    color: #4D4D4D;
    font-size: 14px;
    font-weight: 700;
}

.domain-card svg{
  width:14px !important;
}

.form-from button.t2{
    height: 54px;
    border-radius: 12px;
    background: #1330DE;
    border: 1px solid #031897;
    font-size: 14px;
    font-weight: 500;
    color: #FEFEFE;
    transition: all 400ms;
}

.form-from button.t2:hover{
    height: 54px;
    border-radius: 12px;
    color: #1330DE;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
}


.form-from button.t3{
    height: 54px;
    border-radius: 12px;
    background: #F6F5F5;
    border: 1px solid #D6D4D4;
    font-size: 16px;
    font-weight: 500;
    color: #070707;
    transition: all 400ms;
}

.form-form button.t3:hover{
    height: 54px;
    border-radius: 12px;
    background: transparent;
    font-size: 16px;
    font-weight: 500;
}

.form-from div.t3{
    height: 54px;
    border-radius: 12px;
    background: #F6F5F5;
    border: 1px solid #D6D4D4;
    font-size: 16px;
    font-weight: 500;
    color: #070707;
    transition: all 400ms;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.form-form div.t3:hover{
    height: 54px;
    border-radius: 12px;
    background: transparent;
    font-size: 16px;
    font-weight: 500;
}


.form-pay{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    height: 54px;
    width: 100%;
    border-radius: 12px;
    padding: 16px;
    background: #F6F5F5;
    border: 1px solid #D6D4D4;
}

.form-pay img{
    flex-shrink: 0;
    padding-right: 8px;
    border-right: 1px solid #A1A1A1;
    width: 24px;
}


.form-pay p{
    font-size: 14px;
    font-weight: 500;
    color: #151515;
}



@media only screen and (min-width: 768px) {
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

    :root{
        --black02:#2C2C2C;
        --blue04: #0F29C0;
        --black03:  #3D3D3D;
        --white00:#FEFEFE;
        ---black04:#4D4D4D;
        --black00:#070707;
    }
        
    .overlay{
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        backdrop-filter: blur(32px);
        transition: all 200ms ease allow-discrete;
        transform: scale(0);
        opacity: 0;
        
    
    }
    
    .input-flag{
        display: flex;
        gap: 4px;
        border-right: 1px solid #FEFEFE;
    }
    
    .input-flag img{
        width: 24px;
    }
    
    .input-row{
        display: flex;
        gap: 24px;
        flex-direction: row;
    }
    
    .popup-container-text{
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 580px;
        border-radius: 52px;
        box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.15);
        padding: 40px;
        background: #FEFEFE;
        align-items: center;
    }
    .popup-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 16px;
        border-bottom: 0.5px solid #A1A1A1;
        width: 100%;
    }
    
    .popup-header h1{
        color: #2C2C2C;
        font-size: 24px;
        font-weight: 500;
    }
    
    
    .popup-container-text p{
        text-align: center;
        font-size: 20px;
        font-weight: 500;
        color: #4D4D4D;
    }
    
    
    .popup-container-text .btn-main-blue{
       width: initial !important;
    }
    
    
    
    
    .overlay-bg{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    
    .overlay-bg img.bg{
        position: absolute;
        width: 100%;
        opacity: 0.3;
    }
    
    .payment-con  h1{
        text-align: center;
        font-size: 30px;
    }
    
    .payment-con img{
        width: initial;
    }
    
    .payment-con p{
        font-size: 20px;
        color: #3D3D3D;
        font-weight: 500;
        text-align: center;
    }
    
    
    
    .payment-con button.t3{
        height: 64px;
        border-radius: 12px;
        background: #F6F5F5;
        border: 1px solid #D6D4D4;
        font-size: 20px;
        font-weight: 700;
        color: #787878;
        transition: all 400ms;
        width: 100%;
    }
    
    .payment-con button.t3:hover{
        height: 64px;
        border-radius: 12px;
        background: transparent;
        font-size: 20px;
        
    }
    
    .popup-container{
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 520px;
        border-radius: 52px;
        box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.15);
        padding: 40px;
        background: #FEFEFE;
    }
    
    .popup-container svg{
        align-self: flex-end;
      width:initial;
    }

  
    .popup-container h1{
        text-align: center;
        font-size: 24px;
        font-weight: 700;
        color: #151515;
    }
    
    .popup-container p{
        text-align: center;
        font-size: 20px;
        font-weight: 500;
        color: #4D4D4D;
    }
    
    .popup-container img.img{
        width: 160px;
        align-self: center;
    }
    
    .popup-container .btn-container{
        display: flex;
        flex-direction: row;
        gap: 24px;
        margin-top: 16px;
    }
    
    .btn-container .btn-main-red{
        height: 48px;
        border-radius: 12px;
        padding: 8px 24px;
        font-size: 20px;
        font-weight: 700;
        color: #FEFEFE;
        background: #E01717;
        border: 1px solid #C10A0A;
        width: 100%;
        transition: all 400ms ease-in-out;
    }
    
    .btn-container .btn-main-red:hover{
        background: transparent;
        color: #E01717;
        border: 1px solid #C10A0A;
        width: 100%;
    }
    
    .btn-container .btn-main-blue{
        height: 48px;
        border-radius: 12px;
        padding: 8px 24px;
        font-size: 20px;
        font-weight: 700;
        color: #FEFEFE;
        background: #1330DE;
        border: 1px solid #031897;
        width: 100%;
        transition: all 400ms ease-in-out;
    }
    
    .btn-container .btn-main-blue:hover{
        background: transparent;
        color: #1330DE;
        border: 1px solid #031897;
        width: 100%;
    }
    
    .btn-container .btn-main-plain{
        height: 48px;
        border-radius: 12px;
        padding: 8px 24px;
        font-size: 20px;
        font-weight: 700;
        color: #3D3D3D;
        border: 1px solid #A1A1A1;
        background: transparent;
        width: 100%;
        transition: all 400ms ease-in-out;
    
    }
    
    .btn-container .btn-main-plain:hover{
        height: 48px;
        border-radius: 12px;
        padding: 8px 24px;
        font-size: 20px;
        font-weight: 700;
        color: #FEFEFE;
        border: 1px solid #3D3D3D;
        background: #3D3D3D;
        width: 100%;
    
    }
    
    .help{
        display: flex;
        flex-direction: row;
        gap: 4px;
        align-items: center;
        font-size: 16px;
    }
    
    .help small{
        color:#3E58F2 ;
    }
    
    .input-domain{
        display: flex;
        flex-direction: row;
        gap: 18px;
        width: 100%;
        overflow-x: scroll;
    }
    
    .input-domain::-webkit-scrollbar{
        opacity: 0;
        display: none;
    }
    
    
    
    .domain-card{
        border-radius: 12px;
       border: 1px solid #D6D4D4;
       display: flex;
       flex-direction: column;
       gap: 4px;
       padding: 12px;
       background-color: #F6F5F5;
       width: 230px;
       flex-shrink: 0;
    }
    
    .domain-card-active{
        border: 1.5px solid #031897;  
    }
    
    .domain-header{
        display: flex;
        justify-content: space-between;
        padding-bottom: 4px;
        align-items: center;
        border-bottom: 0.5px solid #D6D4D4;
    }
    
    .domain-header p{
        font-size: 16px;
        color: #151515;
        font-weight: 500;
    }
    
    
    .domain-card > p{
        color: #4D4D4D;
        font-size: 20px;
        font-weight: 700;
    }
    
    .domain-card svg{
  width:initial !important;
}
    
    .form-from button.t2{
        height: 64px;
        border-radius: 12px;
        background: #1330DE;
        border: 1px solid #031897;
        font-size: 20px;
        font-weight: 500;
        color: #FEFEFE;
        transition: all 400ms;
    }
    
    .form-from button.t2:hover{
        height: 64px;
        border-radius: 12px;
        color: #1330DE;
        background: transparent;
        font-size: 20px;
        font-weight: 500;
    }
    
    
    .form-from button.t3{
        height: 64px;
        border-radius: 12px;
        background: #F6F5F5;
        border: 1px solid #D6D4D4;
        font-size: 20px;
        font-weight: 500;
        color: #070707;
        transition: all 400ms;
    }
    
    .form-form button.t3:hover{
        height: 64px;
        border-radius: 12px;
        background: transparent;
        font-size: 20px;
        font-weight: 500;
    }

    .form-from div.t3{
        height: 64px;
        border-radius: 12px;
        background: #F6F5F5;
        border: 1px solid #D6D4D4;
        font-size: 20px;
        font-weight: 500;
        color: #070707;
        transition: all 400ms;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
    }
    
    .form-form div.t3:hover{
        height: 64px;
        border-radius: 12px;
        background: transparent;
        font-size: 20px;
        font-weight: 500;
    }
    
    .form-pay{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        height: 64px;
        width: 100%;
        border-radius: 12px;
        padding: 16px;
        background: #F6F5F5;
        border: 1px solid #D6D4D4;
    }
    
    .form-pay img{
        flex-shrink: 0;
        padding-right: 8px;
        border-right: 1px solid #A1A1A1;
        width: 32px;
    }
    
    
    .form-pay p{
        font-size: 16px;
        font-weight: 500;
    }
}

@media (prefers-color-scheme: dark) {
  
  
  
  
     body{
      background-color:black;
      color:white;
    }

    
:root{


    --black02:#D6D4D4;
    --blue04: #0F29C0;
    --black03:#FEFEFE;
    --white00:#2C2C2C;
    ---black04:#FEFEFE;
    --black00:#FEFEFE;

}

    .popup-container-text{
        background: #2C2C2C;
    }
  
    .popup-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 16px;
        border-bottom: 0.5px solid #A1A1A1;
        width: 100%;
    }
    
    .popup-header h1{
        color: #E3E3E3;
    }
    
    
    .popup-container-text p{
        color: #CFCECE;
    }
    
  .popup-header svg > path{
    stroke: #F6F5F5;
  }
    
    .popup-container-text .btn-main-blue{
       width: initial !important;
    }
  
  .input-2 small{
    color:#A1A1A1;
  }
  
  .input-flag{
    border-right:1px solid #696969;
  }
    
    .overlay-bg{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    
    .overlay-bg img.bg{
        position: absolute;
        width: 100%;
        opacity: 0.3;
    }
    
    .payment-con  h1{
        text-align: center;
        font-size: 30px;
    }
    
    .payment-con img{
        width: initial;
    }
    
    .payment-con p{
        font-size: 20px;
        color: #3D3D3D;
        font-weight: 500;
        text-align: center;
    }
    
    .payment-con button.t3{
        height: 64px;
        border-radius: 12px;
        background: #F6F5F5;
        border: 1px solid #D6D4D4;
        font-size: 20px;
        font-weight: 700;
        color: #787878;
        transition: all 400ms;
        width: 100%;
    }
    
    .payment-con button.t3:hover{
        height: 64px;
        border-radius: 12px;
        background: transparent;
        font-size: 20px;
        
    }
    
    .popup-container{
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 520px;
        border-radius: 52px;
        box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.15);
        padding: 40px;
        background: #FEFEFE;
    }
    
    .popup-container svg{
        align-self: flex-end;
      width:initial;
    }

    .popup-container h1{
        text-align: center;
        font-size: 24px;
        font-weight: 700;
        color: #151515;
    }
    
    .popup-container p{
        text-align: center;
        font-size: 20px;
        font-weight: 500;
        color: #4D4D4D;
    }
    
    .popup-container img.img{
        width: 160px;
        align-self: center;
    }
    
    .popup-container .btn-container{
        display: flex;
        flex-direction: row;
        gap: 24px;
        margin-top: 16px;
    }
    
    .btn-container .btn-main-red{
     
        color: #FEFEFE;
        background: #E01717;
        border: 1px solid #C10A0A;
     
    }
    
    .btn-container .btn-main-red:hover{
        color: #E01717;
        border: 1px solid #C10A0A;
    }
    
    .btn-container .btn-main-blue{   
        color: #FEFEFE;
        background: #2C48ED;
    }
    
    .btn-container .btn-main-blue:hover{
        background: transparent;
        color: #2C48ED;
        border: 1px solid #031897;
        width: 100%;
    }
    
    .btn-container .btn-main-plain{
     
        color: #3D3D3D;
        border: 1px solid #A1A1A1;
        background: transparent;
    
    }
    
    .btn-container .btn-main-plain:hover{
 
        color: #FEFEFE;
        border: 1px solid #3D3D3D;
        background: #3D3D3D;
    
    }
    
    .help{
        display: flex;
        flex-direction: row;
        gap: 4px;
        align-items: center;
        font-size: 16px;
    }
    
    .help small{
        color:#3E58F2 ;
    }
    
    .input-domain{
        display: flex;
        flex-direction: row;
        gap: 18px;
        width: 100%;
        overflow-x: scroll;
    }
    
    .input-domain::-webkit-scrollbar{
        opacity: 0;
        display: none;
    } 
    
    .domain-card{
       background-color: #3D3D3D;
      border-color:#696969;
      
    }
  
  .domain-card:not(.domain-card-active) .domain-header svg circle{
     fill:#4D4D4D;
  }
    
    .domain-card-active{
        border: 1.5px solid #3E58F2;  
    }
  
  .domain-header small{
    background : #787878 !important;
  }
    
    .domain-header{
        border-bottom: 0.5px solid #696969;
    }
    
    .domain-header p{
        color: #F6F5F5;       
    }
     
    .domain-card > p{
        color: #CFCECE;
    }
    
    .form-from button.t2{
        background: #2C48ED;
        border: 1px solid #031897;
        color: #FEFEFE;     
    }
    
    .form-from button.t2:hover{
        color: #2C48ED
        background: transparent;
    }
    
    .form-from button.t3{
       
        background: #F6F5F5;
        border: 1px solid #D6D4D4;
       
        color: #070707;
    }
    
    .form-form button.t3:hover{
       
        background: transparent;
       
    }

    .form-from div.t3{
        background: #151515;
        border: 1px solid #3D3D3D;
        color: #FEFEFE;
    }
    
    .form-form div.t3:hover{
        background: transparent;   
    }
    
    .form-pay{
        background: #3D3D3D;
        border: 1px solid #696969;
    }
    
    .form-pay p{

        font-weight: 500;
        color:#F6F5F5;
    }
}