@media(min-width:800px) and (max-width:1200px){
    .hero-section{
    height: 90vh;
    width: 100%;
    /* position: relative; */
    background: url(images/heroimg.webp);
    /* width: 100%; */
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
}

.nav-container .nav-menu li a{
    font-size: 1rem;
    font-weight: 500;
}

.nav-logo{
    font-size: 1.6rem;
}
.nav-container .nav-menu{
    gap: 1rem;
}

.hero-section .hero-txt{
    width: 100%;
    height: 60%;
    
}
.hero-section .hero-txt h1{
    font-size: 2.2rem;
    width: 75%;
}
.hero-section .hero-txt p{
    font-size: 1.1rem;
    width: 75%;
    line-height: 1.2rem;
}

.hero-section .hero-btns{
    width: 100%;
    height: 40%;
}
.hero-section .hero-btns a{
    width: 80%;
}
.btn-sec{
    background-color: #111111;
    border: none;
}
.btn:hover, .btn-sec:hover{
    transform: translateY(0px);
}
.services .serv-cards{
    padding: 20px;
}
.approach-cards{
    padding: 20px;
}
.slider-container {
    width: 70%; 
}
.why-us .why-us-cards .why-cards .why-head h2{
    font-size: 20px;
}
.why-us .why-us-cards .why-cards .why-para p{
    font-size: 12px;
    line-height: 1.3rem;
}
.cta{
    padding: 20px;
    gap: 25px;
}
.cta .cta-form{
    width: 80%;
    padding: 15px;
}
.inpt-box{
    width: 100%;
}

.details-card{
    width: 100%;
}

}



@media(max-width:800px){
    .nav-container{
        width: 100%;
    }
    .nav-container .nav-menu{
       flex-direction: column;
       display: none;
       /* align-items: flex-end; */
       gap: 2rem !important;
       position: absolute;
       height: 100vh;
       width: 100%;
       top: 0;
       right: 0;
       /* padding: 5rem 0; */
       justify-content: center;
       background: #111111;
       /* opacity: 0; */
    }
    .nav-toggle{
        display: block;
        z-index: 999;
    }
    .nav-container .nav-menu.active{
        display: flex;
        /* opacity: 1; */
    }
    .nav-toggle.active .bar:nth-child(2){
        opacity: 0;
    }
    .nav-toggle.active .bar:nth-child(1){
        transform: translateY(8px) rotate(45deg);
    }
    .nav-toggle.active .bar:nth-child(3){
        transform: translateY(-8px) rotate(-45deg);
    }


    .hero-section{
    height: 90vh;
    width: 100%;
    /* position: relative; */
    background: url(images/heroimg.webp);
    /* width: 100%; */
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
}

.hero-section .hero-txt{
    width: 100%;
    height: 60%;
    
}
.hero-section .hero-txt h1{
    font-size: 2.2rem;
    width: 75%;
}
.hero-section .hero-txt p{
    font-size: 1.1rem;
    width: 75%;
    line-height: 1.2rem;
}

.hero-section .hero-btns{
    width: 100%;
    height: 40%;
}
.hero-section .hero-btns a{
    width: 80%;
}
.btn-sec{
    background-color: #111111;
    border: none;
}
.btn:hover, .btn-sec:hover{
    transform: translateY(0px);
}
.services .serv-cards{
    padding: 20px;
}
.approach-cards{
    padding: 20px;
}
.slider-container {
    width: 70%; 
}

.why-us-cards{
    padding: 20px;
}
.why-cards{
    min-width: 100%;
}
.cta{
    padding: 20px;
    gap: 25px;
}
.cta .cta-form{
    width: 100%;
    padding: 15px;
}
.inpt-box{
    width: 100%;
}

.details-card{
    width: 100%;
}

}





@media (max-width:480px){
    .nav-container{
        padding: 0 1rem;
    }
    .nav-logo{
        font-size: 1.7rem;
    }
    .nav-container .nav-menu li a{
        font-size: 1.2rem;
    }

.hero-section .hero-txt h1{
    font-size: 2rem;
    width: 100%;
    padding: 0px 15px;
    }
.hero-section .hero-txt p{
    font-size: 1rem;
    width: 100%;
    line-height: 1.2rem;
    padding: 0px 15px;
    }

.hero-section .hero-btns{
    width: 100%;
    height: 40%;
    }

.hero-section .hero-btns a{
    width: 90%;
}
.services{
    padding: 35px 0px;
}

.card{
    padding: 15px 12px;
}
.card-para{
    text-align: justify;
}
.services .serv-heading h1{
    font-size: 30px;
}
.card-head{
    font-size: 18px;
}
.card-para{
    font-size: 15px;
    line-height: 1.3rem;
}
.serv-img{
    height: 50%;
}

.approach{
    padding: 20px 0px;
}
.approach .approach-head h1{
    font-size: 30px;
}

.app-cards{
    height: 300px;
}

.why-us{
    padding: 20px 0px;
}
.why-us .why-us-head h1{
    font-size: 30px;
}
.why-cards{
    padding: 20px;
}
.why-cards  h2{
    font-size: 20px;
}
.why-cards p{
    font-size: 14px;
}
.inpt-box{
    height: 50px;
}
.cta{
    padding: 40px 20px;
    gap: 25px;
}
.cta .cta-head{
    gap: 15px;
}
.cta .cta-form{
    padding: 30px 15px;
}
.cta-form p{
    text-align: justify;
    font-size: 15px;
    line-height: 1.4rem;
}

.detail-sec{
    padding: 50px 40px;
    gap: 0px;
}
.details-card img{
    height: 80px;
}
.footer-icons a img{
    height: 30px;
}
.breakline{
    width: 90%;
}
.copyright h4{
    color: white;
}
.fix-contact{
    display: flex;
}
.why-us{
    padding: 50px 0px;
}
.slide{
    height: 400px;
}
.slider-container {
    width: 90%; /* Sets the slider width to 60% of the parent container */
}
.slide h4{
    font-size: 16px;
}
.background {
    min-height: 65vh;
    padding: 50px 0px;
}

}