/********** Template CSS **********/
:root {
    --primary: #FD5D14;
    --secondary: #FDBE33;
    --light: #F4F6F8;
    --dark: #040F28;
}

/********** TYPOGRAPHY **********/

/* Base font — Mulish for clean, airy body text */
body {
    font-family: 'Mulish', sans-serif;
    font-weight: 400;
    color: #3a3a3a;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

/* Override Bootstrap's text-uppercase — first letter of each word, not ALL CAPS */
.text-uppercase {
    text-transform: capitalize !important;
    letter-spacing: 0.02em;
}

/* Headings — Plus Jakarta Sans: modern, geometric, premium */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #1a1a2e;
}

/* Display headings — reduce extreme boldness */
.display-2 { font-weight: 600 !important; }
.display-4 { font-weight: 600 !important; }
.display-5 { font-weight: 600 !important; }
.display-6 { font-weight: 500 !important; }

/* Body copy */
p { font-weight: 400; }

/* Slightly softer bold labels */
.fw-bold { font-weight: 500 !important; }

/* Navbar brand logo text */
.navbar-brand h1 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
}

/* Brand logo image — sits on a white chip so the navy mark stays legible
   on the dark navy navbar / footer background. */
.navbar-brand {
    display: inline-flex;
    align-items: center;
    padding: 6px 0;
}
.navbar-brand .brand-logo {
    height: 58px;
    width: auto;
    display: block;
    background: #ffffff;
    padding: 8px 16px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.footer .navbar-brand .brand-logo {
    height: 66px;
    margin-bottom: 6px;
}
@media (max-width: 575.98px) {
    .navbar-brand .brand-logo {
        height: 44px;
        padding: 6px 12px;
    }
    .footer .navbar-brand .brand-logo {
        height: 56px;
    }
}

/* Navbar links */
.navbar-dark .navbar-nav .nav-link {
    font-family: 'Mulish', sans-serif;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none !important;
}

/* Button text — title case, not screaming caps */
.btn {
    text-transform: none !important;
    letter-spacing: 0.03em;
    font-weight: 500;
}

/* Section headings overrides */
h4.text-uppercase {
    font-weight: 500 !important;
}
h5.text-uppercase {
    font-weight: 500 !important;
}

/* Footer links */
.footer a {
    font-weight: 400;
}

/* Dropdown items */
.dropdown-item {
    text-transform: none !important;
    font-weight: 400;
}

.pt-6 {
    padding-top: 90px;
}

.pb-6 {
    padding-bottom: 90px;
}

.py-6 {
    padding-top: 90px;
    padding-bottom: 90px;
}

.btn {
    position: relative;
    font-weight: 600;
    text-transform: uppercase;
    transition: .5s;
}

.btn::after {
    position: absolute;
    content: "";
    width: 0;
    height: 5px;
    bottom: -1px;
    left: 50%;
    background: var(--primary);
    transition: .5s;
}

.btn.btn-primary::after {
    background: var(--dark);
}

.btn:hover::after,
.btn.active::after {
    width: 50%;
    left: 25%;
}

.btn-primary {
    color: #FFFFFF;
}

.btn-square {
    width: 36px;
    height: 36px;
}

.btn-sm-square {
    width: 28px;
    height: 28px;
}

.btn-lg-square {
    width: 46px;
    height: 46px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.back-to-top {
    position: fixed;
    display: none;
    left: 25px;
    bottom: 0;
    border-radius: 0;
    z-index: 99;
}

.bg-dark-radial {
    background-image: -webkit-repeating-radial-gradient(center center, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 100%);
    background-image: -moz-repeating-radial-gradient(center center, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 100%);
    background-image: -ms-repeating-radial-gradient(center center, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 100%);
    background-image: -o-repeating-radial-gradient(center center, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 100%);
    background-image: repeating-radial-gradient(center center, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 100%);
    background-size: 3px 3px;
}

.bg-light-radial {
    background-image: -webkit-repeating-radial-gradient(center center, rgba(256, 256, 256, 0.2), rgba(256, 256, 256, 0.2) 1px, transparent 1px, transparent 100%);
    background-image: -moz-repeating-radial-gradient(center center, rgba(256, 256, 256, 0.2), rgba(256, 256, 256, 0.2) 1px, transparent 1px, transparent 100%);
    background-image: -ms-repeating-radial-gradient(center center, rgba(256, 256, 256, 0.2), rgba(256, 256, 256, 0.2) 1px, transparent 1px, transparent 100%);
    background-image: -o-repeating-radial-gradient(center center, rgba(256, 256, 256, 0.2), rgba(256, 256, 256, 0.2) 1px, transparent 1px, transparent 100%);
    background-image: repeating-radial-gradient(center center, rgba(256, 256, 256, 0.2), rgba(256, 256, 256, 0.2) 1px, transparent 1px, transparent 100%);
    background-size: 3px 3px;
}

.navbar-dark .navbar-nav .nav-link {
    position: relative;
    padding: 35px 15px;
    font-size: 18px;
    text-transform: uppercase;
    color: var(--light);
    outline: none;
    transition: .5s;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--primary);
}

@media (max-width: 991.98px) {
    .navbar-dark .navbar-nav .nav-link  {
        margin-left: 0;
        padding: 10px 0;
    }
}

.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(4, 15, 40, .7);
    z-index: 1;
}

