@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';
}
a{
  color: inherit;
  text-decoration:none;
}
body{
    width: 100%;
    overflow-x: hidden;
}

.logo{
    height: 18px;
}


header{
    display: flex;
    flex-direction: row;
    height: 70px;
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
    border-bottom-left-radius: 44px;
    border-bottom-right-radius: 44px;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    background: linear-gradient(to bottom, rgba(251,251,251,0.2) 0%, 
    rgba(251,251,251,0.4) 100%,rgba(251,251,251,0.2) 0%); 
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 10;
    backdrop-filter: blur(32px);
}

.hero-bg{
     flex-direction: column;
     display: flex;
     gap: 50px;
     background-image: url('/assets/Rectangle\ 1\ \(1\).png');
     background-repeat: no-repeat;
     background-size: contain;
     background-size: 100% 100%;
}

.menu-container{
    position: absolute;
    background-color: white;
    height: 100vh;
    z-index: 20;
    left: -100%;
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    transition: all 400ms ease-in-out;
}

.menu-container ul{
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    list-style-type: none;
    gap: 16px;
    flex-direction: column;
    margin-top: 40px;
}

.close-btn{
    align-self: flex-end;
}

.menu-desk{
    display: none !important;
}

.menu-container li{
    padding: 8px 16px;
    font-size: 20px;
    font-family: 'Inter';
    color: var(--black02);
    font-weight: 500;
    transition: all 400ms ease-in-out;
    cursor: pointer;
}

.menu-container li:hover{
    color:var(--blue04);
}

.menu-container li.active{
    color:var(--blue04);

}

/* .menu-container li.active::after{
    content: '';
    width: 100%;
    height: 2px;
    background-color: var(--blue04);
} */


.text-linear{
    background: linear-gradient(to right, #01106E, 
    #5467D8); 
-webkit-text-fill-color: transparent; 
-webkit-background-clip: text;
background-clip: text;
}

.menu-btn-container{
    display: flex;
    gap: 16px;
    flex-direction: column;
    padding: 40px;
    margin-top: 20px;
  align-items:center;
}


.btn-inline{
    padding: 8px 16px;
    font-weight: 500;
    color: var(--black02);
    background: none;
    border:1px solid var(--black02);
    border-radius: 16px;
    font-size: 16px;
    transition: all 400ms ease-in-out;
}


.btn-inline:hover{
    color: var(--white00);
    background: var(--black02);
}

.btn-main:hover{
    color: var(--black02);
    background: none;
    border:1px solid var(--black02);
}

.btn-main{
    font-size: 16px;
    padding: 8px 16px;
    font-weight: 500;
    color: var(--black02);
    background: var(--black02);
    border:1px solid var(--black02);
    border-radius: 16px;
    color: var(--white00);
    transition: all 400ms ease-in-out;

}


.hero-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 100px 20px 0 20px;
    min-width: 100%;
}


.hero-text{
    font-size: 26px;
    font-weight: 500;
    color:light-dark(var(--black00), #efefec);
    width: 100%;
    text-align: center;
}


.hero-container p{
    font-size: 16px;
    font-weight: 500;
    color: var(--black02);
    width: 100%;
    text-align: center;
}

.hero-container button{
    padding: 8px 12px;
    background-color: #1330DE;
    color: var(--white00);
    font-size: 16px;
    border-radius: 12px;
    outline: none;
    border:1px solid #1330DE;
    margin-top: 16px;
    transition: all 400ms ease-in-out;

}

.hero-container button:hover{
    color: #1330DE;
    background-color: transparent;
    border:1px solid #1330DE;
}

.hero-container img{
    width: 100%;
    margin-top: 20px;
    scale: 1.1;
}

.service-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 64px 0;
    gap: 24px;
    padding: 20px;
}

.service-container .header{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    align-items: center;
    padding: 0px;
}


.service-container .header h1{
    font-size: 26px;
    font-weight: 500;
    color: var(--black00);
    width: 100%;
    text-align: center;   
}

.service-container .header p{
    font-size: 16px;
    font-weight: 500;
    color: var(--black02);
    width: 100%;
    text-align: center;
}


.card-container{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 32px;
    flex-wrap: nowrap;
    padding:0px 20px;
    justify-content: space-between;
    align-items: center;
}





.card{
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background-size: 100% 100%;
    overflow: hidden;
    background-color: #F6F6F6;
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.15);

}


.card .image-container{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    
}


