@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;800&display=swap');




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

body {
    font-family: 'Roboto', sans-serif;
}

:root {
    --primary-color: #003477;
    --dark-blue: #002b68;
    --light-blue: #1161a8;
    --white: #ffffff;
    --text-dark: #151515;
}

.custom-container {
    padding-left: clamp(12px, 1.5vw, 22px);
    padding-right: clamp(12px, 1.5vw, 22px);
}

.wide-container {
    max-width: 1650px;
    margin: 0 auto;
    padding-left: clamp(15px, 2vw, 30px);
    padding-right: clamp(15px, 2vw, 30px);
}

img {
    max-width: 100%;
    height: auto;
}


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

.main-logo {
    width: clamp(110px, 12vw, 180px);
    height: auto;
    object-fit: contain;
}

.top-header {
    width: 100%;
    height: 28px;
    background: linear-gradient(90deg,
            #002d6c 0%,
            #003f86 50%,
            #002d6c 100%);

    display: flex;
    align-items: center;
}


.top-header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.top-contact {
    display: flex;
    align-items: center;
    gap: 35px;
}


.top-contact a {
    color: #ffffff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
}


.top-contact i {
    margin-right: 7px;
    font-size: 11px;
}


.top-social {
    display: flex;
    align-items: center;
    gap: 13px;
}


.top-social span {
    color: #ffffff;
    font-size: 11px;
    font-weight: 500;
}


.top-social a {
    width: 18px;
    height: 18px;

    background: #1762a3;

    color: #ffffff;

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

    border-radius: 50%;

    font-size: 10px;

    text-decoration: none;

    transition: 0.3s;
}


.top-social a:hover {
    background: #ffffff;
    color: var(--primary-color);
}


/* =========================
   MAIN NAVBAR
========================= */

.main-navbar {
    position: sticky;
    top: 0;
    z-index: 999;

    width: 100%;
    min-height: clamp(68px, 6vw, 88px);

    background: #ffffff;

    padding-top: 0;
    padding-bottom: 0;

    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
}


/* =========================
   LOGO
========================= */

.navbar-brand {
    margin-right: clamp(8px, 3vw, 50px);
    flex-shrink: 0;
}


.logo {
    display: flex;
    flex-direction: column;

    line-height: 1;
}


.logo-main {
    color: #064286;

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

    letter-spacing: 1px;
}


.logo-sub {
    color: #064286;

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

    margin-top: 2px;
}


/* =========================
   NAVIGATION LINKS
========================= */

.navbar-nav {
    gap: clamp(0px, 0.4vw, 8px);
    flex-wrap: nowrap;
}


.navbar-nav .nav-link {
    position: relative;

    color: #111111;

    font-size: clamp(11.5px, 1.05vw, 14px);
    font-weight: 700;

    padding: clamp(18px, 2.2vw, 32px) clamp(5px, 0.75vw, 14px) !important;

    white-space: nowrap;

    transition: 0.3s;
}


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


/* ACTIVE LINE */

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


.navbar-nav .nav-link.active::after {

    content: "";

    position: absolute;

    left: 6px;
    right: 6px;
    bottom: 16px;

    height: 2px;

    background: var(--primary-color);
}


/* =========================
   DROPDOWN
========================= */

.dropdown-menu {

    border: none;

    border-radius: 0;

    padding: 8px 0;

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


.dropdown-item {

    padding: 10px 20px;

    font-size: 14px;

    font-weight: 500;

    transition: 0.3s;
}


.dropdown-item:hover {

    background: var(--primary-color);

    color: #ffffff;
}


/* =========================
   QUOTE BUTTON
========================= */

.quote-btn {

    min-width: clamp(100px, 9vw, 135px);

    height: clamp(34px, 3vw, 42px);

    margin-left: clamp(6px, 1.2vw, 20px);

    padding: 0 clamp(10px, 1.2vw, 18px);

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

    gap: clamp(5px, 0.5vw, 8px);

    background: linear-gradient(135deg,
            #073b7b,
            #002c68);

    color: #ffffff;

    text-decoration: none;

    font-size: clamp(10px, 0.8vw, 12px);
    font-weight: 700;

    white-space: nowrap;

    border-radius: 4px;

    box-shadow: 0 5px 15px rgba(0, 48, 110, 0.25);

    transition: 0.3s;
}


.quote-btn i {
    font-size: clamp(13px, 1.2vw, 17px);
}


.quote-btn:hover {

    background: #001f4e;

    color: #ffffff;

    transform: translateY(-2px);
}


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

/* Small laptops: 992px - 1299px — compact horizontal navbar */
@media (min-width: 992px) and (max-width: 1299px) {

    .main-navbar {
        min-height: 60px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .main-logo {
        width: clamp(90px, 10vw, 130px);
    }

    .navbar-brand {
        margin-right: clamp(4px, 1vw, 16px);
    }

    .navbar-nav {
        gap: 0;
        flex-wrap: nowrap;
    }

    .navbar-nav .nav-link {
        font-size: clamp(10px, 0.85vw, 12.5px) !important;
        padding: 20px clamp(4px, 0.5vw, 9px) !important;
        white-space: nowrap;
        letter-spacing: 0;
    }

    .navbar-nav .nav-link.active::after {
        left: 4px;
        right: 4px;
        bottom: 12px;
    }

}


/* Tablet / Mobile: hamburger menu (991px and below) */
@media (max-width: 991px) {

    .main-navbar {
        padding: 12px 0;
        min-height: unset;
    }

    .navbar-toggler {
        border-color: var(--primary-color);
        padding: 5px 9px;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,52,119,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    .navbar-collapse {
        padding: 12px 0 16px;
        border-top: 1px solid #e8e8e8;
        margin-top: 12px;
    }

    .navbar-nav {
        align-items: flex-start !important;
        flex-wrap: wrap;
        gap: 0;
        width: 100%;
    }

    .navbar-nav .nav-item {
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }

    .navbar-nav .nav-link {
        font-size: 14px !important;
        padding: 11px 8px !important;
        white-space: normal;
        width: 100%;
    }

    .navbar-nav .nav-link:hover {
        background: #f4f7ff;
        padding-left: 14px !important;
    }

    .navbar-nav .nav-link.active {
        background: #f0f5ff;
        padding-left: 14px !important;
    }

    .navbar-nav .nav-link.active::after {
        display: none;
    }

    .navbar-nav .nav-link.active::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        bottom: 8px;
        width: 3px;
        background: var(--primary-color);
        border-radius: 0 3px 3px 0;
    }

    .main-logo {
        width: clamp(110px, 28vw, 155px);
    }

}


/* Mobile: 576px and below */
@media (max-width: 576px) {

    .top-header {
        height: auto;
        padding: 6px 0;
    }

    .top-header-wrapper {
        flex-direction: column;
        gap: 5px;
    }

    .top-contact {
        gap: 10px;
    }

    .top-contact a {
        font-size: 9px;
    }

    .top-social span {
        display: none;
    }

    .logo-main {
        font-size: 25px;
    }

    .logo-sub {
        font-size: 12px;
    }

    .main-logo {
        width: 100px;
    }

    .navbar-nav .nav-link {
        font-size: 13px !important;
        padding: 10px 8px !important;
    }

}


/* =====================================
   HERO BANNER SLIDER
===================================== */

.hero-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #002f6c;
}


/* CAROUSEL */

#heroCarousel {
    width: 100%;
}


/* SLIDE */

#heroCarousel .carousel-item {
    width: 100%;
    position: relative;
}


/* BANNER IMAGE */

.hero-banner-img {
    display: block;

    width: 100%;

    height: auto;

    object-fit: cover;

    object-position: center;
}

.hero-center-text {
    position: absolute;
    top: 4%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 5;
    width: 90%;
    max-width: 900px;
}

.hero-center-text .main-heading {
    font-family: 'Arial', sans-serif;
    font-size: clamp(16px, 3.5vw, 55px);
    font-weight: 900;
    color: #032b5e;
    margin-bottom: clamp(2px, 0.5vw, 5px);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-center-text .main-heading .highlight-blue {
    font-size: clamp(20px, 5vw, 95px);
    color: #15509c;
    display: block;
    margin-top: -5px;
    letter-spacing: 2px;
}

.hero-center-text .sub-heading {
    font-size: clamp(8px, 1.5vw, 24px);
    font-weight: 800;
    color: #111;
    margin-bottom: clamp(5px, 1.5vw, 15px);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hero-center-text .sub-heading .highlight-orange {
    color: #ff6a00;
}

.hero-center-text .desc-text {
    font-size: clamp(7px, 1.2vw, 20px);
    font-weight: 600;
    color: #333;
    line-height: 1.5;
}

.hero-card {
    position: absolute;
    top: 75%;
    transform: translateY(-50%);
    z-index: 5;
    width: 48%;
    max-width: 580px;
    padding: clamp(10px, 2vw, 30px);
    color: #fff;
}

.hero-card-left {
    left: 0;
    background: transparent;
    border-radius: 0 150px 150px 0 / 0 50% 50% 0;
    padding: clamp(10px, 2vw, 30px) clamp(20px, 5vw, 60px);
}

.hero-card-right {
    right: 0;
    background: transparent;
    border-radius: 150px 0 0 150px / 50% 0 0 50%;
    padding: clamp(10px, 2vw, 30px) clamp(20px, 5vw, 60px);
}

.hero-card-top {
    display: flex;
    align-items: center;
    gap: clamp(5px, 1.5vw, 20px);
    margin-bottom: clamp(5px, 1vw, 15px);
}

.hero-card-title h2 {
    font-size: clamp(10px, 2vw, 34px);
    font-weight: 900;
    margin: 0;
    line-height: 1.1;
    text-transform: uppercase;
}

.hero-card-desc {
    font-size: clamp(7px, 1.2vw, 15px);
    line-height: 1.4;
    margin-bottom: clamp(5px, 1vw, 12px);
    opacity: 0.9;
}

.hero-card-line {
    width: clamp(20px, 4vw, 60px);
    height: 3px;
    background: #36a5fc;
    margin-bottom: clamp(5px, 1.5vw, 20px);
}

.hero-card-features {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.hero-card-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    border-right: 1px solid rgba(255,255,255,0.2);
    padding: 0 clamp(2px, 0.5vw, 5px);
}

.hero-card-feature:last-child {
    border-right: none !important;
}

.hero-card-feature i {
    font-size: clamp(10px, 1.8vw, 28px);
    margin-bottom: clamp(2px, 0.5vw, 8px);
}

.hero-card-feature span {
    font-size: clamp(5px, 0.8vw, 12px);
    line-height: 1.3;
    font-weight: 500;
}

.hero-card-btn-wrapper {
    margin-top: clamp(5px, 1.2vw, 18px);
}

.hero-card .btn {
    font-size: clamp(7px, 1.1vw, 16px) !important;
    padding: clamp(4px, 0.6vw, 8px) clamp(10px, 1.5vw, 24px) !important;
}

@media (max-width: 768px) {
    .hero-center-text .desc-text,
    .hero-card-desc {
        display: none !important;
    }
}

.hero-banner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(40px, 3.2vw, 54px);
    padding: 0 clamp(16px, 2vw, 34px);
    color: #ffffff;
    font-size: clamp(13px, 1vw, 16px);
    font-weight: 700;
    text-decoration: none;
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.hero-banner-btn:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.hero-banner-btn-blue {
    background: #07509b;
}

.hero-banner-btn-blue:hover {
    background: #003477;
}

.hero-banner-btn-green {
    background: #4b963f;
}

.hero-banner-btn-green:hover {
    background: #317328;
}


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

.carousel-control-prev,
.carousel-control-next {
    width: 7%;
    opacity: 0;

    transition: all 0.4s ease;
}


/* SHOW ARROWS ON HOVER */

.hero-slider:hover .carousel-control-prev,
.hero-slider:hover .carousel-control-next {
    opacity: 1;
}


/* CUSTOM ARROW */

.custom-slider-arrow {
    width: 48px;
    height: 48px;

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

    background: rgba(0, 48, 110, 0.85);

    color: #ffffff;

    border-radius: 50%;

    font-size: 23px;

    transition: all 0.3s ease;
}


.custom-slider-arrow:hover {
    background: #f57c00;

    transform: scale(1.08);
}


/* =====================================
   INDICATORS
===================================== */

.carousel-indicators {
    bottom: 18px;
}


.carousel-indicators [data-bs-target] {
    width: 9px;
    height: 9px;

    border: none;

    border-radius: 50%;

    background-color: #ffffff;

    opacity: 0.6;

    margin: 0 5px;

    transition: all 0.3s ease;
}


.carousel-indicators .active {
    width: 28px;

    border-radius: 10px;

    opacity: 1;
}

.carousel-indicators [data-bs-target]:nth-child(odd).active {
    background-color: #07509b;
}

.carousel-indicators [data-bs-target]:nth-child(even).active {
    background-color: #4b963f;
}


/* =====================================
   FADE ANIMATION
===================================== */

.carousel-fade .carousel-item {
    opacity: 0;

    transition: opacity 0.8s ease-in-out;
}


.carousel-fade .carousel-item.active {
    opacity: 1;
}


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

@media (max-width: 991px) {

    .custom-slider-arrow {
        width: 40px;
        height: 40px;

        font-size: 19px;
    }

}


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

@media (max-width: 576px) {

    .hero-banner-img {
        width: 100%;

        min-height: 220px;

        object-fit: cover;
    }

    .hero-banner-actions {
        bottom: 34px;
    }

    .hero-banner-actions-left {
        left: 14px;
        right: auto;
    }

    .hero-banner-actions-right {
        right: 14px;
        left: auto;
    }

    .hero-banner-btn {
        min-height: 38px;
        padding: 0 12px;
        font-size: 12px;
    }


    .carousel-control-prev,
    .carousel-control-next {
        width: 12%;
        opacity: 1;
    }


    .custom-slider-arrow {
        width: 34px;
        height: 34px;

        font-size: 16px;
    }


    .carousel-indicators {
        bottom: 8px;
    }


    .carousel-indicators [data-bs-target] {
        width: 7px;
        height: 7px;
    }


    .carousel-indicators .active {
        width: 22px;
    }

}


/* =====================================
   STATS COUNTER SECTION
===================================== */

.stats-section {
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.stats-container {
    width: 100%;
    max-width: 100%;
    padding: 0 clamp(10px, 1.5vw, 22px);
}

/* STATS GRID — all 5 in one row always on desktop */
.stats-grid {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
}


/* STAT ITEM */

.stat-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;

    min-height: clamp(85px, 7.5vw, 115px);

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

    gap: clamp(6px, 1vw, 16px);

    padding: clamp(12px, 1.8vw, 26px) clamp(6px, 0.8vw, 12px);
}


/* DIVIDER LINE */

.stat-item::after {
    content: "";

    position: absolute;

    right: 0;
    top: 22%;

    width: 1px;
    height: 56%;

    background: #e6e6e6;
}


.last-item::after {
    display: none;
}


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

.stat-icon {
    flex-shrink: 0;

    color: #285b9c;

    font-size: clamp(24px, 2.5vw, 40px);

    line-height: 1;

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


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

.stat-content {
    min-width: 0;
}

.stat-content h3 {
    margin: 0;

    color: #002f6c;

    font-size: clamp(15px, 1.6vw, 26px);

    line-height: 1;

    font-weight: 800;

    letter-spacing: 0.3px;

    white-space: nowrap;
}


.stat-content p {
    margin: clamp(3px, 0.4vw, 7px) 0 0;

    color: #222222;

    font-size: clamp(8px, 0.75vw, 12px);

    font-weight: 700;

    white-space: nowrap;
}


/* =====================================
   TABLET RESPONSIVE (≤ 991px)
===================================== */

@media (max-width: 991px) {

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        flex-direction: unset;
    }

    .stat-item::after {
        display: none;
    }

    .stat-item {
        border-bottom: 1px solid #eeeeee;
        justify-content: flex-start;
        padding: 14px 16px;
        gap: 12px;
    }

    .stat-icon {
        font-size: 28px;
    }

    .stat-content h3 {
        font-size: 18px;
    }

    .stat-content p {
        font-size: 10px;
        white-space: nowrap;
    }

    .stats-section {
        padding: 8px 0;
    }

}


/* =====================================
   MOBILE RESPONSIVE (≤ 576px)
===================================== */

@media (max-width: 576px) {

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

    .stats-container {
        padding: 10px 15px;
    }

    .stat-item {
        min-height: 85px;
        justify-content: flex-start;
        padding: 12px 12px;
        border-bottom: 1px solid #eeeeee;
    }

    .stat-icon {
        font-size: 26px;
        width: 36px;
    }

    .stat-content h3 {
        font-size: 18px;
    }

    .stat-content p {
        font-size: 9px;
    }

    .last-item {
        border-bottom: none;
    }

}


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

.about-section {
    position: relative;
    width: 100%;
    padding: clamp(40px, 5vw, 70px) 0;
    background: #ffffff;
    overflow: hidden;
}


/* ==========================================
   LEFT IMAGE
========================================== */

.about-image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
}

.about-gallery {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 14px;
    overflow: visible;
}

.about-gallery-main,
.about-gallery-grid {
    min-width: 0;
}

.about-image {
    display: block;
    width: 100%;
    height: clamp(350px, 38vw, 550px);
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
}


.about-image-wrapper:hover .about-image {
    transform: scale(1.04);
}

.about-gallery-main {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.14);
}

.about-gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.about-gallery-img {
    display: block;
    width: 100%;
    height: calc((clamp(350px, 38vw, 550px) - 42px) / 4);
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
    transition: transform 0.5s ease;
}

.about-gallery-img:hover {
    transform: scale(1.04);
}


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

.about-content {
    padding-left: 10px;
}


/* SMALL HEADING */

.about-small-title {
    position: relative;
    display: inline-block;

    margin-bottom: 12px;

    color: #4b963f;

    font-size: clamp(14px, 1.4vw, 20px);
    line-height: 1;

    font-weight: 900;

    letter-spacing: 0.3px;
}


/* MAIN HEADING */

.about-content h2 {
    margin: 0 0 20px;

    color: #111111;

    font-size: clamp(24px, 2.5vw, 37px);
    line-height: 1.15;

    font-weight: 800;
}


/* DESCRIPTION */

.about-description {
    max-width: 590px;

    margin: 0 0 30px;

    color: #333333;

    font-size: clamp(13px, 1.1vw, 16px);
    line-height: 1.65;

    font-weight: 400;
}


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

.about-features {
    width: 100%;

    display: grid;

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

    align-items: center;

    gap: 18px;

    margin-bottom: 30px;
}


/* FEATURE */

.about-feature {
    display: flex;
    align-items: center;

    gap: 11px;
}


/* ICON */

.feature-icon {
    flex-shrink: 0;

    width: 38px;
    height: 38px;

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

    color: #4b963f;

    font-size: 31px;

    line-height: 1;
}


/* FEATURE TEXT */

.about-feature span {
    color: #222222;

    font-size: 14px;
    line-height: 1.5;

    font-weight: 700;

    white-space: nowrap;
}


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

.about-btn {
    display: inline-flex;

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

    gap: 20px;

    min-height: 44px;

    padding: 0 18px;

    background: linear-gradient(135deg,
            #073b7b,
            #002c68);

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    border-radius: 4px;

    box-shadow: 0 6px 16px rgba(0, 52, 119, 0.20);

    transition: all 0.3s ease;
}


.about-btn i {
    font-size: 17px;

    transition: transform 0.3s ease;
}


.about-btn:hover {
    color: #ffffff;

    background: linear-gradient(135deg,
            #4b963f,
            #367c2d);

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(0, 52, 119, 0.25);
}


.about-btn:hover i {
    transform: translateX(4px);
}


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

@media (max-width: 1199px) {

    .about-content h2 {
        font-size: 33px;
    }


    .about-features {
        grid-template-columns: repeat(2, 1fr);

        gap: 20px;
    }

}


@media (max-width: 991px) {

    .about-section {
        padding: 60px 0;
    }


    .about-content {
        padding-left: 0;
    }


    .about-image {
        height: 480px;
    }

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

    .about-gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .about-gallery-img {
        height: 130px;
    }


    .about-content h2 {
        font-size: 34px;
    }

}


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

@media (max-width: 576px) {

    .about-section {
        padding: 45px 0;
    }


    .about-image {
        height: 350px;
    }

    .about-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .about-gallery-img {
        height: 140px;
    }


    .about-content h2 {
        font-size: 28px;

        line-height: 1.25;
    }


    .about-description {
        font-size: 15px;
    }


    .about-features {
        grid-template-columns: repeat(2, 1fr);

        gap: 20px 10px;

        margin-bottom: 25px;
    }


    .about-feature {
        gap: 8px;
    }


    .feature-icon {
        width: 32px;
        height: 32px;

        font-size: 26px;
    }


    .about-feature span {
        font-size: 12px;
    }


    .about-btn {
        min-height: 42px;

        font-size: 13px;

        gap: 15px;
    }

}


/* ==========================================
   OUR SOLUTIONS SECTION
========================================== */

.solutions-section {
    width: 100%;
    padding: clamp(15px, 1.5vw, 20px) 0 clamp(40px, 5vw, 70px);
    background: #ffffff;
}


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

.solutions-heading {
    text-align: center;
    margin-bottom: 18px;
}


.solutions-heading span {
    display: block;

    margin-bottom: 3px;

    color: #003477;

    font-size: clamp(13px, 1.4vw, 20px);

    line-height: 1;

    font-weight: 900;

    letter-spacing: 0.3px;
}


.solutions-heading h2 {
    margin: 0;

    color: #111111;

    font-size: clamp(22px, 2.5vw, 37px);

    line-height: 1.3;

    font-weight: 800;
}


/* ==========================================
   SOLUTION CARD
========================================== */

.solution-card {
    position: relative;
    width: 100%;
    height: clamp(300px, 28vw, 400px);
    margin-top: 30px;
}

.solution-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 15px;
    background: #003477;
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.14);
}

.solution-badge {
    position: absolute;
    top: -30px;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border: 4px solid #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    font-size: 30px;
    color: #ffffff;
}

.sol-machine-card .solution-badge {
    right: 40px;
    background: #003477;
}

.sol-solar-card .solution-badge {
    left: 40px;
    background: #185b12;
}


/* ==========================================
   BACKGROUND IMAGE
========================================== */

.solution-bg {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.7s ease;
}


/* ==========================================
   OVERLAYS
========================================== */

/* BLUE MACHINE CARD */

.sol-machine-card .solution-overlay {
    position: absolute;

    inset: 0;

    background: linear-gradient(90deg,
            rgba(0, 26, 61, 0.98) 0%,
            rgba(0, 34, 77, 0.95) 45%,
            rgba(0, 52, 119, 0.1) 80%,
            rgba(0, 52, 119, 0) 100%);
}


/* GREEN SOLAR CARD */

.sol-solar-card .solution-overlay {
    position: absolute;

    inset: 0;

    background: linear-gradient(90deg,
            rgba(10, 41, 7, 0.98) 0%,
            rgba(17, 61, 13, 0.95) 45%,
            rgba(48, 124, 34, 0.1) 80%,
            rgba(48, 124, 34, 0) 100%);
}


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

.solution-content {
    position: relative;

    z-index: 2;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    padding: 30px;
}


/* HEADING */

.solution-content h3 {
    margin: 0 0 14px;

    color: #ffffff;

    font-size: 24px;

    line-height: 1.15;

    font-weight: 800;
}


/* DESCRIPTION */

.solution-content p {
    margin: 0 0 22px;

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

    font-size: 12px;

    line-height: 1.6;

    font-weight: 400;
}


/* ==========================================
   BUTTON
========================================== */

.solution-btn {
    min-height: 42px;

    padding: 0 20px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

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

    border-radius: 5px;

    transition: all 0.3s ease;
}

.sol-machine-card .solution-btn {
    background: #002c68;
}

.sol-solar-card .solution-btn {
    background: #25661b;
}


.solution-btn i {
    font-size: 15px;

    transition: transform 0.3s ease;
}


/* ==========================================
   HOVER EFFECT
========================================== */

.solution-card:hover .solution-bg {
    transform: scale(1.08);
}


.solution-btn:hover {
    background: #ffffff;

    color: #003477;

    border-color: #ffffff;
}


.sol-solar-card .solution-btn:hover {
    color: #4b963f;
}


.solution-btn:hover i {
    transform: translateX(4px);
}


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

@media (max-width: 991px) {

    .solutions-section {
        padding: 20px 0 60px;
    }


    .solution-card {
        height: 350px;
    }


    .solutions-heading h2 {
        font-size: 27px;
    }

}


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

@media (max-width: 576px) {

    .solutions-section {
        padding: 10px 0 45px;
    }


    .solutions-heading {
        margin-bottom: 20px;
    }


    .solutions-heading span {
        font-size: 11px;
    }


    .solutions-heading h2 {
        font-size: 23px;
    }


    .solution-card {
        height: 320px;
    }


    .solution-content {
        padding: 25px;
    }


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


    .solution-content p {
        font-size: 11px;
    }

}


/* ==========================================
   ROLL FORMING MACHINES SECTION
========================================== */

.machines-section {
    width: 100%;
    padding: clamp(35px, 4.5vw, 65px) 0 25px;
    background: #ffffff;
}


.machines-container {
    max-width: 1650px;
    margin: auto;
    padding-left: 15px;
    padding-right: 15px;
}


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

.machines-heading {
    text-align: center;
    margin-bottom: 20px;
}


.machines-heading span {
    display: block;

    margin-bottom: 4px;

    color: #4b963f;

    font-size: clamp(13px, 1.4vw, 20px);

    line-height: 1;

    font-weight: 900;

    letter-spacing: 0.4px;
}


.machines-heading h2 {
    margin: 0;

    color: #111111;

    font-size: clamp(20px, 2.2vw, 32px);

    line-height: 1.25;

    font-weight: 600;
}


/* ==========================================
   PRODUCT CARD
========================================== */

.machine-card {
    position: relative;

    width: 100%;
    height: clamp(280px, 26vw, 380px);

    padding: 18px 15px 15px;

    display: flex;
    flex-direction: column;

    align-items: center;

    background: #ffffff;

    border: 1px solid #eeeeee;

    border-radius: 7px;

    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);

    overflow: hidden;

    transition: all 0.4s ease;
}


