/* =========================================================
   THE PRIME GRACE
   CLEAN PROFESSIONAL WEBSITE CSS
   Duplicate Rules Removed
   Brand: Navy / Blue
========================================================= */


/* =========================================================
   1. BRAND COLOR SYSTEM
========================================================= */

:root {

    --navy: #011B3E;
    --blue: #003F7F;
    --accent: #0067B1;
    --blue-light: #1688D4;

    --light: #F4F8FC;
    --dark: #222B35;
    --gray: #667085;
    --white: #FFFFFF;

    /* Kept for old HTML/CSS references */
    --gold: #0067B1;

}


/* =========================================================
   2. GLOBAL SETTINGS
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Poppins", Arial, Helvetica, sans-serif;
    color: var(--dark);
    background: #EAF4FF;
    line-height: 1.7;
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

main > section {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   3. BUTTONS
========================================================= */

.btn,
.quote-btn,
.services-view-btn {
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background-color .3s ease,
        border-color .3s ease;
}

.btn {
    border-radius: 30px;
    font-weight: 600;
}

.btn:hover,
.quote-btn:hover,
.services-view-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(1, 27, 62, .18);
}

.btn-primary {
    background: var(--blue) !important;
    border-color: var(--blue) !important;
    color: var(--white) !important;
}

.btn-primary:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

.btn-warning {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--white) !important;
}

.btn-warning:hover {
    background: var(--blue) !important;
    border-color: var(--blue) !important;
    color: var(--white) !important;
}

.button-pressed {
    transform: scale(.96) !important;
}


/* =========================================================
   4. NAVBAR
========================================================= */

.custom-navbar {
    background: var(--navy) !important;
    padding: 6px 0 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .15);
    z-index: 1000;

    transition:
        padding .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.custom-navbar.navbar-scrolled {
    padding-top: 7px !important;
    padding-bottom: 7px !important;

    background: rgba(1, 27, 62, .97) !important;

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

.logo-img {
    width: 45px !important;
    height: 45px !important;
    object-fit: contain;
    border-radius: 10px;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        width .3s ease,
        height .3s ease;
}

.custom-navbar.navbar-scrolled .logo-img {
    width: 48px !important;
    height: 48px !important;
}

.logo-img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 103, 177, .25);
}

/* =========================================================
   LOGO TITLE + SUBTITLE
========================================================= */

.logo-title {
    margin-bottom: 0 !important;

    line-height: 1.5;

    color: var(--white);
}

.logo-subtitle {
    display: block;

    margin-top: -1px;

    line-height: 1;

    color: var(--accent);
}

.custom-navbar .navbar-nav {
    align-items: center;
    gap: 0 !important;
}

.custom-navbar .navbar-nav .nav-item {
    display: flex;
    align-items: center;
}

.navbar-nav .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;

    color: var(--white) !important;

    font-size: 13px !important;
    font-weight: 600;

    padding: 6px 7px !important;
    margin-left: 3px !important;

    transition: color .3s ease;

    white-space: nowrap;
}

.navbar-nav .nav-link:hover,
.navbar .nav-link.active {
    color: var(--blue-light) !important;
}

.navbar .nav-link.active::after {
    content: "";

    display: block;

    width: 100%;
    height: 3px;

    background: var(--blue-light);

    margin-top: 6px;

    border-radius: 10px;
}

.quote-btn {
    background: var(--accent) !important;
    color: var(--white) !important;

    padding: 6px 12px !important;

    margin-left: 6px !important;

    border-radius: 20px !important;

    font-size: 12px !important;
    font-weight: 700;
}

.quote-btn:hover {
    background: var(--blue-light) !important;
    color: var(--white) !important;
}

.quote-btn i {
    font-size: 11px !important;
}

.navbar-toggler {
    border: 1px solid rgba(255, 255, 255, .4) !important;
    padding: 6px 10px;
    box-shadow: none !important;
}

.navbar-toggler:focus {
    box-shadow: none !important;
}

.navbar-toggler-icon {
    filter: brightness(0) invert(1);
}/* =========================================================
   5. HOME HERO
   PREMIUM FULL-SCREEN BACKGROUND
========================================================= */

.hero {
    position: relative;

    width: 100%;

    min-height: 100vh;

    overflow: hidden;

    background-image:
        linear-gradient(
            rgba(8, 28, 50, 0.25),
            rgba(8, 28, 50, 0.32)
        ),
        url("../images/homepage.jpg");

    background-position:
        center center;

    background-size:
        cover;

    background-repeat:
        no-repeat;

    background-attachment:
        scroll;
}


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

.hero-overlay {
    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(7, 22, 42, 0.68) 0%,
            rgba(11, 31, 58, 0.42) 48%,
            rgba(11, 31, 58, 0.18) 100%
        );
}


/* =========================================================
   HERO MAIN TITLE
========================================================= */

.hero h1 {
    color:
        var(--blue-light) !important;

    font-size:
        clamp(38px, 5vw, 58px);

    line-height:
        1.15;

    font-weight:
        800;

    margin-bottom:
        20px;

    letter-spacing:
        .5px;

    text-shadow:
        0 4px 18px
        rgba(0, 0, 0, .25);
}


/* =========================================================
   HERO SUB TITLE
========================================================= */

.hero h4 {
    color:
        var(--white);

    font-size:
        clamp(22px, 3vw, 30px);

    line-height:
        1.4;

    font-weight:
        600;

    margin-bottom:
        15px;

    text-shadow:
        0 3px 12px
        rgba(0, 0, 0, .25);
}


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

.hero-overlay p {
    color:
        #F1F1F1;

    font-size:
        17px;

    line-height:
        1.8;

    max-width:
        680px;

    margin-bottom:
        0;

    text-shadow:
        0 2px 10px
        rgba(0, 0, 0, .20);
}


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

.hero .btn {
    font-weight:
        600;

    border-radius:
        8px;

    padding:
        12px 25px;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.hero .btn-warning {
    box-shadow:
        0 8px 25px
        rgba(0, 103, 177, .25);
}


.hero .btn-warning:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 12px 30px
        rgba(0, 103, 177, .35);
}


.hero .btn-outline-light:hover {
    transform:
        translateY(-3px);
}


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

.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero p,
.hero .btn {

    opacity:
        0;

    transform:
        translateY(35px);
}


/* =========================================================
   HERO VISIBLE - H1
========================================================= */

.hero-visible h1 {

    opacity:
        1;

    transform:
        translateY(0);

    transition:
        opacity .8s ease,
        transform .8s ease;
}


/* =========================================================
   HERO VISIBLE - H2
========================================================= */

.hero-visible h2 {

    opacity:
        1;

    transform:
        translateY(0);

    transition:
        opacity .8s ease .1s,
        transform .8s ease .1s;
}


/* =========================================================
   HERO VISIBLE - H3
========================================================= */

.hero-visible h3 {

    opacity:
        1;

    transform:
        translateY(0);

    transition:
        opacity .8s ease .15s,
        transform .8s ease .15s;
}


/* =========================================================
   HERO VISIBLE - H4
========================================================= */

.hero-visible h4 {

    opacity:
        1;

    transform:
        translateY(0);

    transition:
        opacity .8s ease .2s,
        transform .8s ease .2s;
}


/* =========================================================
   HERO VISIBLE - DESCRIPTION
========================================================= */

.hero-visible p {

    opacity:
        1;

    transform:
        translateY(0);

    transition:
        opacity .8s ease .3s,
        transform .8s ease .3s;
}


/* =========================================================
   HERO VISIBLE - BUTTONS
========================================================= */

.hero-visible .btn {

    opacity:
        1;

    transform:
        translateY(0);

    transition:
        opacity .8s ease .45s,
        transform .8s ease .45s;
}


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

@media (max-width: 991px) {

    .hero {

        min-height:
            85vh;

        background-position:
            center center;
    }


    .hero-overlay {

        min-height:
            85vh;
    }

}


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

@media (max-width: 767px) {

    .hero {

        min-height:
            720px;

        background-image:
            linear-gradient(
                rgba(8, 28, 50, 0.30),
                rgba(8, 28, 50, 0.38)
            ),
            url("../images/homepage.jpg");

        background-position:
            center center;

        background-size:
            cover;

        background-repeat:
            no-repeat;

        background-attachment:
            scroll;
    }


    .hero-overlay {

        min-height:
            720px;

        background:
            linear-gradient(
                180deg,
                rgba(7, 22, 42, 0.58) 0%,
                rgba(11, 31, 58, 0.38) 55%,
                rgba(11, 31, 58, 0.25) 100%
            );
    }


    .hero h1 {

        font-size:
            38px;

        line-height:
            1.15;
    }


    .hero h4 {

        font-size:
            23px;

        line-height:
            1.4;
    }


    .hero-overlay p {

        font-size:
            15px;

        line-height:
            1.7;
    }

}


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

@media (max-width: 480px) {

    .hero {

        min-height:
            650px;
    }


    .hero-overlay {

        min-height:
            650px;
    }


    .hero h1 {

        font-size:
            32px;
    }


    .hero h4 {

        font-size:
            21px;
    }


    .hero-overlay p {

        font-size:
            14px;
    }


    .hero .btn {

        padding:
            11px 20px;
    }

}
/* =========================================================
   7. COMPANY INTRO
========================================================= */

.company-intro {
    position: relative;

    background:
        linear-gradient(
            135deg,
            #203d5c 0%,
            #294d70 50%,
            #1d3855 100%
        );

    color:
        var(--white);

    padding:
        90px 0;

    overflow: hidden;
}


/* =========================================================
   COMPANY INTRO TITLE
========================================================= */

.company-intro h2 {
    color:
        var(--blue-light) !important;

    font-size:
        40px;

    line-height:
        1.25;

    font-weight:
        700;

    margin-bottom:
        25px;
}


/* =========================================================
   COMPANY INTRO TEXT
========================================================= */

.company-intro p {
    color:
        #DDD;

    font-size:
        17px;

    line-height:
        1.8;

    margin-bottom:
        18px;
}


/* =========================================================
   WHY CHOOSE US GRID / BOX
   IMAGE ONLY HERE
========================================================= */

.intro-box {
    position: relative;

    overflow: hidden;

    background-image:
        linear-gradient(
            rgba(8, 28, 50, 0.55),
            rgba(11, 31, 58, 0.68)
        ),
        url("../images/companyintopage.jpg");

    background-position:
        center center;

    background-size:
        cover;

    background-repeat:
        no-repeat;

    color:
        var(--white);

    padding:
        40px 35px;

    border:
        1px solid
        rgba(0, 103, 177, 0.45);

    border-left:
        4px solid
        var(--accent);

    border-radius:
        20px;

    box-shadow:
        0 20px 45px
        rgba(0, 0, 0, 0.30);
}


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

.intro-box h3 {
    position: relative;

    z-index: 2;

    color:
        var(--blue-light) !important;

    font-size:
        25px;

    font-weight:
        700;

    margin-bottom:
        25px;
}


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

.intro-box ul {
    position: relative;

    z-index: 2;

    padding:
        0;

    margin:
        0;
}


.intro-box li {
    position: relative;

    z-index: 2;

    list-style:
        none;

    color:
        var(--white);

    font-size:
        16px;

    margin:
        17px 0;

    padding-bottom:
        12px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.15);
}


.intro-box li:last-child {
    border-bottom:
        none;

    margin-bottom:
        0;
}


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

@media (max-width: 767px) {

    .company-intro {

        padding:
            65px 0;
    }


    .company-intro h2 {

        font-size:
            32px;
    }


    .company-intro p {

        font-size:
            15px;

        line-height:
            1.7;
    }


    .intro-box {

        padding:
            30px 24px;

        background-image:
            linear-gradient(
                rgba(8, 28, 50, 0.55),
                rgba(11, 31, 58, 0.68)
            ),
            url("../images/companyintopage.jpg");

        background-position:
            center center;

        background-size:
            cover;

        background-repeat:
            no-repeat;
    }


    .intro-box h3 {

        font-size:
            22px;
    }


    .intro-box li {

        font-size:
            14px;
    }

}


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

@media (max-width: 480px) {

    .company-intro {

        padding:
            55px 0;
    }


    .company-intro h2 {

        font-size:
            28px;
    }


    .company-intro p {

        font-size:
            14px;
    }

}
/* =========================================================
   8. STATISTICS
========================================================= */

.stats-section {
    position: relative;

    background:
        linear-gradient(
            rgba(7, 22, 42, .88),
            rgba(11, 31, 58, .90)
        ),
        url("../images/servicespage.jpeg")
        center center / cover
        no-repeat;

    padding: 90px 0;

    border-top: 2px solid var(--accent);
    border-bottom: 2px solid var(--blue);
}

.stat-card {
    position: relative;

    background: rgba(255, 255, 255, .97);

    padding: 38px 20px;

    text-align: center;

    border-radius: 18px;

    border: 1px solid rgba(0, 103, 177, .35);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .25);

    overflow: hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.stat-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--navy),
            var(--blue),
            var(--blue-light)
        );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform .6s ease;
}

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

    border-color: var(--accent);

    box-shadow:
        0 22px 45px rgba(0, 0, 0, .35);
}

.stat-card:hover::before {
    transform: scaleX(1);
}

.stat-card h2 {
    color: var(--accent) !important;

    font-size: 45px;
    line-height: 1;
    font-weight: 800;

    margin-bottom: 12px;
}

.stat-card p {
    color: var(--navy);

    font-size: 16px;
    font-weight: 600;

    margin: 0;
}


/* =========================================================
   9. SECTION TITLE
========================================================= */

.section-title {
    text-align: center;

    margin-bottom: 50px;
}

.section-title h2 {
    color: var(--navy);

    font-size: 42px;
    font-weight: 800;

    margin-bottom: 15px;
}

.section-title h2::after {
    content: "";

    display: block;

    width: 55px;
    height: 4px;

    margin: 14px auto 0;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            var(--navy),
            var(--blue-light)
        );

    transform: scaleX(0);

    transition: transform .7s ease;
}

.section-title.js-reveal-visible h2::after,
.section-title.js-visible h2::after {
    transform: scaleX(1);
}

.section-title p {
    color: #5F6F7F;

    font-size: 17px;
}
/* =========================================================
   10. HOME SERVICES
========================================================= */

.services-home {
    position: relative;

    background: #F8F9FA;

    padding: 100px 0;

    overflow: hidden;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.services-home .section-title {
    max-width: 780px;

    margin-left: auto;
    margin-right: auto;
}

.services-label {
    display: inline-block;

    color: var(--accent) !important;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 10px;
}

.services-home .section-title h2 {
    color: var(--navy);

    font-size: clamp(32px, 4vw, 46px);
    font-weight: 800;

    line-height: 1.2;

    margin-bottom: 15px;
}

.services-home .section-title p {
    color: #667085;

    font-size: 15px;

    line-height: 1.8;

    max-width: 700px;

    margin: 0 auto;
}


/* =========================================================
   SERVICE GRID CARD
========================================================= */

.service-grid-card {
    position: relative;

    background: var(--white);

    border-radius: 20px;

    overflow: hidden;

    height: 100%;

    min-height: 430px;

    border: 1px solid #E5E7EB;

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

    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1),
        box-shadow .45s ease,
        border-color .35s ease;
}


/* =========================================================
   CARD HOVER
========================================================= */

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

    border-color: var(--accent);

    box-shadow:
        0 22px 50px rgba(0, 0, 0, .14);
}


/* =========================================================
   SERVICE IMAGE
========================================================= */

.service-grid-card > img {
    display: block;

    width: 100%;
    height: 250px;

    object-fit: cover;

    transition:
        transform .7s cubic-bezier(.22, 1, .36, 1);
}

.service-grid-card:hover > img {
    transform: scale(1.08);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.service-grid-card::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 250px;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .02),
            rgba(0, 0, 0, .45)
        );

    pointer-events: none;

    transition:
        opacity .4s ease;
}

.service-grid-card:hover::after {
    opacity: .75;
}


/* =========================================================
   SERVICE CONTENT
========================================================= */

.service-grid-content {
    position: relative;

    z-index: 2;

    background: var(--white);

    padding: 28px 26px 30px;
}


/* =========================================================
   SERVICE NUMBER
========================================================= */

.service-grid-content > span {
    position: absolute;

    top: -24px;
    left: 24px;

    display: flex;

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

    width: 48px;
    height: 48px;

    background: var(--accent);

    color: var(--white);

    border-radius: 50%;

    font-size: 13px;
    font-weight: 800;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .18);

    transition:
        transform .4s ease;
}

.service-grid-card:hover
.service-grid-content > span {
    transform:
        rotate(8deg)
        scale(1.08);
}


/* =========================================================
   SERVICE TITLE
========================================================= */

.service-grid-content h3 {
    color: var(--navy);

    font-size: 21px;
    font-weight: 750;

    line-height: 1.4;

    margin-bottom: 12px;

    transition:
        color .3s ease;
}

.service-grid-card:hover
.service-grid-content h3 {
    color: var(--accent);
}


/* =========================================================
   SERVICE DESCRIPTION
========================================================= */

.service-grid-content p {
    color: #667085;

    font-size: 14px;

    line-height: 1.75;

    margin: 0;
}


/* =========================================================
   ACCENT LINE
========================================================= */

.service-grid-content::before {
    content: "";

    display: block;

    width: 42px;
    height: 3px;

    margin-bottom: 16px;

    border-radius: 10px;

    background: var(--accent);

    transition:
        width .4s ease;
}

.service-grid-card:hover
.service-grid-content::before {
    width: 70px;
}


/* =========================================================
   VIEW ALL SERVICES BUTTON
========================================================= */

.services-view-btn {
    display: inline-flex;

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

    min-width: 190px;

    padding: 13px 28px;

    border-radius: 10px;

    background: var(--accent) !important;

    color: var(--white) !important;

    border: none;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, .10);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.services-view-btn:hover {
    transform: translateY(-4px);

    box-shadow:
        0 14px 30px rgba(0, 0, 0, .16);
}

.services-view-btn i {
    transition:
        transform .3s ease;
}

