/* ===========================
   RESET
=========================== */
    html{
        scroll-behavior:smooth;
    }
    *{
        margin:0;
        padding:0;
        box-sizing:border-box;
    }

    body{
        font-family:"Google Sans Flex",sans-serif;
        font-weight:500;
        color:#4a4a4a;
        line-height:1.7;
    }
/* ===========================
   HEADER
=========================== */
    header{
        position: sticky;
        top: 0;
        z-index: 9999;
    
        background:linear-gradient(to right,#ffffff,#eef8ff);
        box-shadow:0 2px 10px rgba(0,0,0,.15);
        padding:15px 0;

    }
/* ===========================
   HEADER CONTAINER
=========================== */
    .container{

        width:95%;
        max-width:1200px;
        margin:auto;
        display:flex;
        justify-content:space-between;
        align-items:center;

    }

/* ===========================
   BRANDING
=========================== */
    header {
    position: sticky;
    top: 0;
    z-index: 9999;

    background: linear-gradient(to right, #ffffff, #eef8ff);
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    padding: 10px 0;
}

    .branding{

        display:flex;
        align-items:center;
        flex-shrink: 0;
    }
    /* LOGO */
    .branding img{

        width: 150px;
        height: auto;
        margin-right: 18px;

        display: block;
    }
/* ===========================
   COMPANY INFORMATION
=========================== */
    .company-info {
        min-width: 0;
    }
    .company-info h1{
    font-family: "Google Sans Flex", sans-serif;

    font-size: 27px;
    font-weight: 900;

    line-height: 1.15;
    letter-spacing: .5px;

    color: #0072BC;;   /* Omni logo blue */

    white-space: nowrap;

    margin: 0 0 5px;
    }
    .company-info h1 span {
    color: #003C8F;
    }
    .company-info p{

    font-family: "Google Sans Flex", sans-serif;

    color: #666;

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

    line-height: 1.3;

    white-space: nowrap;

    margin: 5px 0 0;
    }
/* ===========================
   NAVIGATION
=========================== */
    nav{

        display:flex;
        gap:30px;
        margin-left: 25px;
    }

    nav a{
        font-family:"Google Sans Flex",sans-serif;
        font-weight:700;
        font-size:15px;
        color:#003C8F;
        text-decoration:none;
        white-space: nowrap;
        transition: color .3s ease;
    }
    


    nav a:hover{

        color:#00AEEF;
    }
/* ===========================
   HEADER RESPONSIVE
=========================== */

@media (max-width: 1100px) {

    .branding img {
        width: 140px;
        margin-right: 15px;
    }

    .company-info h1 {
        font-size: 22px;
    }

    .company-info p {
        font-size: 14px;
    }

    nav {
        gap: 18px;
        margin-left: 15px;
    }

    nav a {
        font-size: 14px;
    }
}


@media (max-width: 900px) {

    header .container {
        flex-direction: column;
    }

    nav {
        margin-top: 15px;
        margin-left: 0;

        flex-wrap: wrap;
        justify-content: center;
    }

    .company-info h1,
    .company-info p {
        white-space: normal;
    }
}


@media (max-width: 600px) {

    .branding img {
        width: 120px;
        margin-right: 12px;
    }

    .company-info h1 {
        font-size: 18px;
    }

    .company-info p {
        font-size: 12px;
    }

    nav {
        gap: 12px;
    }

    nav a {
        font-size: 13px;
    }
}
/* ===========================
   HOME PAGE HERO
=========================== */
    .hero{
        position:relative;
        width:100%;
        height:100vh;
        min-height:700px;
        overflow:hidden;
    }

/* ==========================================
   HOME HERO SLIDES
========================================== */

    .hero-slide{
        position:absolute;
        inset:0;

        opacity:0;
        visibility:hidden;

        transition:opacity 1s ease-in-out;

        overflow:hidden;
    }

    .hero-slide.active{
        opacity:1;
        visibility:visible;
        z-index:2;
    }

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

    .hero-slide img{
        position:absolute;
        inset:0;

        width:100%;
        height:100%;

        object-fit:cover;

        animation:kenburns 10s ease-in-out infinite;
    }

/* ==========================================
   DARK OVERLAY
========================================== */

    .hero-overlay{
        position:absolute;
        inset:0;

        background:rgba(0,0,0,.45);

        z-index:1;
    }

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

    .hero-content{

        position:relative;

        z-index:5;

        height:100%;

        display:flex;
        flex-direction:column;

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

        text-align:center;

        color:#fff;

        max-width:900px;

        margin:auto;

        padding:0 20px;
    }

/* ==========================================
   SUBTITLE
========================================== */

    .hero-subtitle{

        font-size:22px;
        font-weight:600;
        letter-spacing:4px;
        text-transform:uppercase;

        color:#4FC3F7;

        margin-bottom:18px;
    }

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

    .hero-title{

        font-family:"Google Sans Flex",sans-serif;

        font-size:58px;
        font-weight:800;
        line-height:1.15;

        margin-bottom:25px;

        color:#fff;
    }

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

    .hero-description{

        font-size:22px;
        line-height:1.8;

        color:#E5E5E5;

        max-width:800px;

        margin-bottom:45px;
    }

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

    .hero .btn{

        background:#009FE3;

        color:#fff;

        padding:16px 42px;

        border-radius:50px;

        text-decoration:none;

        font-weight:700;

        transition:.3s;
    }

    .hero .btn:hover{

        background:#007BC1;

        transform:translateY(-3px);
    }

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

    .hero-prev,
    .hero-next{

        position:absolute;

        top:50%;

        transform:translateY(-50%);

        width:55px;
        height:55px;

        border:none;

        border-radius:50%;

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

        color:#fff;

        cursor:pointer;

        z-index:20;

        transition:.3s;
    }

    .hero-prev{

        left:30px;
    }

    .hero-next{

        right:30px;
    }

    .hero-prev:hover,
    .hero-next:hover{

        background:#009FE3;
    }

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

    .hero-dots{

        position:absolute;

        left:50%;
        bottom:40px;

        transform:translateX(-50%);

        display:flex;

        gap:12px;

        z-index:20;
    }

    .hero-dot{

        width:14px;
        height:14px;

        border-radius:50%;

        background:#ffffff66;

        cursor:pointer;

        transition:.3s;
    }

    .hero-dot.active{

        background:#009FE3;

        transform:scale(1.3);
    }

/* ==========================================
   KEN BURNS EFFECT
========================================== */

    @keyframes kenburns{

        from{

            transform:scale(1);
        }

        to{

            transform:scale(1.12);
        }

    }

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

    @media(max-width:992px){

    .hero{

        min-height:600px;
    }

    .hero-title{

        font-size:42px;
    }

    .hero-description{

        font-size:18px;
    }

    }

    @media(max-width:768px){

    .hero{

        min-height:520px;
    }

    .hero-title{

        font-size:32px;
    }

    .hero-subtitle{

        font-size:18px;
    }

    .hero-description{

        font-size:16px;
    }

    .hero-prev,
    .hero-next{

        display:none;
    }

    .hero .btn{

        padding:14px 28px;
    }

    }

/* ===========================
   Main Button
=========================== */
    .btn{
        display:inline-block;
        padding:16px 40px;
        background:#00AEEF;
        color:#fff;
        text-decoration:none;
        border-radius:6px;
        font-weight:bold;
        transition:.3s;
    }

    .btn:hover{
        background:#007ACC;
        transform:translateY(-3px);
        box-shadow:0 10px 25px rgba(0,174,239,.35);
    }
    .btn,
    .btn-small{
        font-family:"Google Sans Flex",sans-serif;
        font-weight:700;
    }

    .btn-small:hover{
        background:#007ACC;
    }

    @keyframes slider{

        0%,20%{
            background-image:
            linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15)),
            url("../images/hero/hero1.jpg");
        }

        25%,45%{
            background-image:
            linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15)),
            url("../images/hero/hero2.jpg");
        }

        50%,70%{
            background-image:
            linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15)),
            url("../images/hero/hero3.jpg");
        }

        75%,100%{
            background-image:
            linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15)),
            url("../images/hero/hero4.jpg");
        }

    }
    /* General Section */

    .section{
        padding:80px 0;
    }

    .section h2{
        text-align:center;
        color:#003C8F;
        font-size:40px;
        margin-bottom:25px;
    }

    .section p{
        max-width:900px;
        margin:auto;
        text-align:center;
        line-height:1.8;
        font-size:18px;
        color:#555;
    }

    h2{
        font-family:"Google Sans Flex",sans-serif;
        font-weight:800;
    }

/* ===========================
   Statistics
=========================== */
    .stat-number{
        font-family:"Bitcount Prop Single",monospace;
        font-weight:700;
    }

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

.home-about {
    background: #86BFD6;
    padding: 80px 0 90px;
}


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

.home-about-container {
    width: 92%;
    max-width: 1200px;
    margin: 0 auto;
}


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

.home-about-heading {
    text-align: center;
    margin-bottom: 45px;
}

.home-about-heading h2 {
    color: #003C8F;
    font-family: "Google Sans Flex", sans-serif;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 10px;
}