/* ==========================================
   PRODUCT IMAGE
========================================== */

.machine-image {
    width: 100%;
    height: clamp(160px, 18vw, 300px);

    display: flex;

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

    overflow: hidden;
}


.machine-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}


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

.machine-card h3 {
    width: 100%;

    margin: 8px 0 20px;

    color: #003477;

    text-align: center;

    font-size: 14px;

    line-height: 1.4;

    font-weight: 700;
}


/* ==========================================
   LEARN MORE LINK
========================================== */

.machine-link {
    margin-top: auto;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #07509b;

    text-decoration: none;

    font-size: 11px;

    font-weight: 800;

    transition: all 0.3s ease;
}


.machine-link i {
    font-size: 15px;

    transition: transform 0.3s ease;
}


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

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

    border-color: rgba(0, 52, 119, 0.20);

    box-shadow: 0 15px 35px rgba(0, 52, 119, 0.13);
}


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


.machine-link:hover {
    color: #4b963f;
}


.machine-link:hover i {
    transform: translateX(5px);
}


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

.machines-button-wrapper {
    display: flex;

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

    margin-top: 8px;
}


.view-machines-btn {
    min-width: 245px;
    min-height: 48px;

    padding: 0 20px;

    display: inline-flex;

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

    gap: 25px;

    color: #ffffff;

    background: linear-gradient(135deg,
            #07509b,
            #003477);

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    border-radius: 4px;

    box-shadow: 0 7px 18px rgba(0, 52, 119, 0.22);

    transition: all 0.3s ease;
}


.view-machines-btn i {
    font-size: 19px;

    transition: transform 0.3s ease;
}


.view-machines-btn:hover {
    color: #ffffff;

    background: linear-gradient(135deg,
            #4b963f,
            #327529);

    transform: translateY(-2px);
}


.view-machines-btn:hover i {
    transform: translateX(4px);
}


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

@media (max-width: 1199px) {

    .machine-card {
        height: 330px;
    }


    .machine-image {
        height: 200px;
    }

}


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

@media (max-width: 991px) {

    .machines-section {
        padding: 55px 0 30px;
    }


    .machines-heading h2 {
        font-size: 27px;
    }


    .machine-card {
        height: 340px;
    }


    .machine-image {
        height: 215px;
    }


    .machines-button-wrapper {
        margin-top: 20px;
    }

}


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

@media (max-width: 576px) {

    .machines-section {
        padding: 45px 0 25px;
    }


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


    .machines-heading {
        margin-bottom: 25px;
    }


    .machines-heading span {
        font-size: 11px;
    }


    .machines-heading h2 {
        font-size: 23px;
        line-height: 1.35;
    }


    .machine-card {
        max-width: 350px;
        height: 350px;

        margin: auto;
    }


    .machine-image {
        height: 220px;
    }


    .machine-card h3 {
        font-size: 14px;
    }


    .view-machines-btn {
        min-width: 220px;
        min-height: 45px;

        font-size: 12px;
    }

}


/* ==========================================
   SOLAR MOUNTING STRUCTURES SECTION
========================================== */

.solar-structures-section {
    position: relative;

    width: 100%;

    padding: clamp(35px, 4.5vw, 65px) 0 clamp(40px, 5vw, 75px);

    background: #ffffff;
}


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

.solar-structures-heading {
    text-align: center;

    margin-bottom: 25px;
}


.solar-structures-heading span {
    display: block;

    margin-bottom: 5px;

    color: #4b963f;

    font-size: clamp(13px, 1.4vw, 20px);

    line-height: 1;

    font-weight: 900;

    letter-spacing: 0.3px;
}


.solar-structures-heading h2 {
    margin: 0;

    color: #111111;

    font-size: clamp(20px, 2.2vw, 32px);

    line-height: 1.3;

    font-weight: 600;

    font-family: 'Roboto', sans-serif;
}


/* ==========================================
   SOLAR CARD
========================================== */

.solar-structure-card {
    position: relative;

    width: 100%;

    height: clamp(380px, 32vw, 460px);

    background: #ffffff;

    border: 1px solid #e9e9e9;

    border-radius: 7px;

    overflow: hidden;

    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.07);

    transition: all 0.4s ease;
}


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

.solar-structure-image {
    position: relative;

    width: 100%;

    height: 250px;

    overflow: hidden;
}


.solar-structure-image img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.6s ease;
}