.services-view-btn:hover i {
    transform: translateX(5px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

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

    .service-grid-card {
        min-height: 410px;
    }

    .service-grid-card > img {
        height: 230px;
    }

    .service-grid-card::after {
        height: 230px;
    }

}


@media (max-width: 767px) {

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

    .services-home .section-title h2 {
        font-size: 32px;
    }

    .services-home .section-title p {
        font-size: 14px;
    }

    .service-grid-card {
        min-height: auto;

        border-radius: 16px;
    }

    .service-grid-card > img {
        height: 220px;
    }

    .service-grid-card::after {
        height: 220px;
    }

    .service-grid-content {
        padding: 27px 22px 26px;
    }

    .service-grid-content h3 {
        font-size: 19px;
    }

    .service-grid-content p {
        font-size: 13px;
    }

}


@media (max-width: 480px) {

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

    .service-grid-card > img {
        height: 200px;
    }

    .service-grid-card::after {
        height: 200px;
    }

    .service-grid-content > span {
        width: 42px;
        height: 42px;

        top: -21px;
        left: 18px;

        font-size: 12px;
    }

    .services-view-btn {
        width: 100%;
        max-width: 260px;
    }

}

/* =========================================================
   13. CTA
========================================================= */

.cta-section,
.services-cta,
.about-cta {
    background: var(--navy);

    padding: 70px 30px;

    border-radius: 20px;

    color: var(--white);
}

.cta-section h2,
.services-cta h2,
.about-cta h2 {
    color: var(--blue-light);

    font-size: 40px;
    font-weight: 700;
}

.cta-section p,
.services-cta p,
.about-cta p {
    color: #DDD;
}
/* =========================================================
   14. ABOUT PAGE
========================================================= */

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

.about-hero {
    position: relative;

    min-height: 420px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #0B1F3A;

    padding: 90px 0;

    text-align: left;
}


/* =========================
   ABOUT HERO IMAGE
========================= */

.about-hero::after {
    content: "";

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background-image:
        linear-gradient(
            90deg,
            rgba(11, 31, 58, .70) 0%,
            rgba(11, 31, 58, .42) 35%,
            rgba(11, 31, 58, .18) 65%,
            rgba(11, 31, 58, .08) 100%
        ),
        url("../images/aboutpage.jpg");

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

    z-index: 0;
}


/* =========================
   ABOUT HERO CONTENT
========================= */

.about-hero .container {
    position: relative;

    z-index: 2;

    width: 100%;
}


.about-hero h1 {
    position: relative;

    color: #ffffff !important;

    font-size: clamp(42px, 5vw, 60px);
    font-weight: 800;

    line-height: 1.1;

    margin-bottom: 18px;

    text-shadow:
        0 3px 12px rgba(0, 0, 0, .60);
}


.about-hero p {
    position: relative;

    max-width: 650px;

    color: #ffffff !important;

    font-size: 18px;
    line-height: 1.7;

    margin: 0;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, .60);
}


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

.about-story {
    background: #ffffff;

    padding: 90px 0;

    border-top: 3px solid var(--blue);

    border-bottom: 3px solid var(--accent);
}


.about-story h2 {
    color: var(--navy);

    font-size: 42px;
    font-weight: 800;

    margin-bottom: 20px;
}


.about-story p {
    color: #555;

    font-size: 18px;
    line-height: 1.8;
}


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

.about-box {
    background: #EAF4FB;

    color: var(--dark);

    padding: 40px;

    border-radius: 20px;

    border: 2px solid var(--blue);

    box-shadow:
        0 12px 30px rgba(11, 31, 58, .10);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.about-box:hover {
    transform: translateY(-5px);

    border-color: var(--accent);

    box-shadow:
        0 18px 40px rgba(11, 31, 58, .14);
}


.about-box h3 {
    color: var(--navy);

    font-size: 30px;
    font-weight: 800;

    margin-bottom: 20px;
}


/* =========================
   MISSION SECTION
========================= */

.mission-section {
    background: #F5F7FA;

    padding: 90px 0;

    border-top:
        1px solid #DCE8F2;
}


.mission-card {
    background: #EAF4FB;

    padding: 40px;

    border-radius: 20px;

    height: 100%;

    border: 2px solid var(--blue);

    box-shadow:
        0 10px 30px rgba(11, 31, 58, .10);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.mission-card:hover {
    transform: translateY(-8px);

    border-color: var(--accent);

    box-shadow:
        0 18px 40px rgba(11, 31, 58, .14);
}


.mission-card h3 {
    color: var(--navy);

    font-size: 30px;
    font-weight: 800;

    margin-bottom: 15px;
}


/* =========================================================
   ABOUT HERO RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .about-hero {
        min-height: 380px;

        padding: 80px 0;

        text-align: center;
    }

    .about-hero::after {
        width: 100%;
        height: 100%;

        background-image:
            linear-gradient(
                rgba(11, 31, 58, .52),
                rgba(11, 31, 58, .52)
            ),
            url("../images/aboutpage.jpg");

        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .about-hero p {
        margin: 0 auto;
    }
}


@media (max-width: 576px) {

    .about-hero {
        min-height: 350px;

        padding: 70px 20px;
    }

    .about-hero::after {
        width: 100%;
        height: 100%;

        background-image:
            linear-gradient(
                rgba(11, 31, 58, .58),
                rgba(11, 31, 58, .58)
            ),
            url("../images/aboutpage.jpg");

        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

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

    .about-hero p {
        font-size: 15px;
        line-height: 1.6;
    }
}/* =========================================================
   15. SERVICES PAGE
========================================================= */

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

.services-page-hero {
    position: relative;

    min-height: 420px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--navy);

    padding: 90px 20px;

    text-align: left;

    color: var(--white);
}


/* =========================================================
   SERVICES HERO IMAGE
   RIGHT SIDE — PARTIAL IMAGE
========================================================= */

.services-page-hero::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 55%;
    height: 100%;

    background-image:
        linear-gradient(
            90deg,
            var(--navy) 0%,
            rgba(11, 31, 58, .88) 18%,
            rgba(11, 31, 58, .35) 55%,
            rgba(11, 31, 58, .05) 100%
        ),
        url("../images/servicespage.jpeg");

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

    z-index: 0;
}


/* =========================================================
   SERVICES HERO CONTENT
========================================================= */

.services-page-hero .container {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 850px;

    margin-left: 0;
}


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

.services-page-label {
    display: inline-block;

    color: #ffffff !important;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 12px;

    text-transform: uppercase;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, .35);
}


/* =========================================================
   SERVICES HERO TITLE
========================================================= */

.services-page-hero h1 {
    color: #ffffff !important;

    font-size: clamp(42px, 5vw, 60px);

    font-weight: 800;

    line-height: 1.1;

    margin-bottom: 18px;

    text-shadow:
        0 3px 12px rgba(0, 0, 0, .40);
}


/* =========================================================
   SERVICES HERO DESCRIPTION
========================================================= */

.services-page-hero p {
    max-width: 700px;

    margin: 0;

    color: #ffffff !important;

    font-size: 17px;

    line-height: 1.7;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, .40);
}


/* =========================================================
   SERVICES PAGE SECTION
========================================================= */

.services-page-section {
    background: #ffffff;

    padding: 90px 0;
}


/* =========================================================
   SERVICE PAGE CARD
========================================================= */

.service-page-card {
    background: var(--white);

    height: 100%;

    border-radius: 20px;

    overflow: hidden;

    border: 1px solid #E5E5E5;

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

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


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

    border-color: var(--accent);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, .15);
}


/* =========================================================
   SERVICE PAGE IMAGE
========================================================= */

.service-page-image {
    position: relative;

    width: 100%;
    height: 260px;

    overflow: hidden;
}


.service-page-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform .5s ease;
}


.service-page-card:hover .service-page-image img {
    transform: scale(1.07);
}


/* =========================================================
   SERVICE NUMBER
========================================================= */

.service-page-number {
    position: absolute;

    left: 20px;
    bottom: 20px;

    width: 48px;
    height: 48px;

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

    background: var(--accent);

    color: var(--white);

    border-radius: 50%;

    font-size: 14px;
    font-weight: 800;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, .25);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.service-page-card:hover .service-page-number {
    transform:
        scale(1.08)
        rotate(4deg);

    box-shadow:
        0 8px 18px rgba(0, 103, 177, .25);
}


/* =========================================================
   SERVICE CONTENT
========================================================= */

.service-page-content {
    padding: 28px;
}


.service-page-content h3 {
    color: var(--navy);

    font-size: 22px;

    font-weight: 700;

    line-height: 1.4;

    margin-bottom: 14px;
}


.service-page-content p {
    color: #666;

    font-size: 15px;

    line-height: 1.7;

    margin-bottom: 20px;
}


.service-page-content ul {
    list-style: none;

    padding: 0;
    margin: 0;
}


.service-page-content li {
    color: #444;

    font-size: 14px;

    margin-bottom: 10px;

    display: flex;

    align-items: center;
}


.service-page-content li i {
    color: var(--accent);

    margin-right: 9px;

    font-size: 15px;
}


/* =========================================================
   SERVICES HERO RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .services-page-hero {
        min-height: 380px;

        text-align: center;
    }

    .services-page-hero::after {
        width: 65%;

        background-image:
            linear-gradient(
                90deg,
                var(--navy) 0%,
                rgba(11, 31, 58, .82) 30%,
                rgba(11, 31, 58, .25) 75%,
                rgba(11, 31, 58, .05) 100%
            ),
            url("../images/servicespage.jpeg");

        background-size: cover;

        background-position: center;
    }

    .services-page-hero .container {
        margin: auto;
    }

    .services-page-hero p {
        margin: 0 auto;
    }
}


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

@media (max-width: 576px) {

    .services-page-hero {
        min-height: 350px;

        padding: 70px 20px;
    }

    .services-page-hero::after {
        width: 100%;

        background-image:
            linear-gradient(
                rgba(11, 31, 58, .84),
                rgba(11, 31, 58, .84)
            ),
            url("../images/servicespage.jpeg");

        background-size: cover;

        background-position: center;
    }

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

    .services-page-hero p {
        font-size: 15px;

        line-height: 1.6;
    }

    .services-page-label {
        font-size: 11px;

        letter-spacing: 2px;
    }
}/* =========================================================
   16. FLEET PAGE
   PREMIUM FULL BACKGROUND FLEET SLIDER
========================================================= */


/* =========================================================
   FLEET MAIN PAGE
========================================================= */

.fleet-page {
    position: relative;

    min-height: 100vh;

    padding: 95px 0 100px;

    overflow: hidden;

    background-image:
        linear-gradient(
            rgba(7, 27, 50, 0.42),
            rgba(7, 27, 50, 0.52)
        ),
        url("../images/fleetpage2.jfif");

    background-position: center center;

    background-size: cover;

    background-repeat: no-repeat;

    background-attachment: fixed;
}


/* =========================================================
   BACKGROUND OVERLAY
========================================================= */

.fleet-page-overlay {
    position: absolute;

    inset: 0;

    z-index: 0;

    background:
        rgba(5, 25, 48, 0.03);

    pointer-events: none;
}


/* =========================================================
   DECORATIVE LIGHT
========================================================= */

.fleet-page::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -220px;
    right: -180px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.035);

    filter: blur(10px);

    pointer-events: none;

    z-index: 0;
}


.fleet-page::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    bottom: -200px;
    left: -180px;

    border-radius: 50%;

    background:
        rgba(0, 103, 177, 0.08);

    filter: blur(15px);

    pointer-events: none;

    z-index: 0;
}


/* =========================================================
   FLEET CONTAINER
========================================================= */

.fleet-page-container {
    position: relative;

    z-index: 2;
}


/* =========================================================
   FLEET HEADING
========================================================= */

.fleet-page-heading {
    position: relative;

    z-index: 3;

    max-width: 850px;

    margin: 0 auto 55px;

    text-align: center;
}


/* =========================================================
   FLEET LABEL
========================================================= */

.fleet-page-heading .fleet-label {
    display: inline-block;

    margin-bottom: 13px;

    color:
        var(--blue-light);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


/* =========================================================
   FLEET TITLE
========================================================= */

.fleet-page-heading h1 {
    margin: 0 0 17px;

    color:
        var(--white);

    font-size:
        clamp(38px, 5vw, 58px);

    font-weight: 800;

    line-height: 1.1;
}


/* =========================================================
   FLEET DESCRIPTION
========================================================= */

.fleet-page-heading p {
    max-width: 720px;

    margin: 0 auto;

    color:
        rgba(255, 255, 255, 0.88);

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   SLIDER CONTAINER
========================================================= */

.fleet-slider-container {
    position: relative;

    z-index: 3;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 22px;
}


/* =========================================================
   SLIDER WINDOW
========================================================= */

.fleet-slider-window {
    position: relative;

    width: 100%;

    max-width: 1080px;

    overflow: hidden;

    border-radius: 22px;
}


/* =========================================================
   SLIDER TRACK
========================================================= */

.fleet-slider-track {
    display: flex;

    width: 100%;

    transition:
        transform 0.65s
        cubic-bezier(.2, .8, .2, 1);
}


/* =========================================================
   SLIDE
========================================================= */

.fleet-slide {
    flex: 0 0 100%;

    width: 100%;

    min-width: 100%;

    padding: 5px;
}


/* =========================================================
   FLEET CARD
========================================================= */

.fleet-slide-card {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    width: 100%;

    min-height: 500px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.97);

    border:
        1px solid
        rgba(255, 255, 255, 0.55);

    border-radius: 20px;

    box-shadow:
        0 20px 55px
        rgba(0, 0, 0, 0.25);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


/* =========================================================
   FLEET IMAGE
========================================================= */

.fleet-slide-image {
    position: relative;

    min-height: 500px;

    overflow: hidden;

    background:
        #dce8f2;
}


.fleet-slide-image img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center center;

    image-rendering: auto;

    transition:
        transform .7s
        cubic-bezier(.2, .7, .2, 1),
        filter .5s ease;
}


/* =========================================================
   IMAGE HOVER
========================================================= */

.fleet-slide-card:hover
.fleet-slide-image img {

    transform:
        scale(1.04);

    filter:
        brightness(.96);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.fleet-slide-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(8, 28, 50, 0.30),
            transparent 52%
        );

    pointer-events: none;
}


/* =========================================================
   FLEET NUMBER
========================================================= */

.fleet-number {
    position: absolute;

    top: 20px;

    right: 20px;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background:
        var(--accent);

    color:
        var(--white);

    font-size: 14px;

    font-weight: 800;

    box-shadow:
        0 8px 22px
        rgba(0, 0, 0, 0.25);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.fleet-slide-card:hover
.fleet-number {

    transform:
        rotate(8deg)
        scale(1.08);

    box-shadow:
        0 12px 28px
        rgba(0, 0, 0, 0.30);
}


/* =========================================================
   FLEET CONTENT
========================================================= */

.fleet-slide-content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 48px 45px;

    background:
        rgba(255, 255, 255, 0.98);
}


/* =========================================================
   CATEGORY
========================================================= */

