@media screen and (max-width: 767px) {
    .container{
        padding: 0 20px;
    }
    #services{
        padding: 100px 20px;
    }
    #visions {
        padding: 100px 20px;
        flex-direction: column;
        gap: 30px;
    }
    #certawards{
        padding: 100px 20px;
    }
    #clientreviews, #featuredproject, #contactus{
        padding: 100px 20px;
    }
    #footer{
        padding: 100px 20px 20px;
    }
    .buttons{
        flex-direction: column;
        align-items: center;
    }
    /* Header */
    #header .top {
        padding: 15px 0;
        /* display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px; */
    }
    .mobile-br{
        display: block;
    }
    

    #header .nav-container {
        overflow: hidden;
    }
    #header .contact-details {
        display: flex;
        gap: 15px;
        /* align-items: flex-start;
        flex-direction: column; */
    }
    #header .nav-container{
        width: 80%;
        padding: 100px 20px;
    }
    #header .nav-container .contact-details{
        display: flex;
        background-color: unset;
    }
    #header .nav-container .contact-details > div{
        background-color: unset;
    }
    #header .contact-link{
        display: none;
    }
    /* Header */
    #hero .stats{
        flex-direction: column;
        gap: 30px;
    }
    #hero .stats .hr{
        width: 100%;
        height: 1px;
    }

    /* Hero */


    /* Visions */
    #visions .left-image img{
        position: relative;
        width: 100%;
    }
    #visions > div{
        width: 100%;
    }
    #visions{
        flex-direction: column-reverse;
    }
    #visions .pe{
        flex-direction: column;
        width: 100%;
        margin: 0;
    }



    /* Certification and Awards */
    #certawards .title .text {
        gap: 30px;
        flex-direction: column;
    }
    .slick-controls.prev {
        left: 25px;
    }
    .slick-controls.next {
        right: 25px;
    }
    #certawards .title .text > *{
        width: 100%;
    }


    /* Featured Project */
    #featuredproject .title {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }
    #featuredproject .project {
        flex-direction: column;
    }
    #featuredproject .project > * {
        width: 100%;
    }
    #featuredproject .image img {
        position: relative;
        height: 350px;
    }

/* Client Reviews */
#clientreviews .head {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
}



/* Contact Us */
#contactus .location{
    max-height: 500px;
    object-position: top;
}
#contactus .map{
    left: 10px;
    top: 10px;
}
#contactus .details{
    flex-direction: column;
    gap: 20px;
}
#contactus .details > div {
    width: 100%;
}
#contactus .address {
    padding-left: 0;
    border-left: none;
}



    /* Footer */
    #footer .links {
        flex-direction: column;
    }
    #footer .logo{
        text-align: center;
    }
    /* Footer */



    #calculator-modal .modal-content{
        padding:30px 0 70px;
        width: 90%;
    }
    .printable {
        margin: 0 3%;
    }
    .printable-data {
        padding: 15% 10%;
    }
}