/* ==========================================
   GREEN ICON
========================================== */

.solar-structure-icon {
    position: absolute;

    top: 225px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 2;

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    background: #21852c;

    border: 3px solid #ffffff;

    border-radius: 50%;

    font-size: 23px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

    transition: all 0.4s ease;
}


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

.solar-structure-content {
    height: calc(100% - 250px);

    padding: 38px 20px 18px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;
}


/* TITLE */

.solar-structure-content h3 {
    margin: 0 0 13px;

    color: #111111;

    font-size: 15px;

    line-height: 1.4;

    font-weight: 800;
}


/* DESCRIPTION */

.solar-structure-content p {
    max-width: 250px;

    margin: 0 auto 15px;

    color: #555555;

    font-size: 12px;

    line-height: 1.7;

    font-weight: 400;
}


/* ==========================================
   LEARN MORE
========================================== */

.solar-learn-more {
    margin-top: auto;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: #4b963f;

    text-decoration: none;

    font-size: 11px;

    line-height: 1;

    font-weight: 800;

    transition: all 0.3s ease;
}


.solar-learn-more i {
    font-size: 15px;

    transition: transform 0.3s ease;
}


/* ==========================================
   HOVER EFFECTS
========================================== */

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

    border-color: rgba(75, 150, 63, 0.35);

    box-shadow: 0 15px 35px rgba(75, 150, 63, 0.15);
}