.bg-card{
    position: absolute;
    width: 100%;
    margin-top: 20px;
}


.card-image{
    width: 90%;
    margin: 0 0px 0px 0;
    z-index: 1;
}

.card-image-2{
    width: 100%;
    margin: 0px 0 0 0;
    z-index: 1;
}

.card .desc-container{
    display: flex;
    padding: 12px;
    flex-direction: column;
    gap: 8px;
}
.card .desc-container h1{
    font-size: 22px;
    color: var(--black00);
    font-weight: 500;
}


.card .desc-container p{
    font-size: 16px;
    color: var(---black04);
    font-weight: 500;
}


.success-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
}

.success-container h1{
    font-size: 26px;
    font-weight: 500;
    color: var(--black00);
    width: 100%;
    text-align: center;
    text-transform: capitalize;
}


.success-container p{
    font-size: 16px;
    font-weight: 500;
    color: var(--black02);
    width: 100%;
    text-align: center;
}


.offer-container{

    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 60px;
    background-color: #F6F5F5;
    padding: 20px 0 0 0;
    width: 100%;
    overflow-x: hidden;

}

.offer-container .header{
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    padding: 0 20px;
}

.offer-container .header h1{
    font-size: 26px;
    font-weight: 500;
    color: var(--black00);
    width: 100%;
    text-align: center;
    text-transform: capitalize;
}


.offer-container .header p{
    font-size: 16px;
    font-weight: 500;
    color: var(--black02);
    width: 100%;
    text-align: center;
}



.offer-card{
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 20px;
    width: 100%;

}

.offer-card-2{
    display: flex;
    flex-direction: column-reverse;
    gap: 24px;
    padding: 0 20px;
    width: 100%;
}


.offer-desc{
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    align-self: center;
}


.offer-image{
    width: 100%;
}

.offer-image img{
    width: 100%;
    flex-shrink: 0;
}

.offer-label{
    padding: 4px 8px;
    color: var(--white00);
    background-color: #364BC9;
    border: 0.5px solid #031897;
    border-radius: 8px;
    align-self: self-start;
    font-size: 14px;
    font-weight: 500;
}

.offer-desc .header-text{
    font-size: 26px;
    font-weight: 500;
    color: var(--black00);
    width: 100%;
    text-transform: capitalize;
}


.offer-desc .desc{
    font-size: 16px;
    font-weight: 500;
    color: #4D4D4D;
    width: 100%;
    margin-top: 8px;
}



.offer-btn{
    margin-top: 32px;
    background: #3D3D3D;
    padding: 8px 24px;
    color: #FEFEFE;
    font-size: 28;
    font-weight: 500;
    border-radius: 12px;
    align-self: start;
    transition: all 400ms ease-in-out;
}

.offer-btn:hover{
    color: var(--black02);
    background: none;
    border:1px solid var(--black02);
}

.get-container{
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin:-10px 20px 0px 20px;
    background: #F6F5F5; 
    border-radius: 26px;
    padding: 20px;
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    z-index: 1;
}


.get-container .header-container{
    display: flex;
    flex-direction: column;
    gap: 12px;
}


.get-container button{
    padding: 8px 16px;
    color: var(--white00);
    background-color: #364BC9;
    border: 0.5px solid #031897;
    border-radius: 8px;
    align-self: self-start;
    font-size: 16px;
    font-weight: 500;
    z-index: 1;
    outline: none;
    transition: all 400ms ease-in-out;
}

.get-container button:hover{
    color: #364BC9;
    background-color: transparent;

}

.get-container h1{
    font-size: 26px;
    font-weight: 500;
    color: var(--black00);
    width: 100%;
    text-transform: capitalize;
    z-index: 1;
}


.get-container p{
    font-size: 16px;
    font-weight: 500;
    color: #4D4D4D;
    width: 100%;
    margin-top: 8px;
    z-index: 1;
}




.get-bg{
    position: absolute;
    right: 0;
    top: initial;
    z-index: -1;
    bottom: 0;
    width: 80%;
}

footer{
    background: var(--black00);
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 20px 0 20px;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    
}

.footer-logo{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}


.footer-logo img{
    width: 50%;
}

.footer-logo p{
    color: #CACACA;
    font-size: 16px;
    font-weight: 500;

}

.footer-links{
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding: 20px 0px;
    border-bottom: 1px solid #A1A1A1;
    border-top: 1px solid #A1A1A1;

}


