/* =========================================================
   DHARSHAN AQUA TECH
   PREMIUM HERO + HEADER
   Bootstrap 5 + Vanilla CSS
========================================================= */


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

:root {

    --primary-blue: #0755A0;
    --primary-dark: #043B73;

    --dark-blue: #061F3B;
    --navy: #20244F;

    --aqua-blue: #00B7D9;
    --light-aqua: #39D7EF;

    --aqua-soft: #DDF8FC;

    --accent-red: #D9252A;

    --white: #FFFFFF;

    --light-bg: #F5FBFD;

    --text-dark: #15293D;
    --text-muted: #64798B;

    --border-light: rgba(255, 255, 255, 0.20);

    --shadow:
        0 15px 45px rgba(0, 40, 80, 0.18);

    --shadow-heavy:
        0 20px 60px rgba(0, 35, 70, 0.25);

}


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

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


html {
    scroll-behavior: smooth;
}


body {

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

    overflow-x: hidden;

    color: var(--text-dark);

    background: var(--white);
}


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


a {
    text-decoration: none;
}


button,
a {
    -webkit-tap-highlight-color: transparent;
}


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

.main-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 9999;

    padding: 18px 0;

    background: transparent;

    transition:
        background 0.4s ease,
        padding 0.4s ease,
        box-shadow 0.4s ease,
        backdrop-filter 0.4s ease;

}


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

.main-header.scrolled {

    padding: 8px 0;

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

    box-shadow:
        0 5px 30px rgba(0, 0, 0, 0.10);

    backdrop-filter:
        blur(14px);

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

}


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

.main-header .navbar {

    padding: 0;

}


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

.main-logo {

    width: 180px;

    height: auto;

    max-height: 125px;

    object-fit: contain;

    transition:
        width 0.35s ease,
        transform 0.35s ease;

}


.main-logo:hover {

    transform: translateY(-1px);

}


.main-header.scrolled .main-logo {

    width: 145px;

}


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

.main-header .nav-link {

    position: relative;

    color: var(--white);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.1px;

    padding:
        12px 13px !important;

    transition:
        color 0.3s ease;

}


.main-header .nav-link:hover,
.main-header .nav-link.active {

    color: var(--light-aqua);

}


/* SCROLLED NAV LINKS */

.main-header.scrolled .nav-link {

    color: var(--text-dark);

}


.main-header.scrolled .nav-link:hover,
.main-header.scrolled .nav-link.active {

    color: var(--primary-blue);

}


/* =========================================================
   NAV LINK UNDERLINE
========================================================= */

.main-header .nav-link::after {

    content: "";

    position: absolute;

    left: 13px;

    bottom: 5px;

    width: 0;

    height: 2px;

    border-radius: 10px;

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

    transition:
        width 0.3s ease;

}


.main-header .nav-link:hover::after,
.main-header .nav-link.active::after {

    width: 28px;

}


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

.main-header .dropdown-menu {

    border: none;

    border-radius: 14px;

    padding: 12px;

    min-width: 245px;

    margin-top: 12px;

    background: var(--white);

    box-shadow: var(--shadow);

    animation:
        dropdownFade 0.25s ease;

}