.solar-structure-card:hover .solar-structure-image img {
    transform: scale(1.08);
}


.solar-structure-card:hover .solar-structure-icon {
    background: #003477;

    transform: translateX(-50%) rotate(360deg);
}


.solar-learn-more:hover {
    color: #003477;
}


.solar-learn-more:hover i {
    transform: translateX(5px);
}


/* ==========================================
   LAPTOP
========================================== */

@media (max-width: 1199px) {

    .solar-structure-card {
        height: 480px;
    }


    .solar-structure-content h3 {
        font-size: 14px;
    }

}


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

@media (max-width: 991px) {

    .solar-structures-section {
        padding: 55px 0;
    }


    .solar-structures-heading h2 {
        font-size: 27px;
    }


    .solar-structure-card {
        height: 470px;
    }


    .solar-structure-image {
        height: 250px;
    }


    .solar-structure-icon {
        top: 225px;
    }


    .solar-structure-content {
        height: calc(100% - 250px);

        padding-top: 38px;
    }

}


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

@media (max-width: 576px) {

    .solar-structures-section {
        padding: 45px 0;
    }


    .solar-structures-heading {
        margin-bottom: 25px;
    }


    .solar-structures-heading span {
        font-size: 11px;
    }


    .solar-structures-heading h2 {
        font-size: 23px;

        line-height: 1.4;
    }


    .solar-structure-card {
        max-width: 360px;

        height: 470px;

        margin: auto;
    }


    .solar-structure-image {
        height: 250px;
    }


    .solar-structure-icon {
        top: 225px;
    }

}