.home-about-heading p {
    color: #063652;
    font-family: "Google Sans Flex", sans-serif;
    font-size: 19px;
    font-weight: 700;
    margin: 0;
}


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

.home-about-content {
    width: 100%;

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

    min-height: 360px;

    background: #FDFCF8;

    border-radius: 14px;
    overflow: hidden;

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


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

.home-about-image {
    width: 100%;
    height: 100%;
    min-height: 360px;
    overflow: hidden;
}

.home-about-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;

    transition: transform .4s ease;
}

.home-about-image:hover img {
    transform: scale(1.03);
}


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

.home-about-text {
    padding: 40px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.home-about-text .service-icon {
    font-size: 30px;
    margin-bottom: 8px;
}

.home-about-text h3 {
    color: #003C8F;
    font-family: "Google Sans Flex", sans-serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.3;

    margin: 0 0 12px;
}

.home-about-text p {
    color: #555;
    font-family: "Google Sans Flex", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;

    margin: 0 0 12px;
}


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

.home-about-text a {
    display: inline-block;

    margin-top: 8px;

    color: #009FE3;

    font-family: "Google Sans Flex", sans-serif;
    font-size: 13px;
    font-weight: 700;

    text-decoration: none;
}

.home-about-text a:hover {
    color: #003C8F;
}


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

@media (max-width: 768px) {

    .home-about {
        padding: 60px 15px;
    }

    .home-about-heading h2 {
        font-size: 36px;
    }

    .home-about-heading p {
        font-size: 16px;
    }

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

    .home-about-image {
        height: 280px;
    }

    .home-about-text {
        padding: 30px;
    }

    .home-about-text h3 {
        font-size: 24px;
    }

}
/* start from this alll sub page  */

/* ===========================
   ABOUT (PAGE 2)
=========================== */

.about {
    padding: 90px 0;
    background: #ffffff;
}

.about .container {
    display: block;
    max-width: 1200px;
    margin: auto;
}

.about-image {
    display: none;
}

.about-content {
    width: 100%;
}

.about-content h2 {
    font-size: 46px;
    font-weight: 800;
    color: #003C8F;
    margin-bottom: 30px;
    text-align: left;
}

.about-content p {
    font-size: 28px;
    font-weight: 800;
    color: #333;
    line-height: 1.9;
    margin-bottom: 28px;
    text-align: left;
    letter-spacing: 0;
    word-spacing: normal;
}

.about-content strong {
    color: #003C8F;
    font-weight: 800;
}

.about-feature {
    margin-top: 18px;
    font-size: 20px;
    font-weight: 600;
    color: #003C8F;
}
/* ===========================
   OUR STORY & EXPERIENCE
=========================== */

.about-story {
    background: #ffffff;
    padding: 90px 0 100px;
}

.about-story-container {
    width: 90%;
    max-width: 1100px;
    margin: auto;
}


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

.about-section-heading {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 70px;
}

.about-label {
    display: inline-block;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #0072BC;
    margin-bottom: 12px;
}

.about-section-heading h2 {
    font-size: 46px;
    font-weight: 800;
    color: #003C8F;
    margin: 0 0 18px;
}

.about-section-heading p {
    font-size: 19px;
    line-height: 1.7;
    color: #666;
    margin: 0;
}


/* ===========================
   STORY ROW
=========================== */

.story-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 55px;
    position: relative;
    padding-bottom: 65px;
}


/* Vertical timeline line */

.story-row::before {
    content: "";
    position: absolute;
    left: 90px;
    top: 10px;
    bottom: 0;
    width: 2px;
    background: #d9eaf4;
}


/* ===========================
   YEAR
=========================== */

.story-year {
    position: relative;
    z-index: 2;

    width: 130px;
    height: 130px;

    border-radius: 50%;

    background: #0072BC;
    color: #ffffff;

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

    box-shadow: 0 10px 30px rgba(0, 114, 188, 0.25);
}

.story-year span {
    font-size: 25px;
    font-weight: 800;
    line-height: 1.1;
}

.story-year small {
    margin-top: 5px;
    font-size: 14px;
    font-weight: 600;
    opacity: 0.9;
}


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

.story-content {
    background: #f7fbfe;
    border-radius: 14px;

    padding: 35px 40px;

    border-left: 4px solid #0072BC;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
}

.story-content h3 {
    font-size: 28px;
    font-weight: 800;
    color: #003C8F;
    margin: 0 0 18px;
}

.story-content p {
    font-size: 18px;
    line-height: 1.85;
    color: #444;
    margin: 0 0 18px;
}

.story-content p:last-child {
    margin-bottom: 0;
}

.story-content strong {
    color: #003C8F;
    font-weight: 700;
}


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

.story-services {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 25px;
}