.fleet-slide-category {
    display: inline-block;

    margin-bottom: 13px;

    color:
        var(--accent);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


/* =========================================================
   TITLE
========================================================= */

.fleet-slide-content h2 {
    margin: 0 0 17px;

    color:
        var(--navy);

    font-size: 28px;

    font-weight: 800;

    line-height: 1.3;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.fleet-slide-content p {
    margin: 0 0 23px;

    color:
        #526273;

    font-size: 14.5px;

    line-height: 1.8;
}


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

.fleet-slide-content ul {
    margin: 0;

    padding: 0;

    list-style: none;
}


.fleet-slide-content li {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 11px;

    color:
        #33475b;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.55;
}


.fleet-slide-content li:last-child {
    margin-bottom: 0;
}


.fleet-slide-content li i {
    flex-shrink: 0;

    margin-top: 3px;

    color:
        var(--accent);

    font-size: 14px;
}


/* =========================================================
   SLIDER ARROWS
========================================================= */

.fleet-slider-arrow {
    position: relative;

    z-index: 5;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    padding: 0;

    border:
        1px solid
        rgba(255, 255, 255, 0.35);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.12);

    color:
        var(--white);

    font-size: 19px;

    cursor: pointer;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.fleet-slider-arrow:hover {

    transform:
        translateY(-3px);

    background:
        var(--accent);

    border-color:
        var(--accent);

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


.fleet-slider-arrow:active {

    transform:
        translateY(0)
        scale(.96);
}


/* =========================================================
   SLIDER DOTS
========================================================= */

.fleet-slider-dots {
    position: relative;

    z-index: 3;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    margin-top: 28px;
}


.fleet-slider-dots button {
    width: 9px;

    height: 9px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.38);

    cursor: pointer;

    transition:
        width .3s ease,
        background .3s ease,
        transform .3s ease;
}


.fleet-slider-dots button:hover {

    transform:
        scale(1.15);

    background:
        rgba(255, 255, 255, 0.70);
}


.fleet-slider-dots button.active {

    width: 28px;

    border-radius: 20px;

    background:
        var(--accent);
}


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

.fleet-page .services-cta {
    position: relative;

    z-index: 3;

    margin-top:
        60px !important;

    padding:
        42px 30px;

    background:
        linear-gradient(
            135deg,
            rgba(5, 25, 45, .94),
            rgba(24, 61, 99, .94)
        );

    border:
        1px solid
        rgba(255, 255, 255, .14);

    border-radius: 18px;

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, .22);

    overflow: hidden;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


.fleet-page .services-cta::before {
    content: "";

    position: absolute;

    width: 230px;

    height: 230px;

    top: -130px;

    right: -80px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .06);

    pointer-events: none;
}


.fleet-page .services-cta h2 {
    position: relative;

    margin-bottom: 0;

    color:
        var(--white);

    font-size: 30px;

    font-weight: 700;
}


.fleet-page .services-cta p {
    position: relative;

    color:
        rgba(255, 255, 255, .80);

    font-size: 16px;

    line-height: 1.7;
}


.fleet-page .services-cta .btn {
    position: relative;

    margin-top: 15px;

    padding:
        12px 28px;

    border-radius: 8px;

    font-weight: 600;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.fleet-page .services-cta .btn:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 25px
        rgba(0, 0, 0, .20);
}


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

@media (max-width: 1199px) {

    .fleet-page {

        padding:
            85px 0 90px;
    }


    .fleet-slider-container {

        gap: 15px;
    }


    .fleet-slider-window {

        max-width: 920px;
    }


    .fleet-slide-content {

        padding:
            40px 35px;
    }


    .fleet-slide-content h2 {

        font-size: 25px;
    }

}


/* =========================================================
   TABLET / SMALL SCREEN
========================================================= */

@media (max-width: 991px) {

    .fleet-page {

        padding:
            75px 0 85px;

        background-attachment:
            scroll;
    }


    .fleet-page-heading {

        margin-bottom: 40px;
    }


    .fleet-page-heading h1 {

        font-size: 44px;
    }


    .fleet-slider-arrow {

        width: 44px;

        height: 44px;

        font-size: 17px;
    }


    .fleet-slide-card {

        grid-template-columns:
            1fr 1fr;

        min-height: 470px;
    }


    .fleet-slide-image {

        min-height: 470px;
    }


    .fleet-slide-content {

        padding:
            32px 27px;
    }


    .fleet-slide-content h2 {

        font-size: 23px;
    }


    .fleet-slide-content p {

        font-size: 14px;
    }


    .fleet-slide-content li {

        font-size: 13px;
    }

}


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

@media (max-width: 767px) {

    .fleet-page {

        padding:
            65px 0 75px;

        background-image:
            linear-gradient(
                rgba(7, 27, 50, 0.50),
                rgba(7, 27, 50, 0.60)
            ),
            url("../images/fleetpage2.jfif");

        background-position:
            center center;

        background-size:
            cover;

        background-repeat:
            no-repeat;

        background-attachment:
            scroll;
    }


    .fleet-page-heading {

        margin-bottom: 35px;
    }


    .fleet-page-heading .fleet-label {

        font-size: 11px;

        letter-spacing: 2px;
    }


    .fleet-page-heading h1 {

        font-size: 36px;

        margin-bottom: 14px;
    }


    .fleet-page-heading p {

        font-size: 14px;

        line-height: 1.7;

        padding:
            0 8px;
    }


    .fleet-slider-container {

        gap: 0;

        display: block;
    }


    .fleet-slider-window {

        width: 100%;

        max-width: 100%;

        border-radius: 18px;
    }


    .fleet-slide {

        padding: 0;
    }


    .fleet-slide-card {

        grid-template-columns:
            1fr;

        min-height: auto;

        border-radius: 18px;
    }


    .fleet-slide-image {

        width: 100%;

        height: 250px;

        min-height: 250px;
    }


    .fleet-slide-content {

        padding:
            28px 24px 30px;
    }


    .fleet-slide-content h2 {

        font-size: 23px;
    }


    .fleet-slide-content p {

        font-size: 14px;

        line-height: 1.7;
    }


    .fleet-slide-content li {

        font-size: 13.5px;

        margin-bottom: 10px;
    }


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

    .fleet-slider-arrow {

        position: absolute;

        top: 125px;

        z-index: 10;

        width: 42px;

        height: 42px;

        background:
            rgba(8, 28, 50, .70);

        border-color:
            rgba(255, 255, 255, .30);
    }


    .fleet-slider-prev {

        left: 12px;
    }


    .fleet-slider-next {

        right: 12px;
    }


    .fleet-slider-dots {

        margin-top: 22px;
    }


    .fleet-page .services-cta {

        margin-top:
            45px !important;

        padding:
            35px 20px;
    }


    .fleet-page .services-cta h2 {

        font-size: 25px;
    }


    .fleet-page .services-cta p {

        font-size: 14px;
    }

}


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

@media (max-width: 480px) {

    .fleet-page {

        padding:
            55px 0 65px;
    }


    .fleet-page-heading h1 {

        font-size: 32px;
    }


    .fleet-page-heading p {

        font-size: 13.5px;
    }


    .fleet-slide-image {

        height: 220px;

        min-height: 220px;
    }


    .fleet-slide-content {

        padding:
            24px 20px 26px;
    }


    .fleet-slide-category {

        font-size: 10px;

        letter-spacing: 1.5px;
    }


    .fleet-slide-content h2 {

        font-size: 21px;
    }


    .fleet-slide-content p {

        font-size: 13.5px;
    }


    .fleet-slide-content li {

        font-size: 13px;
    }


    .fleet-number {

        width: 42px;

        height: 42px;

        top: 13px;

        right: 13px;

        font-size: 12px;
    }


    .fleet-slider-arrow {

        top: 109px;

        width: 38px;

        height: 38px;

        font-size: 15px;
    }


    .fleet-page .services-cta {

        padding:
            30px 18px;
    }


    .fleet-page .services-cta h2 {

        font-size: 23px;
    }

}


/* =========================================================
   AOS SAFETY
========================================================= */

[data-aos] {
    pointer-events: auto;
}


/* =========================================================
   FINAL FLEET BACKGROUND
   fleetpage2.jfif
========================================================= */

section.fleet-page {

    position: relative !important;

    min-height: 100vh !important;

    overflow: hidden !important;

    background-image:
        linear-gradient(
            rgba(7, 27, 50, 0.42),
            rgba(7, 27, 50, 0.52)
        ),
        url("../images/fleetpage2.jfif") !important;

    background-position:
        center center !important;

    background-size:
        cover !important;

    background-repeat:
        no-repeat !important;

    background-attachment:
        scroll !important;
}


/* =========================================================
   FINAL OVERLAY
========================================================= */

section.fleet-page .fleet-page-overlay {

    position: absolute !important;

    inset: 0 !important;

    background:
        rgba(5, 25, 48, 0.02) !important;

    z-index: 0 !important;

    pointer-events: none !important;
}


/* =========================================================
   CONTENT ABOVE BACKGROUND
========================================================= */

section.fleet-page .fleet-page-container {

    position: relative !important;

    z-index: 2 !important;
}


section.fleet-page .fleet-page-heading {

    position: relative !important;

    z-index: 3 !important;
}


section.fleet-page .fleet-slider-container {

    position: relative !important;

    z-index: 3 !important;
}


section.fleet-page .fleet-slider-dots {

    position: relative !important;

    z-index: 3 !important;
}


section.fleet-page .services-cta {

    position: relative !important;

    z-index: 3 !important;
}


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

@media (max-width: 767px) {

    section.fleet-page {

        padding:
            65px 0 55px !important;

        background-image:
            linear-gradient(
                rgba(7, 27, 50, 0.50),
                rgba(7, 27, 50, 0.60)
            ),
            url("../images/fleetpage2.jfif") !important;

        background-position:
            center center !important;

        background-size:
            cover !important;

        background-repeat:
            no-repeat !important;

        background-attachment:
            scroll !important;
    }

}

/* =========================================================
   17. CONTACT
   PREMIUM CONTACT HERO
========================================================= */

.contact-hero {
    position: relative;

    min-height: 420px;

    height: 420px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: var(--white);

    overflow: hidden;

    background-image:
        linear-gradient(
            rgba(8, 28, 50, 0.30),
            rgba(8, 28, 50, 0.40)
        ),
        url("../images/contectuspage.jpg");

    background-position: center center;

    background-size: cover;

    background-repeat: no-repeat;

    background-attachment: scroll;
}


/* =========================================================
   CONTACT TITLE
========================================================= */

.contact-hero h1 {
    position: relative;

    z-index: 2;

    margin: 0;

    color: var(--white);

    font-size:
        clamp(38px, 5vw, 52px);

    font-weight: 800;

    line-height: 1.15;

    text-shadow:
        0 4px 18px
        rgba(0, 0, 0, 0.35);
}


/* =========================================================
   SUBTLE IMAGE EFFECT
========================================================= */

.contact-hero::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.03),
            transparent 50%,
            rgba(0, 0, 0, 0.06)
        );

    pointer-events: none;

    z-index: 1;
}


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

@media (max-width: 768px) {

    .contact-hero {

        min-height: 320px;

        height: 320px;

        background-image:
            linear-gradient(
                rgba(8, 28, 50, 0.35),
                rgba(8, 28, 50, 0.45)
            ),
            url("../images/contectuspage.jpg");

        background-position: center center;

        background-size: cover;

        background-repeat: no-repeat;

        background-attachment: scroll;
    }


    .contact-hero h1 {

        font-size: 36px;

        padding: 0 20px;
    }

}


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

@media (max-width: 480px) {

    .contact-hero {

        min-height: 280px;

        height: 280px;

        background-position: center center;
    }


    .contact-hero h1 {

        font-size: 31px;
    }

}
/* =========================================================
   18. TESTIMONIALS - PREMIUM COMPANY DESIGN
========================================================= */


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

.about-hero {
    position: relative;

    min-height: 420px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--navy);

    padding: 90px 0;

    text-align: center;
}


/* =========================================================
   HERO IMAGE - RIGHT SIDE ONLY
========================================================= */

.about-hero::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 45%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--navy) 0%,
            rgba(11, 31, 58, .55) 35%,
            rgba(11, 31, 58, .08) 100%
        ),
        url("../images/testonimial.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    z-index: 0;
}


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

.about-hero .container {
    position: relative;

    z-index: 2;
}


.about-hero h1 {
    color: #ffffff !important;

    font-size: clamp(42px, 5vw, 60px);

    font-weight: 800;

    line-height: 1.1;

    margin-bottom: 18px;

    text-shadow:
        0 3px 12px rgba(0, 0, 0, .35);
}


.about-hero p {
    max-width: 760px;

    margin: 0 auto;

    color: #ffffff !important;

    font-size: 18px;

    line-height: 1.7;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, .35);
}


/* =========================================================
   TESTIMONIAL MAIN SECTION
   IMAGE ONLY ON RIGHT SIDE
========================================================= */

.testimonials-section {
    position: relative;

    overflow: hidden;

    min-height: 550px;

    padding-top: 90px !important;

    padding-bottom: 90px !important;

    background: var(--navy);

    isolation: isolate;
}


/* =========================================================
   RIGHT SIDE TESTIMONIAL IMAGE
========================================================= */

.testimonials-section::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 45%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--navy) 0%,
            rgba(11, 31, 58, .55) 30%,
            rgba(11, 31, 58, .12) 100%
        ),
        url("../images/testonimial.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    z-index: -1;
}


/* =========================================================
   CONTENT ABOVE BACKGROUND
========================================================= */

.testimonials-section .container {
    position: relative;

    z-index: 2;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.testimonials-section .section-title {
    position: relative;

    z-index: 2;

    margin-bottom: 45px !important;
}


.testimonials-section .section-badge {
    display: inline-block;

    padding: 8px 18px;

    margin-bottom: 14px;

    border-radius: 50px;

    background:
        rgba(255, 255, 255, .10);

    border:
        1px solid rgba(255, 255, 255, .18);

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.testimonials-section .section-title h2 {
    margin-bottom: 15px;

    color: #ffffff;

    font-size: clamp(32px, 4vw, 46px);

    font-weight: 800;
}


.testimonials-section .section-title p {
    max-width: 800px;

    margin-left: auto;

    margin-right: auto;

    color:
        rgba(255, 255, 255, .80);

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   SLIDER WRAPPER
========================================================= */

.testimonial-slider-wrapper {
    position: relative;

    display: flex;

    align-items: center;

    gap: 25px;

    width: 100%;
}


/* =========================================================
   SLIDER
========================================================= */

.testimonial-slider {
    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 24px;
}


.testimonial-track {
    display: flex;

    width: 100%;

    transition:
        transform .65s cubic-bezier(.77, 0, .18, 1);

    will-change: transform;
}


/* =========================================================
   SINGLE SLIDE
========================================================= */

.testimonial-slide {
    flex: 0 0 100%;

    width: 100%;

    padding: 10px 5px;
}


/* =========================================================
   PREMIUM TESTIMONIAL CARD
========================================================= */

.premium-testimonial {
    position: relative;

    max-width: 850px;

    min-height: 310px;

    margin: 0 auto;

    padding: 42px 50px;

    background:
        rgba(255, 255, 255, .98);

    border:
        1px solid rgba(255, 255, 255, .40);

    border-radius: 24px;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .28);

    overflow: hidden;

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}


/* TOP ACCENT LINE */

.premium-testimonial::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--navy),
            var(--accent)
        );
}


.premium-testimonial:hover {
    transform: translateY(-6px);

    box-shadow:
        0 30px 70px rgba(0, 0, 0, .34);
}


/* =========================================================
   CARD TOP
========================================================= */

.testimonial-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 25px;
}


/* =========================================================
   QUOTE ICON
========================================================= */

.quote-icon {
    width: 55px;
    height: 55px;

    display: flex;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--navy),
            var(--accent)
        );

    color: #ffffff;

    font-size: 27px;

    box-shadow:
        0 8px 20px rgba(0, 103, 177, .25);
}


/* =========================================================
   STARS
========================================================= */

.premium-testimonial .stars {
    color: var(--accent);

    font-size: 18px;

    letter-spacing: 3px;
}


/* =========================================================
   TESTIMONIAL TEXT
========================================================= */

.testimonial-text {
    margin-bottom: 30px;

    color: #4B5563;

    font-size: 17px;

    line-height: 1.9;
}


/* =========================================================
   AUTHOR
========================================================= */

.testimonial-author {
    display: flex;

    align-items: center;

    gap: 15px;

    padding-top: 22px;

    border-top:
        1px solid rgba(1, 27, 62, .10);
}


.author-icon {
    min-width: 50px;

    width: 50px;
    height: 50px;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(0, 103, 177, .10);

    color: var(--accent);

    font-size: 21px;
}


.testimonial-author h5 {
    margin: 0;

    color: var(--navy);

    font-size: 16px;

    font-weight: 700;
}


.testimonial-author span {
    display: block;

    margin-top: 3px;

    color: #667085;

    font-size: 12px;
}


.testimonial-author small {
    display: block;

    margin-top: 4px;

    color: var(--accent);

    font-size: 11px;

    font-weight: 600;
}


/* =========================================================
   TESTIMONIAL ARROWS
========================================================= */

.testimonial-arrow {
    position: relative;

    z-index: 5;

    flex-shrink: 0;

    min-width: 52px;

    width: 52px;
    height: 52px;

    display: flex;

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

    border:
        1px solid rgba(255, 255, 255, .25);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .10);

    color: #ffffff;

    font-size: 20px;

    cursor: pointer;

    backdrop-filter: blur(8px);

    transition:
        background .3s ease,
        transform .3s ease,
        border-color .3s ease;
}


.testimonial-arrow:hover {
    background: var(--accent);

    border-color: var(--accent);

    transform: scale(1.08);
}


.testimonial-arrow:active {
    transform: scale(.95);
}


/* =========================================================
   TESTIMONIAL DOTS
========================================================= */

.testimonial-dots {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 9px;

    margin-top: 30px;
}


.testimonial-dots span {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .35);

    cursor: pointer;

    transition:
        width .35s ease,
        background .35s ease,
        transform .35s ease;
}


.testimonial-dots span:hover {
    transform: scale(1.2);
}


.testimonial-dots span.active {
    width: 30px;

    border-radius: 10px;

    background: var(--accent);
}


/* =========================================================
   TRUST CARDS
==================================================.trust-card {
    height: 100%;

    padding: 35px 28px;

    background: #ffffff;

    border:
        1px solid #E2E8F0;

    border-radius: 18px;

    text-align: center;

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

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


.trust-card:hover {
    transform: translateY(-8px);

    border-color: var(--accent);

    box-shadow:
        0 18px 40px rgba(11, 31, 58, .14);
}


.trust-card > i {
    display: inline-flex;

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

    width: 62px;
    height: 62px;

    margin-bottom: 20px;

    border-radius: 50%;

    background:
        rgba(0, 103, 177, .10);

    color: var(--accent);

    font-size: 27px;
}


.trust-card h3 {
    margin-bottom: 12px;

    color: var(--navy);

    font-size: 22px;

    font-weight: 750;
}


.trust-card p {
    margin-bottom: 0;

    color: #64748B;

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================================
   COMMITMENT / NORMAL WHITE SECTION
========================================================= */

.testimonials-section + section {
    background: #ffffff !important;

    padding-top: 90px !important;

    padding-bottom: 90px !important;
}


/* =========================================================
   LIGHT SECTION
========================================================= */

section.bg-light {
    background: #F5F8FC !important;
}


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

.cta-section {
    position: relative;

    overflow: hidden;

    padding: 70px 30px;

    background:
        linear-gradient(
            135deg,
            var(--navy),
            #183D63
        );

    border-radius: 20px;

    box-shadow:
        0 18px 45px rgba(11, 31, 58, .18);
}


.cta-section h2 {
    color: #ffffff;

    font-size: clamp(30px, 4vw, 42px);

    font-weight: 800;

    margin-bottom: 15px;
}


.cta-section p {
    max-width: 750px;

    margin: 0 auto 25px;

    color:
        rgba(255, 255, 255, .80);

    font-size: 16px;

    line-height: 1.7;
}


.cta-section .btn {
    background: var(--accent) !important;

    border-color: var(--accent) !important;

    color: #ffffff !important;

    padding: 12px 30px;

    border-radius: 8px;

    font-weight: 700;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.cta-section .btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .20);
}


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

@media (max-width: 991px) {

    .about-hero {
        min-height: 390px;
    }

    .about-hero::after {
        width: 55%;
    }

    .testimonials-section::after {
        width: 40%;
    }

    .premium-testimonial {
        max-width: 760px;
    }

    .testimonial-slider-wrapper {
        gap: 15px;
    }
}


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

@media (max-width: 768px) {

    .about-hero {
        min-height: 350px;

        padding: 70px 20px;
    }

    .about-hero::after {
        width: 48%;

        background:
            linear-gradient(
                90deg,
                var(--navy) 0%,
                rgba(11, 31, 58, .60) 35%,
                rgba(11, 31, 58, .15) 100%
            ),
            url("../images/testonimial.jpg");

        background-size: cover;

        background-position: center;
    }

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

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

    .testimonials-section {
        min-height: auto;

        padding-top: 65px !important;

        padding-bottom: 65px !important;
    }

    .testimonials-section::after {
        width: 42%;

        background:
            linear-gradient(
                90deg,
                var(--navy) 0%,
                rgba(11, 31, 58, .60) 35%,
                rgba(11, 31, 58, .12) 100%
            ),
            url("../images/testonimial.jpg");

        background-size: cover;

        background-position: center;
    }

    .testimonials-section .section-title {
        margin-bottom: 35px !important;
    }

    .testimonials-section .section-title p {
        font-size: 14px;
    }

    .testimonial-slider-wrapper {
        gap: 8px;
    }

    .testimonial-slide {
        padding: 8px 3px;
    }

    .premium-testimonial {
        min-height: auto;

        padding: 30px 25px;

        border-radius: 20px;
    }

    .testimonial-text {
        font-size: 15px;

        line-height: 1.75;
    }

    .testimonial-arrow {
        min-width: 42px;

        width: 42px;
        height: 42px;

        font-size: 16px;
    }

    .premium-testimonial .stars {
        font-size: 14px;

        letter-spacing: 2px;
    }

    .trust-card {
        padding: 30px 22px;
    }

    .cta-section {
        margin-left: 15px;

        margin-right: 15px;

        padding: 55px 20px;
    }
}


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

@media (max-width: 480px) {

    .about-hero {
        min-height: 330px;
    }

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

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

    .testimonials-section::after {
        width: 38%;
    }

    .testimonial-slider-wrapper {
        gap: 5px;
    }

    .testimonial-arrow {
        min-width: 38px;

        width: 38px;
        height: 38px;

        font-size: 14px;
    }

    .premium-testimonial {
        padding: 25px 20px;
    }

    .testimonial-top {
        margin-bottom: 20px;
    }

    .testimonial-text {
        font-size: 14px;
    }

    .testimonial-author {
        gap: 10px;
    }

    .testimonial-author span {
        max-width: 190px;
    }

    .author-icon {
        min-width: 44px;

        width: 44px;
        height: 44px;
    }

    .trust-card h3 {
        font-size: 20px;
    }

    .trust-card p {
        font-size: 14px;
    }

    .cta-section {
        border-radius: 15px;
    }
}
/* =========================================================
   20. BLOG HERO
========================================================= */

.blog-hero {
    background:
        linear-gradient(
            rgba(11, 31, 58, .88),
            rgba(11, 31, 58, .88)
        ),
        url("../images/servicespage.jpeg")
        center / cover
        no-repeat;

    padding: 120px 0;

    color: var(--white);

    text-align: center;
}
.hero-badge {
    display: inline-block;

    background: var(--accent);
    color: var(--white);

    padding: 8px 22px;

    border-radius: 50px;

    font-size: 14px;
    font-weight: 700;

    margin-bottom: 20px;
}