/* ==========================================
   OUR PROJECTS SECTION
========================================== */

.projects-section {
    width: 100%;
    padding: clamp(35px, 4.2vw, 60px) 0 clamp(25px, 3.2vw, 45px);
    background: #ffffff;
    overflow: hidden;
}


.projects-container {
    max-width: 1650px;
    margin: auto;
    padding-left: 15px;
    padding-right: 15px;
}


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

.projects-heading {
    text-align: center;
    margin-bottom: 25px;
}


.projects-heading span {
    display: block;

    margin-bottom: 4px;

    color: #27853a;

    font-size: clamp(13px, 1.4vw, 20px);

    line-height: 1;

    font-weight: 900;

    letter-spacing: 0.5px;
}


.projects-heading h2 {
    margin: 0;

    color: #111111;

    font-size: clamp(20px, 2.2vw, 32px);

    line-height: 1.3;

    font-weight: 600;

    font-family: 'Roboto', sans-serif;
}


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

.projects-slider-wrapper {
    position: relative;
    width: 100%;
}


/* ==========================================
   SWIPER
========================================== */

.projectsSwiper {
    width: 100%;
    padding-bottom: 40px;
}


/* ==========================================
   PROJECT CARD
========================================== */

.project-card {
    width: 100%;
    text-align: center;
}


/* ==========================================
   PROJECT IMAGE
========================================== */

.project-image {
    position: relative;

    width: 100%;

    height: 350px;

    overflow: hidden;

    border-radius: 6px;

    background: #eeeeee;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}


.project-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.6s ease;
}


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

.project-card h3 {
    margin: 12px 0 0;

    color: #111111;

    font-size: 15px;

    line-height: 1.4;

    font-weight: 700;
}


/* ==========================================
   HOVER EFFECT
========================================== */

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


.project-card:hover h3 {
    color: #003477;
}


/* ==========================================
   PREVIOUS & NEXT BUTTON
========================================== */

.projects-prev,
.projects-next {
    position: absolute;

    top: 67px;

    z-index: 10;

    width: 42px;
    height: 42px;

    display: flex;

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

    padding: 0;

    color: #ffffff;

    background: #07509b;

    border: none;

    border-radius: 50%;

    font-size: 21px;

    cursor: pointer;

    box-shadow: 0 5px 15px rgba(0, 52, 119, 0.25);

    transition: all 0.3s ease;
}


