/* ==========================
   MELANNIE SERVICES
   MASTER STYLESHEET
========================== */

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

:root{

--primary:#E85C94;
--primary-dark:#D94882;
--secondary:#FFF4F8;
--gold:#D7B04A;

--dark:#333333;
--gray:#777777;

--light:#FAFAFA;
--white:#FFFFFF;

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

--shadow-large:
0 20px 50px rgba(0,0,0,.15);

--radius:20px;

--transition:.3s ease;

}

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

*{

margin:0;
padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:var(--white);

color:var(--dark);

line-height:1.7;

overflow-x:hidden;

}

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

.container{

width:90%;

max-width:1200px;

margin:auto;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

}

section{

padding:100px 0;

}

/* ==========================
   TOP BAR
========================== */

.top-bar{

background:var(--primary);

color:white;

text-align:center;

padding:12px;

font-size:.95rem;

}

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

header{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 5%;

background:white;

position:sticky;

top:0;

z-index:999;

box-shadow:
0 2px 15px rgba(0,0,0,.05);

}

header.scrolled{

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

}

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

.logo{

height:150px;

width:auto;

}

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

nav{

display:flex;

align-items:center;

gap:25px;

}

nav a{

color:var(--dark);

font-weight:500;

transition:var(--transition);

}

nav a:hover{

color:var(--primary);

}

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

nav a.active{

color:var(--primary);

font-weight:600;

position:relative;

}

nav a.active::after{

content:"";

position:absolute;

bottom:-8px;

left:0;

width:100%;

height:3px;

background:var(--primary);

border-radius:10px;

}

/* ==========================
   HAMBURGER MENU
========================== */

#menuToggle{

display:none;

background:none;

border:none;

font-size:2rem;

cursor:pointer;

color:var(--primary);

}

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

.btn-primary{

display:inline-block;

padding:15px 35px;

border-radius:50px;

background:var(--primary);

color:white;

font-weight:600;

box-shadow:
0 10px 30px rgba(232,92,148,.35);

transition:.4s ease;

}

.btn-primary:hover{

background:var(--primary-dark);

transform:translateY(-5px);

box-shadow:
0 18px 40px rgba(232,92,148,.45);

}

.btn-secondary{

display:inline-block;

padding:15px 35px;

border-radius:50px;

border:2px solid var(--primary);

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

backdrop-filter:blur(10px);

color:var(--primary);

font-weight:600;

transition:.4s ease;

}

.btn-secondary:hover{

background:var(--primary);

color:white;

transform:translateY(-5px);

}

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

.hero{

min-height:90vh;

display:flex;

align-items:center;

position:relative;

overflow:hidden;

background:
linear-gradient(
rgba(255,255,255,.15),
rgba(255,255,255,.15)
),
url('../images/hero-flowers.jpg');

background-size:cover;

background-position:75% center;

background-repeat:no-repeat;

}

.hero::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:
linear-gradient(
90deg,
rgba(255,255,255,.55) 0%,
rgba(255,255,255,.15) 50%,
rgba(255,255,255,0) 100%
);

pointer-events:none;

}

/* ==========================
   FLOATING FLOWERS
========================== */

.floating-flowers{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

overflow:hidden;

pointer-events:none;

z-index:1;

}

.flower{

position:absolute;

top:100%;

font-size:60px;

opacity:.65;

animation:floatFlower linear infinite;

filter:drop-shadow(
0 0 8px rgba(255,255,255,.7)
);

}


.flower:nth-child(1){

left:10%;
animation-duration:18s;
animation-delay:0s;

}

.flower:nth-child(2){

left:25%;
animation-duration:24s;
animation-delay:3s;

}

.flower:nth-child(3){

left:40%;
animation-duration:20s;
animation-delay:7s;

}

.flower:nth-child(4){

left:60%;
animation-duration:26s;
animation-delay:2s;

}

.flower:nth-child(5){

left:80%;
animation-duration:22s;
animation-delay:5s;

}

.flower:nth-child(6){

left:90%;
animation-duration:28s;
animation-delay:1s;

}

@keyframes floatFlower{

0%{

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

}

100%{

transform:
translateY(-120px)
rotate(360deg);

}

}

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

.hero-content{

position:relative;

max-width:700px;

margin:auto;

padding:50px;

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

backdrop-filter:blur(15px);

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

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

border-radius:25px;

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

z-index:2;

}

.hero h1{

font-size:4.3rem;

line-height:1.1;

margin-bottom:20px;

text-shadow:
0 4px 12px rgba(255,255,255,.7);

}

.hero h2{

font-size:2rem;

color:var(--primary);

margin-bottom:20px;

text-shadow:
0 2px 10px rgba(255,255,255,.8);

}

.hero p{

font-size:1.1rem;

margin-bottom:30px;

}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

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

