/*======================================================
    DIANA WATER
    PREMIUM WEBSITE
    STYLE.CSS
    PART 1 - FOUNDATION
======================================================*/

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

:root{

    --primary:#0D6EFD;
    --primary-light:#38C7F5;
    --secondary:#163A6B;

    --pink:#FF6B81;

    --white:#ffffff;

    --background:#F7FBFF;
    --background-alt:#EDF7FF;

    --text:#2E4057;
    --text-light:#6D7A8C;

    --border:#E8F0F8;

    --radius:28px;

    --shadow:
        0 20px 60px rgba(15,60,110,.08);

    --shadow-hover:
        0 30px 80px rgba(15,60,110,.15);

    --transition:.35s ease;

}

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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Libre Franklin",sans-serif;

    background:linear-gradient(
        180deg,
        #ffffff,
        #f8fcff,
        #edf8ff
    );

    color:var(--text);

    line-height:1.8;

    overflow-x:hidden;

}

/*==========================
TYPOGRAPHY
==========================*/

h1{

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

    font-size:clamp(42px,6vw,78px);

    line-height:1.05;

    font-weight:800;

    color:var(--secondary);

    letter-spacing:-2.5px;

}

h2{

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

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

    line-height:1.15;

    font-weight:800;

    color:var(--secondary);

}

h3{

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

    font-size:24px;

    font-weight:700;

    color:var(--secondary);

}

p{

    font-size:17px;

    color:var(--text-light);

}

/*==========================
SECTION HEADINGS
==========================*/

.section-heading{

    text-align:center;

    max-width:800px;

    margin:0 auto 60px;

}

.section-heading span{

    display:block;

    margin-bottom:12px;

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

}

.section-heading h2{

    margin-bottom:20px;

    line-height:1.2;

}

.section-heading p{

    max-width:700px;

    margin:0 auto;

    line-height:1.8;

}

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

.container{

    width:min(1380px,92%);

    margin:0 auto;

}

section{

    padding:120px 0;

}

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

img{

    display:block;

    max-width:100%;

}

.gallery img,
.product-image img,
.showcase img,
.main-bottle{

    border-radius:28px;

    user-select:none;

    -webkit-user-drag:none;

}

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

::selection{

    background:var(--primary);

    color:#fff;

}

/*==========================
PRELOADER
==========================*/

#preloader{

    position:fixed;

    inset:0;

    background:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:99999;

    transition:.6s;

}

#preloader img{

    width:170px;

}

.loader{

    margin-top:35px;

    width:240px;

    height:5px;

    background:#dbecff;

    border-radius:999px;

    overflow:hidden;

    position:relative;

}

.loader::before{

    content:"";

    position:absolute;

    left:-40%;

    width:40%;

    height:100%;

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

    animation:loading 2s linear infinite;

}

@keyframes loading{

    to{

        left:100%;

    }

}

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

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    transition:.4s;

}

header.active{

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

    backdrop-filter:blur(18px);

    box-shadow:0 10px 35px rgba(0,0,0,.05);

}

