/* =====================================================
MAIA GROUP OF INDUSTRIES
FINAL PREMIUM WATER THEME
STYLE.CSS PART 1
===================================================== */


:root{

    --primary:#006994;
    --secondary:#00b8d4;
    --aqua:#e8faff;
    --dark:#063247;
    --text:#526873;
    --gold:#c89b3c;
    --white:#ffffff;

}



*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}



body{

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

    background:#ffffff;

    color:var(--text);

    overflow-x:hidden;

}



h1,h2,h3,h4,h5{

    font-family:'Sora',sans-serif;

    color:var(--dark);

    font-weight:800;

}



p{

    color:var(--text);

    line-height:1.8;

}




/* =================================
BACKGROUND WATER EFFECT
================================= */


.bg-gradient{


position:fixed;

inset:0;

z-index:-10;


background:


radial-gradient(
circle at 80% 10%,
rgba(0,184,212,.18),
transparent 35%
),


linear-gradient(
180deg,
#ffffff,
#eefaff
);


}




.noise-layer{

display:none;

}



.water-light{


position:fixed;


width:450px;


height:450px;


border-radius:50%;


background:

radial-gradient(

circle,

rgba(0,184,212,.22),

transparent 70%

);


filter:blur(40px);


z-index:-5;


}





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


.luxury-navbar{


background:

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


backdrop-filter:blur(15px);


box-shadow:

0 5px 25px rgba(0,80,120,.10);


padding:18px 0;


}



.logo-title{


font-size:42px;


font-weight:900;


letter-spacing:5px;


color:var(--primary);


}



.logo-subtitle{


font-size:11px;


letter-spacing:4px;


color:#607b86;


font-weight:700;


}





.nav-link{


color:var(--dark)!important;


font-weight:700;


margin:0 12px;


}



.nav-link:hover{


color:var(--primary)!important;


}





.btn-gold{


background:

linear-gradient(
135deg,
#d8ad52,
#b88625
);


color:white!important;


border:none;


padding:

14px 32px;


border-radius:50px;


font-weight:800;


}





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


.hero{


min-height:100vh;


display:flex;


align-items:center;


position:relative;


overflow:hidden;


background:


linear-gradient(
120deg,
#ffffff,
#eafaff
);


padding-top:90px;


}





.hero:after{


content:"";


position:absolute;


bottom:-80px;


left:-5%;


width:110%;


height:160px;


background:white;


border-radius:

50% 50% 0 0;


}





.hero-content{


position:relative;


z-index:3;


}





.hero-badge{


display:inline-block;


background:#dff6fb;


color:var(--primary);


padding:

12px 25px;


border-radius:50px;


font-size:13px;


font-weight:800;


letter-spacing:1px;


}





.hero-title{


font-size:

clamp(42px,5vw,75px);


line-height:1.05;


margin-top:25px;


}



.hero-title span{


display:block;


color:var(--primary);


}




.hero-subtitle{


font-size:30px;


margin-top:25px;


color:var(--dark);


}



.hero-subtitle strong{


color:var(--gold);


}





.hero-text{


font-size:18px;


max-width:600px;


margin-top:25px;


}





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


.hero-buttons{


display:flex;


gap:15px;


margin-top:35px;


}



.btn-primary-custom{


display:inline-flex;


align-items:center;


justify-content:center;


background:

linear-gradient(
135deg,
#0077b6,
#00b8d4
);


color:white!important;


padding:

16px 38px;


border-radius:50px;


font-weight:800;


border:none;


text-decoration:none;


box-shadow:

0 15px 35px rgba(0,119,182,.25);


transition:.3s;


}



.btn-primary-custom:hover{


transform:translateY(-5px);


color:white!important;


}




.btn-outline-custom{


display:inline-flex;


align-items:center;


justify-content:center;


background:white;


color:var(--primary)!important;


padding:

15px 36px;


border-radius:50px;


font-weight:800;


border:

2px solid var(--primary);


text-decoration:none;


transition:.3s;


}



.btn-outline-custom:hover{


background:var(--primary);


color:white!important;


}

/* =====================================================
PART 2
BOTTLE SHOWCASE + ZERO COST + INDUSTRIES + GALLERY
===================================================== */


/* =================================
HERO BOTTLE AREA
================================= */


.hero-visual{


height:650px;


display:flex;


align-items:center;


justify-content:center;


position:relative;


}



.hero-glow{


position:absolute;


width:500px;


height:500px;


border-radius:50%;


background:


radial-gradient(

circle,

rgba(0,184,212,.35),

transparent 70%

);


animation:

glowPulse 5s infinite;


}



@keyframes glowPulse{


50%{

transform:scale(1.15);

}


}