@keyframes dropdownFade {

    from {

        opacity: 0;

        transform:
            translateY(10px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


.main-header .dropdown-item {

    border-radius: 8px;

    padding: 10px 15px;

    color: var(--text-dark);

    font-size: 13px;

    font-weight: 500;

    transition:
        all 0.25s ease;

}


.main-header .dropdown-item:hover {

    color: var(--primary-blue);

    background:
        rgba(0, 183, 217, 0.08);

    padding-left: 20px;

}


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

.nav-quote-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding:
        12px 20px;

    border-radius: 50px;

    color: var(--white);

    background:
        linear-gradient(135deg,
            var(--aqua-blue),
            #007EB2);

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 8px 25px rgba(0, 183, 217, 0.30);

    transition:
        all 0.3s ease;

}


.nav-quote-btn:hover {

    color: var(--white);

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 30px rgba(0, 183, 217, 0.45);

}


.nav-quote-btn i {

    font-size: 16px;

    transition:
        transform 0.3s ease;

}


.nav-quote-btn:hover i {

    transform:
        translateX(3px);

}


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

.custom-toggler {

    border: none;

    outline: none;

    padding: 0;

    color: var(--white);

    font-size: 30px;

    background: transparent;

}


.custom-toggler:focus {

    box-shadow: none;

}


.main-header.scrolled .custom-toggler {

    color: var(--primary-blue);

}


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

.hero-section {

    position: relative;

    width: 100%;

    overflow: hidden;

    background:
        var(--dark-blue);

}


/* =========================================================
   BOOTSTRAP CAROUSEL
========================================================= */

.hero-section .carousel,
.hero-section .carousel-inner {

    width: 100%;

}


.hero-section .carousel-item {

    position: relative;

}


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

.hero-slide {

    position: relative;

    width: 100%;

    height: 100vh;

    min-height: 700px;

    display: flex;

    align-items: center;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}


/* =========================================================
   BANNER IMAGES
========================================================= */

.hero-slide-1 {

    background-image:
        url("../images/banner-2.webp");

}


.hero-slide-2 {

    background-image:
        url("../images/banner-1.webp");

}


.hero-slide-3 {

    background-image:
        url("../images/banner-3.webp");

}


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

.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(90deg,
            rgba(2, 25, 49, 0.88) 0%,
            rgba(4, 40, 75, 0.72) 28%,
            rgba(4, 42, 77, 0.40) 52%,
            rgba(0, 0, 0, 0.10) 78%,
            rgba(0, 0, 0, 0.03) 100%);

}


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

.hero-container {

    position: relative;

    z-index: 3;

    width: 100%;

}


/* =========================================================
   HERO ROW
   ALL SLIDES SAME VERTICAL POSITION
========================================================= */

.hero-container .row {

    min-height: 100vh;

    align-items: center !important;

}


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

.hero-content {

    position: relative;

    width: 100%;

    max-width: 850px;

    min-height: 610px;

    padding-top: 95px;

    padding-bottom: 70px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


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

.hero-tag {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    width: fit-content;

    height: 38px;

    padding:
        0 18px;

    margin-bottom: 22px;

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

    border-radius: 50px;

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

    backdrop-filter:
        blur(12px);

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

    color: var(--white);

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 0.7px;

    text-transform: uppercase;

}


/* =========================================================
   TAG DOT
========================================================= */

.hero-tag span {

    width: 8px;

    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background:
        var(--light-aqua);

    box-shadow:

        0 0 0 5px rgba(57, 215, 239, 0.13),

        0 0 18px var(--light-aqua);

    animation:
        tagPulse 2s infinite;

}


@keyframes tagPulse {

    0%,
    100% {

        box-shadow:
            0 0 0 5px rgba(57, 215, 239, 0.13),
            0 0 18px var(--light-aqua);

    }

    50% {

        box-shadow:
            0 0 0 9px rgba(57, 215, 239, 0.03),
            0 0 25px var(--light-aqua);

    }

}


/* =========================================================
   HERO HEADING
   FIXED AREA = SAME LEVEL
========================================================= */

.hero-content h1 {

    color: var(--white);

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

    font-weight: 800;

    line-height: 1.12;

    letter-spacing: -1.5px;

    max-width: 850px;

    min-height: 162px;

    margin:
        0 0 25px 0;

}


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

.hero-content h1 span {

    display: block;

    color: var(--light-aqua);

}


/* =========================================================
   HERO DESCRIPTION
   FIXED HEIGHT = SAME LEVEL
========================================================= */

.hero-content p {

    max-width: 650px;

    min-height: 61px;

    margin:
        0 0 35px 0;

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

    font-size: 17px;

    font-weight: 400;

    line-height: 1.8;

}


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

.hero-buttons {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 15px;

    min-height: 56px;

}


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

.primary-btn,
.secondary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 56px;

    padding:
        0 25px;

    border-radius: 50px;

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;

    transition:
        all 0.35s ease;

}


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

.primary-btn {

    color: var(--white);

    background:
        linear-gradient(135deg, #d90000, #41d5efba);

    box-shadow:
        0 10px 30px rgba(0, 183, 217, 0.30);

}


.primary-btn:hover {

    color: var(--white);

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 35px rgba(0, 183, 217, 0.50);

}


.primary-btn i {

    transition:
        transform 0.3s ease;

}


.primary-btn:hover i {

    transform:
        translateX(5px);

}


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

.secondary-btn {

    color: var(--white);

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

    background:
        linear-gradient(135deg, #d90000, #41d5efba);


    backdrop-filter:
        blur(10px);

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

}


.secondary-btn:hover {

    color: var(--white);

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

    border-color:
        rgba(255, 255, 255, 0.55);

    transform:
        translateY(-4px);

}


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

.btn-icon {

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 32px;

    border-radius: 50%;

    background:
        rgba(57, 215, 239, 0.20);

    color:
        var(--light-aqua);

}


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

.hero-services {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 30px;

    min-height: 40px;

    margin-top: 40px;

}


/* =========================================================
   SERVICE ITEM
========================================================= */

.hero-service-item {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--white);

    font-size: 13px;

    font-weight: 600;

}


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

.hero-service-item i {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 40px;

    border-radius: 50%;

    color:
        var(--light-aqua);

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

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

    font-size: 18px;

    transition:
        all 0.3s ease;

}


.hero-service-item:hover i {

    color: var(--white);

    background:
        var(--aqua-blue);

    transform:
        translateY(-3px);

}


/* =========================================================
   SLIDE CONTENT ANIMATION
========================================================= */

.carousel-item.active .hero-content {

    animation:
        heroContentIn 0.8s ease both;

}


@keyframes heroContentIn {

    from {

        opacity: 0;

        transform:
            translateY(25px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   INDIVIDUAL ELEMENT ANIMATION
========================================================= */

.carousel-item.active .hero-tag {

    animation:
        fadeUp 0.65s 0.08s ease both;

}


.carousel-item.active h1 {

    animation:
        fadeUp 0.70s 0.16s ease both;

}


.carousel-item.active p {

    animation:
        fadeUp 0.70s 0.26s ease both;

}


.carousel-item.active .hero-buttons {

    animation:
        fadeUp 0.70s 0.36s ease both;

}


.carousel-item.active .hero-services {

    animation:
        fadeUp 0.70s 0.46s ease both;

}


@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
            translateY(20px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


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

.custom-slider-control {

    position: absolute;

    width: 55px;

    height: 55px;

    top: auto;

    bottom: 50px;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 1;

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

    border-radius: 50%;

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

    backdrop-filter:
        blur(10px);

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

    transition:
        all 0.3s ease;

}


.carousel-control-prev {

    left: auto;

    right: 120px;

}


.carousel-control-next {

    right: 50px;

}


.custom-slider-control:hover {

    background:
        var(--aqua-blue);

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

    transform:
        translateY(-3px);

}


.custom-slider-control i {

    color: var(--white);

    font-size: 20px;

}


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

.custom-indicators {

    position: absolute;

    z-index: 5;

    left: 7%;

    bottom: 55px;

    justify-content: flex-start;

    margin: 0;

}


.custom-indicators button {

    width: 35px !important;

    height: 3px !important;

    margin:
        0 5px !important;

    padding: 0;

    border: none !important;

    border-radius: 5px;

    background:
        rgba(255, 255, 255, 0.45) !important;

    opacity: 1 !important;

    transition:
        width 0.3s ease,
        background 0.3s ease;

}


.custom-indicators .active {

    width: 60px !important;

    background:
        var(--light-aqua) !important;

}


/* =========================================================
   SCROLL DOWN
========================================================= */

.scroll-down {

    position: absolute;

    right: 25px;

    top: 50%;

    z-index: 5;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 15px;

    transform:
        translateY(-50%);

}


.scroll-down span {

    color: var(--white);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 3px;

    writing-mode:
        vertical-rl;

    transform:
        rotate(180deg);

    opacity: 0.85;

}


.scroll-line {

    width: 1px;

    height: 70px;

    background:
        linear-gradient(to bottom,
            var(--light-aqua),
            transparent);

    animation:
        scrollLine 2s infinite;

}


@keyframes scrollLine {

    0% {

        opacity: 0.3;

        transform:
            scaleY(0.5);

        transform-origin: top;

    }

    50% {

        opacity: 1;

        transform:
            scaleY(1);

    }

    100% {

        opacity: 0.3;

        transform:
            scaleY(0.5);

        transform-origin: bottom;

    }

}


/* =========================================================
   WATER BUBBLES
========================================================= */

.water-bubble {

    position: absolute;

    z-index: 2;

    border-radius: 50%;

    background:
        radial-gradient(circle at 30% 30%,
            rgba(255, 255, 255, 0.9),
            rgba(57, 215, 239, 0.35),
            rgba(0, 100, 150, 0.10));

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

    opacity: 0.5;

    pointer-events: none;

    animation:
        floatBubble 6s infinite ease-in-out;

}


.bubble-one {

    width: 60px;

    height: 60px;

    right: 18%;

    top: 25%;

}


.bubble-two {

    width: 30px;

    height: 30px;

    right: 8%;

    bottom: 25%;

    animation-delay: 2s;

}


.bubble-three {

    width: 18px;

    height: 18px;

    right: 25%;

    bottom: 20%;

    animation-delay: 4s;

}


@keyframes floatBubble {

    0%,
    100% {

        transform:
            translateY(0) scale(1);

    }

    50% {

        transform:
            translateY(-25px) scale(1.05);

    }

}


/* =========================================================
   AFTER HERO SECTION
========================================================= */

.after-hero-section {

    padding:
        120px 0;

    background:
        var(--light-bg);

}


.section-small-title {

    display: inline-block;

    margin-bottom: 15px;

    color:
        var(--aqua-blue);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}


.after-hero-section h2 {

    color:
        var(--primary-blue);

    font-size: 45px;

    font-weight: 800;

    line-height: 1.3;

}


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

@media (max-width: 1199px) {

    .main-header .nav-link {

        font-size: 11px;

        padding:
            10px 8px !important;

    }


    .nav-quote-btn {

        padding:
            10px 14px;

        font-size: 11px;

    }


    .hero-content {

        max-width: 760px;

    }


    .hero-content h1 {

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

    }

}


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

@media (max-width: 991px) {

    .main-header {

        padding:
            12px 0;

    }


    .main-header.scrolled {

        padding:
            8px 0;

    }


    .main-logo {

        width: 150px;

    }


    .main-header.scrolled .main-logo {

        width: 135px;

    }


    /* MOBILE MENU */

    .navbar-collapse {

        margin-top: 15px;

        padding:
            20px;

        border-radius: 15px;

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

        box-shadow:
            var(--shadow);

        backdrop-filter:
            blur(15px);

    }


    .main-header .nav-link,
    .main-header.scrolled .nav-link {

        color:
            var(--text-dark);

        padding:
            10px 0 !important;

    }


    .main-header .nav-link:hover,
    .main-header .nav-link.active {

        color:
            var(--primary-blue);

    }


    .main-header .nav-link::after {

        left: 0;

        bottom: 3px;

    }


    .main-header .nav-link:hover::after,
    .main-header .nav-link.active::after {

        width: 25px;

    }


    .nav-quote-btn {

        margin-top: 10px;

        width: fit-content;

    }


    /* HERO */

    .hero-slide {

        min-height:
            100svh;

        height:
            auto;

    }


    .hero-container .row {

        min-height:
            100svh;

    }


    .hero-content {

        min-height:
            auto;

        max-width:
            100%;

        padding-top:
            130px;

        padding-bottom:
            120px;

    }


    .hero-content h1 {

        min-height:
            auto;

        font-size:
            52px;

    }


    .hero-content p {

        min-height:
            auto;

        font-size:
            15px;

    }


    .scroll-down {

        display:
            none;

    }


    .custom-slider-control {

        bottom:
            30px;

    }


    .carousel-control-prev {

        right:
            100px;

    }


    .carousel-control-next {

        right:
            30px;

    }


    .custom-indicators {

        left:
            5%;

        bottom:
            38px;

    }

}


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

@media (max-width: 767px) {

    .main-header {

        padding:
            10px 0;

    }


    .main-logo {

        width:
            135px;

        max-height:
            80px;

    }


    .main-header.scrolled .main-logo {

        width:
            125px;

    }


    .custom-toggler {

        font-size:
            27px;

    }


    /* HERO */

    .hero-slide {

        min-height:
            100svh;

        height:
            auto;

        background-position:
            center center;

    }


    .hero-overlay {

        background:
            linear-gradient(90deg,
                rgba(2, 25, 49, 0.88),
                rgba(4, 40, 75, 0.65));

    }


    .hero-container .row {

        min-height:
            100svh;

    }


    .hero-content {

        padding-top:
            120px;

        padding-bottom:
            105px;

    }


    /* TAG */

    .hero-tag {

        height:
            35px;

        padding:
            0 14px;

        margin-bottom:
            18px;

        font-size:
            9px;

        letter-spacing:
            0.5px;

    }


    /* HEADING */

    .hero-content h1 {

        min-height:
            auto;

        max-width:
            100%;

        margin-bottom:
            20px;

        font-size:
            38px;

        line-height:
            1.15;

        letter-spacing:
            -0.5px;

    }


    /* DESCRIPTION */

    .hero-content p {

        min-height:
            auto;

        max-width:
            100%;

        margin-bottom:
            28px;

        font-size:
            14px;

        line-height:
            1.7;

    }


    /* BUTTONS */

    .hero-buttons {

        flex-direction:
            column;

        align-items:
            stretch;

        width:
            100%;

        gap:
            12px;

    }


    .primary-btn,
    .secondary-btn {

        width:
            100%;

        min-height:
            52px;

        padding:
            0 20px;

    }


    /* SERVICES */

    .hero-services {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            14px;

        margin-top:
            30px;

    }


    .hero-service-item {

        width:
            100%;

        font-size:
            12px;

    }


    .hero-service-item i {

        width:
            36px;

        height:
            36px;

        flex:
            0 0 36px;

        font-size:
            16px;

    }


    /* INDICATORS */

    .custom-indicators {

        left:
            50%;

        bottom:
            28px;

        width:
            100%;

        justify-content:
            center;

        transform:
            translateX(-50%);

    }


    .custom-indicators button {

        width:
            25px !important;

    }


    .custom-indicators .active {

        width:
            45px !important;

    }


    /* HIDE ARROWS */

    .custom-slider-control {

        display:
            none;

    }


    /* AFTER HERO */

    .after-hero-section {

        padding:
            80px 0;

    }


    .after-hero-section h2 {

        font-size:
            32px;

    }

}


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

@media (max-width: 480px) {

    .main-logo {

        width:
            120px;

    }


    .main-header.scrolled .main-logo {

        width:
            115px;

    }


    .hero-content {

        padding-top:
            115px;

        padding-bottom:
            95px;

    }


    .hero-content h1 {

        font-size:
            33px;

        line-height:
            1.17;

    }


    .hero-content p {

        font-size:
            13px;

    }


    .hero-tag {

        font-size:
            8px;

    }


    .primary-btn,
    .secondary-btn {

        min-height:
            50px;

        font-size:
            13px;

    }


    .hero-services {

        margin-top:
            25px;

    }

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {

    .hero-content {

        max-width:
            900px;

    }


    .hero-content h1 {

        font-size:
            78px;

    }


    .hero-content p {

        font-size:
            18px;

    }

}


/* =========================================================
   REDUCE MOTION ACCESSIBILITY
========================================================= */

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

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

    }

}

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

.dat-about-section {

    position: relative;

    padding: 80px 0;

    background: #ffffff;

    overflow: hidden;

}


/* =====================================================
   BACKGROUND DECORATION
===================================================== */

.dat-about-bg-circle {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}


.dat-bg-circle-1 {

    width: 500px;
    height: 500px;

    left: -300px;
    top: 50px;

    background:
        radial-gradient(circle,
            rgba(0, 82, 204, 0.07),
            transparent 70%);

    animation:
        datBgFloat 9s ease-in-out infinite;

}


.dat-bg-circle-2 {

    width: 400px;
    height: 400px;

    right: -220px;
    bottom: -100px;

    background:
        radial-gradient(circle,
            rgba(220, 35, 45, 0.055),
            transparent 70%);

    animation:
        datBgFloat 8s ease-in-out infinite reverse;

}


/* =====================================================
   IMAGE WRAPPER
===================================================== */

.dat-about-image-wrap {

    position: relative;

    width: 100%;

    min-height: 610px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

}


/* =====================================================
   DECORATIVE IMAGE FRAME
===================================================== */

.dat-image-frame {

    position: absolute;

    width: 84%;
    height: 88%;

    left: 4%;
    top: 8%;

    border:

        2px solid #0052cc;

    border-radius: 28px;

    transform:
        rotate(-5deg);

    opacity: 0.18;

    transition:
        all 0.6s ease;

}


.dat-about-image-wrap:hover .dat-image-frame {

    transform:
        rotate(-2deg) scale(1.02);

    opacity: 0.35;

}


/* =====================================================
   MAIN IMAGE
===================================================== */

.dat-about-image {

    position: relative;

    z-index: 2;

    width: 100%;

    height: 760px;

    overflow: hidden;

    border-radius: 26px;

    background: #e9f3fa;

    box-shadow:

        0 30px 70px rgba(10, 35, 70, 0.18);

}


/* IMAGE */

.dat-about-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 1s cubic-bezier(0.22,
            1,
            0.36,
            1);

}


.dat-about-image-wrap:hover .dat-about-image img {

    transform:
        scale(1.08);

}


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

.dat-image-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(180deg,
            rgba(0, 0, 0, 0.02) 30%,
            rgba(0, 35, 75, 0.28) 100%);

    pointer-events: none;

}


/* =====================================================
   BLUE SIDE ACCENT
===================================================== */

.dat-about-image::before {

    content: "";

    position: absolute;

    z-index: 3;

    left: 0;
    top: 0;

    width: 7px;
    height: 100%;

    background:

        linear-gradient(to bottom,
            #0052cc 0%,
            #0052cc 70%,
            #dc232d 70%,
            #dc232d 100%);

}


/* =====================================================
   EXPERIENCE CARD
===================================================== */

.dat-experience-card {

    position: absolute;

    z-index: 5;

    left: 0;

    bottom: 65px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 16px 22px;

    background: #ffffff;

    border-radius: 16px;

    box-shadow:

        0 20px 45px rgba(0, 25, 60, 0.18);

    animation:

        datCardFloat 4s ease-in-out infinite;

}


.dat-experience-icon {

    width: 50px;
    height: 50px;

    display: flex;

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

    border-radius: 13px;

    background:

        linear-gradient(135deg,
            #0052cc,
            #003b91);

    color: #ffffff;

    font-size: 21px;

}


.dat-experience-content strong {

    display: block;

    color: #10151b;

    font-size: 28px;

    line-height: 1;

    font-weight: 800;

}


.dat-experience-content span {

    display: block;

    margin-top: 5px;

    color: #707a84;

    font-size: 10px;

    font-weight: 600;

}


/* =====================================================
   FLOATING CARD
===================================================== */

.dat-image-float-card {

    position: absolute;

    z-index: 5;

    right: 0;

    top: 90px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 13px 17px;

    background:

        rgba(255, 255, 255, 0.96);

    border-radius: 13px;

    box-shadow:

        0 18px 40px rgba(0, 25, 60, 0.14);

    border:

        1px solid rgba(0, 0, 0, 0.04);

    animation:

        datCardFloat 4.5s ease-in-out infinite reverse;

}


.dat-float-icon {

    width: 39px;
    height: 39px;

    display: flex;

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

    border-radius: 10px;

    background:

        #fff0f1;

    color: #dc232d;

    font-size: 17px;

}


.dat-image-float-card strong {

    display: block;

    color: #161c22;

    font-size: 11px;

    font-weight: 800;

}


.dat-image-float-card span {

    display: block;

    margin-top: 2px;

    color: #858e96;

    font-size: 9px;

}


/* =====================================================
   FLOATING DROPS
===================================================== */

.dat-image-drop {

    position: absolute;

    z-index: 4;

    color: #0052cc;

    opacity: 0.45;

    animation:

        datDropFloat 4s ease-in-out infinite;

}


.drop-a {

    top: 18%;

    right: 8%;

}


.drop-b {

    bottom: 17%;

    left: 8%;

    color: #dc232d;

    font-size: 12px;

    animation-delay: 1.5s;

}


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

.dat-about-content {

    position: relative;

    z-index: 3;

}


.dat-section-label {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 19px;

    color: #0052cc;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2.5px;

}


.dat-label-line {

    width: 42px;
    height: 2px;

    background: #dc232d;

}


.dat-label-dot {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #dc232d;

}


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

.dat-about-content h2 {

    margin: 0 0 25px;

    color: #111820;

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

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1.5px;

}


.dat-about-content h2 span {

    display: block;

    color: #0052cc;

}


/* =====================================================
   PARAGRAPHS
===================================================== */

.dat-about-content p {

    max-width: 700px;

    margin-bottom: 14px;

    color: #6c7781;

    font-size: 13.5px;

    line-height: 1.85;

}


.dat-about-content .dat-about-lead {

    color: #28343e;

    font-size: 16px;

    line-height: 1.8;

    font-weight: 500;

    margin-bottom: 18px;

}


/* =====================================================
   HIGHLIGHTS
===================================================== */

.dat-about-highlights {

    display: grid;

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

    gap: 11px;

    margin-top: 28px;

}


.dat-highlight {

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 13px;

    background: #f8fafc;

    border: 1px solid #edf0f3;

    border-radius: 11px;

    transition:
        all 0.35s ease;

}


.dat-highlight:hover {

    transform:
        translateY(-5px);

    background: #ffffff;

    border-color:
        rgba(0, 82, 204, 0.18);

    box-shadow:

        0 12px 30px rgba(0, 30, 80, 0.08);

}


.dat-highlight-icon {

    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 9px;

    background: #eaf2ff;

    color: #0052cc;

    font-size: 17px;

    transition: 0.3s;

}


.dat-highlight:hover .dat-highlight-icon {

    background: #0052cc;

    color: #ffffff;

}


.dat-highlight-icon.red-highlight {

    background: #fff0f1;

    color: #dc232d;

}


.dat-highlight:hover .red-highlight {

    background: #dc232d;

    color: #ffffff;

}


.dat-highlight strong {

    display: block;

    color: #171e25;

    font-size: 11px;

    font-weight: 800;

}


.dat-highlight span {

    display: block;

    margin-top: 2px;

    color: #89939b;

    font-size: 9px;

}


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

.dat-about-bottom {

    display: flex;

    align-items: center;

    gap: 25px;

    flex-wrap: wrap;

    margin-top: 30px;

}


.dat-about-btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 7px 7px 7px 19px;

    background: #10151b;

    color: #ffffff;

    text-decoration: none;

    border-radius: 50px;

    font-size: 11px;

    font-weight: 700;

    transition:
        all 0.35s ease;

}


.dat-about-btn span {

    width: 35px;
    height: 35px;

    display: flex;

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

    border-radius: 50%;

    background: #0052cc;

    transition: 0.3s;

}


.dat-about-btn:hover {

    color: #ffffff;

    background: #0052cc;

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 30px rgba(0, 82, 204, 0.25);

}


.dat-about-btn:hover span {

    background: #dc232d;

    transform:
        rotate(45deg);

}


.dat-trust-line {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #727c85;

    font-size: 10px;

    font-weight: 600;

}


.dat-trust-line i {

    color: #dc232d;

    font-size: 16px;

}


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes datCardFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-10px);

    }

}


@keyframes datDropFloat {

    0%,
    100% {

        transform:
            translateY(0) rotate(0deg);

    }

    50% {

        transform:
            translateY(-18px) rotate(8deg);

    }

}


@keyframes datBgFloat {

    0%,
    100% {

        transform:
            translate(0, 0);

    }

    50% {

        transform:
            translate(25px, -20px);

    }

}


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

@media (max-width: 1199px) {

    .dat-about-image-wrap {

        min-height: 560px;

    }

    .dat-about-image {

        width: 90%;

        height: 470px;

    }

    .dat-experience-card {

        left: -5px;

    }

    .dat-image-float-card {

        right: -5px;

    }

}


@media (max-width: 991px) {

    .dat-about-section {

        padding: 90px 0;

    }

    .dat-about-image-wrap {

        min-height: 550px;

        margin-bottom: 10px;

    }

    .dat-about-image {

        width: 85%;

        height: 480px;

    }

    .dat-about-content h2 {

        font-size: 45px;

    }

}


@media (max-width: 767px) {

    .dat-about-section {

        padding: 20px 0;

    }

    .dat-about-image-wrap {

        min-height: 430px;

        padding: 10px;

    }

    .dat-about-image {

        width: 88%;

        height: 370px;

        border-radius: 20px;

    }

    .dat-image-frame {

        width: 84%;

        height: 82%;

        left: 4%;

        top: 9%;

    }

    .dat-experience-card {

        left: 0;

        bottom: 30px;

        padding: 11px 14px;

    }

    .dat-experience-icon {

        width: 40px;

        height: 40px;

        font-size: 17px;

    }

    .dat-experience-content strong {

        font-size: 22px;

    }

    .dat-experience-content span {

        font-size: 8px;

    }

    .dat-image-float-card {

        right: 0;

        top: 55px;

        padding: 10px 12px;

    }

    .dat-float-icon {

        width: 34px;

        height: 34px;

        font-size: 14px;

    }

    .dat-image-float-card strong {

        font-size: 9px;

    }

    .dat-image-float-card span {

        font-size: 7px;

    }

    .dat-about-content h2 {

        font-size: 36px;

        letter-spacing: -0.7px;

    }

    .dat-about-content .dat-about-lead {

        font-size: 14px;

    }

    .dat-about-content p {

        font-size: 12.5px;

        line-height: 1.8;

    }

    .dat-about-highlights {

        grid-template-columns: 1fr;

    }

    .dat-about-bottom {

        align-items: flex-start;

        flex-direction: column;

        gap: 17px;

    }

}


@media (max-width: 400px) {

    .dat-about-image-wrap {

        min-height: 390px;

    }

    .dat-about-image {

        height: 330px;

    }

    .dat-about-content h2 {

        font-size: 31px;

    }

}

/* =====================================================
   WATER TREATMENT SECTION
===================================================== */

.dat-treatment-section {

    position: relative;

    padding: 50px 0;

    background: #f7f9fb;

    overflow: hidden;

}


/* =====================================================
   BACKGROUND SHAPES
===================================================== */

.treatment-bg-shape {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}


.shape-one {

    width: 420px;
    height: 420px;

    top: -200px;
    right: -150px;

    border:
        2px solid rgb(0 103 204 / 40%);

}


.shape-two {

    width: 260px;
    height: 260px;

    bottom: -130px;
    left: -100px;

    border:
        2px solid rgb(227 38 50 / 48%);

}


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

.treatment-heading-row {

    margin-bottom: 75px;

}


.treatment-kicker {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: #0067cc;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2.5px;

}


.treatment-kicker span {

    width: 32px;
    height: 2px;

    background: #e32632;

}


.treatment-heading-row h2 {

    margin: 0;

    color: #111820;

    font-size:
        clamp(40px,
            4.7vw,
            64px);

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -2px;

}


.treatment-heading-row h2 span {

    display: block;

    color: #0067cc;

}


.treatment-heading-text {

    max-width: 450px;

    margin:
        0 0 5px auto;

    color: #78848e;

    font-size: 12px;

    line-height: 1.9;

}


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

.treatment-main {

    position: relative;

}


/* =====================================================
   PROBLEMS
===================================================== */

.problem-title {

    margin-bottom: 25px;

}


.problem-title>span {

    color: #e32632;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.8px;

}


.problem-title h3 {

    margin: 8px 0 0;

    color: #111820;

    font-size: 25px;

    font-weight: 700;

    line-height: 1.2;

}


.problem-title h3 strong {

    color: #0067cc;

}


.problem-list {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.problem-item {

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 12px 14px;

    border:
        1px solid #e8edf1;

    border-radius: 10px;

    background: #ffffff;

    transition:
        all .35s ease;

}


.problem-item:hover {

    transform:
        translateX(8px);

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

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

}


.problem-icon {

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 9px;

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

    color: #0067cc;

    font-size: 15px;

}


.red-problem {

    background:
        rgba(227, 38, 50, .08);

    color: #e32632;

}


.problem-item strong {

    display: block;

    color: #1b252d;

    font-size: 10px;

    font-weight: 800;

}


.problem-item small {

    display: block;

    margin-top: 3px;

    color: #919ba2;

    font-size: 7px;

}


/* =====================================================
   ORBIT AREA
===================================================== */

.treatment-orbit {

    position: relative;

    width: 390px;
    height: 390px;

    margin: auto;

}


.orbit-ring {

    position: absolute;

    top: 50%;
    left: 50%;

    border-radius: 50%;

    border:
        1px dashed rgba(0, 103, 204, .20);

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

}


.ring-one {

    width: 275px;
    height: 275px;

    animation:
        orbitRotate 20s linear infinite;

}


.ring-two {

    width: 365px;
    height: 365px;

    border-color:
        rgba(227, 38, 50, .12);

    animation:
        orbitRotate 30s linear infinite reverse;

}


@keyframes orbitRotate {

    from {

        transform:
            translate(-50%, -50%) rotate(0deg);

    }

    to {

        transform:
            translate(-50%, -50%) rotate(360deg);

    }

}


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

.treatment-center {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 145px;
    height: 145px;

    display: flex;

    flex-direction: column;

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

    border-radius: 50%;

    background:
        #ffffff;

    border:
        7px solid #eef4f8;

    box-shadow:
        0 20px 55px rgba(0, 40, 80, .13);

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

    z-index: 5;

}


.center-water {

    width: 35px;
    height: 35px;

    display: flex;

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

    margin-bottom: 5px;

    border-radius: 50%;

    background:
        #0067cc;

    color: #ffffff;

    font-size: 13px;

    animation:
        waterPulse 2.5s infinite;

}


@keyframes waterPulse {

    0%,
    100% {

        box-shadow:
            0 0 0 0 rgba(0, 103, 204, .25);

    }

    50% {

        box-shadow:
            0 0 0 12px rgba(0, 103, 204, 0);

    }

}


.treatment-center span {

    color: #0067cc;

    font-size: 6px;

    font-weight: 800;

    letter-spacing: 2px;

}


.treatment-center strong {

    color: #111820;

    font-size: 12px;

    text-align: center;

    line-height: 1.1;

}


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

.orbit-dot {

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #0067cc;

    box-shadow:
        0 0 12px rgba(0, 103, 204, .5);

    z-index: 3;

}


.dot-a {

    top: 22px;
    left: 50%;

    animation:
        dotMove 4s infinite ease-in-out;

}


.dot-b {

    right: 25px;
    bottom: 70px;

    background: #e32632;

    animation:
        dotMove 5s infinite ease-in-out 1s;

}


.dot-c {

    left: 40px;
    bottom: 90px;

    animation:
        dotMove 6s infinite ease-in-out 2s;

}


@keyframes dotMove {

    0%,
    100% {

        transform:
            scale(1) translateY(0);

    }

    50% {

        transform:
            scale(1.6) translateY(-12px);

    }

}


/* =====================================================
   ORBIT CARDS
===================================================== */

.orbit-card {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 7px 11px;

    border:
        1px solid #e4ebf0;

    border-radius: 30px;

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

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

    z-index: 8;

    animation:
        orbitCardFloat 4s ease-in-out infinite;

}


.orbit-card span {

    color: #313c45;

    font-size: 7px;

    font-weight: 800;

}


.orbit-icon {

    width: 25px;
    height: 25px;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(0, 103, 204, .09);

    color: #0067cc;

    font-size: 10px;

}


.red-orbit {

    background:
        rgba(227, 38, 50, .08);

    color: #e32632;

}


.orbit-card-one {

    top: 40px;
    left: 30px;

}


.orbit-card-two {

    top: 65px;
    right: 5px;

    animation-delay: .8s;

}


.orbit-card-three {

    bottom: 40px;
    right: 15px;

    animation-delay: 1.5s;

}


.orbit-card-four {

    bottom: 50px;
    left: 5px;

    animation-delay: 2.2s;

}


@keyframes orbitCardFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-8px);

    }

}