.nav-container{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo img{

    width:155px;

}

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

.nav-links{

    display:flex;

    list-style:none;

    gap:42px;

}

.nav-links a{

    position:relative;

    text-decoration:none;

    color:var(--secondary);

    font-weight:500;

    transition:.3s;

}

@media(max-width:768px){

    .nav-links{

        position:absolute;

        top:90px;

        left:0;

        width:100%;

        background:#ffffff;

        flex-direction:column;

        gap:0;

        display:none;

        padding:22px 0;

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

    }

    .nav-links.show{

        display:flex;

        animation:menuFade .35s ease;

    }

    .nav-links li{

        width:100%;

    }

    .nav-links a{

        display:block;

        padding:18px;

        text-align:center;

    }

    /* ADD THESE */

    .nav-links a::after{

        display:none;

    }

    .nav-links a:hover::after,

    .nav-links a.active::after{

        display:none;

    }

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.3s;

}

.nav-links a:hover::after,

.nav-links a.active::after{

    width:100%;

}

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

.nav-btn{

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

    padding:15px 34px;

    border-radius:999px;

    color:#fff;
    text-decoration:none;
    font-weight:600;

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

    box-shadow:0 20px 40px rgba(13,110,253,.25);

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

    will-change:transform;

    backface-visibility:hidden;

    transform:translateZ(0);

}

.nav-btn:hover{

    transform:translate3d(0,-4px,0);

    box-shadow:0 24px 48px rgba(13,110,253,.30);

}

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

.mobile-menu{

    display:none;

    width:52px;

    height:52px;

    border:none;

    border-radius:16px;

    background:#fff;

    color:var(--secondary);

    font-size:24px;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    box-shadow:0 10px 30px rgba(13,110,253,.12);

    transition:.3s;

}

.mobile-menu:hover{

    box-shadow:0 18px 40px rgba(13,110,253,.18);

}

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

.primary-btn,
.secondary-btn{

    width:220px;

    height:64px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border-radius:999px;

    font-size:17px;

    font-weight:600;

    text-decoration:none;

    transition:var(--transition);

}

.primary-btn{

    color:#fff;

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

    box-shadow:0 20px 45px rgba(13,110,253,.22);

}

.primary-btn:hover{

    transform:translateY(-5px);

    box-shadow:0 28px 60px rgba(13,110,253,.35);

}

.secondary-btn{

    background:#fff;

    color:#2F80ED;

    border:2px solid #2F80ED;

}

.secondary-btn i{

    color:#2F80ED;

}

.secondary-btn:hover{

    background:#2F80ED;

    color:#fff;

    transform:translateY(-5px);

}

.secondary-btn:hover i{

    color:#fff;

}

.primary-btn i,
.secondary-btn i{

    font-size:18px;

}
/*======================================================
    PART 2 - HERO SECTION
======================================================*/

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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding-top:90px;

    isolation:isolate;

}

.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.hero-content,
.hero-image{

    display:flex;

    flex-direction:column;

    justify-content:center;

    min-height:680px;

}

.hero-content{

    align-items:flex-start;

}

.hero-image{

    align-items:center;

}

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

.hero-bg{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:-2;

}

.circle{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.45;

}

.circle1{

    width:500px;

    height:500px;

    background:#DDF4FF;

    top:-180px;

    right:-250px;

}

.circle2{

    width:380px;

    height:380px;

    background:#EAF8FF;

    bottom:-150px;

    left:-120px;

}

.circle3{

    width:260px;

    height:260px;

    background:#F2FBFF;

    top:40%;

    left:48%;

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

}

/*==========================
WAVES
==========================*/

.wave{

    position:absolute;

    width:140%;

    height:180px;

    left:-20%;

    border-radius:50%;

    background:rgba(56,199,245,.08);

}

.wave1{

    bottom:-90px;

}

.wave2{

    bottom:-130px;

    opacity:.45;

}

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

.bubble{

    position:absolute;

    border-radius:50%;

    background:rgba(56,199,245,.18);

    backdrop-filter:blur(5px);

}

.bubble1{

    width:16px;

    height:16px;

    left:15%;

    top:20%;

}

.bubble2{

    width:24px;

    height:24px;

    right:18%;

    top:30%;

}

.bubble3{

    width:12px;

    height:12px;

    left:30%;

    bottom:20%;

}

.bubble4{

    width:20px;

    height:20px;

    right:32%;

    bottom:12%;

}

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

.hero-subtitle{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:fit-content;

    align-self:flex-start;

    padding:12px 22px;

    border-radius:999px;

    background:#EAF5FF;

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:28px;

}

.hero-content p{

    margin:24px 0;

    max-width:620px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    margin-top:20px;

    flex-wrap:wrap;

}

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

.hero-content p{

    margin:24px 0;

    max-width:620px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    margin-top:20px;

    flex-wrap:wrap;

}

/*==========================
GOOGLE REVIEWS
==========================*/
/*==========================
GOOGLE REVIEWS
==========================*/

