/* =========================================================
   N-FLUX WATER SOLUTIONS
   GLOBAL DESIGN SYSTEM
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;500;600;700;800&family=Outfit:wght@500;600;700;800&family=Poppins:wght@400;500;600;700&display=swap');


/* =========================================================
   01. ROOT VARIABLES
========================================================= */

:root {

    /* Brand */
    /*--primary: #0b3b82;*/
    --primary: #1c6ce3;
    --primary-dark: #062b61;
    --primary-light: #eaf3ff;

    --accent: #35a853;
    --accent-dark: #24843f;
    --accent-light: #edf9ef;

    --water: #168de2;

    /* Background */
    --bg: #f7faff;
    --surface: #ffffff;
    --surface-soft: #f1f6fc;

    /* Text */
    --text: #122033;
    --text-soft: #34445a;
    --text-muted: #64748b;

    /* Border */
    --border: #e2e8f0;
    --border-strong: #cbd5e1;

    /* Status */
    --success: #22a447;
    --danger: #dc3545;
    --warning: #f59e0b;
   --warning-light: rgba(245, 158, 11, 0.10);
   
   
    /* =========================================================
       SECONDARY COLORS
    ========================================================= */
    
    --secondary: #0F766E;
    
    --secondary-hover: #0D5F59;
    
    --secondary-light: rgba(15, 118, 110, 0.10);
    
    --secondary-soft: rgba(15, 118, 110, 0.06);

   
   /* =========================================================
       TYPOGRAPHY
    ========================================================= */
    
   /* Paragraph / Body */
    --font-body:
        "Poppins",
        "Noto Sans Devanagari",
        sans-serif;
    
    
    /* Headings */
    --font-heading:
        "Outfit",
        "Noto Sans Devanagari",
        sans-serif;
    
    
   /* Body sizes */
    --fs-xs: .8rem;
    --fs-sm: .9rem;
    --fs-base: 1rem;
    --fs-md: 1.1rem;
    --fs-lg: 1.3rem;
    
    
    /* Heading sizes */
    --fs-xl: 1.65rem;
    --fs-2xl: 2.15rem;
    --fs-3xl: 2.8rem;
    --fs-4xl: 3.8rem;
    
    
    /* Line heights */
    --body-line-height: 1.75;
    --heading-line-height: 1.1;
    
    
    /* Weights */
    --weight-body: 400;
    --weight-body-medium: 500;
    --weight-body-bold: 600;
    
    --weight-heading: 600;
    --weight-heading-bold: 700;
    --weight-heading-heavy: 800;

    /* Radius */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 30px;
    --radius-pill: 999px;

    /* Shadow */
    --shadow-sm:
        0 4px 15px rgba(11, 59, 130, .06);

    --shadow-md:
        0 10px 30px rgba(11, 59, 130, .10);

    --shadow-lg:
        0 20px 60px rgba(11, 59, 130, .15);

    /* Container */
    --container: 1240px;

    /* Spacing */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* Animation */
    --transition-fast: .2s ease;
    --transition: .35s ease;
    --transition-slow: .6s ease;


    --section-space-sm: 48px;
    --section-space: 72px;
    --section-space-lg: 96px;
    --section-space-xl: 120px;
    
      /* Label */
    --fs-label: 0.875rem;       /* 14px */

    /* Input / Select / Textarea */
    --fs-input: 0.95rem;        /* 15.2px */

    /* Placeholder */
    --fs-placeholder: 0.9rem;   /* 14.4px */

    /* Help / Error text */
    --fs-help: 0.78rem;         /* 12.5px */

  /* Normal list text */
    --fs-li: 0.95rem;          /* 15.2px */

    /* Small list / footer list */
    --fs-li-sm: 0.875rem;      /* 14px */

    /* List line height */
    --li-line-height: 1.7;

   
    --fs-li-link: 0.95rem;      /* 15.2px */
    --fs-li-link-sm: 0.875rem;  /* 14px */


}

li {

    font-family:
        var(--font-body);

    font-size:
        var(--fs-li) !important;

    font-weight:
        var(--weight-body) !important;

    line-height:
        var(--li-line-height) !important;

    color:
        var(--text-muted);

}






li a {

    font-family:
        var(--font-body);

    font-size:
        var(--fs-li-link) !important;

    font-weight:
        var(--weight-body-medium) !important;

    line-height:
        1.6 !important;

    color:
        var(--text-muted);

    text-decoration:
        none;

    transition:
        color var(--transition),
        transform var(--transition);

}
@media (max-width: 767px) {
    .footer-contact-item {
         font-size:
        var(--fs-li-link) !important;

    }
}

