*{
    padding:0;
    margin:0;
    list-style:none;
    text-decoration: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color:#16163b;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body{
    background:#b9f0ff;
    overflow-x: hidden;
    height:600vh !important;
    animation: color1;
    animation-timeline: scroll();
}

.background{
    object-fit: cover;
    min-height: 100px;
    height:25vh;
    left:0;
    z-index: -1;
    position: absolute;
    width:100vw;
    opacity:0.7 !important;
}

#header header{
    min-height: 100px;
    height: calc(25vh + 136px);
    display:flex;
    flex-wrap: wrap;
    align-content: space-between;
    transform: translateY(-100%);
    animation: topin 1s ease-in-out forwards;
    z-index: 3;
}

.logo{
    min-height: 100px;
    height:25vh;
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    opacity:0;
    animation: transparent 1s ease-in-out forwards;
    animation-delay: 1s;
}

.logo img{
    width:90vw;
    max-width:90vw;
    max-height: 20vw;
    object-fit: scale-down;
    filter: drop-shadow(0px 0px 10px rgba(40, 248, 255, 0.329));
}

.inside{
    display:flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width:100%;
    padding:10px 0;
    font-size:22px;
}

.main{
    top:250px;
    width:100vw;
    height:135px;
    display:flex;
    align-items: center;
    justify-content: center;
    background:#fff;
}

.main li{
    margin:auto;
    transition: 0.3s;
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
}

.main li:nth-child(1){
    transform: translateX(-100vw);
    animation: fadeIn1 .8s ease-in-out forwards;
    animation-delay: .8s;
}

.main li:nth-child(2){
    transform: translateX(-100vw);
   animation: fadeIn1 .8s ease-in-out forwards;
    animation-delay: 1s;
}
.main li:nth-child(3){
    transform: translateX(-100vw);
   animation: fadeIn1 .8s ease-in-out forwards;
    animation-delay: 1.2s;
}
.main li:nth-child(4){
    transform: translateX(-100vw);
   animation: fadeIn1 .8s ease-in-out forwards;
    animation-delay: 1.4s;
}


.main li::after{
    content:"";
    display:flex;
    height:2px;
    width:0%;
    background:#444;
    transition: 0.3s;
    margin:auto;
    position: fixed;
    right:0;
    transform: translateY(14px);
}

.main li::before{
    content:"";
    display:flex;
    height:2px;
    width:0%;
    background:#444;
    transition: 0.3s;
    margin:auto;
    position: fixed;
    left:0;
    transform: translateY(-14px);
}

.main li a{
    width:100%;
    height:100%;
    text-align: center;
    display:block;
}

.comm{
    height: calc(75vh - 136px);
    width:100%;
}

.stat{
    height: calc(30vh - 72px);
    font-size: calc((30vh - 72px)/5.5);
    width:100%;
    display:flex;
    align-items: center;
    animation: leftin 1s ease-in-out forwards;
    animation-delay: 0.3s;
    transform: translateX(-100%);
}

.stat h1{
    padding:0 10px;
}

.countdown{
    height: calc(43vh - 100px);
    font-size: calc((43vh - 100px)/3);
    width:100vw;
    display:flex;
    align-items: center;
    justify-content: center;
    background:#072d57;
}

.offer{
    height: calc(2vh + 36px);
    font-size: calc((2vh + 36px)/3.3);
    width:100%;
    display:flex;
    align-items: center;
    transform: translateX(-100%);
    animation: leftin 0.8s ease-in-out forwards;
    animation-delay: 4.7s;
    background:#3073b1;
    color:white;
}

.offer h3{
    padding:0 10px;
}

.countdown h2{
    position:absolute;
    opacity: 0;
    color:white;
    text-shadow: 0 0 0px #fff;
}

.countdown h2:nth-child(1){
    animation: fadeIn4 1s ease-in-out;
    animation-delay: 1s;
}

.countdown h2:nth-child(2){
    animation: fadeIn4 1s ease-in-out;
    animation-delay: 2s;
}

.countdown h2:nth-child(3){
    animation: fadeIn4 1s ease-in-out;
    animation-delay: 3s;
}

.countdown h2:nth-child(4){
    animation: fadeIn5 1.5s ease-in-out forwards;
    animation-delay: 4.3s;
}