.floating-bottle{


position:relative;


z-index:3;


animation:

floatBottle 5s ease-in-out infinite;


}



@keyframes floatBottle{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-25px);

}


}





.bottle-image{


max-height:600px;


filter:

drop-shadow(

0 40px 45px rgba(0,80,120,.30)

);


}





.floating-bottle:after{


content:"";


position:absolute;


bottom:-30px;


left:50%;


transform:translateX(-50%);


width:250px;


height:60px;


background:

radial-gradient(

ellipse,

rgba(0,119,182,.35),

transparent

);


filter:blur(15px);


}






/* =================================
FLOATING BADGES
================================= */


.floating-card{


position:absolute;


background:white;


border-radius:20px;


padding:18px 25px;


display:flex;


align-items:center;


gap:15px;


box-shadow:

0 15px 40px rgba(0,80,120,.15);


border:1px solid #dff4f8;


z-index:5;


}



.floating-card i{


font-size:28px;


color:var(--secondary);


}



.floating-card strong{


display:block;


color:var(--dark);


}



.floating-card small{


color:var(--text);


}



.card-left{

left:0;

top:25%;

}


.card-right{

right:0;

top:45%;

}


.card-bottom{


bottom:8%;


left:50%;


transform:translateX(-50%);


}







/* =================================
ZERO ADVERTISING COST
MAIN USP SECTION
================================= */


.zero-cost-section{


padding:

120px 0;


position:relative;


overflow:hidden;


background:


linear-gradient(

135deg,

#006994,

#00b8d4

);


}





.zero-cost-section:before{


content:"";


position:absolute;


width:700px;


height:700px;


border-radius:50%;


background:

rgba(255,255,255,.10);


top:-350px;


right:-250px;


}





.zero-cost-section .section-tag{


color:#ffe39a;


}



.display-title{


color:white;


font-size:

clamp(38px,5vw,68px);


font-weight:900;


line-height:1.1;


}





.display-title span{


color:#ffe39a;


}



.lead-text{


color:white;


font-size:20px;


max-width:800px;


margin:auto;


}





/* BENEFIT BOXES */


.benefit-card{


height:100%;


background:white;


padding:40px 30px;


border-radius:30px;


box-shadow:

0 20px 50px rgba(0,0,0,.12);


transition:.4s;


}



.benefit-card:hover{


transform:

translateY(-12px);


}





.benefit-icon{


width:80px;


height:80px;


border-radius:50%;


display:flex;


align-items:center;


justify-content:center;


background:#e5f8fc;


margin-bottom:25px;


}



.benefit-icon i{


font-size:32px;


color:var(--primary);


}





.benefit-card h4{


color:var(--dark);


font-weight:900;


}







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


.industries-section{


padding:

110px 0;


background:#ffffff;


}





.industry-card{


height:100%;


padding:

35px 20px;


text-align:center;


background:#f8fdff;


border-radius:30px;


border:

1px solid #e4f3f7;


transition:.4s;


}



.industry-card:hover{


background:

linear-gradient(

135deg,

#006994,

#00b8d4

);


transform:

translateY(-10px);


}



.industry-card:hover h5{


color:white;


}





.industry-icon{


height:75px;


width:75px;


border-radius:50%;


display:flex;


align-items:center;


justify-content:center;


margin:auto;


background:white;


box-shadow:

0 10px 30px rgba(0,100,150,.12);


margin-bottom:20px;


}



.industry-icon i{


font-size:30px;


color:var(--primary);


}





.industry-card h5{


color:var(--dark);


font-weight:800;


}






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


.gallery-intro{


padding:

80px 0 20px;


background:#eefaff;


text-align:center;


}



.gallery-intro h2{


font-size:55px;


font-weight:900;


color:var(--dark);


}





.bottle-gallery{


padding:

70px 0 120px;


background:#eefaff;


}




.gallery-card{


background:white;


border-radius:35px;


overflow:hidden;


box-shadow:

0 20px 50px rgba(0,80,120,.12);


transition:.4s;


}



.gallery-card:hover{


transform:

translateY(-15px);


}




.gallery-image{


background:

linear-gradient(

180deg,

white,

#dff6fb

);


padding:45px;


}





.gallery-image img{


transition:.5s;


}



.gallery-card:hover img{


transform:scale(1.08);


}





.gallery-content{


padding:30px;


}



.gallery-content small{


color:var(--gold);


font-weight:800;


}



.gallery-content h4{


color:var(--dark);


font-weight:900;


}



.gallery-content p{


color:var(--text);


}

/* =====================================================
PART 3
WHY MAIA + CERTIFICATIONS + CTA + FOOTER + MOBILE
===================================================== */



/* =================================
WHY MAIA
================================= */