.story-services span {
    background: #e7f4fb;
    color: #005a96;

    padding: 9px 15px;

    border-radius: 20px;

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


/* ===========================
   ENGINEERING APPROACH
=========================== */

.story-approach {
    margin-top: 20px;
    padding: 55px 60px;

    background: #111;
    border-radius: 16px;

    color: #ffffff;
}

.story-approach-content {
    max-width: 900px;
    margin: auto;
}

.story-approach .about-label {
    color: #29ABE2;
}

.story-approach h2 {
    font-size: 38px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 25px;
}

.story-approach p {
    font-size: 18px;
    line-height: 1.85;
    color: #d8d8d8;
    margin-bottom: 20px;
}


/* ===========================
   LOOKING FORWARD
=========================== */

.story-future {
    text-align: center;

    max-width: 900px;
    margin: 80px auto 0;
}

.story-future h2 {
    font-size: 40px;
    font-weight: 800;
    color: #003C8F;
    margin: 0 0 20px;
}

.story-future > p {
    font-size: 18px;
    line-height: 1.85;
    color: #555;
}

.story-future strong {
    color: #003C8F;
}

.story-motto {
    margin-top: 30px;

    font-size: 21px !important;
    font-weight: 800;

    color: #0072BC !important;
}


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

@media (max-width: 768px) {

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

    .about-section-heading {
        margin-bottom: 50px;
    }

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

    .about-section-heading p {
        font-size: 17px;
    }

    .story-row {
        grid-template-columns: 1fr;
        gap: 25px;
        padding-bottom: 45px;
    }

    .story-row::before {
        display: none;
    }

    .story-year {
        width: 100px;
        height: 100px;
    }

    .story-year span {
        font-size: 21px;
    }

    .story-content {
        padding: 28px 25px;
    }

    .story-content h3 {
        font-size: 24px;
    }

    .story-content p {
        font-size: 17px;
    }

    .story-approach {
        padding: 40px 25px;
    }

    .story-approach h2 {
        font-size: 30px;
    }

    .story-future h2 {
        font-size: 32px;
    }

}
/* ===========================
   MISSION & VISION
=========================== */

.about-values {
    background: #111111;
    padding: 100px 0;
}

.about-values-container {
    max-width: 1000px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.about-value-card {
    background: #1b1b1b;
    color: #ffffff;
    padding: 50px 40px;
    border-radius: 15px;
    text-align: center;
}

.about-value-icon {
    font-size: 45px;
    margin-bottom: 20px;
}

.about-value-card h3 {
    font-size: 30px;
    color: #ffffff;
    margin-bottom: 20px;
}

.about-value-card p {
    font-size: 18px;
    line-height: 1.8;
    color: #dddddd;
}



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

.about-why {
    background: #ffffff;
    padding: 90px 0;
}


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

.about-cta {
    background: #003C8F;
    color: #ffffff;
    padding: 80px 0;
    text-align: center;
}

.about-cta h2 {
    color: #ffffff;
}

.about-cta p {
    color: #ffffff;
}

/* =========================================================
   HOME SERVICES (PAGE 3) 
========================================================= */

    .services {
        background: #86BFD6;
        padding: 80px 0 90px;
    }


    /* MAIN HOME SERVICES CONTAINER */

    .services-container {
        width: 92%;
        max-width: 1200px;
        margin: 0 auto;

        /* IMPORTANT */
        display: block;
    }


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

    .service-heading {
        text-align: center;
        margin-bottom: 45px;
    }

    .service-heading h2 {
        color: #003C8F;
        font-size: 48px;
        font-weight: 800;
        font-family: "Google Sans Flex", sans-serif;
        line-height: 1.2;
        margin: 0 0 10px;
    }

    .service-heading p {
        color: #063652;
        font-size: 19px;
        font-family: "Google Sans Flex", sans-serif;
        font-weight: 700;
        margin: 0;
    }


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

    .services-top {

        width: 100%;
        display: grid;
        /* Swimming Pool + wider right column */
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 10px;
    }


    /* =========================================================
    SWIMMING POOLS
    ========================================================= */

    .service-pool {

        width: 100%;
        height: 550px;
        min-height: 550px;
        background: #FDFCF8;
        border-radius: 14px;
        overflow: hidden;

        display: flex;
        flex-direction: column;

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

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

    .service-pool:hover {

        transform: translateY(-5px);

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


    /* POOL TEXT */

    .service-pool-content {

        padding: 22px 30px 16px;
        /* IMPORTANT */
        flex-shrink: 0;
    }

    .service-pool .service-icon {

        font-size: 30px;
        margin-bottom: 7px;
    }

    .service-pool h3 {

        color: #003C8F;
        font-size: 26px;
        font-family: "Google Sans Flex", sans-serif;
        font-weight: 800;
        margin: 0 0 8px;
    }

    .service-pool p {

        color: #555;
        font-size: 16px;
        font-family: "Google Sans Flex", sans-serif;
        font-weight: 500;
        line-height: 1.7;
        margin: 0 0 10px;
    }
    .service-pool-content a {
        display: inline-block;
        margin-top: 12px;
        color: #009FE3;
        font-family: "Google Sans Flex", sans-serif;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
    }

    .service-pool-content a:hover {
        color: #003C8F;
    }

    /* POOL IMAGE — EXACTLY 220px */

    .service-pool-image {
        width: 100%;
        height: 350px;
        min-height: 350px;

        flex-shrink: 0;
        margin: 0;
        padding: 0;
    }

    .service-pool-image img {
        width: 100%;
        height: 350px;
        min-height: 350px;

        object-fit: cover;
        object-position: center;

        display: block;
        margin: 0;
        padding: 0;
    }


    /* =========================================================
    RIGHT COLUMN
    ========================================================= */

    .services-right {

        width: 100%;

        display: grid;

        grid-template-rows: 1fr 1fr;

        gap: 10px;
    }


    /* =========================================================
    WATER FEATURES & WATER SUPPLY
    ========================================================= */

    .service-small {

        width: 100%;

        min-height: 201px;

        background: #F8FBFC;

        border-radius: 14px;

        padding: 24px 30px;

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

        display: flex;

        flex-direction: column;

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

    .service-small:hover {

        transform: translateY(-5px);

        box-shadow:
            0 18px 38px rgba(0,0,0,.12);
    }


    /* ICON */

    .service-small .service-icon {

        font-size: 32px;
        margin-bottom: 8px;
    }


    /* TITLE */

    .service-small h3 {

        color: #003C8F;
        font-size: 26px;
        font-family: "Google Sans Flex", sans-serif;
        font-weight: 800;
        margin: 0 0 8px;
        
    }


    /* DESCRIPTION */

    .service-small p {

        color: #555;
        font-size: 16px;
        font-family: "Google Sans Flex", sans-serif;
        font-weight: 500;
        line-height: 1.7;
        margin: 0 0 10px;
    }


    /* LEARN MORE */

    .service-small a,
    .service-bottom-card a {

        display: inline-block;

        margin-top: auto;
        padding-top: 10px;

        color: #009FE3;
        font-family: "Google Sans Flex", sans-serif;
        font-size: 13px;

        font-weight: 700;

        text-decoration: none;
    }

    .service-small a:hover,
    .service-bottom-card a:hover {

        color: #003C8F;
    }

    /* =========================
    SAUNA & STEAM
    ========================= */

    .service-sauna {
        width: 100%;
        min-height: 280px;

        margin-bottom: 10px;

        background: #FCFAF6;

        border-radius: 14px;
        overflow: hidden;

        display: grid;

        /* TEXT | PHOTO 1 | PHOTO 2 */
        grid-template-columns: 1fr 1fr 1fr;

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

        transition: .3s ease;
    }


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

    .service-sauna-content {
        padding: 35px;

        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .service-sauna h3 {
        color: #003C8F;
        font-size: 26px;
        font-family: "Google Sans Flex", sans-serif;
        font-weight: 800;
        margin: 0 0 8px;
        
    }

    .service-sauna p {
        color: #555;
        font-size: 16px;
        font-family: "Google Sans Flex", sans-serif;
        font-weight: 500;
        line-height: 1.7;
        margin: 0 0 10px;
    }

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

    .service-sauna-content a {
        display: inline-block;

        margin-top: 8px;

        color: #009FE3;
        font-family: "Google Sans Flex", sans-serif;
        font-size: 13px;
        font-weight: 700;

        text-decoration: none;
    }

    .service-sauna-content a:hover {
        color: #003C8F;
    }
    /* =========================================================
    SAUNA + STEAM PHOTOS
    ========================================================= */

    .sauna-photo {
        width: 100%;
        height: 280px;

        overflow: hidden;
    }

    .sauna-photo img {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;

        display: block;

        transition: transform .4s ease;
    }

    .sauna-photo:hover img {
        transform: scale(1.04);
    }

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

    .services-bottom {

        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .service-bottom-card {

        min-height: 190px;
        padding: 28px 30px;
        border-radius: 14px;
        box-shadow:
            0 10px 28px rgba(0,0,0,.07);
    }
    .service-bottom-card h3{
        color: #003C8F;
        font-family: "Google Sans Flex", sans-serif;
        font-size: 26px;
        font-weight: 800;
        margin: 0 0 8px;
    }
    .service-bottom-card p{
        color: #555;
        font-family: "Google Sans Flex", sans-serif;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.7;
        margin: 0 0 10px;
    }


    .fire-supply {
        background: #FBFAF7;
    }

    .maintenance {
        background: #F8FAFC;
    }
/* ===========================
   PRODUCTS & SOLUTIONS PAGE 4
=========================== */

.products {
    background: #86BFD6;;
    padding: 80px 0 90px;
    font-family: "Google Sans Flex", sans-serif;
}

.products-container {
    width: 92%;
    max-width: 1200px;
    margin: 0 auto;
}


/* HEADING */

.products-heading {
    text-align: center;
    margin-bottom: 45px;
}

.products-heading h2 {
    color: #003C8F;
    font-family: "Google Sans Flex", sans-serif;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 10px;
}

.products-heading p {
   color: #063652;
    font-family: "Google Sans Flex", sans-serif;
    font-size: 19px;
    font-weight: 700;
    margin: 0;
}


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

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
}

/* =========================================================
   PRODUCT CARD — CATALOGUE STYLE
========================================================= */

.product-card {
    background: #ffffff;

    border: 1px solid #e1e8ef;

    border-radius: 7px;

    overflow: hidden;

    box-shadow: 0 2px 8px rgba(20, 70, 110, 0.05);

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

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

    box-shadow:
        0 8px 20px rgba(20, 70, 110, 0.12);

    border-color: #9bcdf2;
}




/* =========================================================
   PRODUCT IMAGE — SMALLER
========================================================= */

.product-image {
    position: relative;

    height: 150px;

    padding: 10px;

    background: #f7fafc;

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

    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: transform .25s ease;
}

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


/* =========================================================
   PRODUCT TAG
========================================================= */

.product-tag {
    position: absolute;

    top: 8px;
    left: 8px;

    padding: 4px 7px;

    border-radius: 4px;

    background: #1268bd;

    color: #ffffff;

    font-size: 8px;

    font-weight: 700;

    line-height: 1;
}


/* =========================================================
   PRODUCT INFO — COMPACT
========================================================= */

.product-info {
    padding: 10px 11px 11px;

    text-align: left;
}

.product-info h3 {
    margin: 0 0 4px;

    color: #064b95;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.25;
}

.product-info p {
    min-height: 32px;

    margin: 0 0 9px;

    color: #63758a;

    font-size: 10px;

    line-height: 1.35;
}


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

.product-actions {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 5px;
}

.btn-outline,
.btn-primary {
    min-height: 28px;

    padding: 5px 6px;

    border-radius: 4px;

    display: flex;

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

    text-align: center;

    font-size: 9px;

    font-weight: 700;

    line-height: 1.1;

    transition: .2s;
}


/* VIEW DETAILS */

.btn-outline {
    color: #087ed1;

    background: #ffffff;

    border: 1px solid #8fc6ec;
}

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

    background: #087ed1;

    border-color: #087ed1;
}


/* REQUEST QUOTE */

.btn-primary {
    color: #ffffff !important;

    background: #0757ad !important;

    border: 1px solid #0757ad !important;
}

.btn-primary:hover {
    color: #ffffff !important;

    background: #063b78 !important;

    border-color: #063b78 !important;
}

/* ICON */

.product-icon {
    font-size: 48px;
    margin-bottom: 15px;
}


/* TITLE */

.product-card h3 {
    color: #003C8F;
    font-size: 22px;
    font-family: "Google Sans Flex", sans-serif;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 12px;
}


/* DESCRIPTION */

.product-card p {
    color: #5F6872;
    font-size: 15px;
    font-family: "Google Sans Flex", sans-serif;
    font-weight: 700;
    line-height: 1.65;

    margin: 0;
}


/* LINK */

.product-card a {
    display: inline-block;

    margin-top: 18px;
    color: #009FE3;
    font-size: 14px;
    font-family: "Google Sans Flex", sans-serif;
    font-weight: 700;
    text-decoration: none;
}


/* BUTTON */

.products-button {
text-align: center;
margin-top: 45px;
}


/* RESPONSIVE */

@media (max-width: 900px) {

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

}


@media (max-width: 600px) {

    .products {
    padding: 65px 15px;
    }

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

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

}

/* Completed date on 10-08-2026  */


/* ==========================================
   HOME PROJECTS
========================================== */

.home-projects {
    background: #86BFD6;
    padding: 90px 0;
}

.home-projects .projects-container {
    width: 92%;
    max-width: 1200px;
    margin: 0 auto;
}


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

.home-projects .section-title {
    text-align: center;
    margin-bottom: 45px;
}

.home-projects .section-title h2 {
    color: #003C8F;
    font-family: "Google Sans Flex", sans-serif;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 10px;
}
.home-projects .section-subtitle {
    color: #063652;
    font-family: "Google Sans Flex", sans-serif;
    font-size: 19px;
    font-weight: 700;
    margin: 0;
}

/* ==========================================
   PROJECT GRID
========================================== */

.home-projects .project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


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

.home-projects .project-card {
    background: #FFFFFF;
    border-radius: 14px;
    overflow: hidden;

    border: 1px solid #DCE7EF;

    box-shadow:
        0 8px 24px rgba(0, 60, 143, .08);

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

.home-projects .project-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 16px 35px rgba(0, 60, 143, .14);
}


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

.home-projects .project-card img {
    width: 100%;
    height: 240px;

    object-fit: cover;
    object-position: center;

    display: block;

    transition: transform .4s ease;
}

.home-projects .project-card:hover img {
    transform: scale(1.04);
}


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

.home-projects .project-content {
    min-height: 155px;
    padding: 22px;
    text-align: left;
}

.home-projects .project-category {
    display: block;

    color: #00AEEF;

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

    text-transform: uppercase;
    letter-spacing: .8px;

    margin-bottom: 7px;
}

.home-projects .project-content h3 {
    color: #003C8F;

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

    margin: 0 0 8px;
}

.home-projects .project-content p {
    color: #5F6B75;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;

    margin: 0;
}


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

.home-projects .project-button {
    text-align: center;
    margin-top: 45px;
}

.home-projects .project-button .btn {
    display: inline-block;

    background: #00AEEF;
    color: #FFFFFF;

    padding: 14px 34px;

    border-radius: 7px;

    text-decoration: none;

    font-weight: 700;

    transition: .3s ease;
}

.home-projects .project-button .btn:hover {
    background: #003C8F;
    transform: translateY(-2px);
}


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

@media (max-width: 900px) {

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

}


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

@media (max-width: 600px) {

    .home-projects {
        padding: 65px 15px;
    }

    .home-projects .section-title h2 {
        font-size: 36px;
    }

    .home-projects .section-subtitle {
        font-size: 16px;
    }

    .home-projects .project-grid {
        grid-template-columns: 1fr;
    }

    .home-projects .project-card img {
        height: 220px;
    }

}
/* ===========================
   CONTACT
=========================== */

.contact{
    background:#F1F7FA;
    padding:80px 0;
}

.contact-container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:start;
}

.contact-info h2{
    color:#003C8F;
    font-size:40px;
    margin-bottom:15px;
}

.contact-info .subtitle{
    color:#666;
    margin-bottom:30px;
    font-size:18px;
}

.info-box{
    background:#fff;
    padding:30px;
    border-radius:15px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.info-box h3{
    color:#003C8F;
    margin-bottom:20px;
}

.info-box p{
    margin-bottom:15px;
    color:#555;
    line-height:1.8;
}

.contact-form{
    background:#fff;
    padding:30px;
    border-radius:15px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.contact-form h2{
    color:#003C8F;
    margin-bottom:25px;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:15px;
    margin-bottom:18px;
    border:1px solid #ddd;
    border-radius:6px;
    font-size:16px;
}

.contact-form input:focus,
.contact-form textarea:focus{
    border-color:#00AEEF;
    outline:none;
}

.contact-form button{
    background:#00AEEF;
    color:#fff;
    border:none;
    padding:15px 30px;
    border-radius:6px;
    cursor:pointer;
    font-size:16px;
    font-weight:600;
    transition:.3s;
}

.contact-form button:hover{
    background:#007ACC;
}

/* Mobile */

@media (max-width:992px){

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

}


/* ===========================
   MAP
=========================== */
.map-section{
    padding:60px 0;
    background:#ffffff;
}

.map-section h2{
    text-align:center;
    color:#003C8F;
    font-size:34px;
    margin-bottom:25px;
}

.map-section iframe{
    width:100%;
    height:320px;
    border:0;
    border-radius:12px;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

@media (max-width:992px){

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

}
@media (max-width:768px){

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

}
@media (max-width:992px){

    .about .container,
    .contact-container{
    grid-template-columns:1fr;
    display:grid;
    }

    nav{
    gap:18px;
    }

    .company-info h1{
    font-size:28px;
    }

}
@media (max-width:768px){

    header .container{
        flex-direction:column;
    }

    nav{
        margin-top:20px;
        flex-wrap:wrap;
        justify-content:center;
    }

}

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



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

.page-banner{

    position:relative;
    height:280px;
    background:url("../images/hero/hero2.jpg") center/cover no-repeat;
    display:flex;
    justify-content:center;
    align-items:center;

}

.banner-overlay{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);

}

.banner-content{

    position:relative;
    z-index:2;
    color:#fff;
    text-align:center;

}

.banner-content h1{

    font-size:48px;
    margin-bottom:15px;

}

.banner-content p{

    font-size:20px;

}

.container-column{

    width:95%;
    max-width:1400px;
    margin:auto;

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

.footer {
    background: #111;
    color: #ddd;
    padding: 85px 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    align-items: start;
}


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

.footer-about h2 {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 18px;
}

.footer-about h2::after {
    content: "";
    display: block;
    width: 150px;
    height: 2.5px;
    background: #00AEEF;
    margin-top: 10px;
}
.footer-about h2::after {
    display: none;
}
.footer-about p {
    color: #d6d6d6;
    font-size: 17px;
    line-height: 1.7;
    text-align: left;
    margin-bottom: 20px;
}


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

.footer h4 {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}

.footer h4::after {
    content: "";
    display: block;
    width: 150px;
    height: 2.5px;
    background: #00AEEF;
    margin-top: 10px;
}


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

.footer ul {
    list-style: none;
    padding: 0;
}

.footer ul li {
    margin-bottom: 10px;
}

.footer a {
    color: #ccc;
    text-decoration: none;
    transition: .25s;
}

.footer a:hover {
    color: #29ABE2;
    padding-left: 6px;
}


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

.footer p {
    color: #bbb;
    line-height: 1.8;
}


/* ==========================
   SOCIAL MEDIA
========================== */

.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.footer-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;

    background: rgba(255,255,255,0.12);
    color: #fff;

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

    text-decoration: none;
    transition: all .3s ease;
}

.footer-social a:hover {
    background: #00bcd4;
    transform: translateY(-3px);
}


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

.footer-bottom {
    font-size: 14px;
    margin-top: 50px;
    padding: 20px;

    text-align: center;

    border-top: 1px solid #333;
    color: #888;
}

/* Facebook */

.footer-social a:nth-child(1) {
    background: #1877F2;
}


/* WhatsApp */

.footer-social a:nth-child(2) {
    background: #25D366;
}


/* Viber */

.footer-social a:nth-child(3) {
    background: #7360F2;
}


/* Hover */

.footer-social a:hover {
    color: #fff;
    transform: translateY(-4px);

    box-shadow:
        0 8px 18px rgba(0,0,0,.20);
}
/* ===========================
   Scroll To Top Button
=========================== */

#scrollTopBtn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;

    display: none;

    background: #0d9de3;
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 12px 20px;
    cursor: pointer;
    transition: .3s;
}

#scrollTopBtn:hover {
    background: #0077b6;
}
/* ===========================
   PAGE HERO
=========================== */

.page-hero{
    position:relative;
    overflow:hidden;

    height:420px;

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

    text-align:center;
    color:#fff;

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

.page-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.35);
}

.page-hero .hero-content{
    position:relative;
    z-index:2;
}

.page-hero h2{
    font-size:52px;
    font-weight:900;
    margin-bottom:15px;
}

.page-hero p{
    font-size:22px;
    font-weight:500;
}

.container-column{
    width:95%;
    max-width:1400px;
    margin:auto;
}

.container-small{
    width:90%;
    max-width:900px;
    margin:auto;
    text-align:center;
}
/* ===========================
   SWIMMING POOL CURRENT & COMPLETED PROJECT
=========================== */



.current-projects .project-card img{
    width:100%;
    height:180px;
    object-fit:cover;
    object-position:center;
}

.completed .project-card img{
    width:100%;
    height:240px;
    object-fit:cover;
    object-position:center;
}
/* ===========================
   WATER FEATURE  CURRENT & COMPLETED PROJECT
=========================== */


/* ===========================
   FIRE PUMP  CURRENT & COMPLETED PROJECT
=========================== */

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

.cover-photo{

    width:100%;
    height:220px;

    object-fit:cover;
    object-position:center;

    border-radius:15px 15px 0 0;

}

/* Preview Images */

.preview-grid{

    display:grid;

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

    gap:5px;

    padding:10px;

}

.preview-grid img{

    width:100%;
    height:60px;

    object-fit:cover;
    object-position:center;

    border-radius:5px;

    transition:.3s;

}

.preview-grid img:hover{

    transform:scale(1.05);

}

/* Last Box (+18) */

.more-photo{

    background:#003C8F;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:5px;

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

    cursor:pointer;

    transition:.3s;

}

.more-photo:hover{

    background:#0056c9;

}

/* ===========================
   CONTACT PAGE HERO
=========================== */
/* ===========================
   SERVICE PAGES DETAILS
=========================== */

.services-page .services {
    background: #97c6dd;
}

.service-detail{
    padding:100px 0;
}

.service-detail.light{
    background:#E4E8EC;
}

.service-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.service-layout.reverse .service-image{
    order:2;
}

.service-layout.reverse .service-text{
    order:1;
}

/* Image */

.service-image img{
    width:100%;
    display:block;
    border-radius:18px;
    box-shadow:0 20px 45px rgba(0,0,0,.12);
    transition:.35s ease;
}

.service-image img:hover{
    transform:scale(1.02);
}

/* Text */

.service-text h2{
    color:#003C8F;
    font-size:42px;
    margin-bottom:22px;
    line-height:1.2;
}

.service-text p{
    color:#555;
    font-size:17px;
    line-height:1.9;
    margin-bottom:25px;
}

.service-text ul{
    margin:0 0 35px 20px;
}

.service-text li{
    margin-bottom:12px;
    color:#444;
    line-height:1.8;
}

@media (max-width:900px){

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

    .service-layout{
        grid-template-columns:1fr;
        gap:45px;
    }

    .service-layout.reverse .service-image,
    .service-layout.reverse .service-text{
        order:initial;
    }

}


/* ===========================
   PAGE HERO BACKGROUNDS
=========================== */

.about-hero{
    background-image:url("../images/about/banner.jpg");
}

.services-hero{
    background-image:url("../images/services/banner.JPG");
}

.projects-hero{
    background-image:url("../images/projects/banner.jpg");
}

.contact-hero{
    background-image:
        linear-gradient(rgba(0, 35, 75, 0.55), rgba(0, 35, 75, 0.55)),
        url("../images/contact/banner.JPG");
    background-size: cover;
    background-position: center;
}

/* Service Pages */

/* All page under this  */
/* =========================================================
   ABOUT PAGE
========================================================= */

.about {
    padding: 90px 0;
    background: #FFFFFF;
}

.about .about-container {
    display: flex;
    align-items: center;
    gap: 60px;
}


/* IMAGE */

.about-image {
    flex: 1;
}

.about-image img {
    width: 100%;
    height: 360px;

    object-fit: cover;
    object-position: center;

    display: block;

    border-radius: 15px;

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


/* CONTENT */

.about-content {
    flex: 1;
}

.about-content h2 {
    color: #003C8F;

    font-family: "Google Sans Flex", sans-serif;

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

    line-height: 1.2;

    margin-bottom: 22px;
}

.about-content p {
    color: #555;

    font-family: "Google Sans Flex", sans-serif;

    font-size: 17px;
    font-weight: 500;

    line-height: 1.8;

    margin-bottom: 18px;
}


/* =========================================================
   MISSION & VISION
========================================================= */

.about-values {
    background: #9ecce0;

    padding: 80px 0;
}

.about-values-container {
    width: 92%;
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 24px;
}

.about-value-card {
    background: #FFFFFF;

    padding: 35px;

    border-radius: 14px;

    text-align: center;

    box-shadow:
        0 10px 28px rgba(0,60,143,.08);

    transition: .3s ease;
}

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

    box-shadow:
        0 18px 38px rgba(0,60,143,.13);
}

.about-value-icon {
    font-size: 42px;

    margin-bottom: 15px;
}

.about-value-card h3 {
    color: #003C8F;

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

    margin-bottom: 12px;
}

.about-value-card p {
    color: #555;

    font-size: 16px;

    line-height: 1.7;

    margin: 0;
}


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

.about-why {
    background: #FFFFFF;

    padding: 90px 0;
}

.about-why-container {
    width: 92%;
    max-width: 1200px;

    margin: 0 auto;
}

.about-section-heading {
    text-align: center;

    margin-bottom: 45px;
}

.about-section-heading h2 {
    color: #003C8F;

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

    line-height: 1.2;

    margin-bottom: 10px;
}

.about-section-heading p {
    color: #063652;

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

    margin: 0;
}


/* WHY GRID */

.about-why-grid {
    display: grid;

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

    gap: 24px;
}


/* WHY CARD */

.about-why-card {
    background: #F8FBFC;

    border: 1px solid #DCE7EF;

    border-radius: 14px;

    padding: 30px 25px;

    text-align: center;

    box-shadow:
        0 8px 22px rgba(0,60,143,.06);

    transition: .3s ease;
}

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

    box-shadow:
        0 16px 32px rgba(0,60,143,.12);
}

.about-why-icon {
    font-size: 36px;

    margin-bottom: 14px;
}

.about-why-card h3 {
    color: #003C8F;

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

    margin-bottom: 10px;
}

.about-why-card p {
    color: #5F6872;

    font-size: 14px;

    line-height: 1.65;

    margin: 0;
}


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

@media (max-width: 900px) {

    .about .about-container {
        display: grid;

        grid-template-columns: 1fr;

        gap: 40px;
    }

    .about-image img {
        height: 320px;
    }

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

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

}


@media (max-width: 600px) {

    .about {
        padding: 65px 15px;
    }

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

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

    .about-image img {
        height: 240px;
    }

    .about-values {
        padding: 65px 15px;
    }

    .about-values-container {
        width: 100%;
    }

    .about-why {
        padding: 65px 15px;
    }

    .about-why-container {
        width: 100%;
    }

    .about-section-heading h2 {
        font-size: 36px;
    }

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

}

/* ===========================
   CONTACT SOCIAL 
=========================== */

.contact-social {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

.contact-social a {
    width: 42px;
    height: 42px;

    border-radius: 50%;

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

    color: #fff;
    text-decoration: none;

    transition: .3s ease;
}

.contact-social a:nth-child(1) {
    background: #1877F2;
}

.contact-social a:nth-child(2) {
    background: #25D366;
}

.contact-social a:nth-child(3) {
    background: #7360F2;
}

.contact-social a:nth-child(4) {
    background: #229ED9;
}

.contact-social a:hover {
    transform: translateY(-4px);
    box-shadow: 0 7px 18px rgba(0,0,0,.2);
}

.contact-social i {
    font-size: 18px;
}
.contact-info .info-box a {
    color: #0072BC;
    text-decoration: none;
    font-weight: 600;
}

.contact-info .info-box a:hover {
    color: #00AEEF;
}

.form-intro {
    color: #666;
    margin-bottom: 25px;
    line-height: 1.7;
}
/* =========================================================
   PROJECTS PAGE (PAGE 5)
========================================================= */

/* ---------- Projects Hero ---------- */

.projects-hero {
    min-height: 360px;
    background:
        linear-gradient(
            rgba(0, 45, 100, 0.55),
            rgba(0, 45, 100, 0.55)
        ),
        url("../images/projects/projects-hero.jpg") center center / cover no-repeat;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.projects-hero .banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 45, 100, 0.25);
}

.projects-hero .banner-content {
    position: relative;
    z-index: 2;
    color: #ffffff;
    max-width: 900px;
    padding: 40px 20px;
}

.projects-hero h1 {
    font-size: 52px;
    font-weight: 800;
    margin-bottom: 15px;
}

.projects-hero p {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
    margin: 0;
}


/* ---------- Projects Section ---------- */

.projects {
    padding: 90px 0 110px;
    background: #f5f9fc;
}

.container-column {
    width: min(1180px, 92%);
    margin: 0 auto;
}

.projects h2 {
    text-align: center;
    color: #003c8f;
    font-size: 42px;
    font-weight: 800;
    margin: 0 0 15px;
}

.section-subtitle {
    max-width: 850px;
    margin: 0 auto 55px;
    text-align: center;
    color: #555;
    font-size: 18px;
    line-height: 1.7;
}


/* ---------- Project Grid ---------- */

.project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


/* ---------- Project Card ---------- */

.project-card {
    display: flex;
    flex-direction: column;

    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;

    text-decoration: none;
    color: inherit;

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

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
}


/* ---------- Project Image ---------- */

.project-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;

    transition: transform 0.4s ease;
}

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


/* ---------- Project Card Content ---------- */

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

    color: #003c8f;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
}