#intro, #works, #packages, #socials, #termsandconditions{
    min-height:100vh;
}

#socials{
    height:200vh;
}

@keyframes leftin {
    0%{
        transform: translateX(-100%);
    }
    100%{
        transform: translateX(0px);
    }
}

@keyframes rightin {
    0%{
        transform: translateX(100%);
    }
    100%{
        transform: translateX(0px);
    }
}
@keyframes topin {
    0%{
        transform: translateY(-100%);
    }
    100%{
        transform: translateX(0px);
    }
}
@keyframes color1 {
    0%{
        background:#b9f0ff;
    }
    20%{
        background: #fcdcb3;
    }
    40%{
        background: #b9f0ff;
    }
    60%{
        background:#fcdcb3;
    }
    80%{
        background: #b9f0ff;
    }
    100%{
        background:#fcdcb3;
    }
}

@keyframes fadeIn4 {
    0%{
        opacity:0;
        transform: translateY(-50px);
        text-shadow: 0 0 0px #fff;
    }
    50%{
        opacity:1;
        transform: translateY(0px);
        text-shadow: 0 0 10px #fff;
    }
    100%{
        opacity:0;
        transform: translateY(50px);
        text-shadow: 0 0 0px #fff;
        animation: fadeIn5 1.5s ease-in-out forwards;
        animation-delay: 7.4s;
    }
}

@keyframes fadeIn5 {
    0%{
        opacity:0;
        text-shadow: 0 0 0px #fff;
    }
    100%{
        opacity:1;
        text-shadow: 0 0 10px #fff;
    }
}

@keyframes fadeIn1 {
    0%{
        transform: translateX(+100vw);
    }
    46%{
        transform: translateX(-10%);
    }
    67%{
        transform: translateX(0);
        text-shadow: 0 0 0px #fff;
    }
    100%{
        transform: translateX(0);
        color:white;
        text-shadow: 10 0 0px #fff;
    }
}

@keyframes transparent {
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

@media (hover: hover) {
    .main li:hover:after{
        width:100%;
        cursor: pointer;
        transition: 0.3s;
    }
    .main li:hover:before{
        width:100%;
        cursor: pointer;
        transition: 0.7s;
    } 
    .main li:hover{
        cursor: pointer;
        background: #D5E8F2;
        transition: 0.7s;
    }
    .works:hover{
        cursor: pointer;
        transform: scale(1.05);
        transition: 0.3s;
    }
    .works:hover{
        cursor: pointer;
        transform: scale(1.05);
        transition: 0.3s;
    }
    .works:hover:after{
        width:100%;
        transition: 0.3s;
    }
}
.main li:active:after{
    width:100%;
    cursor: pointer;
    transition: 0.3s;
}
.main li:active:before{
    width:100%;
    cursor: pointer;
    transition: 0.3s;
} 
.main li:active{
    cursor: pointer;
    background: #D5E8F2;
    transition: 0.3s;
}
.works:active{
    cursor: pointer;
    transform: scale(1.05);
    transition: 0.3s;
}
.works:active{
    cursor: pointer;
    transform: scale(1.05);
    transition: 0.3s;
}
.works:active:after{
    width:100%;
    transition: 0.3s;
}

@media only screen and (max-width: 650px) {
    .secondmain{
        transform: scale(0.7) translateY(-15vh) translateX(-2vw);
    }
}

.nav-buttons{
    gap: 100vw;
}

@media only screen and (min-width: 500px) {
    #header header{
        height: calc(25vh + 10vw + 2px);
    }
    .inside{
        display:flex;
        font-size:3vw;
    }
    .main{
        height:10vw;
    }

    .main li{
        margin:auto;
        transition: 0.3s;
        width: fit-content;
        display: block;
        padding:5px 15px;
    }

    .main li::after{
        display: block;
        height:2px;
        width:0%;
        margin:auto;
        position: static;
        transform: translateY(0px);
    }
    .main li::before{
        display:none;
    }

    .comm{
        height: calc(75vh - 10vw - 2px);
        width:100%;
    }

    .stat{
        height: calc(30vh - 3vw);
        font-size: calc((30vh - 72px)/4.5);
        width:100%;
    }

    .stat h1{
        padding:0 5px;
    }

    .countdown{
        height: calc(43vh - 7vw - 38px);
        font-size: calc((43vh - 100px)/2.5);
        width:100vw;
        display:flex;
        align-items: center;
        justify-content: center;
        opacity:0;
        animation: transparent 0.8  forwards;
    }

    .offer{
        height: calc(2vh + 36px);
        font-size: calc((2vh + 36px)/2.5);
    }
    
}