.blog-hero h1 {
    font-size: 60px;

    font-weight: 900;

    margin-bottom: 20px;
}

.blog-hero p {
    max-width: 750px;

    margin: auto;

    color: #DDD;

    font-size: 20px;
    line-height: 1.8;
}
/* =========================================================
   21. BLOG
========================================================= */



/* =========================================================
   BLOG MAIN SECTION
========================================================= */

.blog-section {
    position: relative;

    padding: 100px 0;

    background:
        linear-gradient(
            180deg,
            #F7FAFD 0%,
            #FFFFFF 50%,
            #F7FAFD 100%
        );

    overflow: hidden;
}


/* =========================================================
   FEATURED BLOG
========================================================= */

.blog-featured-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, .85fr);

    min-height: 500px;

    margin-bottom: 100px;

    background: var(--white);

    border:
        1px solid rgba(0, 103, 177, .10);

    border-radius: 24px;

    overflow: hidden;

    box-shadow:
        0 18px 55px rgba(7, 22, 42, .10);

    transition:
        transform .45s ease,
        box-shadow .45s ease;
}


.blog-featured-row:hover {
    transform: translateY(-7px);

    box-shadow:
        0 28px 70px rgba(7, 22, 42, .16);
}


/* =========================================================
   FEATURED IMAGE
========================================================= */

.blog-featured-image {
    position: relative;

    min-height: 500px;

    overflow: hidden;

    background: var(--navy);
}


.blog-featured-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2, .8, .2, 1),
        filter .6s ease;
}


.blog-featured-row:hover
.blog-featured-image img {
    transform: scale(1.07);

    filter: brightness(.88);
}


/* =========================================================
   FEATURED IMAGE OVERLAY
========================================================= */

.blog-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7, 22, 42, .02),
            rgba(7, 22, 42, .18)
        );

    pointer-events: none;

    z-index: 1;
}


/* =========================================================
   FEATURED BADGE
========================================================= */

.featured-badge {
    position: absolute;

    top: 24px;
    left: 24px;

    z-index: 3;

    display: inline-flex;

    align-items: center;

    padding: 8px 16px;

    background: var(--accent);

    color: var(--white);

    border-radius: 50px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, .20);
}


/* =========================================================
   FEATURED CONTENT
========================================================= */

.blog-featured-content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 55px;

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F5F9FD
        );
}


/* =========================================================
   BLOG CATEGORY
========================================================= */

.blog-featured-content .blog-category {
    display: inline-flex;

    align-self: flex-start;

    align-items: center;

    margin-bottom: 20px;

    padding: 7px 16px;

    background: var(--accent);

    color: var(--white);

    border-radius: 50px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;

    box-shadow:
        0 7px 20px rgba(0, 103, 177, .18);
}


/* =========================================================
   FEATURED TITLE
========================================================= */

.blog-featured-content h2 {
    margin: 0 0 18px;

    color: var(--navy);

    font-size:
        clamp(30px, 3vw, 46px);

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -.5px;

    transition:
        color .3s ease;
}


.blog-featured-row:hover
.blog-featured-content h2 {
    color: var(--accent);
}


/* =========================================================
   BLOG META
========================================================= */

.blog-meta {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 20px;

    margin-bottom: 20px;

    color: #718096;

    font-size: 13px;

    font-weight: 500;
}


.blog-meta span {
    display: inline-flex;

    align-items: center;

    gap: 7px;
}


.blog-meta i {
    color: var(--accent);

    font-size: 14px;
}


/* =========================================================
   FEATURED EXCERPT
========================================================= */

.blog-excerpt {
    max-width: 600px;

    margin: 0 0 28px;

    color: #64748B;

    font-size: 15px;

    line-height: 1.85;
}


/* =========================================================
   READ FULL ARTICLE
========================================================= */

.blog-read-more {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    align-self: flex-start;

    padding: 13px 23px;

    background: var(--accent);

    color: var(--white) !important;

    border-radius: 8px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    box-shadow:
        0 8px 22px rgba(0, 103, 177, .20);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.blog-read-more i {
    transition:
        transform .3s ease;
}


.blog-read-more:hover {
    background: var(--navy);

    color: var(--white) !important;

    transform: translateY(-3px);

    box-shadow:
        0 12px 28px rgba(7, 22, 42, .22);
}


.blog-read-more:hover i {
    transform: translateX(5px);
}


/* =========================================================
   BLOG LIST HEADING
========================================================= */

.blog-list-heading {
    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;
}


.blog-section-label {
    display: inline-block;

    margin-bottom: 12px;

    color: var(--accent);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.blog-list-heading h2 {
    margin: 0 0 14px;

    color: var(--navy);

    font-size:
        clamp(30px, 4vw, 46px);

    line-height: 1.2;

    font-weight: 800;
}


.blog-list-heading p {
    max-width: 650px;

    margin: 0 auto;

    color: #64748B;

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================================
   HORIZONTAL BLOG ARTICLES
========================================================= */

.blog-articles {
    display: flex;

    flex-direction: column;

    gap: 30px;
}


/* =========================================================
   HORIZONTAL BLOG CARD
========================================================= */

.blog-horizontal-card {
    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    min-height: 300px;

    background: var(--white);

    border:
        1px solid rgba(0, 103, 177, .10);

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 12px 35px rgba(7, 22, 42, .08);

    transition:
        transform .4s cubic-bezier(.2, .8, .2, 1),
        box-shadow .4s ease,
        border-color .4s ease;
}


.blog-horizontal-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(0, 103, 177, .25);

    box-shadow:
        0 24px 55px rgba(7, 22, 42, .14);
}


/* =========================================================
   HORIZONTAL BLOG IMAGE
========================================================= */

.blog-horizontal-image {
    position: relative;

    min-height: 300px;

    overflow: hidden;

    background: var(--navy);
}


.blog-horizontal-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .7s cubic-bezier(.2, .8, .2, 1),
        filter .5s ease;
}


.blog-horizontal-card:hover
.blog-horizontal-image img {
    transform: scale(1.07);

    filter: brightness(.88);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.blog-horizontal-image .blog-image-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(7, 22, 42, .02),
            rgba(7, 22, 42, .20)
        );
}


/* =========================================================
   BLOG CATEGORY ON IMAGE
========================================================= */

.blog-horizontal-image .blog-card-category {
    position: absolute;

    left: 20px;
    bottom: 20px;

    z-index: 3;

    padding: 7px 14px;

    background: var(--accent);

    color: var(--white);

    border-radius: 50px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;

    box-shadow:
        0 7px 18px rgba(0, 0, 0, .22);
}


/* =========================================================
   HORIZONTAL BLOG CONTENT
========================================================= */

.blog-horizontal-content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 38px 45px;

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F7FAFD
        );
}


/* =========================================================
   HORIZONTAL BLOG META
========================================================= */

.blog-horizontal-content .blog-meta {
    margin-bottom: 14px;

    font-size: 12px;

    gap: 18px;
}


/* =========================================================
   HORIZONTAL BLOG TITLE
========================================================= */

.blog-horizontal-content h3 {
    margin: 0 0 13px;

    color: var(--navy);

    font-size:
        clamp(22px, 2.2vw, 30px);

    line-height: 1.35;

    font-weight: 800;

    transition:
        color .3s ease;
}


.blog-horizontal-card:hover
.blog-horizontal-content h3 {
    color: var(--accent);
}


/* =========================================================
   HORIZONTAL BLOG DESCRIPTION
========================================================= */

.blog-horizontal-content p {
    max-width: 700px;

    margin: 0 0 20px;

    color: #667085;

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   READ MORE
========================================================= */

.blog-card-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    align-self: flex-start;

    margin-top: auto;

    color: var(--accent) !important;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    transition:
        color .3s ease,
        gap .3s ease;
}


.blog-card-link i {
    transition:
        transform .3s ease;
}


.blog-card-link:hover {
    color: var(--navy) !important;

    gap: 12px;
}


.blog-card-link:hover i {
    transform: translateX(4px);
}


/* =========================================================
   NO BLOGS
========================================================= */

.no-blogs {
    max-width: 650px;

    margin: 30px auto;

    padding: 70px 30px;

    text-align: center;

    background: var(--white);

    border:
        1px solid rgba(0, 103, 177, .10);

    border-radius: 22px;

    box-shadow:
        0 15px 40px rgba(7, 22, 42, .08);
}


.no-blogs-icon {
    display: flex;

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

    width: 75px;
    height: 75px;

    margin: 0 auto 20px;

    background: rgba(0, 103, 177, .08);

    color: var(--accent);

    border-radius: 50%;

    font-size: 32px;
}


.no-blogs h3 {
    margin-bottom: 10px;

    color: var(--navy);

    font-size: 26px;

    font-weight: 800;
}


.no-blogs p {
    margin: 0;

    color: #718096;

    font-size: 15px;
}


/* =========================================================
   BLOG RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

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


    .blog-featured-row {
        grid-template-columns: 1fr;

        min-height: auto;
    }


    .blog-featured-image {
        min-height: 420px;
    }


    .blog-featured-content {
        padding: 40px;
    }


    .blog-horizontal-card {
        grid-template-columns: 1fr;

        min-height: auto;
    }


    .blog-horizontal-image {
        min-height: 330px;
    }


    .blog-horizontal-content {
        padding: 35px;
    }

}


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

@media (max-width: 767.98px) {

    .blog-section {
        padding: 65px 0;
    }


    .blog-featured-row {
        margin-bottom: 70px;

        border-radius: 18px;
    }


    .blog-featured-image {
        min-height: 300px;
    }


    .featured-badge {
        top: 18px;
        left: 18px;
    }


    .blog-featured-content {
        padding: 30px 25px;
    }


    .blog-featured-content h2 {
        font-size: 30px;
    }


    .blog-list-heading {
        margin-bottom: 40px;
    }


    .blog-horizontal-card {
        border-radius: 18px;
    }


    .blog-horizontal-image {
        min-height: 250px;
    }


    .blog-horizontal-content {
        padding: 28px 25px;
    }


    .blog-horizontal-content h3 {
        font-size: 23px;
    }


    .blog-meta {
        gap: 12px;
    }

}


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

@media (max-width: 575.98px) {

    .blog-section {
        padding: 50px 0;
    }


    .blog-featured-image {
        min-height: 230px;
    }


    .blog-featured-content {
        padding: 25px 20px;
    }


    .blog-featured-content .blog-category {
        margin-bottom: 15px;

        padding: 6px 13px;

        font-size: 10px;
    }


    .blog-featured-content h2 {
        font-size: 25px;

        line-height: 1.3;
    }


    .blog-excerpt {
        font-size: 14px;

        line-height: 1.75;
    }


    .blog-read-more {
        width: 100%;

        justify-content: center;
    }


    .blog-list-heading h2 {
        font-size: 29px;
    }


    .blog-list-heading p {
        font-size: 14px;
    }


    .blog-horizontal-image {
        min-height: 210px;
    }


    .blog-horizontal-content {
        padding: 25px 20px;
    }


    .blog-horizontal-content h3 {
        font-size: 21px;
    }


    .blog-horizontal-content p {
        font-size: 13px;
    }


    .blog-card-link {
        margin-top: 5px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .blog-featured-row,
    .blog-horizontal-card,
    .blog-featured-image img,
    .blog-horizontal-image img,
    .blog-read-more,
    .blog-card-link {
        transition: none;
    }

}
/* =========================================================
   BLOG FULL WIDTH PROFESSIONAL FIX
========================================================= */

.blog-section .container {
    max-width: 1320px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
}


/* Featured blog ko screen ke zyada area mein spread karo */

.featured-blog {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}


/* Blog cards full available width */

.blog-grid {
    width: 100%;
}


/* Cards ki height controlled rahe */

.blog-card {
    width: 100%;
}


/* Large screens par unnecessary wide nahi hoga */

@media (min-width: 1400px) {

    .blog-section .container {
        max-width: 1380px;
    }

}


/* Laptop / tablet */

@media (max-width: 1199px) {

    .blog-section .container {
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }

}


/* Mobile */

@media (max-width: 575px) {

    .blog-section .container {
        padding-left: 15px;
        padding-right: 15px;
    }

}
/* =========================================================
  20 BLOG HERO
========================================================= */

.blog-hero {
    position: relative;

    padding: 110px 0 100px;

    background:
        linear-gradient(
            135deg,
            rgba(7, 22, 42, .88),
            rgba(11, 31, 58, .78)
        ),
        url("../images/logo.jpeg")
        center center / cover
        no-repeat;

    overflow: hidden;
}


/* subtle background glow */

.blog-hero::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    top: -180px;
    right: -100px;

    background: rgba(0, 103, 177, .18);

    border-radius: 50%;

    filter: blur(5px);
}


.blog-hero::after {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    bottom: -150px;
    left: -80px;

    background: rgba(0, 103, 177, .12);

    border-radius: 50%;
}


.blog-hero .container {
    position: relative;

    z-index: 2;
}


.blog-hero-content {
    max-width: 850px;

    margin: 0 auto;
}


/* HERO BADGE */

.blog-hero .hero-badge {
    display: inline-block;

    margin-bottom: 18px;

    padding: 8px 18px;

    color: var(--blue-light);

    background: rgba(255, 255, 255, .08);

    border: 1px solid rgba(255, 255, 255, .18);

    border-radius: 50px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    backdrop-filter: blur(8px);
}


/* HERO TITLE */

.blog-hero h1 {
    margin: 0 0 20px;

    color: var(--white);

    font-size: clamp(42px, 6vw, 68px);

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -.5px;
}


/* HERO DESCRIPTION */

.blog-hero p {
    max-width: 720px;

    margin: 0 auto;

    color: rgba(255, 255, 255, .82);

    font-size: 17px;

    line-height: 1.8;
}



/* =========================================================
   BLOG SECTION
========================================================= */

.blog-section {
    position: relative;

    padding: 100px 0;

    background:
        linear-gradient(
            180deg,
            #F7FAFD 0%,
            #FFFFFF 50%,
            #F7FAFD 100%
        );

    overflow: hidden;
}


/* =========================================================
   FEATURED BLOG
========================================================= */

.featured-blog {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, .85fr);

    min-height: 520px;

    margin-bottom: 100px;

    background: var(--white);

    border-radius: 26px;

    overflow: hidden;

    border: 1px solid rgba(0, 103, 177, .12);

    box-shadow:
        0 20px 60px rgba(7, 22, 42, .12);

    transition:
        transform .45s ease,
        box-shadow .45s ease;
}


.featured-blog:hover {
    transform: translateY(-8px);

    box-shadow:
        0 30px 75px rgba(7, 22, 42, .18);
}


/* =========================================================
   FEATURED IMAGE
========================================================= */

.featured-blog-image {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 520px;

    overflow: hidden;

    background: #0B1F3A;
}


.featured-blog-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2, .8, .2, 1),
        filter .6s ease;
}


.featured-blog:hover .featured-blog-image img {
    transform: scale(1.07);

    filter: brightness(.88);
}


/* IMAGE OVERLAY */

.featured-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7, 22, 42, .05),
            rgba(7, 22, 42, .18)
        );

    pointer-events: none;
}



/* =========================================================
   FEATURED CONTENT
========================================================= */

.featured-blog-content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 55px 55px 55px 50px;

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F5F9FD
        );
}


/* CATEGORY */

.featured-blog-content .blog-category {
    align-self: flex-start;

    display: inline-flex;

    align-items: center;

    margin-bottom: 22px;

    padding: 7px 16px;

    background: var(--accent);

    color: var(--white);

    border-radius: 50px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    box-shadow:
        0 7px 20px rgba(0, 103, 177, .18);
}


/* FEATURED TITLE */

.featured-blog-content h2 {
    margin: 0 0 18px;

    color: var(--navy);

    font-size: clamp(30px, 3vw, 46px);

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -.5px;
}


/* FEATURED META */

.featured-blog-content .blog-meta {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 20px;

    margin-bottom: 22px;

    color: #718096;

    font-size: 14px;

    font-weight: 500;
}


.featured-blog-content .blog-meta span {
    display: inline-flex;

    align-items: center;

    gap: 7px;
}


.featured-blog-content .blog-meta i {
    color: var(--accent);

    font-size: 15px;
}


/* FEATURED DESCRIPTION */

.featured-excerpt {
    max-width: 600px;

    margin: 0 0 30px;

    color: #64748B;

    font-size: 16px;

    line-height: 1.85;
}



/* =========================================================
   READ MORE BUTTON
========================================================= */

.blog-read-more {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    align-self: flex-start;

    padding: 13px 23px;

    background: var(--accent);

    color: var(--white) !important;

    border-radius: 8px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    box-shadow:
        0 8px 22px rgba(0, 103, 177, .20);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.blog-read-more i {
    transition:
        transform .3s ease;
}


.blog-read-more:hover {
    background: var(--navy);

    color: var(--white) !important;

    transform: translateY(-3px);

    box-shadow:
        0 12px 28px rgba(7, 22, 42, .22);
}


.blog-read-more:hover i {
    transform: translateX(5px);
}



/* =========================================================
   BLOG LIST HEADING
========================================================= */

.blog-list-heading {
    max-width: 750px;

    margin: 0 auto 55px;

    text-align: center;
}


.blog-list-heading span {
    display: inline-block;

    margin-bottom: 12px;

    color: var(--accent);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.blog-list-heading h2 {
    margin: 0 0 15px;

    color: var(--navy);

    font-size: clamp(32px, 4vw, 46px);

    line-height: 1.2;

    font-weight: 800;
}


.blog-list-heading p {
    margin: 0;

    color: #64748B;

    font-size: 16px;

    line-height: 1.7;
}



/* =========================================================
   BLOG GRID
========================================================= */

.blog-grid {
    display: grid;

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

    gap: 30px;

    width: 100%;
}



/* =========================================================
   BLOG CARD
========================================================= */

.blog-card {
    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    background: var(--white);

    border: 1px solid rgba(0, 103, 177, .10);

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 12px 35px rgba(7, 22, 42, .08);

    transition:
        transform .4s cubic-bezier(.2, .8, .2, 1),
        box-shadow .4s ease,
        border-color .4s ease;
}


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

    border-color: rgba(0, 103, 177, .25);

    box-shadow:
        0 25px 55px rgba(7, 22, 42, .15);
}



/* =========================================================
   BLOG CARD IMAGE
========================================================= */

.blog-card-image {
    position: relative;

    width: 100%;

    height: 240px;

    overflow: hidden;

    background: #0B1F3A;
}


.blog-card-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .7s cubic-bezier(.2, .8, .2, 1),
        filter .5s ease;
}


.blog-card:hover .blog-card-image img {
    transform: scale(1.08);

    filter: brightness(.88);
}



/* =========================================================
   BLOG CARD CATEGORY
========================================================= */

.blog-card-category {
    position: absolute;

    left: 18px;
    bottom: 18px;

    z-index: 2;

    padding: 7px 14px;

    background: var(--accent);

    color: var(--white);

    border-radius: 50px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .8px;

    text-transform: uppercase;

    box-shadow:
        0 7px 18px rgba(0, 0, 0, .22);
}



