*,
*::after,
*::before {
    box-sizing: border-box;
}
:root {
    --aspect-ratio: 0.56vw;
}
      
.search-container {
    position: relative;
    display: inline-block;
  }
  
  .search-iconss, .close-iconss {
      position: absolute;
      top: calc(-4*var(--aspect-ratio));
      padding: calc(2*var(--aspect-ratio));
      cursor: pointer;
      opacity: 1;
      transition: opacity 0.3s ease-in-out;
      color: white;
      right: 0px;
      font-size: calc(2.5*var(--aspect-ratio));
  }
  .close-iconss {
    opacity: 0;
    display: none;
  }
  
  .search-input {
      position: absolute;
      top: -34px;
      right: 32px;
      width: 0;
      padding: 10px;
      opacity: 0;
      transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }
  .search-container:hover .search-iconss {
    opacity: 0;
  }
  
  .search-container:hover .search-input {
    width: 700px; /* Set your desired input width here */
    opacity: 1;
  }
  
  .search-container:hover .close-iconss {
    opacity: 1;
    display: block;
  }
.logo-img {
    width: calc( 10 * var(--aspect-ratio));
    height: calc( 10 * var(--aspect-ratio));
    margin-left: calc( 4 * var(--aspect-ratio));
    margin-top: calc( 2 * var(--aspect-ratio));
}


body{
    margin: 0;
}

.wrapper {
    max-width: 100%;
    margin: 0 auto;
}