@media only screen and (min-width: 1025px) {
    #header header{
        display:flex;
        height: 200px;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        padding: 0 40px;
    }
    .logo{
        height:unset;
        width:unset;
        display:flex;
        justify-content: unset;
        align-items: unset;
    }
    .logo img{
        width:350px;
    }
    .main{
        top:250px;
        width: fit-content;
        height: fit-content;
        display:flex;
        background:none;
    }
    .main li{
        padding:7px 15px;
    }
    .inside{
        font-size: 20px;
        gap:1vw;
    }
    .background{
        object-fit: cover;
        height:200px;
        left:0;
        z-index: -1;
        position: absolute;
        width:100vw;
    }
    .comm{
        height: calc(100vh - 200px);
        width:100%;
    }

    .stat{
        height: calc(30vh - 50px);
        font-size: calc((30vh - 50px)/4.5);
        width:100%;
    }

    .stat h1{
        padding:0 5px;
    }

    .countdown{
        height: calc(65vh - 186px);
        font-size: calc((65vh - 186px)/2.5);
        width:100vw;
        display:flex;
        align-items: center;
        justify-content: center;
        opacity:0;
        animation: transparent 0.8  forwards;
    }

    .offer{
        height: calc(5vh + 36px);
        font-size: calc((5vh + 36px)/2.5);
    }
}

@media only screen and (min-width: 1600px) {
    #header header{
        height: 300px;
        padding: 0 100px;
    }
    .logo{
        height:unset;
        width:unset;
        display:flex;
        justify-content: unset;
        align-items: unset;
    }
    .logo img{
        width:600px;
    }
    .main{
        top:250px;
        width: fit-content;
        height: fit-content;
        display:flex;
        align-items: center;
        justify-content: center;
    }
    .inside{
        font-size: 28px;
    }
    .background{
        object-fit: cover;
        height:300px;
        left:0;
        z-index: -1;
        position: absolute;
        width:100vw;
    }
    .main li{
        padding:12px 24px;
    }
    .comm{
        height: calc(100vh - 300px);
        width:100%;
    }

    .stat{
        height: calc(30vh - 100px);
        font-size: calc((30vh - 100px)/3.5);
        width:100%;
    }

    .stat h1{
        padding:0 5px;
    }

    .countdown{
        height: calc(65vh - 236px);
        font-size: calc((65vh - 236px)/3.5);
        width:100vw;
        display:flex;
        align-items: center;
        justify-content: center;
        opacity:0;
        animation: transparent 0.8  forwards;
    }

    .offer{
        height: calc(5vh + 36px);
        font-size: calc((5vh + 36px)/2.5);
    }
}

.nav-buttons {
    position: absolute;
    top:80vh;
    width: 100%;
    z-index: 100;
    display: flex;
    justify-content: center;
    gap: 50vw;
    display: flex;
    justify-content: center;
    justify-items: center;
    animation: work1;
    transform: scale(0) translateY(-80vh);
    left:5vw;
    opacity:0;
    animation-timeline: scroll();
}

.nav-buttons button {
    padding: 0 10vw 1vw 10vw;
    cursor: pointer;
    color:white;
    background:#371B29;
    border: none;
    font-size:calc(5vw + 40px);
    border-radius: 10px;
    transform:scale(0.5);
}

.nav-buttons button:nth-child(1){
    transform: rotate(180deg) scale(0.5);
}

.banner{
    width:100%;
    height:100vh !important;
    text-align:center;
    position:relative;
    transform: translateX(-40px) translateY(-50px);
    min-height:800px;
}

.banner .slider{
    position: absolute;
    width: 290px;
    height: 500px;
    top: 10%;
    left: calc(50% - 100px);
    transform-style: preserve-3d;
    transform: perspective(1500px) rotateX(-8deg) rotateY(var(--rotation));
    transition: transform 1.2s cubic-bezier(0,0,0.58,1);
}

