/* ====================================
   LARGE DESKTOP
==================================== */

@media (max-width:1200px){

    .container{
        width:95%;
    }

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

}

/* ====================================
   TABLET LANDSCAPE
==================================== */

@media (max-width:991px){

    /* ======================
       HEADER
    ====================== */

    .main-header .container{
        min-height:75px;
    }

    .logo img{
        height:55px;
    }

    .nav-links{
        gap:20px;
    }

    .quote-btn{
        padding:10px 20px;
    }

    /* ======================
       HERO
    ====================== */

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

    /* ======================
       FEATURES
    ====================== */

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

    /* ======================
       ABOUT
    ====================== */

    .about-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

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

    /* ======================
       SERVICES
    ====================== */

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

    /* ======================
       WHY CHOOSE US
    ====================== */

    @media (max-width: 991px){

		.choose-item{
			flex: 0 0 calc(50% - 15px);
		}

	}

	@media (max-width: 768px){

		.choose-item{
			flex: 0 0 100%;
		}

	}

    /* ======================
       FOOTER
    ====================== */

    .footer-grid{
        grid-template-columns:repeat(2,1fr);
        gap:40px;
    }

}

/* ====================================
   TABLET & MOBILE
==================================== */

@media (max-width:768px){

    /* ======================
       HEADER
    ====================== */

    .menu-toggle{
        display:block;
        z-index:1001;
    }

    .header-btn{
        display:none;
    }

    .navbar{

        position:absolute;

        top:100%;
        left:0;

        width:100%;

        background:#ffffff;

        display:none;

        box-shadow:0 10px 25px rgba(0,0,0,0.08);

        border-top:1px solid #eeeeee;
    }

    .navbar.active{
        display:block;
    }

    .nav-links{
        flex-direction:column;
        align-items:flex-start;
        gap:0;
    }

    .nav-links li{
        width:100%;
        border-bottom:1px solid #f1f1f1;
    }

    .nav-links a{
        width:100%;
        display:block;
        padding:15px 25px;
    }

    .nav-links a::after{
        display:none;
    }

    /* ======================
       HERO
    ====================== */

    .hero-section{
        min-height:650px;
        height:auto;
    }

    .hero-content{
        padding-top:120px;
        padding-bottom:120px;
    }

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

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

    /* ======================
       FEATURE BOXES
    ====================== */

    .feature-section{
        margin-top:40px;
    }

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

    /* ======================
       ABOUT
    ====================== */

    .about-home{
        padding:80px 0;
    }

    .about-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .about-image{
        order:1;
    }

    .about-content{
        order:2;
    }

    /* ======================
       SERVICES
    ====================== */

    .services-home{
        padding:80px 0;
    }

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

    .service-card{
        padding:30px;
    }

    /* ======================
       VIDEO CARD
    ====================== */

    @media (max-width:768px){

		.video-card{
			width: 100%;
		}

		.video-card iframe{
			width: 100%;
			min-height: 220px;
		}

	}

    /* ======================
       WHY CHOOSE US
    ====================== */

    .why-choose{
        padding:80px 0;
    }

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

    /* ======================
       CTA
    ====================== */

    .cta-section{
        padding:80px 0;
    }

    /* ======================
       FOOTER
    ====================== */

    .footer-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .footer-column h3::after{
        left:50%;
        transform:translateX(-50%);
    }

    .social-icons{
        justify-content:center;
    }

    .contact-info li{
        justify-content:center;
    }

    /* ======================
       ABOUT PAGE
    ====================== */

    .about-content-box{
        padding:30px;
    }

    .about-logo img{
        max-width:180px;
    }

}

/* ====================================
   MOBILE
==================================== */