.project-card p {
    margin: 0 25px 20px;

    color: #555;
    font-size: 16px;
    line-height: 1.7;
}


/* ---------- View Projects Button ---------- */

.btn-small {
    display: inline-block;

    margin: auto 25px 25px;

    width: fit-content;

    padding: 11px 20px;

    background: #2196c9;
    color: #ffffff;

    border-radius: 7px;

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

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.project-card:hover .btn-small {
    background: #003c8f;
    transform: translateX(3px);
}


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

/* ---------- Tablet ---------- */

@media (max-width: 900px) {

    .projects-hero {
        min-height: 320px;
    }

    .projects-hero h1 {
        font-size: 44px;
    }

    .projects-hero p {
        font-size: 18px;
    }

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

    .projects h2 {
        font-size: 36px;
    }
}


/* ---------- Mobile ---------- */

@media (max-width: 600px) {

    .projects {
        padding: 65px 0 80px;
    }

    .projects-hero {
        min-height: 280px;
    }

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

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

    .projects h2 {
        font-size: 32px;
    }

    .section-subtitle {
        font-size: 16px;
        margin-bottom: 40px;
    }

    .project-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .project-card img {
        height: 210px;
    }

    .project-card h3 {
        font-size: 22px;
    }
}


/* =========================================================
   PRODUCTS PAGE
   OMNI FLOW SYSTEM CO., LTD.
========================================================= */


/* =========================================================
   PRODUCTS PAGE VARIABLES
========================================================= */

:root {

    --product-blue: #0757ad;
    --product-blue-dark: #063b78;
    --product-blue-light: #0da9ed;

    --product-text: #12385b;
    --product-muted: #64748b;

    --product-bg: #f4f8fc;
    --product-white: #ffffff;

    --product-border: #dbe6f0;

    --product-shadow:
        0 8px 28px rgba(20, 70, 110, 0.08);

    --product-shadow-hover:
        0 16px 38px rgba(20, 70, 110, 0.16);

    --product-radius: 12px;
}


/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--text);

    background: var(--bg);
}