.banner .slider .item{
    position: absolute;
    inset: 0 0 0 0;
    transform: 
        rotateY(calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg)) 
        translateZ(400px) translateY(30px);
}

.banner .slider .item2{
    position: absolute;
    inset: 0 0 0 0;
    transform: 
        rotateY(calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg)) 
        translateZ(395px);
    background: #E69151;
}

.banner .slider .item3{
    position: absolute;
    inset: 0 0 0 0;
    transform: 
        rotateY(calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg)) 
        translateZ(405px) translateY(300px);
    height: 200px;
    display:flex;
    align-items: center;
    justify-content: center;
}

.banner .item img{
    width:230px;
    height:230px;
    object-fit:cover;
    border-radius: 10px;
}

.cover{
    position: absolute;
    background:#E69151;
    height:100px;
    width:100px;
    z-index: -999;
    transform: translateZ(-1000px);
}

.text{
    background:#F7CD83;
    width:215px;
    height:190px;
    transform: translateY(-30px);
    padding:0px 10px;
}

.secondmain{
    position:absolute;
    display:flex;
    align-items: center;
    justify-content: center;
    width:fit-content;
}

#works{
    display:flex;
    justify-content: center;
    width:100vw !important;
    overflow-x: hidden !important;
}

.work{
    font-size:35vw;
    position: absolute;
    top:110vh;
    color: #371B29;
    transform: scale(0) translateY(-20vh) translateX(-10vw);
    opacity:0;
    width:calc(110vw);
    z-index: -7;
    animation: work3;
    animation-timeline: scroll();
}
.works{
    font-size:calc(2vw + 15px);
    position:absolute;
    background: #B7504B;
    color:white;
    padding:1vh 2vw;
    transition: 0.3s;
    z-index:1;
    animation: work2;
    transform: scale(0) translateY(-70px) translateX(-6vw);
    opacity:0;
    animation-timeline: scroll();
}

.works::after{
    display: block;
    content:"";
    height:2px;
    width:0;
    background:white;
    margin:auto;
    position: static;
    transition: 0.3s;
}

#intro{
    animation: intro;
    animation-timeline: scroll();
}

@keyframes intro{
    0%{
        transform: scale(1) translateY(0) translateX(0);
        opacity:1;
    }
    10%{
        transform: scale(1) translateY(0) translateX(0);
        opacity:1;
    }
    20%{
        transform: scale(1) translateY(-50vh) translateX(0);
        opacity:1;
    }
    100%{
        transform: scale(0) translateY(0) translateX(0);
        opacity:0;
    }
}

@keyframes work1{
    0%{
        transform: scale(0) translateY(-80vh) translateX(-10vw);
        opacity:0;
    }
    14%{
        transform: scale(0) translateY(-80vh) translateX(-10vw);
        opacity:0;
    }
    19%{
        transform: scale(1) translateY(0) translateX(-5vw);
        opacity:1;
    }
    29%{
        transform: scale(1) translateY(0) translateX(-5vw);
        opacity:1;
    }
    39%{
        transform: scale(0) translateY(0) translateX(-5vw);
        opacity:0;
    }
    100%{
        transform: scale(0) translateY(0) translateX(-5vw);
        opacity:0;
    }
}

@keyframes work2{
    0%{
        transform: scale(0) translateY(-40vh);
        opacity:0;
    }
    10%{
        transform: scale(0) translateY(-40vh);
        opacity:0;
    }
    20%{
        transform: scale(1) translateY(80vh);
        opacity:1;
    }
    30%{
        transform: scale(1) translateY(80vh);
        opacity:1;
    }
    40%{
        transform: scale(0) translateY(80vh);
        opacity:0;
    }
    100%{
        transform: scale(0) translateY(80vh);
        opacity:0;
    }
}

@keyframes work3{
    0%{
        transform: scale(0) translateY(-40vh);
        opacity:0;
    }
    5%{
        transform: scale(0.5) translateY(-40vh);
        opacity:0;
    }
    10%{
        transform: scale(1) translateY(0px);
        opacity:1;
    }
    20%{
        transform: scale(1) translateY(0px);
        opacity:1;
    }
    30%{
        transform: scale(0) translateY(0px);
        opacity:0;
    }
    100%{
        transform: scale(0);
        opacity:0;
    }
}