label,
.form-label {

    display: block;

    margin-bottom: 7px;

    font-family:
        var(--font-body);

    font-size:
        var(--fs-label) !important;

    font-weight:
        var(--weight-body-semibold) !important;

    line-height:
        1.4 !important;

    color:
        var(--text);

}

.form-control,
.form-select,
input,
select,
textarea {

    font-family:
        var(--font-body);

    font-size:
        var(--fs-input) !important;

    font-weight:
        var(--weight-body) !important;

    line-height:
        1.5 !important;

    color:
        var(--text);

    background:
        var(--surface);

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

    border-radius:
        var(--radius-md) !important;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);

}

.form-control,
.form-select,
input,
select {

    min-height:
        48px  !important;

    padding:
        11px 14px  !important;

}

textarea {

    min-height:
        120px  !important;

    padding:
        12px 14px  !important;

    resize:
        vertical;

}
.form-control::placeholder,
input::placeholder,
textarea::placeholder {

    font-family:
        var(--font-body);

    font-size:
        var(--fs-placeholder) !important;

    font-weight:
        var(--weight-body) !important;

    color:
        var(--text-muted) !important;

    opacity:
        .7;

}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {

    color:
        var(--text);

    background:
        var(--surface);

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px
        var(--primary-light);

    outline:
        none;

}

.form-help,
.form-error {

    display: block;

    margin-top: 5px;

    font-family:
        var(--font-body);

    font-size:
        var(--fs-help);

    line-height:
        1.5;

}

@media (max-width: 767px) {

    :root {

        --fs-label: 0.82rem;       /* 13.1px */

        --fs-input: 0.92rem;       /* 14.7px */

        --fs-placeholder: 0.86rem; /* 13.8px */

        --fs-help: 0.75rem;        /* 12px */

    }


    .form-control,
    .form-select,
    input,
    select {

        min-height:
            48px;

        padding:
            10px 13px;

    }


    textarea {

        min-height:
            110px;

    }

}

@media (max-width: 767px) {

    :root {

        --fs-xs: .75rem;       /* 12px */

        --fs-sm: .85rem;       /* 13.6px */

        --fs-base: .95rem;     /* 15.2px */

        --fs-md: 1.02rem;      /* 16.3px */

        --fs-lg: 1.18rem;      /* 18.9px */

        --fs-xl: 1.45rem;      /* 23.2px */

        --fs-2xl: 1.8rem;      /* 28.8px */

        --fs-3xl: 2.2rem;      /* 35.2px */

        --fs-4xl: 2.7rem;      /* 43.2px */

    }

}

@media (max-width: 767px) {

    :root {

        --section-space-sm: 34px;
        --section-space: 52px;
        --section-space-lg: 68px;
        --section-space-xl: 82px;

    }

}


/* =========================================================
   02. DARK MODE
========================================================= */

[data-theme="dark"] {

    --bg: #07111f;

    --surface: #0d1b2d;

    --surface-soft: #102238;

    --text: #f8fafc;

    --text-soft: #d5deea;

    --text-muted: #9fb0c5;

    --border: rgba(255,255,255,.10);

    --border-strong: rgba(255,255,255,.18);

    --primary-light: rgba(22,141,226,.12);

    --accent-light: rgba(53,168,83,.12);

    --shadow-sm:
        0 4px 20px rgba(0,0,0,.20);

    --shadow-md:
        0 12px 35px rgba(0,0,0,.25);

    --shadow-lg:
        0 25px 70px rgba(0,0,0,.35);
}


/* =========================================================
   03. RESET
========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {

    font-family: var(--font-body);

    background: var(--bg);

       color: var(--text);

      font-size: var(--fs-base) !important;

    line-height: var(--body-line-height) !important;

    overflow-x: hidden;

    transition:
        background var(--transition),
        color var(--transition);
}


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


button,
input,
textarea,
select {
    font: inherit;
}


button {
    cursor: pointer;
}


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

p {
    font-family: var(--font-body);
    font-size: var(--fs-base) !important;
    font-weight: var(--weight-body);
    line-height: var(--body-line-height);
    color: var(--text-muted);
}

h1,
h2,
h3,
h4,
h5,
h6 {

    margin-top: 0;

    font-family: var(--font-heading);

    font-weight: var(--weight-heading-bold);

    line-height: var(--heading-line-height);

    letter-spacing: var(--heading-letter-spacing);

    color: var(--text);

}

h1 {
    font-size: var(--fs-4xl) !important;
}

h2 {
    font-size: var(--fs-3xl) !important;
}

h3 {
    font-size: var(--fs-2xl) !important;
}

h4 {
    font-size: var(--fs-xl) !important;
}

h5 {
    font-size: var(--fs-lg) !important;
}

h6 {
    font-size: var(--fs-md) !important;
}


/* =========================================================
   04. CONTAINER
========================================================= */

