/*=========================================
        RESPONSIVE.CSS
        PART - 1
=========================================*/

/* ---------- Large Laptop ---------- */

@media (max-width:1200px){

.container{
    width:95%;
    margin:auto;
}

.navbar{
    padding:0 20px;
}

.nav-links{
    gap:25px;
}

.logo img{
    width:165px;
}

}

/* ---------- Tablet ---------- */

@media (max-width:992px){

.top-bar{
    display:none;
}

.navbar{
    height:80px;
    padding:0 20px;
}

.logo img{
    width:150px;
}

.menu-btn{
    display:block;
    font-size:30px;
    cursor:pointer;
    color:#fff;
    z-index:1001;
}

.nav-links{

    position:fixed;

    top:80px;
    right:-100%;

    width:280px;
    height:calc(100vh - 80px);

    background:#111827;

    display:flex;
    flex-direction:column;

    align-items:flex-start;

    gap:20px;

    padding:35px 25px;

    transition:.4s ease;

    z-index:999;

}

.nav-links.active{
    right:0;
}

.nav-links li{
    width:100%;
}

.nav-links a{

    display:block;

    width:100%;

    color:#fff;

    padding:12px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.nav-links a:hover,
.nav-links a.active{

    color:#f7ca18;

}

.footer-grid{

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

}

/*=========================================
        RESPONSIVE.CSS
        PART - 2
=========================================*/

/* ---------- Tablet ---------- */

@media (max-width:992px){

.hero{
    height:85vh;
}

.hero-content{
    width:100%;
    text-align:center;
    padding:0 20px;
}

.hero-content h1{
    font-size:48px;
}

.hero-content h2{
    font-size:28px;
}

.hero-content p{
    font-size:17px;
    line-height:1.8;
}

.hero-buttons{
    justify-content:center;
    flex-wrap:wrap;
}

/* About */

.about-wrapper,
.director-wrapper{
    flex-direction:column;
    gap:40px;
}

.about-image,
.about-content,
.director-image,
.director-content{
    width:100%;
}

.about-content{
    text-align:center;
}

.about-features{
    grid-template-columns:1fr 1fr;
}

/* Services */

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

/* Projects */

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

/* Contact */

.contact-wrapper,
.contact-container{
    grid-template-columns:1fr;
    gap:35px;
}

.contact-info,
.contact-form{
    width:100%;
}

iframe{
    width:100%;
    height:350px;
}

}

/* ---------- Mobile ---------- */

@media (max-width:768px){
.top-bar{
     background-color: yellow;
}
.hero{
    min-height: 100vh;
    height: auto;
    padding: 120px 20px 80px;
}

.hero-content h1{
    font-size:36px;
}

.hero-content h2{
    font-size:24px;
}

.hero-content p{
    font-size:16px;
}

.hero-buttons{
    flex-direction:column;
    gap:15px;
}

.hero-buttons .btn{
    width:100%;
    text-align:center;
}

.about-features{
    grid-template-columns:1fr;
}

.service-container{
    grid-template-columns:1fr;
}

.project-container{
    grid-template-columns:1fr;
}

.stats-grid{
    grid-template-columns:1fr;
}

.choose-grid{
    grid-template-columns:1fr;
}

.mission-grid{
    grid-template-columns:1fr;
}

.about-content,
.director-content{
    text-align:center;
}

.about-content h2,
.director-content h2{
    font-size:30px;
}

.section-title{
    font-size:30px;
}

.contact-form input,
.contact-form textarea{
    width:100%;
}

iframe{
    height:280px;
}

}
.whatsapp-btn{
    right:15px;
    bottom:15px;
}

.call-btn{
    right:15px;
    bottom: 75px;px;
}

.top-btn{
    right:15px;
    bottom:85px;
}

@media (max-width:768px){

.about-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-image,
.about-content{
    width: 100%;
}

.about-image{
    margin-bottom: 25px;
    text-align: center;
}

.about-image img{
    width: 100%;
    max-width: 350px;
    height: auto;
}

.about-content{
    text-align: center;
}

}

/*Mobile repmnsive director section */
.director-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.director-image,
.director-content{
    width: 100%;
}

.director-image{
    margin-bottom: 25px;
    text-align: center;
}

.director-image img{
    width: 100%;
    max-width: 350px;
    height: auto;
}

.director-content{
    text-align: center;
}

}

/*=========================================
        RESPONSIVE.CSS
        PART - 3
=========================================*/

/* ---------- Small Mobile ---------- */

@media (max-width:480px){

html{
    font-size:15px;
}

.container{
    width:92%;
    margin:auto;
}

section{
    padding:60px 15px;
}

/* Navbar */

.logo img{
    width:130px;
}

.navbar{
    height:75px;
    padding:0 15px;
}

.nav-links{
    top:75px;
    width:100%;
    height:calc(100vh - 75px);
}

/* Hero */

.hero{
   min-height: 100vh; 
   height: auto;
   padding: 110px 15px 80px;
}

.hero-content h1{
    font-size:28px;
}

.hero-content h2{
    font-size:20px;
}

.hero-content p{
    font-size:15px;
    line-height:1.7;
}

.hero-tag{
    font-size:13px;
}

/* Buttons */

.btn{
    width:100%;
    padding:14px 20px;
    font-size:15px;
}

/* Banner */

.page-banner{
    height:35vh;
}

.banner-content h1{
    font-size:28px;
}

.banner-content p{
    font-size:15px;
}

/* About */

.about-image img,
.director-image img{
    border-radius:15px;
}

.about-content h2,
.director-content h2{
    font-size:26px;
}

.section-title{
    font-size:28px;
}

/* Cards */

.service-card,
.project-card,
.stat-box,
.mission-card,
.choose-card{
    padding:22px;
}

/* Contact */

.contact-form{
    padding:20px;
}

.contact-form input,
.contact-form textarea{
    font-size:15px;
}

/* Map */

iframe{
    height:240px;
}

/* Floating Buttons */

.whatsapp-btn,
.call-btn,
#topBtn{

    width:50px;
    height:50px;
    font-size:20px;
    right:15px;

}

.whatsapp-btn{
    bottom:20px;
}

.call-btn{
    bottom:85px;
}

#topBtn{
    bottom:150px;
}

}

/* ---------- Very Small Phones ---------- */

@media (max-width:360px){

.hero-content h1{
    font-size:23px;
}

.hero-content h2{
    font-size:18px;
}

.hero-content p{
    font-size:14px;
}

.banner-content h1{
    font-size:22px;
}

.section-title,
.about-content h2,
.director-content h2{
    font-size:22px;
}

.btn{
    font-size:14px;
    padding:12px 18px;
}

.logo img{
    width:115px;
}

}

/* ---------- Landscape Phones ---------- */

@media (max-height:500px){

.hero,
.page-banner{
    height:100vh;
}

.hero-content{
    padding-top:70px;
}

}

/*=========================================
        END OF RESPONSIVE.CSS
=========================================*/