.page-hero{

background:var(--secondary);

text-align:center;

padding:120px 0;

}

.page-hero h1{

font-size:3.5rem;

margin-bottom:20px;

}

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

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title span{

color:var(--primary);

font-weight:600;

letter-spacing:3px;

}

.section-title h2{

font-size:3rem;

margin-top:10px;

}

.section-tag{

color:var(--primary);

font-weight:600;

letter-spacing:2px;

}

.center-text{

text-align:center;

max-width:850px;

margin:auto;

}

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

.center-button{

display:flex;

justify-content:center;

margin-top:30px;

}

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

.services-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));

gap:30px;

}

.service-card{

background:white;

padding:35px;

border-radius:var(--radius);

box-shadow:var(--shadow);

transition:var(--transition);

}

.service-card:hover{

transform:translateY(-10px);

box-shadow:
0 20px 50px rgba(0,0,0,.12);

}

.service-card h3{

margin-bottom:15px;

}

.service-card p{

margin-bottom:15px;

}

/* ==========================
   COUNTERS
========================== */

.counter-section{

background:var(--secondary);

}

.counter-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(200px,1fr));

gap:30px;

text-align:center;

}

/* ==========================
   LUXURY COUNTERS
========================== */

.counter-box{

padding:30px;

background:white;

border-radius:20px;

box-shadow:var(--shadow);

opacity:0;

transform:translateY(40px);

transition:
opacity .8s ease,
transform .8s ease,
box-shadow .3s ease;

}

.counter-box.show{

opacity:1;

transform:translateY(0);

}

.counter-box:hover{

transform:translateY(-8px);

box-shadow:
0 20px 50px rgba(0,0,0,.12);

}

.counter-box h2{

font-size:4rem;

font-weight:700;

color:var(--primary);

margin-bottom:10px;

line-height:1;

}

.counter-box p{

font-size:1.1rem;

font-weight:500;

letter-spacing:.5px;

color:var(--dark);

}

/* ==========================
   TESTIMONIAL SLIDER
========================== */

.testimonial-slider{

position:relative;

max-width:900px;

margin:auto;

}

.testimonial-slide{

display:none;

animation:fadeSlide .8s ease;

}

.testimonial-slide.active{

display:block;

}

.testimonial-card{

background:white;

padding:50px;

border-radius:25px;

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

text-align:center;

}

.testimonial-card p{

font-size:1.15rem;

margin:25px 0;

}

.testimonial-card h4{

color:var(--primary);

}

.stars{

font-size:1.8rem;

color:gold;

}

#prevTestimonial,
#nextTestimonial{

position:absolute;

top:50%;

transform:translateY(-50%);

width:50px;

height:50px;

border:none;

border-radius:50%;

background:var(--primary);

color:white;

font-size:1.3rem;

cursor:pointer;

}

#prevTestimonial{

left:-25px;

}

#nextTestimonial{

right:-25px;

}

@keyframes fadeSlide{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}


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

.gallery-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:20px;

}

.gallery-grid img{

width:100%;

height:280px;

object-fit:cover;

border-radius:var(--radius);

transition:.4s ease;

}

.gallery-grid img:hover{

transform:scale(1.03);

}

/* ==========================
   FORMS
========================== */

form{

display:flex;

flex-direction:column;

gap:20px;

max-width:800px;

margin:auto;

}

input,
textarea,
select{

padding:15px;

border:1px solid #ddd;

border-radius:10px;

font-size:1rem;

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

}

textarea{

min-height:180px;

resize:vertical;

}

button{

border:none;

cursor:pointer;

}

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

.cta-section{

background:var(--secondary);

text-align:center;

}

.cta-section h2{

font-size:2.5rem;

margin-bottom:15px;

}

.cta-section p{

margin-bottom:25px;

}

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

footer{

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

padding:80px 5% 40px;

margin-top:50px;

}

.footer-container{

display:grid;

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

gap:50px;

max-width:1400px;

margin:auto;

}

.footer-column h3{

margin-bottom:20px;

color:var(--primary);

}

.footer-column a{

display:block;

margin-bottom:12px;

color:var(--dark);

transition:.3s ease;

}

.footer-column a:hover{

color:var(--primary);

padding-left:5px;

}

.footer-column p{

margin-bottom:10px;

}

.footer-logo{

height:120px;

margin-bottom:20px;

}

.footer-social{

display:flex;

justify-content:center;

gap:25px;

margin-top:50px;

}

.footer-social a{

color:var(--primary);

font-weight:600;

}

.footer-bottom{

text-align:center;

margin-top:40px;

padding-top:30px;

border-top:1px solid #eee;

}

.footer-bottom a{

margin:0 10px;

color:var(--dark);

}

.footer-bottom p{

margin-top:15px;

color:var(--gray);

}

/* ==========================
   MAPS
========================== */