.main-section {
    background: linear-gradient(90deg, #000 1.66%, #000230 28.66%, #000 63.44%);
    width: 100%;
    height: calc(85.3*var(--aspect-ratio));
    margin-top: calc(0*var(--aspect-ratio));
    position: relative;
}

.header {
    padding: calc( .5 * var(--aspect-ratio)) 0;
    width: 100%;
    background-color: #000;
}

.header.scrolled {
    background: #000;
    border-bottom: 1px solid #8b8b8b;
    position: fixed;
    z-index: 100;
    width: 100%;
}

.header .wrapper {
    display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.header .left-side {
    position: relative;
    display: flex;
}

.header .left-side img {
  width: 100%;
  height: 100%;
}

.nav-list {
	position: relative;
	padding: calc(.5*var(--aspect-ratio)) calc(3*var(--aspect-ratio)) calc(3*var(--aspect-ratio)) calc(6*var(--aspect-ratio));
	flex-shrink: 0;
}

.list-item {
    display: flex;
    gap: calc( 4 * var(--aspect-ratio));
    padding-top: calc( 2 * var(--aspect-ratio));
    list-style: none;
    padding-right: calc( 0 * var(--aspect-ratio));
}

.nav-list .list-item li a {
    list-style-type: none;
    text-decoration: none;
    color: #ECECEC;
    font-family: "Istok Web" ,sans-serif;
    font-size: calc(2.5*var(--aspect-ratio));
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    flex-shrink: 0;
}

/* .header .search-btn {
    padding: 25px 0px 0px 30px;
    position: relative;
    flex-shrink: 0;
} */

.m-box{
    width:100%;
}

.header .search-btn {
    padding: calc(3*var(--aspect-ratio)) 0px 0px calc(4*var(--aspect-ratio));
    position: relative;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header .search-button {
    position: relative;
    border: none;
    padding: 0px calc(1*var(--aspect-ratio));
    background-color: #1d1d1d;
    flex-shrink: 0;
    right: calc(7*var(--aspect-ratio));
}
.header .search-button img {
    height: calc(3*var(--aspect-ratio));
    width: calc(3*var(--aspect-ratio));
    position: relative;
    flex-shrink: 0;
}

.header .right-side {
    position: relative;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	padding-right: 2%;
}

.help-btn {
    position: relative;
    padding: calc(2*var(--aspect-ratio)) calc(2*var(--aspect-ratio)) calc(1*var(--aspect-ratio)) calc(3*var(--aspect-ratio));
    flex-shrink: 0;
}
.help-b {
    margin: calc(0*var(--aspect-ratio));
    border: none;
    background-color: #fff;
    padding: calc(.7*var(--aspect-ratio)) calc(1*var(--aspect-ratio));
    border-radius:50%;
    flex-shrink: 0;
}
.help-b img {
    width: calc(3*var(--aspect-ratio))!important;
    height: calc(3*var(--aspect-ratio))!important;
    align-items: center;
    flex-shrink: 0;
}

.profile-btn {
    position: relative;
    padding: calc(1*var(--aspect-ratio)) calc(2*var(--aspect-ratio)) calc(0*var(--aspect-ratio)) calc(2*var(--aspect-ratio));
    flex-shrink: 0;
}

.profile-b {
    border: none;
    background-color: #fff;
    padding: calc( .9 * var(--aspect-ratio))  calc( 1.3 * var(--aspect-ratio));
    border-radius: 50%;
    flex-shrink: 0;
}
.profile-b img{
    
        width: calc( 2.6 * var(--aspect-ratio));
        height: calc( 2.6 * var(--aspect-ratio));
    
}

.help-b img {
    width: calc(3*var(--aspect-ratio))!important;
    height: calc(3*var(--aspect-ratio))!important;
    align-items: center;
    flex-shrink: 0;
}
/* 
.download-btn {
    position: relative;
    padding: 10px 20px 0px 10px;
    flex-shrink: 0;
} */
.download-btn {
    position: relative;
    padding: calc(1*var(--aspect-ratio)) calc(2*var(--aspect-ratio)) 0px calc(2.5*var(--aspect-ratio));
    flex-shrink: 0;
}

.download-b {
    border: none;
    background: none;
    padding: calc(1*var(--aspect-ratio));
    color: #025ea4;
    font-family: "Istok Web" ,sans-serif;
    font-size: calc(2.5*var(--aspect-ratio));
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    flex-shrink: 0;
}

/* .sign-btn {
    position: relative;
    padding: 10px 20px 10px 10px;
    flex-shrink: 0;
    margin-left: -20px;
    margin-top: -5px;
} */

.sign-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.signup-b {
	border: none;
	border-radius: calc(3*var(--aspect-ratio));
	background: linear-gradient(90deg, #00419c 0%, #000056 95.23%);
	padding: calc(1.5*var(--aspect-ratio)) calc(5*var(--aspect-ratio));
	color: #fff;
	font-family: "Istok Web" ,sans-serif;
	font-size: calc(1.8*var(--aspect-ratio));
	font-style: normal;
	font-weight: 700;
	flex-shrink: 0;
	line-height: normal;
	margin-left: calc(1* var(--aspect-ratio));
}

.hero-section {
    height: auto !important;
    margin-bottom: 100px !important;
    width: 100%;
    position: absolute;
    display: flex;
    padding: 0;
    flex-direction: row;
}

.hero-section .left-secction {
    display: flex;
    flex-direction: column;
    position: relative;
    flex-shrink: 0;
}

/* .hero-section .main-para {
    display: flex;
    flex-direction: column;
    margin-left: -500px;
    margin-top: 70px;
    padding: 0px
} */
.hero-section .main-para {
	flex-direction: column;
	margin-left: calc(3* var(--aspect-ratio));
	margin-top: calc(7* var(--aspect-ratio));
	padding: 0px;
}

.hero-section .main-para h3 {
    color: #FFF;
    font-family: "Kanit" ,sans-serif;
    font-size: calc(5*var(--aspect-ratio));
    font-weight: 700;
    line-height: calc(6*var(--aspect-ratio));
    flex-shrink: 0;
}

.hero-section .main-para p {
    color: #BDBCBC;
    font-family: "Kanit" ,sans-serif;
    font-size: calc(2.6*var(--aspect-ratio));
    font-weight: 500;
    margin-top: calc(1*var(--aspect-ratio));
}

/* .hero-section .sign-up-section {
    padding: 0px 10px 80px 10px;
    margin-left: -500px;
    flex-shrink: 0;
    border-radius: 30px;
    background: rgba(7, 0, 56, 0.404);
    box-shadow: 3px 3px 10px 0px rgba(23, 15, 78, 0.77);

} */
.prents-boxes{
    width: 100%;
    display: flex;
    justify-content:space-around ;
    align-items: center;
}

.hero-section .sign-up-section {
	padding: 0px calc(1* var(--aspect-ratio)) calc(10* var(--aspect-ratio)) calc(3* var(--aspect-ratio));
	flex-shrink: 0;
	border-radius: 30px;
	background: rgba(7, 0, 56, 0.404);
	box-shadow: 3px 3px 10px 0px rgba(23, 15, 78, 0.77);
}

.hero-section .sign-up-section p {
    color: #fcc100;
    font-family: "Kanit" ,sans-serif;
    font-size: calc(3*var(--aspect-ratio));
    font-style: normal;
    font-weight: 600;
    line-height: calc(10*var(--aspect-ratio));
}

.hero-section .sign-up-section span {
    color: #BDBCBC;
    font-family: "Kanit" ,sans-serif;
    font-size: calc(2.3*var(--aspect-ratio));
    font-weight: 600;
    margin-top: calc(-4*var(--aspect-ratio));
    position: absolute;
}

.hero-section .sign-up-section .btn-section {
	position: absolute;
	display: flex;
	margin-top: calc(2* var(--aspect-ratio));
	display: flex;
	justify-content: space-around;
	width: calc(47* var(--aspect-ratio));
}

.sign-up-btn {
	width: calc(19*var(--aspect-ratio));
	height: calc(6*var(--aspect-ratio));
	border: none;
	flex-shrink: 0;
	border-radius: calc(1* var(--aspect-ratio));
	background: linear-gradient(90deg, #00419c 0%, #000056 95.23%);
	color: #FFF;
	font-family: "Istok Web" ,sans-serif;
	font-size: calc(2*var(--aspect-ratio));
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.learn-btn {
	width: calc(19*var(--aspect-ratio));
	height: calc(6*var(--aspect-ratio));
	flex-shrink: 0;
	border-radius: calc(1* var(--aspect-ratio));
	border: 1px solid #FFF;
	background: none;
	color: #FFF;
	font-family: "Istok Web" ,sans-serif;
	font-family: "Istok Web" ,sans-serif;
	font-size: calc(2*var(--aspect-ratio));
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

/* .hero-section .right-section {
    margin-left: 100px;
    margin-top: -400px;
    flex-shrink: 0;
    position: absolute;
} */
.hero-section .right-section {
    flex-shrink: 0;
    width: calc(35*var(--aspect-ratio));
    height: fit-content;
    margin-top: calc(7*var(--aspect-ratio));
}

.right-section img {
    flex-shrink: 0;
  width: 100%;
  height: 100%;
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.right-section img:hover {
    transform: scale(1.1);
}

.mobile-header {
    display: none;
}

.header-container {
    display: none;
}

/* Default styles for all screen sizes */

/* Styles for screens up to 500px */
@media(max-width: 500px){
    /* CSS rules for screens up to 500px */
   .main-section {
    background: linear-gradient(90deg, #000 1.66%, #000230 28.66%, #000 63.44%);
    width: 100%;
    height: calc(425*var(--aspect-ratio))!important;
    margin-top: calc(0*var(--aspect-ratio));
    position: relative;
}
.g-recaptcha div{
    width: 288px !important;
    height: 78px !important;
    position: relative !important;
    right: 16px !important;
    top: 27px !important;
}


    .mobile-header {
        display: block;
        width: 100%;
        height: 100px;
        background-color: #000;
        position: relative;
    }

    .mobile-header .wrapper {
        width: 100%;
        position: absolute;
        background-color: #000;
        height: 90px;
    }

    .mobile-header.scrolled {
        background: #000;
        width: 100%;
        height: 100px;
        border-bottom: 1px solid #8b8b8b;
        position: fixed;
        z-index: 1000;
        top: 0%!important;
    }

    .mobile-header .main-menu {
        position: relative;
        display: flex;
        margin-top: 0px;
        justify-content: space-around;
        align-items: center;;
    }

    .mobile-header .main-menu .logo img {
        position: relative;
        z-index: 100;
        margin-top: 26px;
    }

    .mobile-header .main-menu .btn-grp {
        display: flex;
        flex-direction: row;
        gap: 10px;
        margin-top: calc(4*var(--aspect-ratio));
    }   

    /* .mobile-header .signup-b {
        margin-left: 150px;
        margin-top: 5px;
        border: none;
        border-radius: 30px;
        background: linear-gradient(90deg, #00419c 0%, #000056 95.23%);
        width: 110px;
        height: 40px;
        color: #fff;
        font-family: "Istok Web" ,sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        
    } */
    .mobile-header .signup-b {
        border: none;
        border-radius: 30px;
        background: linear-gradient(90deg, #00419c 0%, #000056 95.23%);
        width: 110px;
        height: 40px;
        color: #fff;
        font-family: "Istok Web" ,sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        
    }
/* 
    .main-menu .menu-btn {
        border-radius: 50%;
        width: 32px;
        height: 30px;
        border: none;
        background-color: #fff;
        margin-top: 20px;
        margin-left: -20px;
        cursor: pointer;
    } */
    .main-menu .menu-btn {
        border-radius: 50%;
        width: 32px;
        height: 30px;
        border: none;
        background-color: #fff;
        margin-top: 7px;
        margin-left: 11px;
        cursor: pointer;
    }

    .main-menu .menu-btn img {
        width: 14px;
        height: 16px;
    }

    .header-container.active {
        width: 100%;
        height: fit-content;
        background-color: #1d1d1d;
        display: block;
        transition: all 400ms ease;
        z-index: 200;
        position: absolute;
        margin-top: -100px;

    }

    .header-container {
        display: none;
    }

    .header-container .mobile-header-1 {
        display: block;
        width: 100%;
        height: 80px;
        background-color: #1d1d1d;
        border-bottom: 1px solid #8b8b8b;
        position: relative;
        z-index: 200;
    }

    .header-container .main-menu {
        display: flex;
        margin-left: 20px;
    }

    .header-container .main-menu img {
        position: relative;
        z-index: 100;
    }

    .header-container .main-menu .btn-grp {
        display: flex;
        flex-direction: row;
        gap: 10px;
        margin-top: 10px;
    }   

    .header-container .signup-b {
        margin-left: 41px;
        margin-top: 4px;
        border: none;
        border-radius: 30px;
        background: linear-gradient(90deg, #00419c 0%, #000056 95.23%);
        width: 120px;
        height: 42px;
        color: #fff;
        font-family: "Istok Web" ,sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .header-container .main-menu .close-btn {
        border-radius: 50%;
        width: 30px;
        height: 28px;
        border: none;
        background-color: #fff;
        margin-top: 17px;
        margin-left: 2px;
        cursor: pointer;
    }

    .header-container .main-menu .close-btn img {
        width: 14px;
        height: 16px;
    }

     .header-container .nav-list {
        position: relative;
        margin-left: -40px;
        margin-top: -10px;
    }
    
    .header-container .list-item {
        list-style-type: none;
        display: flex;
        flex-direction: column;
        gap: 5px;
        flex-shrink: 0;
        
    }
    
 
    .header-container .nav-list .list-item li .l-item {
        list-style-type: none;
        text-decoration: none;
        background: transparent;
        width:calc(160*var(--aspect-ratio)) ;
        height: 50px;
        border: none;
        border-bottom: 1px solid #8b8b8b;
        color: #ECECEC;
        font-family: "Istok Web" ,sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-align: left;
        flex-shrink: 0;
    }
    .nav-list {
        position: relative;
        padding: 10px 10px 10px 13px;
        flex-shrink: 0;
    }

    .header-container form {
        margin-left: 13px;
        margin-top: 20px;
        position: relative;
    }

    .header-container form input {
        font-family: "Tstok Web" , sans-serif;
        font-weight: normal;
        font-size: 16px;
        line-height: 200%;
        border-radius: 8px;
        padding: 4px 10px 2px 60px;
        border: none;
           width: calc(160*var(--aspect-ratio));
        color: #fff;
        border: 0.5px solid #8b8b8b;
        background-color: transparent;
    }
    /* .header-container form input {
        font-family: "Tstok Web" , sans-serif;
        font-weight: normal;
        font-size: 16px;
        line-height: 200%;
        border-radius: 8px;
        padding: 4px 10px 2px 60px;
        border: none;
        width: calc(160*var(--aspect-ratio));
        color: #fff;
        border: 0.5px solid #8b8b8b;
        background-color: transparent;
    } */

    .header-container .search-button {
        position: absolute;
        left: -15px;
        top: 50%;
        transform: translateY(-50%);
        background-color: transparent;
        border-radius: 8px;
        padding: 4px 32px;
        border: 0;
        cursor: pointer;
    }

    .header-container .search-button img {
        width: 20px;
        height: 22px;
    }

    .header-container .last-nav {
        position: relative;
        width: 100%;
        height: 70px;
        background-color: #000;
        margin-top: -10px;
    }

    .header-container .last-nav .btn-section {
        display: flex;
        justify-content: space-between;
    }

    .header-container .download-b {
        margin-left: 30px;
        margin-top: 10px;
        border: none;
        background: none;
        width: 100px;
        height: 35px;
        color: #DD009F;
        font-family: "Istok Web" ,sans-serif;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .header-container .login-b {
        margin-left: 30px;
        margin-top: 20px;
        border: none;
        background: none;
        width: 100px;
        height: 35px;
        color: #fff;
        font-family: "Istok Web" ,sans-serif;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .main-section {
        background: linear-gradient(90deg, #000 1.66%, #000230 28.66%, #000 63.44%);
        width: 100%;
        height: calc(85.3*var(--aspect-ratio));
        margin-top: calc(0*var(--aspect-ratio));
        position: relative;
    }

    .hero-section .wrapper {
        position: relative;
        width: 360px;
        background-color:transparent;
    }
    
    .hero-section .left-secction {
        display: flex;
        flex-direction: column;
    }
    
    /* .hero-section .main-para {
        display: flex;
        flex-direction: column;
        margin-left: 60px;
        margin-top: 60px;
    } */
    .hero-section .main-para {
        display: flex;
        flex-direction: column;
        margin-left: 24px;
        margin-top: 60px;
    }
    
    .hero-section .main-para h3 {
        color: #FFF;
        font-family: "Kanit" ,sans-serif;
        font-size: 30px;
        font-weight: 700;
        line-height: 35px; /* 100% */
    }
    
    .hero-section .main-para p {
        color: #BDBCBC;
        font-family: "Kanit" ,sans-serif;
        font-size: 14px;
        font-weight: 500;
        margin-top: -10px;
    }

    .main-para span {
        margin-top: -60px;
    }

    .hero-section .sign-up-section {
        width: 100%;
        height: 180px;
        flex-shrink: 0;
        border-radius: 30px;
        background: rgba(7, 0, 56, 0.404);
        box-shadow: 3px 3px 10px 0px rgba(23, 15, 78, 0.77);
        /* margin-left: 35px; */
        margin-top: 50px;
    }
    
    .hero-section .sign-up-section p {
        color: #FCc100;
        font-family: "Kanit" ,sans-serif;
        font-size: 17px;
        font-style: normal;
        font-weight: 600;
        line-height: 30px; /* 285.714% */
        margin-left: 20px;
    }
    
    .hero-section .sign-up-section span {
        color: #BDBCBC;
        font-family: "Kanit" ,sans-serif;
        font-size: 14px;
        font-weight: 600;
        margin-left: 20px;
        margin-top: -10px;
        position: absolute;
    }
    
    .hero-section .sign-up-section .btn-section {
        position: absolute;
        display: flex;
        margin-left: 15px;
        margin-top: 30px;
        gap: 10px;
    }
    
    .sign-up-btn {
        width: 140px;
        height: 42px;   
        border: none;
        flex-shrink: 0;
        border-radius: 30px;
        background: linear-gradient(90deg, #00419c 0%, #000056 95.23%);
        color: #FFF;
        font-family: "Istok Web" ,sans-serif;
        font-size: 13px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
    
    .learn-btn {
        width: 140px;
        height: 42px;
        border-radius: 30px;
        border: 1px solid #FFF;
        background: none;
        color: #FFF;
        font-family: "Istok Web" ,sans-serif;
        font-size: 13px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        flex-shrink: 0;
    }

    .right-section img {
        position: relative;
        height: 100%;
        width: 100%;
    }
    .hero-section .right-section {
      
        flex-shrink: 0;
        width: 93%;
        height: fit-content;
        margin-top: 65px;
      
    }
    .prents-boxes {
        width: 100%;
        display: block;
        justify-content: space-around;
        align-items: center;
    }
    
}

/* Styles for screens between 501px and 700px */
@media(max-width: 700px) and (min-width: 501px){
     /* CSS rules for screens up to 700px */
     .main-section {
        background: linear-gradient(90deg, #000 1.66%, #000230 28.66%, #000 63.44%);
        width: 100%;
        height: calc(85.3*var(--aspect-ratio));
        margin-top: calc(0*var(--aspect-ratio));
        position: relative;
    }

    .mobile-header {
        display: block;
        width: 100%;
        height: 100px;
        background-color: #000;
        position: relative;
    }

    .mobile-header .wrapper {
        width: 100%;
        position: absolute;
        background-color: #000;
        height: 90px;
    }

    .mobile-header.scrolled {
        background: #000;
        width: 100%;
        height: 100px;
        border-bottom: 1px solid #8b8b8b;
        position: fixed;
        z-index: 1000;
        top: 0%!important;
    }

    .mobile-header .main-menu {
        position: relative;
        display: flex;
        margin-top: 0px;
        justify-content: space-around;
        align-items: center;;
    }

    .mobile-header .main-menu .logo img {
        position: relative;
        z-index: 100;
        margin-top: 10px;
    }

    .mobile-header .main-menu .btn-grp {
        display: flex;
        flex-direction: row;
        gap: 10px;
        margin-top: calc(4*var(--aspect-ratio));
    }   

    .mobile-header .signup-b {
        border: none;
        border-radius: 30px;
        background: linear-gradient(90deg, #00419c 0%, #000056 95.23%);
        width: 110px;
        height: 40px;
        color: #fff;
        font-family: "Istok Web" ,sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        
    }

    .main-menu .menu-btn {
        border-radius: 50%;
        width: 32px;
        height: 30px;
        border: none;
        background-color: #fff;
        margin-top: 6px;
        margin-left: -4px;
        cursor: pointer;
    }

    .main-menu .menu-btn img {
        width: 14px;
        height: 16px;
    }

    .header-container.active {
        width: 100%;
        height: 610px;
        background-color: #1d1d1d;
        display: block;
        transition: all 400ms ease;
        z-index: 200;
        position: absolute;
        margin-top: -100px;
    }

    .header-container {
        display: none;
    }

    .header-container .mobile-header-1 {
        display: block;
        width: 100%;
        height: 80px;
        background-color: #1d1d1d;
        border-bottom: 1px solid #8b8b8b;
        position: relative;
        z-index: 200;
    }

    .header-container .main-menu {
        display: flex;
        margin-left: 20px;
    }

    .header-container .main-menu img {
        position: relative;
        z-index: 100;
    }

    .header-container .main-menu .btn-grp {
        display: flex;
        flex-direction: row;
        gap: 10px;
        margin-top: 10px;
    }   

    .header-container .signup-b {
        margin-left: 199px;
        margin-top: 4px;
        border: none;
        border-radius: 30px;
        background: linear-gradient(90deg, #00419c 0%, #000056 95.23%);
        width: 120px;
        height: 42px;
        color: #fff;
        font-family: "Istok Web" ,sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .header-container .main-menu .close-btn {
        border-radius: 50%;
        width: 30px;
        height: 28px;
        border: none;
        background-color: #fff;
        margin-top: 17px;
        margin-left: -20px;
        cursor: pointer;
    }

    .header-container .main-menu .close-btn img {
        width: 14px;
        height: 16px;
    }

     /* .header-container .nav-list {
        position: relative;
        margin-left: -40px;
        margin-top: -10px;
    } */
    .header-container .nav-list {
        position: relative;
        margin-left: -25px;
        margin-top: -10px;
    }
    
    .header-container .list-item {
        list-style-type: none;
        display: flex;
        flex-direction: column;
        gap: 5px;
        flex-shrink: 0;
        
    }
    
  .header-container .nav-list .list-item li .l-item {
        list-style-type: none;
        text-decoration: none;
        background: transparent;
        width: calc(160*var(--aspect-ratio));
        height: 50px;
        border: none;
        border-bottom: 1px solid #8b8b8b;
        color: #ECECEC;
        font-family: "Istok Web" ,sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-align: left;
        flex-shrink: 0;
    } 

    /* .header-container form {
        margin-left: 30px;
        margin-top: 20px;
        position: relative;
    } */
    .header-container form {
    margin-left: 7px;
    margin-top: 20px;
    position: relative;}

 
    .header-container form input {
        font-family: "Tstok Web" , sans-serif;
        font-weight: normal;
        font-size: 16px;
        line-height: 200%;
        border-radius: 8px;
        padding: 4px 10px 2px 60px;
        border: none;
           width: calc(160*var(--aspect-ratio));
        color: #fff;
        border: 0.5px solid #8b8b8b;
        background-color: transparent;
    }
    /*
    .header-container form input {
        font-family: "Tstok Web" , sans-serif;
        font-weight: normal;
        font-size: 16px;
        line-height: 200%;
        border-radius: 8px;
        padding: 8px 10px 4px 458px;
        border: none;
        width: 360px;
        color: #fff;
        border: 0.5px solid #8b8b8b;
        background-color: transparent;
    } */
    .header-container form {
        margin-left: 37px;
        margin-top: 20px;
        position: relative;}

    .header-container .search-button {
        position: absolute;
        left: -15px;
        top: 50%;
        transform: translateY(-50%);
        background-color: transparent;
        border-radius: 8px;
        padding: 8px 32px;
        border: 0;
        cursor: pointer;
    }

    .header-container .search-button img {
        width: 20px;
        height: 22px;
    }

    .header-container .last-nav {
        position: relative;
        width: 100%;
        height: 70px;
        background-color: #000;
        margin-top: 15px;
    }

    .header-container .last-nav .btn-section {
        display: flex;
        justify-content: space-between;
    }

    .header-container .download-b {
        margin-left: 30px;
        margin-top: 10px;
        border: none;
        background: none;
        width: 100px;
        height: 35px;
        color: #DD009F;
        font-family: "Istok Web" ,sans-serif;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .header-container .login-b {
        margin-left: 30px;
        margin-top: 20px;
        border: none;
        background: none;
        width: 100px;
        height: 35px;
        color: #fff;
        font-family: "Istok Web" ,sans-serif;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .main-section .hero-section {
        height: auto;
        width: 100%;
        position: relative;
        margin-top: -20px;
        display: flex;
        flex-direction: column;
    }

    .hero-section .wrapper {
        position: relative;
        width: 360px;
        background-color:transparent;
    }
    
    .hero-section .left-secction {
        display: flex;
        flex-direction: column;
    }
    
    .hero-section .main-para {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        margin-top: 60px;
    }
    
    .hero-section .main-para h3 {
        color: #FFF;
        font-family: "Kanit" ,sans-serif;
        font-size: 36px;
        font-weight: 700;
        line-height: 35px; /* 100% */
    }
    
    .hero-section .main-para p {
        color: #BDBCBC;
        font-family: "Kanit" ,sans-serif;
        font-size: 15px;
        font-weight: 500;
        margin-top: -20px;
    }

    .main-para span {
        margin-top: -60px;
    }

    .hero-section .sign-up-section {
        width: 400px;
        height: 180px;
        flex-shrink: 0;
        border-radius: 30px;
        background: rgba(7, 0, 56, 0.404);
        box-shadow: 3px 3px 10px 0px rgba(23, 15, 78, 0.77);
        margin-left: -10px;
        margin-top: 50px;
    }
    
    .hero-section .sign-up-section p {
        color: #FCc100;
        font-family: "Kanit" ,sans-serif;
        font-size: 17px;
        font-style: normal;
        font-weight: 600;
        line-height: 60px; /* 285.714% */
        margin-left: 20px;
    }
    
    .hero-section .sign-up-section span {
        color: #BDBCBC;
        font-family: "Kanit" ,sans-serif;
        font-size: 14px;
        font-weight: 600;
        margin-left: 20px;
        margin-top: -20px;
        position: absolute;
    }
    
    .hero-section .sign-up-section .btn-section {
        position: absolute;
        display: flex;
        margin-left: 15px;
        margin-top: 30px;
        gap: 10px;
    }
    
    .sign-up-btn {
        width: 140px;
        height: 42px;   
        border: none;
        flex-shrink: 0;
        border-radius: 30px;
        background: linear-gradient(90deg, #00419c 0%, #000056 95.23%);
        color: #FFF;
        font-family: "Istok Web" ,sans-serif;
        font-size: 13px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
    
    .learn-btn {
        width: 140px;
        height: 42px;
        border-radius: 30px;
        border: 1px solid #FFF;
        background: none;
        color: #FFF;
        font-family: "Istok Web" ,sans-serif;
        font-size: 13px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        flex-shrink: 0;
    }

    .right-section img {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .hero-section .right-section {
        flex-shrink: 0;
        position: absolute;
        top: 115%;
        width: 419px;
        height: 600px;
        left: -4%;
    }

}

/* Styles for screens between 501px and 900px */
@media(max-width: 900px) and (min-width: 701px){
    /* CSS rules for screens between 501px and 900px */

    .main-section {
        width: 100%;        
        background: linear-gradient(90deg, #000 1.66%, #000230 28.66%, #000 63.44%);
        height: fit-content;
        margin-top: 0px;
        margin-left: 0px;
        position: absolute;
    }

    .mobile-header {
        display: block;
        width: 100%;
        height: 100px;
        background-color: #000;
        position: relative;
    }

    .mobile-header .wrapper {
        width: 100%;
        position: absolute;
        background-color: #000;
        height: 90px;
    }

    .mobile-header.scrolled {
        background: #000;
        width: 100%;
        height: 100px;
        border-bottom: 1px solid #8b8b8b;
        position: fixed;
        z-index: 1000;
        top: 0%!important;
    }

    .mobile-header .main-menu {
        position: relative;
        display: flex;
        margin-top: 0px;
        justify-content: space-between;
        align-items: center;;
    }

    .mobile-header .main-menu .logo img {
        position: relative;
        z-index: 100;
        margin-top: 10px;
    }

    .mobile-header .main-menu .btn-grp {
        display: flex;
        flex-direction: row;
        gap: 10px;
        margin-top: calc(4*var(--aspect-ratio));
        margin-right: 30px;
    }   
/* 
    .mobile-header .signup-b {
        margin-left: 600px;
        margin-top: 5px;
        border: none;
        border-radius: 30px;
        background: linear-gradient(90deg, #00419c 0%, #000056 95.23%);
        width: 110px;
        height: 40px;
        color: #fff;
        font-family: "Istok Web" ,sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        
    } */
    .mobile-header .signup-b {
        border: none;
        border-radius: 30px;
        background: linear-gradient(90deg, #00419c 0%, #000056 95.23%);
        width: 110px;
        height: 40px;
        color: #fff;
        font-family: "Istok Web" ,sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        
    }

    .main-menu .menu-btn {
        border-radius: 50%;
        width: 32px;
        height: 30px;
        border: none;
        background-color: #fff;
        margin-top: 7px;
        margin-left: 4px;
        cursor: pointer;
    }

    .main-menu .menu-btn img {
        width: 14px;
        height: 16px;
    }

    .header-container.active {
        width: 100%;
        height: 610px;
        background-color: #1d1d1d;
        display: block;
        transition: all 400ms ease;
        z-index: 200;
        position: absolute;
        margin-top: -100px;
    }

    .header-container {
        display: none;
    }

    .header-container .mobile-header-1 {
        display: block;
        width: 100%;
        height: 90px;
        background-color: #1d1d1d;
        border-bottom: 1px solid #8b8b8b;
        position: relative;
        z-index: 200;
    }

    .header-container .main-menu {
        display: flex;
        margin-left: 20px;
    }

    .header-container .main-menu img {
        position: relative;
        z-index: 100;
    }

    .header-container .main-menu .btn-grp {
        display: flex;
        flex-direction: row;
        gap: 10px;
        margin-top: 10px;
    }   

    .header-container .signup-b {
        margin-left: 416px;
        margin-top: 4px;
        border: none;
        border-radius: 30px;
        background: linear-gradient(90deg, #00419c 0%, #000056 95.23%);
        width: 120px;
        height: 42px;
        color: #fff;
        font-family: "Istok Web" ,sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .header-container .main-menu .close-btn {
        border-radius: 50%;
        width: 30px;
        height: 28px;
        border: none;
        background-color: #fff;
        margin-top: 17px;
        margin-left: -7px;
        cursor: pointer;
    }

    .header-container .main-menu .close-btn img {
        width: 14px;
        height: 16px;
    }

     .header-container .nav-list {
        position: relative;
        margin-left: -40px;
        margin-top: -10px;
    }
    
    .header-container .list-item {
        list-style-type: none;
        display: flex;
        flex-direction: column;
        gap: 5px;
        flex-shrink: 0;
        
    }
    
     .header-container .nav-list .list-item li .l-item {
        list-style-type: none;
        text-decoration: none;
        background: transparent;
        width: calc(160*var(--aspect-ratio));
        height: 50px;
        border: none;
        border-bottom: 1px solid #8b8b8b;
        color: #ECECEC;
        font-family: "Istok Web" ,sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-align: left;
        flex-shrink: 0;
    } 

    .header-container form {
        margin-left: 30px;
        margin-top: 20px;
        position: relative;
    }

    .header-container form input {
        font-family: "Tstok Web" , sans-serif;
        font-weight: normal;
        font-size: 16px;
        line-height: 200%;
        border-radius: 8px;
        padding: 4px 10px 2px 60px;
        border: none;
           width: calc(160*var(--aspect-ratio));
        color: #fff;
        border: 0.5px solid #8b8b8b;
        background-color: transparent;
    }

    .header-container .search-button {
        position: absolute;
        left: -15px;
        top: 50%;
        transform: translateY(-50%);
        background-color: transparent;
        border-radius: 8px;
        padding: 8px 32px;
        border: 0;
        cursor: pointer;
    }

    .header-container .search-button img {
        width: 20px;
        height: 22px;
    }

    .header-container .last-nav {
        position: relative;
        width: 100%;
        height: 70px;
        background-color: #000;
        margin-top: 10px;
    }

    .header-container .last-nav .btn-section {
        display: flex;
        justify-content: space-between;
    }

    .header-container .download-b {
        margin-left: 30px;
        margin-top: 10px;
        border: none;
        background: none;
        width: 100px;
        height: 35px;
        color: #DD009F;
        font-family: "Istok Web" ,sans-serif;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .header-container .login-b {
        margin-left: 30px;
        margin-top: 20px;
        border: none;
        background: none;
        width: 100px;
        height: 35px;
        color: #fff;
        font-family: "Istok Web" ,sans-serif;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .main-section .hero-section {
        height: auto;
        width: 100%;
        position: relative;
        margin-top: -20px;
        display: flex;
        flex-direction: column;
    }

    .hero-section .wrapper {
        position: relative;
        width: 99%;
        background-color:transparent;
        display: flex;
        align-items: center;

    }
    
    .hero-section .left-secction {
        display: flex;
        flex-direction: column;
    }
    
    .hero-section .main-para {
        display: flex;
        flex-direction: column;
        margin-left: 17px;
        margin-top: 60px;
    }
    
    .hero-section .main-para h3 {
        color: #FFF;
        font-family: "Kanit" ,sans-serif;
        font-size: 30px;
        font-weight: 700;
        line-height: 35px; /* 100% */
    }
    
    .hero-section .main-para p {
        color: #BDBCBC;
        font-family: "Kanit" ,sans-serif;
        font-size: 14px;
        font-weight: 500;
        margin-top: -10px;
    }

    .main-para span {
        margin-top: -60px;
    }

    .hero-section .sign-up-section {
        width: 320px;
        height: 180px;
        flex-shrink: 0;
        border-radius: 30px;
        background: rgba(7, 0, 56, 0.404);
        box-shadow: 3px 3px 10px 0px rgba(23, 15, 78, 0.77);
        margin-left: 35px;
        margin-top: 50px;
    }
    
    .hero-section .sign-up-section p {
        color: #FCc100;
        font-family: "Kanit" ,sans-serif;
        font-size: 17px;
        font-style: normal;
        font-weight: 600;
        line-height: 30px; /* 285.714% */
        margin-left: 20px;
    }
    
    .hero-section .sign-up-section span {
        color: #BDBCBC;
        font-family: "Kanit" ,sans-serif;
        font-size: 14px;
        font-weight: 600;
        margin-left: 20px;
        margin-top: -10px;
        position: absolute;
    }
    
    .hero-section .sign-up-section .btn-section {
        position: absolute;
        display: flex;
        margin-left: 15px;
        margin-top: 30px;
        gap: 10px;
    }
    
    .sign-up-btn {
        width: 140px;
        height: 42px;   
        border: none;
        flex-shrink: 0;
        border-radius: 30px;
        background: linear-gradient(90deg, #00419c 0%, #000056 95.23%);
        color: #FFF;
        font-family: "Istok Web" ,sans-serif;
        font-size: 13px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
    
    .learn-btn {
        width: 140px;
        height: 42px;
        border-radius: 30px;
        border: 1px solid #FFF;
        background: none;
        color: #FFF;
        font-family: "Istok Web" ,sans-serif;
        font-size: 13px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        flex-shrink: 0;
    }
    .hero-section .right-section {
        flex-shrink: 0;
  

        width: 47%;
        height: fit-content;
        
    }
 

    .right-section img {
       
        position: relative;
        width: 100%;
        height: 100%;
    }

}

/* Styles for screens between 901px and 1100px */
@media(max-width: 1100px) and (min-width: 901px) {
  .main-section {
    background: linear-gradient(90deg, #000 1.66%, #000230 28.66%, #000 63.44%);
    width: 100%;
    height: calc(131.3*var(--aspect-ratio))!important;
    margin-top: calc(0*var(--aspect-ratio));
    position: relative;
}

    .mobile-header {
        display: block;
        width: 100%;
        height: 100px;
        background-color: #000;
        position: relative;
    }

    .mobile-header .wrapper {
        width: 100%;
        position: absolute;
        background-color: #000;
        height: 90px;
    }

    .mobile-header.scrolled {
        background: #000;
        width: 100%;
        height: 100px;
        border-bottom: 1px solid #8b8b8b;
        position: fixed;
        z-index: 1000;
        top: 0%!important;
    }

    .mobile-header .main-menu {
        position: relative;
        display: flex;
        margin-left: 20px;
        margin-top: 0px;
        justify-content: space-between;
    }

    .mobile-header .main-menu .logo img {
        position: relative;
        z-index: 100;
        margin-top: 10px;
    }

    .mobile-header .main-menu .btn-grp {
        display: flex;
        flex-direction: row;
        gap: 10px;
        margin-top: calc(4*var(--aspect-ratio));
    }   

    /* .mobile-header .signup-b {
        margin-left: 800px;
        margin-top: 5px;
        border: none;
        border-radius: 30px;
        background: linear-gradient(90deg, #00419c 0%, #000056 95.23%);
        width: 110px;
        height: 40px;
        color: #fff;
        font-family: "Istok Web" ,sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        
    } */
    .mobile-header .signup-b {
        border: none;
        border-radius: 30px;
        background: linear-gradient(90deg, #00419c 0%, #000056 95.23%);
        width: 110px;
        height: 40px;
        color: #fff;
        font-family: "Istok Web" ,sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
      
        
    }

    .main-menu .menu-btn {
        border-radius: 50%;
        width: 32px;
        height: 30px;
        border: none;
        background-color: #fff;
        margin-top: 20px;
        margin-left: 0px;
        cursor: pointer;
        margin-right:22px;
    }

    .main-menu .menu-btn img {
        width: 14px;
        height: 16px;
    }

    .header-container.active {
        width: 100%;
        height: 600px;
        background-color: #1d1d1d;
        display: block;
        transition: all 400ms ease;
        z-index: 200;
        position: absolute;
        margin-top: -100px;
    }

    .header-container {
        display: none;
    }

    .header-container .mobile-header-1 {
        display: block;
        width: 100%;
        height: 90px;
        background-color: #1d1d1d;
        border-bottom: 1px solid #8b8b8b;
        position: relative;
        z-index: 200;
    }

    .header-container .main-menu {
        display: flex;
        margin-left: 20px;
    }

    .header-container .main-menu img {
        position: relative;
        z-index: 100;
    }

    .header-container .main-menu .btn-grp {
        display: flex;
        flex-direction: row;
        gap: 10px;
        margin-top: 10px;
    }   

    .header-container .signup-b {
        margin-left: 642px;
        margin-top: 4px;
        border: none;
        border-radius: 30px;
        background: linear-gradient(90deg, #00419c 0%, #000056 95.23%);
        width: 120px;
        height: 42px;
        color: #fff;
        font-family: "Istok Web" ,sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .header-container .main-menu .close-btn {
        border-radius: 50%;
        width: 30px;
        height: 28px;
        border: none;
        background-color: #fff;
        margin-top: 17px;
        margin-left: -20px;
        cursor: pointer;
    }

    .header-container .main-menu .close-btn img {
        width: 14px;
        height: 16px;
    }

     .header-container .nav-list {
        position: relative;
        margin-left: -40px;
        margin-top: -10px;
    }
    
    .header-container .list-item {
        list-style-type: none;
        display: flex;
        flex-direction: column;
        gap: 5px;
        flex-shrink: 0;
        
    }
    
     .header-container .nav-list .list-item li .l-item {
        list-style-type: none;
        text-decoration: none;
        background: transparent;
        width: calc(160*var(--aspect-ratio));
        height: 50px;
        border: none;
        border-bottom: 1px solid #8b8b8b;
        color: #ECECEC;
        font-family: "Istok Web" ,sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-align: left;
        flex-shrink: 0;
    } 

    .header-container form {
        margin-left: 11px;
        margin-top: 20px;
        position: relative;
    }

    .header-container form input {
        font-family: "Tstok Web" , sans-serif;
        font-weight: normal;
        font-size: 16px;
        line-height: 200%;
        border-radius: 8px;
        padding: 4px 10px 2px 60px;
        border: none;
           width: calc(160*var(--aspect-ratio));
        color: #fff;
        border: 0.5px solid #8b8b8b;
        background-color: transparent;
    }

    .header-container .search-button {
        position: absolute;
        left: -15px;
        top: 50%;
        transform: translateY(-50%);
        background-color: transparent;
        border-radius: 8px;
        padding: 8px 32px;
        border: 0;
        cursor: pointer;
    }

    .header-container .search-button img {
        width: 20px;
        height: 22px;
    }

    .header-container .last-nav {
        position: relative;
        width: 100%;
        height: 70px;
        background-color: #000;
        margin-top: 22px;
    }

    .header-container .last-nav .btn-section {
        display: flex;
        justify-content: space-between;
    }

    .header-container .download-b {
        margin-left: 30px;
        margin-top: 10px;
        border: none;
        background: none;
        width: 100px;
        height: 35px;
        color: #DD009F;
        font-family: "Istok Web" ,sans-serif;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .header-container .login-b {
        margin-left: 30px;
        margin-top: 20px;
        border: none;
        background: none;
        width: 100px;
        height: 35px;
        color: #fff;
        font-family: "Istok Web" ,sans-serif;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

            .main-section {
        background: linear-gradient(90deg, #000 1.66%, #000230 28.66%, #000 63.44%);
        width: 100%;
        height: calc(85.3*var(--aspect-ratio));
        margin-top: calc(0*var(--aspect-ratio));
        position: relative;
    }

    .hero-section .wrapper {
        position: relative;
        width: 100%;
        background-color:transparent;
    }
    
    .hero-section .left-secction {
        display: flex;
        flex-direction: column;
    }
    
    .hero-section .main-para {
        display: flex;
        flex-direction: column;
        margin-left: 28px;
        margin-top: 120px;
    }
    
    .hero-section .main-para h3 {
        color: #FFF;
        font-family: "Kanit" ,sans-serif;
        font-size: 34px;
        font-weight: 700;
        line-height: 35px; /* 100% */
    }
    
    .hero-section .main-para p {
        color: #BDBCBC;
        font-family: "Kanit" ,sans-serif;
        font-size: 16spx;
        font-weight: 500;
        margin-top: -10px;
    }

    .main-para span {
        margin-top: -60px;
    }

    .hero-section .sign-up-section {
        width: 400px;
        height: 180px;
        flex-shrink: 0;
        border-radius: 30px;
        background: rgba(7, 0, 56, 0.404);
        box-shadow: 3px 3px 10px 0px rgba(23, 15, 78, 0.77);
        margin-left: 95px;
        margin-top: 50px;
    }
    
    .hero-section .sign-up-section p {
        color: #FCc100;
        font-family: "Kanit" ,sans-serif;
        font-size: 17px;
        font-style: normal;
        font-weight: 600;
        line-height: 80px; /* 285.714% */
        margin-left: 20px;
    }
    
    .hero-section .sign-up-section span {
        color: #BDBCBC;
        font-family: "Kanit" ,sans-serif;
        font-size: 14px;
        font-weight: 600;
        margin-left: 20px;
        margin-top: -30px;
        position: absolute;
    }
    
    .hero-section .sign-up-section .btn-section {
        position: absolute;
        display: flex;
        margin-left: 15px;
        margin-top: 30px;
        gap: 10px;
    }
    
    .sign-up-btn {
        width: 140px;
        height: 42px;   
        border: none;
        flex-shrink: 0;
        border-radius: 30px;
        background: linear-gradient(90deg, #00419c 0%, #000056 95.23%);
        color: #FFF;
        font-family: "Istok Web" ,sans-serif;
        font-size: 13px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
    
    .learn-btn {
        width: 140px;
        height: 42px;
        border-radius: 30px;
        border: 1px solid #FFF;
        background: none;
        color: #FFF;
        font-family: "Istok Web" ,sans-serif;
        font-size: 13px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        flex-shrink: 0;
    }

    .right-section img {
     
        position: relative;
      width: 100%;
      height: 100%;
    }
    .hero-section .right-section {
        flex-shrink: 0;
        position: absolute;
        top: 61px;
        width: 455px;
        height: 517px;
        right: 3%;
    }

}

/*----------------------------------about-page-------------------------------*/

.about-section {
    width: 100%;
    height: 100vh;
    background: #050022;
}

.banner-section {
    position: relative; 
    width: 100%;
}

.banner-section .wrapper {
    width: 100%;
    background: #050022;
    flex-shrink: 0;   
}

.banner-section .container {
    position: relative;
    height: calc(49*var(--aspect-ratio));
    flex-shrink: 0;
    align-items: center;
}

.banner-section .container .image img {
    height: auto;
    width: calc(139*var(--aspect-ratio));
    height: calc(48*var(--aspect-ratio));
    flex-shrink: 0;
    position: relative;
    margin-top: calc(7*var(--aspect-ratio));
    margin-left: calc(17*var(--aspect-ratio));
}

.banner-section .container .bg {
    height: calc(56*var(--aspect-ratio));
    background: rgba(15, 0, 105, 0.50);
    position: relative;
    margin-top: calc(-56*var(--aspect-ratio));
}
 
.banner-section .container .text-section {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    margin-top: calc(-44*var(--aspect-ratio));
}

.banner-section .container .text-section h1 {
    color: #FFF;
    font-family: 'Istok Web' ,sans-serif;
    font-size: calc(6*var(--aspect-ratio));
    font-weight: 600;
    line-height: normal;
}

.banner-section .container .text-section p {
    color: #Fff;
    font-family: 'Istok Web' ,sans-serif;
    font-size: calc(3*var(--aspect-ratio));
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: calc(-3*var(--aspect-ratio));
}

.banner-section .container .text-section span {
    color: #FCD400;
}

.banner-section .main-container {
    position: relative;
    width: 100%;
    height: auto;

}

.banner-section .main-container .main-about {
    padding: calc(14*var(--aspect-ratio))  calc(14*var(--aspect-ratio));
    position: relative;
    flex-shrink: 0;
}

.banner-section .main-container .main-about .contain {
    display: flex;
    position: relative;
    width: 100%;
}

.contain .image-con {
    position: relative;
    flex-shrink: 0;
    width: 50%;
}

.contain .image-con img {
    height: 100%;
    width: 100%;
    flex-shrink: 0;
}

.contain .para-con {
	position: relative;
	padding-left: calc(4* var(--aspect-ratio));
	display: flex;
	flex-direction: column;
}

.contain .para-con h2 {
    color: #FCD400;
    font-family: 'Istok Web' ,sans-serif;
    font-size: calc(5*var(--aspect-ratio));
    font-weight: 550;
}

.contain .para-con p {
    color: #E7E7E7;
    font-family: 'Istok Web' ,sans-serif;
    font-size: calc(2.3 * var(--aspect-ratio));
    text-align: justify;
    font-weight: 400;
    line-height: calc(3*var(--aspect-ratio));
}

.contain .para-con span {
    color: #d4d4d4;
    font-family: 'Istok Web' ,sans-serif;
    text-align: justify;
    font-size: calc(2.3 * var(--aspect-ratio));
    font-weight: 400;
  line-height: calc(3*var(--aspect-ratio));
}

.contain .para-con .start-btn {
    width: calc(24*var(--aspect-ratio));
    height: calc(6*var(--aspect-ratio));
    flex-shrink: 0;
	margin:auto;
    margin-top: calc(3*var(--aspect-ratio));
    border-radius: calc(1*var(--aspect-ratio));
    border: none;
    background: linear-gradient(90deg, #FCD400 0%, #FFC700 94.17%);
    box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.29);
    color: #0D1242;
    font-family: "Open Sans",sans-serif;
    font-size: calc(2.2*var(--aspect-ratio));
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}



@media(max-width: 500px){
    .about-section {
        width: 100%;
        height: 100vh;
        background: #050022;
    }

    .about-section .banner-section {
        position: relative;
        width: 100%;
    }
    
    .about-section .banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .about-section .banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .about-section .banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    /* .about-section .banner-section .container .image img {
        height: auto;
        width: 400px;
        height: 180px;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 10px;
    } */
    .about-section .banner-section .container .image img {
        width: 100%;
            height: 180px;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 0px!important;
    }
    
    .about-section .banner-section .container .bg {
        height: 240px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -178px;
    }
     
    .about-section .banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -180px;
    }
    
    .about-section .banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 40px;
        font-weight: 600;
        line-height: normal;
    }
    
    .about-section .banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .about-section .banner-section .container .text-section span {
        color: #FCD400;
    }
    
    .about-section .banner-section .main-container {
        position: relative;
        width: 100%;
        height: auto;
    
    }
    
    .about-section .banner-section .main-container .main-about {
        padding: 20px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
    }
    
    .about-section .banner-section .main-container .main-about .contain {
        display: flex;
        flex-direction: column;
        position: relative;
    }
    
    .about-section .banner-section .main-container .main-about .contain .image-con {
        position: relative;
        flex-shrink: 0;
        text-align: center;
        width: 100%;
    }
    
    .about-section .banner-section .main-container .main-about .contain .image-con img {

        flex-shrink: 0;
        margin-top: -80px;
    }
    
    .about-section .banner-section .main-container .main-about .contain .para-con {
        position: relative;
        padding-left: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .about-section .banner-section .main-container .main-about .contain .para-con h2 {
        color: #FCD400;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 32px;
        font-weight: 550;
    }
    
    .about-section .banner-section .main-container .main-about .contain .para-con p {
        color: #E7E7E7;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 25px;
        margin-left: -5px;
    }
    
    .about-section .banner-section .main-container .main-about .contain .para-con span {
        color: #d4d4d4;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 11px;
        font-weight: 400;
        line-height: 25px;
        margin-left: -10px;
    }
    
    .about-section .banner-section .main-container .main-about .contain .para-con .start-btn {
        width: 200px;
        height: 40px;
        flex-shrink: 0;
        margin:auto;
        margin-top: 30px;
        border-radius: 8px;
        border: none;
        background: linear-gradient(90deg, #FCD400 0%, #FFC700 94.17%);
        box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.29);
        color: #0D1242;
        font-family: "Open Sans",sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
     


}

/* Styles for screens between 501px and 700px */
@media(max-width: 700px) and (min-width: 501px){
    .about-section {
        width: 100%;
        height: 100vh;
        background: #050022;
    }

    .about-section .banner-section {
        position: relative;
        width: 100%;
    }
    
    .about-section .banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .about-section .banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }

    
    .about-section .banner-section .container .image img {
      width: 100%;
      height: 100%;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 40px;
    }
    .about-section .banner-section .container .image{
        height: auto;
        width: 460px;
        height: 240px;
    }
    .about-section .banner-section .container .bg {
        height: 300px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -240px;
    }
     
    .about-section .banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -180px;
    }
    
    .about-section .banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 40px;
        font-weight: 600;
        line-height: normal;
    }
    
    .about-section .banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .about-section .banner-section .container .text-section span {
        color: #FCD400;
    }
    
    .about-section .banner-section .main-container {
        position: relative;
        width: 100%;
        height: auto;
    
    }
    
    .about-section .banner-section .main-container .main-about {
        padding: 20px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
    }
    
    .about-section .banner-section .main-container .main-about .contain {
        display: flex;
        flex-direction: column;
        position: relative;
    }
    
    .about-section .banner-section .main-container .main-about .contain .image-con {
        position: relative;
        flex-shrink: 0;
    }
    
    .about-section .banner-section .main-container .main-about .contain .image-con img {
        height: 400px;
        width: 450px;
        flex-shrink: 0;
        margin-top: 20px;
    }
    
    .about-section .banner-section .main-container .main-about .contain .para-con {
        position: relative;
        padding-left: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .about-section .banner-section .main-container .main-about .contain .para-con h2 {
        color: #FCD400;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 32px;
        font-weight: 550;
    }
    
    .about-section .banner-section .main-container .main-about .contain .para-con p {
        color: #E7E7E7;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 18px;
        font-weight: 300;
        line-height: 25px;
        margin-left: -5px;
    }
    
    .about-section .banner-section .main-container .main-about .contain .para-con span {
        color: #d4d4d4;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 25px;
        margin-left: -10px;
    }
    
    .about-section .banner-section .main-container .main-about .contain .para-con .start-btn {
        width: 200px;
        height: 40px;
        flex-shrink: 0;
         margin:auto;
        margin-top: 30px;
        border-radius: 8px;
        border: none;
        background: linear-gradient(90deg, #FCD400 0%, #FFC700 94.17%);
        box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.29);
        color: #0D1242;
        font-family: "Open Sans",sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
     

}

/* Styles for screens between 501px and 900px */
@media(max-width: 900px) and (min-width: 701px){
    /* CSS rules for screens between 501px and 900px */
    .about-section {
        width: 100%;
        height: 100vh;
        background: #050022;
    }

    .about-section .banner-section {
        position: relative;
        width: 100%;
    }
    
    .about-section .banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .about-section .banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .about-section .banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .about-section .banner-section .container .image img {
       height: 100%;
       width: 100%;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 40px;
    }
    .about-section .banner-section .container .image{
        height: auto;
        width: 680px;
        height: 260px;
    }
    .about-section .banner-section .container .bg {
        height: 320px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -260px;
    }
     
    .about-section .banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -180px;
    }
    
    .about-section .banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 40px;
        font-weight: 600;
        line-height: normal;
    }
    
    .about-section .banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .about-section .banner-section .container .text-section span {
        color: #FCD400;
    }
    
    .about-section .banner-section .main-container {
        position: relative;
        width: 100%;
        height: auto;
    
    }
    
    .about-section .banner-section .main-container .main-about {
        padding: 20px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
    }
    
    .about-section .banner-section .main-container .main-about .contain {
        display: flex;
        flex-direction: column;
        position: relative;
      
    }
    
    .about-section .banner-section .main-container .main-about .contain .image-con {
        position: relative;
        flex-shrink: 0;
        text-align: center;
        width: 100%;
    }
    
    .about-section .banner-section .main-container .main-about .contain .image-con img {
      width: 100%;
        flex-shrink: 0;
        margin-top: 40px;
    }
    
    .about-section .banner-section .main-container .main-about .contain .para-con {
        position: relative;
        padding-left: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .about-section .banner-section .main-container .main-about .contain .para-con h2 {
        color: #FCD400;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 36px;
        font-weight: 550;
    }
    
    .about-section .banner-section .main-container .main-about .contain .para-con p {
        color: #E7E7E7;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 20px;
        font-weight: 400;
        line-height: 25px;
        margin-left: -5px;
    }
    
    .about-section .banner-section .main-container .main-about .contain .para-con span {
        color: #d4d4d4;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 25px;
        margin-left: -10px;
    }
    
    .about-section .banner-section .main-container .main-about .contain .para-con .start-btn {
        width: 200px;
        height: 40px;
        flex-shrink: 0;
         margin:auto;
        margin-top: 30px;
        border-radius: 8px;
        border: none;
        background: linear-gradient(90deg, #FCD400 0%, #FFC700 94.17%);
        box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.29);
        color: #0D1242;
        font-family: "Open Sans",sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
     

}

/* Styles for screens between 901px and 1100px */
@media(max-width: 1100px) and (min-width: 901px){
    /* CSS rules for screens between 501px and 900px */
    .about-section {
        width: 100%;
        height: 100vh;
        background: #050022;
    }

    .about-section .banner-section {
        position: relative;
        width: 100%;
    }
    
    .about-section .banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .about-section .banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .about-section .banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .about-section .banner-section .container .image img {
              width: 100%;
              height: 100%;
      
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 30px;
    }
    .about-section .banner-section .container .image{
           width: 916px;
    height: 360px; 
    }
    
    .about-section .banner-section .container .bg {
        height: 420px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -360px;
    }
     
    .about-section .banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -260px;
    }
    
    .about-section .banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 50px;
        font-weight: 600;
        line-height: normal;
    }
    
    .about-section .banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .about-section .banner-section .container .text-section span {
        color: #FCD400;
    }
    
    .about-section .banner-section .main-container {
        position: relative;
        width: 100%;
        height: auto;
    
    }
    
    .about-section .banner-section .main-container .main-about {
        padding: 20px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
    }
    
    .about-section .banner-section .main-container .main-about .contain {
        display: flex;
        flex-direction: row;
        gap: 40px;
        position: relative;
        margin-top: 120px;
    }
    
    .about-section .banner-section .main-container .main-about .contain .image-con {
        position: relative;
        flex-shrink: 0;
    }
    
    .about-section .banner-section .main-container .main-about .contain .image-con img {
        height: 400px;
        width: 450px;
        flex-shrink: 0;
        margin-top: 40px;
    }
    
    .about-section .banner-section .main-container .main-about .contain .para-con {
        position: relative;
        padding-left: 10px;
        display: flex;
        flex-direction: column;
       
    }
    
    .about-section .banner-section .main-container .main-about .contain .para-con h2 {
        color: #FCD400;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 34px;
        font-weight: 550;
    }
    
    .about-section .banner-section .main-container .main-about .contain .para-con p {
        color: #E7E7E7;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 18px;
        font-weight: 400;
        line-height: 25px;
        margin-left: -5px;
    }
    
    .about-section .banner-section .main-container .main-about .contain .para-con span {
        color: #d4d4d4;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 25px;
        margin-left: -10px;
    }
    
    .about-section .banner-section .main-container .main-about .contain .para-con .start-btn {
        width: 200px;
        height: 40px;
        flex-shrink: 0;
         margin:auto;
        margin-top: 30px;
        border-radius: 8px;
        border: none;
        background: linear-gradient(90deg, #FCD400 0%, #FFC700 94.17%);
        box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.29);
        color: #0D1242;
        font-family: "Open Sans",sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
     

}

input[placeholder], [placeholder], [placeholder] {
	color: white !important;
	font-size: calc(2* var(--aspect-ratio)) !important;
}


/*----------------------------------contact-us page----------------------------------*/

.contact-section1 {
	width: 100%;
	background: #050022;
	height: calc( 175 * var(--aspect-ratio));
	padding-bottom: 10%;
}

.contact-banner-section {
    position: relative;
    width: 100%;
}

.conatct-banner-section .wrapper {
    width: 100%;
    background: #050022;
    flex-shrink: 0;   
}

.contact-banner-section .container {
    position: relative;
    height: calc(56*var(--aspect-ratio));
    flex-shrink: 0;
    align-items: center;
}

.contact-banner-section .container .image img {
    height: auto;
    width: calc(139*var(--aspect-ratio));
    height: calc(48*var(--aspect-ratio));
    flex-shrink: 0;
    position: relative;
    margin-top: calc(7*var(--aspect-ratio));
    margin-left: calc(17*var(--aspect-ratio));
}


.contact-banner-section .container .bg {
        height: calc(56*var(--aspect-ratio));
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: calc(-56*var(--aspect-ratio));

}
 
.contact-banner-section .container .text-section {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    margin-top: calc(-44*var(--aspect-ratio));
}



.contact-banner-section .container .text-section h1 {
    color: #FFF;
    font-family: 'Istok Web' ,sans-serif;
    font-size: calc(6*var(--aspect-ratio));
    font-weight: 600;
    line-height: normal;
}
.contact-banner-section .container .text-section p {
    color: #Fff;
    font-family: 'Istok Web' ,sans-serif;
    font-size: calc(3*var(--aspect-ratio));
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: calc(-3*var(--aspect-ratio));
}


.contact-banner-section .container .text-section span {
    color: #FCD400;
}

.conatct-banner-section .contact-container {
    position: relative;
    width: 100%;
    height: auto;
}

.contact-container .main-contact {
    padding: calc(25*var(--aspect-ratio));
    position: relative;
    flex-shrink: 0;
}

.contact-container .main-contact .contact-contain {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.info-table {
    padding: calc(3*var(--aspect-ratio))  calc(3*var(--aspect-ratio))  calc(3*var(--aspect-ratio))  calc(3*var(--aspect-ratio));
    border: calc(.5*var(--aspect-ratio)) solid #E3DB17;
    background: #050022;
    box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
    position: absolute;
}

.info-table h2 {
    color: #fff;
    font-family: "josefin sans" ,sans-serif;
    font-weight: 600;
    font-size: calc(3.5*var(--aspect-ratio));
}

.info-table .info {
    position: relative;
    margin-left: 0px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 30px;
}

.info-table .info-list {
    display: flex;
    flex-direction: row;
    gap: calc(3*var(--aspect-ratio));
    list-style-type: none;
}

.info-table .info-list img {
    width: calc(2.3*var(--aspect-ratio));
    height: calc(2.5*var(--aspect-ratio));
    flex-shrink: 0;
}
.info-table .info-list a {
    color: #DCDCDC;
    font-family: 'Istok Web' ,sans-serif;
    font-size: calc(1.9*var(--aspect-ratio));
    font-style: normal;
    font-weight: 500;
    line-height: calc(3*var(--aspect-ratio));
    text-decoration: none;
}
.info-table .social-section {
    position: relative;
    margin-top: 40px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-shrink: 0;
}
.info-table .social-section button {
    background-color: #050022;
    filter: drop-shadow(0px 0px 8px #FCB500);
    border: none;
    border-radius: 50%;
    height: calc(7*var(--aspect-ratio));
    width: calc(7*var(--aspect-ratio));
}

.info-table .social-section img {
    width: calc(3*var(--aspect-ratio));
    height: calc(3*var(--aspect-ratio));
    align-items: center;
    position: relative;
    flex-shrink: 0;
    /* width: 20px; */
    /* height: 20px; */
}


.contact-table {
    position: absolute;
    padding: calc(7*var(--aspect-ratio))  calc(29*var(--aspect-ratio));
    background: #00042C;
    box-shadow: 0px 0px 9px 2px #0D1242;
    margin-left: calc(-5*var(--aspect-ratio));
    margin-top: calc(-11*var(--aspect-ratio));
    flex-shrink: 0;
}

.contact-table h2 {
    color: #fff;
    font-family: 'Istok Web' ,sans-serif;
    font-weight: 600;
    font-size: calc(2.5*var(--aspect-ratio));
}

.contact-table .f-row {
    display: flex;
    gap: 50px;
    position: relative;
}

.contact-table .f-row .f-name, .contact-table .f-row .s-name{
    display: flex;
    flex-direction: column ;
    position: relative;
    flex-shrink: 0;
}

.f-name p {
    color: #fff;
    font-family: "josefin sans",sans-serif;
    font-size: calc(2.2*var(--aspect-ratio));
    font-weight: 400;
}
.f-name input {
    border-radius: calc(1*var(--aspect-ratio));
	border: calc(.1*var(--aspect-ratio)) solid #AEAEAE;
	background: #050022;
	padding: calc(1.2*var(--aspect-ratio)) calc(5.5*var(--aspect-ratio));
	color: #fff;
}

.s-name p {
    color: #fff;
    font-family: "josefin sans",sans-serif;
    font-size: calc(2.2*var(--aspect-ratio));
    font-weight: 400;
}

.s-name input {
        border-radius: calc(1*var(--aspect-ratio));
        border: calc(.1*var(--aspect-ratio)) solid #AEAEAE;
        background: #050022;
        padding: calc(1.2*var(--aspect-ratio))  calc(5.5*var(--aspect-ratio));
}

.contact-table .s-row {
    display: flex;
    gap: 50px;
    position: relative;
    margin-top: 30px;
}

.contact-table .s-row .e-mail,.contact-table .s-row .p-num {
    display: flex;
    flex-direction: column ;
    position: relative;
    flex-shrink: 0;
}

.e-mail p {
    color: #fff;
    font-family: "josefin sans",sans-serif;
    font-size: calc(2.2*var(--aspect-ratio));
    font-weight: 400;
}

.e-mail input {

        border-radius: calc(1*var(--aspect-ratio));
        border: calc(.1*var(--aspect-ratio)) solid #AEAEAE;
        background: #050022;
        padding: calc(1.2*var(--aspect-ratio))  calc(5.5*var(--aspect-ratio));
    }

.p-num p {
    color: #fff;
    font-family: "josefin sans",sans-serif;
    font-size: calc(2.2*var(--aspect-ratio));
    font-weight: 400;
}

.p-num input {

        border-radius: calc(1*var(--aspect-ratio));
        border: calc(.1*var(--aspect-ratio)) solid #AEAEAE;
        background: #050022;
        padding: calc(1.2*var(--aspect-ratio))  calc(5.5*var(--aspect-ratio));
    }

.t-row {
    position: relative;
    display: flex;
    flex-shrink: 0;
    margin-top: 30px;
}

.t-row .m-box {
    display: flex;
    flex-direction: column ;
    position: relative;
    flex-shrink: 0;
}

.m-box p {
    color: #fff;
    font-family: "josefin sans",sans-serif;
    font-size: calc(2.2*var(--aspect-ratio));
    font-weight: 400;
}

.m-box input {
    border-radius: calc(1*var(--aspect-ratio));
    border: calc(.1*var(--aspect-ratio)) solid #AEAEAE;
    background: #050022;
    padding: 50px 180px;
    position: relative;
    flex-shrink: 0;
    padding: calc(7*var(--aspect-ratio)) calc(25*var(--aspect-ratio));
}

.message-btn {
    position: relative;
    flex-shrink: 0;
    margin-top: calc(3*var(--aspect-ratio));
    padding: calc(1.5*var(--aspect-ratio))  calc(2.5*var(--aspect-ratio));
    border-radius: calc(1*var(--aspect-ratio));
    border: none;
    background: linear-gradient(90deg, #314C74 0%, #0D1242 95.23%);
    color: #fff;
    font-family: "Open Sans",sans-serif;
    font-weight: 600;
    font-size: calc(2*var(--aspect-ratio));
}

@media(max-width: 500px){
    .contact-section1 {
        width: 100%;
        height: auto;
        background: #050022;
    }
    .contact-container .main-contact {
        /* padding: 200px; */
        position: relative;
        flex-shrink: 0;
        margin-top: 332px!important;
        padding: 0!important;
    }

    .contact-section1 .contact-banner-section {
        position: relative;
        width: 100%;
    }
    
    .contact-section1 .contact-banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .contact-section1 .contact-banner-section .container {
        position: relative;
        height: 300px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .contact-section1 .contact-banner-section .container .image img {
     
        width: 100%;
        height: 100%;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 10px;
    }
    .contact-section1 .contact-banner-section .container .image {
        width: calc(170*var(--aspect-ratio))!important;
        height: calc(91*var(--aspect-ratio))!important;
        ;}
    
    .contact-section1 .contact-banner-section .container .bg {
        height: 240px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -176px;
    }

    .contact-section1 .contact-banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -180px;
    }
    
    .contact-section1 .contact-banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 40px;
        font-weight: 600;
        line-height: normal;
    }
    
    .contact-section1 .contact-banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .contact-section1 .contact-banner-section .container .text-section span {
        color: #FCD400;
    }
    
    .conatct-banner-section .contact-container {
        position: relative;
        width: 100%;
        height: auto;
    }
    
    .contact-container .main-contact {
        position: relative;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .info-table {
        margin-left: 10px;
        margin-top: -200px;
        padding: 10px 50px 20px 10px;
        border: 2px solid #E3DB17;
        background: #050022;
        box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
        position: absolute;
    }
    
    .contact-container .main-contact .contact-contain .info-table h2 {
        color: #fff;
        font-family: "josefin sans" ,sans-serif;
        font-weight: 600;
        font-size: 20px;
    }
    
    .contact-container .main-contact .contact-contain .info-table .info {
        position: relative;
        margin-left: -30px;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        gap: 30px;
    }
    
    .contact-container .main-contact .contact-contain .info-table .info-list {
        display: flex;
        flex-direction: row;
        gap: 20px;
        list-style-type: none;
    }
    
    .contact-container .main-contact .contact-contain .info-table .info-list img {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
    
    
    .contact-container .main-contact .contact-contain .info-table .info-list a {
        color: #DCDCDC;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 13px;    
        font-style: normal;
        font-weight: 500;
        line-height: 20px; /* 111.111% */
        text-decoration: none;
    }
    
    .contact-container .main-contact .contact-contain .info-table .social-section {
        position: relative;
        margin-top: 40px;
        display: flex;
        flex-direction: row;
        margin-left: 40px;
        gap: 20px;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .info-table .social-section button {
        background-color: #050022;
        filter: drop-shadow(0px 0px 8px #FCB500);
        border: none;
        border-radius: 50%;
        height: 50px;
        width: 50px;
    }
    
    .contact-container .main-contact .contact-contain .info-table .social-section img {
        width: 20px;
        height: 20px;
        align-items: center;
        position: relative;
        flex-shrink: 0;
    }
    .contact-section1 {
        width: 100%;
        height: 312vh;
        background: #050022;
    }
    
    
    .contact-container .main-contact .contact-contain .contact-table {
        /* position: absolute; */
        padding: 40px 18px 19px 12px;
        background: #00042C;
        box-shadow: 0px 0px 9px 2px #0D1242;
        margin-left: 0px;
        margin-top: 300px;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .contact-table h2 {
        color: #fff;
        font-family: 'Istok Web' ,sans-serif;
        font-weight: 600;
        font-size: 24px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .f-row {
        display: flex;
        flex-direction: column;
        gap: 20px;
        position: relative;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .f-row .f-name {
        display: flex;
        flex-direction: column ;
        position: relative;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .f-row .f-name p {
        color: #fff;
        font-family: "josefin sans",sans-serif;
        font-size: 16px;
        font-weight: 400px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .f-row .f-name input {
        border-radius: 4.973px;
        border: 1px solid #AEAEAE;
        background: #050022;
        padding: 7px 40px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .f-row .s-name p {
        color: #fff;
        font-family: "josefin sans",sans-serif;
        font-size: 16px;
        font-weight: 400px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .f-row .s-name input {
        border-radius: 4.973px;
        border: 1px solid #AEAEAE;
        background: #050022;
        padding: 7px 60px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .s-row {
        display: flex;
        flex-direction: column;
        gap: 20px;
        position: relative;
        margin-top: 20px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .s-row .e-mail {
        display: flex;
        flex-direction: column ;
        position: relative;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .s-row .e-mail p {
        color: #fff;
        font-family: "josefin sans",sans-serif;
        font-size: 16px;
        font-weight: 400px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .s-row .e-mail input {
        border-radius: 4.973px;
        border: 1px solid #AEAEAE;
        background: #050022;
        padding: 7px 40px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .s-row .p-num p {
        color: #fff;
        font-family: "josefin sans",sans-serif;
        font-size: 16px;
        font-weight: 400px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .s-row .p-num input {
        border-radius: 4px;
        border: 0.829px solid #AEAEAE;
        background: #050022;
        padding: 7px 60px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .t-row {
        position: relative;
        display: flex;
        flex-shrink: 0;
        margin-top: 20px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .t-row .m-box {
        display: flex;
        flex-direction: column ;
        position: relative;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .m-box p {
        color: #fff;
        font-family: "josefin sans",sans-serif;
        font-size: 16px;
        font-weight: 400px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .m-box input {
        border-radius: 4px;
        border: 0.829px solid #AEAEAE;
        background: #050022;
        padding: 50px 60px;
        position: relative;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .message-btn {
        position: relative;
        flex-shrink: 0;
        margin-top: 20px;
        padding: 8px 20px;
        border-radius: 8px;
        border: none;
        background: linear-gradient(90deg, #314C74 0%, #0D1242 95.23%);
        color: #fff;
        font-family: "Open Sans",sans-serif;
        font-weight: 600;
        font-size: 14px;
    }
    
    

}

/* Styles for screens between 501px and 700px */
@media(max-width: 700px) and (min-width: 501px){
    .contact-section1 {
        width: 100%;
        height: 2000vh;
        background: #050022;
    }

    .contact-section1 .contact-banner-section {
        position: relative;
        width: 100%;
    }
    
    .contact-section1 .contact-banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .contact-section1 .contact-banner-section .container {
        position: relative;
        height: 300px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .contact-section1 .contact-banner-section .container .image img {
     
        width: 100%;
        height: 100%;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 80px;
    }
    .contact-section1 .contact-banner-section .container .image{
        width: 588px;
        height: 240px;
    }
    
    .contact-section1 .contact-banner-section .container .bg {
        height: 300px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -300px;
    }

    .contact-section1 .contact-banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -180px;
    }
    
    .contact-section1 .contact-banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 40px;
        font-weight: 600;
        line-height: normal;
    }
    
    .contact-section1 .contact-banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .contact-section1 .contact-banner-section .container .text-section span {
        color: #FCD400;
    }
    
    .conatct-banner-section .contact-container {
        position: relative;
        width: 100%;
    }
    
    .contact-container .main-contact {
        position: relative;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .info-table {
        margin-left: 10px;
        margin-top: -100px;
        padding: 10px 70px 20px 30px;
        border: 2px solid #E3DB17;
        background: #050022;
        box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
        position: absolute;
    }
    
    .contact-container .main-contact .contact-contain .info-table h2 {
        color: #fff;
        font-family: "josefin sans" ,sans-serif;
        font-weight: 600;
        font-size: 20px;
    }
    
    .contact-container .main-contact .contact-contain .info-table .info {
        position: relative;
        margin-left: -30px;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        gap: 30px;
    }
    
    .contact-container .main-contact .contact-contain .info-table .info-list {
        display: flex;
        flex-direction: row;
        gap: 20px;
        list-style-type: none;
    }
    
    .contact-container .main-contact .contact-contain .info-table .info-list img {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .info-table .info-list a {
        color: #DCDCDC;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 13px;    
        font-style: normal;
        font-weight: 500;
        line-height: 20px; /* 111.111% */
        text-decoration: none;
    }
    
    .contact-container .main-contact .contact-contain .info-table .social-section {
        position: relative;
        margin-top: 40px;
        display: flex;
        flex-direction: row;
        margin-left: 40px;
        gap: 20px;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .info-table .social-section button {
        background-color: #050022;
        filter: drop-shadow(0px 0px 8px #FCB500);
        border: none;
        border-radius: 50%;
        height: 50px;
        width: 50px;
    }
    
    .contact-container .main-contact .contact-contain .info-table .social-section img {
        width: 20px;
        height: 20px;
        align-items: center;
        position: relative;
        flex-shrink: 0;
    }
    
    
    .contact-container .main-contact .contact-contain .contact-table {
        position: absolute;
        padding: 40px 100px 30px 80px;
        background: #00042C;
        box-shadow: 0px 0px 9px 2px #0D1242;
        margin-left: 0px;
        margin-top: 400px;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .contact-table h2 {
        color: #fff;
        font-family: 'Istok Web' ,sans-serif;
        font-weight: 600;
        font-size: 24px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .f-row {
        display: flex;
        flex-direction: column;
        gap: 20px;
        position: relative;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .f-row .f-name {
        display: flex;
        flex-direction: column ;
        position: relative;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .f-row .f-name p {
        color: #fff;
        font-family: "josefin sans",sans-serif;
        font-size: 16px;
        font-weight: 400px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .f-row .f-name input {
        border-radius: 4.973px;
        border: 1px solid #AEAEAE;
        background: #050022;
        padding: 7px 80px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .f-row .s-name p {
        color: #fff;
        font-family: "josefin sans",sans-serif;
        font-size: 16px;
        font-weight: 400px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .f-row .s-name input {
        border-radius: 4.973px;
        border: 1px solid #AEAEAE;
        background: #050022;
        padding: 7px 80px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .s-row {
        display: flex;
        flex-direction: column;
        gap: 20px;
        position: relative;
        margin-top: 20px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .s-row .e-mail {
        display: flex;
        flex-direction: column ;
        position: relative;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .s-row .e-mail p {
        color: #fff;
        font-family: "josefin sans",sans-serif;
        font-size: 16px;
        font-weight: 400px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .s-row .e-mail input {
        border-radius: 4.973px;
        border: 1px solid #AEAEAE;
        background: #050022;
        padding: 7px 80px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .s-row .p-num p {
        color: #fff;
        font-family: "josefin sans",sans-serif;
        font-size: 16px;
        font-weight: 400px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .s-row .p-num input {
        border-radius: 4px;
        border: 0.829px solid #AEAEAE;
        background: #050022;
        padding: 7px 80px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .t-row {
        position: relative;
        display: flex;
        flex-shrink: 0;
        margin-top: 20px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .t-row .m-box {
        display: flex;
        flex-direction: column ;
        position: relative;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .m-box p {
        color: #fff;
        font-family: "josefin sans",sans-serif;
        font-size: 16px;
        font-weight: 400px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .m-box input {
        border-radius: 4px;
        border: 0.829px solid #AEAEAE;
        background: #050022;
        padding: 50px 80px;
        position: relative;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .message-btn {
        position: relative;
        flex-shrink: 0;
        margin-top: 20px;
        padding: 8px 20px;
        border-radius: 8px;
        border: none;
        background: linear-gradient(90deg, #314C74 0%, #0D1242 95.23%);
        color: #fff;
        font-family: "Open Sans",sans-serif;
        font-weight: 600;
        font-size: 14px;
    }
    
    

}

/* Styles for screens between 701px and 900px */
@media(max-width: 900px) and (min-width: 701px){
    /* CSS rules for screens between 701px and 900px */
    .contact-section1 {
        width: 100%;
        height: 100vh;
        background: #050022;
    }

    .contact-section1 .contact-banner-section {
        position: relative;
        width: 100%;
    }
    
    .contact-section1 .contact-banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .contact-section1 .contact-banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .contact-section1 .contact-banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .contact-section1 .contact-banner-section .container .image img {
      
       width: 100%;
       height: 100%;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 70px;
    }
    .contact-section1 .contact-banner-section .container .image{
      
        width: 676px;
    }
    .contact-section1 {
        width: 100%;
        height: 305vh;
        background: #050022;
    }
   
    
    .contact-section1 .contact-banner-section .container .bg {
        height: 320px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -320px;
    }
     
    .contact-section1 .contact-banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -180px;
    }
    
    .contact-section1 .contact-banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 40px;
        font-weight: 600;
        line-height: normal;
    }
    
    .contact-section1 .contact-banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .contact-section1 .contact-banner-section .container .text-section span {
        color: #FCD400;
    }
    
    .conatct-banner-section .contact-container {
        position: relative;
        width: 100%;
        height: auto;
    }
    
    .contact-container .main-contact {
        position: relative;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .info-table {
        margin-left: 10px;
        margin-top: -200px;
        padding: 10px 50px 20px 10px;
        border: 2px solid #E3DB17;
        background: #050022;
        box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
        position: absolute;
    }
    
    .contact-container .main-contact .contact-contain .info-table h2 {
        color: #fff;
        font-family: "josefin sans" ,sans-serif;
        font-weight: 600;
        font-size: 20px;
    }
    
    .contact-container .main-contact .contact-contain .info-table .info {
        position: relative;
        margin-left: -30px;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        gap: 30px;
    }
    
    .contact-container .main-contact .contact-contain .info-table .info-list {
        display: flex;
        flex-direction: row;
        gap: 20px;
        list-style-type: none;
    }
    
    .contact-container .main-contact .contact-contain .info-table .info-list img {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .info-table .info-list a {
        color: #DCDCDC;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 13px;    
        font-style: normal;
        font-weight: 500;
        line-height: 20px; /* 111.111% */
        text-decoration: none;
    }
    
    .contact-container .main-contact .contact-contain .info-table .social-section {
        position: relative;
        margin-top: 40px;
        display: flex;
        flex-direction: row;
        margin-left: 40px;
        gap: 20px;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .info-table .social-section button {
        background-color: #050022;
        filter: drop-shadow(0px 0px 8px #FCB500);
        border: none;
        border-radius: 50%;
        height: 50px;
        width: 50px;
    }
    
    .contact-container .main-contact .contact-contain .info-table .social-section img {
        width: 20px;
        height: 20px;
        align-items: center;
        position: relative;
        flex-shrink: 0;
    }
    
    
    .contact-container .main-contact .contact-contain .contact-table {
        position: absolute;
        padding: 40px 30px 30px 20px;
        background: #00042C;
        box-shadow: 0px 0px 9px 2px #0D1242;
        margin-left: 0px;
        margin-top: 300px;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .contact-table h2 {
        color: #fff;
        font-family: 'Istok Web' ,sans-serif;
        font-weight: 600;
        font-size: 24px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .f-row {
        display: flex;
        flex-direction: column;
        gap: 20px;
        position: relative;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .f-row .f-name {
        display: flex;
        flex-direction: column ;
        position: relative;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .f-row .f-name p {
        color: #fff;
        font-family: "josefin sans",sans-serif;
        font-size: 16px;
        font-weight: 400px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .f-row .f-name input {
        border-radius: 4.973px;
        border: 1px solid #AEAEAE;
        background: #050022;
        padding: 7px 40px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .f-row .s-name p {
        color: #fff;
        font-family: "josefin sans",sans-serif;
        font-size: 16px;
        font-weight: 400px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .f-row .s-name input {
        border-radius: 4.973px;
        border: 1px solid #AEAEAE;
        background: #050022;
        padding: 7px 60px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .s-row {
        display: flex;
        flex-direction: column;
        gap: 20px;
        position: relative;
        margin-top: 20px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .s-row .e-mail {
        display: flex;
        flex-direction: column ;
        position: relative;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .s-row .e-mail p {
        color: #fff;
        font-family: "josefin sans",sans-serif;
        font-size: 16px;
        font-weight: 400px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .s-row .e-mail input {
        border-radius: 4.973px;
        border: 1px solid #AEAEAE;
        background: #050022;
        padding: 7px 40px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .s-row .p-num p {
        color: #fff;
        font-family: "josefin sans",sans-serif;
        font-size: 16px;
        font-weight: 400px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .s-row .p-num input {
        border-radius: 4px;
        border: 0.829px solid #AEAEAE;
        background: #050022;
        padding: 7px 60px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .t-row {
        position: relative;
        display: flex;
        flex-shrink: 0;
        margin-top: 20px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .t-row .m-box {
        display: flex;
        flex-direction: column ;
        position: relative;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .m-box p {
        color: #fff;
        font-family: "josefin sans",sans-serif;
        font-size: 16px;
        font-weight: 400px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .m-box input {
        border-radius: 4px;
        border: 0.829px solid #AEAEAE;
        background: #050022;
        padding: 50px 60px;
        position: relative;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .message-btn {
        position: relative;
        flex-shrink: 0;
        margin-top: 20px;
        padding: 8px 20px;
        border-radius: 8px;
        border: none;
        background: linear-gradient(90deg, #314C74 0%, #0D1242 95.23%);
        color: #fff;
        font-family: "Open Sans",sans-serif;
        font-weight: 600;
        font-size: 14px;
    }

}

/* Styles for screens between 901px and 1100px */
@media(max-width: 1100px) and (min-width: 901px){
    /* CSS rules for screens between 701px and 900px */
    .contact-section1 {
        width: 100%;
        height: 100vh;
        background: #050022;
    }

    .contact-section1 .contact-banner-section {
        position: relative;
        width: 100%;
    }
    
    .contact-section1 .contact-banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .contact-section1 .contact-banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .contact-section1 .contact-banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .contact-section1 .contact-banner-section .container .image img {
      width: 100%;
      height: 100%;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 3px;
    }
    .contact-section1 .contact-banner-section .container.image{
        width: 1000px;
        height: 360px;
    }
    
    .contact-section1 .contact-banner-section .container .bg {
        height: 454px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -457px;}
     
    .contact-section1 .contact-banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -280px;
    }
    
    .contact-section1 .contact-banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 50px;
        font-weight: 600;
        line-height: normal;
    }
    
    .contact-section1 .contact-banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .contact-section1 .contact-banner-section .container .text-section span {
        color: #FCD400;
    }
    
    .conatct-banner-section .contact-container {
        position: relative;
        width: 100%;
        height: auto;
    }
    
    .contact-container .main-contact {
        position: relative;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .info-table {
        margin-left: -100px;
        margin-top: 500px;
        padding: 10px 50px 20px 10px;
        border: 2px solid #E3DB17;
        background: #050022;
        box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
        position: absolute;
    left: 20%!important;
    }
    
    .contact-container .main-contact .contact-contain .info-table h2 {
        color: #fff;
        font-family: "josefin sans" ,sans-serif;
        font-weight: 600;
        font-size: 20px;
    }
    
    .contact-container .main-contact .contact-contain .info-table .info {
        position: relative;
        margin-left: -30px;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        gap: 30px;
    }
    
    .contact-container .main-contact .contact-contain .info-table .info-list {
        display: flex;
        flex-direction: row;
        gap: 20px;
        list-style-type: none;
    }
    
    .contact-container .main-contact .contact-contain .info-table .info-list img {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .info-table .info-list a {
        color: #DCDCDC;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 13px;    
        font-style: normal;
        font-weight: 500;
        line-height: 20px; /* 111.111% */
        text-decoration: none;
    }
    
    .contact-container .main-contact .contact-contain .info-table .social-section {
        position: relative;
        margin-top: 40px;
        display: flex;
        flex-direction: row;
        margin-left: 40px;
        gap: 20px;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .info-table .social-section button {
        background-color: #050022;
        filter: drop-shadow(0px 0px 8px #FCB500);
        border: none;
        border-radius: 50%;
        height: 50px;
        width: 50px;
    }
    
    .contact-container .main-contact .contact-contain .info-table .social-section img {
        width: 20px;
        height: 20px;
        align-items: center;
        position: relative;
        flex-shrink: 0;
    }
    
    
    .contact-container .main-contact .contact-contain .contact-table {
        position: absolute;
        padding: 40px 30px 30px 150px;
        background: #00042C;
        box-shadow: 0px 0px 9px 2px #0D1242;
        margin-left: 110px;
        margin-top: 500px;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .contact-table h2 {
        color: #fff;
        font-family: 'Istok Web' ,sans-serif;
        font-weight: 600;
        font-size: 24px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .f-row {
        display: flex;
        flex-direction: row;
        gap: 20px;
        position: relative;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .f-row .f-name {
        display: flex;
        flex-direction: column ;
        position: relative;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .f-row .f-name p {
        color: #fff;
        font-family: "josefin sans",sans-serif;
        font-size: 16px;
        font-weight: 400px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .f-row .f-name input {
        border-radius: 4.973px;
        border: 1px solid #AEAEAE;
        background: #050022;
        padding: 7px 40px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .f-row .s-name p {
        color: #fff;
        font-family: "josefin sans",sans-serif;
        font-size: 16px;
        font-weight: 400px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .f-row .s-name input {
        border-radius: 4.973px;
        border: 1px solid #AEAEAE;
        background: #050022;
        padding: 7px 40px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .s-row {
        display: flex;
        flex-direction: row;
        gap: 20px;
        position: relative;
        margin-top: 20px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .s-row .e-mail {
        display: flex;
        flex-direction: column ;
        position: relative;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .s-row .e-mail p {
        color: #fff;
        font-family: "josefin sans",sans-serif;
        font-size: 16px;
        font-weight: 400px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .s-row .e-mail input {
        border-radius: 4.973px;
        border: 1px solid #AEAEAE;
        background: #050022;
        padding: 7px 40px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .s-row .p-num p {
        color: #fff;
        font-family: "josefin sans",sans-serif;
        font-size: 16px;
        font-weight: 400px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .s-row .p-num input {
        border-radius: 4px;
        border: 0.829px solid #AEAEAE;
        background: #050022;
        padding: 7px 40px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .t-row {
        position: relative;
        display: flex;
        flex-shrink: 0;
        margin-top: 20px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .t-row .m-box {
        display: flex;
        flex-direction: column ;
        position: relative;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .m-box p {
        color: #fff;
        font-family: "josefin sans",sans-serif;
        font-size: 16px;
        font-weight: 400px;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .m-box input {
        border-radius: 4px;
        border: 0.829px solid #AEAEAE;
        background: #050022;
        padding: 50px 170px;
        position: relative;
        flex-shrink: 0;
    }
    
    .contact-container .main-contact .contact-contain .contact-table .message-btn {
        position: relative;
        flex-shrink: 0;
        margin-top: 20px;
        padding: 8px 20px;
        border-radius: 8px;
        border: none;
        background: linear-gradient(90deg, #314C74 0%, #0D1242 95.23%);
        color: #fff;
        font-family: "Open Sans",sans-serif;
        font-weight: 600;
        font-size: 14px;
    }

}


/*------------------------------------------login-page----------------------------------*/

.login-section {
    width: 100%;
    height: 132vh;
    background: #050022;
}

.login-banner-section {
    position: relative;
    width: 100%;
}

.login-banner-section .wrapper {
    width: 100%;
    background: #050022;
    flex-shrink: 0;   
}

.login-banner-section .container {
    position: relative;
    height: calc(48*var(--aspect-ratio));
    flex-shrink: 0;
    align-items: center;
}
.login-banner-section .container .image img {
    width: calc(139*var(--aspect-ratio));
    height: calc(48*var(--aspect-ratio));
    flex-shrink: 0;
    position: relative;
    margin-top: calc(7*var(--aspect-ratio));
    margin-left: calc(17*var(--aspect-ratio));
}
/* .login-banner-section .container .image{
    height: auto;
    width: 950px;
    height: 350px;
} */

.login-banner-section .container .bg {
    height: calc(56*var(--aspect-ratio));
    background: rgba(15, 0, 105, 0.50);
    position: relative;
    margin-top: calc(-56*var(--aspect-ratio));
}
 
.login-banner-section .container .text-section {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    margin-top: calc(-44*var(--aspect-ratio));
}

.login-banner-section .container .text-section h1 {
    color: #FFF;
    font-family: 'Istok Web' ,sans-serif;
    font-size: calc(6*var(--aspect-ratio));
    font-weight: 600;
    line-height: normal;
}

.login-banner-section .container .text-section p {
    color: #Fff;
    font-family: 'Istok Web' ,sans-serif;
    font-size: calc(3*var(--aspect-ratio));
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: calc(-3*var(--aspect-ratio));
}

.login-banner-section .container .text-section span {
    color: #FCD400;
}



.login-container .main-login {
    position: relative;
    flex-shrink: 0;
}

.login-table {
	border: calc(.5*var(--aspect-ratio)) solid #E3DB17;
	background: #050022;
	box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
	flex-shrink: 0;
	position: absolute;
	padding: calc(1*var(--aspect-ratio)) calc(3*var(--aspect-ratio));
}

.login-table .logo-section {
    position: relative;
    align-items: center;
    display: flex;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

.logo-section img {
	width: calc(10*var(--aspect-ratio));
	height: calc(10*var(--aspect-ratio));
	margin-top: calc(1*var(--aspect-ratio));
}

.login-table .f-column {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.login-table .f-column .u-name {
    display: flex;
    flex-direction: row;
    gap: calc(1*var(--aspect-ratio));
}

.u-name p {
    color: #fff;
    font-family: "Josefin-Sans" ,sans-serif;
    font-size: calc(2.3*var(--aspect-ratio));
    font-weight: 400;
}
.u-name img {
    width: calc(2.2*var(--aspect-ratio));
    height: calc(2.5*var(--aspect-ratio));
    margin-top: calc(2.3*var(--aspect-ratio));
}

.f-column input {
    position: relative;
    height: calc(6*var(--aspect-ratio));
    width: calc(48*var(--aspect-ratio));
    border: 0.5px solid rgba(25, 21, 54, 0.50);
    background: rgba(25, 21, 54, 0.53);
    flex-shrink: 0;
}

.login-table .s-column {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    margin-top: calc(2*var(--aspect-ratio));
}

.login-table .s-column .password {
    display: flex;
    flex-direction: row;
    gap: calc(1*var(--aspect-ratio))};

.password p {
    color: #fff;
    font-family: "Josefin-Sans" ,sans-serif;
    font-size: 16px;
    font-weight: 400;
} 

.password img {
    width: calc(2.2*var(--aspect-ratio));
    height: calc(2.5*var(--aspect-ratio));
    margin-top: calc(2.3*var(--aspect-ratio));
}
.password p{
    color: #fff;
    font-family: "Josefin-Sans" ,sans-serif;
    font-size: calc(2.3*var(--aspect-ratio));
    font-weight: 400;
}


.s-column input {
    position: relative;
    height: calc(6*var(--aspect-ratio));
    width: calc(48*var(--aspect-ratio));
    border: 0.5px solid rgba(25, 21, 54, 0.50);
    background: rgba(25, 21, 54, 0.53);
    flex-shrink: 0;
}

.button-grp {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: calc(4*var(--aspect-ratio));
    gap: calc(0*var(--aspect-ratio));
}

.button-grp .login {
    border-radius: calc(.5*var(--aspect-ratio));
    background: linear-gradient(90deg, #314C74 0%, #0D1242 95.23%);
    position: absolute;
    border: none;
    padding: calc(1.5*var(--aspect-ratio))  calc(21*var(--aspect-ratio));
    color: #fff;
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-size: calc(2*var(--aspect-ratio));
}

.l-image {
	border-radius: calc(.7*var(--aspect-ratio));
	border: calc(.4*var(--aspect-ratio)) solid #1C8A84;
	background: #050022;
	box-shadow: 0px 0px 10px 4px rgba(28, 138, 132, 0.73);
	position: absolute;
	padding: calc(1.5*var(--aspect-ratio)) calc(8*var(--aspect-ratio));
	margin-left: calc(7*var(--aspect-ratio));
	color: #fff;
	font-family: "Open Sans", sans-serif;
	font-size: calc(1.9*var(--aspect-ratio));
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	display: flex;
	justify-content: center;
	bottom: calc(24*var(--aspect-ratio));
	left: calc(61*var(--aspect-ratio));
}

.last-row {
    margin-top: calc(18*var(--aspect-ratio));
    position: relative;
    display: flex;
    justify-content: space-between;
}   
.last-row p {
    color: #fff;
    font-family: 'Istok Web' ,sans-serif;
    font-size: calc(2.4*var(--aspect-ratio));
    font-weight: 500;
}

.last-row p span {
    color: #00D1FF;
    font-weight: 700;
}

.last-row span {
    font-family: 'Istok Web' ,sans-serif;
    font-size: calc(2*var(--aspect-ratio));
    font-weight: 500;
    color: #00D1FF;
    font-weight: 700;
    margin-top: calc(2.5*var(--aspect-ratio));
}


@media(max-width: 500px){
    .login-section {
        width: 100%;
        height: auto;
        background: #050022;
    }

    .login-section .login-banner-section {
        position: relative;
        width: 100%;
    }
    
    .login-section .login-banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .login-section .login-banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .login-section .login-banner-section .container .image img {
        height: auto;
     width: 100%;
     height: 100%;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 10px;
    }
    .login-section .login-banner-section .container .image{
        width: 350px;
        height: 180px;

    }
    
    .login-section .login-banner-section .container .bg {
        height: 241px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -180px;
    }
     
     
    .login-section .wrapper .login-banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -180px;
    }
    
    .login-section .wrapper .login-banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 40px;
        font-weight: 600;
        line-height: normal;
    }
    
    .login-section .wrapper .login-banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .login-section .wrapper .login-banner-section .container .text-section span {
        color: #FCD400;
    }
    
    .login-section .wrapper .login-banner-section .login-container {
        position: relative;
        width: 100%;
        height: 130vh!important;
        margin-top: 24px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login {
        align-items: center;
        display: flex;
        margin-top: 50px;
        margin-left: -460px;
        position: relative;
        flex-shrink: 0;
    }
/*     
    .login-section .wrapper .login-banner-section .login-container .main-login .login-table {
        padding: 10px 10px;
        border: 2px solid #E3DB17;
        background: #050022;
        box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
        flex-shrink: 0;
        position: absolute;
        left: -20px;
    } */
    .login-section .wrapper .login-banner-section .login-container .main-login .login-table {
        border: 2px solid #E3DB17;
        background: #050022;
        box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
        flex-shrink: 0;
        position: absolute;
        right: -49px;
        top: -142px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login .login-table .logo-section {
        position: relative;
        align-items: center;
        display: flex;
        flex-shrink: 0;
        margin-left: 97px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login.login-table .f-column {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login .login-table .f-column .u-name {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login .login-table .f-column .u-name p {
        color: #fff;
        font-family: "Josefin-Sans" ,sans-serif;
        font-size: 16px;
        font-weight: 400;
    } 
    
    .login-section .wrapper .login-banner-section .login-container .main-login .login-table .f-column .u-name img {
        width: 16px;
        height: 17px;
        margin-top: 15px;
    }
    
    /* .login-section .wrapper .login-banner-section .login-container .main-login .login-table .f-column input {
        position: relative;
        height: 40px;
        width: 350px;
        border: 0.5px solid rgba(25, 21, 54, 0.50);
        background: rgba(25, 21, 54, 0.53);
        flex-shrink: 0;
    } */
    .login-section .wrapper .login-banner-section .login-container .main-login .login-table .f-column input {
        position: relative;
        height: 40px;
        width: calc(147*var(--aspect-ratio))!important;
        border: 0.5px solid rgba(25, 21, 54, 0.50);
        background: rgba(25, 21, 54, 0.53);
        flex-shrink: 0;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login.login-table .login-table .s-column {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        margin-top: 20px;
    }
    .s-column input{
        width: calc(147*var(--aspect-ratio))!important; 
    }
    .login-section .wrapper .login-banner-section .login-container .main-login.login-table .login-table .s-column .password {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login.login-table .s-column .password p {
        color: #fff;
        font-family: "Josefin-Sans" ,sans-serif;
        font-size: 16px;
        font-weight: 400;
    } 
    
    .login-section .wrapper .login-banner-section .login-container .main-login.login-table .s-column .password img {
        width: 16px;
        height: 19px;
        margin-top: 15px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login.login-table .s-column input {
        position: relative;
        height: 40px;
        width: 350px;
        border: 0.5px solid rgba(25, 21, 54, 0.50);
        background: rgba(25, 21, 54, 0.53);
        flex-shrink: 0;
    }
    
    .button-grp {
        position: relative;
        display: flex;
        flex-direction: column;
        margin-top: 30px;
        gap: 30px;
    }
    
    .button-grp .login {
        border-radius: 4px;
        background: linear-gradient(90deg, #314C74 0%, #0D1242 95.23%);
        position: absolute;
        border: none;
        padding: calc(6*var(--aspect-ratio)) calc(62*var(--aspect-ratio))!important;
        color: #fff;
        font-family: "Open Sans", sans-serif;
        font-weight: 700;
        font-size: 18px;
    }
    
    .button-grp .l-image {
        border-radius: 4px;
        border: 2px solid #1C8A84;
        background: #050022;
        box-shadow: 0px 0px 10px 4px rgba(28, 138, 132, 0.73);
        margin-top: 70px;
        position: absolute;
        padding: calc(6*var(--aspect-ratio)) calc(40*var(--aspect-ratio))!important;
        margin-left: 9px;
        color: #fff;
        font-family: "Open Sans", sans-serif;
        font-size: 13px;
        font-weight: 600;
    }
    
    .last-row {
        margin-top: 140px;
        position: relative;
        display: flex;
        justify-content: space-between;
    }
    
    .last-row p {
        color: #fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 14px;
        font-weight: 500;
    }
    
    .last-row p span {
        color: #00D1FF;
        font-weight: 700;
    }
    
    .last-row span {
        font-family: 'Istok Web' ,sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: #00D1FF;
        font-weight: 700;
        margin-top: 15px;
    }

}


/* Styles for screens between 501px and 700px */
@media(max-width: 700px) and (min-width: 501px){
    .login-section {
        width: 100%;
        height: auto;
        background: #050022;
    }

    .login-section .login-banner-section {
        position: relative;
        width: 100%;
    }
    
    .login-section .login-banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .login-section .login-banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .login-section .login-banner-section .container .image img {
     width: 100%;
     height: 100%;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 0px;
    }
    .login-section .login-banner-section .container .image{
        height: auto;
        width: 539px;
        height: 240px;
    }
    
    .login-section .login-banner-section .container .bg {
        height: 300px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -240px;
    }
     
     
    .login-section .wrapper .login-banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -180px;
    }
    
    .login-section .wrapper .login-banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 40px;
        font-weight: 600;
        line-height: normal;
    }
    
    .login-section .wrapper .login-banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .login-section .wrapper .login-banner-section .container .text-section span {
        color: #FCD400;
    }
    
    .login-section .wrapper .login-banner-section .login-container {
        position: relative;
        width: 100%;
        height: 113vh;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login {
        align-items: center;
        display: flex;
        margin-top: 150px;
        margin-left: -330px;
        position: relative;
        flex-shrink: 0;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login .login-table {
        padding: 10px 10px;
        border: 2px solid #E3DB17;
        background: #050022;
        box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
        flex-shrink: 0;
        position: absolute;
        right: 71px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login .login-table .logo-section {
        position: relative;
        align-items: center;
        display: flex;
        flex-shrink: 0;
        margin-left: 140px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login.login-table .f-column {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login .login-table .f-column .u-name {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login .login-table .f-column .u-name p {
        color: #fff;
        font-family: "Josefin-Sans" ,sans-serif;
        font-size: 16px;
        font-weight: 400;
    } 
    
    .login-section .wrapper .login-banner-section .login-container .main-login .login-table .f-column .u-name img {
        width: 16px;
        height: 17px;
        margin-top: 15px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login .login-table .f-column input {
        position: relative;
        height: 40px;
        width: 350px;
        border: 0.5px solid rgba(25, 21, 54, 0.50);
        background: rgba(25, 21, 54, 0.53);
        flex-shrink: 0;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login.login-table .login-table .s-column {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        margin-top: 20px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login.login-table .login-table .s-column .password {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login.login-table .s-column .password p {
        color: #fff;
        font-family: "Josefin-Sans" ,sans-serif;
        font-size: 16px;
        font-weight: 400;
    } 
    
    .login-section .wrapper .login-banner-section .login-container .main-login.login-table .s-column .password img {
        width: 16px;
        height: 19px;
        margin-top: 15px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login.login-table .s-column input {
        position: relative;
        height: 40px;
        width: 350px;
        border: 0.5px solid rgba(25, 21, 54, 0.50);
        background: rgba(25, 21, 54, 0.53);
        flex-shrink: 0;
    }
    
    .button-grp {
        position: relative;
        display: flex;
        flex-direction: column;
        margin-top: 30px;
        gap: 30px;
    }
    
    .button-grp .login {
        border-radius: 4px;
        background: linear-gradient(90deg, #314C74 0%, #0D1242 95.23%);
        position: absolute;
        border: none;
        padding: 10px 150px;
        color: #fff;
        font-family: "Open Sans", sans-serif;
        font-weight: 700;
        font-size: 18px;
    }
    
    .button-grp .l-image {
        border-radius: 4px;
        border: 2px solid #1C8A84;
        background: #050022;
        box-shadow: 0px 0px 10px 4px rgba(28, 138, 132, 0.73);
        margin-top: 70px;
        position: absolute;
        padding: 10px 60px;
        margin-left: 60px;
        color: #fff;
        font-family: "Open Sans", sans-serif;
        font-size: 13px;
        font-weight: 600;
    }
    
    .last-row {
        margin-top: 140px;
        position: relative;
        display: flex;
        justify-content: space-between;
    }
    
    .last-row p {
        color: #fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 14px;
        font-weight: 500;
    }
    
    .last-row p span {
        color: #00D1FF;
        font-weight: 700;
    }
    
    .last-row span {
        font-family: 'Istok Web' ,sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: #00D1FF;
        font-weight: 700;
        margin-top: 15px;
    }

}


/* Styles for screens between 701px and 900px */
@media(max-width: 900px) and (min-width: 701px){
    /* CSS rules for screens between 701px and 900px */
    .login-section {
        width: 100%;
        height: auto;
        background: #050022;
    }

    .login-section .login-banner-section {
        position: relative;
        width: 100%;
    }
    
    .login-section .login-banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .login-section .login-banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .login-section .login-banner-section .container .image img {
    width: 100%;
    height: 100%;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 70px;
    }
    .login-section .login-banner-section .container .image{
        height: auto;
        width: 629px;
        height: 260px;
    }
    
    .login-section .login-banner-section .container .bg {
        height: 320px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -260px;
    }
     
     
    .login-section .wrapper .login-banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -180px;
    }
    
    .login-section .wrapper .login-banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 40px;
        font-weight: 600;
        line-height: normal;
    }
    
    .login-section .wrapper .login-banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .login-section .wrapper .login-banner-section .container .text-section span {
        color: #FCD400;
    }
    
    .login-section .wrapper .login-banner-section .login-container {
        position: relative;
        width: 100%;
        height: 100vh;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login {
        align-items: center;
        display: flex;
        margin-top: 0px!important;
        margin-left: -250px;
        position: relative;
        flex-shrink: 0;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login .login-table {
        padding: 10px 10px;
        border: 2px solid #E3DB17;
        background: #050022;
        box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
        flex-shrink: 0;
        position: absolute;
        right: 165px;
        top: 73px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login .login-table .logo-section {
        position: relative;
        align-items: center;
        display: flex;
        flex-shrink: 0;
        margin-left: 140px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login.login-table .f-column {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login .login-table .f-column .u-name {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login .login-table .f-column .u-name p {
        color: #fff;
        font-family: "Josefin-Sans" ,sans-serif;
        font-size: 16px;
        font-weight: 400;
    } 
    
    .login-section .wrapper .login-banner-section .login-container .main-login .login-table .f-column .u-name img {
        width: 16px;
        height: 17px;
        margin-top: 15px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login .login-table .f-column input {
        position: relative;
        height: 40px;
        width: 350px;
        border: 0.5px solid rgba(25, 21, 54, 0.50);
        background: rgba(25, 21, 54, 0.53);
        flex-shrink: 0;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login.login-table .login-table .s-column {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        margin-top: 20px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login.login-table .login-table .s-column .password {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login.login-table .s-column .password p {
        color: #fff;
        font-family: "Josefin-Sans" ,sans-serif;
        font-size: 16px;
        font-weight: 400;
    } 
    
    .login-section .wrapper .login-banner-section .login-container .main-login.login-table .s-column .password img {
        width: 16px;
        height: 19px;
        margin-top: 15px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login.login-table .s-column input {
        position: relative;
        height: 40px;
        width: 350px;
        border: 0.5px solid rgba(25, 21, 54, 0.50);
        background: rgba(25, 21, 54, 0.53);
        flex-shrink: 0;
    }
    
    .button-grp {
        position: relative;
        display: flex;
        flex-direction: column;
        margin-top: 30px;
        gap: 30px;
    }
    
    .button-grp .login {
        border-radius: 4px;
        background: linear-gradient(90deg, #314C74 0%, #0D1242 95.23%);
        position: absolute;
        border: none;
        padding: 10px 150px;
        color: #fff;
        font-family: "Open Sans", sans-serif;
        font-weight: 700;
        font-size: 18px;
    }
    
    .button-grp .l-image {
        border-radius: 4px;
        border: 2px solid #1C8A84;
        background: #050022;
        box-shadow: 0px 0px 10px 4px rgba(28, 138, 132, 0.73);
        margin-top: 70px;
        position: absolute;
        padding: 10px 60px;
        margin-left: 60px;
        color: #fff;
        font-family: "Open Sans", sans-serif;
        font-size: 13px;
        font-weight: 600;
    }
    
    .last-row {
        margin-top: 140px;
        position: relative;
        display: flex;
        justify-content: space-between;
    }
    
    .last-row p {
        color: #fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 14px;
        font-weight: 500;
    }
    
    .last-row p span {
        color: #00D1FF;
        font-weight: 700;
    }
    
    .last-row span {
        font-family: 'Istok Web' ,sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: #00D1FF;
        font-weight: 700;
        margin-top: 15px;
    }

}

/* Styles for screens between 901px and 1100px */
@media(max-width: 1100px) and (min-width: 901px){
    /* CSS rules for screens between 701px and 900px */
    .login-section {
        width: 100%;
        height: 132vh!important;
        background: #050022;
    }

    .login-section .login-banner-section {
        position: relative;
        width: 100%;
    }
    
    .login-section .login-banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .login-section .login-banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .login-section .login-banner-section .container .image img {
     width: 100%;
     height: 100%;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 30px;
    }
    .login-section .login-banner-section .container .image{
        width: 916px;
        height: 360px;
    }
    .login-section .login-banner-section .container .bg {
        height: 420px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -420px;
    }
     
     
    .login-section .wrapper .login-banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -280px;
    }
    
    .login-section .wrapper .login-banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 50px;
        font-weight: 600;
        line-height: normal;
    }
    
    .login-section .wrapper .login-banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .login-section .wrapper .login-banner-section .container .text-section span {
        color: #FCD400;
    }
    
    .login-section .wrapper .login-banner-section .login-container {
        position: relative;
        width: 100%;
        height: 100vh;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login {
        align-items: center;
        display: flex;
        margin-top: 300px;
        margin-left: -160px;
        position: relative;
        flex-shrink: 0;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login .login-table {
        padding: 10px 40px;
        border: 2px solid #E3DB17;
        background: #050022;
        box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
        flex-shrink: 0;
        position: absolute;
        left: 25%;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login .login-table .logo-section {
        position: relative;
        align-items: center;
        display: flex;
        flex-shrink: 0;
        margin-left: 140px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login.login-table .f-column {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login .login-table .f-column .u-name {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login .login-table .f-column .u-name p {
        color: #fff;
        font-family: "Josefin-Sans" ,sans-serif;
        font-size: 16px;
        font-weight: 400;
    } 
    
    .login-section .wrapper .login-banner-section .login-container .main-login .login-table .f-column .u-name img {
        width: 16px;
        height: 17px;
        margin-top: 15px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login .login-table .f-column input {
        position: relative;
        height: 40px;
        width: 350px;
        border: 0.5px solid rgba(25, 21, 54, 0.50);
        background: rgba(25, 21, 54, 0.53);
        flex-shrink: 0;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login.login-table .login-table .s-column {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        margin-top: 20px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login.login-table .login-table .s-column .password {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login.login-table .s-column .password p {
        color: #fff;
        font-family: "Josefin-Sans" ,sans-serif;
        font-size: 16px;
        font-weight: 400;
    } 
    
    .login-section .wrapper .login-banner-section .login-container .main-login.login-table .s-column .password img {
        width: 16px;
        height: 19px;
        margin-top: 15px;
    }
    
    .login-section .wrapper .login-banner-section .login-container .main-login.login-table .s-column input {
        position: relative;
        height: 40px;
        width: 350px;
        border: 0.5px solid rgba(25, 21, 54, 0.50);
        background: rgba(25, 21, 54, 0.53);
        flex-shrink: 0;
    }
    
    .button-grp {
        position: relative;
        display: flex;
        flex-direction: column;
        margin-top: 30px;
        gap: 30px;
    }
    
    .button-grp .login {
        border-radius: 4px;
        background: linear-gradient(90deg, #314C74 0%, #0D1242 95.23%);
        position: absolute;
        border: none;
        padding: 10px 150px;
        color: #fff;
        font-family: "Open Sans", sans-serif;
        font-weight: 700;
        font-size: 18px;
    }
    
    .button-grp .l-image {
        border-radius: 4px;
        border: 2px solid #1C8A84;
        background: #050022;
        box-shadow: 0px 0px 10px 4px rgba(28, 138, 132, 0.73);
        margin-top: 70px;
        position: absolute;
        padding: 10px 60px;
        margin-left: 60px;
        color: #fff;
        font-family: "Open Sans", sans-serif;
        font-size: 13px;
        font-weight: 600;
    }
    
    .last-row {
        margin-top: 140px;
        position: relative;
        display: flex;
        justify-content: space-between;
    }
    
    .last-row p {
        color: #fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 14px;
        font-weight: 500;
    }
    
    .last-row p span {
        color: #00D1FF;
        font-weight: 700;
    }
    
    .last-row span {
        font-family: 'Istok Web' ,sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: #00D1FF;
        font-weight: 700;
        margin-top: 15px;
    }

}

/*-----------------------------------------face-login-page----------------------------------*/

.face-login-section {
    width: 100%;
    height: auto;
    background: #050022;
}

.face-banner-section {
    position: relative;
    width: 100%;
}

.face-banner-section .wrapper {
    width: 100%;
    background: #050022;
    flex-shrink: 0;   
}

.face-banner-section .container {
    position: relative;
    height: 370px;
    flex-shrink: 0;
    align-items: center;
}

.face-banner-section .container .image img {
   width: 100%;
   height: 100%;
    flex-shrink: 0;
    position: relative;
    margin-top: 50px;
    margin-left: 200px;
}
.face-banner-section .container .image{
    height: auto;
    width: 950px;
    height: 350px;
}

.face-banner-section .container .bg {
    height: 400px;
    background: rgba(15, 0, 105, 0.50);
    position: relative;
    margin-top: -350px;
}
 
.face-banner-section .container .text-section {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    margin-top: -280px;
}

.face-banner-section .container .text-section h1 {
    color: #FFF;
    font-family: 'Istok Web' ,sans-serif;
    font-size: 50px;
    font-weight: 600;
    line-height: normal;
}

.face-banner-section .container .text-section p {
    color: #Fff;
    font-family: 'Istok Web' ,sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: -20px;
}

.face-banner-section .container .text-section span {
    color: #FCD400;
}

.face-banner-section .face-container {
    position: relative;
    width: 100%;
    height: fit-content;
}

.face-banner-section .face-container .face-wrapper {
    padding: 120px 480px 100px 480px;
    position: relative;
    flex-shrink: 0;
}

.face-login-table {
    padding: 30px 20px;
    border: 2px solid #E3DB17;
    background: #050022;
    box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
    flex-shrink: 0;
    position: relative;
    align-items: center;
    display: block;
}

.face-login-table .logo-section {
    position: relative;
    align-items: center;
    display: flex;
    flex-shrink: 0; 
    display: flex;
    justify-self: center;
}

.face-login-table .scan-section {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    margin-top: 10px;
}

.face-login-table .scan-section h2 {
    color: #fff;
    font-family: 'Istok Web' ,sans-serif;
    font-size: 22px;
    font-weight: 600;
    position: relative;
}

.face-login-table .scan-section img {
    height: 180px;
    width: 190px;
    position: relative;
    flex-shrink: 0;
}

.face-login-table .scan-section .face-btn {
    border-radius: 4px;
    background: linear-gradient(90deg, #314C74 0%, #0D1242 95.23%);
    border: none;    
    padding: 8px 40px 8px 40px;
    display: flex;
    justify-content: space-between;
}

.face-login-table .scan-section .face-btn span {
    color: #fff;
    font-family: "Open Sans",sans-serif;
    font-size: 18px;
    font-weight: 500;
}

.face-login-table .scan-section .face-btn img {
    width: 14px;
    height: 20px;
    margin-left: 12px;
    transform: rotate(-90deg);
}



@media(max-width: 500px){
    .face-login-section {
        width: 100%;
        height: auto;
        background: #050022;
    }

    .face-login-section .face-banner-section {
        position: relative;
        width: 100%;
    }
    
    .face-login-section .face-banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .face-login-section .face-banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .face-login-section .face-banner-section .container .image img {
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 0px;
        width: 100%;
        height: 100%;
    }
    .face-login-section .face-banner-section .container .image{
        width: 367px;
        height: 180px;  
    }
    
    .face-login-section .face-banner-section .container .bg {
        height: 240px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -180px;
    }
     
     
    .face-login-section .face-banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -180px;
    }
    
    .face-login-section .face-banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 40px;
        font-weight: 600;
        line-height: normal;
    }
    
    .face-login-section .face-banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .face-login-section .face-banner-section .container .text-section span {
        color: #FCD400;
    }
    
    .face-banner-section .face-container {
        position: relative;
        width: 100%;
        height: fit-content;  
    }

    .face-banner-section .face-container .face-wrapper {
        padding: 20px 40px;
        position: relative;
        flex-shrink: 0;
    }
    
    .face-login-table {
        padding: 30px 20px;
        border: 2px solid #E3DB17;
        background: #050022;
        box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
        flex-shrink: 0;
        position: relative;
        align-items: center;
        display: block;
        margin-top: -60px;
    }
    
    .face-login-table .logo-section {
        position: relative;
        align-items: center;
        display: flex;
        flex-shrink: 0; 
        margin-left: 100px;
    }
    
    .face-login-table .scan-section {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center;
        margin-top: 10px;
    }
    
    .face-login-table .scan-section h2 {
        color: #fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 22px;
        font-weight: 600;
        position: relative;
    }
    
    .face-login-table .scan-section img {
        height: 200px;
        width: 200px;
        position: relative;
        flex-shrink: 0;
    }
    
    .face-login-table .scan-section .face-btn {
        border-radius: 4px;
        background: linear-gradient(90deg, #314C74 0%, #0D1242 95.23%);
        border: none;
        color: #fff;
        font-family: "Open Sans",sans-serif;
        font-size: 15px;
        font-weight: 600;
        padding: 12px 60px;
    }
    
}

/* Styles for screens between 501px and 700px */
@media(max-width: 700px) and (min-width: 501px){
    .face-login-section {
        width: 100%;
        height: auto;
        background: #050022;
    }

    .face-login-section .face-banner-section {
        position: relative;
        width: 100%;
    }
    
    .face-login-section .face-banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .face-login-section .face-banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .face-login-section .face-banner-section .container .image img {
     width: 100%;
     height: 100%;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 20px;
    }
    .face-login-section .face-banner-section .container .image{
        height: auto;
        width: 490px;
        height: 240px;
    }
    
    .face-login-section .face-banner-section .container .bg {
        height: 300px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -240px;
    }
     
     
    .face-login-section .face-banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -180px;
    }
    
    .face-login-section .face-banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 40px;
        font-weight: 600;
        line-height: normal;
    }
    
    .face-login-section .face-banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: pnormal;
        margin-top: -20x;
    }
    
    .face-login-section .face-banner-section .container .text-section span {
        color: #FCD400;
    }
    
    .face-banner-section .face-container {
        position: relative;
        width: 100%;
        height: fit-content;  
    }

    .face-banner-section .face-container .face-wrapper {
        padding: 120px 140px;
        position: relative;
        flex-shrink: 0;
    }
    
    .face-login-table {
        padding: 30px 20px;
        border: 2px solid #E3DB17;
        background: #050022;
        box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
        flex-shrink: 0;
        position: relative;
        align-items: center;
        display: block;
        margin-top: -60px;
    }
    
    .face-login-table .logo-section {
        position: relative;
        align-items: center;
        display: flex;
        flex-shrink: 0; 
      display: flex;
      justify-content: center;
    }
    
    .face-login-table .scan-section {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center;
        margin-top: 10px;
    }
    
    .face-login-table .scan-section h2 {
        color: #fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 22px;
        font-weight: 600;
        position: relative;
    }
    
    .face-login-table .scan-section img {
        height: 200px;
        width: 200px;
        position: relative;
        flex-shrink: 0;
    }
    
    .face-login-table .scan-section .face-btn {
        border-radius: 4px;
        background: linear-gradient(90deg, #314C74 0%, #0D1242 95.23%);
        border: none;
        color: #fff;
        font-family: "Open Sans",sans-serif;
        font-size: 15px;
        font-weight: 600;
        padding: 12px 60px;
    }
    
}

/* Styles for screens between 501px and 900px */
@media(max-width: 900px) and (min-width: 701px){
    /* CSS rules for screens between 501px and 900px */
    
    .face-login-section {
        width: 100%;
        height: auto;
        background: #050022;
    }

    .face-login-section .face-banner-section {
        position: relative;
        width: 100%;
    }
    
    .face-login-section .face-banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .face-login-section .face-banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .face-login-section .face-banner-section .container .image img {
        width: 100%;
        height: 100%;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 70px;
    }
    .face-login-section .face-banner-section .container .image{
        height: auto;
        width: 640px;
        height: 260px;
    }
    
    .face-login-section .face-banner-section .container .bg {
        height: 320px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -250px;
    }
     
     
    .face-login-section .face-banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -180px;
    }
    
    .face-login-section .face-banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 40px;
        font-weight: 600;
        line-height: normal;
    }
    
    .face-login-section .face-banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .face-login-section .face-banner-section .container .text-section span {
        color: #FCD400;
    }
    
    .face-banner-section .face-container {
        position: relative;
        width: 100%;
        height: fit-content;  
    }

    .face-banner-section .face-container .face-wrapper {
        padding: 60px 230px;
        position: relative;
        flex-shrink: 0;
    }
    
    .face-login-table {
        padding: 30px 20px;
        border: 2px solid #E3DB17;
        background: #050022;
        box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
        flex-shrink: 0;
        position: relative;
        align-items: center;
        display: block;
        margin-top: -60px;
    }
    
    .face-login-table .logo-section {
        position: relative;
        align-items: center;
        display: flex;
        flex-shrink: 0; 
        margin-left: 140px;
    }
    
    .face-login-table .scan-section {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center;
        margin-top: 10px;
    }
    
    .face-login-table .scan-section h2 {
        color: #fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 22px;
        font-weight: 600;
        position: relative;
    }
    
    .face-login-table .scan-section img {
        height: 200px;
        width: 200px;
        position: relative;
        flex-shrink: 0;
    }
    
    .face-login-table .scan-section .face-btn {
        border-radius: 4px;
        background: linear-gradient(90deg, #314C74 0%, #0D1242 95.23%);
        border: none;
        color: #fff;
        font-family: "Open Sans",sans-serif;
        font-size: 15px;
        font-weight: 600;
        padding: 12px 60px;
    }

}

/* Styles for screens between 901px and 1100px */
@media(max-width: 1100px) and (min-width: 901px){
    /* CSS rules for screens between 501px and 900px */
    
    .face-login-section {
        width: 100%;
        height: auto;
        background: #050022;
    }

    .face-login-section .face-banner-section {
        position: relative;
        width: 100%;
    }
    
    .face-login-section .face-banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .face-login-section .face-banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .face-login-section .face-banner-section .container .image img {
       width: 100%;
       height: 100%;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 30px;
    }
    .face-login-section .face-banner-section .container .image{
        height: auto;
        width: 870px;
        height: 360px;
    }
    
    .face-login-section .face-banner-section .container .bg {
        height: 420px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -360px;
    }
     
     
    .face-login-section .face-banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -280px;
    }
    
    .face-login-section .face-banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 50px;
        font-weight: 600;
        line-height: normal;
    }
    
    .face-login-section .face-banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .face-login-section .face-banner-section .container .text-section span {
        color: #FCD400;
    }
    
    .face-banner-section .face-container {
        position: relative;
        width: 100%;
        height: fit-content;  
    }

    .face-banner-section .face-container .face-wrapper {
        padding: 60px 300px;
        position: relative;
        flex-shrink: 0;
    }
    
    .face-login-table {
        padding: 30px 20px;
        border: 2px solid #E3DB17;
        background: #050022;
        box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
        flex-shrink: 0;
        position: relative;
        align-items: center;
        display: block;
        margin-top: 120px;
    }
    
    .face-login-table .logo-section {
        position: relative;
        align-items: center;
        display: flex;
        flex-shrink: 0; 
        margin-left: 170px;
    }
    
    .face-login-table .scan-section {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center;
        margin-top: 10px;
    }
    
    .face-login-table .scan-section h2 {
        color: #fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 22px;
        font-weight: 600;
        position: relative;
    }
    
    .face-login-table .scan-section img {
        height: 200px;
        width: 200px;
        position: relative;
        flex-shrink: 0;
    }
    
    .face-login-table .scan-section .face-btn {
        border-radius: 4px;
        background: linear-gradient(90deg, #314C74 0%, #0D1242 95.23%);
        border: none;
        color: #fff;
        font-family: "Open Sans",sans-serif;
        font-size: 15px;
        font-weight: 600;
        padding: 12px 60px;
    }

}

/*-------------------------------signup-page--------------------------------------------------------*/
.login-btn-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(48*var(--aspect-ratio));
    margin-left: calc(5*var(--aspect-ratio));
}
.signup-section {
    width: 100%;
    height: 100vh !important;
    background: #050022;
}

.signup-banner-section {
    position: relative;
    width: 100%;
}

.signup-banner-section .wrapper {
    width: 100%;
    background: #050022;
    flex-shrink: 0;   
}

.signup-banner-section .container {
    position: relative;
    height:  calc(48*var(--aspect-ratio));
    flex-shrink: 0;
    align-items: center;
}

.signup-banner-section .container .image img {
    height: auto;
    width: calc(139*var(--aspect-ratio));
    height: calc(48*var(--aspect-ratio));
    flex-shrink: 0;
    position: relative;
    margin-top: calc(7*var(--aspect-ratio));
    margin-left: calc(17*var(--aspect-ratio));
}

.signup-banner-section .container .bg {
    height: calc(56*var(--aspect-ratio));
    background: rgba(15, 0, 105, 0.50);
    position: relative;
    margin-top: calc(-56*var(--aspect-ratio));
}
 
.signup-banner-section .container .text-section {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    margin-top: calc(-44*var(--aspect-ratio));
}

.signup-banner-section .container .text-section h1 {
    color: #FFF;
    font-family: 'Istok Web' ,sans-serif;
    font-size: calc(6*var(--aspect-ratio));
    font-weight: 600;
    line-height: normal;
}

.signup-banner-section .container .text-section p {
    color: #Fff;
    font-family: 'Istok Web' ,sans-serif;
    font-size: calc(3*var(--aspect-ratio));
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: calc(-3*var(--aspect-ratio));
}

.signup-banner-section .container .text-section span {
    color: #FCD400;
}

.signup-banner-section .signup-container {
	position: relative;
	width: 100%;
	height: calc(200*var(--aspect-ratio));
}

/* .signup-container .signup-contain {
    padding: 200px;
    position: absolute;
    flex-shrink: 0;
} */
.signup-container .signup-contain {
    /* padding: calc(28*var(--aspect-ratio)); */
    position: absolute;
    flex-shrink: 0;
    left: calc(50*var(--aspect-ratio));
    top: calc(16*var(--aspect-ratio));
}

.signup-container .main-signup .signup-contain {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

/* .signup-table {
    padding: 30px 30px 30px 20px;
    border: 2px solid #E3DB17;
    background: #050022;
    box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -100px;
    margin-left: 220px;
} */
.signup-table {
	padding: calc(2*var(--aspect-ratio)) calc(2*var(--aspect-ratio)) calc(2*var(--aspect-ratio)) calc(1*var(--aspect-ratio));
	border: calc(.5*var(--aspect-ratio)) solid #E3DB17;
	background: #050022;
	box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	left: calc(8* var(--aspect-ratio));
	top: calc(1* var(--aspect-ratio));
}

.signup-table .heading-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
}


.heading-wrapper h2 {
    color: #fff;
    font-family: "Josefin-Sans" ,sans-serif;
    font-weight: 600;
    font-size: calc(3.7*var(--aspect-ratio));
}

.heading-wrapper img {
	width: calc(10*var(--aspect-ratio));
	height: calc(10*var(--aspect-ratio));
	margin-top: calc(1*var(--aspect-ratio));
	}

.heading-wrapper p {
    color: #aeaeae;
    font-family: "Josefin-Sans",sans-serif;
    margin-top: calc(-1*var(--aspect-ratio));
    font-size: calc(2*var(--aspect-ratio));
    font-weight: 400px;
}

.heading-wrapper span {
    color: #00D1FF;
    font-weight: 600;
}

.signup-section .middle-section {
	position: relative;
	display: flex;
	flex-direction: row;
	gap: 100px;
	margin-top: calc(1* var(--aspect-ratio));
}

.middle-section .rignt {
    position: relative;
    display: flex;
    flex-shrink: 0;
    
}

.right .sign {
	display: flex;
	position: relative;
	flex-direction: column;
	gap: calc(2.5* var(--aspect-ratio));
	left: calc(0* var(--aspect-ratio));
}

.right .sign .sign-list {
	list-style-type: none;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: calc(1* var(--aspect-ratio));
}

.sign-list .name-list {
    display: flex;
    flex-direction: row;
    position: relative;
    gap: calc(1.4*var(--aspect-ratio));
}

.name-list img {
    width: calc(2.2*var(--aspect-ratio));
    height: calc(2.5*var(--aspect-ratio));

}

.name-list a {
    text-decoration: none;
    color: #fff;
    font-family: "Josefin Sans",sans-serif;
    font-size: calc(2*var(--aspect-ratio));
    font-weight: 700;
    margin-top: calc(0.6*var(--aspect-ratio));
}

.sign-list input {
	border: 0.5px solid rgba(25, 21, 54, 0.50);
	background: rgba(25, 21, 54, 0.53);
	padding: calc(1.5*var(--aspect-ratio)) calc(2*var(--aspect-ratio));
	width: calc(48* var(--aspect-ratio));
	height: calc(6* var(--aspect-ratio));
}

.signup-table .s-image {
    border-radius: 4px;
    border: calc(.5*var(--aspect-ratio)) solid #1C8A84;
    background: #050022;
    box-shadow: 0px 0px 10px 4px rgba(28, 138, 132, 0.73);
    padding: calc(2*var(--aspect-ratio))  calc(5*var(--aspect-ratio));
    margin-top: calc(2*var(--aspect-ratio));
    background: transparent;
    color: #fff;
    font-family: "Open Sans" ,sans-serif;
    font-size: calc(1.9*var(--aspect-ratio));
    font-weight: 600;
    position: relative;
}

.signup-table .submit-button {
	margin-top: calc(0*var(--aspect-ratio));
	border-radius: 4px;
	background: linear-gradient(90deg, #314C74 0%, #0D1242 95.23%);
	border: none;
	color: #fff;
	font-family: "Open Sans" ,sans-serif;
	font-size: calc(2*var(--aspect-ratio));
	font-weight: 600;
	width: calc(48* var(--aspect-ratio));
	height: calc(6* var(--aspect-ratio));
	margin-right: calc(1*var(--aspect-ratio));
}
.country_design {
    color: #999999;
    border: 0.5px solid rgba(25, 21, 54, 0.50);
    background: rgba(25, 21, 54, 0.53);
    width: calc(48* var(--aspect-ratio))!important;
    height: calc(6* var(--aspect-ratio))!important;
    font-size: calc(1.9* var(--aspect-ratio));
}

.country_design:hover{
border-radius:0!important;	
}

@media(max-width: 500px){
    .signup-section {
        width: 100%;
        height: 100vh;
        background: #050022;
    }

    .signup-section .signup-banner-section {
        position: relative;
        width: 100%;
    }
    
    .signup-section .signup-banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .signup-section .signup-banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .signup-section .signup-banner-section .container .image img {
      height: 100%;
      width: 100%;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 3px;
    }
    .signup-section .signup-banner-section .container .image{
        width: calc(175*var(--aspect-ratio));
        height: 180px;
    }
    
    .signup-section .signup-banner-section .container .bg {
        height: 240px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -180px;
    }
     
    .signup-section .wrapper .signup-banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -180px;
    }
    
    .signup-section .wrapper .signup-banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 40px;
        font-weight: 600;
        line-height: normal;
    }
    
    .signup-section .wrapper .signup-banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .signup-section .wrapper .signup-banner-section .container .text-section span {
        color: #FCD400;
    }

    
    .signup-container .main-signup {
        position: relative;
        flex-shrink: 0;
        margin-left: -220px;
    }
    
    .signup-container .main-signup .signup-contain {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
    }
    
    .signup-table {
        padding: 20px calc(7*var(--aspect-ratio)) 20px 0px;
        border: 2px solid #E3DB17;
        background: #050022;
        box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: calc(13*var(--aspect-ratio));
        margin-top: -260px;
    }
    
    .signup-table .heading-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
    }
    
    
    .heading-wrapper h2 {
        color: #fff;
        font-family: "Josefin-Sans" ,sans-serif;
        font-size: 26px;
        font-weight: 600px;
    }
    
    .heading-wrapper p {
        color: #aeaeae;
        font-family: "Josefin-Sans",sans-serif;
        margin-top: -10px;
        font-size: 14px;
        font-weight: 400px;
    }
    
    .heading-wrapper span {
        color: #00D1FF;
        font-weight: 600;
    }
    
    .signup-section .middle-section {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 30px;
    }
    
    .middle-section .rignt {
        position: relative;
        display: flex;
        flex-shrink: 0;
        
    }
    
    .right .sign {
        display: flex;
        position: relative;
        flex-direction: column;
        gap: 15px;
    }
    
    .right .sign .sign-list {
        list-style-type: none;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .sign-list .name-list {
        display: flex;
        flex-direction: row;
        position: relative;
        gap: 10px;
    }
    
    .name-list img {
        width: 16px;
        height: 18px;
        flex-shrink: 0;
    }
    
    .name-list a {
        text-decoration: none;
        color: #fff;
        font-family: "Josefin Sans",sans-serif;
        font-size: 14px;
        font-weight: 700;
        margin-top: 3px;
    }
    
    .sign-list input {
        border: 0.5px solid rgba(25, 21, 54, 0.50);
        background: rgba(25, 21, 54, 0.53);
        padding: 7px calc(25*var(--aspect-ratio));
    }
    
    .signup-table .s-image {
        border-radius: 4px;
        border: 2px solid #1C8A84;
        background: #050022;
        box-shadow: 0px 0px 10px 4px rgba(28, 138, 132, 0.73);
        padding: 8px 40px;
        margin-top: 20px;
        background: transparent;
        color: #fff;
        font-family: "Open Sans" ,sans-serif;
        font-size: 13px;
        font-weight: 600;
        position: relative;
    }
    
    
    .signup-table .submit-button {
        margin-top: 30px;
        border-radius: 4px;
        background: linear-gradient(90deg, #314C74 0%, #0D1242 95.23%);
        border: none;
        color: #fff;
        font-family: "Open Sans" ,sans-serif;
        font-size: 13px;
        font-weight: 600;
        position: relative;
        padding: 7px calc(63*var(--aspect-ratio));
    
    }
    

}

@media(max-width: 700px) and (min-width: 501px){
    .signup-section {
        width: 100%;
        height: 100vh;
        background: #050022;
    }

    .signup-section .signup-banner-section {
        position: relative;
        width: 100%;
    }
    
    .signup-section .signup-banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .signup-section .signup-banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .signup-section .signup-banner-section .container .image img {
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 20px;
        width: 100%;
        height: 100%;
    }
.signup-section .signup-banner-section .container .image{
    width: 580px;
    height: 240px;
    }
    
    .signup-section .signup-banner-section .container .bg {
        height: 300px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -240px;
    }
     
    .signup-section .wrapper .signup-banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -180px;
    }
    
    .signup-section .wrapper .signup-banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 40px;
        font-weight: 600;
        line-height: normal;
    }
    
    .signup-section .wrapper .signup-banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .signup-section .wrapper .signup-banner-section .container .text-section span {
        color: #FCD400;
    }

    
    .signup-container .main-signup {
        position: relative;
        flex-shrink: 0;
        margin-left: -150px;
        margin-top: 70px;
    }
    
    .signup-container .main-signup .signup-contain {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
    }
    
    .signup-table {
        padding: 20px 20px 20px 0px;
        border: 2px solid #E3DB17;
        background: #050022;
        box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: -23px;
        margin-top: -260px;
    }
    
    .signup-table .heading-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
    }
    
    
    .heading-wrapper h2 {
        color: #fff;
        font-family: "Josefin-Sans" ,sans-serif;
        font-size: 26px;
        font-weight: 600px;
    }
    
    .heading-wrapper p {
        color: #aeaeae;
        font-family: "Josefin-Sans",sans-serif;
        margin-top: -10px;
        font-size: 14px;
        font-weight: 400px;
    }
    
    .heading-wrapper span {
        color: #00D1FF;
        font-weight: 600;
    }
    
    .signup-section .middle-section {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 30px;
    }
    
    .middle-section .rignt {
        position: relative;
        display: flex;
        flex-shrink: 0;
        
    }
    
    .right .sign {
        display: flex;
        position: relative;
        flex-direction: column;
        gap: 15px;
    }
    
    .right .sign .sign-list {
        list-style-type: none;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .sign-list .name-list {
        display: flex;
        flex-direction: row;
        position: relative;
        gap: 10px;
    }
    
    .name-list img {
        width: 16px;
        height: 18px;
        flex-shrink: 0;
    }
    
    .name-list a {
        text-decoration: none;
        color: #fff;
        font-family: "Josefin Sans",sans-serif;
        font-size: 14px;
        font-weight: 700;
        margin-top: 3px;
    }
    
    .sign-list input {
        border: 0.5px solid rgba(25, 21, 54, 0.50);
        background: rgba(25, 21, 54, 0.53);
        padding: 7px 140px;
    }
    
    .signup-table .s-image {
        border-radius: 4px;
        border: 2px solid #1C8A84;
        background: #050022;
        box-shadow: 0px 0px 10px 4px rgba(28, 138, 132, 0.73);
        padding: 8px 40px;
        margin-top: 20px;
        background: transparent;
        color: #fff;
        font-family: "Open Sans" ,sans-serif;
        font-size: 13px;
        font-weight: 600;
        position: relative;
    }
    
    
    .signup-table .submit-button {
		margin-top: calc(1.9*var(--aspect-ratio));
		border-radius: 4px;
		background: linear-gradient(90deg, #314C74 0%, #0D1242 95.23%);
		border: none;
		color: #fff;
		font-family: "Open Sans" ,sans-serif;
		font-size: calc(2*var(--aspect-ratio));
		font-weight: 600;
		position: relative;
		padding: calc(2*var(--aspect-ratio)) calc(16*var(--aspect-ratio));
		left: calc(6* var(--aspect-ratio));
	}
    

}

/* Styles for screens between 501px and 900px */
@media(max-width: 900px) and (min-width: 701px){
    /* CSS rules for screens between 501px and 900px */
    .signup-section {
        width: 100%;
        height: 100vh;
        background: #050022;
    }

    .signup-section .signup-banner-section {
        position: relative;
        width: 100%;
    }
    
    .signup-section .signup-banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .signup-section .signup-banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .signup-section .signup-banner-section .container .image img {
      width: 100%;
      height: 100%;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 28px;
    }
    .signup-section .signup-banner-section .container .image{
        height: auto;
        width: 641px;
        height: 260px;
    }
    
    .signup-section .signup-banner-section .container .bg {
        height: 320px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -260px;
    }
     
    .signup-section .wrapper .signup-banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -180px;
    }
    
    .signup-section .wrapper .signup-banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 40px;
        font-weight: 600;
        line-height: normal;
    }
    
    .signup-section .wrapper .signup-banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .signup-section .wrapper .signup-banner-section .container .text-section span {
        color: #FCD400;
    }

    
    .signup-container .main-signup {
        position: relative;
        flex-shrink: 0;
        margin-left: -90px;
        margin-top: 100px;
    }
    
    .signup-container .main-signup .signup-contain {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
    }
    
    .signup-table {
        padding: 20px 20px 20px 0px;
        border: 2px solid #E3DB17;
        background: #050022;
        box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 50px;
        margin-top: -260px;
    }
    
    .signup-table .heading-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
    }
    
    
    .heading-wrapper h2 {
        color: #fff;
        font-family: "Josefin-Sans" ,sans-serif;
        font-size: 26px;
        font-weight: 600px;
    }
    
    .heading-wrapper p {
        color: #aeaeae;
        font-family: "Josefin-Sans",sans-serif;
        margin-top: -10px;
        font-size: 14px;
        font-weight: 400px;
    }
    
    .heading-wrapper span {
        color: #00D1FF;
        font-weight: 600;
    }
    
    .signup-section .middle-section {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 30px;
    }
    
    .middle-section .rignt {
        position: relative;
        display: flex;
        flex-shrink: 0;
        
    }
    
   .right .sign {
		display: flex;
		position: relative;
		flex-direction: column;
		gap: calc(2* var(--aspect-ratio));
	}
    
    .right .sign .sign-list {
        list-style-type: none;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .sign-list .name-list {
        display: flex;
        flex-direction: row;
        position: relative;
        gap: 10px;
    }
    
    .name-list img {
        width: 16px;
        height: 18px;
        flex-shrink: 0;
    }
    
    .name-list a {
        text-decoration: none;
        color: #fff;
        font-family: "Josefin Sans",sans-serif;
        font-size: 14px;
        font-weight: 700;
        margin-top: 3px;
    }
    
    .sign-list input {
        border: 0.5px solid rgba(25, 21, 54, 0.50);
        background: rgba(25, 21, 54, 0.53);
        padding: 7px 160px;
    }
    
    .signup-table .s-image {
        border-radius: 4px;
        border: 2px solid #1C8A84;
        background: #050022;
        box-shadow: 0px 0px 10px 4px rgba(28, 138, 132, 0.73);
        padding: 8px 40px;
        margin-top: 20px;
        background: transparent;
        color: #fff;
        font-family: "Open Sans" ,sans-serif;
        font-size: 13px;
        font-weight: 600;
        position: relative;
    }
    
    
    .signup-table .submit-button {
        margin-top: 30px;
        border-radius: 4px;
        background: linear-gradient(90deg, #314C74 0%, #0D1242 95.23%);
        border: none;
        color: #fff;
        font-family: "Open Sans" ,sans-serif;
        font-size: 13px;
        font-weight: 600;
        position: relative;
        padding: 8px 130px;
    
    }
}

/* Styles for screens between 901px and 1100px */
@media(max-width: 1100px) and (min-width: 901px){
    /* CSS rules for screens between 501px and 900px */
    .signup-section {
        width: 100%;
        height: 100vh;
        background: #050022;
    }

    .signup-section .signup-banner-section {
        position: relative;
        width: 100%;
    }
    
    .signup-section .signup-banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .signup-section .signup-banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .signup-section .signup-banner-section .container .image img {
      width: 100%;
      height: 100%;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 30px;
    }
    .signup-section .signup-banner-section .container .image{
        height: auto;
        width: 875px;
        height: 360px;
    }
    
    .signup-section .signup-banner-section .container .bg {
        height: 420px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -360px;
    }
     
    .signup-section .wrapper .signup-banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -280px;
    }
    
    .signup-section .wrapper .signup-banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 50px;
        font-weight: 600;
        line-height: normal;
    }
    
    .signup-section .wrapper .signup-banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .signup-section .wrapper .signup-banner-section .container .text-section span {
        color: #FCD400;
    }

    
    .signup-container .main-signup {
        position: relative;
        flex-shrink: 0;
        margin-left: 30px;
        margin-top: 200px;
    }
    
    .signup-container .main-signup .signup-contain {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
    }
    
    .signup-table {
        padding: 20px 20px 20px 0px;
        border: 2px solid #E3DB17;
        background: #050022;
        box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 50px;
        margin-top: -260px;
    }
    
    .signup-table .heading-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
    }
    
    
    .heading-wrapper h2 {
        color: #fff;
        font-family: "Josefin-Sans" ,sans-serif;
        font-size: 26px;
        font-weight: 600px;
    }
    
    .heading-wrapper p {
        color: #aeaeae;
        font-family: "Josefin-Sans",sans-serif;
        margin-top: -10px;
        font-size: 14px;
        font-weight: 400px;
    }
    
    .heading-wrapper span {
        color: #00D1FF;
        font-weight: 600;
    }
    
    .signup-section .middle-section {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 30px;
    }
    
    .middle-section .rignt {
        position: relative;
        display: flex;
        flex-shrink: 0;
        
    }
    
    .right .sign {
        display: flex;
        position: relative;
        flex-direction: column;
        gap: 15px;
    }
    
    .right .sign .sign-list {
        list-style-type: none;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .sign-list .name-list {
        display: flex;
        flex-direction: row;
        position: relative;
        gap: 10px;
    }
    
    .name-list img {
        width: 16px;
        height: 18px;
        flex-shrink: 0;
    }
    
    .name-list a {
        text-decoration: none;
        color: #fff;
        font-family: "Josefin Sans",sans-serif;
        font-size: 14px;
        font-weight: 700;
        margin-top: 3px;
    }
    
    .sign-list input {
        border: 0.5px solid rgba(25, 21, 54, 0.50);
        background: rgba(25, 21, 54, 0.53);
        padding: 7px 160px;
    }
    
    .signup-table .s-image {
        border-radius: 4px;
        border: 2px solid #1C8A84;
        background: #050022;
        box-shadow: 0px 0px 10px 4px rgba(28, 138, 132, 0.73);
        padding: 8px 40px;
        margin-top: 20px;
        background: transparent;
        color: #fff;
        font-family: "Open Sans" ,sans-serif;
        font-size: 13px;
        font-weight: 600;
        position: relative;
    }
    
    
    .signup-table .submit-button {
        margin-top: 30px;
        border-radius: 4px;
        background: linear-gradient(90deg, #314C74 0%, #0D1242 95.23%);
        border: none;
        color: #fff;
        font-family: "Open Sans" ,sans-serif;
        font-size: 13px;
        font-weight: 600;
        position: relative;
        padding: 8px 130px;
    
    }
}


/*--------------------------------face-sign-up-section----------------------------------*/

.face-sign-section {
    width: 100%;
    height: auto;
    background: #050022;
}

.fs-banner-section {
    position: relative;
    width: 100%;
}

.fs-banner-section .wrapper {
    width: 100%;
    background: #050022;
    flex-shrink: 0;
}

.fs-banner-section .container {
    position: relative;
    height: 370px;
    flex-shrink: 0;
    align-items: center;
}

.fs-banner-section .container .image img {
    height: auto;
    width: 950px;
    height: 350px;
    flex-shrink: 0;
    position: relative;
    margin-top: 50px;
    margin-left: 200px;
}

.fs-banner-section .container .bg {
    height: 400px;
    background: rgba(15, 0, 105, 0.50);
    position: relative;
    margin-top: -400px;
}
 
.fs-banner-section .container .text-section {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    margin-top: -280px;
}

.fs-banner-section .container .text-section h1 {
    color: #FFF;
    font-family: 'Istok Web' ,sans-serif;
    font-size: 50px;
    font-weight: 600;
    line-height: normal;
}

.fs-banner-section .container .text-section p {
    color: #Fff;
    font-family: 'Istok Web' ,sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: -20px;
}

.fs-banner-section .container .text-section span {
    color: #FCD400;
}

.fs-banner-section .fs-container {
    position: relative;
    width: 100%;
    height: 150vh;
}

.fs-container .fs-contain {
    padding: 200px;
    position: absolute;
    flex-shrink: 0;
}

.fs-container .main-fs .fs-contain {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.fs-table {
    padding: 30px 80px 30px 70px;
    border: 2px solid #E3DB17;
    background: #050022;
    box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -100px;
    margin-left: 220px;
}

.fs-table .heading-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
}


.fs-table .heading-wrapper h2 {
    color: #fff;
    font-family: "Josefin-Sans" ,sans-serif;
    font-size: 26px;
    font-weight: 600px;
}

.fs-table .heading-wrapper p {
    color: #aeaeae;
    font-family: "Josefin-Sans",sans-serif;
    margin-top: -10px;
    font-size: 14px;
    font-weight: 400px;
}

.fs-table .heading-wrapper span {
    color: #00D1FF;
    font-weight: 600;
}

.fs-table .middle-section {
    margin-top: 30px;
    margin-left: 20px;
    position: relative;
}

.fs-table .middle-section .face-table {
    background: #00042C;
    box-shadow: 0px 0px 7.06334px 1.41267px #0D1242;
    padding: 10px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fs-table .middle-section .face-table h3 {
    color: #FFF;
    font-family: 'Istok Web' ,sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.fs-table .middle-section .face-table img {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
}

.fs-table .middle-section .face-table .s-face-btn {
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    background: linear-gradient(180deg, #42A855 8.33%, #0E6F20 90.27%);
    box-shadow: 2px 0px 10px 0px rgba(37, 136, 55, 0.40);
    border: none;
    color: #fff;
    font-family: "Open Sans" ,sans-serif;
    font-size: 15px;
    font-weight: 600;
    position: relative;
    padding: 8px 60px;

}

.fs-table .fsubmit-button {
    margin-top: 40px;
    margin-bottom: 20px;
    border-radius: 4px;
    background: linear-gradient(90deg, #314C74 0%, #0D1242 95.23%);
    border: none;
    color: #fff;
    font-family: "Open Sans" ,sans-serif;
    font-size: 20px;
    font-weight: 600;
    position: relative;
    padding: 14px 130px;
    margin-left: 15px;
}


@media(max-width: 500px){
    .faq-main-section {
        position: relative;
        display: block!important;
        gap: 80px;
        flex-direction: row;
    }
    .face-sign-section {
        width: 100%;
        height: 100vh;
        background: #050022;
    }

    .face-sign-section .fs-banner-section {
        position: relative;
        width: 100%;
    }
    
    .face-sign-section .fs-banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .face-sign-section .fs-banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .face-sign-section .fs-banner-section .container .image img {
        height: auto;
        width: 400px;
        height: 180px;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 10px;
    }
    
    .face-sign-section .fs-banner-section .container .bg {
        height: 240px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -240px;
    }
     
    .face-sign-section .wrapper .fs-banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -180px;
    }
    
    .face-sign-section .wrapper .fs-banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 40px;
        font-weight: 600;
        line-height: normal;
    }
    
    .face-sign-section .wrapper .fs-banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .face-sign-section .wrapper .fs-banner-section .container .text-section span {
        color: #FCD400;
    }

    
    .fs-container .main-fs {
        position: relative;
        flex-shrink: 0;
        margin-left: -220px;
    }
    
    .fs-banner-section .main-fs .fs-contain {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
    }
    
    .fs-table {
        padding: 30px 20px 30px 10px;
        border: 2px solid #E3DB17;
        background: #050022;
        box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: -250px;
        margin-left: 40px;
    }
    
    .fs-table .heading-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
    }
    
    
    .fs-table .heading-wrapper h2 {
        color: #fff;
        font-family: "Josefin-Sans" ,sans-serif;
        font-size: 26px;
        font-weight: 600px;
    }
    
    .fs-table .heading-wrapper p {
        color: #aeaeae;
        font-family: "Josefin-Sans",sans-serif;
        margin-top: -10px;
        font-size: 14px;
        font-weight: 400px;
    }
    
    .fs-table .heading-wrapper span {
        color: #00D1FF;
        font-weight: 600;
    }
    
    .fs-table .middle-section {
        margin-top: 30px;
        margin-left: 20px;
        position: relative;
    }
    
    .fs-table .middle-section .face-table {
        background: #00042C;
        box-shadow: 0px 0px 7.06334px 1.41267px #0D1242;
        padding: 10px 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: -10px;
    }
    
    .fs-table .middle-section .face-table h3 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 22px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }
    
    .fs-table .middle-section .face-table img {
        width: 200px;
        height: 200px;
        flex-shrink: 0;
    }
    
    .fs-table .middle-section .face-table .s-face-btn {
        margin-top: 20px;
        margin-bottom: 20px;
        border-radius: 4px;
        background: linear-gradient(180deg, #42A855 8.33%, #0E6F20 90.27%);
        box-shadow: 2px 0px 10px 0px rgba(37, 136, 55, 0.40);
        border: none;
        color: #fff;
        font-family: "Open Sans" ,sans-serif;
        font-size: 15px;
        font-weight: 600;
        position: relative;
        padding: 8px 60px;
    
    }
    
    .fs-table .fsubmit-button {
        margin-top: 40px;
        margin-bottom: 20px;
        border-radius: 4px;
        background: linear-gradient(90deg, #314C74 0%, #0D1242 95.23%);
        border: none;
        color: #fff;
        font-family: "Open Sans" ,sans-serif;
        font-size: 20px;
        font-weight: 600;
        position: relative;
        padding: 14px 130px;
        margin-left: 15px;
    }

}

@media(max-width: 700px) and (min-width: 501px){
    .face-sign-section {
        width: 100%;
        height: 100vh;
        background: #050022;
    }

    .face-sign-section .fs-banner-section {
        position: relative;
        width: 100%;
    }
    
    .face-sign-section .fs-banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .face-sign-section .fs-banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .face-sign-section .fs-banner-section .container .image img {
        height: auto;
        width: 600px;
        height: 240px;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 20px;
    }
    
    .face-sign-section .fs-banner-section .container .bg {
        height: 300px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -300px;
    }
     
    .face-sign-section .wrapper .fs-banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -180px;
    }
    
    .face-sign-section .wrapper .fs-banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 40px;
        font-weight: 600;
        line-height: normal;
    }
    
    .face-sign-section .wrapper .fs-banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .face-sign-section .wrapper .fs-banner-section .container .text-section span {
        color: #FCD400;
    }

    
    .fs-container .main-fs {
        position: relative;
        flex-shrink: 0;
        margin-left: -220px;
    }
    
    .fs-banner-section .main-fs .fs-contain {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
    }
    
    .fs-table {
        padding: 30px 50px 30px 40px;
        border: 2px solid #E3DB17;
        background: #050022;
        box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: -150px;
        margin-left: 140px;
    }
    
    .fs-table .heading-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
    }
    
    
    .fs-table .heading-wrapper h2 {
        color: #fff;
        font-family: "Josefin-Sans" ,sans-serif;
        font-size: 26px;
        font-weight: 600px;
    }
    
    .fs-table .heading-wrapper p {
        color: #aeaeae;
        font-family: "Josefin-Sans",sans-serif;
        margin-top: -10px;
        font-size: 14px;
        font-weight: 400px;
    }
    
    .fs-table .heading-wrapper span {
        color: #00D1FF;
        font-weight: 600;
    }
    
    .fs-table .middle-section {
        margin-top: 30px;
        margin-left: 20px;
        position: relative;
    }
    
    .fs-table .middle-section .face-table {
        background: #00042C;
        box-shadow: 0px 0px 7.06334px 1.41267px #0D1242;
        padding: 10px 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: -10px;
    }
    
    .fs-table .middle-section .face-table h3 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 22px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }
    
    .fs-table .middle-section .face-table img {
        width: 200px;
        height: 200px;
        flex-shrink: 0;
    }
    
    .fs-table .middle-section .face-table .s-face-btn {
        margin-top: 20px;
        margin-bottom: 20px;
        border-radius: 4px;
        background: linear-gradient(180deg, #42A855 8.33%, #0E6F20 90.27%);
        box-shadow: 2px 0px 10px 0px rgba(37, 136, 55, 0.40);
        border: none;
        color: #fff;
        font-family: "Open Sans" ,sans-serif;
        font-size: 15px;
        font-weight: 600;
        position: relative;
        padding: 8px 60px;
    
    }
    
    .fs-table .fsubmit-button {
        margin-top: 40px;
        margin-bottom: 20px;
        border-radius: 4px;
        background: linear-gradient(90deg, #314C74 0%, #0D1242 95.23%);
        border: none;
        color: #fff;
        font-family: "Open Sans" ,sans-serif;
        font-size: 20px;
        font-weight: 600;
        position: relative;
        padding: 14px 130px;
        margin-left: 15px;
    }

}

/* Styles for screens between 501px and 900px */
@media(max-width: 900px) and (min-width: 701px){
    /* CSS rules for screens between 501px and 900px */
    .face-sign-section {
        width: 100%;
        height: 100vh;
        background: #050022;
    }

    .face-sign-section .fs-banner-section {
        position: relative;
        width: 100%;
    }
    
    .face-sign-section .fs-banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .face-sign-section .fs-banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .face-sign-section .fs-banner-section .container .image img {
        height: auto;
        width: 700px;
        height: 260px;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 70px;
    }
    
    .face-sign-section .fs-banner-section .container .bg {
        height: 320px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -320px;
    }
     
    .face-sign-section .wrapper .fs-banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -180px;
    }
    
    .face-sign-section .wrapper .fs-banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 40px;
        font-weight: 600;
        line-height: normal;
    }
    
    .face-sign-section .wrapper .fs-banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .face-sign-section .wrapper .fs-banner-section .container .text-section span {
        color: #FCD400;
    }

    
    .fs-container .main-fs {
        position: relative;
        flex-shrink: 0;
        margin-left: -20px;
        margin-top: 90px;
    }
    
    .fs-banner-section .main-fs .fs-contain {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
    }
    
    .fs-table {
        padding: 30px 40px 30px 30px;
        border: 2px solid #E3DB17;
        background: #050022;
        box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: -250px;
        margin-left: 40px;
    }
    
    .fs-table .heading-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
    }
    
    
    .fs-table .heading-wrapper h2 {
        color: #fff;
        font-family: "Josefin-Sans" ,sans-serif;
        font-size: 26px;
        font-weight: 600px;
    }
    
    .fs-table .heading-wrapper p {
        color: #aeaeae;
        font-family: "Josefin-Sans",sans-serif;
        margin-top: -10px;
        font-size: 14px;
        font-weight: 400px;
    }
    
    .fs-table .heading-wrapper span {
        color: #00D1FF;
        font-weight: 600;
    }
    
    .fs-table .middle-section {
        margin-top: 30px;
        margin-left: 20px;
        position: relative;
    }
    
    .fs-table .middle-section .face-table {
        background: #00042C;
        box-shadow: 0px 0px 7.06334px 1.41267px #0D1242;
        padding: 10px 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: -10px;
    }
    
    .fs-table .middle-section .face-table h3 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 22px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }
    
    .fs-table .middle-section .face-table img {
        width: 200px;
        height: 200px;
        flex-shrink: 0;
    }
    
    .fs-table .middle-section .face-table .s-face-btn {
        margin-top: 20px;
        margin-bottom: 20px;
        border-radius: 4px;
        background: linear-gradient(180deg, #42A855 8.33%, #0E6F20 90.27%);
        box-shadow: 2px 0px 10px 0px rgba(37, 136, 55, 0.40);
        border: none;
        color: #fff;
        font-family: "Open Sans" ,sans-serif;
        font-size: 15px;
        font-weight: 600;
        position: relative;
        padding: 8px 60px;
    
    }
    
    .fs-table .fsubmit-button {
        margin-top: 40px;
        margin-bottom: 20px;
        border-radius: 4px;
        background: linear-gradient(90deg, #314C74 0%, #0D1242 95.23%);
        border: none;
        color: #fff;
        font-family: "Open Sans" ,sans-serif;
        font-size: 20px;
        font-weight: 600;
        position: relative;
        padding: 14px 130px;
        margin-left: 15px;
    }
}

/* Styles for screens between 901px and 1100px */
@media(max-width: 1100px) and (min-width: 901px){
    /* CSS rules for screens between 501px and 900px */
    .face-sign-section {
        width: 100%;
        height: 100vh;
        background: #050022;
    }
    .sign-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 26px;
    }

    .face-sign-section .fs-banner-section {
        position: relative;
        width: 100%;
    }
    
    .face-sign-section .fs-banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .face-sign-section .fs-banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .face-sign-section .fs-banner-section .container .image img {
        height: auto;
        width: 1000px;
        height: 360px;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 30px;
    }
    
    .face-sign-section .fs-banner-section .container .bg {
        height: 420px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -420px;
    }
     
    .face-sign-section .wrapper .fs-banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -280px;
    }
    
    .face-sign-section .wrapper .fs-banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 50px;
        font-weight: 600;
        line-height: normal;
    }
    
    .face-sign-section .wrapper .fs-banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .face-sign-section .wrapper .fs-banner-section .container .text-section span {
        color: #FCD400;
    }

    
    .fs-container .main-fs {
        position: relative;
        flex-shrink: 0;
        margin-left: 50px;
        margin-top: 190px;
    }
    
    .fs-banner-section .main-fs .fs-contain {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
    }
    
    .fs-table {
        padding: 30px 80px 30px 70px;
        border: 2px solid #E3DB17;
        background: #050022;
        box-shadow: 0px 0px 8px 2px rgba(252, 212, 0, 0.74);
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: -250px;
        margin-left: 40px;
    }
    
    .fs-table .heading-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
    }
    
    
    .fs-table .heading-wrapper h2 {
        color: #fff;
        font-family: "Josefin-Sans" ,sans-serif;
        font-size: 26px;
        font-weight: 600px;
    }
    
    .fs-table .heading-wrapper p {
        color: #aeaeae;
        font-family: "Josefin-Sans",sans-serif;
        margin-top: -10px;
        font-size: 14px;
        font-weight: 400px;
    }
    
    .fs-table .heading-wrapper span {
        color: #00D1FF;
        font-weight: 600;
    }
    
    .fs-table .middle-section {
        margin-top: 30px;
        margin-left: 20px;
        position: relative;
    }
    
    .fs-table .middle-section .face-table {
        background: #00042C;
        box-shadow: 0px 0px 7.06334px 1.41267px #0D1242;
        padding: 10px 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: -10px;
    }
    
    .fs-table .middle-section .face-table h3 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 22px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }
    
    .fs-table .middle-section .face-table img {
        width: 200px;
        height: 200px;
        flex-shrink: 0;
    }
    
    .fs-table .middle-section .face-table .s-face-btn {
        margin-top: 20px;
        margin-bottom: 20px;
        border-radius: 4px;
        background: linear-gradient(180deg, #42A855 8.33%, #0E6F20 90.27%);
        box-shadow: 2px 0px 10px 0px rgba(37, 136, 55, 0.40);
        border: none;
        color: #fff;
        font-family: "Open Sans" ,sans-serif;
        font-size: 15px;
        font-weight: 600;
        position: relative;
        padding: 8px 60px;
    
    }
    
    .fs-table .fsubmit-button {
        margin-top: 40px;
        margin-bottom: 20px;
        border-radius: 4px;
        background: linear-gradient(90deg, #314C74 0%, #0D1242 95.23%);
        border: none;
        color: #fff;
        font-family: "Open Sans" ,sans-serif;
        font-size: 20px;
        font-weight: 600;
        position: relative;
        padding: 14px 130px;
        margin-left: 15px;
    }
}

/*--------------------------------------faq-section------------------------------------*/

.faq-section {
    width: 100%;
    height: 150vh;
    background: #050022;
}

.faq-banner-section {
    position: relative;
    width: 100%;
}

.faq-banner-section .wrapper {
    width: 100%;
    background: #050022;
    flex-shrink: 0;   
}

.faq-banner-section .container {
    position: relative;
    flex-shrink: 0;
    align-items: center;
    height: calc(48*var(--aspect-ratio));
}


.faq-banner-section .container .image img {

    height: auto;
    width: calc(139*var(--aspect-ratio));
    height: calc(48*var(--aspect-ratio));
    flex-shrink: 0;
    position: relative;
    margin-top: calc(7*var(--aspect-ratio));
    margin-left: calc(17*var(--aspect-ratio));
}

.faq-banner-section .container .bg {
    height: calc(56*var(--aspect-ratio));
    background: rgba(15, 0, 105, 0.50);
    position: relative;
    margin-top: calc(-56*var(--aspect-ratio));
}
 
.faq-banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: calc(-44*var(--aspect-ratio));
    }

.faq-banner-section .container .text-section h1 {
    color: #FFF;
    font-family: 'Istok Web' ,sans-serif;
    font-size: calc(6*var(--aspect-ratio));
    font-weight: 600;
    line-height: normal;
}

.faq-banner-section .container .text-section p {
    color: #Fff;
    font-family: 'Istok Web' ,sans-serif;
    font-size: calc(3*var(--aspect-ratio));
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: calc(-3*var(--aspect-ratio));
}

.faq-banner-section .container .text-section span {
    color: #FCD400;
}

.faq-banner-section .faq-container {
    position: relative;
    width: 100%;
    height: auto;
}

.faq-container .main-faq {
    padding: calc(28*var(--aspect-ratio));
    padding-bottom: calc(1*var(--aspect-ratio))!important;
    position: relative;
    flex-shrink: 0;
}

.faq-container .main-faq .faq-contain {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
}


.faq-contain h2 {
    color: #FCD400;
    font-family: 'Istok Web' ,sans-serif;
    font-size: calc(4*var(--aspect-ratio));
    font-style: normal;
    font-weight: 550;
    line-height: normal;
    position: relative;
    margin-top: calc(-16*var(--aspect-ratio));
    text-align: center;
}

.faq-main-section {
	position: relative;
	display: flex;
	gap: calc(1* var(--aspect-ratio));
	flex-direction: row;
	margin-top: 5vh;
}

.faq-main-section .first-faq {
    position: relative;
    display: flex;
    flex-wrap: wrap;
	gap: 36px;
	justify-content: space-evenly;
}

.faq-main-section .first-faq .fi-row {
    position: relative;
}

.faq-main-section .first-faq .fi-row .f-detail {
    list-style-type: none;
    width: calc(48*var(--aspect-ratio));
    height: auto;
    padding: 20px 20px 20px 20px;
    padding: calc(2.5*var(--aspect-ratio)) calc(2.5*var(--aspect-ratio)) calc(2.5*var(--aspect-ratio)) calc(2.5*var(--aspect-ratio));
    border: calc(.1*var(--aspect-ratio)) solid #FCB500;
    box-shadow: 2px 2px 8px 0px #FCD400;
}

.faq-main-section .first-faq .fi-row .f-detail a {
    justify-content: space-between;
    position: relative;
    display: flex;
    flex-shrink: 0;
    text-decoration: none;
}
.f-detail span {
    color: #FFF;
    font-family: "Open Sans" ,sans-serif;
    font-size: calc(2*var(--aspect-ratio));
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.f-detail img {
    flex-shrink: 0;
    width: calc(2.5*var(--aspect-ratio));
    height: calc(2.5*var(--aspect-ratio));
}
.faq-c.active {
    display: block;
}

.faq-c {
	color: #FFF;
	font-family: Open Sans;
	font-size: calc(1.7* var(--aspect-ratio));
	font-style: normal;
	font-weight: 400;
	line-height: calc(2.5* var(--aspect-ratio));
	display: none;
	position: relative;
	margin-top: calc(2* var(--aspect-ratio));
	transition: ease-in-out;
}

@media(max-width: 500px){
    .faq-section {
        width: 100%;
        height: 100vh;
        background: #050022;
    }

    .hero-section {
        height: auto !important;
        margin-bottom: 100px !important;
        width: 100%;
        position: absolute;
        display: flex;
        padding: 0;
        flex-direction: row;
        top: 116px;
        left: 0;
        
    }

    .faq-section .faq-banner-section {
        position: relative;
        width: 100%;
    }
    
    .faq-section .faq-banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .faq-section .faq-banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .faq-section .faq-banner-section .container .image img {
        height: auto;
        width: 100%;
         height: 100%;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 6px;
    }
    .faq-banner-section .container .image {
        width: calc(172*var(--aspect-ratio))!important;
        height: calc(75*var(--aspect-ratio))!important;
    }
    .faq-section .faq-banner-section .container .bg {
        height: 199px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -137px;
    }
     
    .faq-section .wrapper .faq-banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -180px;
    }
    
    .faq-section .wrapper .faq-banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 40px;
        font-weight: 600;
        line-height: normal;
    }
    
    .faq-section .wrapper .faq-banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: 0px;
    }
    
    .faq-section .wrapper .faq-banner-section .container .text-section span {
        color: #FCD400;
    }

    .faq-container .main-faq {
        position: relative;
        flex-shrink: 0;
        padding: 200px 10px;
    }
    
    .faq-container .main-faq .faq-contain {
        display: flex;
        flex-shrink: 0;
        align-items: center;
    }
    
    
    .faq-container .main-faq .faq-contain h2 {
        color: #FCD400;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 24px;
        font-style: normal;
        font-weight: 550;
        line-height: normal;
        margin-top: -300px;
        text-align: center;
    }
    
    .faq-container .main-faq .faq-contain .faq-main-section {
        position: relative;
        display: flex;
        gap: 5px;
        flex-direction: column;
        margin-left: -35px;
    }
    
    .faq-container .main-faq .faq-contain .faq-main-section .first-faq {
        position: relative;
        display: flex;
        flex-direction: column;
    }
    
    .faq-container .main-faq .faq-contain .faq-main-section .first-faq .fi-row {
        position: relative;
    }
    
    .faq-container .main-faq .faq-contain .faq-main-section .first-faq .fi-row .f-detail {
        list-style-type: none;
        width: calc(160*var(--aspect-ratio));
        height: auto;
        padding: 20px 20px 20px 20px;
        border: 1px solid #FCB500;
        box-shadow: 2px 2px 8px 0px #FCD400;
        
    }
    
    .faq-container .main-faq .faq-contain .faq-main-section .first-faq .fi-row .f-detail a {
        justify-content: space-between;
        position: relative;
        display: flex;
        flex-shrink: 0;
        text-decoration: none;
    }
    
    .faq-container .main-faq .faq-contain .f-detail span {
        color: #FFF;
        font-family: "Open Sans" ,sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }
    
    .faq-container .main-faq .faq-contain .f-detail img {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
    }
    
    .f-detail:focus-within>.faq-con {
        display: block;
    }
    
    .faq-container .main-faq .faq-contain .faq-con {
        display: none;
        position: relative;
        margin-top: 10px;
        transition: ease-in-out;
    }
    
    .faq-container .main-faq .faq-contain .faq-con .faq-c {
        color: #FFF;
        font-family: Open Sans;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;    
    }
    @media (max-width:500px){
    .wrapper{
        flex-direction: column;
    display: flex;
    }.middle-section{
        display: flex;
        justify-content: center;
        width: 90vw;
    }
    .buttons-middle{
        display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
        height: 220px;
        width: 97%;
    }
    .content-section{
        width: 100%;
    }
    .buttons-middle h2{
        text-align: center;
        font-size: 4vw;
    }
    .content-section h1{
        font-size: 6vw;
    }
    .content-section h2{
        font-size: 4.5vw;
    }
    .list-content img{
        width: 8vw;
    }
    .list-content p{
        font-size: 3.3vw;
    }
    .middle-btn button.sign-up,.middle-btn button.learn-more{
        font-size: 3vw;
    }
}

    .wrapper{
        flex-direction: column;
    display: flex;
    }.middle-section{
        display: flex;
        justify-content: center;
        width: 90vw;
    }
    .buttons-middle{
        display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
        height: 220px;
        width: 97%;
    }
    .content-section{
        width: 100%;
    }
    .buttons-middle h2{
        text-align: center;
        font-size: 4vw;
    }
    .content-section h1{
        font-size: 6vw;
    }
    .content-section h2{
        font-size: 4.5vw;
    }
    .list-content img{
        width: 8vw;
    }
    .list-content p{
        font-size: 3.3vw;
    }
    .middle-btn button.sign-up,.middle-btn button.learn-more{
        font-size: 3vw;
    }
}

    

@media(max-width: 700px) and (min-width: 501px){
    .faq-section {
        width: 100%;
        height: 100vh;
        background: #050022;
    }

    .faq-section .faq-banner-section {
        position: relative;
        width: 100%;
    }
    
    .faq-section .faq-banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .faq-section .faq-banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .faq-section .faq-banner-section .container .image img {
        height: auto;
        width: 100%;
        height: 100%;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 20px;
    }
    
    .faq-section .faq-banner-section .container .bg {
        height: 317px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -256px;
    }
     
    .faq-section .wrapper .faq-banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -180px;
    }
    
    .faq-section .wrapper .faq-banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 40px;
        font-weight: 600;
        line-height: normal;
    }
    
    .faq-section .wrapper .faq-banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .faq-section .wrapper .faq-banner-section .container .text-section span {
        color: #FCD400;
    }

    .faq-container .main-faq {
        position: relative;
        flex-shrink: 0;
        padding: 300px 10px;
    }
    
    .faq-container .main-faq .faq-contain {
        display: flex;
        flex-shrink: 0;
        align-items: center;
    }
    
    
    .faq-container .main-faq .faq-contain h2 {
        color: #FCD400;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 24px;
        font-style: normal;
        font-weight: 550;
        line-height: normal;
        margin-top: -300px;
        text-align: center;
    }
    
    .faq-container .main-faq .faq-contain .faq-main-section {
        position: relative;
        display: flex;
        gap: 5px;
        flex-direction: column;
        margin-left: -35px;
    }
    
    .faq-container .main-faq .faq-contain .faq-main-section .first-faq {
        position: relative;
        display: flex;
        flex-direction: column;
    }
    
    .faq-container .main-faq .faq-contain .faq-main-section .first-faq .fi-row {
        position: relative;
    }
    
    .faq-container .main-faq .faq-contain .faq-main-section .first-faq .fi-row .f-detail {
        list-style-type: none;
        width: calc(160*var(--aspect-ratio));
        height: auto;
        padding: 20px 20px 20px 20px;
        border: 1px solid #FCB500;
        box-shadow: 2px 2px 8px 0px #FCD400;
        
    }
    
    .faq-container .main-faq .faq-contain .faq-main-section .first-faq .fi-row .f-detail a {
        justify-content: space-between;
        position: relative;
        display: flex;
        flex-shrink: 0;
        text-decoration: none;
    }
    
    .faq-container .main-faq .faq-contain .f-detail span {
        color: #FFF;
        font-family: "Open Sans" ,sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }
    
    .faq-container .main-faq .faq-contain .f-detail img {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
    }
    
    .f-detail:focus-within>.faq-con {
        display: block;
    }
    
    .faq-container .main-faq .faq-contain .faq-con {
        display: none;
        position: relative;
        margin-top: 10px;
        transition: ease-in-out;
    }
    
    .faq-container .main-faq .faq-contain .faq-con .faq-c {
        color: #FFF;
        font-family: Open Sans;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;    
    }
    
}

@media(max-width: 900px) and (min-width: 701px){
    
    .faq-section {
        width: 100%;
        height: 100vh;
        background: #050022;
    }

    .faq-section .faq-banner-section {
        position: relative;
        width: 100%;
    }
    
    .faq-section .faq-banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .faq-section .faq-banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .faq-section .faq-banner-section .container .image img {
        height: auto;
        width: 100%;
        height: 100%;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 0px;
    }
    .faq-banner-section .container .image {
        width: calc(176*var(--aspect-ratio))!important;
        height: calc(68*var(--aspect-ratio))!important;
    }

    
    .faq-section .faq-banner-section .container .bg {
        height: 350px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -288px;
    }
     
    .faq-section .wrapper .faq-banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -180px;
    }
    
    .faq-section .wrapper .faq-banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 40px;
        font-weight: 600;
        line-height: normal;
    }
    
    .faq-section .wrapper .faq-banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .faq-section .wrapper .faq-banner-section .container .text-section span {
        color: #FCD400;
    }

    .faq-container .main-faq {
        position: relative;
        flex-shrink: 0;
        padding: 200px 10px;
    }
    
    .faq-container .main-faq .faq-contain {
        display: flex;
        flex-shrink: 0;
        align-items: center;
    }
    
    
    .faq-container .main-faq .faq-contain h2 {
        color: #FCD400;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 24px;
        font-style: normal;
        font-weight: 550;
        line-height: normal;
        margin-top: -150px;
        text-align: center;
    }
    
    .faq-container .main-faq .faq-contain .faq-main-section {
        position: relative;
        display: flex;
        gap: 5px;
        flex-direction: column;
        margin-left: -35px;
    }
    
    .faq-container .main-faq .faq-contain .faq-main-section .first-faq {
        position: relative;
        display: flex;
        flex-direction: column;
    }
    
    .faq-container .main-faq .faq-contain .faq-main-section .first-faq .fi-row {
        position: relative;
    }
    
    .faq-container .main-faq .faq-contain .faq-main-section .first-faq .fi-row .f-detail {
        list-style-type: none;
        width: calc(160*var(--aspect-ratio));
        height: auto;
        padding: 20px 20px 20px 20px;
        border: 1px solid #FCB500;
        box-shadow: 2px 2px 8px 0px #FCD400;
        
    }
    
    .faq-container .main-faq .faq-contain .faq-main-section .first-faq .fi-row .f-detail a {
        justify-content: space-between;
        position: relative;
        display: flex;
        flex-shrink: 0;
        text-decoration: none;
    }
    
    .faq-container .main-faq .faq-contain .f-detail span {
        color: #FFF;
        font-family: "Open Sans" ,sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }
    
    .faq-container .main-faq .faq-contain .f-detail img {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
    }
    
    .f-detail:focus-within>.faq-con {
        display: block;
    }
    
    .faq-container .main-faq .faq-contain .faq-con {
        display: none;
        position: relative;
        margin-top: 10px;
        transition: ease-in-out;
    }
    
    .faq-container .main-faq .faq-contain .faq-con .faq-c {
        color: #FFF;
        font-family: Open Sans;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;    
    }
}

@media(max-width: 1100px) and (min-width: 901px){
    
    .faq-section {
        width: 100%;
        height: 100vh;
        background: #050022;
    }

    .faq-section .faq-banner-section {
        position: relative;
        width: 100%;
    }
    
    .faq-section .faq-banner-section .wrapper {
        width: 100%;
        background: #050022;
        flex-shrink: 0;   
    }
    
    .faq-section .faq-banner-section .container {
        position: relative;
        height: 370px;
        flex-shrink: 0;
        align-items: center;
    }
    
    .faq-section .faq-banner-section .container .image img {
        height: auto;
        width: 100%;
        height: 100%;
        flex-shrink: 0;
        position: relative;
        margin-top: 60px;
        margin-left: 30px;
    }
    
    .faq-section .faq-banner-section .container .bg {
        height: 420px;
        background: rgba(15, 0, 105, 0.50);
        position: relative;
        margin-top: -274px;
    }
     
    .faq-section .wrapper .faq-banner-section .container .text-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-items: center;
        margin-top: -280px;
    }
    
    .faq-section .wrapper .faq-banner-section .container .text-section h1 {
        color: #FFF;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 50px;
        font-weight: 600;
        line-height: normal;
    }
    
    .faq-section .wrapper .faq-banner-section .container .text-section p {
        color: #Fff;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: -20px;
    }
    
    .faq-section .wrapper .faq-banner-section .container .text-section span {
        color: #FCD400;
    }

    .faq-container .main-faq {
        position: relative;
        flex-shrink: 0;
        padding: 300px 10px;
    }
    
    .faq-container .main-faq .faq-contain {
        display: flex;
        flex-shrink: 0;
        align-items: center;
    }
    
    
    .faq-container .main-faq .faq-contain h2 {
        color: #FCD400;
        font-family: 'Istok Web' ,sans-serif;
        font-size: 24px;
        font-style: normal;
        font-weight: 550;
        line-height: normal;
        margin-top: -150px;
        text-align: center;
    }
    
    .faq-container .main-faq .faq-contain .faq-main-section {
        position: relative;
        display: block;
        gap: 25px;
        flex-direction: row;
        margin-left: -35px;
        margin-top: 40px;
    }
    
    .faq-container .main-faq .faq-contain .faq-main-section .first-faq {
        position: relative;
        display: flex;
        flex-direction: column;
    }
    
    .faq-container .main-faq .faq-contain .faq-main-section .first-faq .fi-row {
        position: relative;
    }
    
    .faq-container .main-faq .faq-contain .faq-main-section .first-faq .fi-row .f-detail {
        list-style-type: none;
        width: calc(160*var(--aspect-ratio));
        height: auto;
        padding: 20px 20px 20px 20px;
        border: 1px solid #FCB500;
        box-shadow: 2px 2px 8px 0px #FCD400;
        
    }
    
    .faq-container .main-faq .faq-contain .faq-main-section .first-faq .fi-row .f-detail a {
        justify-content: space-between;
        position: relative;
        display: flex;
        flex-shrink: 0;
        text-decoration: none;
    }
    
    .faq-container .main-faq .faq-contain .f-detail span {
        color: #FFF;
        font-family: "Open Sans" ,sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }
    
    .faq-container .main-faq .faq-contain .f-detail img {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
    }
    
    .f-detail:focus-within>.faq-con {
        display: block;
    }
    
    .faq-container .main-faq .faq-contain .faq-con {
        display: none;
        position: relative;
        margin-top: 10px;
        transition: ease-in-out;
    }
    
    .faq-container .main-faq .faq-contain .faq-con .faq-c {
        color: #FFF;
        font-family: Open Sans;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;    
    }
}