.footer-links ul{
    display: flex;
    flex-direction: column;
    gap: 24px;
    list-style-type: none;
}

.footer-links li{
    color: #CACACA;
    font-size:16px;
    font-weight: 500;
}

.footer-bg{
    width: 100%;
    border-bottom: 1px solid #A1A1A1;
    padding: 20px 0;
}

.copy{
    border-top: 1px solid #A1A1A1;
    color: #CACACA;
    font-size: 16px;
    font-weight: 500;
    padding: 20px 0;
    text-align: center;
}

.container{
    width: 100%;
    min-height: 100vh;
    /* background-image: url(../assets/BG.png); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% 100%;
    display: flex;
    justify-content: flex-start;
    padding: 20px 0;
    align-items: center;
    flex-direction: column;
    gap: 40px;
}


.container > img{
    width: 180px;
}

.form-586{
    width: 100%;
}

.form-680{
    width: 100%;
}.form-750{
    width: 100%;
}

.form-container{
    border-radius: 12px;
    background: #FEFEFE;
    padding: 15px;
    /* box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.15); */
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    
}

.form-from{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}


.form-container .form-header{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}


.form-header h1{
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    color: var(--black00);
    text-transform: capitalize;
}


.form-header p{
    text-align: center;
    color: #3D3D3D;
    font-size: 16px;
    font-weight: 500;
}


.form-item{
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.form-item label{
    font-size: 16px;
    font-weight: 500;
    color: #151515;
}

.form-item .input{
    display: flex;
    flex-direction: row;
    padding: 16px 16px;
    border-radius: 12px;
    background-color: #F6F5F5;
    border: 1px solid #D6D4D4;
    align-items: center;
    gap: 4px;
}
.form-item .input-2{
    display: flex;
    flex-direction: row;
    padding: 16px 16px;
    border-radius: 12px;
    background-color: #F6F5F5;
    border: 1px solid #D6D4D4;
    gap: 4px;
    justify-content: space-between;
    align-items: center;
}

.form-item input{
    width: 100%;
    background: none;
    font-size: 14px;
    border: none;
    outline: none;
    font-family: 500;
}

.span-blue{
    color: #1330DE;
}


.form-input::placeholder{
    color: #787878;
    font-size: 16px;
    font-family: 500;

}

.form-item svg{
    flex-shrink: 0;
    height: 20px;
    width: 20px;
}

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

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


.form-notice{
    font-size: 12px;
    font-weight: 500;
    color: #3D3D3D;
    text-align: center;
}

.showing {
    transform: scale(1) !important; 
    opacity: 1;
     
  @starting-style {
    .showing {
      transform: scale(0) !important;
    }
  }

}

@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;

}

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


.logo{
    height: 34px;
}

header{
    display: flex;
    flex-direction: row;
    height: 120px;
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
    border-bottom-left-radius: 44px;
    border-bottom-right-radius: 44px;
    align-items: center;
    justify-content: space-between;
    padding: 44px;
    top: 0;
    background: linear-gradient(to bottom, rgba(251,251,251,0.2) 0%, 
    rgba(251,251,251,0.4) 100%,rgba(251,251,251,0.2) 0%); 
    position: fixed;
    top: 0;
}

.hero-bg{
     flex-direction: column;
     display: flex;
     gap: 50px;
     background-image: url('/assets/Rectangle\ 1\ \(1\).png');
     background-repeat: no-repeat;
     background-size: contain;
     background-size: 100% 100%;
}
.menu-container{
    position: static;
    background-color: none;
    height: 100%;
    z-index: 20;
    left: 0;
    top: 0;
    width: initial;
    display: flex ;
    flex-direction: row;
    padding: 0;
    justify-content: center;
    margin: 0;
    background-color: transparent;
}

.menu-desk{
    display: flex !important;
}
.menu-container ul{
    display: flex;
    flex-direction: row;
    gap: 15px;
    height: 100%;
    justify-content: center;
    align-items: center;
    list-style-type: none;
    gap: 16px;
    align-items: center;
    margin: 0;
}

.menu-container li{
    padding: 8px 16px;
    font-size: 20px;
    font-family: 'Inter';
    color: var(--black02);
    font-weight: 500;
}

.menu-container li.active{
    color:var(--blue04);

}

.mobile{
    display: none !important;
}

/* .menu-container li.active::after{
    content: '';
    width: 100%;
    height: 2px;
    background-color: var(--blue04);
} */