.projects-prev {
    left: -55px;
}


.projects-next {
    right: -55px;
}


.projects-prev:hover,
.projects-next:hover {
    background: #4b963f;

    transform: scale(1.08);
}


/* ==========================================
   PAGINATION
========================================== */

.projects-pagination {
    position: absolute !important;

    bottom: 0 !important;

    display: flex;

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

    gap: 2px;
}


/* PAGINATION BULLET */

.projects-pagination .swiper-pagination-bullet {

    width: 32px;

    height: 3px;

    margin: 0 3px !important;

    background: #07509b;

    border-radius: 0;

    opacity: 0.25;

    transition: all 0.3s ease;
}


/* ACTIVE BULLET */

.projects-pagination .swiper-pagination-bullet-active {

    width: 42px;

    background: #4b963f;

    opacity: 1;
}


/* ==========================================
   LAPTOP
========================================== */

@media (max-width: 1199px) {

    .projects-container {
        padding-left: 65px;
        padding-right: 65px;
    }


    .project-image {
        height: 175px;
    }

}


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

@media (max-width: 991px) {

    .projects-section {
        padding: 55px 0 40px;
    }


    .projects-container {
        padding-left: 60px;
        padding-right: 60px;
    }


    .projects-heading h2 {
        font-size: 27px;
    }


    .projects-prev {
        left: -50px;
    }


    .projects-next {
        right: -50px;
    }

}


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

@media (max-width: 576px) {

    .projects-section {
        padding: 45px 0 35px;
    }


    .projects-container {
        padding-left: 50px;
        padding-right: 50px;
    }


    .projects-heading {
        margin-bottom: 22px;
    }


    .projects-heading span {
        font-size: 11px;
    }


    .projects-heading h2 {
        font-size: 23px;
        line-height: 1.4;
    }


    .project-image {
        height: 210px;
    }


    .projects-prev,
    .projects-next {
        top: 90px;

        width: 38px;
        height: 38px;

        font-size: 18px;
    }


    .projects-prev {
        left: -43px;
    }


    .projects-next {
        right: -43px;
    }

}


/* ==========================================
   OUR PRODUCTS SECTION
========================================== */

.our-products-section {
    width: 100%;
    padding: clamp(35px, 4.2vw, 60px) 0 clamp(25px, 3.2vw, 45px);
    background: #ffffff;
    overflow: hidden;
}


.products-main-container {
    position: relative;

    max-width: 1650px;

    margin: auto;

    padding-left: 15px;

    padding-right: 15px;
}


/* ==========================================
   MAIN HEADING
========================================== */

.products-main-heading {
    text-align: center;

    margin-bottom: 20px;
}


.products-main-heading span {
    display: block;

    margin-bottom: 4px;

    color: #07509b;

    font-size: clamp(13px, 1.4vw, 20px);

    line-height: 1;

    font-weight: 900;

    letter-spacing: 0.4px;
}


.products-main-heading h2 {
    margin: 0;

    color: #111111;

    font-size: clamp(20px, 2.2vw, 32px);

    line-height: 1.25;

    font-weight: 600;

    font-family: 'Roboto', sans-serif;
}


/* ==========================================
   DIVISION ROW
========================================== */

.product-divisions-row {
    position: relative;
}


/* ==========================================
   PRODUCT DIVISION
========================================== */

.product-division {
    position: relative;

    width: 100%;

    padding: 0 18px;
}


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

.division-title {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-bottom: 20px;
}


.division-title span {
    flex: 1;

    height: 2px;

    background: #dce4ed;
}


.division-title h3 {
    flex-shrink: 0;

    margin: 0;

    color: #003477;

    font-size: 17px;

    line-height: 1;

    font-weight: 800;
}


/* GREEN TITLE */

.structure-title h3 {
    color: #327c2d;
}


/* ==========================================
   PRODUCT GRID
========================================== */

.division-products-grid {
    display: grid;

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

    gap: 12px;
}


/* ==========================================
   PRODUCT CARD
========================================== */

.division-product-card {
    position: relative;

    width: 100%;

    height: 250px;

    padding: 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    background: #ffffff;

    border: 1px solid #e8e8e8;

    border-radius: 7px;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);

    transition: all 0.4s ease;
}


/* ==========================================
   PRODUCT IMAGE
========================================== */

.division-product-image {
    width: 100%;

    height: 170px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;
}


.division-product-image img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}


/* SOLAR IMAGE */

.structure-product-image img {
    object-fit: cover;

    border-radius: 4px;
}


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

.division-product-card h4 {
    margin: auto 0 5px;

    color: #111111;

    text-align: center;

    font-size: 12px;

    line-height: 1.5;

    font-weight: 700;
}


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

.division-product-card:hover {
    transform: translateY(-6px);

    border-color: rgba(0, 52, 119, 0.25);

    box-shadow: 0 12px 28px rgba(0, 52, 119, 0.12);
}


.division-product-card:hover .division-product-image img {
    transform: scale(1.07);
}


.structures-division .division-product-card:hover {
    border-color: rgba(75, 150, 63, 0.35);

    box-shadow: 0 12px 28px rgba(75, 150, 63, 0.14);
}


/* ==========================================
   BOTTOM LINKS
========================================== */

.division-button-wrapper {
    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 15px;
}


.division-link {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    text-decoration: none;

    font-size: 13px;

    line-height: 1;

    font-weight: 800;

    transition: all 0.3s ease;
}


.division-link i {
    font-size: 18px;

    transition: transform 0.3s ease;
}


/* BLUE LINK */

.machine-division-link {
    color: #07509b;
}


/* GREEN LINK */

.structure-division-link {
    color: #327c2d;
}


.division-link:hover i {
    transform: translateX(6px);
}


.machine-division-link:hover {
    color: #003477;
}


.structure-division-link:hover {
    color: #215d1d;
}


/* ==========================================
   CENTER DIVIDER
========================================== */

.products-center-divider {
    position: absolute;

    top: 67px;

    bottom: 30px;

    left: 50%;

    width: 1px;

    background: #dfe4e8;

    transform: translateX(-50%);

    z-index: 5;
}


/* ==========================================
   CENTER ROUND ICON
========================================== */

.center-swap-icon {
    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    background: #003477;

    border: 4px solid #ffffff;

    border-radius: 50%;

    font-size: 18px;

    box-shadow: 0 4px 14px rgba(0, 52, 119, 0.25);
}


/* ==========================================
   LAPTOP
========================================== */

@media (max-width: 1199px) {

    .products-main-container {
        padding-left: 30px;

        padding-right: 30px;
    }


    .product-division {
        padding: 0 15px;
    }


    .division-products-grid {
        gap: 8px;
    }


    .division-title h3 {
        font-size: 14px;
    }


    .division-product-card {
        height: 190px;
    }


    .division-product-card h4 {
        font-size: 11px;
    }

}


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

@media (max-width: 991px) {

    .our-products-section {
        padding: 55px 0 40px;
    }


    .products-main-heading h2 {
        font-size: 27px;
    }


    .product-division {
        padding: 0;
    }


    .structures-division {
        margin-top: 55px;
    }


    .products-center-divider {
        display: none;
    }


    .division-products-grid {
        gap: 15px;
    }


    .division-product-card {
        height: 220px;
    }


    .division-product-image {
        height: 150px;
    }

}


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