.map-container{

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);

}

/* ==========================
   COOKIE BANNER
========================== */

#cookieBanner{

position:fixed;

bottom:0;

left:0;

width:100%;

background:white;

padding:20px;

display:flex;

justify-content:space-between;

align-items:center;

box-shadow:
0 -5px 15px rgba(0,0,0,.1);

z-index:9999;

}

/* ==========================
   BACK TO TOP BUTTON
========================== */

#backToTop{

position:fixed;

bottom:30px;

right:30px;

width:50px;

height:50px;

border-radius:50%;

background:var(--primary);

color:white;

border:none;

cursor:pointer;

display:none;

z-index:999;

transition:.3s ease;

}

#backToTop:hover{

transform:translateY(-4px);

}

/* ==========================
   NOTIFICATIONS
========================== */

.notification{

position:fixed;

top:30px;

right:30px;

padding:20px 30px;

border-radius:12px;

color:white;

font-weight:600;

z-index:9999;

opacity:0;

transform:translateY(-20px);

transition:.4s ease;

}

.notification.show{

opacity:1;

transform:translateY(0);

}

.notification.success{

background:#28a745;

}

.notification.error{

background:#dc3545;

}

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

.reveal{

opacity:0;

transform:translateY(40px);

transition:.7s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

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

@media(min-width:1401px){

.logo{

height:150px;

}

#menuToggle{

display:none;

}

#mobileNav{

display:flex;

align-items:center;

gap:25px;

}

.desktop-quote{

display:inline-block;

}

.mobile-quote{

display:none;

}

}

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

@media(min-width:1201px) and (max-width:1400px){

.logo{

height:130px;

}

#menuToggle{

display:none;

}

#mobileNav{

display:flex;

align-items:center;

gap:20px;

}

.desktop-quote{

display:inline-block;

}

.mobile-quote{

display:none;

}

}

/* ==========================
   TABLETS & SMALL LAPTOPS
========================== */

@media(max-width:1200px){

header{

position:relative;

padding:15px 20px;

}

.logo{

height:85px;

}

#menuToggle{

display:block;

background:none;

border:none;

font-size:2.2rem;

cursor:pointer;

color:var(--primary);

}

.desktop-quote{

display:none;

}

.mobile-quote{

display:block;

}

#mobileNav{

display:none;

position:absolute;

top:100%;

left:0;

width:100%;

background:white;

padding:25px;

box-shadow:var(--shadow);

flex-direction:column;

align-items:center;

gap:20px;

z-index:999;

}

#mobileNav.active{

display:flex;

}

}

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

@media(max-width:768px){

.top-bar{

font-size:.8rem;

padding:10px;

}

.logo{

height:70px;

}

.hero{

padding:40px 15px;

min-height:auto;

}

.hero-content{

max-width:100%;

margin:0;

padding:25px;

text-align:center;

border-radius:20px;

}

.hero h1{

font-size:2rem;

line-height:1.1;

}

.hero h2{

font-size:1.05rem;

}

.hero p{

font-size:1rem;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.hero-buttons a{

width:250px;

text-align:center;

}

.section-title h2{

font-size:2rem;

}

.page-hero h1{

font-size:2.4rem;

}

.footer-links{

flex-direction:column;

}

.footer-logo{

height:85px;

}

#cookieBanner{

flex-direction:column;

gap:15px;

}

}

@media(max-width:768px){

.footer-container{

grid-template-columns:1fr;

text-align:center;

gap:40px;

}

.footer-logo{

margin:auto;

}

.footer-social{

flex-wrap:wrap;

}

}

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

@media(max-width:480px){

.logo{

height:60px;

}

.hero-content{

padding:20px;

}

.hero h1{

font-size:1.8rem;

}

.hero h2{

font-size:1rem;

}

.hero-buttons a{

width:100%;

}

}

/*==============================
LUXURY LANGUAGE SWITCHER
==============================*/

.language-switcher{

display:flex;
align-items:center;
gap:8px;

padding:8px 16px;

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

backdrop-filter:blur(12px);

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

border-radius:40px;

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

margin-left:18px;

transition:.35s;

}

.language-switcher:hover{

transform:translateY(-2px);

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

}

.lang{

background:none;

border:none;

cursor:pointer;

font-size:.95rem;

font-weight:600;

color:#888;

transition:.3s;

padding:2px;

}

.lang:hover{

color:var(--primary);

}

.lang.active{

color:var(--primary);

position:relative;

}

.lang.active::after{

content:"";

position:absolute;

left:0;

bottom:-5px;

width:100%;

height:2px;

background:var(--primary);

border-radius:10px;

}

.divider{

color:#bbb;

font-weight:300;

}

@media(max-width:768px){

.language-switcher{

margin-top:15px;

padding:7px 14px;

font-size:.9rem;

}

}