/* =====================================================
   APPROACH BOX
===================================================== */

.approach-box {

    padding:
        30px 25px;

    border-radius: 18px;

    background: #111820;

    color: #ffffff;

    box-shadow:
        0 25px 55px rgba(0, 0, 0, .12);

}


.approach-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.approach-top span {

    color: #52dfff;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 2px;

}


.approach-number {

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

    font-size: 22px;

    font-weight: 800;

}


.approach-box h3 {

    margin:
        18px 0 15px;

    font-size: 28px;

    font-weight: 800;

    line-height: 1.1;

}


.approach-box h3 span {

    color: #52dfff;

}


.approach-box>p {

    margin-bottom: 25px;

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

    font-size: 9px;

    line-height: 1.8;

}


/* =====================================================
   APPROACH STEPS
===================================================== */

.approach-steps {

    display: flex;

    flex-direction: column;

}


.approach-step {

    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 0;

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

}


.approach-step:last-child {

    border-bottom: none;

}


.approach-step>span {

    width: 27px;
    height: 27px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 50%;

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

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

    font-size: 7px;

}


.approach-step.active>span {

    background: #0067cc;

    border-color: #0067cc;

    color: #ffffff;

}


.approach-step strong {

    display: block;

    color: #ffffff;

    font-size: 9px;

    font-weight: 700;

}