@media (max-width: 576px) {

    .our-products-section {
        padding: 45px 0 35px;
    }


    .products-main-container {
        padding-left: 15px;

        padding-right: 15px;
    }


    .products-main-heading {
        margin-bottom: 30px;
    }


    .products-main-heading span {
        font-size: 11px;
    }


    .products-main-heading h2 {
        font-size: 23px;

        line-height: 1.4;
    }


    .division-title {
        gap: 8px;
    }


    .division-title h3 {
        font-size: 13px;

        text-align: center;
    }


    .division-products-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 12px;
    }


    .division-product-card {
        height: 210px;
    }


    .division-product-image {
        height: 140px;
    }


    .division-product-card h4 {
        font-size: 11px;
    }


    .division-link {
        font-size: 11px;
    }


    .structures-division {
        margin-top: 50px;
    }

}

/* ==========================================
   PROCESS SECTION
========================================== */

.process-section {
    width: 100%;
    padding: 20px 0 65px;
    background: #ffffff;
}


.process-container {
    max-width: 1650px;
    margin: auto;

    padding-left: 15px;
    padding-right: 15px;
}


/* ==========================================
   MAIN PROCESS BOX
========================================== */

.process-box {
    position: relative;

    width: 100%;

    padding: 30px 25px 25px;

    background: linear-gradient(135deg,
            #003477 0%,
            #002b68 50%,
            #003477 100%);

    border-radius: 10px;

    border: 1px solid #0b579b;

    box-shadow: 0 8px 25px rgba(0, 52, 119, 0.18);

    overflow: hidden;
}


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

.process-main-title {
    position: absolute;

    top: 10px;
    left: 50%;

    transform: translateX(-50%);

    color: #ffffff;

    font-size: 16px;

    line-height: 1;

    font-weight: 800;

    white-space: nowrap;
}


/* ==========================================
   PROCESS WRAPPER
========================================== */

.process-wrapper {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 20px;
}


/* ==========================================
   PROCESS ITEM
========================================== */

.process-item {
    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}


/* ==========================================
   PROCESS ICON
========================================== */

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

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 8px;

    color: #ffffff;

    font-size: 39px;

    line-height: 1;

    transition: all 0.4s ease;
}


/* ==========================================
   PROCESS HEADING
========================================== */

.process-item h3 {
    margin: 0;

    color: #ffffff;

    font-size: 16px;

    line-height: 1.4;

    font-weight: 700;

    white-space: nowrap;
}


/* ==========================================
   SMALL LINE
========================================== */