a {
    text-decoration: none;
    color: inherit;
}

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


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

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

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

    border-bottom:
        1px solid var(--border);

    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.04);
}

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

    margin: auto;

    min-height: 82px;

    padding:
        0 28px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


/* LOGO */

.logo {
    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 360px;
}

.logo img {
    width: 112px;

    height: auto;

    object-fit: contain;
}

.logo-text {
    display: flex;

    flex-direction: column;
}

.logo-text strong {
    color: var(--blue);

    font-size: 21px;

    letter-spacing: .3px;
}

.logo-text span {
    margin-top: 4px;

    font-size: 13px;

    color: #687789;
}


/* NAV */

.main-nav {
    display: flex;

    align-items: center;

    gap: 28px;
}

.main-nav a {
    position: relative;

    color: #173d64;

    font-size: 14px;

    font-weight: 600;

    padding: 30px 0;
}

.main-nav a::after {
    content: "";

    position: absolute;

    left: 0;

    bottom: 21px;

    width: 0;

    height: 2px;

    background:
        var(--blue-light);

    transition: .25s;
}

.main-nav a:hover::after,
.main-nav a.active::after {
    width: 100%;
}


/* QUOTE BUTTON */

.header-quote {
    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        13px 18px;

    border-radius: 7px;

    background:
        var(--blue);

    color: white;

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;

    transition: .25s;
}