/* =========================================================
   BLOG CARD CONTENT
========================================================= */

.blog-card-content {
    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 27px 27px 30px;
}


/* META */

.blog-card-content .blog-meta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 15px;

    color: #7B8794;

    font-size: 12px;

    line-height: 1.5;
}


.blog-card-content .blog-meta span {
    display: inline-flex;

    align-items: center;

    gap: 5px;
}


.blog-card-content .blog-meta i {
    color: var(--accent);

    font-size: 13px;
}



/* =========================================================
   BLOG CARD TITLE
========================================================= */

.blog-card-content h3 {
    margin: 0 0 13px;

    color: var(--navy);

    font-size: 22px;

    line-height: 1.35;

    font-weight: 800;

    transition:
        color .3s ease;
}


.blog-card:hover .blog-card-content h3 {
    color: var(--accent);
}



/* =========================================================
   BLOG CARD DESCRIPTION
========================================================= */

.blog-card-content p {
    margin: 0 0 22px;

    color: #667085;

    font-size: 14px;

    line-height: 1.75;
}



/* =========================================================
   BLOG CARD LINK
========================================================= */

.blog-card-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    align-self: flex-start;

    margin-top: auto;

    color: var(--accent) !important;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    transition:
        color .3s ease,
        gap .3s ease;
}


.blog-card-link i {
    transition:
        transform .3s ease;
}


.blog-card-link:hover {
    color: var(--navy) !important;

    gap: 12px;
}


.blog-card-link:hover i {
    transform: translateX(4px);
}



/* =========================================================
   NO BLOGS
========================================================= */

.no-blogs {
    max-width: 600px;

    margin: 40px auto;

    padding: 70px 30px;

    text-align: center;

    background: var(--white);

    border: 1px solid rgba(0, 103, 177, .12);

    border-radius: 22px;

    box-shadow:
        0 15px 45px rgba(7, 22, 42, .08);
}


.no-blogs-icon {
    display: flex;

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

    width: 75px;
    height: 75px;

    margin: 0 auto 20px;

    background: rgba(0, 103, 177, .10);

    color: var(--accent);

    border-radius: 50%;

    font-size: 30px;
}


.no-blogs h3 {
    margin-bottom: 10px;

    color: var(--navy);

    font-size: 27px;

    font-weight: 800;
}


.no-blogs p {
    margin: 0;

    color: #718096;

    font-size: 15px;
}



/* =========================================================
   BLOG ANIMATION SUPPORT
========================================================= */

.featured-blog,
.blog-card,
.blog-list-heading,
.no-blogs {
    will-change: transform, opacity;
}


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

@media (max-width: 1199px) {

    .featured-blog {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, .9fr);
    }

    .featured-blog-content {
        padding: 45px 40px;
    }

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

}



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

@media (max-width: 767px) {

    .blog-hero {
        padding: 80px 0 75px;
    }


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


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


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


    /* FEATURED BLOG */

    .featured-blog {
        display: block;

        min-height: auto;

        margin-bottom: 70px;

        border-radius: 20px;
    }


    .featured-blog-image {
        height: 300px;

        min-height: 300px;
    }


    .featured-blog-content {
        padding: 35px 25px 40px;
    }


    .featured-blog-content h2 {
        font-size: 30px;
    }


    .featured-blog-content .blog-meta {
        gap: 12px;

        flex-direction: column;

        align-items: flex-start;
    }


    .featured-excerpt {
        font-size: 15px;
    }


    /* BLOG HEADING */

    .blog-list-heading {
        margin-bottom: 35px;
    }


    .blog-list-heading h2 {
        font-size: 32px;
    }


    /* BLOG GRID */

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

        gap: 25px;
    }


    .blog-card-image {
        height: 230px;
    }

}



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

@media (max-width: 480px) {

    .blog-hero {
        padding: 65px 0;
    }


    .blog-hero .hero-badge {
        font-size: 11px;

        letter-spacing: 1.3px;

        padding: 7px 14px;
    }


    .blog-hero h1 {
        font-size: 35px;
    }


    .blog-hero p {
        font-size: 14px;

        line-height: 1.7;
    }


    .blog-section {
        padding: 55px 0;
    }


    .featured-blog-image {
        height: 230px;

        min-height: 230px;
    }


    .featured-blog-content {
        padding: 28px 20px 32px;
    }


    .featured-blog-content .blog-category {
        font-size: 10px;

        padding: 6px 12px;
    }


    .featured-blog-content h2 {
        font-size: 27px;
    }


    .featured-excerpt {
        font-size: 14px;

        line-height: 1.7;
    }


    .blog-read-more {
        padding: 11px 18px;

        font-size: 13px;
    }


    .blog-card-content {
        padding: 23px 20px 26px;
    }


    .blog-card-image {
        height: 210px;
    }


    .blog-card-content h3 {
        font-size: 20px;
    }


    .blog-card-content p {
        font-size: 13px;
    }

}



/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .featured-blog,
    .blog-card,
    .featured-blog-image img,
    .blog-card-image img,
    .blog-read-more,
    .blog-card-link {
        transition: none !important;
    }

}
 /* =========================================================
   LATEST NEWS HERO
========================================================= */

.latest-news-hero {
    position: relative;
    min-height: 390px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #06264b;
}


/* =========================================================
   HERO BACKGROUND IMAGE
   RIGHT SIDE — HALF IMAGE
========================================================= */

.latest-news-hero::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 55%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #06264b 0%,
            rgba(6, 38, 75, 0.85) 12%,
            rgba(6, 38, 75, 0.45) 35%,
            rgba(6, 38, 75, 0.10) 65%,
            rgba(6, 38, 75, 0) 100%
        ),
        url("../images/fleet_image_background.jfif");

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

    z-index: 0;
}


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

.latest-news-hero .container {
    position: relative;
    z-index: 2;
}


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

.latest-news-intro {
    position: relative;
    z-index: 5;

    max-width: 700px;

    padding: 80px 0;
}


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

.latest-news-hero .latest-news-label {
    display: inline-block;

    margin-bottom: 18px;

    color: #ffffff !important;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 3px;
    text-transform: uppercase;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.35);
}


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

.latest-news-hero h1 {
    margin: 0 0 18px;

    color: #ffffff !important;

    font-size: clamp(48px, 6vw, 72px);
    font-weight: 800;

    line-height: 1.05;

    text-shadow:
        0 3px 12px rgba(0, 0, 0, 0.40);
}


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

.latest-news-hero p {
    max-width: 680px;

    margin: 0;

    color: #ffffff !important;

    font-size: 18px;
    font-weight: 400;

    line-height: 1.7;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.40);
}


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