.text-linear{
    background: linear-gradient(to right, #01106E, 
    #5467D8); 
-webkit-text-fill-color: transparent; 
-webkit-background-clip: text;
}

.menu-btn-container{
    display: flex;
    gap: 16px;
    flex-direction: row;
    height: initial;
    width: initial;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
}


.btn-inline{
    padding: 8px 16px;
    font-weight: 500;
    color: var(--black02);
    background: none;
    border:1px solid var(--black02);
    border-radius: 16px;
    font-size: 20px;
}

.btn-main{
    font-size: 20px;
    padding: 8px 16px;
    font-weight: 500;
    color: var(--black02);
    background: var(--black02);
    border:1px solid var(--black02);
    border-radius: 16px;
    color: var(--white00);
}


.hero-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 180px 40px 0 40px;

}


.hero-text{
    font-size: 56px;
    font-weight: 500;
    color: var(--black00);
    width: 960px;
    text-align: center;
}


.hero-container p{
    font-size: 20px;
    font-weight: 500;
    color: var(--black02);
    width: 960px;
    text-align: center;
}

.hero-container button{
    padding: 12px 24px;
    background-color: #1330DE;
    color: var(--white00);
    font-size: 22px;
    border-radius: 12px;
    outline: none;
    margin-top: 16px;
}

.hero-container img{
    width: 1200px;
    margin-bottom: -40px;
    scale: 1;
}

.service-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 104px 0 64px 0;
    gap: 24px;
    padding:0px 80px;

}

.service-container .header{
    width: 960px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    align-items: center;
}


.service-container .header h1{
    font-size: 56px;
    font-weight: 500;
    color: var(--black00);
    width: 960px;
    text-align: center;   
}

.service-container .header p{
    font-size: 20px;
    font-weight: 500;
    color: var(--black02);
    width: 960px;
    text-align: center;
}


.card-container{
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 32px;
    flex-wrap: nowrap;
    padding:0px 0px;
    justify-content: space-between;
}





.card{
    height: 470px;
    width: 380px;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background-size: 100% 100%;
    overflow: hidden;
    background-color: #F6F6F6;
    

}


.card .image-container{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    
}


.bg-card{
    position: absolute;
    width: 100%;
    margin-top: 20px;
}


.card-image{
    width: 338px;
    margin: 32px 32px 0 32px;
    z-index: 1;
}

.card-image-2{
    width: 338px;
    margin: 0px 32px 32px 32px;
    z-index: 1;
}



.card .desc-container{
    display: flex;
    padding: 8px;
    flex-direction: column;
    gap: 8px;
}
.card .desc-container h1{
    font-size: 32px;
    color: var(--black00);
    font-weight: 500;
}


.card .desc-container p{
    font-size: 20px;
    color: var(---black04);
    font-weight: 500;
}


.success-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0 80px;
}

.success-container h1{
    font-size: 56px;
    font-weight: 500;
    color: var(--black00);
    width: 960px;
    text-align: center;
    text-transform: capitalize;
}


.success-container p{
    font-size: 20px;
    font-weight: 500;
    color: var(--black02);
    width: 960px;
    text-align: center;
}


.offer-container{

    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 60px;
    background-color: #F6F5F5;
    padding: 40px 0px 0 0px;

}

.offer-container .header{
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    padding: 0 80px;

}

.offer-container .header h1{
    font-size: 56px;
    font-weight: 500;
    color: var(--black00);
    width: 960px;
    text-align: center;
    text-transform: capitalize;
}


.offer-container .header p{
    font-size: 20px;
    font-weight: 500;
    color: var(--black02);
    width: 960px;
    text-align: center;
}



.offer-card{
    display: flex;
    flex-direction: row;
    gap: 24px;
    padding: 0 80px;

}

.offer-card-2{
    display: flex;
    flex-direction: row;
    gap: 24px;
    padding: 0 80px;

}


.offer-desc{
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    align-self: center;
}

.offer-image{
    width: 100%;
}

.offer-image img{
    width: 100%;
    flex-shrink: 0;
}

.offer-label{
    padding: 4px 16px;
    color: var(--white00);
    background-color: #364BC9;
    border: 0.5px solid #031897;
    border-radius: 8px;
    align-self: self-start;
    font-size: 20px;
    font-weight: 500;
}

.offer-desc .header-text{
    font-size: 56px;
    font-weight: 500;
    color: var(--black00);
    width: 100%;
    text-transform: capitalize;
}