.hero-reviews a{

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 26px;

    background:#ffffff;

    border-radius:22px;

    text-decoration:none;

    box-shadow:
        0 30px 70px rgba(15,23,42,.16);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

    min-width:360px;

}

.hero-reviews a:hover{

    transform:translateY(-8px);

    box-shadow:
        0 40px 90px rgba(15,23,42,.22);

}

.review-stars{

    display:flex;

    gap:4px;

    color:#FFC107;

    font-size:18px;

}

.review-content{

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;

}

.review-content strong{

    color:#163A6B;

    font-size:16px;

    font-weight:700;

}

.review-content strong i{

    color:#4285F4;

    margin-right:6px;

}

.review-content span{

    color:#6D7A8C;

    font-size:14px;

}

.review-stars{

    display:flex;

    gap:4px;

    color:#FFC107;

    font-size:18px;

}

.review-content{

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;

}

.review-content strong{

    color:#163A6B;

    font-size:16px;

    font-weight:700;

}

.review-content strong i{

    color:#4285F4;

    margin-right:6px;

    font-size:15px;

}

.review-content span{

    color:#6D7A8C;

    font-size:14px;

}

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

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:35px;

    margin-top:55px;

}

.hero-features div{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--secondary);

    font-weight:600;

}

.hero-features i{

    color:var(--primary);

    font-size:18px;

}

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

.hero-image{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    min-height:720px;

}

.hero-reviews{

    position:absolute;

    left:50%;

    bottom:95px;

    transform:translateX(-50%);

    display:flex;

    justify-content:center;

    width:100%;

    z-index:20;

}

.main-bottle{

    width:520px;

    max-width:100%;

    position:relative;

    z-index:5;

    opacity:0;

    transform:translateY(50px) scale(.96);

    animation:heroReveal 1.4s cubic-bezier(.22,1,.36,1) forwards;

}

.glow{

    position:absolute;

    width:340px;

    height:340px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(56,199,245,.10) 0%,

        rgba(56,199,245,.04) 45%,

        transparent 80%

    );

    filter:blur(45px);

    z-index:0;

}

.shadow{

    display:none;

}

/*==========================
ENTRANCE
==========================*/

@keyframes heroReveal{

    0%{

        opacity:0;

        transform:

            translateY(60px)

            scale(.94);

    }

    60%{

        opacity:1;

        transform:

            translateY(-8px)

            scale(1.02);

    }

    100%{

        opacity:1;

        transform:

            translateY(0)

            scale(1);

    }

}

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

.scroll-down{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    width:58px;

    height:58px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    text-decoration:none;

    color:var(--primary);

    background:#fff;

    box-shadow:var(--shadow);

    transition:.35s;

}

.scroll-down:hover{

    transform:translateX(-50%) translateY(6px);

}

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

@media(max-width:1200px){

    .hero-grid{

        grid-template-columns:1fr;
        text-align:center;

    }

    .hero-content{

        align-items:center;
        text-align:center;
        min-height:auto;

    }

    .hero-subtitle{

        align-self:center;

    }

    .hero-content p{

        margin-inline:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-features{

        justify-content:center;

    }

}

@media(max-width:768px){

    .hero{

        padding-top:120px;
        min-height:auto;

    }

    .hero-grid{

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
        gap:40px;

    }

    .hero-content{

        align-items:center;
        text-align:center;
        min-height:auto;

    }

    .hero-image{

        align-items:center;
        justify-content:center;
        min-height:auto;
        margin-top:0;

    }

    .main-bottle{

        width:290px;

    }

    .hero-buttons{

        flex-direction:column;
        align-items:center;
        width:100%;

    }

    .primary-btn,
    .secondary-btn{

        width:100%;
        max-width:320px;

    }

    .hero-features{

        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:18px;
        margin-top:40px;

    }

}
/*======================================================
    PART 3
    WHY DIANA • PRODUCTS • SHOWCASE
======================================================*/

/*==========================
WHY DIANA
==========================*/

.why-diana{

    position:relative;

    background:linear-gradient(
        180deg,
        #ffffff,
        #f9fcff
    );

}

.features-grid{

    display:grid;

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

    gap:38px;

}

.feature-card{

    position:relative;

    overflow:hidden;

    padding:45px 35px;

    text-align:center;

    border-radius:30px;

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

    backdrop-filter:blur(20px);

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

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.feature-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        180deg,

        rgba(56,199,245,.08),

        transparent

    );

    opacity:0;

    transition:.4s;

}