@media (max-width: 991px) {

    .latest-news-hero {
        min-height: 360px;
    }

    .latest-news-hero::after {
        width: 65%;

        background:
            linear-gradient(
                90deg,
                #06264b 0%,
                rgba(6, 38, 75, 0.85) 25%,
                rgba(6, 38, 75, 0.35) 65%,
                rgba(6, 38, 75, 0) 100%
            ),
            url("../images/fleet_image_background.jfif");

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

    .latest-news-intro {
        padding: 70px 0;
    }
}


@media (max-width: 576px) {

    .latest-news-hero {
        min-height: 330px;
    }

    .latest-news-hero::after {
        width: 100%;

        background:
            linear-gradient(
                90deg,
                rgba(6, 38, 75, 0.94),
                rgba(6, 38, 75, 0.72)
            ),
            url("../images/fleet_image_background.jfif");

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

    .latest-news-intro {
        padding: 60px 0;
    }

    .latest-news-hero h1 {
        font-size: 44px;
    }

    .latest-news-hero p {
        font-size: 15px;
        line-height: 1.6;
    }

    .latest-news-hero .latest-news-label {
        font-size: 11px;
        letter-spacing: 2px;
    }
}
/* =========================================================
   23. RECENT BLOG
========================================================= */

.recent-blog-section {
    padding: 80px 0;
    background: #F8F9FA;
}

.recent-blog-section .section-title h2 {
    font-size: 38px;
    font-weight: 700;
    color: #1B1B1B;
}

.recent-blog-section .section-title p {
    color: #666;
    font-size: 17px;
}

.recent-blog-card {
    background: var(--white);

    border-radius: 15px;

    overflow: hidden;

    height: 100%;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.recent-blog-card:hover {
    transform: translateY(-8px);

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

.recent-blog-img {
    width: 100%;
    height: 220px;

    object-fit: cover;
}

.recent-blog-content {
    padding: 25px;
}

.recent-blog-content h4 {
    font-size: 22px;
    font-weight: 700;

    margin-bottom: 12px;
}

.recent-blog-content p {
    color: #666;
    line-height: 1.7;
}

.recent-blog-content .btn {
    margin-top: 10px;

    border-radius: 25px;

    padding: 10px 25px;

    font-weight: 600;
}
/* =========================================================
   24. OUR CLIENTS
   PREMIUM CLIENTS HERO
========================================================= */


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

.clients-hero {
    position: relative;

    width: 100%;

    min-height: 460px;

    height: 460px;

    padding: 0;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background-image:
        linear-gradient(
            rgba(8, 28, 50, 0.35),
            rgba(8, 28, 50, 0.45)
        ),
        url("../images/ourclientpage.jpeg");

    background-position:
        center center;

    background-size:
        cover;

    background-repeat:
        no-repeat;

    background-attachment:
        scroll;
}


/* =========================================================
   DECORATIVE CIRCLE
========================================================= */

.clients-hero::before {
    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    right: -120px;

    top: -150px;

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius: 50%;

    animation:
        clientsFloat 8s ease-in-out infinite;

    pointer-events: none;

    z-index: 1;
}


.clients-hero::after {
    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    left: -100px;

    bottom: -120px;

    border:
        1px solid
        rgba(0, 103, 177, 0.20);

    border-radius: 50%;

    animation:
        clientsFloatReverse 10s ease-in-out infinite;

    pointer-events: none;

    z-index: 1;
}


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

.clients-hero-content {
    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 850px;

    margin: 0 auto;

    padding:
        0 20px;
}


/* =========================================================
   EYEBROW
========================================================= */

.clients-eyebrow {
    display: inline-block;

    color:
        var(--blue-light);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2.5px;

    margin-bottom: 12px;

    animation:
        clientsFadeDown .8s ease both;
}


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

.clients-hero h1 {
    margin:
        5px 0 15px;

    color:
        var(--white);

    font-size:
        clamp(38px, 5vw, 52px);

    font-weight: 800;

    line-height: 1.1;

    text-shadow:
        0 4px 18px
        rgba(0, 0, 0, 0.40);

    animation:
        clientsFadeUp 1s ease .15s both;
}


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

.clients-hero p {
    max-width: 680px;

    margin:
        0 auto;

    color:
        rgba(255, 255, 255, 0.90);

    font-size: 16px;

    line-height: 1.8;

    text-shadow:
        0 2px 10px
        rgba(0, 0, 0, 0.30);

    animation:
        clientsFadeUp 1s ease .3s both;
}


/* =========================================================
   CLIENTS MAIN SECTION
========================================================= */

.clients-section {
    position: relative;

    padding:
        90px 0 115px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #203d5c 0%,
            #294d70 50%,
            #1d3855 100%
        );
}


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

@media (max-width: 991px) {

    .clients-hero {

        min-height:
            400px;

        height:
            400px;

        background-position:
            center center;
    }

}


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

@media (max-width: 767px) {

    .clients-hero {

        min-height:
            340px;

        height:
            340px;

        padding:
            0 15px;

        background-image:
            linear-gradient(
                rgba(8, 28, 50, 0.40),
                rgba(8, 28, 50, 0.50)
            ),
            url("../images/ourclientpage.jpeg");

        background-position:
            center center;

        background-size:
            cover;

        background-repeat:
            no-repeat;

        background-attachment:
            scroll;
    }


    .clients-hero h1 {

        font-size:
            36px;
    }


    .clients-hero p {

        font-size:
            14px;

        line-height:
            1.7;
    }


    .clients-eyebrow {

        font-size:
            11px;

        letter-spacing:
            2px;
    }

}


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

@media (max-width: 480px) {

    .clients-hero {

        min-height:
            300px;

        height:
            300px;
    }


    .clients-hero h1 {

        font-size:
            31px;
    }


    .clients-hero p {

        font-size:
            13.5px;
    }

}

/* =========================================================
   7. BACKGROUND DECORATION
========================================================= */

.clients-section::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -230px;
    top: 15%;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .035);

    filter: blur(15px);

    pointer-events: none;
}


.clients-section::after {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    right: -210px;
    bottom: 10%;

    border-radius: 50%;

    background:
        rgba(0, 0, 0, .08);

    filter: blur(15px);

    pointer-events: none;
}


/* =========================================================
   8. HONEYCOMB WRAPPER
========================================================= */

.clients-honeycomb {

    --hex-width: 180px;
    --hex-height: 156px;

    position: relative;

    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: flex-start;

    max-width: 1180px;

    margin: 0 auto;

    padding: 30px 10px 50px;

    /*
       Equal spacing between every tile
    */

    column-gap: 14px;

    row-gap: 22px;
}


/* =========================================================
   9. HEXAGON TILE
========================================================= */

.client-hexagon {

    position: relative;

    width: var(--hex-width);

    height: var(--hex-height);

    flex: 0 0 var(--hex-width);

    margin: 0;

    background:
        linear-gradient(
            145deg,
            #a9c2d8,
            #d7e5f0
        );

    clip-path:
        polygon(
            25% 0%,
            75% 0%,
            100% 50%,
            75% 100%,
            25% 100%,
            0% 50%
        );

    transition:
        transform .35s ease,
        background .35s ease,
        filter .35s ease;

    will-change: transform;

    z-index: 1;
}


/* =========================================================
   10. INNER WHITE HEXAGON
========================================================= */

.client-hexagon-inner {

    position: absolute;

    inset: 1.5px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 21px;

    background: #ffffff;

    clip-path:
        polygon(
            25% 0%,
            75% 0%,
            100% 50%,
            75% 100%,
            25% 100%,
            0% 50%
        );

    overflow: hidden;
}


/* =========================================================
   11. CLIENT LOGO
========================================================= */

.client-hexagon-inner img {

    display: block;

    width: 86%;

    height: 86%;

    max-width: 140px;

    max-height: 90px;

    object-fit: contain;

    object-position: center;

    opacity: 1;

    filter: none;

    user-select: none;

    transition:
        transform .35s ease;
}


/* =========================================================
   12. HOVER
========================================================= */

.client-hexagon:hover {

    background:
        linear-gradient(
            145deg,
            #0071bd,
            #00518d
        );

    transform:
        translateY(-7px)
        scale(1.035);

    filter:
        drop-shadow(
            0 16px 30px
            rgba(0, 0, 0, .28)
        );

    z-index: 20;
}


/* =========================================================
   13. LOGO HOVER
========================================================= */

.client-hexagon:hover
.client-hexagon-inner img {

    transform:
        scale(1.08);
}


/* =========================================================
   14. DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .clients-honeycomb {

        --hex-width: 180px;
        --hex-height: 156px;

        max-width: 1180px;

        column-gap: 14px;

        row-gap: 22px;
    }

}


/* =========================================================
   15. LARGE TABLET / SMALL DESKTOP
========================================================= */

@media (max-width: 1199px) {

    .clients-hero {

        padding:
            80px 0 70px;
    }

    .clients-section {

        padding:
            85px 0 105px;
    }

    .clients-honeycomb {

        --hex-width: 165px;
        --hex-height: 143px;

        max-width: 900px;

        padding-top: 25px;

        column-gap: 12px;

        row-gap: 20px;
    }

    .client-hexagon-inner {

        padding: 19px;
    }

    .client-hexagon-inner img {

        max-width: 120px;

        max-height: 75px;
    }

}


/* =========================================================
   16. TABLET
========================================================= */

@media (max-width: 991px) {

    .clients-hero {

        padding:
            75px 0 65px;
    }

    .clients-hero h1 {

        font-size: 42px;
    }

    .clients-hero p {

        font-size: 15px;
    }

    .clients-section {

        padding:
            70px 0 90px;
    }

    .clients-honeycomb {

        --hex-width: 155px;
        --hex-height: 135px;

        max-width: 690px;

        column-gap: 10px;

        row-gap: 18px;
    }

    .client-hexagon-inner {

        padding: 17px;
    }

    .client-hexagon-inner img {

        max-width: 112px;

        max-height: 70px;
    }

}


/* =========================================================
   17. MOBILE
========================================================= */

@media (max-width: 767px) {

    .clients-hero {

        padding:
            65px 0 55px;
    }

    .clients-eyebrow {

        font-size: 11px;

        letter-spacing: 2px;
    }

    .clients-hero h1 {

        font-size: 36px;
    }

    .clients-hero p {

        font-size: 15px;

        line-height: 1.7;

        padding:
            0 10px;
    }

    .clients-section {

        padding:
            55px 0 75px;
    }

    .clients-honeycomb {

        --hex-width: 145px;
        --hex-height: 126px;

        max-width: 470px;

        padding:
            20px 4px 40px;

        column-gap: 8px;

        row-gap: 16px;
    }

    .client-hexagon-inner {

        padding: 16px;
    }

    .client-hexagon-inner img {

        width: 80%;

        height: 80%;

        max-width: 105px;

        max-height: 65px;
    }

}


/* =========================================================
   18. SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .clients-hero {

        padding:
            60px 0 50px;
    }

    .clients-hero h1 {

        font-size: 32px;
    }

    .clients-eyebrow {

        font-size: 10px;

        letter-spacing: 1.8px;
    }

    .clients-hero p {

        font-size: 14px;
    }

    .clients-section {

        padding:
            50px 0 70px;
    }

    .clients-honeycomb {

        --hex-width: 135px;
        --hex-height: 117px;

        max-width: 310px;

        padding-top: 15px;

        column-gap: 6px;

        row-gap: 14px;
    }

    .client-hexagon-inner {

        padding: 14px;
    }

    .client-hexagon-inner img {

        width: 78%;

        height: 78%;

        max-width: 98px;

        max-height: 60px;
    }

}


/* =========================================================
   19. VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .clients-hero {

        padding:
            55px 0 45px;
    }

    .clients-hero h1 {

        font-size: 30px;
    }

    .clients-honeycomb {

        --hex-width: 120px;

        --hex-height: 104px;

        max-width: 280px;

        column-gap: 5px;

        row-gap: 12px;
    }

    .client-hexagon-inner {

        padding: 12px;
    }

    .client-hexagon-inner img {

        max-width: 86px;

        max-height: 52px;
    }

}


/* =========================================================
   20. TOUCH DEVICES
========================================================= */

@media (hover: none) {

    .client-hexagon:hover {

        transform: none;

        filter: none;
    }

    .client-hexagon:hover
    .client-hexagon-inner img {

        transform: none;
    }

}


/* =========================================================
   21. CLIENTS PAGE ANIMATIONS
========================================================= */

@keyframes clientsFadeUp {

    from {

        opacity: 0;

        transform:
            translateY(35px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes clientsFadeDown {

    from {

        opacity: 0;

        transform:
            translateY(-25px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes clientsFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {

        transform:
            translateY(20px)
            rotate(8deg);
    }

}


@keyframes clientsFloatReverse {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {

        transform:
            translateY(-20px)
            rotate(-8deg);
    }

}

/* =========================================================
   25. HOME CLIENTS
   PREMIUM HEXAGON / HONEYCOMB LOGO WALL
   CLEAN EQUAL SPACING - NO OVERLAP
========================================================= */


/* =========================================================
   MAIN SECTION
========================================================= */

.home-clients-section {
    position: relative;

    padding: 90px 0 110px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #203d5c 0%,
            #294d70 50%,
            #1d3855 100%
        );
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.home-clients-section::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -230px;
    top: 12%;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .035);

    filter: blur(15px);

    pointer-events: none;
}


.home-clients-section::after {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    right: -210px;
    bottom: 8%;

    border-radius: 50%;

    background:
        rgba(0, 0, 0, .08);

    filter: blur(15px);

    pointer-events: none;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.home-clients-section .section-title {
    position: relative;

    z-index: 5;

    text-align: center;

    margin-bottom: 35px !important;
}


.home-clients-section .clients-label {
    display: inline-block;

    margin-bottom: 12px;

    color: var(--blue-light);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


.home-clients-section .section-title h2 {
    margin: 5px 0 15px;

    color: var(--white) !important;

    font-size: 42px;

    font-weight: 800;

    line-height: 1.1;
}


.home-clients-section .section-title p {
    max-width: 680px;

    margin: 0 auto;

    color:
        rgba(255, 255, 255, .78) !important;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   HONEYCOMB GRID
========================================================= */

.home-clients-pentagon-grid {

    --home-hex-width: 172px;

    --home-hex-height: 194px;

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1180px;

    margin: 45px auto 0;

    padding: 0 10px 50px;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: flex-start;

    /*
       Equal horizontal and vertical spacing
    */

    column-gap: 14px;

    row-gap: 22px;
}


/* =========================================================
   HEXAGON OUTER BORDER
========================================================= */

.home-client-pentagon {

    position: relative;

    width: var(--home-hex-width);

    height: var(--home-hex-height);

    flex: 0 0 var(--home-hex-width);

    margin: 0;

    background:
        linear-gradient(
            145deg,
            #a9c2d8,
            #d7e5f0
        );

    clip-path:
        polygon(
            25% 0%,
            75% 0%,
            100% 50%,
            75% 100%,
            25% 100%,
            0% 50%
        );

    transition:
        transform .35s ease,
        background .35s ease,
        filter .35s ease;

    will-change: transform;

    z-index: 1;
}


/* =========================================================
   INNER WHITE HEXAGON
========================================================= */

.home-client-pentagon-inner {

    position: absolute;

    inset: 2px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 24px;

    background: #ffffff;

    clip-path:
        polygon(
            25% 0%,
            75% 0%,
            100% 50%,
            75% 100%,
            25% 100%,
            0% 50%
        );

    overflow: hidden;
}


/* =========================================================
   CLIENT LOGO
========================================================= */

.home-client-pentagon-inner img {

    display: block;

    width: auto !important;

    height: auto !important;

    max-width: 108px !important;

    max-height: 70px !important;

    object-fit: contain !important;

    object-position: center center;

    opacity: 1 !important;

    filter: none !important;

    user-select: none;

    flex-shrink: 0;

    transition:
        transform .35s ease;
}


/* =========================================================
   HOVER
========================================================= */

.home-client-pentagon:hover {

    background:
        linear-gradient(
            145deg,
            #0071bd,
            #00518d
        );

    transform:
        translateY(-8px)
        scale(1.035);

    filter:
        drop-shadow(
            0 16px 30px
            rgba(0, 0, 0, .28)
        );

    z-index: 20;
}


/* =========================================================
   LOGO HOVER
========================================================= */

.home-client-pentagon:hover
.home-client-pentagon-inner img {

    transform:
        scale(1.06);
}


/* =========================================================
   VIEW ALL BUTTON
========================================================= */

.home-clients-section .clients-view-btn {

    position: relative;

    z-index: 5;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 27px;

    border: 1px solid
        rgba(255, 255, 255, .28);

    border-radius: 8px;

    background:
        rgba(255, 255, 255, .08);

    color: #ffffff;

    font-weight: 600;

    text-decoration: none;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}


.home-clients-section .clients-view-btn:hover {

    background: #ffffff;

    color: var(--navy, #012b5c);

    border-color: #ffffff;

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 25px
        rgba(0, 0, 0, .18);
}


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

@media (min-width: 1200px) {

    .home-clients-pentagon-grid {

        --home-hex-width: 172px;

        --home-hex-height: 194px;

        max-width: 1180px;

        column-gap: 14px;

        row-gap: 22px;
    }

}


/* =========================================================
   LARGE TABLET / SMALL DESKTOP
========================================================= */

@media (max-width: 1199px) {

    .home-clients-section {

        padding:
            80px 0 100px;
    }


    .home-clients-pentagon-grid {

        --home-hex-width: 158px;

        --home-hex-height: 178px;

        max-width: 900px;

        margin-top: 40px;

        column-gap: 12px;

        row-gap: 20px;
    }


    .home-client-pentagon-inner {

        padding: 22px;
    }


    .home-client-pentagon-inner img {

        max-width: 100px !important;

        max-height: 65px !important;
    }

}


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

@media (max-width: 991px) {

    .home-clients-section {

        padding:
            70px 0 90px;
    }


    .home-clients-section .section-title h2 {

        font-size: 38px;
    }


    .home-clients-pentagon-grid {

        --home-hex-width: 150px;

        --home-hex-height: 169px;

        max-width: 650px;

        margin-top: 35px;

        column-gap: 10px;

        row-gap: 18px;
    }


    .home-client-pentagon-inner {

        padding: 20px;
    }


    .home-client-pentagon-inner img {

        max-width: 94px !important;

        max-height: 61px !important;
    }

}


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

@media (max-width: 767px) {

    .home-clients-section {

        padding:
            60px 0 80px;
    }


    .home-clients-section .section-title {

        margin-bottom:
            25px !important;
    }


    .home-clients-section .section-title h2 {

        font-size: 34px;
    }


    .home-clients-section .section-title p {

        padding:
            0 12px;

        font-size: 14px;
    }


    .home-clients-pentagon-grid {

        --home-hex-width: 135px;

        --home-hex-height: 152px;

        max-width: 440px;

        margin-top: 30px;

        padding-left: 4px;

        padding-right: 4px;

        column-gap: 8px;

        row-gap: 16px;
    }


    .home-client-pentagon-inner {

        padding: 18px;
    }


    .home-client-pentagon-inner img {

        max-width: 84px !important;

        max-height: 55px !important;
    }

}


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

@media (max-width: 575px) {

    .home-clients-section {

        padding:
            50px 0 70px;
    }


    .home-clients-section .section-title h2 {

        font-size: 31px;
    }


    .home-clients-pentagon-grid {

        --home-hex-width: 116px;

        --home-hex-height: 131px;

        max-width: 365px;

        margin-top: 25px;

        column-gap: 6px;

        row-gap: 14px;
    }


    .home-client-pentagon-inner {

        padding: 15px;
    }


    .home-client-pentagon-inner img {

        max-width: 72px !important;

        max-height: 47px !important;
    }

}


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

@media (max-width: 390px) {

    .home-clients-pentagon-grid {

        --home-hex-width: 105px;

        --home-hex-height: 118px;

        max-width: 330px;

        column-gap: 5px;

        row-gap: 12px;
    }


    .home-client-pentagon-inner {

        padding: 13px;
    }


    .home-client-pentagon-inner img {

        max-width: 64px !important;

        max-height: 42px !important;
    }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) {

    .home-client-pentagon:hover {

        transform: none;

        filter: none;
    }


    .home-client-pentagon:hover
    .home-client-pentagon-inner img {

        transform: none;
    }

}

/* =========================================================
   26. PRIVACY POLICY
========================================================= */

.privacy-hero {
    background: var(--navy);

    color: var(--white);

    padding: 80px 0;

    text-align: center;
}

.privacy-hero h1 {
    color: var(--blue-light);

    font-size: 45px;
    font-weight: 700;
}

.privacy-card {
    background: var(--white);

    padding: 40px;

    border-radius: 20px;

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

.privacy-item {
    margin-bottom: 35px;
}

.privacy-item h3 {
    color: var(--navy);
    font-weight: 700;
}

.privacy-item i {
    color: var(--accent);
}

.privacy-item p {
    color: #555;

    line-height: 1.8;
}


/* =========================================================
   27. FOOTER
========================================================= */

.professional-footer {
    background: #08182F;

    color: var(--white);

    padding: 70px 0 25px;
}

.footer-title {
    color: var(--white);

    font-size: 28px;
    font-weight: 700;
}

.footer-text {
    color: #C8D1DD;
    line-height: 1.8;
}

.professional-footer h5 {
    color: var(--blue-light);

    font-weight: 700;

    margin-bottom: 20px;
}

.footer-links {
    list-style: none;

    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #D6DCE5;

    transition:
        color .3s ease,
        padding .3s ease;
}

.footer-links a:hover {
    color: var(--blue-light);

    padding-left: 5px;
}

.footer-services {
    list-style: none;

    padding: 0;
    margin: 0;
}

.footer-services li {
    color: var(--white);

    font-size: 14px;
    line-height: 1.6;

    margin-bottom: 12px;

    display: flex;

    align-items: flex-start;

    gap: 9px;
}

.footer-services li i {
    color: var(--blue-light);

    font-size: 15px;

    flex-shrink: 0;

    margin-top: 3px;
}

.footer-heading {
    color: var(--blue-light);

    font-size: 20px;
    font-weight: 700;

    margin-bottom: 20px;
}

.footer-contact-item {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    color: #D6DCE5;

    margin-bottom: 18px;
}

.footer-contact-item i {
    color: var(--blue-light);

    font-size: 18px;

    margin-top: 4px;

    flex-shrink: 0;
}

.footer-contact-item a {
    color: #D6DCE5;
}

.footer-contact-item a:hover {
    color: var(--blue-light);
}

.professional-footer hr {
    border-color:
        rgba(255, 255, 255, .15);

    margin: 40px 0 25px;
}

.professional-footer > .container > .row:last-child a {
    color: #D6DCE5;
}

.professional-footer > .container > .row:last-child a:hover {
    color: var(--blue-light);
}


/* =========================================================
   28. SOCIAL ICONS
========================================================= */

.social-icons {
    display: flex;
    gap: 12px;
}

.social-icons a {
    width: 45px;
    height: 45px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .08);

    display: flex;

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

    color: var(--white);

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.social-icons a:hover {
    background: var(--accent);

    color: var(--white);

    transform: translateY(-5px);
}


/* =========================================================
   29. COPYRIGHT
========================================================= */

.copyright-text {
    font-size: 14px;
    letter-spacing: .3px;
}

.copyright-brand {
    font-weight: 700;

    margin-left: 4px;

    transition: letter-spacing .3s ease;
}

.copyright-brand:hover {
    letter-spacing: 1px;
    cursor: pointer;
}

.copyright-divider {
    margin: 0 8px;
    opacity: .5;
}

.copyright-rights {
    margin-left: 8px;
    opacity: .7;
}


/* =========================================================
   30. WHATSAPP
========================================================= */

.whatsapp-float {
    position: fixed;

    right: 15px;
    bottom: 15px;

    width: 55px;
    height: 55px;

    background: #25D366;
    color: var(--white);

    border-radius: 50%;

    display: flex;

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

    font-size: 30px;

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

    z-index: 9999;

    transition:
        transform .35s ease,
        background .35s ease;
}

.whatsapp-float:hover {
    color: var(--white);

    background: #1EBE5D;

    transform: scale(1.1);
}


/* =========================================================
   31. SCROLL TO TOP
========================================================= */

#scrollTopBtn {
    position: fixed;

    bottom: 85px;
    right: 18px;

    width: 55px;
    height: 55px;

    border: none;

    border-radius: 50%;

    background: var(--accent);
    color: var(--white);

    font-size: 24px;

    cursor: pointer;

    display: flex;

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

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(20px)
        scale(.9);

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

    z-index: 9998;

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease,
        background .3s ease;
}

#scrollTopBtn.show-scroll-top {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}

#scrollTopBtn:hover {
    background: var(--navy);

    color: var(--white);

    transform:
        translateY(-4px)
        scale(1.05);
}


/* =========================================================
   32. PRELOADER
========================================================= */

#preloader {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: var(--white);

    display: flex;

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

    z-index: 99999;

    transition: opacity .3s ease;
}

.loader {
    width: 70px;
    height: 70px;

    border:
        6px solid #E5E5E5;

    border-top:
        6px solid var(--accent);

    border-radius: 50%;

    animation:
        spin 1s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}


/* =========================================================
   33. ADMIN DASHBOARD
========================================================= */

.admin-dashboard {
    background: var(--light);

    min-height: 70vh;

    padding-bottom: 40px;
}

.dashboard-stat-card {
    background: var(--white);

    border-radius: 18px;

    padding: 30px;

    display: flex;

    justify-content: space-between;
    align-items: center;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .08);

    transition:
        transform .3s ease;
}

.dashboard-stat-card:hover {
    transform: translateY(-5px);
}

.dashboard-stat-card h1 {
    color: var(--navy);

    font-size: 45px;
    font-weight: 800;
}

.dashboard-stat-card i {
    color: var(--accent);

    font-size: 55px;
}

.dashboard-action-card {
    display: block;

    background: var(--white);

    padding: 35px 25px;

    border-radius: 18px;

    text-align: center;

    color: var(--navy);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .08);

    transition:
        transform .3s ease;
}

.dashboard-action-card:hover {
    transform: translateY(-8px);
}

.dashboard-action-card i {
    color: var(--accent);

    font-size: 45px;
}

.admin-table-card {
    background: var(--white);

    border-radius: 18px;

    padding: 25px;

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

.admin-blog-table thead th {
    background: var(--navy);

    color: var(--white);

    padding: 15px;
}

.admin-blog-thumb {
    width: 90px;
    height: 60px;

    object-fit: cover;

    border-radius: 10px;

    border:
        2px solid #EEE;
}

.admin-badge {
    background: var(--accent);

    color: var(--white);

    padding: 6px 14px;

    border-radius: 50px;

    font-size: 13px;
    font-weight: 600;
}

.admin-blog-table tbody tr {
    height: 85px;

    vertical-align: middle;
}

.admin-blog-table tbody tr:hover {
    background: #F8F9FA;
}

.admin-blog-table td {
    vertical-align: middle;
}


/* =========================================================
   34. ADMIN FORM
========================================================= */

.admin-form-card {
    border-radius: 18px;
    overflow: hidden;
}

.admin-gold-header {
    background: #111;

    color: var(--blue-light);
}

.admin-gold-btn {
    background: var(--accent);

    color: var(--white);

    border: none;

    font-weight: 600;
}

.admin-gold-btn:hover {
    background: var(--blue);
}

.blog-image-preview {
    display: none;

    width: 220px;
    height: 140px;

    object-fit: cover;

    border-radius: 10px;
}


/* =========================================================
   35. ADMIN SIDEBAR
========================================================= */

.sidebar {
    min-height: 100vh;

    background: var(--navy);

    padding: 25px 15px;
}

.sidebar h3 {
    color: var(--white);
    font-weight: 700;
}

.sidebar a {
    display: block;

    color: #DDD;

    padding: 12px 15px;

    margin-bottom: 8px;

    border-radius: 10px;

    font-weight: 600;

    transition:
        background .3s ease,
        color .3s ease;
}

.sidebar a i {
    margin-right: 10px;
}

.sidebar a:hover {
    background: var(--blue);

    color: var(--white);
}

.logout {
    background: #DC3545;

    color: var(--white) !important;
}

.admin-content {
    background: #F5F7FA;

    min-height: 100vh;

    padding: 30px;
}


/* =========================================================
   36. ADMIN PROFILE
========================================================= */

.profile-image {
    width: 170px;
    height: 170px;

    border-radius: 50%;

    object-fit: cover;

    border:
        6px solid var(--accent);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .20);

    transition:
        transform .35s ease;
}

.profile-image:hover {
    transform: scale(1.05);
}


/* =========================================================
   37. SCROLL REVEAL ANIMATIONS
========================================================= */

.js-reveal,
.js-fade-up,
.js-stagger-card {
    opacity: 0;

    transform:
        translateY(40px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}

.js-reveal.js-visible,
.js-reveal.js-reveal-visible,
.js-fade-up.visible,
.js-stagger-card.js-reveal-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* Universal animation classes */

.js-grid-item,
.js-animate {
    opacity: 0;

    transform:
        translateY(55px)
        scale(.97);

    transition:
        opacity .75s ease var(--delay, 0ms),
        transform .75s cubic-bezier(
            .22,
            1,
            .36,
            1
        );
}

.js-grid-item.js-visible,
.js-animate.js-visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   38. IMAGE REVEAL
========================================================= */

.js-image,
.js-image-reveal {
    opacity: 0;

    transform:
        scale(.97);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.js-image.image-visible,
.js-image-reveal.image-visible {
    opacity: 1;

    transform:
        scale(1);
}


/* =========================================================
   39. ANIMATED CARD HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .service-card,
    .fleet-card,
    .client-card,
    .testimonial-card,
    .blog-card,
    .service-image-card,
    .why-card,
    .stat-card,
    .js-grid-item {

        transition:
            transform .45s ease,
            box-shadow .45s ease,
            border-color .45s ease;
    }

}


/* =========================================================
   40. PREMIUM TESTIMONIAL HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .premium-testimonial:hover {
        transform: translateY(-10px);

        border-color:
            rgba(0, 103, 177, .25);

        box-shadow:
            0 22px 45px rgba(1, 27, 62, .14);
    }

    .premium-testimonial:hover .quote-icon {
        transform:
            rotate(-5deg)
            scale(1.08);
    }

}


/* =========================================================
   41. SCROLL PROGRESS
========================================================= */

.scroll-progress {
    position: fixed;

    top: 0;
    left: 0;

    width: 0;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--blue-light)
        );

    z-index: 99999;
}


/* =========================================================
   42. REDUCED MOTION
========================================================= */

.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
    animation-duration: .01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: .01ms !important;
}

.reduced-motion .js-reveal,
.reduced-motion .js-fade-up,
.reduced-motion .js-stagger-card,
.reduced-motion .js-grid-item,
.reduced-motion .js-animate,
.reduced-motion .js-image,
.reduced-motion .js-image-reveal {
    opacity: 1 !important;

    transform: none !important;
}


/* =========================================================
   43. TABLET - 992px
========================================================= */

@media (max-width: 992px) {

    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .hero h1 {
        font-size: 46px;
    }

    .hero-overlay p {
        font-size: 18px;
    }

    .navbar-nav {
        text-align: center;
        padding-top: 20px;
    }

    .navbar-nav .nav-link {
        margin-left: 0 !important;
        padding: 10px 0 !important;
    }

    .quote-btn {
        margin-top: 15px;
        display: inline-block;
    }

    .fleet-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 25px;
    }

}


/* =========================================================
   44. TABLET / MOBILE - 991px
========================================================= */

@media (max-width: 991px) {

    .custom-navbar {
        padding: 7px 0 !important;
    }

    .custom-navbar .navbar-nav .nav-link {
        font-size: 15px !important;
        padding: 8px 0 !important;
        margin-left: 0 !important;
    }

    .custom-navbar .quote-btn {
        font-size: 13px !important;
        padding: 8px 18px !important;
        margin-left: 0 !important;
    }

    .clients-hero {
        padding: 70px 0 60px;
    }

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

    .clients-section {
        padding: 60px 0;
    }

    .client-logo-box {
        height: 140px;
    }

}


/* =========================================================
   45. MOBILE - 768px
========================================================= */

@media (max-width: 768px) {

    section {
        padding: 70px 0;
    }

    .custom-navbar {
        padding: 10px 0 !important;
    }

    .logo-img {
        width: 50px !important;
        height: 50px !important;
    }

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

    .logo-subtitle {
        font-size: 10px !important;
    }

    .hero {
        min-height: auto;
        text-align: center;
    }

    .hero-overlay {
        min-height: auto;

        padding: 90px 0;
    }

    .hero h1 {
        font-size: 36px;
        line-height: 1.3;
    }

    .hero h4 {
        font-size: 21px;
    }

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

    .hero .btn {
        width: 100%;
        margin-bottom: 12px;
    }

    .section-title h2 {
        font-size: 34px;
    }

    .services-home .section-title h2 {
        font-size: 32px;
    }

    .about-hero h1 {
        font-size: 38px;
    }

    .contact-hero {
        padding: 70px 20px;
    }

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

    .contact-section {
        padding: 50px 15px;
    }

    .contact-info-card,
    .contact-form-card {
        padding: 30px 22px;
    }

    .fleet-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .fleet-card img {
        height: 220px;
    }

    .fleet-title {
        font-size: 21px;
    }

    .blog-hero {
        padding: 80px 20px;
    }

    .blog-hero h1 {
        font-size: 38px;
    }

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

    .blog-content {
        padding: 25px;
    }

    .blog-content h4 {
        font-size: 21px;
    }

    .blog-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .blog-card img {
        height: 220px;
    }

    .blog-detail-image {
        height: 260px;
    }

    .blog-detail-content {
        padding: 25px;
    }

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

    .recent-blog-section {
        padding: 50px 0;
    }

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

    .recent-blog-img {
        height: 200px;
    }

    .footer-title {
        font-size: 24px;
    }

    .dashboard-stat-card {
        margin-bottom: 20px;
    }

    .dashboard-action-card {
        margin-bottom: 20px;
    }

    .dashboard-stat-card h1 {
        font-size: 35px;
    }

    .dashboard-stat-card i {
        font-size: 40px;
    }

    .sidebar {
        min-height: auto;
    }

    .sidebar h3 {
        text-align: center;
    }

    #scrollTopBtn {
        width: 50px;
        height: 50px;

        right: 12px;
        bottom: 75px;

        font-size: 20px;
    }

    .whatsapp-float {
        width: 52px;
        height: 52px;

        right: 12px;
        bottom: 12px;

        font-size: 26px;
    }

    .services-page-hero {
        min-height: 420px;
        padding: 70px 20px;
    }

    .services-page-hero h1 {
        font-size: 38px;
    }

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

    .services-page-section {
        padding: 65px 0;
    }

    .service-page-image {
        height: 230px;
    }

    .service-page-content {
        padding: 22px;
    }

    .premium-testimonial {
        padding: 25px;
    }

    .testimonial-text {
        font-size: 14px;
    }

    .home-clients-section {
        padding: 70px 0;
    }

    .home-clients-section .section-title h2 {
        font-size: 32px;
    }

    .home-client-card {
        min-height: 165px;
        padding: 18px 10px;
    }

    .home-client-logo {
        width: 110px;
        height: 75px;
    }

    .home-client-logo img {
        max-height: 65px;
    }

    .home-client-card h4 {
        font-size: 13px;
    }

    .js-grid-item,
    .js-animate {
        transform: translateY(30px);
    }

    .js-grid-item.js-visible,
    .js-animate.js-visible {
        transform: translateY(0);
    }

}


/* =========================================================
   46. SMALL MOBILE - 576px
========================================================= */

@media (max-width: 576px) {

    .hero-overlay {
        padding: 80px 0;
    }

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

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

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

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

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

    .service-grid-card > img {
        height: 210px;
    }

    .service-grid-content {
        padding: 20px;
    }

    .blog-hero h1 {
        font-size: 32px;
    }

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

    .blog-content {
        padding: 20px;
    }

    .blog-content h4 {
        font-size: 20px;
    }

    .blog-detail-content {
        padding: 20px;
    }

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

    .contact-form-card,
    .contact-info-card,
    .privacy-card {
        padding: 20px;
    }

    .dashboard-stat-card {
        padding: 20px;
    }

    .dashboard-stat-card h1 {
        font-size: 30px;
    }

    .dashboard-stat-card i {
        font-size: 34px;
    }

    .dashboard-action-card {
        padding: 25px;
    }

    .admin-blog-thumb {
        width: 70px;
        height: 50px;
    }

    .navbar-brand img {
        width: 45px !important;
        height: 45px !important;
    }

    .logo-title {
        font-size: 18px !important;
    }

    .logo-subtitle {
        font-size: 9px !important;
    }

    .footer-services li {
        font-size: 13.5px;
    }

    .copyright-text {
        font-size: 12px;
    }

    .clients-hero {
        padding: 60px 20px 50px;
    }

    .clients-hero h1 {
        font-size: 34px;
    }

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

    .clients-section {
        padding: 45px 15px;
    }

    .client-logo-box {
        height: 135px;
        padding: 18px;
    }

    .client-info h3 {
        font-size: 15px;
    }

    .home-clients-section {
        padding: 60px 0;
    }

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

    .home-client-card {
        min-height: 150px;
        border-radius: 14px;
    }

    .home-client-logo {
        width: 95px;
        height: 65px;
        margin-bottom: 10px;
    }

    .home-client-logo img {
        max-height: 55px;
    }

    .home-client-card h4 {
        font-size: 12px;
    }

    .services-page-hero {
        min-height: 380px;
        padding: 60px 15px;
    }

    .services-page-hero h1 {
        font-size: 32px;
    }

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

    .service-page-image {
        height: 210px;
    }

    .service-page-content {
        padding: 22px;
    }

    .service-page-content h3 {
        font-size: 20px;
    }

    .footer-services li {
        font-size: 13px;
    }

    .js-reveal,
    .js-stagger-card {
        transform: translateY(25px);
        transition-duration: .6s;
    }

}


/* =========================================================
   47. VERY SMALL MOBILE - 480px
========================================================= */

@media (max-width: 480px) {

    .service-card {
        padding: 18px;
        border-radius: 16px;
    }

    .service-icon {
        width: 58px;
        height: 58px;
        font-size: 24px;
    }

    .service-card h3 {
        font-size: 18px;
    }

    .service-card p {
        font-size: 14px;
    }

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

    .footer-services li {
        font-size: 13px;
    }

}
/* =========================================================
   LATEST ARTICLES — HOME PAGE
========================================================= */

.latest-articles-section {
    position: relative;

    padding: 90px 0 100px;

    background: #ffffff;

    overflow: hidden;
}


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

.latest-articles-header {
    max-width: 760px;

    margin: 0 auto 50px;

    text-align: center;
}


.latest-articles-header h2 {
    margin: 0 0 14px;

    color: var(--navy);

    font-size: clamp(34px, 4vw, 48px);

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1px;
}


.latest-articles-header p {
    margin: 0;

    color: #697586;

    font-size: 17px;

    line-height: 1.7;
}


/* =========================================================
   ARTICLES GRID
========================================================= */

.latest-articles-grid {

    display: grid;

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

    gap: 24px;

    align-items: stretch;
}


/* =========================================================
   ARTICLE CARD
========================================================= */

.latest-article-card {

    display: flex;

    flex-direction: column;

    min-width: 0;

    background: #ffffff;

    border: 1px solid #e1e7ee;

    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 8px 25px rgba(7, 22, 42, 0.06);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}


.latest-article-card:hover {

    transform: translateY(-8px);

    border-color: rgba(0, 103, 177, 0.22);

    box-shadow:
        0 18px 42px rgba(7, 22, 42, 0.13);
}


/* =========================================================
   ARTICLE IMAGE
========================================================= */

.latest-article-image {

    position: relative;

    width: 100%;

    height: 220px;

    overflow: hidden;

    background: #eef3f7;
}


.latest-article-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.7s cubic-bezier(.2,.8,.2,1);
}