@media (max-width: 576px) {
    .carousel-caption h4 {
        font-size: 18px;
        font-weight: 500 !important;
    }

    .carousel-caption h1 {
        font-size: 30px;
        font-weight: 600 !important;
    }
}

.page-header {
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(4, 15, 40, .7), rgba(4, 15, 40, .7)), url(../img/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

.service-item .service-icon {
    margin-top: -50px;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
}

.service-item .service-icon i {
    transition: .2s;
}

.service-item:hover .service-icon i {
    font-size: 60px;
}

.portfolio-item {
    margin-bottom: 60px;
}

.portfolio-title {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 120px;
    padding: 0 30px;
    right: 30px;
    left: 30px;
    bottom: -60px;
    background: #FFFFFF;
    z-index: 3;
}

.portfolio-btn {
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    margin-left: -60px;
    font-size: 120px;
    line-height: 0;
    transition: .1s;
    transition-delay: .3s;
    z-index: 2;
    opacity: 0;
}

.portfolio-item:hover .portfolio-btn {
    opacity: 1;
}

.portfolio-box::before,
.portfolio-box::after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    transition: .5s;
    z-index: 1;
    background: rgba(4, 15, 40, .7);
}

.portfolio-box::before {
    left: 0;
}

.portfolio-box::after {
    right: 0;
}

.portfolio-item:hover .portfolio-box::before {
    left: 0;
    width: 50%;
}

.portfolio-item:hover .portfolio-box::after {
    right: 0;
    width: 50%;
}

@media (min-width: 992px) {
    .testimonial,
    .contact-form {
        margin-left: -90px;
    }
}

@media (min-width: 992px) {
    .footer::after {
        position: absolute;
        content: "";
        width: 1px;
        height: 100%;
        top: 0;
        left: 50%;
        background: var(--primary)
    }
}

.footer-shape::before {
    position: absolute;
    content: "";
    width: 80px;
    height: 100%;
    top: 0;
    left: -40px;
    background: var(--primary);
    transform: skew(40deg);
}

/********** RESPONSIVE OVERRIDES **********/

/* ── Shared section padding scale-down ── */
@media (max-width: 991.98px) {
    .py-6 { padding-top: 60px; padding-bottom: 60px; }
    .pt-6 { padding-top: 60px; }
    .pb-6 { padding-bottom: 60px; }
    .px-5 { padding-left: 20px !important; padding-right: 20px !important; }
}

