@charset "utf-8";
/* CSS Document */

 
:root{--navy:#082a46;--blue:#0877c9;--cyan:#16b8d4;--orange:#f5a623;--ink:#102334;--muted:#667786;--soft:#f4f9fc;--line:#dfeaf1}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:15px/1.7 Inter,Arial;color:var(--ink)}h1,h2,h3,h4,h5{font-family:Manrope,Inter,sans-serif;font-weight:800;color:var(--navy)}a{text-decoration:none!important}.container{max-width:1200px}.section-pad{padding: 70px 0;}.kicker{display:inline-flex;align-items:center;gap:10px;color:var(--blue);font-size:13px;letter-spacing:2px;font-weight:800;text-transform:uppercase;margin-bottom:14px}.kicker:before{content:"";width:34px;height:3px;background:var(--orange)}.title{font-size:clamp(34px,4vw,54px);line-height:1.08;letter-spacing:-1.8px}.copy{color:var(--muted);max-width:700px}.btn-main,.btn-outline{padding: 7px 20px;border-radius:4px;font-weight: 500;display:inline-flex;gap:10px;align-items:center;transition:.3s;font-size: 14px;}.btn-main{background:var(--blue);border:1px solid var(--blue);color:#fff!important}.btn-main:hover{background:var(--navy);border-color:var(--navy);transform:translateY(-2px)}.btn-outline{border:1px solid #aebdca;color:var(--navy)!important}.btn-outline:hover{background:var(--navy);border-color:var(--navy);color:#fff!important}
.topbar{background:var(--navy);color:#dceaf3;font-size: 12px;padding: 5px 0;}.topbar span{margin-right:24px}.topbar a{color:#fff}.nav-wrap{background:#fff;box-shadow:0 5px 25px rgba(10,44,68,.07);position:relative;z-index:1000}.navbar{padding:16px 0}.brand{display:flex;align-items:center;gap:11px;color:var(--navy)!important}.mark{width:43px;height:43px;border-radius:12px 12px 12px 3px;background:linear-gradient(145deg,var(--blue),var(--cyan));color:#fff;display:flex;align-items:center;justify-content:center}.brand b{font:800 20px Manrope}.brand small{display:block;font-size:9px;letter-spacing:2px;color:#7890a1;font-weight:800}.nav-link{font-size:14px;font-weight:600;color:#193247!important;padding:11px 14px!important}.nav-link:hover{color:var(--blue)!important}.dropdown-menu{border:0;box-shadow:0 18px 45px rgba(15,45,65,.14);border-radius:8px;padding:10px}.dropdown-item{font-size:14px;font-weight:600;padding:9px 12px;border-radius:5px}.dropdown-item:hover{background:#eef8fd;color:var(--blue)}@media(min-width:992px){.dropdown:hover>.dropdown-menu{display:block}}
.hero{position:relative;overflow:hidden}.slide{height:calc(100vh - 110px);min-height: 550px;max-height:820px;position:relative;display:flex;align-items:center;background:#092d48}.slide-bg{position:absolute;inset:0;background:center/cover no-repeat}.overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,24,40,.96),rgba(3,39,61,.78) 40%,rgba(3,39,61,.20) 75%,rgba(3,39,61,.05))}.hero-content{position:relative;z-index:2;color:#fff;max-width:720px}.hero-label{display:inline-flex;gap:10px;align-items:center;color:#c9eff8;font-size:13px;letter-spacing:2px;font-weight:800;margin-bottom:20px}.hero-label:before{content:"";width:38px;height:3px;background:var(--orange)}.hero h1{color:#fff;font-size:clamp(44px,6vw,78px);line-height:1.02;letter-spacing:-3px}.hero h1 span{color:#79dfef}.hero p{color:#dceaf2;font-size:18px;max-width:620px;margin:22px 0 30px}.actions{display:flex;gap:12px;flex-wrap:wrap}.hero .btn-main{background: #0877c9;border-color: #0877c9;color: #ffffff!important;}.hero .btn-main:hover{background:#fff;border-color:#fff;color: #000000!important;}.hero .btn-outline{color:#fff!important;border-color:rgba(255,255,255,.45)}.hero .btn-outline:hover{background:#fff;color:var(--navy)!important}.points{display:flex;margin-top:50px}.point{padding:0 20px;border-left:1px solid rgba(255,255,255,.2)}.point:first-child{padding-left:0;border:0}.point strong{display:block;color:#fff}.point span{font-size:12px;color:#b9cedb}.carousel-control-prev,.carousel-control-next{width:55px;height:55px;top:auto;bottom:30px;opacity:1;z-index:5}.carousel-control-prev{right:115px;left:auto}.carousel-control-next{right: 62px;}.arrow{width:47px;height:47px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center}.arrow:hover{background:var(--orange);color:#111}.carousel-indicators{left: 6.5%;right:auto;bottom:38px;margin:0}.carousel-indicators li{width:30px;height:3px;border:0;background:rgba(255,255,255,.4)}.carousel-indicators li.active{background:var(--orange)}
.trust{border-bottom:1px solid var(--line)}.trust-box{padding:25px 18px;border-right:1px solid var(--line);display:flex;gap:13px;align-items:center}.trust-icon{width:44px;height:44px;border-radius:50%;background:#eef8fd;color:var(--blue);display:flex;align-items:center;justify-content:center}.trust-box strong{display:block;font-size:14px}.trust-box span{font-size:12px;color:var(--muted)}
.about-img{height:530px;background:linear-gradient(135deg,rgba(8,119,201,.2),rgba(8,42,70,.05)),url('https://images.jdmagicbox.com/quickquotes/images_main/elisio-polynephron-dialyzer-2023098052-o36mpe4a.jpg') center/cover;position:relative}.about-card{position:absolute;right:25px;bottom:25px;background:#fff;padding:22px;width:245px;box-shadow:0 20px 50px rgba(10,45,65,.16)}.about-card b{display:block;font-size:40px;color:var(--blue);line-height:1}.about-card span{font-size:13px;color:var(--muted)}
.bg-soft{background:#f7fbfd;border-top: 1px solid #e5e5e5;}.cardx{height:100%;background:#fff;border:1px solid var(--line);padding:32px;transition:.35s;position:relative;overflow:hidden}.cardx:after{content:"";position:absolute;width:130px;height:130px;right:-75px;bottom:-75px;background:#eaf8fc;border-radius:50%;transition:.35s}.cardx:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(10,57,82,.1);border-color:#b8ddec}.cardx:hover:after{transform:scale(1.5)}.icon{width:58px;height:58px;border-radius:14px;background:#eef8fd;color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:22px}.cardx h3{font-size:21px}.cardx p{font-size:14px;color:var(--muted)}.link{color:var(--blue);font-weight:700;font-size:14px;position:relative;z-index:2}
.product{background:#fff;border:1px solid var(--line);height:100%;overflow:hidden;transition:.35s}.product:hover{transform:translateY(-7px);box-shadow:0 22px 55px rgba(10,55,78,.12)}.product-img{height: auto;background:#edf7fb;overflow:hidden}.product-img img{width:100%;height:100%;object-fit:cover;transition:.5s}.product:hover img{transform:scale(1.06)}.product-body{padding:23px}.tag{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue);font-weight:800}.product h3{font-size:20px;margin:7px 0}.product p{font-size:14px;color:var(--muted)}


.dark{background:var(--navy);color:#dceaf2}.dark h2{color:#fff}.dark .copy{color:#b9cdd8}

.why-img{min-height:500px; ackground-image: url("../images/enquiry.jpg");
    background-position: center right;
    background-size: cover;
    background-repeat: no-repeat;}



.why-list{margin-top:30px}.why-row{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1)}.why-row i{color:#72d9e8;margin-top:5px}.why-row strong{display:block;color:#fff}.why-row span{font-size:13px;color:#a9c0cc}.process{height:100%;padding:25px;border-top:2px solid var(--blue);box-shadow:0 12px 35px rgba(10,50,70,.07);background:#fff}.process small{color:var(--orange);font-weight:800;letter-spacing:2px}.process h3{font-size:20px;margin:12px 0 8px}.process p{font-size:13px;color:var(--muted)}.cta{padding:70px 0;background:linear-gradient(100deg,rgba(8,42,70,.97),rgba(8,119,201,.9)),url('https://images.jdmagicbox.com/quickquotes/images_main/philips-trilogy-100-ventilator-376853721-6lcl8.webp') center/cover;color:#fff;background-image: url("../images/enquiry.jpg");background-position: center right;background-size: cover;background-repeat: no-repeat;}.cta h2{color:#fff;font-size:clamp(32px,4vw,50px)}.cta p{color:#d6e8f2}.contact-card{background:#fff;border:1px solid var(--line);padding:30px;height:100%}.contact-row{display:flex;gap:15px;padding:15px 0;border-bottom:1px solid var(--line)}.contact-row i{color:var(--blue);width:20px;margin-top:5px}.contact-row strong{display:block}.contact-row span,.contact-row a{font-size:14px;color:var(--muted)}.map{height:440px;overflow:hidden}.map iframe{width:100%;height:100%;border:0}footer{background: #001323;color:#a9c0cc;padding:60px 0 22px}footer h5{color:#fff;font-size:15px}footer a{display:block;color:#a9c0cc;font-size:14px;margin:7px 0}footer a:hover{color:#fff}.bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:18px;font-size:12px}.wa{position:fixed;right: 8px;bottom:22px;width:55px;height:55px;border-radius:50%;background:#22c66d;color:#fff!important;display:flex;align-items:center;justify-content:center;font-size:24px;z-index:999;box-shadow:0 12px 30px rgba(34,198,109,.35)}
@media(max-width:991px){.topbar{display:none}.slide{height:700px}.about-img{margin-bottom:35px;height:430px}.section-pad{padding:75px 0}}@media(max-width:767px){.hero h1{font-size:44px;letter-spacing:-1.5px}.hero p{font-size:15px}.points{margin-top:35px}.point{padding:0 10px}.carousel-indicators{display:none}.carousel-control-prev{right:70px}.carousel-control-next{right:12px}.trust-box{border-right:0;border-bottom:1px solid var(--line)}.why-img{min-height:330px}.actions{flex-direction:column;align-items:flex-start}}@media(max-width:480px){.hero h1{font-size:38px}.point strong{font-size:12px}.point span{font-size:10px}}
 

.why{width: 70%;
    padding: 70px 0;}
.why img{}


/* =========================
   Why Image Circle Effect
========================= */

.why-image-wrap {
    position: relative;
    width: 78%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 70px 0;
}

/* Main Image */
.why-image-wrap .why {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 410px;
    height: auto;
    display: block;
}

/* Circle Lines */
.circle-effect {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

/* Large Circle */
.circle-1 {
    width: 430px;
    height: 430px;
    border: 2px solid rgba(20, 111, 216, 0.25);
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

/* Second Circle */
.circle-2 {
    width: 500px;
    height: 500px;
    border: 1px solid rgba(20, 111, 216, 0.12);
    right: -5%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
}

/* Small decorative dot */
.circle-1::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background: #146fd8;
    border-radius: 50%;
    top: 15px;
    right: 65px;
    box-shadow: 0 0 0 7px rgba(20, 111, 216, 0.10);
}

/* Small second dot */
.circle-2::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: #35b8c8;
    border-radius: 50%;
    bottom: 70px;
    left: 50px;
}


/* =========================
   Optional Animation
========================= */

.circle-1 {
    animation: rotateCircle 18s linear infinite;
}

.circle-2 {
    animation: rotateCircleReverse 25s linear infinite;
}

@keyframes rotateCircle {
    from {
        transform: translateY(-50%) rotate(0deg);
    }

    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

@keyframes rotateCircleReverse {
    from {
        transform: translateY(-50%) rotate(360deg);
    }

    to {
        transform: translateY(-50%) rotate(0deg);
    }
}


/* =========================
   Mobile
========================= */

@media (max-width: 767px) {

    .why-image-wrap {
        padding: 30px;
    }

    .circle-1 {
        width: 280px;
        height: 280px;
    }

    .circle-2 {
        width: 330px;
        height: 330px;
    }

    .why-image-wrap .why {
        max-width: 350px;
    }
}

.logo{width: 150px;}




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

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


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

        .navbar-brand {
            padding: 0;

            margin-right: 35px;

        }

        .navbar-brand img {
            display: block;

            max-width: 220px;

            max-height: 55px;

            width: auto;

            height: auto;
        }


        /* =====================================================
           MAIN NAVIGATION
        ====================================================== */

        .navbar-nav {
            align-items: center;
        }

        .navbar-nav .nav-item {
            position: relative;
        }

        .navbar-nav .nav-link {
            display: block;
            padding: 30px 18px !important;
            color: #222222 !important;
            font-size: 15px;
            font-weight: 500;
            /* text-transform: uppercase; */
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .navbar-nav .nav-link:hover {
            color: #e31b23 !important;
        }

        .navbar-nav .active > .nav-link {
            color: #e31b23 !important;
        }


        /* =====================================================
           PRODUCTS ITEM
           
           IMPORTANT:
           This must NOT be inside media query.
           It positions desktop dropdown correctly.
        ====================================================== */

        .products-item {
            position: relative;
        }


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

        .products-toggle {
            cursor: pointer;

            position: relative;
        }

        .products-arrow {
            margin-left: 5px;

            font-size: 9px;

            transition: transform 0.3s ease;
        }

        .products-toggle.open .products-arrow {
            transform: rotate(180deg);
        }


        /* =====================================================
           PRODUCTS DROPDOWN - DESKTOP
        ====================================================== */

        .products-dropdown {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            width: 280px;
            background: #fbfbfb;
            padding: 12px 0;
            margin: 0;
            border-top: 3px solid #0877c9;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
            z-index: 99999;
        }

        .products-dropdown.open {
            display: block;
        }


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

        .featured-title {
            padding: 12px 20px 15px;

            color: #555555;

            font-size: 13px;

            font-weight: 400;
        }


        /* =====================================================
           PRODUCT PARENT
        ====================================================== */

        .product-parent {
            position: relative;

            width: 100%;
        }


        /* =====================================================
           PRODUCT LINK
        ====================================================== */

        .product-link {
            display: block;
            position: relative;
            width: 100%;
            padding: 8px 30px;
            color: #333333;
            background: transparent;
            font-size: 13px;
            font-weight: 400;
            text-decoration: none !important;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .product-link:hover {
            color: #e31b23;

            background: #ffffff;
        }


        /* =====================================================
           RIGHT ARROW
        ====================================================== */

        .product-arrow {
            position: absolute;

            right: 18px;

            top: 50%;

            transform: translateY(-50%);

            color: #e31b23;

            font-size: 10px;

            transition: transform 0.3s ease;
        }

        .product-parent.open .product-arrow {
            transform:
                translateY(-50%)
                rotate(90deg);
        }


        /* =====================================================
           PRODUCT SUBMENU
        ====================================================== */

        .product-submenu {
            display: none;

            list-style: none;

            margin: 0;

            padding: 0;

            background: #ffffff;
        }

        .product-parent.open > .product-submenu {
            display: block;
        }


        /* =====================================================
           SUBMENU LINKS
        ====================================================== */

        .product-submenu li {
            margin: 0;

            padding: 0;
        }

        .product-submenu li a {
            display: block;

            padding: 11px 45px;

            color: #555555;

            background: #ffffff;

            font-size: 13px;

            line-height: 1.4;

            text-decoration: none;

            border-bottom: 1px solid #f2f2f2;

            transition: all 0.3s ease;
        }

        .product-submenu li a:hover {
            color: #e31b23;

            background: #fafafa;

            padding-left: 50px;
        }


        /* =====================================================
           ALL PRODUCTS
        ====================================================== */

        .all-products {
            display: block;

            width: 100%;

            margin-top: 5px;

            padding: 15px 22px;

            background: #fff1f1;

            color: #e31b23 !important;

            font-size: 14px;

            text-decoration: none !important;

            transition: all 0.3s ease;
        }

        .all-products:hover {
            background: #e31b23;

            color: #ffffff !important;
        }


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

        .navbar-toggler {
            width: 48px;

            height: 43px;

            padding: 0;

            border: 1px solid #dddddd;

            border-radius: 0;

            background: #ffffff;
        }

        .navbar-toggler:focus {
            outline: none;

            box-shadow: none;
        }

        .navbar-toggler .fas {
            font-size: 22px;

            color: #222222;
        }


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

        @media (max-width: 991px) {


            /* -------------------------------------------------
               NAVBAR
            ------------------------------------------------- */

            .navbar {
                min-height: 65px;

                padding: 10px 12px;
            }


            /* -------------------------------------------------
               LOGO
            ------------------------------------------------- */

            .navbar-brand {
                margin: 0;

                padding: 0;

                max-width: calc(100% - 60px);
            }

            .navbar-brand img {
                max-width: 220px;

                max-height: 45px;
            }


            /* -------------------------------------------------
               COLLAPSE MENU
            ------------------------------------------------- */

            .navbar-collapse {
                margin-top: 10px;

                padding: 0;

                border-top: 1px solid #eeeeee;

                max-height: calc(100vh - 85px);

                overflow-x: hidden;

                overflow-y: auto;
            }


            /* -------------------------------------------------
               NAVIGATION
            ------------------------------------------------- */

            .navbar-nav {
                display: block;

                padding: 10px 0 25px;
            }

            .navbar-nav .nav-item {
                width: 100%;
            }

            .navbar-nav .nav-link {
                width: 100%;

                padding: 15px 10px !important;

                font-size: 14px;

                line-height: 1.5;
            }


            /* =================================================
               PRODUCTS - MOBILE
            ================================================= */

            .products-item {
                position: relative;
            }


            /*
               Very important:

               On mobile the dropdown becomes STATIC.
               It therefore stays inside the mobile menu.
            */

            .products-dropdown {
                position: static;

                display: none;

                width: 100%;

                min-width: 100%;

                margin: 0;

                padding: 5px 0 0;

                border: 0;

                background: #f7f8f9;

                box-shadow: none;
            }

            .products-dropdown.open {
                display: block;
            }


            /* -------------------------------------------------
               FEATURED TITLE
            ------------------------------------------------- */

            .featured-title {
                padding: 12px 20px;

                font-size: 13px;
            }


            /* -------------------------------------------------
               PRODUCT LINK
            ------------------------------------------------- */

            .product-link {
                padding: 15px 30px;

                background: #f7f8f9;
            }

            .product-link:hover {
                background: #ffffff;
            }


            /* -------------------------------------------------
               SUBMENU
            ------------------------------------------------- */

            .product-submenu {
                background: #ffffff;
            }

            .product-submenu li a {
                padding: 13px 45px;

                font-size: 13px;
            }


            /* -------------------------------------------------
               ALL PRODUCTS
            ------------------------------------------------- */

            .all-products {
                padding: 15px 22px;
            }

        }


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

        @media (max-width: 575px) {

            .navbar {
                padding-left: 12px;

                padding-right: 12px;
            }

            .navbar-brand {
                max-width: calc(100% - 55px);
            }

            .navbar-brand img {
                max-width: 180px;

                max-height: 42px;
            }

            .navbar-collapse {
                max-height: calc(100vh - 75px);
            }

            .product-link {
                padding-left: 30px;

                padding-right: 30px;
            }

            .product-submenu li a {
                padding-left: 45px;
            }

        }

.header-btn {
    background: var(--primary);
    padding: 9px 18px !important;
    border-radius: 5px;
    margin-left: 8px;
    color: #ffffff !important;
    font-size: 13px;
    text-transform: uppercase;
}

.header-btn i {margin-right: 10px;}
  .header-btn:hover{background:var(--primary-dark);   color: #ffffff !important;     text-decoration: none; }



/* ==================================================
   VARIABLES
================================================== */

:root {
    --primary: #087f8c;
    --primary-dark: #05636e;
    --secondary: #0b3c49;
    --accent: #19b6a5;

    --dark: #102f38;
    --text: #53666d;
    --muted: #71848a;

    --light: #f5fafa;
    --border: #dcebea;

    --white: #ffffff;

    --shadow: 0 15px 45px rgba(11, 60, 73, 0.10);
}


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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family: "Inter", sans-serif;

    color: var(--text);

    line-height: 1.8;

    background: #fff;
}

h1,
h2,
h3 {
    font-family: "Manrope", sans-serif;

    color: var(--dark);

    line-height: 1.25;
}

h1 span,
h2 span {
    color: #0877c9;
}

p {
    font-size: 16px;
}


/* ==================================================
   COMMON
================================================== */

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

.section-label {
    display: inline-block;
    margin-bottom: 15px;
    color: #000000;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.section-title {
    margin-bottom: 25px;

    font-size: 45px;

    font-weight: 800;
}

.section-intro {
    font-size: 17px;
    color: var(--muted);
}


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

.about-hero {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(
            115deg,
            rgba(5, 55, 65, .97),
            rgba(5, 99, 110, .88)
        ),
        url("images/about-hero.jpg");
    background-size: cover;
    background-position: center;
    overflow: hidden;
    background: #001323;
}

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

    position: absolute;

    width: 650px;
    height: 650px;

    right: -280px;
    top: -250px;

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

    border-radius: 50%;
}

.min-vh-75 {
    min-height: 360px;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 30px 0;
}

.eyebrow {
    display: inline-block;

    margin-bottom: 20px;

    color: #8de3d9;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;
}

.hero-content h1 {
    margin-bottom: 30px;
    color: #fff;
    font-size: 58px;
    font-weight: 800;
    letter-spacing: -2px;
}

.hero-content h1 span {
    color: #7be0d4;
}

.hero-content p {
    max-width: 700px;

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

    font-size: 19px;
}


/* ==================================================
   INTRO CARD
================================================== */

.intro-card {
    padding: 45px;
    border-radius: 25px;
    background: #e9f8f6;
    /* box-shadow: var(--shadow); */
}

.icon-box {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border-radius: 16px;
    background: var(--primary);
    color: #fff;
    font-size: 32px;
    background: #0877c9;
}

.intro-card h3 {
    margin-bottom: 15px;

    font-size: 27px;
}

.stat-number {
    display: block;
    color: #0877c9;
    font-family: "Manrope", sans-serif;
    font-size: 24px;
}

.intro-card small {
    display: block;

    color: var(--muted);

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;
}


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

.story-highlight {
    padding: 45px;
    border-radius: 25px;
    background: var(--secondary);
    color: #fff;
    box-shadow: var(--shadow);
    background: #001323;
}

.quote-mark {
    margin-bottom: 20px;

    color: #72ded2;

    font-family: Georgia, serif;

    font-size: 80px;

    line-height: .7;
}

.story-highlight blockquote {
    margin: 0;

    color: #fff;

    font-family: "Manrope", sans-serif;

    font-size: 24px;

    font-weight: 700;

    line-height: 1.5;
}

.highlight-line {
    width: 55px;
    height: 3px;

    margin: 30px 0;

    background: var(--accent);
}

.story-highlight p {
    color: rgba(255,255,255,.7);
}


/* ==================================================
   SERVICE CARDS
================================================== */

.service-card {
    padding: 35px;

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

    border-radius: 18px;

    background: #fff;

    transition: all .3s ease;
}

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

    border-color: rgba(8,127,140,.3);

    box-shadow: var(--shadow);
}

.service-number {
    display: block;

    margin-bottom: 25px;

    color: var(--primary);

    font-family: "Manrope", sans-serif;

    font-size: 13px;

    font-weight: 800;
}

.service-card h3 {
    margin-bottom: 15px;

    font-size: 22px;
}


/* ==================================================
   QUALITY
================================================== */

.quality-section {
    padding: 100px 0;
    background: var(--secondary);
    color: rgba(255,255,255,.75);
    background: #001323;
}

.quality-section p {
    color: rgba(255,255,255,.75);
}

.quality-box {
    padding: 45px;

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

    border-radius: 25px;

    background: rgba(255,255,255,.04);
}

.quality-box h2 {
    color: #fff;

    font-size: 42px;
}

.quality-box h2 span {
    color: #72ded2;
}

.quality-icon {
    width: 65px;
    height: 65px;

    display: flex;

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

    margin-bottom: 30px;

    border-radius: 18px;

    background: var(--accent);

    color: #fff;

    font-size: 30px;
}


/* ==================================================
   INNOVATION
================================================== */

.innovation-visual {
    position: relative;

    height: 420px;

    display: flex;

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

    overflow: hidden;

    border-radius: 30px;

    background: #edf9f8;
}

.innovation-circle {
    position: absolute;

    border: 1px solid rgba(8,127,140,.15);

    border-radius: 50%;
}

.circle-one {
    width: 350px;
    height: 350px;
}

.circle-two {
    width: 250px;
    height: 250px;
}

.innovation-card {
    position: relative;

    z-index: 2;

    width: 220px;

    padding: 30px;

    text-align: center;

    border-radius: 22px;

    background: #fff;

    box-shadow: var(--shadow);
}

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

    display: flex;

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

    margin: 0 auto 20px;

    border-radius: 15px;

    background: var(--primary);

    color: #fff;

    font-size: 24px;
}

.innovation-card h3 {
    margin-bottom: 10px;

    font-size: 21px;
}

.innovation-card p {
    font-size: 13px;
}


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

.vm-card {
    padding: 50px;

    border-radius: 25px;

    background: #fff;

    box-shadow: var(--shadow);
}

.vm-icon {
    width: 52px;
    height: 52px;

    display: flex;

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

    margin-bottom: 25px;

    border-radius: 14px;

    background: #e9f8f6;

    color: var(--primary);

    font-size: 23px;

    font-weight: 700;
}

.vm-card h2 {
    margin-bottom: 25px;

    font-size: 34px;
}

.mission-card {
    background: var(--secondary);
    background: #001323;
}


.mission-card h2 {
    color: #fff;
}

.mission-card h2 span {
    color: #72ded2;
}

.mission-card p {
    color: rgba(255,255,255,.72);
}

.mission-card .vm-icon {
    background: rgba(255,255,255,.1);

    color: #72ded2;
}


/* ==================================================
   MISSION POINTS
================================================== */

.mission-point {
    height: 100%;

    padding: 35px;

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

    background: #fff;
}

.mission-point > span {
    color: var(--primary);

    font-size: 13px;

    font-weight: 800;
}

.mission-point h3 {
    margin-top: 15px;

    margin-bottom: 10px;

    font-size: 21px;
}


/* ==================================================
   VALUES
================================================== */

.value-card {
    padding: 35px;

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

    border-radius: 18px;

    background: #fff;

    transition: all .3s ease;
}

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

    box-shadow: var(--shadow);
}

.value-number {
    width: 48px;
    height: 48px;

    display: flex;

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

    margin-bottom: 22px;

    border-radius: 13px;

    background: #e9f8f6;

    color: var(--primary);

    font-size: 12px;

    font-weight: 800;
}

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

    font-size: 21px;
}


/* ==================================================
   CLOSING
================================================== */

.closing-section {
    padding: 70px 0;
    background: linear-gradient(135deg, #0877c9, #025491);
    color: rgba(255,255,255,.75);
    /* background: #0877c9; */
}

.closing-section h2 {
    margin-bottom: 25px;

    color: #fff;

    font-size: 52px;
}

.closing-section h2 span {
    color: #79dfd4;
}

.closing-section p {
    max-width: 800px;

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

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

.closing-tagline {
    margin-top: 40px;

    padding-top: 30px;

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

    color: #fff;

    font-family: "Manrope", sans-serif;

    font-size: 18px;

    font-weight: 700;
}

.closing-tagline small {
    display: block;

    margin-top: 8px;

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

    font-size: 14px;

    font-weight: 400;
}


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

.footer {
    padding: 45px 0;

    background: #062d36;

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

.footer h3 {
    margin-bottom: 5px;

    color: #fff;

    font-size: 20px;
}

.footer p {
    font-size: 14px;
}


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

@media (max-width: 991px) {

    .section-padding {
        padding: 75px 0;
    }

    .hero-content h1 {
        font-size: 50px;
    }

    .section-title {
        font-size: 38px;
    }

    .quality-box h2 {
        font-size: 35px;
    }

    .closing-section h2 {
        font-size: 42px;
    }

}


@media (max-width: 767px) {

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

    .min-vh-75 {
        min-height: 300px;
    }

    .hero-content h1 {
        font-size: 40px;

        letter-spacing: -1px;
    }

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

    .section-title {
        font-size: 34px;
    }

    .intro-card,
    .story-highlight,
    .quality-box,
    .vm-card {
        padding: 30px;
    }

    .innovation-visual {
        height: 350px;
    }

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

}


@media (max-width: 575px) {



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

    .hero-content {
        padding: 50px 0;
    }

    .hero-content h1 {
        font-size: 34px;
    }

    .hero-content p {

        font-size: 15px;
    }

    .section-title {
        font-size: 30px;
    }

    .quality-box h2 {
        font-size: 30px;
    }

    .vm-card h2 {
        font-size: 28px;
    }

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

    .closing-section h2 {
        font-size: 32px;
    }

}

.closing-section .section-label { 
    color: #ffffff;}


.link i{margin-left:5px;} 


 .webbiz a  {display:inline-block;}




        /* =====================================================
           PRODUCT GALLERY
        ===================================================== */

        .product-gallery {
            padding: 80px 0;
            background: #f7f8fa;
        }


        .gallery-heading {
            margin-bottom: 35px;

            text-align: center;
        }


        .gallery-heading h3 {
            margin-bottom: 10px;

            color: #222;

            font-size: 28px;

            font-weight: 700;
        }


        .gallery-heading p {
            margin: 0;
            color: #777;
            font-size: 22px;
        }


        /* =====================================================
           IMAGE BOX
        ===================================================== */

        .product-image-box {
            position: relative;
            height: 360px;
            margin-bottom: 30px;
            overflow: hidden;
            background: #ffffff;
            border: 1px solid #e8e8e8;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
            transition: all 0.4s ease;
            padding:20px 0;
        }


        .product-image-box:hover {
            transform: translateY(-8px);

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

           border-color: #ccc; 
        }


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

            height: 100%;

            object-fit: contain;

            padding: 15px;

            background: #ffffff;

            transition: all 0.5s ease;
        }


        .product-image-box:hover img {
            transform: scale(1.06);
        }


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

        .image-overlay {
            position: absolute;

            left: 0;
            right: 0;
            bottom: 0;

            padding: 15px 18px;

            background: linear-gradient(
                to top,
                rgba(0, 0, 0, 0.75),
                rgba(0, 0, 0, 0)
            );

            opacity: 0;

            transition: all 0.4s ease;
        }


        .product-image-box:hover .image-overlay {
            opacity: 1;
        }


        .image-overlay span {
            color: #ffffff;

            font-size: 14px;

            font-weight: 600;
        }


        /* =====================================================
           ROW SPACING
        ===================================================== */

        .gallery-row {
            margin-bottom: 0;
        }


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

        @media (max-width: 991px) {

            .inner-hero {
                padding: 70px 0;
            }

            .inner-hero h1 {
                font-size: 40px;
            }

            .product-intro {
                padding: 60px 0 40px;
            }

            .product-image-box {
                height: 330px;
            }

        }


        @media (max-width: 767px) {

            .inner-hero {
                padding: 60px 15px;
            }

            .inner-hero h1 {
                font-size: 34px;
            }

            .hero-small-title {
                font-size: 11px;
            }

            .product-intro {
                padding: 50px 15px 30px;
            }

            .product-intro h2 {
                font-size: 28px;
            }

            .product-intro p {
                font-size: 15px;

                line-height: 1.7;
            }

            .product-gallery {
                padding: 25px 15px 60px;
            }

            .gallery-heading h3 {
                font-size: 25px;
            }

            .product-image-box {
                height: 350px;

                margin-bottom: 20px;
            }

        }


        @media (max-width: 575px) {

            .inner-hero {
                padding: 50px 15px;
            }

            .inner-hero h1 {
                font-size: 30px;
            }

            .product-image-box {
                height: 330px;
            }

        }

.product-gallery-white .product-gallery{background:#ffffff;}
 .product-gallery{background:#ffffff;}




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

:root {
    --primary: #123b73;
    --primary-dark: #082b57;
    --secondary: #19a8c7;
    --light-blue: #eef7fb;
    --text: #172b45;
    --muted: #68788c;
    --white: #ffffff;
    --border: #dce7ef;
}
   

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

.page-hero {
    position: relative;
    min-height: 510px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(
            90deg,
            rgba(5, 35, 70, 0.96),
            rgba(8, 59, 94, 0.82),
            rgba(10, 87, 112, 0.55)
        ),
        url("images/contact-banner.jpg") center center / cover no-repeat;
    overflow: hidden;
}

.page-hero:before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    right: -100px;
    top: -120px;
}

.page-hero:after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    right: 100px;
    bottom: -180px;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
}

.hero-small-title {
    color: #5ed1df;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    letter-spacing: 3px;
    font-weight: 700;
}

.hero-content h1 {
    color: #ffffff;
    font-size: 50px;
    line-height: 1.15;
    font-weight: 700;
    margin: 18px 0;
}

.hero-content h1 span {
    color: #5ed1df;
}

.hero-content p {
    max-width: 650px;
    color: rgba(255,255,255,0.82);
    font-size: 15px;
}

.breadcrumb-custom {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    font-size: 13px;
}

.breadcrumb-custom a {
    color: #5ed1df;
}

.breadcrumb-custom span {
    color: #ffffff;
}

.breadcrumb-custom i {
    color: rgba(255,255,255,0.5);
    font-size: 9px;
}


/* =========================================
   COMMON SECTION
========================================= */

.section-padding {
    padding: 90px 0;
}

.section-heading {
    max-width: 720px;
    margin: 0 auto 55px;
}

.section-label {
    display: inline-block;
    color: var(--secondary);
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.section-heading h2,
.contact-information h2 {
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 17px;
}

.section-heading p {
    color: var(--muted);
    margin: 0;
}


/* =========================================
   CONTACT CARDS
========================================= */

.contact-intro {
    background: #ffffff;
}

.contact-card {
    /* height: 100%; */
    /* display: flex; */
    align-items: flex-start;
    padding: 30px;
    border: 1px solid var(--border);
    background: #ffffff;
    border-radius: 12px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.contact-card:before {
    content: "";
    position: absolute;
    width: 0;
    height: 3px;
    left: 0;
    top: 0;
    background: var(--secondary);
    transition: all 0.4s ease;
}

.contact-card:hover {
    transform: translateY(-8px);
    border-color: transparent;
    box-shadow: 0 20px 45px rgba(18, 59, 115, 0.12);
}

.contact-card:hover:before {
    width: 100%;
}

.contact-icon {
    min-width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--light-blue);
    color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    margin-right: 18px;
    transition: all 0.4s ease;
}

.contact-card:hover .contact-icon {
    background: var(--secondary);
    color: #ffffff;
    transform: rotateY(180deg);
}

.contact-card-content span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--secondary);
}

.contact-card-content h4 {
    font-size: 17px;
    font-weight: 700;
    margin: 6px 0 10px;
}

.contact-card-content a {
    display: block;
    color: var(--muted);
    font-size: 14px;
}

.contact-card-content a:hover {
    color: var(--secondary);
}

.contact-card-content p {
    font-size: 13px;
    color: var(--muted);
    margin: 0;
}


/* =========================================
   CONTACT MAIN
========================================= */

.contact-main {
    background: #f4f9fc;
}

.contact-information {
    height: 100%;
    padding-right: 35px;
}

.contact-information h2 {
    font-size: 42px;
}

.contact-information > p {
    color: var(--muted);
    margin-bottom: 35px;
}

.info-list {
    margin-top: 25px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

.info-icon {
    min-width: 45px;
    height: 45px;
    background: #ffffff;
    color: var(--secondary);
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
}

.info-item strong {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    margin-bottom: 3px;
}

.info-item a,
.info-item p {
    display: block;
    color: var(--muted);
    font-size: 13px;
    margin: 0;
}

.info-item a:hover {
    color: var(--secondary);
}

.contact-note {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: #ffffff;
    padding: 20px;
    border-left: 3px solid var(--secondary);
    margin-top: 30px;
}

.contact-note > i {
    color: var(--secondary);
    font-size: 23px;
}

.contact-note strong {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
}

.contact-note p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
}


/* =========================================
   CONTACT FORM
========================================= */

.contact-form-wrapper {
    background: #ffffff;
    border-radius: 14px;
    padding: 45px;
    box-shadow: 0 20px 60px rgba(18, 59, 115, 0.09);
}

.form-header {
    margin-bottom: 30px;
}

.form-header > span {
    color: var(--secondary);
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.form-header h3 {
    font-size: 27px;
    font-weight: 700;
    color: var(--primary);
    margin: 7px 0;
}

.form-header p {
    color: var(--muted);
    font-size: 13px;
    margin: 0;
}

.form-group {
    margin-bottom: 22px;
}

.form-group label {
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.input-box,
.textarea-box {
    position: relative;
}

.input-box i,
.textarea-box i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #91a2b3;
    font-size: 13px;
    z-index: 2;
    transition: all 0.3s ease;
}

.textarea-box i {
    top: 20px;
    transform: none;
}

.input-box input,
.input-box select,
.textarea-box textarea {
    width: 100%;
    border: 1px solid #dce6ee;
    border-radius: 6px;
    padding: 13px 15px 13px 43px;
    outline: none;
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    color: var(--text);
    background: #ffffff;
    transition: all 0.3s ease;
}

.textarea-box textarea {
    resize: vertical;
}

.input-box input:focus,
.input-box select:focus,
.textarea-box textarea:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(25,168,199,0.08);
}

.input-box:focus-within i,
.textarea-box:focus-within i {
    color: var(--secondary);
}

.submit-btn {
    width: 100%;
    border: 0;
    background: var(--primary);
    color: #ffffff;
    padding: 15px 25px;
    border-radius: 6px;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.35s ease;
}

.submit-btn i {
    margin-left: 8px;
    transition: all 0.3s ease;
}

.submit-btn:hover {
    background: var(--secondary);
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(25,168,199,0.25);
}

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


/* =========================================
   MAP
========================================= */

.map-section {
    background: #ffffff;
}

.map-header {
    padding: 70px 0 35px;
}

.map-header h2 {
    font-size: 32px;
    color: var(--primary);
    margin: 0;
}

.map-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--light-blue);
    color: var(--primary);
    border-radius: 5px;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.map-btn:hover {
    background: var(--secondary);
    color: #ffffff;
}

.map-container iframe {
    display: block;
    filter: grayscale(15%);
}


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

.contact-cta {
    padding: 75px 0;
    background:
        linear-gradient(
            120deg,
            #082b57,
            #123b73,
            #087f9b
        );
}

.cta-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.cta-inner span {
    color: #62d6e2;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.cta-inner h2 {
    color: #ffffff;
    max-width: 700px;
    font-size: 30px;
    line-height: 1.3;
    margin: 8px 0 0;
}

.cta-btn {
    white-space: nowrap;
    background: #ffffff;
    color: var(--primary);
    padding: 15px 25px;
    border-radius: 5px;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.cta-btn i {
    margin-left: 7px;
    transition: all 0.3s ease;
}

.cta-btn:hover {
    background: var(--secondary);
    color: #ffffff;
    transform: translateY(-3px);
}

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


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

.site-footer {
    background: #061f3d;
    color: rgba(255,255,255,0.65);
    padding: 70px 0 0;
}

.footer-logo {
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-size: 29px;
    font-weight: 800;
    letter-spacing: 2px;
    display: flex;
    flex-direction: column;
    line-height: 1;
    margin-bottom: 20px;
}

.footer-logo small {
    color: var(--secondary);
    font-size: 8px;
    letter-spacing: 3px;
    margin-top: 5px;
}

.site-footer p {
    font-size: 13px;
    line-height: 1.8;
}

.site-footer h5 {
    color: #ffffff;
    font-size: 13px;
    margin-bottom: 20px;
}

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

.site-footer li {
    margin-bottom: 9px;
}

.site-footer li a {
    color: rgba(255,255,255,0.6);
    font-size: 12px;
}

.site-footer li a:hover {
    color: var(--secondary);
    padding-left: 5px;
}

.footer-contact a {
    display: block;
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    margin-bottom: 12px;
}

.footer-contact a:hover {
    color: var(--secondary);
}

.footer-contact i {
    color: var(--secondary);
    margin-right: 7px;
}

.footer-bottom {
    margin-top: 50px;
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: space-between;
}

.footer-bottom p {
    margin: 0;
    font-size: 11px;
}

.footer-bottom a {
    color: var(--secondary);
}


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

@media (max-width: 991px) {

    .topbar-right {
        gap: 12px;
    }

    .header-btn {
        display: inline-block;
        margin: 10px 0 5px;
    }

    .navbar-nav {
        padding-top: 15px;
    }

    .page-hero {
        min-height: 460px;
    }

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

    .contact-information {
        padding-right: 0;
    }

    .contact-form-wrapper {
        padding: 35px;
    }

    .cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }

}


@media (max-width: 767px) {

    .topbar {
        display: none;
    }

    .main-navbar {
        padding: 14px 0;
    }

    .logo-text {
        font-size: 24px;
    }

    .page-hero {
        min-height: 430px;
    }

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

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

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

    .section-heading h2,
    .contact-information h2 {
        font-size: 31px;
    }

    .contact-form-wrapper {
        padding: 25px 20px;
    }

    .map-header {
        padding: 55px 0 25px;
    }

    .map-header h2 {
        font-size: 27px;
        margin-bottom: 20px;
    }

    .map-btn {
        margin-top: 10px;
    }

    .cta-inner h2 {
        font-size: 25px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 8px;
    }

}


@media (max-width: 480px) {

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

    .hero-content h1 {
        font-size: 31px;
    }

    .contact-card {
        padding: 22px;
    }

    .contact-icon {
        min-width: 48px;
        height: 48px;
        font-size: 16px;
    }

    .contact-card-content h4 {
        font-size: 15px;
    }

    .contact-form-wrapper {
        padding: 22px 15px;
    }

    .form-header h3 {
        font-size: 23px;
    }

    .contact-cta {
        padding: 55px 0;
    }

}