/*********************************************************************/

.form{
    height:200vh;
    width:100vw;
    display:flex;
    position: absolute;
    justify-content: center;
    z-index:999;
    align-items:center;
    animation:form1;
    animation-timeline:scroll();
    transform: translateY(30vh);
}

@keyframes form1{
    0%{
        transform: translateY(40vh)
    }
    60%{
        transform: translateY(40vh)
    }
    80%{
        transform: translateY(-40vh)
    }
    100%{
        transform: translateY(-40vh)
    }
}

input[type=text], input[type=email]{
    font-size:11px;
    padding:1px 5px;
    background:#ffffff9f;
    caret-color:black;
    font-family: sans-serif;
}

form{
    width:75vw;
    padding:35px 7vw;
    border-radius: 25px;
    display: inline-flex;
    flex-direction: column;
    background: rgba(253, 253, 253, 0.637);
    box-shadow: 0 0 8px rgba(112, 112, 112, 0.719);
}

label{
    display: block; 
    margin:6px 0 3px 0;
    font-size:12px;
    width:100%;
    font-family: sans-serif;
}

input{
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff9f;
    padding: 5px;
    box-shadow: 0;
    text-shadow: 0;
}

#userFeatures{
    margin-top:8px;
}

#userStyle, #userFeatures, #userPackage, #userBagless, #userBagmore, #userGlasses, #userPaymentMethod, #userPlan, #userAge{
    border:1px solid #525252;
    padding:0px 2px;
}

form h6{
    margin: 7px 0 15px 0;
    font-size:9px;
    font-weight: 100;
    padding-top:5px;
    font-family: sans-serif;
}

form option{
    font-size:14px;
    width:100%;
    margin: 0 0 0 7px;
    border:1px solid #525252;
    font-family: sans-serif;
}

form option:active{
    background:#16163b ;
    cursor:pointer;
}

form select{
    font-size:12px;
    padding: 5px 0;
    width:100%;
    border:1px solid #525252;
    font-family: sans-serif;
}
input[type="checkbox"] {
    width: 10px;
    height: 10px;
    margin: 0 15px 0 0;
}

#userFeatures{
    display: grid;
    grid-template-columns: 20fr 20fr;
    background: #ffffff9f;
    padding: 10px 7px;
    border-radius: 15px;
}
#userFeatures label{
    font-weight: normal;
    margin-top: 0;
    padding:2px 0px;
    font-size: 10px;
    display:flex;
    align-items: center;
}
#userFeatures label div{
    width:20px;
    height:10px;
}
#userfeatures input{
    padding-right:10px !important;
    background: #16163b;
    width:10px;
    height:10px;
}

button{
    padding: 2px 10px;
    background: #0B325B !important;
    color: white;
    width:fit-content;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 5px;
}

button:active{
    background: #07203a;
}

button:hover{
    background: #07203a;
}

.tos{
    display:flex;
    align-items: center;
    padding-top:5px;
}

.slider-container{
    width:100%;
    display: flex;
    flex-direction: column;
}

.slider-container input{
    width:100%;
    padding-top: 0px;
}

#socials h1{
    font-size: 10vw;
    animation: h11;
    animation-timeline: scroll();
    position: absolute;
}

#termsandconditions{
    width:100vw;
    height:100vh;
}

@keyframes h11{
    0%{
        transform: translateY(0vh)
    }
    45%{
        transform: translateY(0vh)
    }
    62%{
        transform: translateY(59vh)
    }
    70%{
        transform: translateY(118vh)
    }
    90%{
        transform: translateY(177vh)
    }
    100%{
        transform: translateY(177vh)
    }
}

#socials{
    display:flex;
    justify-content: center;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 10px;
    background: #ffffff9f;
    border:1px solid #525252;
    border-radius: 10px;
}

input[type="range"]::-moz-range-track {
    height: 20px;
    background: #ffffff9f;
    border:1px solid #525252;
    border-radius: 10px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 10px;
  background: #0B325B;
  margin-top: -5px;
}

input[type="range"]::-moz-range-thumb {
  height: 20px;
  width: 10px;
  background: #0B325B;
  border-radius: 4px;
  border: none;
}