@media (max-width: 575.98px) {
    .py-6 { padding-top: 40px; padding-bottom: 40px; }
    .pt-6 { padding-top: 40px; }
    .pb-6 { padding-bottom: 40px; }
    .px-5 { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ── Navbar brand ── */
@media (max-width: 575.98px) {
    .navbar-brand h1 {
        font-size: 1.4rem !important;
    }
    .navbar-brand h1 i {
        font-size: 1.2rem;
    }
}

/* ── Carousel ── */
.carousel-item img {
    min-height: 280px;
    object-fit: cover;
}

@media (max-width: 767.98px) {
    .carousel-caption h1 {
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        margin-bottom: 12px !important;
    }
    .carousel-caption .btn {
        padding: 8px 18px !important;
        font-size: 13px;
        margin-top: 8px !important;
    }
    .carousel-caption .ms-3 {
        margin-left: 8px !important;
    }
}

@media (max-width: 575.98px) {
    .carousel-caption h1 {
        font-size: 1.15rem !important;
    }
    .carousel-caption .ms-3 {
        margin-left: 0 !important;
        margin-top: 8px !important;
    }
    .carousel-caption div[style] {
        max-width: 100% !important;
    }
}

/* ── About section: image stacking ── */
@media (max-width: 991.98px) {
    .position-relative.bg-dark-radial.h-100.ms-5 {
        margin-left: 0 !important;
    }
    .col-lg-5.pb-5[style*="min-height"] {
        min-height: 260px !important;
    }
}

/* ── Values section ── */
@media (max-width: 575.98px) {
    .container-fluid.bg-dark .row.g-4 .col-lg-3 {
        margin-bottom: 4px;
    }
}

/* ── Service cards: equal heights ── */
.service-item {
    height: 100%;
}
.service-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

@media (max-width: 575.98px) {
    .service-item img { height: 160px; }
}

/* ── Portfolio / Sectors ── */
@media (max-width: 575.98px) {
    .portfolio-item {
        margin-bottom: 80px;
    }
    /* filter thumbnails: wrap on small screens */
    #portfolio-flters li {
        margin-bottom: 10px !important;
    }
}

/* ── Why Choose Us: cards ── */
@media (max-width: 575.98px) {
    .bg-light.p-4.h-100.d-flex.align-items-start {
        flex-direction: column;
    }
    .bg-light.p-4.h-100.d-flex.align-items-start i {
        margin-bottom: 8px;
    }
}

/* ── Recruitment Process: number cards ── */
@media (max-width: 575.98px) {
    .display-4.fw-bold.text-primary.mb-3 {
        font-size: 2rem !important;
    }
}

/* ── CTA dual columns ── */
@media (max-width: 767.98px) {
    #jobs .col-lg-6 .bg-primary,
    #jobs .col-lg-6 .bg-dark {
        margin-bottom: 20px;
    }
}

/* ── Appointment / Callback form ── */
@media (max-width: 575.98px) {
    .bg-light.text-center.p-5 {
        padding: 20px !important;
    }
}

/* ── Google Maps block ── */
@media (max-width: 991.98px) {
    .container-fluid.px-0 .row.g-0 .col-lg-8 iframe {
        height: 280px;
    }
    .container-fluid.px-0 .row.g-0 .col-lg-4.bg-dark {
        padding: 30px 20px !important;
    }
}

@media (max-width: 575.98px) {
    .container-fluid.px-0 .row.g-0 .col-lg-8 iframe {
        height: 220px;
    }
}