.feature-card:hover{

    transform:translateY(-15px);

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

}

.feature-card:hover::before{

    opacity:1;

}

.feature-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:30px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    color:#fff;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--primary-light)

    );

    box-shadow:

        0 18px 45px rgba(13,110,253,.22);

}

.feature-card h3{

    margin-bottom:18px;

}

.feature-card p{

    font-size:15px;

}

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

.products{

    position:relative;

    background:linear-gradient(

        180deg,

        #f8fcff,

        #ffffff

    );

}

.products-grid{

    display:grid;

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

    gap:42px;

}

.product-card{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    background:#fff;

    box-shadow:var(--shadow);

    transition:.45s;

}

.product-card:hover{

    transform:translateY(-15px);

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

}

.product-image{

    height:340px;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:35px;

    background:linear-gradient(

        180deg,

        #eef8ff,

        #ffffff

    );

}

.product-image img{

    max-height:280px;

    transition:.45s;

}

.product-card:hover img{

    transform:scale(1.08);

}

.product-content{

    padding:35px;

}

.product-content h3{

    margin-bottom:15px;

}

.product-content p{

    margin-bottom:28px;

}

.product-btn{

    width:100%;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:15px;

    border-radius:999px;

    text-decoration:none;

    color:#fff;

    font-weight:600;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--primary-light)

    );

    transition:.35s;

}

.product-btn:hover{

    letter-spacing:.5px;

}

.featured{

    transform:scale(1.04);

    border:2px solid rgba(13,110,253,.15);

}

.featured:hover{

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

}

.product-badge{

    position:absolute;

    top:40px;

    right:18px;

    padding:10px 20px;

    border-radius:999px;

    background:linear-gradient(

        135deg,

        var(--pink),

        #ff8fa2

    );

    color:#fff;

    font-size:13px;

    font-weight:700;

    box-shadow:

        0 12px 30px rgba(255,107,129,.30);

    z-index:50;

}

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

.showcase{

    position:relative;

    background:#fff;

}

.showcase-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:120px;

    align-items:center;

}

.showcase-image{

    position:relative;

    display:flex;

    justify-content:center;

}

.showcase-image::before{
    display:none;
}

.showcase-image img{

    position:relative;

    width:430px;

    z-index:5;

}

.showcase-content span{

    display:block;

    margin-bottom:18px;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    color:var(--primary);

}

.showcase-content h2{

    margin-bottom:28px;

    line-height:1.2;

}

.showcase-content p{

    margin-bottom:35px;

}

.showcase-list{

    list-style:none;

}

.showcase-list li{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

    font-weight:600;

    color:var(--secondary);

}

.showcase-list i{

    width:34px;

    height:34px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--primary-light)

    );

}

/*==========================
SECTION DECORATION
==========================*/

.why-diana::after,
.products::after,
.showcase::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:rgba(56,199,245,.05);

    filter:blur(90px);

    pointer-events:none;

}

.why-diana::after{

    top:60px;

    right:-120px;

}

.products::after{

    bottom:60px;

    left:-120px;

}

.showcase::after{

    top:120px;

    right:-140px;

}

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

@media(max-width:1200px){

    .features-grid,
    .products-grid{

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

    }

    .showcase-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .showcase-image{

        order:1;

    }

    .showcase-content{

        order:2;

    }

    .showcase-list{

        display:inline-block;

        text-align:left;

    }

}