.header-quote:hover {
    background:
        var(--blue-dark);

    transform:
        translateY(-1px);
}


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

.products-hero {
    position: relative;

    min-height: 360px;

    background:
        linear-gradient(
            rgba(0, 35, 85, 0.70),
            rgba(0, 35, 85, 0.70)
        ),
        url("../images/products/products-hero.jpg")
        center center / cover no-repeat;

    overflow: hidden;

    color: #ffffff;
}

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

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 35, 85, 0.15),
            rgba(7, 87, 173, 0.05)
        );

    pointer-events: none;
}


/* HERO CONTAINER */

.hero-container {
    position: relative;

    z-index: 2;

    max-width: 1400px;

    min-height: 360px;

    margin: auto;

    padding:
        45px 40px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;
}


/* HERO CONTENT */

.products-hero .hero-content {
    flex: 1;

    max-width: 760px;
}

.hero-label {
    display: block;

    font-size: 12px;

    letter-spacing: 2px;

    font-weight: 700;

    color:
        #8ee3ff;
}

.products-hero h1,
.products-hero h2 {
    margin:
        8px 0 18px;

    color:
        #ffffff;

    font-size: 48px;

    font-weight: 800;

    line-height: 1.15;
}

.products-hero .hero-subtitle {
    max-width: 780px;

    margin:
        0 auto 22px 0;

    color:
        #ffffff;

    font-size: 18px;

    font-weight: 600;

    line-height: 1.55;

    letter-spacing: 0;

    text-transform: none;
}

.products-hero .hero-description {
    max-width: 850px;

    margin:
        0 0 8px;

    color:
        #ffffff;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.55;
}

.products-hero .hero-description:last-child {
    margin-bottom: 0;
}


/* BREADCRUMB */

.breadcrumb {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 20px;

    font-size: 13px;

    color:
        rgba(255,255,255,.75);
}

.breadcrumb a:hover {
    color: white;
}


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

.hero-features {
    flex: 0 0 auto;

    display: flex;

    gap: 25px;
}

.hero-feature {
    display: flex;

    gap: 12px;

    align-items: center;

    min-width: 155px;
}

.hero-feature-icon {
    width: 43px;

    height: 43px;

    flex: 0 0 43px;

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

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        #8ee3ff;
}

.hero-feature strong {
    display: block;

    font-size: 14px;
}

.hero-feature span {
    display: block;

    margin-top: 4px;

    font-size: 11px;

    line-height: 1.4;

    color:
        rgba(255,255,255,.7);
}


/* =========================================================
   PRODUCTS AREA
========================================================= */

.products-area {
    padding:
        45px 0 70px;
}

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

    margin: auto;

    padding:
        0 28px;

    display: grid;

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

    gap: 38px;

    align-items: start;
}


/* =========================================================
   SIDEBAR
========================================================= */

.product-sidebar {
    background:
        white;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    overflow: hidden;

    box-shadow:
        var(--shadow);

    position: sticky;

    top: 105px;
}

.sidebar-title {
    padding:
        20px;

    font-size: 16px;

    font-weight: 800;

    color:
        var(--blue);

    border-bottom:
        1px solid var(--border);
}

.sidebar-title i {
    margin-right: 8px;
}


/* CATEGORY */

.category-link {
    min-height: 53px;

    padding:
        12px 17px;

    display: flex;

    align-items: center;

    gap: 12px;

    border-bottom:
        1px solid #edf2f7;

    color:
        #38516b;

    font-size: 13px;

    font-weight: 600;

    transition: .2s;
}

.category-link i {
    width: 20px;

    text-align: center;

    color:
        var(--blue);
}

.category-link:hover {
    background:
        #eef7ff;

    color:
        var(--blue);
}

.category-link.active {
    background:
        var(--blue);

    color: white;
}

.category-link.active i {
    color: white;
}


/* =========================================================
   CATALOG
========================================================= */

.catalog-box {
    margin:
        18px;

    padding:
        15px;

    border-radius:
        10px;

    background:
        linear-gradient(135deg, #e5f2ff, #f4f9ff);

    display: flex;

    align-items: center;

    gap: 10px;
}

.catalog-icon {
    width: 40px;

    height: 40px;

    flex:
        0 0 40px;

    border-radius:
        7px;

    background:
        var(--blue);

    color:
        white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 19px;
}

.catalog-content {
    flex: 1;
}

.catalog-content strong {
    display: block;

    font-size: 16px;

    color:
        var(--blue);
}

.catalog-content span {
    display: block;

    margin-top: 3px;

    font-size: 12px;

    color:
        var(--muted);
}

.catalog-box > a {
    color:
        var(--blue);

    font-size: 20px;
}


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

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

.product-category-section {
    scroll-margin-top: 110px;

    margin-bottom:
        70px;
}

.section-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom:
        25px;
}

.section-heading > div:first-child {
    max-width: 760px;
}

.section-heading span {
    display: block;

    margin-bottom: 6px;

    color:
        var(--blue-light);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.section-heading h2 {
    margin:
        0 0 8px;

    font-size: 28px;

    line-height: 1.2;

    color:
        #084b93;
}

.section-heading p {
    margin: 0;

    font-size: 14px;

    line-height: 1.6;

    color:
        var(--muted);
}

.product-count {
    white-space: nowrap;

    padding:
        8px 13px;

    border:
        1px solid var(--border);

    border-radius:
        6px;

    background:
        white;

    font-size: 12px;

    color:
        var(--muted);
}


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

.product-grid {
    display: grid;

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

    gap: 20px;
}

/* =========================================================
   PRODUCT CARD — COMPACT
========================================================= */

.product-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;

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

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

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

    box-shadow:
        0 12px 28px rgba(20, 70, 110, 0.13);

    border-color: #9bd7ff;
}


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

.product-image {
    position: relative;

    height: 245px;

    padding: 14px;

    background: #f7fafd;

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

    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: transform .3s ease;
}

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


/* =========================================================
   PRODUCT INFO
========================================================= */

.product-info {
    padding: 14px 16px 16px;
}

.product-info h3 {
    margin: 0 0 6px;

    color: #064b95;

    font-size: 17px;
    line-height: 1.25;
}

.product-info p {
    min-height: 40px;

    margin: 0 0 13px;

    color: #63758a;

    font-size: 12px;
    line-height: 1.45;
}


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

.product-actions {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 7px;

    margin-top: 8px;
}

.btn-outline,
.btn-primary {
    min-height: 34px;

    padding: 7px 8px;

    border-radius: 5px;

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

    text-align: center;

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

    line-height: 1.2;

    text-decoration: none;

    transition: all .2s ease;
}


/* VIEW DETAILS */

.btn-outline {
    color: var(--blue);

    background: #ffffff;

    border: 1px solid #8cb9df;
}