/* ── Footer ── */
@media (max-width: 991.98px) {
    .footer .col-lg-6.pe-lg-5 {
        padding-right: 0 !important;
    }
    .footer .col-lg-6.ps-lg-5 {
        padding-left: 0 !important;
    }
    .footer::after {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .footer .col-sm-6 {
        width: 100%;
    }
    .footer h1.display-4 {
        font-size: 1.6rem !important;
    }
}

/* ── Footer copyright bar ── */
@media (max-width: 575.98px) {
    .footer-shape::before {
        display: none;
    }
    .bg-primary.footer-shape {
        clip-path: none;
    }
}

/* ── WhatsApp floating button: adjust on mobile ── */
@media (max-width: 575.98px) {
    a[href*="wa.me"][style*="position: fixed"] {
        width: 48px !important;
        height: 48px !important;
        font-size: 22px !important;
        bottom: 75px !important;
        right: 15px !important;
    }
}

/* ── Back-to-top button: fixed to bottom-left ── */
@media (max-width: 575.98px) {
    .back-to-top {
        left: 15px;
    }
}

/* ── General image fluid safety ── */
img { max-width: 100%; height: auto; }

/* ── Heading scale down on mobile ── */
@media (max-width: 575.98px) {
    h1.display-5 { font-size: 1.5rem !important; }
    h1.display-2 { font-size: 1.4rem !important; }
    h2.display-6 { font-size: 1.3rem !important; }
    .display-4.fw-bold { font-size: 1.8rem !important; }
}

@media (max-width: 767.98px) {
    h1.display-5 { font-size: 1.75rem !important; }
    h1.display-2 { font-size: 1.8rem !important; }
}

/* ── Prevent horizontal overflow ── */
html, body {
    overflow-x: hidden;
}
*, *::before, *::after {
    box-sizing: border-box;
}

/********** SCROLL ANIMATIONS **********/

/*  IMPORTANT: content is VISIBLE by default.
    The entrance animations below are a progressive enhancement that only
    apply when (a) JavaScript is running — it adds `js-anim` to <html> —
    and (b) the user has not requested reduced motion. This guarantees every
    section is shown even if scripts fail, motion is reduced, transitions are
    disabled, or the page is printed. JS then adds `is-visible` on scroll to
    play the reveal. */

@media (prefers-reduced-motion: no-preference) {

    /* Initial hidden state (only once JS is active) */
    html.js-anim .animate-on-scroll {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.7s ease, transform 0.7s ease;
        will-change: opacity, transform;
    }

    html.js-anim .animate-on-scroll.from-left {
        transform: translateX(-50px);
    }

    html.js-anim .animate-on-scroll.from-right {
        transform: translateX(50px);
    }

    html.js-anim .animate-on-scroll.scale-in {
        transform: scale(0.88);
    }

    /* Triggered state */
    html.js-anim .animate-on-scroll.is-visible {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    /* Stagger delays for child elements */
    html.js-anim .stagger-children > *:nth-child(1)  { transition-delay: 0.05s; }
    html.js-anim .stagger-children > *:nth-child(2)  { transition-delay: 0.15s; }
    html.js-anim .stagger-children > *:nth-child(3)  { transition-delay: 0.25s; }
    html.js-anim .stagger-children > *:nth-child(4)  { transition-delay: 0.35s; }
    html.js-anim .stagger-children > *:nth-child(5)  { transition-delay: 0.45s; }
    html.js-anim .stagger-children > *:nth-child(6)  { transition-delay: 0.55s; }

    /* Stagger child hidden/visible state */
    html.js-anim .stagger-children > * {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
    html.js-anim .stagger-children.is-visible > * {
        opacity: 1;
        transform: translateY(0);
    }

    /* Page load: navbar slides down */
    html.js-anim .navbar-animate {
        animation: slideDown 0.6s ease forwards;
    }

    /* Hero section: fade in from centre */
    html.js-anim .hero-animate {
        animation: heroFade 1s ease forwards;
    }

    /* Slow fade-in for section headings */
    html.js-anim .heading-fade {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }
    html.js-anim .heading-fade.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Keyframes (safe to define globally) */
@keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

@keyframes heroFade {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: scale(1); }
}

/* Pulse glow for WhatsApp button */
@keyframes whatsappPulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
    70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (prefers-reduced-motion: no-preference) {
    a[href*="wa.me"][style*="position: fixed"] {
        animation: whatsappPulse 2.2s infinite;
    }
}

/* Counter number pop */
@keyframes countPop {
    0%   { transform: scale(0.6); opacity: 0; }
    70%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}
.number-pop {
    animation: countPop 0.6s ease forwards;
}