.approach-step small {

    display: block;

    margin-top: 3px;

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

    font-size: 7px;

}


/* =====================================================
   PROCESS BAR
===================================================== */

.treatment-process {

    display: flex;

    align-items: center;

    margin-top: 80px;

    padding:
        18px 20px;

    border:
        1px solid #e4e9ed;

    border-radius: 12px;

    background: #ffffff;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .04);

}


.process-item {

    display: flex;

    align-items: center;

    gap: 8px;

    white-space: nowrap;

}


.process-item span {

    width: 26px;
    height: 26px;

    display: flex;

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

    border-radius: 50%;

    background:
        #f1f4f6;

    color:
        #929da5;

    font-size: 7px;

    font-weight: 800;

}


.process-item strong {

    color: #69757e;

    font-size: 7px;

    font-weight: 700;

}


.process-item.active span {

    background:
        #0067cc;

    color: #ffffff;

}


.process-item.active strong {

    color:
        #0067cc;

}


.process-line {

    flex: 1;

    height: 1px;

    min-width: 15px;

    margin:
        0 12px;

    background:
        #e1e7eb;

}


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

@media (max-width: 1199px) {

    .treatment-orbit {

        width: 330px;
        height: 330px;

    }


    .ring-one {

        width: 240px;
        height: 240px;

    }


    .ring-two {

        width: 310px;
        height: 310px;

    }


    .treatment-center {

        width: 125px;
        height: 125px;

    }


    .process-line {

        margin: 0 6px;

    }

}


@media (max-width: 991px) {

    .dat-treatment-section {

        padding:
            90px 0;

    }


    .treatment-heading-row {

        margin-bottom: 55px;

    }


    .treatment-heading-text {

        margin:
            20px 0 0;

    }


    .treatment-orbit {

        margin:
            65px auto;

    }


    .treatment-process {

        overflow-x: auto;

    }


    .process-item {

        flex-shrink: 0;

    }

}


@media (max-width: 767px) {

    .dat-treatment-section {

        padding:
            35px 0;

    }


    .treatment-heading-row h2 {

        font-size: 39px;

        letter-spacing: -1px;

    }


    .treatment-heading-text {

        font-size: 10px;

    }


    .treatment-orbit {

        width: 290px;
        height: 290px;

        margin:
            55px auto;

    }


    .ring-one {

        width: 210px;
        height: 210px;

    }


    .ring-two {

        width: 275px;
        height: 275px;

    }


    .treatment-center {

        width: 110px;
        height: 110px;

    }


    .orbit-card-one {

        left: 0;

    }


    .orbit-card-two {

        right: 0;

    }


    .orbit-card-three {

        right: 0;

    }


    .orbit-card-four {

        left: 0;

    }


    .approach-box {

        margin-top: 30px;

    }


    .treatment-process {

        margin-top: 55px;

        padding:
            15px;

    }

}


@media (max-width: 480px) {

    .treatment-heading-row h2 {

        font-size: 33px;

    }


    .treatment-orbit {

        width: 270px;
        height: 270px;

    }


    .ring-one {

        width: 195px;
        height: 195px;

    }


    .ring-two {

        width: 250px;
        height: 250px;

    }


    .orbit-card {

        padding:
            5px 8px;

    }


    .orbit-card span {

        font-size: 6px;

    }


    .problem-item {

        padding: 10px;

    }

}

/* =====================================================
   FONT SIZE IMPROVEMENT
   WATER TREATMENT SECTION
===================================================== */

/* SECTION KICKER */

.treatment-kicker {
    font-size: 13px;
    letter-spacing: 2px;
}


/* MAIN HEADING */

.treatment-heading-row h2 {
    font-size: clamp(40px, 4.5vw, 62px);
    line-height: 1.12;
    letter-spacing: -1.5px;
}


/* DESCRIPTION */

.treatment-heading-text {
    font-size: 16px;
    line-height: 1.8;
}


/* =====================================================
   COMMON WATER PROBLEMS
===================================================== */

.problem-title>span {
    font-size: 12px;
    letter-spacing: 1.8px;
}


.problem-title h3 {
    font-size: 28px;
    line-height: 1.3;
}


/* PROBLEM CARD */

.problem-item {
    padding: 15px 16px;
    gap: 15px;
}


.problem-icon {
    width: 45px;
    height: 45px;

    font-size: 18px;
}


.problem-item strong {
    font-size: 14px;
    line-height: 1.4;
}


.problem-item small {
    font-size: 11px;
    line-height: 1.5;
}


/* =====================================================
   CENTER WATER TREATMENT
===================================================== */

.treatment-center span {
    font-size: 9px;
    letter-spacing: 2px;
}


.treatment-center strong {
    font-size: 14px;
    line-height: 1.2;
}


.center-water {
    width: 42px;
    height: 42px;

    font-size: 16px;
}


/* ORBIT CARDS */

.orbit-card {
    padding: 9px 14px;
    gap: 9px;
}


.orbit-card span {
    font-size: 11px;
}


.orbit-icon {
    width: 30px;
    height: 30px;

    font-size: 12px;
}


/* =====================================================
   OUR APPROACH
===================================================== */

.approach-top span {
    font-size: 10px;
    letter-spacing: 2px;
}


.approach-number {
    font-size: 28px;
}


.approach-box h3 {
    font-size: 31px;
    line-height: 1.2;
}


.approach-box>p {
    font-size: 13px;
    line-height: 1.8;
}


/* APPROACH STEPS */

.approach-step {
    padding: 13px 0;
    gap: 14px;
}


.approach-step>span {
    width: 34px;
    height: 34px;

    font-size: 10px;
}


.approach-step strong {
    font-size: 13px;
    line-height: 1.4;
}


.approach-step small {
    margin-top: 4px;

    font-size: 10px;
    line-height: 1.5;
}


/* =====================================================
   BOTTOM PROCESS
===================================================== */

.treatment-process {
    padding: 20px 22px;
}


.process-item {
    gap: 10px;
}


.process-item span {
    width: 32px;
    height: 32px;

    font-size: 10px;
}


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


.process-line {
    margin: 0 15px;
}


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

@media (max-width: 991px) {

    .treatment-heading-row h2 {
        font-size: 48px;
    }

    .treatment-heading-text {
        font-size: 15px;
    }

    .problem-title h3 {
        font-size: 26px;
    }

    .problem-item strong {
        font-size: 14px;
    }

    .problem-item small {
        font-size: 11px;
    }

    .approach-box h3 {
        font-size: 29px;
    }

    .approach-box>p {
        font-size: 13px;
    }

}


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

