/* SERVICES HERO */

.about-hero{
    position:relative;

    height:420px;

    background:url('../assets/images/ca_2.png');

    background-size:cover;
    background-position:center;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;
}

/* SERVICES PAGE */

.services-section{
    padding:100px 0;

    background:#f8fafc;
}

/* GRID */

.services-grid{
    display:grid;

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

    gap:30px;
}

/* CARD */

.service-card{
    background:#fff;

    padding:45px 35px;

    border-radius:14px;

    text-align:center;

    transition:0.4s;

    box-shadow:0 5px 25px rgba(0,0,0,0.06);
}

.service-card:hover{
    transform:translateY(-10px);

    box-shadow:0 15px 35px rgba(0,0,0,0.12);
}

/* ICON */

.service-card i{
    font-size:48px;

    color:#f4a100;

    margin-bottom:22px;
}

/* TITLE */

.service-card h3{
    font-size:28px;

    color:#0b1f3a;

    margin-bottom:18px;
}

/* TEXT */

.service-card p{
    color:#666;

    line-height:32px;

    font-size:16px;
}

/* ANIMATION */

.reveal{
    opacity:0;

    transform:translateY(80px);

    transition:all 1s ease;
}

.reveal.active{
    opacity:1;

    transform:translateY(0);
}

/* RESPONSIVE */

@media(max-width:992px){

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

}
/* FOOTER */

.footer{
    background:#02163a;

    padding:90px 120px 30px;

    color:#fff;
}

.footer-grid{
    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:60px;
}

.footer h2{
    font-size:34px;

    margin-bottom:35px;

    font-weight:700;
}

.footer p,
.footer a{
    color:#d1d5db;

    font-size:18px;

    line-height:2;
}

.footer-links ul{
    list-style:none;
}

.footer-links a{
    text-decoration:none;

    transition:0.3s;
}

.footer-links a:hover{
    color:#f4a100;
}

.footer-contact i{
    color:#f4a100;

    margin-right:12px;
}

.footer-bottom{
    margin-top:70px;

    padding-top:30px;

    border-top:1px solid rgba(255,255,255,0.1);

    text-align:center;
}

.footer-bottom p{
    color:#9ca3af;
}

/* RESPONSIVE */

@media(max-width:992px){

    .footer{
        padding:80px 40px 30px;
    }

    .footer-grid{
        grid-template-columns:1fr;

        gap:40px;
    }

}
/* MOBILE RESPONSIVE */

@media(max-width:768px){

    .top-bar{
        padding:12px 20px;
    }

    .top-bar .container{
        flex-direction:column;
        gap:12px;
        align-items:flex-start;
    }

    .top-left,
    .top-right{
        flex-wrap:wrap;
        gap:12px;
    }

    .navbar{
        flex-direction:column;

        align-items:flex-start;

        padding:25px 20px;

        gap:25px;
    }

    .nav-links{
        flex-direction:column;

        width:100%;

        gap:25px;
    }

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

    .nav-links a{
        font-size:28px;
    }

    .logo h2{
        font-size:58px;
        line-height:70px;
    }

    .logo p{
        font-size:20px;
    }

    .nav-btn{
        width:100%;

        text-align:center;

        padding:18px;
    }

    .hero-content h1,
    .about-hero-content h1{
        font-size:48px !important;

        line-height:60px !important;
    }

    .hero-content p,
    .about-hero-content p{
        font-size:18px !important;

        line-height:32px !important;
    }

    .services-grid,
    .team-grid,
    .details-grid,
    .footer-grid{
        grid-template-columns:1fr !important;
    }

    .about-container,
    .why-section,
    .contact-grid{
        flex-direction:column;
        display:flex;
    }

    .enquiry-float{
        right:20px;
        bottom:110px;
    }

    .whatsapp-float{
        right:20px;
        bottom:30px;
    }

}
/* ================= MOBILE RESPONSIVE FIX ================= */
/* ===== MOBILE NAVBAR FIX ===== */

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

    .navbar{
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;

        padding:25px 20px !important;
    }

    .logo{
        width:100% !important;
        text-align:center !important;

        margin-bottom:20px !important;
    }

    .nav-links{
        width:100% !important;

        display:flex !important;
        flex-direction:column !important;

        align-items:center !important;
        justify-content:center !important;

        gap:20px !important;

        margin:0 !important;
        padding:0 !important;
    }

    .nav-links li{
        width:100% !important;

        display:flex !important;
        justify-content:center !important;
    }

    .nav-links a{
        font-size:28px !important;
        display:block !important;
        text-align:center !important;
    }

    .nav-btn{
        margin-top:25px !important;

        width:220px !important;

        display:flex !important;
        justify-content:center !important;
        align-items:center !important;

        font-size:24px !important;

        padding:18px 24px !important;
    }

    .logo h2{
        font-size:58px !important;
        line-height:68px !important;
    }

    .logo p{
        font-size:20px !important;
    }

}