.offer-desc .desc{
    font-size: 20px;
    font-weight: 500;
    color: #4D4D4D;
    width: 100%;
    margin-top: 8px;
}



.offer-btn{
    margin-top: 32px;
    background: #3D3D3D;
    padding: 8px 24px;
    color: #FEFEFE;
    font-size: 28;
    font-weight: 500;
    border-radius: 12px;
    align-self: start;
}

.get-container{
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin:-100px 80px 0px 80px;
    background: #F6F5F5; 
    border-radius: 56px;
    padding: 40px;
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}


.get-container .header-container{
    display: flex;
    flex-direction: column;
    gap: 12px;
}


.get-container button{
    padding: 8px 16px;
    color: var(--white00);
    background-color: #364BC9;
    border: 0.5px solid #031897;
    border-radius: 8px;
    align-self: self-start;
    font-size: 24px;
    font-weight: 500;
}

.get-container h1{
    font-size: 56px;
    font-weight: 500;
    color: var(--black00);
    width: 960px;
    text-transform: capitalize;
}


.get-container p{
    font-size: 20px;
    font-weight: 500;
    color: #4D4D4D;
    width: 960px;
    margin-top: 8px;
}


.get-bg{
    position: absolute;
    right: 0;
    top: 0;
    width: initial;
}

footer{
    background: var(--black00);
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 40px 80px 0 80px;
    border-top-left-radius: 64px;
    border-top-right-radius: 64px;
}