@media (max-width: 767px) {

    .treatment-kicker {
        font-size: 11px;
        letter-spacing: 1.5px;
    }


    .treatment-heading-row h2 {
        font-size: 38px;
        line-height: 1.15;
        letter-spacing: -0.8px;
    }


    .treatment-heading-text {
        font-size: 14px;
        line-height: 1.8;
    }


    .problem-title>span {
        font-size: 10px;
    }


    .problem-title h3 {
        font-size: 25px;
    }


    .problem-item {
        padding: 14px;
    }


    .problem-item strong {
        font-size: 14px;
    }


    .problem-item small {
        font-size: 11px;
    }


    .treatment-center strong {
        font-size: 12px;
    }


    .treatment-center span {
        font-size: 8px;
    }


    .orbit-card {
        padding: 8px 11px;
    }


    .orbit-card span {
        font-size: 10px;
    }


    .approach-box h3 {
        font-size: 27px;
    }


    .approach-box>p {
        font-size: 13px;
        line-height: 1.8;
    }


    .approach-step strong {
        font-size: 13px;
    }


    .approach-step small {
        font-size: 10px;
    }

}


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

@media (max-width: 480px) {

    .treatment-heading-row h2 {
        font-size: 33px;
    }


    .treatment-heading-text {
        font-size: 13px;
    }


    .problem-title h3 {
        font-size: 23px;
    }


    .problem-item strong {
        font-size: 13px;
    }


    .problem-item small {
        font-size: 10px;
    }


    .approach-box h3 {
        font-size: 25px;
    }


    .approach-box>p {
        font-size: 12px;
    }


    .approach-step strong {
        font-size: 12px;
    }


    .approach-step small {
        font-size: 9px;
    }

}

/* =====================================================
   PRODUCTS MAIN SECTION
===================================================== */

.products-main-section {

    position: relative;

    padding: 70px 0;

    background: #ffffff;

    overflow: hidden;

}


/* =====================================================
   BACKGROUND WORD
===================================================== */

.products-bg-word {

    position: absolute;

    top: 10px;
    right: -30px;

    font-size: 150px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: -8px;

    color: rgb(0 103 204 / 10%);

    pointer-events: none;

}


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

.products-top {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;

    margin-bottom: 60px;

}


.products-label {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 17px;

    color: #0067cc;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

}


.products-label span {

    width: 38px;

    height: 2px;

    background: #e32632;

}


.products-top h2 {

    margin: 0;

    color: #101820;

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

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -2px;

}


.products-top h2 strong {

    display: block;

    color: #0067cc;

}


.products-intro {

    max-width: 440px;

}


.products-intro p {

    margin: 0 0 22px;

    color: #66737c;

    font-size: 15px;

    line-height: 1.85;

}


.products-quote {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #111820;

    text-decoration: none;

    font-size: 12px;

    font-weight: 800;

    transition: .3s;

}


.products-quote i {

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #0067cc;

    color: #ffffff;

    transition: .3s;

}


.products-quote:hover {

    color: #e32632;

}


.products-quote:hover i {

    background: #e32632;

    transform: rotate(45deg);

}


/* =====================================================
   MAIN SHOWCASE
===================================================== */

.products-showcase {

    display: grid;

    grid-template-columns: 43% 57%;

    min-height: 650px;

    border: 1px solid #e2e8ec;

    background: #f7f9fa;

    box-shadow:
        0 30px 80px rgba(18, 42, 60, .08);

}


/* =====================================================
   FEATURE IMAGE
===================================================== */

.product-feature {

    position: relative;

    min-height: 650px;

    overflow: hidden;

    background: #102b43;

}


.product-feature-image {

    position: absolute;

    inset: 0;

}


.product-feature-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 1.2s cubic-bezier(.2, .7, .2, 1);

}


.product-feature:hover .product-feature-image img {

    transform: scale(1.08);

}


.product-feature-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, .05) 20%,
            rgba(0, 20, 40, .88) 100%);

    z-index: 1;

}


/* FEATURE CONTENT */

.product-feature-content {

    position: absolute;

    left: 45px;

    right: 45px;

    bottom: 50px;

    z-index: 3;

}


.product-feature-content>span {

    display: inline-block;

    margin-bottom: 15px;

    padding: 7px 12px;

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

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

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.product-feature-content h3 {

    margin: 0;

    color: #ffffff;

    font-size: 44px;

    line-height: 1.05;

    font-weight: 700;

}


.product-feature-content h3 strong {

    display: block;

    color: #48d8f7;

}


.product-feature-content p {

    max-width: 400px;

    margin: 18px 0 25px;

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

    font-size: 14px;

    line-height: 1.75;

}


.product-feature-content a {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 13px 19px;

    border-radius: 40px;

    background: #ffffff;

    color: #101820;

    text-decoration: none;

    font-size: 11px;

    font-weight: 800;

    transition: .35s;

}


.product-feature-content a:hover {

    background: #e32632;

    color: #ffffff;

    transform: translateY(-3px);

}


.product-feature-content a i {

    transition: .3s;

}


.product-feature-content a:hover i {

    transform: translateX(5px);

}


.feature-number {

    position: absolute;

    right: 30px;

    top: 25px;

    z-index: 3;

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

    font-size: 100px;

    line-height: 1;

    font-weight: 900;

}


/* =====================================================
   PRODUCT LIST
===================================================== */

.products-list {

    padding: 18px 25px;

    background: #f8fafb;

}


.product-list-item {

    position: relative;

    display: grid;

    grid-template-columns:
        35px 52px 1fr 40px;

    align-items: center;

    gap: 16px;

    min-height: 100px;

    padding: 16px 15px;

    border-bottom: 1px solid #e0e6ea;

    cursor: pointer;

    transition:
        all .4s ease;

}


.product-list-item:last-child {

    border-bottom: none;

}


.product-list-item::before {

    content: "";

    position: absolute;

    left: 0;

    top: 15px;

    bottom: 15px;

    width: 3px;

    background: #0067cc;

    transform: scaleY(0);

    transition: .35s;

}


.product-list-item:hover,
.product-list-item.active {

    background: #ffffff;

    box-shadow:
        0 10px 30px rgba(15, 40, 60, .06);

    transform: translateX(-5px);

}


.product-list-item:hover::before,
.product-list-item.active::before {

    transform: scaleY(1);

}


/* NUMBER */

.product-list-number {

    color: #a9b3ba;

    font-size: 10px;

    font-weight: 800;

}


.product-list-item.active .product-list-number {

    color: #0067cc;

}


/* ICON */

.product-list-icon {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

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

    color: #0067cc;

    font-size: 20px;

    transition: .4s;

}


.product-list-item:hover .product-list-icon,
.product-list-item.active .product-list-icon {

    background: #0067cc;

    color: #ffffff;

    transform: rotate(-6deg);

}


.product-list-icon.red-icon {

    background:
        rgba(227, 38, 50, .08);

    color: #e32632;

}


.product-list-item:hover .red-icon {

    background: #e32632;

    color: #ffffff;

}


/* CONTENT */

.product-list-content span {

    display: block;

    margin-bottom: 5px;

    color: #9ba6ad;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.product-list-content h3 {

    margin: 0 0 5px;

    color: #18232b;

    font-size: 16px;

    font-weight: 800;

}


.product-list-content p {

    margin: 0;

    color: #7a858d;

    font-size: 11px;

    line-height: 1.5;

}


/* ARROW */

.product-list-arrow {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #dce3e8;

    border-radius: 50%;

    color: #7d8991;

    font-size: 12px;

    transition: .35s;

}


.product-list-item:hover .product-list-arrow,
.product-list-item.active .product-list-arrow {

    background: #0067cc;

    border-color: #0067cc;

    color: #ffffff;

    transform:
        translate(3px, -3px);

}


/* =====================================================
   BOTTOM BAR
===================================================== */

.products-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 30px;

    padding: 20px 25px;

    border: 1px solid #e1e7eb;

    background: #ffffff;

}


.products-count {

    display: flex;

    align-items: center;

    gap: 12px;

}


.products-count strong {

    color: #0067cc;

    font-size: 32px;

    line-height: 1;

}


.products-count span {

    color: #89949b;

    font-size: 8px;

    font-weight: 800;

    line-height: 1.5;

    letter-spacing: 1px;

}


.products-bottom-text {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #27343d;

    font-size: 12px;

    font-weight: 700;

}


.products-bottom-text i {

    color: #e32632;

    font-size: 18px;

}


.products-bottom-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 13px 20px;

    background: #0067cc;

    color: #ffffff;

    text-decoration: none;

    border-radius: 40px;

    font-size: 11px;

    font-weight: 800;

    transition: .3s;

}


.products-bottom-btn:hover {

    background: #e32632;

    color: #ffffff;

    transform: translateY(-3px);

}


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

@media (max-width: 991px) {

    .products-main-section {

        padding: 100px 0;

    }


    .products-top {

        display: block;

    }


    .products-intro {

        max-width: 650px;

        margin-top: 25px;

    }


    .products-showcase {

        grid-template-columns: 1fr;

    }


    .product-feature {

        min-height: 520px;

    }


    .products-list {

        padding: 15px;

    }

}


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

@media (max-width: 767px) {

    .products-main-section {

        padding: 75px 0;

    }


    .products-bg-word {

        font-size: 80px;

    }


    .products-top h2 {

        font-size: 38px;

        letter-spacing: -1px;

    }


    .products-intro p {

        font-size: 14px;

    }


    .product-feature {

        min-height: 460px;

    }


    .product-feature-content {

        left: 25px;

        right: 25px;

        bottom: 30px;

    }


    .product-feature-content h3 {

        font-size: 34px;

    }


    .product-feature-content p {

        font-size: 12px;

    }


    .feature-number {

        font-size: 70px;

    }


    .product-list-item {

        grid-template-columns:
            30px 45px 1fr;

        gap: 10px;

        padding: 15px 8px;

    }


    .product-list-icon {

        width: 45px;

        height: 45px;

        font-size: 17px;

    }


    .product-list-arrow {

        display: none;

    }


    .product-list-content h3 {

        font-size: 14px;

    }


    .product-list-content p {

        font-size: 10px;

    }


    .products-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

    }


    .products-bottom-btn {

        width: 100%;

        justify-content: center;

    }

}


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

@media (max-width: 480px) {

    .products-top h2 {

        font-size: 32px;

    }


    .product-feature {

        min-height: 430px;

    }


    .product-feature-content h3 {

        font-size: 29px;

    }


    .product-list-content h3 {

        font-size: 13px;

    }


    .product-list-content p {

        font-size: 9px;

    }

}

/* =====================================================
   TREATMENT SOLUTIONS
===================================================== */

.treatment-solutions-section {

    position: relative;

    padding: 140px 0;

    background: #f7f9fa;

    overflow: hidden;

}


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

.treatment-heading {

    max-width: 800px;

    margin-bottom: 75px;

}


.treatment-label {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: #0067cc;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

}


.treatment-label span {

    width: 40px;

    height: 2px;

    background: #e32632;

}


.treatment-heading h2 {

    margin: 0;

    color: #101820;

    font-size: clamp(40px, 5vw, 65px);

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -2px;

}


.treatment-heading h2 strong {

    display: block;

    color: #0067cc;

}