.btn-outline:hover {
    color: var(--blue-dark);

    background: #eef7ff;

    border-color: var(--blue);
}


/* REQUEST A QUOTE */

.btn-primary {
    color: #ffffff !important;

    background: var(--blue) !important;

    border: 1px solid var(--blue) !important;
}

.btn-primary:hover {
    color: #ffffff !important;

    background: var(--blue-dark) !important;

    border-color: var(--blue-dark) !important;
}

/* PRODUCT TAG */

.product-tag {
    position: absolute;

    top: 12px;

    left: 12px;

    padding:
        5px 9px;

    border-radius:
        5px;

    background:
        rgba(7,87,173,.92);

    color:
        white;

    font-size: 10px;

    font-weight: 700;
}


/* =========================================================
   PRODUCT INFO
========================================================= */

.product-info {
    padding:
        18px;
}

.product-info h3 {
    margin:
        0 0 7px;

    color:
        #064b95;

    font-size: 18px;

    line-height: 1.25;
}

.product-info p {
    min-height:
        44px;

    margin:
        0 0 17px;

    color:
        #63758a;

    font-size: 13px;

    line-height: 1.55;
}
/* =========================================================
   PRODUCT ACTION BUTTONS
========================================================= */

.product-actions {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 8px;
    margin-top: 15px;
}

.btn-outline,
.btn-primary {
    min-height: 38px;
    padding: 9px 10px;

    border-radius: 5px;

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

    text-align: center;

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

    text-decoration: none;

    transition: all .2s ease;
}


/* VIEW DETAILS */

.btn-outline {
    color: var(--blue);
    background: #ffffff;
    border: 1px solid #8cb9df;
}

.btn-outline:hover {
    background: #eef7ff;
    color: var(--blue-dark);
    border-color: var(--blue);
}


/* REQUEST A QUOTE */

.btn-primary {
    color: #ffffff !important;
    background: #0757ad !important;
    border: 1px solid #0757ad !important;
}

.btn-primary:hover {
    color: #ffffff !important;
    background: #063b78 !important;
    border-color: #063b78 !important;
}


/* =========================================================
   WHY OMNI FLOW
========================================================= */

.why-section {
    margin-top:
        20px;

    padding:
        25px 0;

    background:
        #eef5fb;

    border-top:
        1px solid var(--border);
}

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

    margin:
        auto;

    padding:
        0 28px;

    display:
        grid;

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

.why-item {
    padding:
        10px 25px;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    border-right:
        1px solid #d5e1ec;
}

.why-item:last-child {
    border-right:
        none;
}

.why-item > i {
    color:
        var(--blue);

    font-size:
        29px;
}

.why-item h3 {
    margin:
        0 0 5px;

    color:
        #084b93;

    font-size:
        14px;
}

.why-item p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.4;
}


/* =========================================================
   BACK TO TOP
========================================================= */

.back-top {
    position:
        fixed;

    right:
        25px;

    bottom:
        25px;

    width:
        45px;

    height:
        45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--blue);

    color:
        white;

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

    transition:
        .2s;
}

.back-top:hover {
    background:
        var(--blue-dark);

    transform:
        translateY(-3px);
}


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

@media (max-width: 1100px) {

    .header-container {
        gap:
            15px;
    }

    .logo {
        min-width:
            auto;
    }

    .logo-text {
        display:
            none;
    }

    .main-nav {
        gap:
            17px;
    }

    .hero-container {
        gap:
            30px;
    }

    .hero-features {
        gap:
            15px;
    }

    .products-container {
        grid-template-columns:
            210px minmax(0, 1fr);

        gap:
            25px;
    }

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

    .product-image {
        height:
            270px;
    }

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

    .why-item {
        border-bottom:
            1px solid #d5e1ec;
    }

    .why-item:nth-child(2n) {
        border-right:
            none;
    }
}


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

@media (max-width: 768px) {

    .header-container {
        min-height:
            68px;

        padding:
            0 15px;
    }

    .logo img {
        width:
            95px;
    }

    .main-nav {
        display:
            none;
    }

    .header-quote {
        padding:
            10px 12px;

        font-size:
            11px;
    }


    /* HERO */

    .products-hero {
        min-height:
            auto;
    }

    .hero-container {
        min-height:
            auto;

        padding:
            45px 20px;

        display:
            block;
    }

    .products-hero h1,
    .products-hero h2 {
        font-size:
            34px;
    }

    .products-hero .hero-subtitle {
        font-size:
            17px;
    }

    .products-hero .hero-description {
        font-size:
            15px;

        line-height:
            1.55;
    }

    .hero-features {
        margin-top:
            30px;

        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            15px;
    }


    /* PRODUCTS */

    .products-area {
        padding:
            25px 0 50px;
             background:
        #eaf3fa;
    }

    .products-container {
        display:
            block;

        padding:
            0 15px;
    }


    /* SIDEBAR */

    .product-sidebar {
        position:
            static;
        background: #ffffff;
        margin-bottom:
            30px;
    }

    .category-link {
        display:
            inline-flex;

        width:
            auto;

        margin:
            5px;

        padding:
            9px 11px;

        border:
            1px solid var(--border);

        border-radius:
            6px;
    }

    .sidebar-title {
        border-bottom:
            none;
    }

    .catalog-box {
        display:
            none;
    }


    /* SECTION HEADING */

    .section-heading {
        display:
            block;
    }

    .product-count {
        display:
            inline-block;

        margin-top:
            15px;
    }


    /* PRODUCT GRID */

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

        gap:
            18px;
    }

    .product-image {
        height:
            250px;
    }


    /* WHY */

    .why-container {
        grid-template-columns:
            1fr;
    }

    .why-item {
        padding:
            15px 0;

        border-right:
            none;

        border-bottom:
            1px solid #d5e1ec;
    }

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


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

@media (max-width: 480px) {

    .header-quote {
        font-size:
            0;
    }

    .header-quote i {
        font-size:
            15px;
    }

    .products-hero h1,
    .products-hero h2 {
        font-size:
            30px;
    }

    .products-hero .hero-subtitle {
        font-size:
            16px;
    }

    .products-hero .hero-description {
        font-size:
            14px;
    }

    .product-image {
        height:
            220px;
    }

    .product-actions {
        grid-template-columns:
            1fr;
    }

    .product-info {
        padding:
            16px;
    }
}



/* =========================================================
   HOME PRODUCTS — MATCH OUR SERVICES STYLE
   Only affects the Home page Products section
========================================================= */

.products {
    background: #86BFD6;
    padding: 80px 0 90px;
}

.products .products-container {
    width: 92%;
    max-width: 1200px;
    margin: 0 auto;
}

.products .products-heading {
    width: 100%;
    text-align: center;
    margin-bottom: 45px;
}

.products .products-heading h2 {
    color: #003C8F;
    font-family: "Google Sans Flex", sans-serif;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 10px;
}

.products .products-heading p {
    color: #063652;
    font-family: "Google Sans Flex", sans-serif;
    font-size: 19px;
    font-weight: 700;
    margin: 0;
}

.products .products-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-items: stretch;
}

.products .product-card {
    background: #FDFCF8;
    border: none;
    border-radius: 14px;
    padding: 24px 30px;
    min-height: 201px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

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

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

.products .product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 38px rgba(0,0,0,.12);
}

.products .product-card .product-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.products .product-card h3 {
    color: #003C8F;
    font-family: "Google Sans Flex", sans-serif;
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 8px;
}

.products .product-card p {
    color: #555;
    font-family: "Google Sans Flex", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    margin: 0 0 10px;
}

.products .product-card a {
    display: inline-block;
    margin-top: auto;
    padding-top: 10px;

    color: #009FE3;
    font-family: "Google Sans Flex", sans-serif;
    font-size: 13px;
    font-weight: 700;

    text-decoration: none;
}

.products .products-button {
    margin-top: 40px;
    text-align: center;
}



/* ==========================
   FOOTER LAYOUT WITH LEGAL
========================== */

.footer-grid {
    grid-template-columns: 2fr repeat(4, minmax(0, 1fr));
    gap: 28px;
}