.slider-container span{
    width:100%;
    height:10px;
    text-align: center;
    font-size:10px;
}

label h6{
    padding: 0px 0 !important;
    font-size: 9px;
    font-weight: 100;
    font-family: sans-serif;
}

.tos a{
    text-decoration: underline;
    color:#16163b;
    padding:0 0 2px 3px;
}

@media only screen and (min-width: 500px) {
    input[type=text], input[type=email]{
        font-size:16px;
        padding:3px 10px;
    }

    form{
        width:75vw;
        padding:60px 7vw;
        border-radius: 50px;
        display: inline-flex;
        flex-direction: column;
        position: absolute;
    }

    label{
        display: block; 
        margin:12px 0 3px 0;
        font-size:18px;
        width:100%;
    }

    input{
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 5px;
    }

    #userFeatures{
        margin-top:20px;
    }

    #userStyle, #userFeatures, #userPackage, #userBagless, #userBagmore, #userGlasses, #userPaymentMethod, #userPlan, #userAge{
        padding:3px 10px;
    }

    form h6{
        margin: 7px 0 15px 0;
        font-size:14px;
        padding-top:5px;
    }

    form option{
        font-size:16px;
        margin: 0 0 0 7px;
        width: 50px !important;
        overflow-x: hidden;
    }

    form option:active{
        cursor:pointer;
    }

    form select{
        font-size:16px;
        padding: 5px 0;
    }
    input[type="checkbox"] {
        width: 20px;
        height: 20px;
        margin: 0 15px 0 0;
    }

    #userFeatures{
        display: grid;
        grid-template-columns: 20fr 20fr;
        padding: 15px 30px;
        border-radius: 20px;
    }
    #userFeatures label{
        font-weight: normal;
        margin-top: 0;
        padding:8px 0px;
        font-size: 18px;
        display:flex;
        align-items: center;
    }
    #userFeatures label div{
        width:20px;
        height:10px;
    }
    #userfeatures input{
        padding-right:10px !important;
        width:10px;
        height:10px;
    }

    button{
        padding: 8px 17px;
        width:fit-content;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        font-size: 22px;
        margin-top: 10px;
    }

    .tos{
        display:flex;
        align-items: center;
        padding-top:10px;
    }

    .slider-container{
        width:100%;
        display: flex;
        flex-direction: column;
    }

    .slider-container input{
        width:100%;
        height:20px;
    }

    .slider-container span{
        width:100%;
        height:20px;
        text-align: center;
        font-size:18px;
    }
}

@media only screen and (min-width: 1100px) {
    input[type=text], input[type=email]{
        font-size:15px;
        padding:3px 10px;
        width:277px;
    }

    form{
        width:900px;
        padding:auto;
        border-radius: 50px;
        display: grid;
        grid-template-columns: 20fr 20fr;
        position: absolute;
    }

    label{
        display: block; 
        margin:10px 0 3px 0;
        font-size:18px;
        width:100%;
    }

    input{
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 5px;
    }

    #userFeatures{
        margin-top:20px;
    }

    #userStyle, #userFeatures, #userPackage, #userBagless, #userBagmore, #userGlasses, #userPaymentMethod, #userPlan, #userAge{
        padding:3px 10px;
        width:277px !important;
    }

    form h6{
        margin: 7px 0 15px 0;
        font-size:13px;
        padding: 5px 15px;
        width:270px;
    }

    form option{
        font-size:14px;
        margin: 0 0 0 7px;
    }

    form option:active{
        cursor:pointer;
    }

    form select{
        font-size:15px;
        padding: 5px 0;
        width:300px;
    }
    input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        content:"";
        margin: 0 15px 0 0;
    }

    #userFeatures{
        display: grid;
        grid-template-columns: 20fr 20fr;
        padding: 15px 30px;
        border-radius: 20px;
        width:450px;
    }
    #userFeatures label{
        font-weight: normal;
        margin-top: 0;
        padding:10px 0px;
        font-size: 15px;
        display:flex;
        align-items: center;
    }
    #userFeatures label div{
        width:20px;
        height:10px;
    }
    #userfeatures input{
        padding-right:10px !important;
        width:10px;
        height:10px;
    }

    button{
        padding: 12px 20px;
        width:fit-content;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        font-size: 20px;
        margin-top: 10px;
    }

    .tos{
        display:flex;
        align-items: center;
        padding-top:10px;
        font-size: 14px;
    }

    .slider-container{
        width:300px;
        display: flex;
        flex-direction: row;
    }

    .slider-container input{
        width:100%;
        height:20px;
    }

    .slider-container span{
        width:100%;
        height:10px;
        text-align: center;
        font-size:20px;
    }
}