.latest-article-card:hover
.latest-article-image img {

    transform: scale(1.06);
}


/* =========================================================
   ARTICLE CONTENT
========================================================= */

.latest-article-content {

    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 25px 24px 27px;
}


/* =========================================================
   CATEGORY
========================================================= */

.latest-article-category {

    display: block;

    margin-bottom: 10px;

    color: #7b8794;

    font-size: 14px;

    font-weight: 500;
}


/* =========================================================
   TITLE
========================================================= */

.latest-article-content h3 {

    margin: 0 0 14px;

    color: #202b38;

    font-size: 22px;

    line-height: 1.25;

    font-weight: 800;

    letter-spacing: -0.3px;

    transition: color 0.3s ease;
}


.latest-article-card:hover
.latest-article-content h3 {

    color: var(--accent);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.latest-article-content p {

    margin: 0 0 22px;

    color: #697586;

    font-size: 15px;

    line-height: 1.7;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* =========================================================
   READ ARTICLE
========================================================= */

.latest-article-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: auto;

    align-self: flex-start;

    color: var(--navy) !important;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    transition:
        gap 0.3s ease,
        color 0.3s ease;
}


.latest-article-link i {

    transition:
        transform 0.3s ease;
}


.latest-article-link:hover {

    color: var(--accent) !important;

    gap: 12px;
}


.latest-article-link:hover i {

    transform: translateX(4px);
}


/* =========================================================
   SEE ALL NEWS
========================================================= */

.latest-articles-button {

    margin-top: 45px;

    text-align: center;
}


.latest-view-all {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 12px 22px;

    color: var(--navy) !important;

    background: #ffffff;

    border: 1px solid #cfd7df;

    border-radius: 6px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        border-color 0.3s ease;
}


.latest-view-all i {

    transition:
        transform 0.3s ease;
}


.latest-view-all:hover {

    background: var(--navy);

    color: #ffffff !important;

    border-color: var(--navy);

    transform: translateY(-2px);
}


.latest-view-all:hover i {

    transform: translateX(4px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .latest-articles-section {

        padding: 75px 0 85px;
    }


    .latest-articles-grid {

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

        gap: 22px;
    }


    .latest-article-image {

        height: 210px;
    }

}


@media (max-width: 767px) {

    .latest-articles-section {

        padding: 65px 0 75px;
    }


    .latest-articles-header {

        margin-bottom: 35px;
    }


    .latest-articles-header h2 {

        font-size: 34px;
    }


    .latest-articles-header p {

        font-size: 15px;
    }


    .latest-articles-grid {

        grid-template-columns: 1fr;

        gap: 22px;
    }


    .latest-article-image {

        height: 230px;
    }


    .latest-article-content {

        padding: 23px;
    }


    .latest-article-content h3 {

        font-size: 21px;
    }

}
/* =========================================================
   FLEET PAGE - PREMIUM HORIZONTAL SLIDER
========================================================= */

.fleet-page {
    position: relative;

    width: 100%;

    min-height: 100vh;

    padding: 100px 0 90px;

    background-image:
        linear-gradient(
            rgba(1, 27, 62, 0.72),
            rgba(1, 27, 62, 0.82)
        ),
        url("../images/fleet_image_background.jfif");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    overflow: hidden;
}

/* =========================================================
   CONTAINER
========================================================= */

.fleet-page-container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   HEADING
========================================================= */

.fleet-page-heading {
    max-width: 850px;
    margin: 0 auto 55px;
}

.fleet-page-heading .fleet-label {
    display: inline-block;

    padding: 8px 18px;
    margin-bottom: 14px;

    border-radius: 50px;

    background: rgba(255, 255, 255, 0.10);

    border: 1px solid rgba(255, 255, 255, 0.18);

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.8px;

    backdrop-filter: blur(8px);
}

.fleet-page-heading h1 {
    margin-bottom: 15px;

    color: #ffffff;

    font-size: clamp(40px, 5vw, 64px);

    font-weight: 800;

    letter-spacing: -1px;
}

.fleet-page-heading p {
    max-width: 720px;

    margin: auto;

    color: rgba(255, 255, 255, 0.82);

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   SLIDER CONTAINER
========================================================= */

.fleet-slider-container {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;

    padding: 0 70px;
}


/* =========================================================
   SLIDER WINDOW
========================================================= */

.fleet-slider-window {
    width: 100%;

    overflow: hidden;

    border-radius: 26px;
}


/* =========================================================
   SLIDER TRACK
========================================================= */

.fleet-slider-track {
    display: flex;

    width: 100%;

    transition:
        transform 0.75s cubic-bezier(.77, 0, .18, 1);

    will-change: transform;
}


/* =========================================================
   SLIDE
========================================================= */

.fleet-slide {
    min-width: 100%;

    flex: 0 0 100%;

    padding: 5px;
}


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

.fleet-slide-card {
    display: grid;

    grid-template-columns: 52% 48%;

    width: 100%;

    min-height: 500px;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.97);

    border: 1px solid rgba(255, 255, 255, 0.35);

    border-radius: 26px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.30);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.fleet-slide-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.38);
}


/* =========================================================
   IMAGE
========================================================= */

.fleet-slide-image {
    position: relative;

    min-height: 500px;

    overflow: hidden;
}

.fleet-slide-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent 55%,
            rgba(1, 27, 62, 0.15)
        );

    pointer-events: none;
}

.fleet-slide-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.8s ease;
}

.fleet-slide-card:hover .fleet-slide-image img {
    transform: scale(1.06);
}


/* =========================================================
   NUMBER
========================================================= */

.fleet-slide-image .fleet-number {
    position: absolute;

    top: 25px;
    left: 25px;

    z-index: 2;

    width: 55px;
    height: 55px;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--navy),
            var(--accent)
        );

    color: #ffffff;

    font-size: 14px;
    font-weight: 800;

    box-shadow:
        0 8px 25px rgba(1, 27, 62, 0.30);
}


/* =========================================================
   CONTENT
========================================================= */

.fleet-slide-content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 55px;
}

.fleet-slide-category {
    display: inline-block;

    margin-bottom: 14px;

    color: var(--accent);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.fleet-slide-content h2 {
    margin: 0 0 18px;

    color: var(--navy);

    font-size: clamp(26px, 3vw, 38px);

    font-weight: 800;

    line-height: 1.2;
}

.fleet-slide-content p {
    margin: 0 0 25px;

    color: #667085;

    font-size: 15px;

    line-height: 1.8;
}

.fleet-slide-content ul {
    list-style: none;

    padding: 0;
    margin: 0;
}

.fleet-slide-content li {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 12px;

    color: #344054;

    font-size: 14px;

    font-weight: 500;
}

.fleet-slide-content li i {
    color: var(--accent);

    font-size: 16px;
}


/* =========================================================
   ARROWS
========================================================= */

.fleet-slider-arrow {
    position: absolute;

    top: 50%;

    z-index: 10;

    width: 55px;
    height: 55px;

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

    border: none;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.96);

    color: var(--navy);

    font-size: 21px;

    cursor: pointer;

    transform: translateY(-50%);

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

    transition:
        all 0.3s ease;
}

.fleet-slider-prev {
    left: 0;
}

.fleet-slider-next {
    right: 0;
}

.fleet-slider-arrow:hover {
    background: var(--accent);

    color: #ffffff;

    transform:
        translateY(-50%)
        scale(1.08);

    box-shadow:
        0 15px 35px rgba(0, 103, 177, 0.35);
}

.fleet-slider-arrow:active {
    transform:
        translateY(-50%)
        scale(0.94);
}


/* =========================================================
   DOTS
========================================================= */

.fleet-slider-dots {
    display: flex;

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

    gap: 9px;

    margin-top: 30px;
}

.fleet-slider-dots button {
    width: 9px;
    height: 9px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.35);

    cursor: pointer;

    transition:
        width 0.3s ease,
        background 0.3s ease;
}

.fleet-slider-dots button.active {
    width: 30px;

    border-radius: 20px;

    background: var(--accent);
}


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

.fleet-page .services-cta {
    max-width: 850px;

    margin-left: auto;
    margin-right: auto;

    padding: 40px 25px;

    border-radius: 22px;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.14);

    backdrop-filter: blur(10px);
}

.fleet-page .services-cta h2 {
    color: #ffffff;

    font-weight: 700;
}

.fleet-page .services-cta p {
    color: rgba(255, 255, 255, 0.78);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .fleet-page {
        padding: 80px 0 70px;

        background-attachment: scroll;
    }

    .fleet-slider-container {
        padding: 0 55px;
    }

    .fleet-slide-card {
        grid-template-columns: 1fr;

        min-height: auto;
    }

    .fleet-slide-image {
        height: 330px;

        min-height: 330px;
    }

    .fleet-slide-content {
        padding: 35px;
    }

}


@media (max-width: 767px) {

    .fleet-page {
        padding: 65px 0 60px;
    }

    .fleet-page-heading {
        margin-bottom: 35px;
    }

    .fleet-page-heading h1 {
        font-size: 38px;
    }

    .fleet-page-heading p {
        font-size: 14px;
    }

    .fleet-slider-container {
        padding: 0 40px;
    }

    .fleet-slide-image {
        height: 260px;

        min-height: 260px;
    }

    .fleet-slide-image .fleet-number {
        width: 45px;
        height: 45px;

        top: 18px;
        left: 18px;
    }

    .fleet-slide-content {
        padding: 28px 24px;
    }

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

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

    .fleet-slide-content li {
        font-size: 13px;
    }

    .fleet-slider-arrow {
        width: 42px;
        height: 42px;

        font-size: 16px;
    }

}


@media (max-width: 480px) {

    .fleet-slider-container {
        padding: 0 32px;
    }

    .fleet-slide-image {
        height: 220px;

        min-height: 220px;
    }

    .fleet-slide-content {
        padding: 24px 20px;
    }

    .fleet-slide-content h2 {
        font-size: 21px;
    }

    .fleet-slide-content ul {
        margin-top: 5px;
    }

    .fleet-slide-content li {
        align-items: flex-start;
    }

    .fleet-slider-arrow {
        width: 36px;
        height: 36px;

        font-size: 14px;
    }

}