@media(max-width:768px){

    .features-grid,
    .products-grid{

        grid-template-columns:1fr;

    }

    .featured{

        transform:none;

    }

    .featured:hover{

        transform:translateY(-12px);

    }

    .product-image{

        height:280px;

    }

    .product-image img{

        max-height:220px;

    }

    .showcase-image img{

        width:290px;

    }

}
/*======================================================
    PART 4
    PROCESS • GALLERY • STATS • INDUSTRIES
======================================================*/

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

.process{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #f8fcff,
        #ffffff
    );

}

.timeline{

    display:grid;

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

    gap:35px;

    margin-top:70px;

}

.timeline-item{

    text-align:center;

    padding:20px;

    transition:.35s;

}

.timeline-item:hover{

    transform:translateY(-8px);

}

.timeline-icon{

    width:95px;

    height:95px;

    margin:auto;

    margin-bottom:28px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    color:#fff;

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

    box-shadow:
        0 18px 45px rgba(13,110,253,.22);

}

.timeline-item h3{

    margin-bottom:15px;

}

.timeline-item p{

    max-width:220px;

    margin:auto;

    font-size:15px;

}

/*==========================
FACILITY
==========================*/

.facility{

    position:relative;

    background:#fff;

}

.gallery{

    display:grid;

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

    grid-auto-rows:280px;

    gap:24px;

}

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    box-shadow:var(--shadow);

}

.gallery-item.large{

    grid-column:span 2;

    grid-row:span 2;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.55s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

.gallery-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        transparent,

        rgba(0,0,0,.22)

    );

    opacity:0;

    transition:.35s;

}

.gallery-item:hover::after{

    opacity:1;

}

/*==========================
STATISTICS
==========================*/

.stats{

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--primary-light)

    );

    color:#fff;

}

.stats-grid{

    display:grid;

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

    gap:40px;

}

.stat-card{

    text-align:center;

    padding:50px 25px;

    border-radius:30px;

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

    backdrop-filter:blur(20px);

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-10px);

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

}

.stat-card h2{

    color:#fff;

    font-size:60px;

    margin-bottom:10px;

}

.stat-card span{

    color:#fff;

    font-size:17px;

}

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

.industries{

    position:relative;

    background:linear-gradient(

        180deg,

        #ffffff,

        #f7fbff

    );

}

.industry-grid{

    display:grid;

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

    gap:30px;

}

.industry-card{

    text-align:center;

    padding:45px 28px;

    border-radius:30px;

    background:#fff;

    box-shadow:var(--shadow);

    transition:.35s;

}

.industry-card:hover{

    transform:translateY(-12px);

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

}

.industry-card i{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:28px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    color:#fff;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--primary-light)

    );

    box-shadow:
        0 18px 45px rgba(13,110,253,.22);

}

.industry-card h3{

    margin-bottom:15px;

}

/*==========================
DECORATIVE BLOBS
==========================*/

.process::before,
.facility::before,
.industries::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(56,199,245,.06);

    filter:blur(100px);

    pointer-events:none;

}

.process::before{

    top:-120px;

    left:-120px;

}

.facility::before{

    bottom:-120px;

    right:-120px;

}

.industries::before{

    top:100px;

    left:-120px;

}

/*==========================
FLOATING ICONS
==========================*/