.container {

    width: min(
        calc(100% - 32px),
        var(--container)
    );

    margin-inline: auto;
}


/* =========================================================
   05. SECTION
========================================================= */

.section {

    position: relative;

    padding: var(--space-20) 0;

}


.section--soft {
    background: var(--surface-soft);
}


.section--primary {

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--primary)
        );

    color: #fff;
}


.section--green {

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

    color: #fff;
}


/* =========================================================
   06. SECTION HEADER
========================================================= */

.section-heading {

    font-family: var(--font-heading);

    font-size:
        clamp(
            2rem,
            4vw,
            var(--fs-3xl)
        );

    font-weight:
        var(--weight-heading-heavy);

    line-height:
        1.08;

    letter-spacing:
        var(--heading-letter-spacing);

    color:
        var(--text);

}


.section-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 12px;

    padding: 7px 14px;

    border-radius: var(--radius-pill);

    background: var(--primary-light);

    color: var(--primary);

    font-size: var(--fs-sm);

    font-weight: 700;

    letter-spacing: .03em;
}


.section-title {

    font-size: clamp(
        2rem,
        4vw,
        var(--fs-3xl)
    );

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -.035em;

    margin-bottom: 15px;
}


.section-description {

   
    font-family: var(--font-body);

    font-size: var(--fs-md);

    font-weight: var(--weight-body-medium);

    line-height: 1.75;

    color: var(--text-muted);
}


/* =========================================================
   07. BUTTON SYSTEM
========================================================= */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 48px;

    padding: 12px 20px;

    border: 1px solid transparent;

    border-radius: var(--radius-pill);

    font-size: .9rem;

    font-weight: 700;

    line-height: 1;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition),
        background var(--transition),
        border-color var(--transition);

}


.btn:hover {

    transform: translateY(-2px);

}


.btn:active {

    transform: translateY(0);

}


/* Primary */

.btn-primary {

    background: var(--primary);

    color: #fff;

    box-shadow:
        0 8px 20px rgba(11,59,130,.20);
}


.btn-primary:hover {

    background: var(--primary-dark);

    box-shadow:
        0 12px 28px rgba(11,59,130,.28);
}


/* Green */

.btn-accent {

    background: var(--accent);

    color: #fff;

    box-shadow:
        0 8px 20px rgba(53,168,83,.20);
}


.btn-accent:hover {

    background: var(--accent-dark);
}


/* Outline */

.btn-outline {

    background: transparent;

    color: var(--primary);

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


.btn-outline:hover {

    background: var(--primary);

    color: #fff;
}


/* White */

.btn-white {

    background: #fff;

    color: var(--primary);
}


/* =========================================================
   08. CARD SYSTEM
========================================================= */

.card {

    background: var(--surface);

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

    border-radius: var(--radius-lg);

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

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);

}


.card:hover {

    transform: translateY(-5px);

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

    border-color:
        rgba(11,59,130,.18);
}


/* =========================================================
   09. ICON BOX
========================================================= */

.icon-box {

    width: 52px;

    height: 52px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 16px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 1.35rem;
}


.icon-box--green {

    background: var(--accent-light);

    color: var(--accent);
}


/* =========================================================
   10. REVEAL ANIMATION
========================================================= */

.reveal {

    opacity: 0;

    transform: translateY(25px);

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


.reveal.is-visible {

    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   11. ACCESSIBILITY
========================================================= */

:focus-visible {

    outline: 3px solid
        rgba(22,141,226,.35);

    outline-offset: 3px;
}


/* =========================================================
   12. MOBILE
========================================================= */

@media (max-width: 767px) {

    :root {

        --space-20: 3.5rem;

        --space-16: 3rem;

    }


    body {

        padding-bottom: 72px;

    }


    .container {

        width:
            min(
                calc(100% - 24px),
                var(--container)
            );

    }


    .section {

        padding:
            var(--space-16) 0;

    }


    .section-heading {

        margin-bottom: 30px;

    }


    .section-description {

        font-size: .92rem;

    }


    .btn {

        min-height: 46px;

        padding:
            11px 17px;

    }

}