@media(min-width:1600px){
    .container{
        max-width: 1600px;
    }
}

@media(max-width:1600px){
    :root {
    --fs-20: 18px;
    --fs-22: 20px;
    --fs-40: 30px;
    --fs-30: 25px;
    --fs-18: 16px;
    --lh-28: 25px
}

    header.header{
        padding: 5px 0px;
    }
    .hero{
        height: 800px;
    }
    .main-contenter{
        margin-bottom: 150px;
        padding: 30px 0px;
    }
    .fs-60{
        font-size: 40px;
        line-height: 41px;
    }
    .hero .fs-60{
        margin-bottom: 5px;
    }
    .label-content p{
        max-width: 730px;
    }
    .site-logo{
        max-width: 120px;
    }
    .c-btn{
        padding: 8px 15px;
    }
    .main-animate-text{
        padding: 25px 0px;
    }
    section.strength{
        padding: 70px 0px;
    }
    .strength-content{
        gap: 70px;
    }
    .fs-30{
        font-size: 25px;
        line-height: 31px;
    }
    h1, h2, h3, h4, h5, h6{
        margin-bottom: 10px;
    }
    .fs-40{
        font-size: 30px;
        line-height: 31px;
    }
    p{
        margin-bottom: 10px;
        font-size: 16px;
        line-height: 24px;
    }
    .grid--price{
        padding: 40px 0px;
        gap: 30px;
    }
    .pricing-memeber-ship{
        padding: 50px 0px;
    }
    .logo-bg{
        max-width: 120px;

    }
    .price-data{
        gap: 10px;
        max-width: 288px;
        height: 265px;
    }
    .main-width{
        max-width: 265px;
    }
    .circle-logo{
        max-width: 230px;
        height: 230px;
    }
    .pricing-memeber-ship{
        padding-bottom: 20px;
    }
    .custom-footer{
        padding: 40px 0px;
    }
    .form-content{
        margin-bottom: 60px;
    }
    ul.social-media{
        padding: 30px 0px;
    }
    .input-feilds{
        padding-top: 20px;
    }
    .custom-footer p{
        line-height: 25px;
    }
    .main-logo{
        padding-bottom: 20px;
        max-width: 200px;
    }
    .input-feilds input[type="submit"], .input-feilds input[type="email"]{
        padding: 8px 14px;
    }
    ul.social-media{
        gap: 15px;
    }
    
    .hover-cicle{
        max-width: 120px;
    }

}


@media(max-width:1400px){
     :root {
    --fs-20: 16px;
    --fs-30: 20px;
    --fs-18: 15px;
    --lh-28: 20px;
      --fs-22: 18px;
    --fs-40: 25px;
}
    .hero{
        height: 650px;
    }
    .main-contenter{
        margin-bottom: 130px;
    }
    .fs-60{
        font-size: 30px;
        line-height: normal;
    }
    .label-content p{
        max-width: 650px;
    }
       .site-logo{
        max-width: 90px;
    }
      .main-animate-text{
        padding: 20px 0px;
    }
      section.strength{
        padding: 60px 0px;
    }
       .strength-content{
        gap: 60px;
    }
     .fs-30{
        font-size: 20px;
        line-height: 26px;
    }
        .fs-40{
        font-size: 25px;
        line-height: 26px;
    }
      p{
        margin-bottom: 10px;
        font-size: 15px;
        line-height: 23px;
    }
       .grid--price{
        padding: 30px 0px;
        gap: 20px;
    }
        .pricing-memeber-ship{
        padding: 40px 0px;
    }
    .main-title-memebership p{
        margin-bottom: 0px;
    }
    .circle-logo{
        max-width: 200px;
        height: 200px;
    }
    .price-data{
        max-width: 250px;
        height: 250px;
    }
    .logo-bg{
        max-width: 100px;
    }
    .pricing-memeber-ship{
        padding-bottom: 10px;
    }
    .main-width{
        max-width: 270px;
    }
    .price-data{
        max-width: 270px;
        height: 220px;
    }
    .circle-logo{
        max-width: 180px;
        height: 180px;
    }
       .custom-footer{
        padding: 30px 0px;
    }
      .form-content{
        margin-bottom: 50px;
    }
      ul.social-media{
        padding: 20px 0px;
    }
      .input-feilds{
        padding-top: 15px;
    }
        .main-logo{
        padding-bottom: 15px;
        max-width: 150px;
    }
       ul.social-media{
        gap: 10px;
    }
        .hover-cicle{
        max-width: 100px;
    }
}
@media(max-width:1200px){
    .hero{
        height: 500px;
    }
    .main-contenter{
        margin-bottom: 80px;
    }
         .main-animate-text{
        padding: 15px 0px;
    }
    .marquee-content li{
        font-size: 18px;
    }
         section.strength{
        padding: 50px 0px;
    }
           .strength-content{
        gap: 20px;
    }
        .pricing-memeber-ship{
        padding: 30px 0px;
        padding-bottom: 10px;
    }
    .circle-logo{
        margin-top: 30px;
    }
       .form-content{
        margin-bottom: 40px;
    }
       .input-feilds{
        padding-top: 10px;
    }
         .hover-cicle{
        max-width: 80px;
    }
}
@media(max-width:995px){
    .main-img{
        position: static;
        height: 330px;
    }
    .hero{
        flex-direction: column;
    }
    .hero{
        height: auto;
    }
    .main-contenter{
        margin-bottom: 0px;
    }
    .fs-60{
        font-size: 25px;
        line-height: 26px;
    }
    .label-content p{
        font-size: 16px;
        line-height: 18px;
    }
    .site-logo{
        max-width: 80px;
    }
     .marquee-content li{
        font-size: 15px;
    }
    .marquee-track,
    .marquee-content{
        gap: 40px;
    }
    .marquee-content li::after{
        left: -25px;
    }
         section.strength{
        padding: 54px 0px;
    }
    .strength-content{
        flex-direction: column;
        gap: 15px;
    }
    .strenth-data{
        max-width: 100%;
        width: 100%;
    }
    .grid--price{
        flex-wrap: wrap;
        justify-content: center;
    }
         .form-content{
        margin-bottom: 30px;
    }
}
@media(max-width:768px){
    section.strength{
        padding: 30px 0px;
    }
    .main-contenter{
        padding: 20px 0px;
    }
    .main-title-memebership p{
        font-size: 16px;
        line-height: 22px;
    }
    .main-title-memebership .fs-40 {
    margin-bottom: 0px;
}
.price-data{
    max-width: 350px;
}
.grid--price.data{
    flex-direction: column;
    gap: 10px;
}
.circle-logo{
    margin-top: 0px;
    margin: 0 auto;
}
.price-data,
.main-width{
    max-width: 350px;
    margin: 0 auto;
}
}
@media(max-width:580px){
      .main-img{
        position: static;
        height: auto;
    }
    header.header{
        background-color: #000;
    }
    .hero{
        padding-top: 68px;
    }
    .fs-60{
        font-size: 20px;
        line-height: 21px;
    }
    .label-content p{
        font-size: 14px;
    }
    .marquee-content li{
        font-size: 14px;
    }
    .main-width,
    .price-data{
        max-width: 350px;
    }
    .circle-logo{
        margin-top: 0px;
    }
    .main-logo{
        max-width: 130px;
    }
    .input-feilds input[type="submit"]{
        max-width: 100px;
    }
    .input-feilds{
        gap: 5px;
    }
    .contact-info{
        gap: 5px;
    }
}
@media(max-width:430px){}