.treatment-heading p {

    max-width: 650px;

    margin-top: 25px;

    color: #68757d;

    font-size: 15px;

    line-height: 1.9;

}


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

.treatment-wrapper {

    display: grid;

    grid-template-columns:
        1fr 280px 1fr;

    gap: 35px;

    align-items: center;

}


/* =====================================================
   TITLES
===================================================== */

.problem-title,
.solution-title {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

    color: #18232b;

    font-size: 13px;

    font-weight: 800;

}


.problem-title span,
.solution-title span {

    color: #e32632;

    font-size: 10px;

}


/* =====================================================
   PROBLEMS
===================================================== */

.problem-item {

    position: relative;

    display: grid;

    grid-template-columns:
        48px 1fr 20px;

    align-items: center;

    gap: 14px;

    padding: 18px 15px;

    margin-bottom: 10px;

    background: #ffffff;

    border: 1px solid #e1e7eb;

    cursor: pointer;

    transition: .4s;

}


.problem-item:hover,
.problem-item.active {

    border-color: #0067cc;

    box-shadow:
        0 15px 35px rgba(20, 50, 70, .08);

    transform: translateX(5px);

}


.problem-icon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(0, 103, 204, .07);

    color: #0067cc;

    font-size: 19px;

    transition: .4s;

}


.problem-item:hover .problem-icon,
.problem-item.active .problem-icon {

    background: #0067cc;

    color: #ffffff;

}


.problem-item h3 {

    margin: 0 0 5px;

    color: #17232b;

    font-size: 15px;

    font-weight: 800;

}


.problem-item p {

    margin: 0;

    color: #7c878e;

    font-size: 11px;

    line-height: 1.55;

}


.problem-arrow {

    color: #9ba5ab;

    font-size: 12px;

    transition: .3s;

}


.problem-item:hover .problem-arrow,
.problem-item.active .problem-arrow {

    color: #0067cc;

    transform: translateX(4px);

}


/* =====================================================
   CENTER WATER
===================================================== */

.treatment-center {

    position: relative;

    width: 250px;

    height: 250px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: center;

}


.water-core {

    position: relative;

    width: 115px;

    height: 115px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(145deg,
            #0067cc,
            #36c8e8);

    color: #ffffff;

    font-size: 38px;

    box-shadow:
        0 20px 55px rgba(0, 103, 204, .28);

    z-index: 3;

    animation: waterFloat 4s ease-in-out infinite;

}


@keyframes waterFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }

}


.water-orbit {

    position: absolute;

    border-radius: 50%;

    border: 1px dashed #c5d7e2;

    animation: orbitRotate 15s linear infinite;

}


.orbit-one {

    width: 180px;
    height: 180px;

}


.orbit-two {

    width: 245px;
    height: 245px;

    border-color:
        rgba(227, 38, 50, .25);

    animation-duration: 20s;

    animation-direction: reverse;

}


@keyframes orbitRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


.water-ripple {

    position: absolute;

    inset: 0;

    border-radius: 50%;

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

    animation: rippleEffect 2.5s infinite;

}


.ripple-two {

    animation-delay: 1.2s;

}


@keyframes rippleEffect {

    0% {
        transform: scale(.7);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }

}


.water-core-text {

    position: absolute;

    bottom: -15px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    z-index: 5;

}


.water-core-text strong {

    color: #101820;

    font-size: 11px;

    letter-spacing: 2px;

}


.water-core-text span {

    color: #0067cc;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 2px;

}


/* =====================================================
   SOLUTIONS
===================================================== */

.solution-item {

    display: grid;

    grid-template-columns:
        42px 1fr;

    gap: 15px;

    padding: 20px 0;

    border-bottom: 1px solid #dce3e7;

    transition: .35s;

}


.solution-item:hover {

    padding-left: 8px;

}


.solution-number {

    color: #0067cc;

    font-size: 11px;

    font-weight: 800;

}


.solution-item h3 {

    margin: 0 0 6px;

    color: #18232b;

    font-size: 15px;

    font-weight: 800;

}


.solution-item p {

    margin: 0;

    color: #78848c;

    font-size: 11px;

    line-height: 1.6;

}


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

.treatment-process {

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 90px;

    padding: 25px;

    background: #ffffff;

    border:
        1px solid #e0e6ea;

}


.process-step {

    position: relative;

    display: flex;

    align-items: center;

    gap: 9px;

    white-space: nowrap;

}


.process-step span {

    color: #e32632;

    font-size: 8px;

    font-weight: 800;

}


.process-step i {

    color: #0067cc;

    font-size: 16px;

}


.process-step strong {

    color: #26343c;

    font-size: 10px;

    font-weight: 800;

}


.process-line {

    width: 45px;

    height: 1px;

    margin: 0 15px;

    background:
        #d7e0e5;

}


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

@media (max-width: 991px) {

    .treatment-solutions-section {

        padding: 100px 0;

    }


    .treatment-wrapper {

        grid-template-columns:
            1fr 1fr;

    }


    .treatment-center {

        grid-column: 1 / -1;

        grid-row: 1;

        margin-bottom: 40px;

    }


    .problem-title,
    .solution-title {

        margin-top: 20px;

    }


    .treatment-process {

        overflow-x: auto;

        justify-content: flex-start;

    }

}


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

@media (max-width: 767px) {

    .treatment-solutions-section {

        padding: 80px 0;

    }


    .treatment-heading h2 {

        font-size: 37px;

        letter-spacing: -1px;

    }


    .treatment-heading p {

        font-size: 14px;

    }


    .treatment-wrapper {

        display: flex;

        flex-direction: column;

        gap: 45px;

    }


    .treatment-center {

        order: -1;

        width: 200px;

        height: 200px;

    }


    .water-core {

        width: 95px;

        height: 95px;

        font-size: 30px;

    }


    .orbit-one {

        width: 150px;
        height: 150px;

    }


    .orbit-two {

        width: 200px;
        height: 200px;

    }


    .problem-item {

        grid-template-columns:
            45px 1fr 15px;

    }


    .problem-item h3,
    .solution-item h3 {

        font-size: 14px;

    }


    .problem-item p,
    .solution-item p {

        font-size: 10px;

    }


    .treatment-process {

        justify-content: flex-start;

        width: 100%;

        overflow-x: auto;

        padding: 20px;

    }


    .process-step {

        min-width: 125px;

    }


    .process-line {

        min-width: 25px;

        margin: 0 8px;

    }

}

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

.why-dharshan-section {

    position: relative;

    padding: 140px 0;

    background: #ffffff;

    overflow: hidden;

}


.why-water-shape {

    position: absolute;

    border-radius: 50%;

    filter: blur(2px);

    pointer-events: none;

}


.shape-one {

    width: 420px;
    height: 420px;

    right: -180px;
    top: 80px;

    border: 1px solid rgba(0,103,204,.08);

}


.shape-two {

    width: 250px;
    height: 250px;

    left: -120px;
    bottom: 50px;

    border: 1px solid rgba(227,38,50,.07);

}


.why-heading {

    max-width: 750px;

    margin-bottom: 65px;

}


.why-label {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #0067cc;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 18px;

}


.why-label span {

    width: 38px;
    height: 2px;

    background: #e32632;

}


.why-heading h2 {

    margin: 0;

    color: #111820;

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

    line-height: 1.08;

    font-weight: 800;

}


.why-heading h2 strong {

    display: block;

    color: #0067cc;

}


.why-heading p {

    max-width: 650px;

    margin-top: 22px;

    color: #707c84;

    font-size: 15px;

    line-height: 1.8;

}


/* GRID */

.why-grid {

    display: grid;

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

    gap: 15px;

}


.why-card {

    position: relative;

    min-height: 285px;

    padding: 32px;

    background: #f7f9fa;

    border: 1px solid #e2e7ea;

    overflow: hidden;

    transition: .45s;

}


.why-card:hover {

    background: #ffffff;

    border-color: #0067cc;

    transform: translateY(-8px);

    box-shadow:
        0 25px 55px rgba(20,50,70,.09);

}


.why-card-large {

    grid-row: span 2;

    min-height: 585px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    background:
        linear-gradient(
            145deg,
            #eef7fc,
            #ffffff
        );

}


.why-card-number {

    position: absolute;

    right: 25px;
    top: 20px;

    color: rgba(0,103,204,.07);

    font-size: 100px;

    font-weight: 900;

    line-height: 1;

}


.why-icon {

    width: 58px;
    height: 58px;

    display: flex;

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

    background: rgba(0,103,204,.09);

    color: #0067cc;

    font-size: 23px;

    margin-bottom: 28px;

    transition: .4s;

}


.why-icon.red {

    background: rgba(227,38,50,.08);

    color: #e32632;

}


.why-card:hover .why-icon {

    background: #0067cc;

    color: #ffffff;

    transform: rotate(-7deg);

}


.why-card:hover .why-icon.red {

    background: #e32632;

}


.why-card span {

    display: block;

    color: #98a3aa;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.8px;

    margin-bottom: 8px;

}


.why-card h3 {

    color: #17232b;

    font-size: 25px;

    line-height: 1.2;

    font-weight: 800;

    margin: 0 0 14px;

}


.why-card-large h3 {

    font-size: 68px;

    color: #0067cc;

}


.why-card-large h3 small {

    color: #18242c;

    font-size: 20px;

}


.why-card p {

    max-width: 330px;

    margin: 0;

    color: #78848c;

    font-size: 12px;

    line-height: 1.7;

}


.why-card-arrow {

    position: absolute;

    right: 25px;

    bottom: 25px;

    width: 35px;
    height: 35px;

    display: flex;

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

    border: 1px solid #dce3e8;

    border-radius: 50%;

    color: #0067cc;

    font-size: 12px;

    transition: .3s;

}


.why-card:hover .why-card-arrow {

    background: #0067cc;

    color: #ffffff;

    transform: rotate(45deg);

}


@media(max-width:991px) {

    .why-grid {

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

    }

    .why-card-large {

        grid-row: auto;

        min-height: 350px;

    }

}


@media(max-width:767px) {

    .why-dharshan-section {

        padding: 85px 0;

    }

    .why-grid {

        grid-template-columns: 1fr;

    }

    .why-card-large {

        min-height: 330px;

    }

    .why-card-large h3 {

        font-size: 55px;

    }

}

/* =====================================================
   INDUSTRIES
===================================================== */

.industries-section {

    padding: 70px 0;

    background: #101820;

    overflow: hidden;

}


.industries-heading {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 50px;

    margin-bottom: 60px;

}


.industries-label {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #48d8f7;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 18px;

}


.industries-label span {

    width: 38px;

    height: 2px;

    background: #e32632;

}


.industries-heading h2 {

    color: #ffffff;

    font-size: clamp(40px, 5vw, 64px);

    line-height: 1.08;

    font-weight: 800;

    margin: 0;

}


.industries-heading h2 strong {

    display: block;

    color: #48d8f7;

}


.industries-heading p {

    max-width: 420px;

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

    font-size: 14px;

    line-height: 1.8;

    margin: 0;

}


.industries-grid {

    display: grid;

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

    gap: 12px;

}


.industry-card {

    position: relative;

    height: 330px;

    overflow: hidden;

    cursor: pointer;

}


.industry-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 1s;

}