@media (max-width: 1100px) {
    .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }

    .footer-about {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .footer-about {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .footer-about {
        grid-column: auto;
    }
}


/* =========================================
   LEGAL PAGES — SINGLE COLUMN & READABLE
========================================= */

.legal-content {
    display: block !important;
    width: 100%;
    padding: 48px 0 64px;
    background: #ffffff;
    color: #333333;
    box-sizing: border-box;
}

.legal-content > .container {
    display: block !important;
    grid-template-columns: none !important;
    grid-auto-flow: row !important;
    column-count: 1 !important;
    column-width: auto !important;
    columns: auto !important;

    float: none !important;
    position: static;

    width: calc(100% - 40px);
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    box-sizing: border-box;
}

.legal-content h2 {
    display: block;
    width: 100%;
    color: #003C8F;
    font-size: 29px;
    line-height: 1.45;
    margin: 36px 0 15px;
}

.legal-content p {
    display: block;
    width: 100%;
    color: #444444;
    font-size: 18px;
    line-height: 1.9;
    margin: 0 0 22px;
}

.legal-content ul {
    display: block;
    width: 100%;
    padding-left: 28px;
    margin: 0 0 22px;
}

.legal-content li {
    display: list-item;
    font-size: 17px;
    line-height: 1.85;
    margin-bottom: 11px;
}

.legal-content a {
    color: #0072BC;
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.legal-content a:hover {
    color: #003C8F;
}

.legal-review-notice {
    display: block;
    width: 100%;
    padding: 20px 24px;
    margin: 0 0 28px;
    background: #FFF8E8;
    border-left: 4px solid #D99A16;
    border-radius: 6px;
    box-sizing: border-box;
}

.legal-review-notice strong {
    display: block;
    color: #795500;
    font-size: 17px;
    margin-bottom: 10px;
}

.legal-review-notice p {
    margin-bottom: 0;
    font-size: 17px;
}

@media (max-width: 600px) {
    .legal-content {
        padding: 32px 0 44px;
    }

    .legal-content > .container {
        width: calc(100% - 36px);
    }

    .legal-content h2 {
        font-size: 25px;
        margin-top: 28px;
    }

    .legal-content p,
    .legal-content li {
        font-size: 17px;
        line-height: 1.8;
    }

    .legal-review-notice {
        padding: 16px;
    }
}

/* =========================================================
   SWIMMING POOL PROJECT DETAIL LABELS
   ========================================================= */

.pool-project-content .project-detail-label {
  margin: 12px 0 2px;
  color: #526579;
  font-size: 0.82rem;
  font-weight: 600;
}

.pool-project-content .project-detail-label + p {
  margin-top: 0;
}
/* =========================================================
   FOOTER EMAIL FIX
   Keep the contact email on one line where space allows.
========================================================= */

@media (min-width: 1101px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr 1.35fr;
    }

    .footer .footer-contact a[href^="mailto:"] {
        white-space: nowrap;
    }
}

/* =========================================================
   FOOTER EMAIL — PREVENT WRAPPING
========================================================= */

.footer .footer-email {
    white-space: nowrap;
}

.footer .footer-email a {
    white-space: nowrap;
}

/* =========================================================
   FIX: Product sidebar active category visibility
========================================================= */

.product-sidebar .sidebar-title {
    color: var(--product-blue, #0757ad);
}

.product-sidebar .category-link i {
    color: var(--product-blue, #0757ad);
}

.product-sidebar .category-link.active {
    background: #e5f2ff;
    color: #0757ad;
}

.product-sidebar .category-link.active i {
    color: #0757ad;
}


/* =========================================================
   FIX: Back to Top visibility
========================================================= */
.back-top {
    background: var(--product-blue, #0757ad);
    color: #ffffff;
    z-index: 9999;
    text-decoration: none;
}

.back-top:hover {
    background: var(--product-blue-dark, #063b78);
}

/* =========================================================
   FOOTER EMAIL — CONSISTENT INLINE DISPLAY
   Merged from the live VPS version
========================================================= */

footer.footer .footer-grid .footer-email {
    display: block;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

footer.footer .footer-grid .footer-email > span {
    display: inline;
}

/* =========================================================
   PRODUCT CATEGORY NAVIGATION
   Selected item: light blue background, dark blue text/icon
   ========================================================= */
.product-sidebar .category-link.active {
    background-color: #e5f2ff;
    color: #0757ad;
}

.product-sidebar .category-link.active i {
    color: #0757ad;
}

/* =========================================================
   SITE-WIDE RESPONSIVE LAYOUT
   Spacing, stacking, and type size only.
   Theme colors stay as they are.
========================================================= */

@media (max-width: 1100px) {

    header .container {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 8px;
    }

    .company-info h1,
    .company-info p {
        white-space: normal;
    }

    .company-info h1 {
        font-size: 22px;
    }

    nav {
        flex-wrap: wrap;
        justify-content: center;
    }

}

@media (max-width: 900px) {

    header .container {
        flex-direction: column;
        align-items: center;
    }

    .branding {
        justify-content: center;
    }

    .services-top,
    .services-bottom {
        grid-template-columns: minmax(0, 1fr);
    }

    .service-pool {
        height: auto;
        min-height: 0;
    }

    .service-pool-image,
    .service-pool-image img {
        height: 240px;
        min-height: 0;
    }

    .service-sauna {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .service-sauna-content {
        grid-column: 1 / -1;
    }

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

    .page-hero {
        height: auto;
        min-height: 240px;
        padding: 48px 18px;
    }

    .page-hero h2,
    .page-hero .hero-content h2 {
        font-size: 34px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .page-hero p {
        font-size: 17px;
        line-height: 1.6;
        padding: 0 8px;
    }

    .hero-container {
        padding-left: 20px;
        padding-right: 20px;
    }

}

@media (max-width: 700px) {

    .service-sauna {
        grid-template-columns: minmax(0, 1fr);
    }

    .service-sauna-content {
        grid-column: auto;
        padding: 24px 20px;
    }

    .sauna-photo {
        height: 210px;
    }

    .service-bottom-card,
    .service-small {
        min-height: 0;
    }

    .service-heading h2,
    .home-about-heading h2,
    .products .products-heading h2,
    .products-heading h2,
    .home-projects .section-title h2,
    .about-content h2,
    .about-section-heading h2,
    .contact-info h2,
    .map-section h2 {
        font-size: 32px;
        line-height: 1.25;
    }

    .service-heading p,
    .home-about-heading p,
    .products .products-heading p,
    .home-projects .section-subtitle {
        font-size: 16px;
    }

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

    .products .product-card {
        min-height: 0;
        padding: 22px 20px;
    }

    .contact {
        padding: 48px 0;
    }

    .contact-form,
    .info-box {
        padding: 22px 16px;
    }

    .page-hero h2,
    .page-hero .hero-content h2 {
        font-size: 28px;
    }

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

    .footer {
        padding-top: 48px;
    }

    .footer h4,
    .footer-about h2 {
        font-size: 20px;
    }

    .footer .footer-email,
    .footer .footer-email a,
    footer.footer .footer-grid .footer-email {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .about-value-card,
    .story-content,
    .story-approach {
        padding: 24px 18px;
    }

}

@media (max-width: 600px) {

    header {
        padding: 8px 0;
    }

    .branding {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4px;
    }

    .branding img {
        width: 86px;
        margin-right: 0;
    }

    .company-info,
    .company-info h1,
    .company-info p {
        text-align: center;
    }

    .company-info h1 {
        font-size: 17px;
        letter-spacing: 0;
        line-height: 1.25;
    }

    .company-info p {
        font-size: 12px;
        margin-top: 4px;
    }

    nav {
        gap: 6px 14px;
        margin-top: 8px;
        margin-left: 0;
        width: 100%;
    }

    nav a {
        font-size: 14px;
    }

    .hero {
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
        padding: 36px 18px 76px;
    }

    .hero-subtitle {
        font-size: 13px;
        letter-spacing: 1.5px;
        line-height: 1.5;
    }

    .hero-title {
        font-size: 28px;
    }

    .hero-description {
        font-size: 15px;
        margin-bottom: 28px;
    }

    .hero-dots {
        bottom: 16px;
    }

    .hero .btn,
    .btn,
    .home-projects .project-button .btn {
        max-width: 100%;
        padding: 14px 22px;
        text-align: center;
        white-space: normal;
    }

    .service-pool-content {
        padding: 20px 18px 14px;
    }

    .service-small,
    .service-bottom-card {
        padding: 20px 18px;
    }

    .service-pool h3,
    .service-small h3,
    .service-sauna h3,
    .service-bottom-card h3,
    .products .product-card h3,
    .home-projects .project-card h3,
    .project-card h3 {
        overflow-wrap: anywhere;
    }

    .service-pool h3,
    .service-small h3,
    .service-sauna h3,
    .service-bottom-card h3,
    .products .product-card h3 {
        font-size: 22px;
    }

    .map-section {
        padding: 36px 0;
    }

    .map-section iframe {
        height: 240px;
    }

    .legal-content h2 {
        overflow-wrap: anywhere;
    }

}

/* =========================================================
   MOBILE HEADER
   Logo and menu only. Company name and tagline stay
   on desktop and tablet.
========================================================= */

.nav-toggle {
    display: none;
}

@media (max-width: 768px) {

    header .company-info {
        display: none;
    }

    header .container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: min(100% - 28px, 1200px);
    }

    header .branding {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        gap: 0;
    }

    header .branding img {
        width: 118px;
        margin-right: 0;
    }

    header .nav-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 11px 9px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        cursor: pointer;
    }

    header .nav-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background: #003C8F;
        transition: transform .2s ease, opacity .2s ease;
    }

    header.nav-open .nav-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    header.nav-open .nav-toggle span:nth-child(2) {
        opacity: 0;
    }

    header.nav-open .nav-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    header nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0;
        padding: 6px 0 10px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: linear-gradient(to right, #ffffff, #eef8ff);
        box-shadow: 0 12px 22px rgba(0, 0, 0, .12);
        z-index: 10000;
    }

    header.nav-open nav {
        display: flex;
    }

    header nav a {
        padding: 13px 22px;
        font-size: 15px;
        text-align: left;
        border-top: 1px solid rgba(0, 60, 143, .08);
    }

}