/* =========================================================
   18. TESTIMONIALS - PREMIUM HORIZONTAL SLIDER
========================================================= */

.testimonials-section {
    position: relative;

    width: 100%;

    padding: 100px 0;

    background:
        linear-gradient(
            rgba(1, 27, 62, 0.86),
            rgba(1, 27, 62, 0.92)
        ),
        url("../images/testonimial.jpg");

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

    background-attachment: fixed;

    overflow: hidden;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.testimonials-section .section-title {
    position: relative;

    z-index: 2;

    max-width: 850px;

    margin-left: auto;
    margin-right: auto;
}

.testimonials-section .section-title h2 {
    color: var(--white);

    font-size: 42px;

    font-weight: 800;

    margin-bottom: 15px;
}

.testimonials-section .section-title p {
    color: rgba(255, 255, 255, .82);

    max-width: 800px;

    margin: 0 auto;

    line-height: 1.8;
}

.section-badge {
    display: inline-block;

    padding: 7px 18px;

    margin-bottom: 15px;

    border-radius: 50px;

    background: rgba(255, 255, 255, .10);

    border: 1px solid rgba(255, 255, 255, .20);

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.6px;
}


/* =========================================================
   SLIDER WRAPPER
========================================================= */

.testimonial-slider-wrapper {
    position: relative;

    width: 100%;

    max-width: 1050px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;
}


/* =========================================================
   SLIDER
========================================================= */

.testimonial-slider {
    width: 100%;

    overflow: hidden;

    border-radius: 24px;
}

.testimonial-track {
    display: flex;

    width: 100%;

    transition:
        transform .75s cubic-bezier(.77, 0, .18, 1);

    will-change: transform;
}

.testimonial-slide {
    flex: 0 0 100%;

    width: 100%;

    padding: 5px;
}


/* =========================================================
   TESTIMONIAL CARD
========================================================= */

.premium-testimonial {
    position: relative;

    width: 100%;

    min-height: 330px;

    padding: 42px;

    background:
        rgba(255, 255, 255, .97);

    border: 1px solid rgba(255, 255, 255, .45);

    border-radius: 22px;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .22);

    overflow: hidden;

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.premium-testimonial::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--navy),
            var(--accent)
        );
}

.premium-testimonial:hover {
    transform: translateY(-8px);

    box-shadow:
        0 30px 70px rgba(0, 0, 0, .30);
}


/* =========================================================
   TOP AREA
========================================================= */

.testimonial-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 25px;
}

.quote-icon {
    width: 55px;
    height: 55px;

    display: flex;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--navy),
            var(--accent)
        );

    color: var(--white);

    font-size: 27px;

    box-shadow:
        0 8px 20px rgba(0, 103, 177, .22);

    transition:
        transform .4s ease;
}

.premium-testimonial:hover .quote-icon {
    transform: rotate(-8deg) scale(1.08);
}


/* =========================================================
   STARS
========================================================= */

.premium-testimonial .stars {
    color: var(--accent);

    font-size: 19px;

    letter-spacing: 3px;
}


/* =========================================================
   TESTIMONIAL TEXT
========================================================= */

.testimonial-text {
    color: #4B5563;

    font-size: 16px;

    line-height: 1.9;

    margin-bottom: 30px;

    max-width: 900px;
}


/* =========================================================
   AUTHOR
========================================================= */

.testimonial-author {
    display: flex;

    align-items: center;

    gap: 15px;

    padding-top: 20px;

    border-top:
        1px solid rgba(1, 27, 62, .10);
}

.author-icon {
    flex-shrink: 0;

    width: 50px;
    height: 50px;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(0, 103, 177, .10);

    color: var(--accent);

    font-size: 21px;
}

.testimonial-author h5 {
    margin: 0;

    color: var(--navy);

    font-size: 17px;

    font-weight: 700;
}

.testimonial-author span {
    display: block;

    margin-top: 4px;

    color: #667085;

    font-size: 12px;
}

.testimonial-author small {
    display: block;

    margin-top: 4px;

    color: var(--accent);

    font-size: 11px;

    font-weight: 700;
}


/* =========================================================
   LEFT / RIGHT ARROWS
========================================================= */

.testimonial-arrow {
    flex-shrink: 0;

    width: 52px;
    height: 52px;

    display: flex;

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

    border: 1px solid rgba(255, 255, 255, .30);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .12);

    color: #ffffff;

    font-size: 20px;

    cursor: pointer;

    backdrop-filter: blur(8px);

    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.testimonial-arrow:hover {
    background:
        var(--accent);

    color: #ffffff;

    transform: scale(1.10);

    box-shadow:
        0 10px 25px rgba(0, 103, 177, .30);
}

.testimonial-arrow:active {
    transform: scale(.95);
}


/* =========================================================
   DOTS
========================================================= */

.testimonial-dots {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    margin-top: 30px;
}

.testimonial-dots span {
    display: block;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .35);

    cursor: pointer;

    transition:
        width .35s ease,
        background .35s ease,
        transform .35s ease;
}

.testimonial-dots span:hover {
    transform: scale(1.2);

    background:
        rgba(255, 255, 255, .75);
}

.testimonial-dots span.active {
    width: 28px;

    border-radius: 20px;

    background:
        var(--accent);
}


/* =========================================================
   WHY CLIENTS TRUST US
========================================================= */

.trust-card {
    height: 100%;

    padding: 35px;

    text-align: center;

    background: var(--white);

    border: 1px solid rgba(1, 27, 62, .08);

    border-radius: 20px;

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

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}

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

    border-color: var(--accent);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, .14);
}

.trust-card i {
    display: inline-flex;

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

    width: 65px;
    height: 65px;

    margin-bottom: 18px;

    border-radius: 50%;

    background:
        rgba(0, 103, 177, .10);

    color: var(--accent);

    font-size: 30px;

    transition:
        transform .4s ease;
}

.trust-card:hover i {
    transform: rotateY(180deg);
}

.trust-card h3 {
    color: var(--navy);

    font-size: 24px;

    font-weight: 700;

    margin-bottom: 12px;
}

.trust-card p {
    color: #667085;

    line-height: 1.8;

    margin-bottom: 0;
}


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

.cta-section {
    position: relative;

    padding: 70px 30px;

    border-radius: 25px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--navy),
            var(--accent)
        );

    box-shadow:
        0 20px 50px rgba(1, 27, 62, .20);
}

.cta-section h2 {
    color: #ffffff;

    font-size: 34px;

    font-weight: 800;
}

.cta-section p {
    color: rgba(255, 255, 255, .85);

    max-width: 700px;

    margin: 15px auto 25px;

    line-height: 1.8;
}


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

@media (max-width: 991px) {

    .testimonials-section {
        padding: 80px 0;

        background-attachment: scroll;
    }

    .testimonial-slider-wrapper {
        gap: 10px;
    }

    .testimonial-arrow {
        width: 45px;
        height: 45px;

        font-size: 17px;
    }

    .premium-testimonial {
        min-height: 350px;

        padding: 30px;
    }

}


@media (max-width: 767px) {

    .testimonials-section {
        padding: 65px 0;
    }

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

    .testimonials-section .section-title p {
        font-size: 14px;
    }

    .testimonial-slider-wrapper {
        position: relative;

        display: block;
    }

    .testimonial-slider {
        width: 100%;
    }

    .testimonial-slide {
        padding: 3px;
    }

    .premium-testimonial {
        min-height: auto;

        padding: 28px 22px;
    }

    .testimonial-text {
        font-size: 14px;

        line-height: 1.8;
    }

    .testimonial-arrow {
        position: absolute;

        top: 50%;

        z-index: 10;

        width: 42px;
        height: 42px;

        transform: translateY(-50%);
    }

    .testimonial-arrow:hover {
        transform:
            translateY(-50%)
            scale(1.08);
    }

    .testimonial-prev {
        left: 8px;
    }

    .testimonial-next {
        right: 8px;
    }

    .testimonial-top {
        padding: 0 25px;
    }

    .testimonial-author {
        align-items: flex-start;
    }

    .testimonial-author span {
        max-width: 220px;
    }

    .cta-section {
        padding: 50px 20px;

        border-radius: 18px;
    }

    .cta-section h2 {
        font-size: 27px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .testimonial-track {
        transition: none;
    }

    .premium-testimonial,
    .trust-card,
    .testimonial-arrow,
    .quote-icon,
    .trust-card i {
        transition: none;
    }

}
/* =========================================================
   BLOG / LATEST NEWS HORIZONTAL SLIDER
========================================================= */

.latest-news-slider-wrapper {
    position: relative;

    display: flex;
    align-items: center;

    gap: 25px;

    width: 100%;

    margin-top: 20px;
}


/* =========================================================
   SLIDER WINDOW
========================================================= */

.latest-news-slider {
    width: 100%;

    overflow: hidden;

    border-radius: 24px;
}


/* =========================================================
   SLIDER TRACK
========================================================= */

.latest-news-track {
    display: flex;

    width: 100%;

    transition:
        transform .65s cubic-bezier(.65, 0, .35, 1);

    will-change: transform;
}


/* =========================================================
   SINGLE SLIDE
========================================================= */

.latest-news-slide {
    flex: 0 0 100%;

    width: 100%;

    display: grid;

    grid-template-columns: 48% 52%;

    min-height: 470px;

    background: var(--white);

    border:
        1px solid rgba(1, 27, 62, .08);

    border-radius: 24px;

    overflow: hidden;

    box-shadow:
        0 15px 45px rgba(1, 27, 62, .10);
}


/* =========================================================
   BLOG IMAGE
========================================================= */

.latest-news-slide .latest-news-image {
    position: relative;

    min-height: 470px;

    overflow: hidden;

    background: #EAF4FF;
}


.latest-news-slide .latest-news-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform .8s ease;
}


.latest-news-slide:hover .latest-news-image img {
    transform: scale(1.05);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.latest-news-slide .latest-news-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(1, 27, 62, .05),
            rgba(1, 27, 62, .35)
        );

    pointer-events: none;
}


/* =========================================================
   CATEGORY
========================================================= */

.latest-news-slide .latest-news-category {
    position: absolute;

    top: 25px;
    left: 25px;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    padding: 8px 16px;

    border-radius: 50px;

    background:
        rgba(255, 255, 255, .94);

    color: var(--navy);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, .10);
}


/* =========================================================
   CONTENT
========================================================= */

.latest-news-slide .latest-news-content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 55px;
}


.latest-news-slide .latest-news-meta {
    margin-bottom: 15px;

    color: var(--accent);

    font-size: 13px;

    font-weight: 600;
}


.latest-news-slide .latest-news-meta i {
    margin-right: 6px;
}


.latest-news-slide .latest-news-content h2 {
    margin: 0 0 18px;

    color: var(--navy);

    font-size: clamp(28px, 3vw, 42px);

    line-height: 1.2;

    font-weight: 800;
}


.latest-news-slide .latest-news-content p {
    margin: 0 0 28px;

    color: #667085;

    font-size: 15px;

    line-height: 1.8;

    max-width: 650px;
}


/* =========================================================
   READ ARTICLE
========================================================= */

.latest-news-slide .latest-news-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    width: fit-content;

    color: var(--accent);

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    transition:
        gap .3s ease,
        color .3s ease;
}


.latest-news-slide .latest-news-link:hover {
    gap: 14px;

    color: var(--navy);
}


/* =========================================================
   ARROWS
========================================================= */

.latest-news-arrow {
    flex: 0 0 auto;

    width: 52px;
    height: 52px;

    display: flex;

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

    border: none;

    border-radius: 50%;

    background:
        var(--navy);

    color: var(--white);

    font-size: 20px;

    cursor: pointer;

    box-shadow:
        0 8px 25px rgba(1, 27, 62, .18);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.latest-news-arrow:hover {
    transform: scale(1.08);

    background:
        var(--accent);

    box-shadow:
        0 12px 30px rgba(1, 27, 62, .22);
}


.latest-news-arrow:active {
    transform: scale(.94);
}


.latest-news-arrow:disabled {
    opacity: .45;

    cursor: not-allowed;

    transform: none;
}


/* =========================================================
   DOTS
========================================================= */

.latest-news-dots {
    display: flex;

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

    gap: 8px;

    margin-top: 28px;
}


.latest-news-dots button {
    width: 8px;
    height: 8px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: #CBD5E1;

    cursor: pointer;

    transition:
        width .35s ease,
        background .35s ease,
        transform .35s ease;
}


.latest-news-dots button:hover {
    transform: scale(1.2);
}


.latest-news-dots button.active {
    width: 28px;

    border-radius: 10px;

    background: var(--accent);
}


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

@media (max-width: 991px) {

    .latest-news-slider-wrapper {
        gap: 12px;
    }


    .latest-news-slide {
        grid-template-columns: 1fr;

        min-height: auto;
    }


    .latest-news-slide .latest-news-image {
        min-height: 320px;

        height: 320px;
    }


    .latest-news-slide .latest-news-content {
        padding: 35px;
    }


    .latest-news-slide .latest-news-content h2 {
        font-size: 30px;
    }


    .latest-news-arrow {
        width: 45px;
        height: 45px;

        font-size: 17px;
    }

}


@media (max-width: 576px) {

    .latest-news-slider-wrapper {
        gap: 8px;
    }


    .latest-news-slider {
        border-radius: 18px;
    }


    .latest-news-slide {
        border-radius: 18px;
    }


    .latest-news-slide .latest-news-image {
        min-height: 240px;

        height: 240px;
    }


    .latest-news-slide .latest-news-category {
        top: 15px;
        left: 15px;

        padding: 7px 12px;

        font-size: 10px;
    }


    .latest-news-slide .latest-news-content {
        padding: 25px 22px;
    }


    .latest-news-slide .latest-news-content h2 {
        font-size: 24px;
    }


    .latest-news-slide .latest-news-content p {
        font-size: 14px;

        line-height: 1.7;
    }


    .latest-news-arrow {
        width: 40px;
        height: 40px;

        font-size: 15px;
    }


    .latest-news-dots {
        margin-top: 20px;
    }

}


/* =========================================================
   PREMIUM PAGE OPEN ANIMATION
========================================================= */

body {
    opacity: 1;

    transition:
        opacity .45s ease;
}


/* Starting state */

body.page-loading {
    opacity: 0;
}


/* Loaded state */

body.page-loaded {
    opacity: 1;
}


/* =========================================================
   HERO CONTENT ENTRANCE
========================================================= */

body.page-loaded .about-hero .container,
body.page-loaded .services-page-hero .container,
body.page-loaded .latest-news-hero .container {
    animation:
        pageHeroEnter .8s cubic-bezier(.22, 1, .36, 1) both;
}


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

@keyframes pageHeroEnter {

    0% {
        opacity: 0;

        transform:
            translateY(35px)
            scale(.98);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* =========================================================
   HERO IMAGE ENTRANCE
========================================================= */

body.page-loaded .about-hero::after {
    animation:
        heroImageEnter 1.1s cubic-bezier(.22, 1, .36, 1) both;
}


@keyframes heroImageEnter {

    0% {
        opacity: 0;

        transform:
            translateX(45px)
            scale(1.04);
    }

    100% {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);
    }

}


/* =========================================================
   TESTIMONIAL SECTION ENTRANCE
========================================================= */

body.page-loaded .testimonials-section {
    animation:
        sectionEnter .8s ease both;
}


@keyframes sectionEnter {

    0% {
        opacity: 0;

        transform:
            translateY(25px);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   TESTIMONIAL IMAGE ENTRANCE
========================================================= */

body.page-loaded .testimonials-section::after {
    animation:
        testimonialImageEnter 1.2s cubic-bezier(.22, 1, .36, 1) both;
}


@keyframes testimonialImageEnter {

    0% {
        opacity: 0;

        transform:
            translateX(50px)
            scale(1.05);
    }

    100% {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body,
    body.page-loaded .about-hero .container,
    body.page-loaded .about-hero::after,
    body.page-loaded .testimonials-section,
    body.page-loaded .testimonials-section::after {
        animation: none !important;

        transition: none !important;

        transform: none !important;

        opacity: 1 !important;
    }

}

/* =========================================================
   FINAL ABOUT HERO FIX
   Uses aboutpage.jpg on all screen sizes
========================================================= */

.about-hero {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    background: #0B1F3A;
    padding: 90px 0;
    text-align: left;
}


/* =========================================================
   ABOUT HERO BACKGROUND IMAGE
========================================================= */

.about-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background-image:
        linear-gradient(
            90deg,
            rgba(11, 31, 58, 0.62) 0%,
            rgba(11, 31, 58, 0.35) 35%,
            rgba(11, 31, 58, 0.15) 65%,
            rgba(11, 31, 58, 0.08) 100%
        ),
        url("../images/aboutpage.jpg");

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

    z-index: 0;

    pointer-events: none;
}


/* =========================================================
   ABOUT HERO CONTENT
========================================================= */

.about-hero .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   ABOUT HERO HEADING
========================================================= */

.about-hero h1 {
    position: relative;
    z-index: 2;
}


/* =========================================================
   ABOUT HERO PARAGRAPH
========================================================= */

.about-hero p {
    position: relative;
    z-index: 2;
}


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

@media (max-width: 991px) {

    .about-hero {
        min-height: 380px;
        padding: 80px 0;
        text-align: center;
    }

    .about-hero::after {
        width: 100%;
        height: 100%;

        background-image:
            linear-gradient(
                rgba(11, 31, 58, 0.48),
                rgba(11, 31, 58, 0.48)
            ),
            url("../images/aboutpage.jpg");

        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .about-hero .container {
        width: 100%;
    }

    .about-hero p {
        margin-left: auto;
        margin-right: auto;
    }
}


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

@media (max-width: 768px) {

    .about-hero {
        min-height: 350px;
        padding: 70px 20px;
        text-align: center;
    }

    .about-hero::after {
        width: 100%;
        height: 100%;

        background-image:
            linear-gradient(
                rgba(11, 31, 58, 0.50),
                rgba(11, 31, 58, 0.50)
            ),
            url("../images/aboutpage.jpg");

        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

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

    .about-hero p {
        font-size: 15px;
        line-height: 1.6;
    }
}


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

@media (max-width: 576px) {

    .about-hero {
        min-height: 350px;
        padding: 70px 20px;
    }

    .about-hero::after {
        width: 100%;
        height: 100%;

        background-image:
            linear-gradient(
                rgba(11, 31, 58, 0.52),
                rgba(11, 31, 58, 0.52)
            ),
            url("../images/aboutpage.jpg");

        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

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

    .about-hero p {
        font-size: 15px;
        line-height: 1.6;
    }
}


/* =========================================================
   ABOUT HERO ANIMATION
========================================================= */

body.page-loaded .about-hero::after {
    animation:
        heroImageEnter 1.1s cubic-bezier(.22, 1, .36, 1) both;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body.page-loaded .about-hero::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}
/* =========================================================
   END OF CLEAN CSS
========================================================= */