.process-line {
    width: 65px;

    height: 1px;

    margin: 7px 0;

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


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

.process-item p {
    margin: 0;

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

    font-size: 13px;

    line-height: 1.7;

    font-weight: 400;
}


/* ==========================================
   GREEN ARROW
========================================== */

.process-arrow {
    flex-shrink: 0;

    width: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #6cab45;

    font-size: 22px;

    font-weight: 700;
}


/* ==========================================
   HOVER EFFECT
========================================== */

.process-item:hover .process-icon {
    color: #79b84a;

    transform: translateY(-5px);
}


.process-item:hover h3 {
    color: #ffffff;
}


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

@media (max-width: 1199px) {

    .process-box {
        padding-left: 15px;
        padding-right: 15px;
    }


    .process-item h3 {
        font-size: 11px;
    }


    .process-item p {
        font-size: 9px;
    }


    .process-arrow {
        width: 22px;
    }

}


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

@media (max-width: 991px) {

    .process-box {
        padding: 55px 25px 30px;
    }


    .process-main-title {
        top: 22px;
    }


    .process-wrapper {
        display: grid;

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

        gap: 35px 20px;

        padding-top: 0;
    }


    .process-arrow {
        display: none;
    }


    .process-item h3 {
        font-size: 13px;
    }


    .process-item p {
        font-size: 10px;
    }

}


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

@media (max-width: 576px) {

    .process-section {
        padding: 15px 0 45px;
    }


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


    .process-box {
        padding: 60px 20px 30px;

        border-radius: 8px;
    }


    .process-main-title {
        top: 23px;

        font-size: 13px;
    }


    .process-wrapper {
        grid-template-columns: repeat(2, 1fr);

        gap: 35px 15px;
    }


    .process-icon {
        width: 48px;
        height: 48px;

        font-size: 34px;
    }


    .process-item h3 {
        font-size: 11px;

        white-space: normal;
    }


    .process-item p {
        font-size: 9px;
    }


    .process-line {
        width: 50px;
    }

}


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

.solution-cta-section {
    width: 100%;
    padding: clamp(12px, 1.5vw, 20px) 0 0;
    background: #ffffff;
}


.solution-cta-container {
    max-width: 1850px;
    margin: auto;

    padding-left: 10px;
    padding-right: 10px;
}


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

.solution-cta-box {
    position: relative;

    width: 100%;

    padding: 30px 40px;

    background:
        radial-gradient(circle at center,
            rgba(9, 80, 157, 0.50),
            transparent 55%),
        linear-gradient(135deg,
            #002d68 0%,
            #003d85 50%,
            #002d68 100%);

    border: 1px solid #0d5596;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 8px 25px rgba(0, 52, 119, 0.15);
}


/* SUBTLE BACKGROUND EFFECT */

.solution-cta-box::before {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    top: -300px;
    left: 35%;

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

    border-radius: 50%;
}


.solution-cta-box::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -200px;
    bottom: -250px;

    background: rgba(0, 132, 61, 0.10);

    border-radius: 50%;
}


/* ==========================================
   LEFT CONTENT
========================================== */

.solution-cta-content {
    position: relative;
    z-index: 2;
}


.solution-cta-content h2 {
    margin: 0 0 9px;

    color: #ffffff;

    font-size: clamp(20px, 2.1vw, 30px);

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: 0.3px;
}


.solution-cta-content p {
    max-width: 600px;

    margin: 0;

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

    font-size: clamp(12px, 1.05vw, 15px);

    line-height: 1.7;

    font-weight: 400;
}


/* ==========================================
   BUTTON WRAPPER
========================================== */

.solution-cta-buttons {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 25px;
}


/* ==========================================
   COMMON BUTTON STYLE
========================================== */

.cta-quote-btn,
.cta-expert-btn {
    min-height: 64px;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding: 0 27px;

    border-radius: 7px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 800;

    white-space: nowrap;

    transition: all 0.3s ease;
}


/* ==========================================
   REQUEST QUOTE BUTTON
========================================== */

.cta-quote-btn {
    min-width: 230px;

    color: #173252;

    background: #ffffff;

    border: 1px solid #d9e0e8;

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


.cta-quote-btn i {
    color: #2f6099;

    font-size: 21px;

    transition: transform 0.3s ease;
}


/* ==========================================
   EXPERT BUTTON
========================================== */

.cta-expert-btn {
    min-width: 260px;

    color: #ffffff;

    background: #078536;

    border: 1px solid #078536;

    box-shadow: 0 5px 15px rgba(0, 90, 35, 0.20);
}


.cta-expert-btn i {
    color: #ffffff;

    font-size: 20px;

    transition: transform 0.3s ease;
}


/* ==========================================
   BUTTON HOVER
========================================== */

.cta-quote-btn:hover {
    color: #ffffff;

    background: #07509b;

    border-color: #07509b;

    transform: translateY(-3px);
}


.cta-quote-btn:hover i {
    color: #ffffff;

    transform: translateX(5px);
}


.cta-expert-btn:hover {
    color: #ffffff;

    background: #056d2d;

    border-color: #056d2d;

    transform: translateY(-3px);
}


.cta-expert-btn:hover i {
    transform: rotate(-15deg);
}


/* ==========================================
   LAPTOP
========================================== */

@media (max-width: 1199px) {

    .solution-cta-box {
        padding: 30px;
    }


    .solution-cta-content h2 {
        font-size: 22px;
    }


    .solution-cta-buttons {
        gap: 15px;
    }


    .cta-quote-btn,
    .cta-expert-btn {
        min-width: auto;

        padding-left: 20px;
        padding-right: 20px;

        gap: 20px;

        font-size: 11px;
    }

}


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

@media (max-width: 991px) {

    .solution-cta-box {
        padding: 35px;
    }


    .solution-cta-content {
        text-align: center;
    }


    .solution-cta-content p {
        margin-left: auto;
        margin-right: auto;
    }


    .solution-cta-buttons {
        justify-content: center;

        margin-top: 5px;
    }

}


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

@media (max-width: 576px) {

    .solution-cta-section {
        padding: 15px 0 0;
    }


    .solution-cta-container {
        padding-left: 15px;
        padding-right: 15px;
    }


    .solution-cta-box {
        padding: 30px 20px;

        border-radius: 8px;
    }


    .solution-cta-content h2 {
        font-size: 20px;

        line-height: 1.35;
    }


    .solution-cta-content p {
        font-size: 12px;
    }


    .solution-cta-buttons {
        flex-direction: column;

        gap: 12px;
    }


    .cta-quote-btn,
    .cta-expert-btn {
        width: 100%;

        min-height: 55px;

        justify-content: center;

        gap: 20px;

        font-size: 12px;
    }

}

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

.main-footer {
    position: relative;

    width: 100%;

    background: linear-gradient(135deg,
            #061d38 0%,
            #082643 50%,
            #061d38 100%);

    color: #ffffff;
}


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

.footer-container {
    max-width: 1400px;

    margin: auto;

    padding-left: 50px;
    padding-right: 50px;
}


/* ==========================================
   MAIN ROW
========================================== */

.footer-main-row {
    padding-top: 28px;

    padding-bottom: 18px;
}


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

.footer-column {
    position: relative;

    height: 100%;

    padding: 0 15px;
}


/* VERTICAL DIVIDER */

.footer-column::after {
    content: "";

    position: absolute;

    top: 0;

    right: 0;

    width: 1px;

    height: 100%;

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


.footer-main-row>div:last-child .footer-column::after {
    display: none;
}


/* ==========================================
   LOGO
========================================== */

.footer-logo {
    display: inline-flex;

    flex-direction: column;

    margin-bottom: 12px;

    color: #ffffff;

    text-decoration: none;

    line-height: 1;
}


.footer-logo-main {
    font-size: 37px;

    font-weight: 800;

    letter-spacing: 1px;
}


.footer-logo-sub {
    margin-top: 2px;

    font-size: 14px;

    font-weight: 700;
}


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

.footer-description {
    max-width: 230px;

    margin: 0 0 15px;

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

    font-size: 14px;

    line-height: 1.6;
}


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

.footer-column h3 {
    margin: 0 0 15px;

    color: #ffffff;

    font-size: 16px;

    line-height: 1.2;

    font-weight: 800;
}


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

.footer-links {
    margin: 0;

    padding: 0;

    list-style: none;
}


.footer-links li {
    margin-bottom: 7px;
}


.footer-links li:last-child {
    margin-bottom: 0;
}


.footer-links a {
    position: relative;

    display: inline-block;

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

    text-decoration: none;

    font-size: 14px;

    line-height: 1.4;

    transition: all 0.3s ease;
}


.footer-links a:hover {
    color: #72b84b;

    transform: translateX(4px);
}


/* ==========================================
   SOCIAL ICONS
========================================== */

.footer-social {
    display: flex;

    align-items: center;

    gap: 13px;
}


.footer-social a {
    width: 27px;

    height: 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    background: #07509b;

    border-radius: 50%;

    font-size: 16px;

    text-decoration: none;

    transition: all 0.3s ease;
}


.footer-social a.youtube {
    background: #d92b38;
}


.footer-social a.instagram {
    background: linear-gradient(135deg,
            #833ab4,
            #fd1d1d,
            #fcb045);
}


.footer-social a:hover {
    background: #4b963f;

    color: #ffffff;

    transform: translateY(-4px);
}


/* ==========================================
   CONTACT SECTION
========================================== */

.footer-contact-item {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin-bottom: 10px;
}


.footer-contact-icon {
    flex-shrink: 0;

    width: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    font-size: 18px;
}


.footer-contact-text p,
.footer-contact-text a {
    margin: 0;

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

    font-size: 14px;

    line-height: 1.6;

    text-decoration: none;

    transition: color 0.3s ease;
}


.footer-contact-text a:hover {
    color: #72b84b;
}


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

.footer-bottom {
    width: 100%;

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

    background: rgba(0, 0, 0, 0.10);
}


.footer-bottom-wrapper {
    min-height: 35px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* COPYRIGHT */

.footer-bottom-wrapper p {
    margin: 0;

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

    font-size: 13px;
}


/* ==========================================
   POLICY LINKS
========================================== */

.footer-policy-links {
    display: flex;

    align-items: center;

    gap: 12px;
}


.footer-policy-links a,
.footer-policy-links span {
    color: rgba(255, 255, 255, 0.70);

    text-decoration: none;

    font-size: 13px;

    transition: color 0.3s ease;
}


.footer-policy-links a:hover {
    color: #72b84b;
}


/* ==========================================
   LAPTOP
========================================== */

@media (max-width: 1199px) {

    .footer-container {
        padding-left: 30px;

        padding-right: 30px;
    }


    .footer-column {
        padding: 20px;
    }


    .footer-column::after {
        display: none;
    }


    .footer-main-row {
        padding-top: 15px;
    }

}


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

@media (max-width: 991px) {

    .footer-column {
        padding: 20px 10px;
    }


    .footer-description {
        max-width: 300px;
    }


    .footer-contact-column {
        padding-top: 30px;
    }

}


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

@media (max-width: 576px) {

    .footer-container {
        padding-left: 20px;

        padding-right: 20px;
    }


    .footer-main-row {
        padding-top: 20px;

        padding-bottom: 20px;
    }


    .footer-column {
        padding: 20px 0;

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


    .footer-main-row>div:last-child .footer-column {
        border-bottom: none;
    }


    .footer-logo-main {
        font-size: 32px;
    }


    .footer-column h3 {
        font-size: 15px;
    }

    .footer-links a,
    .footer-description,
    .footer-contact-text p,
    .footer-contact-text a {
        font-size: 13px;
    }


    .footer-bottom-wrapper {
        padding: 12px 0;

        flex-direction: column;

        justify-content: center;

        gap: 8px;

        text-align: center;
    }

}

/* ==========================================
   OVERFLOW PREVENTION
========================================== */

/* Removed overflow-x: hidden from body, html as it breaks sticky-top navbar */

section {
    overflow-x: hidden;
}