/*************************************************************/

.faq-container {
    max-width: 600px;
    width: 90vw;
    overflow: hidden;
}

.faq-input {
    display: none;
}

.faq-label {
    display: block;
    padding: calc((5px + 1vw + 3vh) * 0.3) calc((5px + 1vw + 3vh) * 0.4);
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    font-weight: bold;
    position: relative;
    transition: 0.3s ease;
    font-size: calc((5px + 1vw + 3vh) * 0.4);
    font-family: sans-serif;
}

.faq-label:hover {
    background-color: #f1f1f1;
}

.faq-content{
    max-height: 0;
    overflow: hidden;
    transition: 0s ease-out, padding 0.7s;
    background-color: white;
    font-size: calc((5px + 1vw + 3vh) * 0.4);
}

.faq-content p{
    text-decoration: none !important;
    font-family: sans-serif;
}

.faq-input:checked + .faq-label + .faq-content {
    max-height: 200px;
    padding: calc((5px + 1vw + 3vh) * 0.3) calc((5px + 1vw + 3vh) * 0.4);
    border-bottom: 1px solid #ddd;
}

.faq-label::after {
    content: '+';
    position: absolute;
    right: 0;
    transform: translateX(calc(-5vw - 10px));
    color: #888;
}

.faq-input:checked + .faq-label::after {
    content: '-';
}

.content h2{
    font-size:calc((5px + 1vw + 3vh) * 0.8);
    padding-top: calc(5px + 1vw + 3vh);
    padding-bottom:calc((5px + 1vw + 3vh) * 0.4);
}

#termsandconditions .content{
    background:#87abd100;
    display:flex;
    flex-direction: column;
    align-items: center;
    animation:colorss;
    animation-timeline:scroll();
}

@keyframes colorss{
    0%{
        background:#87abd100;
    }
    90%{
        background:#87abd100;
    }
    100%{
        background:#87abd1;
    }
}

.content{
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: underline;
    height:70vh;
}

.content a{
    padding-bottom:10px;
}

.slihead{
    width:13%;
    transform: translateX(335%);
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding:2vh 0;
    height:86vh;
    background-color: #ffffff8c;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.253);
}

.slihead div{
    width:100%;
    max-width:900px;
}

.slititle{
    height: 10vh;
}

.slititle h1{
    font-size: calc((5px + 2.5vw + 2.5vh));
    text-decoration: underline;
}

.slistar{
    height: 25vh;
}

.slimid{
    height: 35vh;
}
.sliend{
    height: 10vh;
}

.sliend h3{
    font-size: calc((5px + 2.5vw + 2.5vh) * 1.05);
    font-family: sans-serif;
}

#packages{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.carousel-container {
    width: 100vw;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-track {
    transition: transform 0.5s ease-in-out;
    display: flex;
    position: relative;
}

.slide {
    min-width: 100%;
    width: 80vw !important;
    text-align: center;
}

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    border: none;
    cursor: pointer;
    z-index: 10;
    border-radius: 100%;
    width: 45px;
    height: 45px;
    display:flex;
    justify-content: center;
    align-items: center;
    background: #07203a3d;
}

.prev { left: 2vw; }
.next { right: 2vw; }
.nav-btn:hover { background: rgba(0,0,0,0.8); }

.dots-container {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: #94bfff;
    border-radius: 100%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active {
    background:#333;
}

.slide ul{
    margin: 0vh 4.5vh;
}

.slide li{
    text-align: left;
    padding: 0.3vh 0;
    font-family: sans-serif;
    font-size: calc(( 5px + 1vw + 4vh) * 0.35);
}

.slide h2{
    text-align: left;
    margin: 1vh 4vh;
    font-size: calc(( 5px + 1vw + 4vh) * 0.6);
}

/******************************************************/

body{
    max-height:600vh !important;
    height:600vh !important;
    max-width:600vw !important;
}