.industry-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(transparent 25%,
            rgba(0, 0, 0, .85));

}


.industry-card:hover img {

    transform: scale(1.1);

}


.industry-content {

    position: absolute;

    left: 25px;
    right: 20px;
    bottom: 25px;

    z-index: 2;

}


.industry-content span {

    color: #48d8f7;

    font-size: 9px;

    font-weight: 800;

}


.industry-content i {

    display: block;

    color: #ffffff;

    font-size: 24px;

    margin: 12px 0;

}


.industry-content h3 {

    margin: 0;

    color: #ffffff;

    font-size: 17px;

    font-weight: 700;

}


@media(max-width:991px) {

    .industries-grid {

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

    }

}


@media(max-width:767px) {

    .industries-section {

        padding: 40px 0;

    }

    .industries-heading {

        display: block;

    }

    .industries-heading p {

        margin-top: 25px;

    }

    .industries-grid {

        grid-template-columns: 1fr 1fr;

    }

    .industry-card {

        height: 250px;

    }

}


@media(max-width:480px) {

    .industries-grid {

        grid-template-columns: 1fr;

    }

}

/* =====================================================
   SOLUTIONS SHOWCASE
===================================================== */

.solutions-showcase-section {

    padding: 80px 0;

    background: #ffffff;

}


.solutions-label {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #0067cc;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 15px;

}


.solutions-label span {

    width: 40px;
    height: 2px;

    background: #e32632;

}


.solutions-showcase-heading h2 {

    margin: 0 0 55px;

    color: #101820;

    font-size: clamp(40px, 5vw, 62px);

    line-height: 1.08;

    font-weight: 800;

}


.solutions-showcase-heading h2 strong {

    color: #0067cc;

}


.solution-showcase-box {

    display: grid;

    grid-template-columns: 48% 52%;

    min-height: 580px;

    background: #f5f8fa;

}


.solution-showcase-image {

    position: relative;

    overflow: hidden;

}


.solution-showcase-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: 1s;

}


.solution-showcase-box:hover .solution-showcase-image img {

    transform: scale(1.05);

}


.solution-image-badge {

    position: absolute;

    left: 30px;
    bottom: 30px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px 20px;

    background: #ffffff;

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

}


.solution-image-badge i {

    color: #0067cc;

    font-size: 23px;

}


.solution-image-badge strong,
.solution-image-badge span {

    display: block;

}


.solution-image-badge strong {

    color: #17232b;

    font-size: 13px;

}


.solution-image-badge span {

    color: #849098;

    font-size: 9px;

}


.solution-showcase-content {

    padding: 70px;

}


.solution-small {

    color: #e32632;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

}


.solution-showcase-content h3 {

    margin: 18px 0;

    color: #18232b;

    font-size: 43px;

    line-height: 1.1;

    font-weight: 800;

}


.solution-showcase-content h3 strong {

    display: block;

    color: #0067cc;

}


.solution-showcase-content>p {

    max-width: 500px;

    color: #748087;

    font-size: 14px;

    line-height: 1.8;

}


.solution-points {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

    margin: 30px 0;

}


.solution-points div {

    color: #26333b;

    font-size: 11px;

    font-weight: 700;

}


.solution-points i {

    color: #0067cc;

    margin-right: 7px;

}


.solution-showcase-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 22px;

    background: #0067cc;

    color: #ffffff;

    text-decoration: none;

    border-radius: 40px;

    font-size: 11px;

    font-weight: 800;

    transition: .3s;

}


.solution-showcase-btn:hover {

    background: #e32632;

    color: #ffffff;

    transform: translateY(-3px);

}


@media(max-width:991px) {

    .solution-showcase-box {

        grid-template-columns: 1fr;

    }

    .solution-showcase-image {

        min-height: 400px;

    }

}


@media(max-width:767px) {

    .solutions-showcase-section {

        padding: 35px 0;

    }

    .solution-showcase-content {

        padding: 40px 25px;

    }

    .solution-showcase-content h3 {

        font-size: 34px;

    }

    .solution-points {

        grid-template-columns: 1fr;

    }

}

/* =====================================================
   AFTER SALES
===================================================== */

.after-sales-section {

    padding: 60px 0;

    background:
        linear-gradient(135deg,
            #f1f7fb,
            #ffffff);

}


.after-sales-inner {

    display: grid;

    grid-template-columns: 42% 58%;

    gap: 70px;

    align-items: center;

}


.after-sales-label {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #0067cc;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.after-sales-label span {

    width: 35px;
    height: 2px;

    background: #e32632;

}


.after-sales-content h2 {

    margin: 18px 0;

    color: #101820;

    font-size: 50px;

    line-height: 1.1;

    font-weight: 800;

}


.after-sales-content h2 strong {

    display: block;

    color: #0067cc;

}


.after-sales-content p {

    color: #718087;

    font-size: 14px;

    line-height: 1.8;

    max-width: 470px;

}


.service-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 20px;

    padding: 14px 22px;

    background: #101820;

    color: #ffffff;

    text-decoration: none;

    border-radius: 40px;

    font-size: 11px;

    font-weight: 800;

    transition: .3s;

}


.service-btn:hover {

    background: #0067cc;

    color: #ffffff;

    transform: translateY(-3px);

}


.service-timeline {

    position: relative;

    padding-left: 30px;

}


.service-timeline::before {

    content: "";

    position: absolute;

    left: 25px;

    top: 20px;

    bottom: 20px;

    width: 1px;

    background: #cbd9e2;

}


.service-step {

    position: relative;

    display: grid;

    grid-template-columns: 55px 1fr;

    gap: 20px;

    margin-bottom: 35px;

}


.service-step:last-child {

    margin-bottom: 0;

}


.service-step-icon {

    position: relative;

    z-index: 2;

    width: 50px;
    height: 50px;

    display: flex;

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

    border-radius: 50%;

    background: #ffffff;

    border: 1px solid #d6e1e8;

    color: #0067cc;

    font-size: 18px;

    transition: .4s;

}


.service-step:hover .service-step-icon {

    background: #0067cc;

    color: #ffffff;

    transform: rotate(-8deg);

}


.service-step span {

    color: #e32632;

    font-size: 9px;

    font-weight: 800;

}


.service-step h3 {

    margin: 5px 0 6px;

    color: #1b2931;

    font-size: 16px;

    font-weight: 800;

}


.service-step p {

    margin: 0;

    color: #7a868d;

    font-size: 11px;

    line-height: 1.6;

}


@media(max-width:991px) {

    .after-sales-inner {

        grid-template-columns: 1fr;

    }

}


@media(max-width:767px) {

    .after-sales-section {

        padding: 40px 0;

    }

    .after-sales-content h2 {

        font-size: 38px;

    }

}

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

.vision-mission-section {

    padding: 70px 0;

    background: #ffffff;

}


.vm-heading {

    margin-bottom: 55px;

}


.vm-label {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #0067cc;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 16px;

}


.vm-label span {

    width: 38px;
    height: 2px;

    background: #e32632;

}


.vm-heading h2 {

    margin: 0;

    color: #101820;

    font-size: clamp(40px, 5vw, 62px);

    line-height: 1.08;

    font-weight: 800;

}


.vm-heading h2 strong {

    color: #0067cc;

}


.vm-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

}


.vm-card {

    position: relative;

    min-height: 400px;

    padding: 50px;

    overflow: hidden;

}


.vision-card {

    background: #eef7fc;

}


.mission-card {

    background: #111820;

}


.vm-water-number {

    position: absolute;

    right: 25px;

    top: 15px;

    font-size: 130px;

    font-weight: 900;

    line-height: 1;

    color: rgba(0, 103, 204, .07);

}


.mission-card .vm-water-number {

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

}


.vm-icon {

    width: 58px;
    height: 58px;

    display: flex;

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

    margin-bottom: 35px;

    background: #0067cc;

    color: #ffffff;

    font-size: 23px;

}


.mission-card .vm-icon {

    background: #e32632;

}


.vm-card>span {

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

    color: #0067cc;

}


.mission-card>span {

    color: #48d8f7;

}


.vm-card h3 {

    max-width: 480px;

    margin: 15px 0;

    color: #17232b;

    font-size: 35px;

    line-height: 1.15;

    font-weight: 800;

}


.mission-card h3 {

    color: #ffffff;

}


.vm-card p {

    max-width: 500px;

    color: #748087;

    font-size: 13px;

    line-height: 1.8;

}


.mission-card p {

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

}


/* VALUES */

.core-values {

    display: flex;

    align-items: center;

    gap: 0;

    margin-top: 15px;

    border: 1px solid #e0e6ea;

}


.core-title {

    min-width: 210px;

    padding: 25px;

}


.core-title span {

    display: block;

    color: #e32632;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 2px;

}


.core-title h3 {

    margin: 5px 0 0;

    color: #17232b;

    font-size: 15px;

}


.value-item {

    flex: 1;

    min-height: 85px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 8px;

    border-left: 1px solid #e0e6ea;

    transition: .3s;

}


.value-item:hover {

    background: #f4f8fa;

}


.value-item i {

    color: #0067cc;

    font-size: 19px;

}


.value-item strong {

    color: #35424a;

    font-size: 9px;

}


@media(max-width:991px) {

    .core-values {

        flex-wrap: wrap;

    }

    .core-title {

        width: 100%;

    }

    .value-item {

        min-width: 33.33%;

    }

}


@media(max-width:767px) {

    .vision-mission-section {

        padding: 25px 0;

    }

    .vm-grid {

        grid-template-columns: 1fr;

    }

    .vm-card {

        min-height: 350px;

        padding: 35px 25px;

    }

    .vm-card h3 {

        font-size: 29px;

    }

    .value-item {

        min-width: 50%;

    }

}

/* =====================================================
   FINAL CONTACT
===================================================== */

.final-contact-section {

    position: relative;

    padding: 110px 0;

    overflow: hidden;

}


.final-contact-image {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(5, 25, 40, .96),
            rgba(5, 25, 40, .82),
            rgba(5, 25, 40, .55)),
        url("../images/contact-water.webp") center / cover no-repeat;

}


.final-contact-box {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 1.25fr .75fr;

    gap: 70px;

    align-items: center;

    padding: 65px;

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

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

    backdrop-filter: blur(10px);

}


.final-contact-label {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #48d8f7;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

}


.final-contact-label span {

    width: 35px;
    height: 2px;

    background: #e32632;

}


.final-contact-content h2 {

    margin: 18px 0;

    color: #ffffff;

    font-size: clamp(40px, 5vw, 63px);

    line-height: 1.05;

    font-weight: 800;

}


.final-contact-content h2 strong {

    display: block;

    color: #48d8f7;

}


.final-contact-content>p {

    max-width: 620px;

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

    font-size: 14px;

    line-height: 1.8;

}


.final-contact-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;

}


.final-primary-btn,
.final-whatsapp-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 15px 23px;

    border-radius: 40px;

    text-decoration: none;

    font-size: 11px;

    font-weight: 800;

    transition: .35s;

}


.final-primary-btn {

    background: #ffffff;

    color: #101820;

}


.final-primary-btn:hover {

    background: #0067cc;

    color: #ffffff;

    transform: translateY(-3px);

}