@media (max-width:576px){

    /* ======================
       TYPOGRAPHY
    ====================== */

    h1{
        font-size:32px;
    }

    h2{
        font-size:28px;
    }

    h3{
        font-size:22px;
    }

    p{
        font-size:15px;
    }

    /* ======================
       HERO
    ====================== */

    .hero-content h1{
        font-size:34px;
        line-height:1.2;
    }

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

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

    /* ======================
       BUTTONS
    ====================== */

    .btn-primary,
    .btn-secondary{
        padding:12px 24px;
        font-size:14px;
    }

    /* ======================
       FEATURES
    ====================== */

    .feature-box{
        padding:30px 25px;
    }

    /* ======================
       SERVICES
    ====================== */

    .service-card{
        padding:25px;
    }

    /* ======================
       WHY CHOOSE US
    ====================== */

    .choose-item{
        padding:30px 25px;
    }

    /* ======================
       PAGE BANNER
    ====================== */

    .page-banner{
        padding:80px 0;
    }

    .about-content-box{
        padding:25px;
    }

}

/* ====================================
   SMALL MOBILE
==================================== */

@media (max-width:480px){

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

    .logo img{
        height:40px;
    }

    .menu-toggle{
        font-size:24px;
    }

    .social-icons a{
        width:38px;
        height:38px;
        font-size:16px;
    }

}

/* ====================================
   EXTRA SMALL MOBILE
==================================== */

@media (max-width:360px){

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

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

    .feature-box,
    .service-card,
    .choose-item{
        padding:20px;
    }

}
/* ====================================
   VISION & MISSION - ABOUT PAGE
==================================== */

.vision-mission{

    padding: 100px 0;

    background: #f8f9fa;
}

.vision-grid{

    display: flex;

    justify-content: center;

    gap: 30px;

    flex-wrap: wrap;
}

.vision-card{

    position: relative;

    overflow: hidden;

    flex: 0 0 calc(50% - 15px);

    background: #ffffff;

    padding: 45px 35px;

    border-radius: 20px;

    text-align: center;

    box-shadow: 0 10px 30px rgba(0,0,0,.08);

    transition: .4s ease;

    z-index: 1;
}

.vision-card::before{

    content: "";

    position: absolute;

    left: 0;
    bottom: -100%;

    width: 100%;
    height: 100%;

    background: #ff4254;

    transition: .5s ease;

    z-index: -1;
}

.vision-card:hover::before{

    bottom: 0;
}

.vision-card:hover{

    transform: translateY(-10px);
}

.vision-logo{

    height: 100px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 25px;
}

.vision-logo img{

    width: 80px;

    transition: .4s;
}

.vision-card:hover .vision-logo img{

    transform: scale(1.1);
}

.vision-card h3{

    margin-bottom: 20px;

    transition: .4s;
}

.vision-card p{

    line-height: 1.8;

    transition: .4s;
}

.vision-card:hover h3,
.vision-card:hover p{

    color: #ffffff;
}

@media (max-width:768px){

    .vision-card{

        flex: 0 0 100%;
    }

}

/* ====================================
   SERVICES PAGE RESPONSIVE
==================================== */

@media (max-width:991px){

    .service-row{
        gap: 40px;
    }

}

@media (max-width:768px){

    .service-section{
        padding: 70px 0;
    }

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

    .alternate .service-image{
        order: 1;
    }

    .alternate .service-content{
        order: 2;
    }

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

    .service-content ul{
        display: inline-block;
        text-align: left;
    }

}

@media (max-width:576px){

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

    .service-label{
        font-size: 14px;
        padding: 8px 16px;
    }

}

/* ====================================
   CONTACT PAGE RESPONSIVE
==================================== */

@media (max-width:768px){

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

    .contact-map iframe{
        min-height: 400px;
    }

    .contact-info-box{
        padding: 30px;
    }

}

@media (max-width:576px){

    .contact-item{
        flex-direction: column;
        gap: 10px;
    }

    .contact-info-box{
        padding: 25px;
    }

}

/* ========================================
   WHATSAPP & BACK TO TOP BUTTON RESPONSIVE
======================================== */
@media (max-width:576px){

    .whatsapp-btn{

        width: 50px;
        height: 50px;

        font-size: 26px;

        left: 15px;
        bottom: 15px;
    }

    .back-to-top{

        width: 50px;
        height: 50px;

        right: 15px;
        bottom: 15px;
    }

}

/* =========================
   CLIENTS PAGE
========================= */

@media(max-width:768px){

    .client-card{
        width:100%;
    }

    .clients-banner{
        padding:100px 0;
    }

}