@media screen and (max-width: 1130px) {
    .footer-container .footer-logo img{
        width: 150px;
    }

    .footer-container .copyright-info{
        font-size: .8rem;
    }
}

@media screen and (max-width: 1108px) {
    .header-nav ul li a{
        font-size: 0.6rem;
    }
    
}

@media screen and (max-width: 1064px) {
    .header-nav ul li a{
        font-size: 0.5rem;
    }
}

@media screen and (max-width: 993px) {
    .header-top-x {
        display: none;
    }

    .header-top-m{
        display: block;
    }

    .content-container{
        top:5rem;
        height: 40vh;
    }

    .content-container .text-part h1 {
        font-size: 2.7rem;
    }

    .content-container .text-part h5 {
        font-size:.8rem;
    }

    .see-full-video{
        height: 40vh;
    }

    .scroll-indicator{
        top:0rem;
        margin-top: 0rem;
    }

    .slider-cursor{
        display: none;
    }

    .text-part .slider-cursor{
        display: block;
        width: 100%;
        height: 20px;
    }

    .text-part .slider-cursor ul {
        padding-right: 0;
        text-align: center;
        display: flex;
        width: 30%;
    }

    .slider-cursor ul li{
        display: inline;
        top: 0;
        margin: auto;
    }

    .slider-cursor ul li, .slider-cursor ul li.active {
        left: 0;
    }

    .expcarx{
        width: 32%;
    }

    .experiences-container{
        height: 640px;
    }

    .inyambo-container.services-container{
      height: 600px;
      display: grid; 
      grid-template-columns: repeat(2, 1fr);
      gap: .2px;
    }

    .service-card{
        width: 100%;
    }

    .footer-container .copyright-info{
        font-size: .7rem;
    }

    .footer-container .footer-logo img{
        width: 120px;
    }

    .footer-container .contact-info ul li a,
    .footer-container .location-info,
    .footer-container .quick-links ul li a{
        font-size: .65rem;
    }

    .footer-container .footer-heading{
        font-size:.8rem;
    }

    .footer-container .social-links a{
        font-size: 1.3rem;
    }


}

@media screen and (max-width: 840px){
    .header-top-m .header-nav ul li a{
        font-size: 0.53rem;
    }

    .footer-container .footer-logo img{
        width: 100px;
    }

    .footer-container .contact-info ul li a,
    .footer-container .location-info,
    .footer-container .quick-links ul li a{
        font-size: .6rem;
    }

    .footer-container .footer-heading{
        font-size:.7rem;
    }

    .footer-container .social-links a{
        font-size: 1rem;
    }

    

}

@media screen and (max-width: 760px){

    .header-top-m{
        display: none;
    }

    .expcarx{
        width: 45%;
    }

    .experiences-container{
        height: 960px;
    }

    .story-container-f {
        padding: 1.5rem 2rem;
        position: relative;
        z-index: 100;
    }

    .header-top-s{
        display: flex;
    }

    .see-full-video{
        top:50px;
    }

    .inyambo-container.footer-container{
        display: none;
    }

    
}

@media screen and (max-width: 660px){
    .see-full-video {
        display: none;
    }

    .see-full-video-s{
        display: block;
    }

    .text-part{
        width: 100%;
        position: relative;
        top: -50px;
    }
}


@media screen and (max-width: 640px){
    .header-top-s .small-nav-button button{
       left: 50%; 
    }

    .header-top-s .header-button button{
      width: 80%; 
      box-shadow: 0 0 20px rgba(0, 0, 0,.3); 
    }

    .inyambo-container .service-button{
        font-size: 0.6rem;
    }

    .service-card .service-container{
        top:95px;
        padding: 2rem;
    }

    .service-card .gradient-overlay{
        background: #121100;
        background: linear-gradient(0deg, rgba(18, 17, 0, 0.8) 30%, rgba(18, 17, 0, 0.71) 50%, rgba(255, 255, 255, 0) 94%);
    }

    .service-card .service-title{
        color: var(--gold-light);
    }

    
}

@media screen and (max-width: 620px){
    .inyambo-container .more-experiences{
        left:140%;
        top:0;
    } 
}

@media screen and (max-width: 540px){
    .inyambo-container .more-experiences{
        left:100%;
        top:0;
    } 

    .expcarx{
        margin: 1.56%;
    }

    .header-top-s .header-button {
        width: 60%;
        
    }

    .header-top-s .header-button button{
        width: 60%;
    }

    .header-top-s .small-nav-button {
        width: 20%;
    }

    .header-top-s .small-nav-button button{
        left: 20%;
        padding: 1rem;
        font-weight: 500;
        font-size: 2rem;
    }


    .header-top-s .header-logo{
        width: 20%;
        padding-left: .7rem;
    }
    .header-top-s .header-logo img{
        width: 120px;
    }
}

@media screen and (max-width: 465px){
    .text-part h5{
        padding: 1rem;
    }

    .header-top-s .header-logo{
        width: 30%;
    }

    .header-top-s .header-button {
        width: 50%;
        
    }

    .header-top-s .small-nav-button {
        width: 20%;
    }

    .header-top-s .header-button button{
       font-size: .6rem;
    }

    .expcarx {
        width: 100%;
        float: none;
        height: 280px;
    }

    .experiences-container{
        height: 1700px;
        padding: 0;
    }

    .inyambo-container.services-container{
        grid-template-columns: repeat(1, 1fr);
    }

    .service-card .service-container{
        padding-left: 8rem;
        padding-right: 8rem;
        top:150px;
    }

    .service-card{
        height: 350px;
    }

    .inyambo-container .more-experiences{
        left: 0%;
    }
}

@media screen and (max-width: 443px){
    .header-top-s .header-logo{
        width: 20%;
    }

    .header-top-s .header-logo img{
        width: 90px;
    }

    .header-top-s .header-button {
        width: 60%;
        
    }

    .header-top-s .small-nav-button {
        width: 20%;
    }

    .header-top-s .small-nav-button button {
        left: 15%;
        padding: .5rem;
        font-size: 1.8rem;
    }
}


@media screen and (max-width: 400px){
    .header-top-s .header-button button {
        width: 50%;
        font-size: .5rem;
        padding: 0.65rem .8rem;

    }

    .service-card{
        width: 80%;
        margin: auto;
    }

        .inyambo-container.services-container{
            margin: auto;
            justify-content: center;
            gap:1rem;
            height: 1500px;
        }

        .service-card .service-container{
            padding-left: 2rem;
            padding-right: 2rem;
        }

        .inyambo-container .more-stories{
            width: 80%;
        }

        .inyambo-container .story-text{
            width: 80%;
        }

        .inyambo-container.story-container{
            height: 350px;
        }
}