.footer-logo{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.footer-logo img{
    width: initial;
}

.footer-logo p{
    color: #CACACA;
    font-size: 20px;
    font-weight: 500;

}

.footer-links{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0px;
    border-bottom: 1px solid #A1A1A1;
    border-top: 1px solid #A1A1A1;

}


.footer-links ul{
    display: flex;
    flex-direction: row;
    gap: 24px;
    list-style-type: none;
}

.footer-links li{
    color: #CACACA;
    font-size: 20px;
    font-weight: 500;
}

.footer-bg{
    width: 100%;
    border-bottom: 1px solid #A1A1A1;
    padding: 40px 0;
}

.copy{
    border-top: 1px solid #A1A1A1;
    color: #CACACA;
    font-size: 20px;
    font-weight: 500;
    padding: 40px 0;
    text-align: center;
}



.container{
    width: 100%;
    height: 100vh;
    background-image: url(../assets/BG.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 40px;
}


.container > img{
    width: 300px;
}


.form-586{
    width: 586px;
}

.form-680{
    width: 680px;
}.form-750{
    width: 750px;
}

.form-container{
    border-radius: 56px;
    background: #FEFEFE;
    padding: 40px;
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.form-from{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}


.form-container .form-header{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}


.form-header h1{
    text-align: center;
    font-size: 56px;
    font-weight: 700;
    color: var(--black00);
    text-transform: capitalize;
}


.form-header p{
    text-align: center;
    color: #3D3D3D;
    font-size: 20px;
    font-weight: 500;
}


.form-item{
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.form-item label{
    font-size: 20px;
    font-weight: 500;
    color: #151515;
}

.form-item .input{
    display: flex;
    flex-direction: row;
    padding: 20px 24px;
    border-radius: 12px;
    background-color: #F6F5F5;
    border: 1px solid #D6D4D4;
    gap: 4px;
}
.form-item .input-2{
    display: flex;
    flex-direction: row;
    padding: 20px 24px;
    border-radius: 12px;
    background-color: #F6F5F5;
    border: 1px solid #D6D4D4;
    gap: 4px;
    justify-content: space-between;
}

.form-item input{
    width: 100%;
    background: none;
    font-size: 16px;
    border: none;
    outline: none;
    font-family: 500;
}

.span-blue{
    color: #1330DE;
}


.form-input::placeholder{
    color: #787878;
    font-size: 16px;
    font-family: 500;

}

.form-item svg{
    flex-shrink: 0;
    width: initial;
    height: initial;
}

.form-from button.t1{
    height: 64px;
    border-radius: 12px;
    background: #1330DE;
    border: 1px solid #031897;
    font-size: 24px;
    font-weight: 700;
    color: #FEFEFE;
    transition: all 400ms;
}

.form-from button.t1:hover{
    height: 64px;
    border-radius: 12px;
    color: #1330DE;
    background: transparent;
    font-size: 24px;
    font-weight: 700;
}


.form-notice{
    font-size: 16px;
    font-weight: 500;
    color: #3D3D3D;
}

}



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

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

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


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

}


.logo{
    height: 18px;
   filter: brightness(0) invert(1);
}


header{ 
    
    backdrop-filter: blur(0px);
  background:black;
}

.hero-bg{
     background-image: url('/assets/Rectangle\ 1\ \(4\).png');
}
  
  .menu-opener rect{
    fill:white;
  }

.menu-container{
    background-color: black;
}

.close-btn{
    align-self: flex-end;
}

.menu-desk{
    display: none !important;
}

.menu-container li{
   color: var(--black02); 
}

.menu-container li:hover{
    color:var(--blue04);
}

.menu-container li.active{
    color:#3E58F2;
}


.text-linear{
    background: linear-gradient(to right, #8798FF, 
    #0822BC); 
-webkit-text-fill-color: transparent; 
-webkit-background-clip: text;
background-clip: text;
}


.btn-inline{
    color: var(--black02);
    border:1px solid var(--black02);
   
}


.btn-inline:hover{
    color: var(--white00);
    background: var(--black02);
}

.btn-main:hover{
    color: var(--black02);
    background: none;
    border:1px solid var(--black02);
}

.btn-main{
    
    color: #FEFEFE;
    background: #4D4D4D;
   border:none;
   
}

.hero-text{
  color:#FEFEFE;
}


.hero-container p{
    color: #D6D4D4;
}

.hero-container button{
    color: #FEFEFE;
}

.hero-container button:hover{
    color: #1330DE;
    background-color: transparent;
    border:1px solid #1330DE;
}


.service-container .header h1{
    color: var(--black00);  
}

.service-container .header p{

    color: var(--black02);
}


.card{
    background-color: #232323;
  
}




.card .desc-container h1{
   
    color: var(--black00);
    
}


.card .desc-container p{
   
    color: #CFCECE;
   
}


.success-container h1{
    color: var(--black00);
}


.success-container p{
    color: #D6D4D4;
}


.offer-container{
    background-color: black;

}


.offer-container .header h1{
    color: var(--black00);
}


.offer-container .header p{
    color: var(--black02);
   
}


.offer-desc{
   color:#D6D4D4;
}

.offer-label{
    color: #FEFEFE;

}

.offer-desc .header-text{
    color: var(--black00);
   
}


.offer-desc .desc{
    color: #D6D4D4;
}


.offer-btn{
    background: #3D3D3D;
    color: #FEFEFE;
    transition: all 400ms ease-in-out;
}

.get-container{
    background: #2C2C2C;
}

  
.get-container button{
    color: white;
   
}

.get-container button:hover{
    color: #364BC9;
    background-color: transparent;

}

.get-container h1{
    color: var(--black00);
}


.get-container p{
    color: #CFCECE;
   
}




.get-bg{
   
  filter:blur(3px);
}

footer{
    background: black;
    
  border-top:3px solid #3D3D3D;
    
}

/* stop heere */

.copy{
    border-top: 1px solid #A1A1A1;
    color: #CACACA;
    text-align: center;
}

.container{
    background-image: url(../assets/bg-2.png); 
}


.container > img{
    width: 180px;
  filter: brightness(0) invert(1);

}


.form-container{
  
    background: #2C2C2C;
  
    
}





.form-header h1{
   
    color: var(--black00);
  
}


.form-header p{
    text-align: center;
    color: #D6D4D4;
}


.form-item{
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.form-item label{
    color: #F6F5F5;
}

.form-item .input{
    background-color: #3D3D3D;
    border: 1px solid #696969;
}
.form-item .input-2{
     background-color: #3D3D3D;
    border: 1px solid #696969;
}

.form-item input{
  color:#F6F5F5;
}

.span-blue{
    color: #1330DE;
}


.form-input::placeholder{
    color: #787878;
    font-size: 16px;
    font-family: 500;

}



.form-from button.t1{
    height: 54px;
    border-radius: 12px;
    background: #2C48ED;
    border: 1px solid #031897;
    font-size: 16px;
    font-weight: 700;
    color: #FEFEFE;
    transition: all 400ms;
}

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


.form-notice{
    font-size: 12px;
    font-weight: 500;
    color: #D6D4D4;
    text-align: center;
}


.close-btn.mobile path{
   
    fill:#FEFFFF;
    
}

.showing {
    transform: scale(1) !important; 
    opacity: 1;
     
  @starting-style {
    .showing {
      transform: scale(0) !important;
    }
  }

}


}