@keyframes floatIcon{

    0%,
    100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

.timeline-icon,
.industry-card i{

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

}

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

@media(max-width:1200px){

    .timeline{

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

    }

    .stats-grid{

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

    }

    .industry-grid{

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

    }

    .gallery{

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

    }

}

@media(max-width:768px){

    .timeline,
    .stats-grid,
    .industry-grid{

        grid-template-columns:1fr;

    }

    .gallery{

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

    }

    .gallery-item.large{

        grid-column:auto;

        grid-row:auto;

    }

}

@media(max-width:520px){

    .gallery{

        grid-template-columns:1fr;

    }

}
/*======================================================
    PART 5
    CTA • CONTACT • MAP • FOOTER
======================================================*/


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

.cta{

    position:relative;

    overflow:hidden;

    padding:140px 0;

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

}

.cta::before{

    content:"";

    position:absolute;

    inset:0;

    background:radial-gradient(
        circle at top right,
        rgba(255,255,255,.18),
        transparent 45%
    );

}

.cta-content{

    position:relative;

    text-align:center;

    color:#fff;

}

.cta-content span{

    display:block;

    margin-bottom:18px;

    letter-spacing:2px;

    font-size:14px;

    font-weight:700;

}

.cta-content h2{

    color:#fff;

    font-size:clamp(36px,5vw,54px);

    margin-bottom:30px;

}

.cta-content p{

    width:min(760px,95%);

    margin:auto;

    margin-bottom:45px;

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

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:22px;

    flex-wrap:wrap;

}


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

.contact-section{

    background:#fff;

}

.contact-grid{

    display:grid;

    grid-template-columns:1fr 1.15fr;

    gap:60px;

    align-items:start;

}


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

.contact-card{

    display:flex;

    gap:22px;

    align-items:flex-start;

    padding:28px;

    margin-bottom:25px;

    text-decoration:none;

    color:inherit;

    background:#fff;

    border-radius:28px;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.contact-card:hover{

    transform:translateY(-8px);

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

}

.contact-card i{

    width:65px;

    height:65px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    font-size:24px;

    color:#fff;

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

}

.contact-card h3{

    margin-bottom:8px;

}

.contact-card p{

    margin:0;

}


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

.contact-form{

    background:#fff;

    padding:45px;

    border-radius:30px;

    box-shadow:var(--shadow);

}

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

    width:100%;

    padding:18px 22px;

    margin-bottom:20px;

    border:none;

    border-radius:16px;

    background:#F5F9FD;

    font-family:inherit;

    font-size:16px;

    transition:.3s;

}

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

    outline:none;

    background:#fff;

    box-shadow:
        0 0 0 2px rgba(13,110,253,.15);

}

.contact-form textarea{

    min-height:180px;

    resize:vertical;

}

.contact-form button{

    border:none;

    cursor:pointer;

}


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

.map{

    line-height:0;

}

.map iframe{

    width:100%;

    height:560px;

    border:none;

    border-radius:32px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.map iframe:hover{

    transform:translateY(-5px);

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

}


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

footer{

    background:#163A6B;

    color:#fff;

    padding:90px 0 35px;

}

.footer-grid{

    display:grid;

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

    gap:45px;

}

.footer-about img{

    width:185px;

    margin-bottom:25px;

}

.footer-about p{

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

}

footer h3{

    color:#fff;

    margin-bottom:25px;

    font-size:22px;

}

footer ul{

    list-style:none;

}

footer li{

    margin-bottom:14px;

}

footer a{

    display:inline-block;

    text-decoration:none;

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

    transition:.3s;

}

footer a:hover{

    color:#fff;

    transform:translateX(6px);

}

.social-icons{

    display:flex;

    gap:15px;

}

.social-icons a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

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

}

.social-icons a:hover{

    background:var(--primary-light);

}

.footer-bottom{

    margin-top:70px;

    padding-top:30px;

    text-align:center;

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

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

}

.footer-about{

    display:flex;

    flex-direction:column;

}

/*==========================
FLOATING BUTTONS
==========================*/

.floating-whatsapp{

    position:fixed;

    right:25px;

    bottom:25px;

    width:68px;

    height:68px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    background:#25D366;

    color:#fff;

    font-size:32px;

    z-index:999;

    box-shadow:0 20px 45px rgba(0,0,0,.22);

}

.floating-whatsapp{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        filter .35s ease;

}

.floating-whatsapp:hover{

    transform:
        translateY(-8px)
        scale(1.08);

    box-shadow:
        0 28px 70px rgba(37,211,102,.40);

    filter:brightness(1.08);

}

#backToTop{

    position:fixed;

    left:25px;

    bottom:25px;

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    color:#fff;

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

    box-shadow:var(--shadow);

    transition:.35s;

}