.final-whatsapp-btn {

    background: #e32632;

    color: #ffffff;

}


.final-whatsapp-btn:hover {

    background: #ffffff;

    color: #e32632;

    transform: translateY(-3px);

}


/* CONTACT DETAILS */

.contact-details {

    display: flex;

    flex-direction: column;

    gap: 28px;

}


.contact-detail {

    display: flex;

    align-items: flex-start;

    gap: 15px;

}


.contact-detail-icon {

    flex-shrink: 0;

    width: 45px;
    height: 45px;

    display: flex;

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

    border-radius: 50%;

    background: rgba(72, 216, 247, .12);

    color: #48d8f7;

}


.contact-detail span {

    display: block;

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

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;

    margin-bottom: 5px;

}


.contact-detail p {

    margin: 0;

    color: #ffffff;

    font-size: 12px;

    line-height: 1.7;

}


@media(max-width:991px) {

    .final-contact-box {

        grid-template-columns: 1fr;

    }

}


@media(max-width:767px) {

    .final-contact-section {

        padding: 70px 0;

    }

    .final-contact-box {

        padding: 35px 25px;

    }

    .final-contact-content h2 {

        font-size: 35px;

    }

    .final-contact-buttons {

        flex-direction: column;

    }

    .final-primary-btn,
    .final-whatsapp-btn {

        justify-content: center;

        width: 100%;

    }

}

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

.footer-cta-section {

    position: relative;

    padding: 20px 0 0;

    background: #ffffff;

    overflow: hidden;

}


.footer-cta-box {

    position: relative;

    overflow: hidden;

    padding: 60px 65px;

    background:
        linear-gradient(
            115deg,
            #f2f6f9 0%,
            #ffffff 65%
        );

    border: 1px solid #e1e7eb;

    border-radius: 5px;

    box-shadow:
        0 25px 70px rgba(15, 40, 60, .08);

            margin-bottom: 35px;

}


.footer-cta-box::before {

    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    right: -80px;
    top: -100px;

    border-radius: 50%;

    border: 1px solid rgba(11,60,111,.10);

}


.footer-cta-box::after {

    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: 80px;
    bottom: -80px;

    border-radius: 50%;

    border: 1px solid rgba(227,38,50,.10);

}


.footer-cta-water {

    position: absolute;

    width: 12px;
    height: 12px;

    right: 25%;
    top: 30px;

    border-radius: 50%;

    background: #e32632;

    box-shadow:
        0 0 0 10px rgba(227,38,50,.08);

    animation: footerFloat 4s ease-in-out infinite;

}


.footer-cta-label {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 16px;

    color: #0b3c6f;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

}


.footer-cta-label span {

    width: 35px;
    height: 2px;

    background: #e32632;

}


.footer-cta-box h2 {

    margin: 0 0 15px;

    color: #111820;

    font-size: clamp(34px, 4vw, 55px);

    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -1px;

}


.footer-cta-box h2 span {

    display: block;

    color: #0b3c6f;

}


.footer-cta-box p {

    max-width: 650px;

    margin: 0;

    color: #68747d;

    font-size: 14px;

    line-height: 1.8;

}


.footer-cta-buttons {

    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 12px;

}


.footer-primary-btn,
.footer-call-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-width: 185px;

    min-height: 52px;

    padding: 0 24px;

    border-radius: 50px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition: .4s ease;

}


.footer-primary-btn {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0b3c6f,
            #092b50
        );

    box-shadow:
        0 12px 30px rgba(11,60,111,.22);

}


.footer-primary-btn:hover {

    color: #ffffff;

    transform: translateY(-4px);

    box-shadow:
        0 18px 35px rgba(11,60,111,.30);

}


.footer-primary-btn i {

    transition: .3s;

}


.footer-primary-btn:hover i {

    transform: translate(4px,-4px);

}


.footer-call-btn {

    color: #17232c;

    background: #ffffff;

    border: 1px solid #dce3e8;

}


.footer-call-btn i {

    color: #e32632;

}


.footer-call-btn:hover {

    color: #0b3c6f;

    border-color: #0b3c6f;

    transform: translateY(-3px);

}


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

.main-footer {

    position: relative;

    margin-top: 0;

    padding: 85px 0 0;

    background: #081b2d;

    color: #ffffff;

    overflow: hidden;

}


.main-footer::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -250px;
    top: 100px;

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

    border-radius: 50%;

}


.main-footer::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -180px;
    bottom: -150px;

    border: 1px solid rgba(227,38,50,.08);

    border-radius: 50%;

}


.footer-water-line {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #e32632 0%,
            #e32632 18%,
            #0b3c6f 18%,
            #0b3c6f 100%
        );

}


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

.footer-main-row {

    position: relative;

    z-index: 2;

    padding-bottom: 65px;

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

}


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

.footer-logo-wrap {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 18px;

    margin-bottom: 22px;

    background: #ffffff;

    border-radius: 4px;

}


.footer-logo {

    width: 175px;

    max-height: 70px;

    object-fit: contain;

}


.footer-brand p {

    max-width: 340px;

    margin: 0 0 25px;

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

    font-size: 13px;

    line-height: 1.9;

}


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

.footer-social {

    display: flex;

    gap: 9px;

}


.footer-social a {

    width: 38px;
    height: 38px;

    display: flex;

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

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

    border-radius: 50%;

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

    font-size: 14px;

    text-decoration: none;

    transition: .35s;

}


.footer-social a:hover {

    color: #ffffff;

    background: #0b3c6f;

    border-color: #0b3c6f;

    transform: translateY(-4px);

}


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

.footer-column h4 {

    margin: 5px 0 12px;

    color: #ffffff;

    font-size: 15px;

    font-weight: 800;

}


.footer-heading-line {

    display: block;

    width: 32px;
    height: 2px;

    margin-bottom: 22px;

    background: #e32632;

}


.footer-column ul {

    margin: 0;
    padding: 0;

    list-style: none;

}


.footer-column ul li {

    margin-bottom: 11px;

}


.footer-column ul li a {

    position: relative;

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

    font-size: 12px;

    text-decoration: none;

    transition: .3s;

}


.footer-column ul li a::before {

    content: "";

    display: inline-block;

    width: 0;

    height: 1px;

    margin-right: 0;

    vertical-align: middle;

    background: #e32632;

    transition: .3s;

}


.footer-column ul li a:hover {

    color: #ffffff;

    padding-left: 6px;

}


.footer-column ul li a:hover::before {

    width: 12px;

    margin-right: 7px;

}


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

.footer-contact-item {

    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin-bottom: 20px;

}


.footer-contact-icon {

    flex-shrink: 0;

    width: 35px;
    height: 35px;

    display: flex;

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

    border-radius: 50%;

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

    color: #39d7ef;

    font-size: 13px;

}


.footer-contact-item span {

    display: block;

    margin-bottom: 3px;

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

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}


.footer-contact-item p {

    max-width: 220px;

    margin: 0;

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

    font-size: 11px;

    line-height: 1.6;

}


.footer-contact-item a {

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

    font-size: 12px;

    text-decoration: none;

    transition: .3s;

}


.footer-contact-item a:hover {

    color: #39d7ef;

}


/* =====================================================
   WATER BAR
===================================================== */

.footer-water-bar {

    position: relative;

    z-index: 2;

    display: grid;

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

    margin-top: 35px;

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

}


.footer-water-item {

    display: flex;

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

    gap: 10px;

    min-height: 60px;

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

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

    font-size: 10px;

    font-weight: 700;

    transition: .3s;

}


.footer-water-item:last-child {

    border-right: none;

}


.footer-water-item i {

    color: #39d7ef;

    font-size: 17px;

}


.footer-water-item:hover {

    color: #ffffff;

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

}


.footer-water-item:hover i {

    color: #e32632;

    transform: translateY(-3px);

}


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

.footer-bottom {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    min-height: 75px;

}


.footer-bottom p {

    margin: 0;

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

    font-size: 10px;

}


.footer-bottom strong {

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

}


.footer-bottom-links {

    display: flex;

    align-items: center;

    gap: 14px;

}


.footer-bottom-links a {

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

    font-size: 10px;

    text-decoration: none;

    transition: .3s;

}


.footer-bottom-links a:hover {

    color: #ffffff;

}


.footer-bottom-links span {

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #e32632;

}


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

@keyframes footerFloat {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-15px);

    }

}


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

@media (max-width: 991px) {

    .footer-cta-box {

        padding: 50px 40px;

    }

    .footer-cta-buttons {

        align-items: flex-start;

        margin-top: 30px;

    }

    .main-footer {

        padding-top: 15px;

    }

}


@media (max-width: 767px) {

    .footer-cta-section {

        padding-top: 70px;

    }

    .footer-cta-box {

        padding: 40px 25px;

    }

    .footer-cta-box h2 {

        font-size: 34px;

    }

    .footer-cta-box p {

        font-size: 13px;

    }

    .footer-cta-buttons {

        width: 100%;

    }

    .footer-primary-btn,
    .footer-call-btn {

        width: 100%;

    }

    .main-footer {

        padding-top: 55px;

    }

    .footer-main-row {

        padding-bottom: 40px;

    }

    .footer-water-bar {

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

    }

    .footer-water-item {

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

    }

    .footer-water-item:nth-child(2) {

        border-right: none;

    }

    .footer-water-item:nth-child(3),
    .footer-water-item:nth-child(4) {

        border-bottom: none;

    }

    .footer-water-item:nth-child(4) {

        border-right: none;

    }

    .footer-bottom {

        flex-direction: column;

        justify-content: center;

        text-align: center;

        padding: 20px 0;

    }

}


@media (max-width: 480px) {

    .footer-logo {

        width: 150px;

    }

    .footer-water-bar {

        grid-template-columns: 1fr;

    }

    .footer-water-item {

        border-right: none !important;

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

    }

    .footer-water-item:last-child {

        border-bottom: none;

    }

    .footer-bottom-links {

        flex-wrap: wrap;

        justify-content: center;

    }

}

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

.footer-bottom {
    position: relative;
    z-index: 5;
    padding: 22px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.copyright {
    width: 100%;
}

.copyright-text {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;

    margin: 0;

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

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

    text-align: center;
}


/* COMPANY NAME */

.company-name {
    color: rgba(255,255,255,0.75);

    font-weight: 700;

    text-decoration: none;

    transition: 0.3s ease;
}

.company-name:hover {
    color: #39d7ef;
}


/* DEVELOPER */

.developer-text {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-left: 8px;
}


/* TECHNEST LOGO */

.developer-text a {
    display: inline-flex;

    align-items: center;

    text-decoration: none;
}

.technest-logo {
       width: 25px;
    height: auto;
    max-height: 25px;

    object-fit: contain;

    opacity: 0.8;

    transition: 0.3s ease;
}

.technest-logo:hover {
    opacity: 1;
    transform: translateY(-2px);
}


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

@media (max-width: 767px) {

    .footer-bottom {
        padding: 20px 15px;
    }

    .copyright-text {
        flex-direction: column;

        gap: 3px;

        font-size: 10px;
    }

    .developer-text {
        margin-left: 0;

        margin-top: 5px;
    }

    .technest-logo {
        width: 25px;
    }

}