.why-maia{


padding:

120px 0;


background:white;


}




.feature-card{


display:flex;


align-items:center;


gap:20px;


background:#f5fbfd;


border-radius:20px;


padding:25px;


border:

1px solid #e2f2f6;


transition:.35s;


}




.feature-card:hover{


background:white;


transform:

translateX(10px);


box-shadow:

0 15px 40px rgba(0,100,150,.12);


}





.feature-card i{


font-size:30px;


color:var(--secondary);


}



.feature-card span{


font-weight:800;


font-size:17px;


color:var(--dark);


}







/* =================================
CERTIFICATIONS
================================= */


.certifications{


padding:

110px 0;


background:

linear-gradient(

180deg,

#eefaff,

white

);


}




.certification .section-title{


margin-bottom:20px;


}




.certificate-card{


background:white;


border-radius:30px;


padding:

35px 15px;


text-align:center;


height:100%;


box-shadow:

0 15px 40px rgba(0,80,120,.10);


transition:.4s;


border:

1px solid #e5f3f7;


}



.certificate-card:hover{


transform:

translateY(-12px);


}




.certificate-icon{


width:75px;


height:75px;


margin:auto;


border-radius:50%;


display:flex;


align-items:center;


justify-content:center;


background:#e8f9fc;


margin-bottom:20px;


}




.certificate-icon i{


font-size:35px;


color:var(--gold);


}





.certificate-card h5{


font-size:22px;


font-weight:900;


color:var(--primary);


}



.certificate-card small{


color:var(--text);


}






/* =================================
CALL TO ACTION
================================= */


.cta-section{


padding:

100px 0;


background:white;


}



.cta-box{


background:


linear-gradient(

135deg,

#006994,

#00b8d4

);


border-radius:45px;


padding:

80px 40px;


text-align:center;


box-shadow:

0 30px 70px rgba(0,100,150,.25);


position:relative;


overflow:hidden;


}



.cta-box:before{


content:"";


position:absolute;


width:400px;


height:400px;


border-radius:50%;


background:

rgba(255,255,255,.10);


top:-200px;


right:-100px;


}





.cta-box h2{


position:relative;


color:white;


font-size:

clamp(35px,5vw,60px);


font-weight:900;


}



.cta-box p{


position:relative;


color:white;


max-width:750px;


margin:

25px auto;


font-size:18px;


}





.cta-buttons{


display:flex;


justify-content:center;


gap:15px;


flex-wrap:wrap;


position:relative;


}



.cta-box .btn-outline-custom{


background:white;


color:var(--primary)!important;


border:none;


}



.cta-box .btn-outline-custom:hover{


background:#063247;


color:white!important;


}





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


.footer{


background:

linear-gradient(

135deg,

#042b3c,

#006994

);


padding:

70px 0 30px;


}



.footer h3{


color:white;


font-weight:900;


letter-spacing:2px;


}



.footer p{


color:

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


}



.footer-social{


display:flex;


justify-content:flex-end;


gap:15px;


}



.footer-social a{


width:45px;


height:45px;


border-radius:50%;


display:flex;


align-items:center;


justify-content:center;


background:

rgba(255,255,255,.15);


color:white;


transition:.3s;


}



.footer-social a:hover{


background:#00b8d4;


transform:

translateY(-5px);


}






/* =================================
SCROLL ANIMATION SUPPORT
================================= */


[data-aos]{


opacity:0;


transition:

all .8s ease;


}



[data-aos].aos-animate{


opacity:1;


}







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


@media(max-width:991px){



.hero{


padding-top:130px;


}



.hero-content{


text-align:center;


}



.hero-buttons{


justify-content:center;


}



.hero-visual{


height:520px;


margin-top:50px;


}



.bottle-image{


max-height:450px;


}



.card-left{


left:-30px;


}



.card-right{


right:-30px;


}



.section-title{


font-size:42px;


}



}





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


@media(max-width:576px){



.logo-title{


font-size:32px;


}



.logo-subtitle{


font-size:9px;


}



.hero-title{


font-size:38px;


}



.hero-subtitle{


font-size:22px;


}



.hero-text{


font-size:16px;


}



.hero-buttons{


flex-direction:column;


}



.btn-primary-custom,
.btn-outline-custom{


width:100%;


}



.hero-visual{


height:420px;


}



.bottle-image{


max-height:340px;


}



.floating-card{


display:none;


}



.display-title{


font-size:36px;


}



.industry-card{


margin-bottom:20px;


}



.gallery-image{


padding:25px;


}



.cta-box{


padding:

45px 20px;


}



.footer{


text-align:center;


}



.footer-social{


justify-content:center;


margin-top:20px;


}



}