#backToTop:hover{

    transform:translateY(-6px);

}


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

@media(max-width:1200px){

    .contact-grid{

        grid-template-columns:1fr;

    }

    .footer-grid{

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

    }

}

@media(max-width:768px){

    .cta-buttons{

        flex-direction:column;

        align-items:center;

    }

    .contact-form{

        padding:30px;

    }

    .contact-card{

        padding:22px;

    }

    .contact-card i{

        width:56px;

        height:56px;

        font-size:20px;

    }

    .map iframe{

        height:380px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .social-icons{

        justify-content:center;

    }

}
/*======================================================
    PART 6
    FINAL RESPONSIVE + ANIMATIONS + UTILITIES
======================================================*/


/*==========================
SCROLL REVEAL
==========================*/

.fade-up{

    opacity:0;

    transform:translateY(60px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}


/*==========================
RIPPLE EFFECT
==========================*/

.primary-btn,
.product-btn,
.nav-btn{

    position:relative;

    overflow:hidden;

}

.ripple{

    position:absolute;

    width:18px;

    height:18px;

    border-radius:50%;

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

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

    animation:ripple .6s ease-out;

}

@keyframes ripple{

    to{

        transform:

            translate(-50%,-50%)

            scale(28);

        opacity:0;

    }

}


/*==========================
SCROLL PROGRESS BAR
==========================*/

.progress-bar{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:linear-gradient(

        90deg,

        var(--primary),

        var(--primary-light)

    );

    z-index:99999;

}


/*==========================
SMOOTH IMAGE HOVER
==========================*/

.gallery img,
.product-image img,
.main-bottle,
.showcase img{

    transition:

        transform .45s ease,

        opacity .35s ease;

}


/*==========================
INPUT PLACEHOLDER
==========================*/

::placeholder{

    color:#93A3B5;

}


/*==========================
FOCUS STATE
==========================*/

a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus{

    outline:none;

}


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

@media(max-width:768px){

    .nav-links{

        position:absolute;

        top:90px;

        left:0;

        width:100%;

        background:#ffffff;

        flex-direction:column;

        gap:0;

        display:none;

        padding:22px 0;

        box-shadow:

            0 18px 45px rgba(0,0,0,.08);

    }

    .nav-links.show{

        display:flex;

        animation:menuFade .35s ease;

    }

    .nav-links li{

        width:100%;

    }

    .nav-links a{

        display:block;

        padding:18px;

        text-align:center;

    }

}

@keyframes menuFade{

    from{

        opacity:0;

        transform:translateY(-15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==========================
LARGE TABLETS
==========================*/

@media(max-width:1024px){

    h1{

        font-size:56px;

    }

    h2{

        font-size:42px;

    }

}


/*==========================
TABLETS
==========================*/

@media(max-width:768px){

    body{

        overflow-x:hidden;

    }

    section{

        padding:90px 0;

    }

    .container{

        width:92%;

    }

    .logo img{

        width:135px;

    }

    .hero{

        text-align:center;

    }

    .hero-content p{

        margin-inline:auto;

    }

    .hero-image{

        margin-top:25px;

    }

    .main-bottle{

        width:290px;

    }

    .product-image{

        height:280px;

    }

    .product-image img{

        max-height:220px;

    }

    .gallery{

        gap:18px;

    }

    .cta-content h2{

        font-size:34px;

    }

    .cta-content p{

        width:100%;

    }

}


/*==========================
SMALL PHONES
==========================*/

@media (max-width:768px){

    .hero h1{

        font-size:48px;
        line-height:1.08;
        letter-spacing:-1.8px;

    }

}

@media(max-width:480px){

    h1{

        font-size:38px;

        line-height:1.15;

    }

    h2{

        font-size:30px;

    }

    h3{

        font-size:22px;

    }

    p{

        font-size:16px;

    }

    .hero-buttons{

        width:100%;

    }

    .primary-btn,
    .secondary-btn{

        width:100%;

        max-width:none;

    }

    .hero-features{

        gap:16px;

    }

    .feature-card,
    .product-card,
    .industry-card{

        border-radius:24px;

    }

    .contact-form{

        padding:24px;

    }

    .contact-card{

        padding:20px;

    }

    .contact-card i{

        width:52px;

        height:52px;

        font-size:18px;

    }

    .map iframe{

        height:320px;

        border-radius:24px;

    }

    footer{

        text-align:center;

    }

    .footer-grid{

        gap:35px;

    }

}


/*==========================
ULTRA SMALL
==========================*/

@media(max-width:360px){

    .nav-container{

        height:80px;

    }

    .main-bottle{

        width:240px;

    }

}


/*==========================
ACCESSIBILITY
==========================*/

html:focus-within{

    scroll-behavior:smooth;

}


/*==========================
PERFORMANCE
==========================*/

img{

    display:block;

    max-width:100%;

    height:auto;

}

button{

    font-family:inherit;

}

a{

    -webkit-tap-highlight-color:transparent;

}


/*==========================
FINAL UTILITIES
==========================*/

.hidden{

    display:none !important;

}

.text-center{

    text-align:center;

}

.w-100{

    width:100%;

}

.mt-1{

    margin-top:10px;

}

.mt-2{

    margin-top:20px;

}

.mt-3{

    margin-top:30px;

}

.mb-1{

    margin-bottom:10px;

}

.mb-2{

    margin-bottom:20px;

}

.mb-3{

    margin-bottom:30px;

}

@media (max-width:768px){

    .section-heading{

        margin-bottom:40px;

        padding:0 20px;

    }

    .section-heading h2{

        font-size:38px;

        line-height:1.2;

        margin-bottom:16px;

    }

    .section-heading p{

        font-size:16px;

        line-height:1.7;

    }

}

@media (max-width:768px){

    .footer-about{

        align-items:center;

        text-align:center;

    }

    .footer-about img{

        margin:0 auto 25px;

        display:block;

    }

}

html,
body{

    width:100%;

    overflow-x:hidden;

}

section{

    overflow:hidden;

}

@media (max-width:768px){

    .mobile-menu{

        display:flex !important;

    }

    .nav-btn{

        display:none;

    }

}

@media (max-width:768px){

    .hero-content{
        align-items: center;
        text-align: center;
    }

    .hero-subtitle{
        align-self: center;
    }

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

}

@media (max-width:768px){

    .hero-grid{
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .hero-content,
    .hero-image{
        min-height: auto;
    }

}

@media (max-width:768px){

    .hero-image{
        position:relative;
        margin-top:0;
        padding-bottom:120px;
    }

    .hero-reviews{
        position:absolute;
        left:50%;
        bottom:0;
        transform:translateX(-50%);
        width:100%;
        display:flex;
        justify-content:center;
        z-index:20;
    }

    .hero-reviews a{
        min-width:380px;
        max-width:380px;
    }

}

@media (max-width:768px){

    section[id]{

        scroll-margin-top:60px;

    }

}

@media (max-width:768px){

    /* HERO */

    .main-bottle{
        width:360px !important;
    }

    /* DIANA DIFFERENCE */

    .showcase-grid{
        display:flex;
        flex-direction:column;
        gap:20px;
    }

    .showcase-image{
        order:1;
        min-height:auto;
        margin-bottom:0;
    }

    .showcase-image img{
        width:340px;
    }

    .showcase-content{
        order:2;
        margin-top:0;
        text-align:center;
    }

}

/* FINAL FIX */

@media (max-width:768px){

    .main-bottle{
        width:360px !important;
        max-width:none !important;
    }

}

@media (max-width:768px){

    .showcase-grid{
        display:flex !important;
        flex-direction:column !important;
        gap:20px !important;
    }

    .showcase-image{
        margin:0 !important;
        min-height:auto !important;
    }

    .showcase-image img{
        width:360px !important;
        max-width:95% !important;
    }

}


/*======================================================
    END OF STYLE.CSS
======================================================*/