* {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
}


html {
    scroll-behavior: smooth;
}
:root{
--pink:#ff6fa5;
--pink-light:#ffd1e6;
--purple:#6a0dad;
--purple-dark:#4b0082;
--text-dark:#2a2a2a;
}
.section-gold,
.section-silver{
background:transparent;

}

section{
    padding:50px 0;
}

.section-gold h2,
.section-silver h2{
color:#ffffff;
font-size:36px;
text-align:center;
margin-bottom:30px;
font-weight:600;
}

h2{
color:white;
margin-bottom:25px;
}
body{
margin:0;
font-family:'Poppins', sans-serif;
line-height:1.6;

background:linear-gradient(
180deg,
#ffd1e6 0%,
#ff9ac6 30%,
#a4508b 65%,
#6a0dad 100%
);

background-attachment:fixed;
}



.hero-text h1{
color:#fff;
text-shadow:0 3px 10px rgba(0,0,0,0.6);
}

.container{
width:98%;
max-width:1600px;
margin:0 auto;
padding:20px;
background:rgba(255,255,255,0.08);
border-radius:14px;
backdrop-filter:blur(6px);
}

h1,h2{
text-align:center;
}

section{
padding:70px 0;
}

.header{
margin:0;
padding:0;
line-height: 0;
background:linear-gradient(90deg,#d63384,#4b0082);
color:white;
position:sticky;
top:0;
z-index:1000;
margin-bottom:0;
}
nav a{
color:black;
font-weight:600;
}


.nav-container{
display:flex;
justify-content:space-between;
align-items:center;
max-width:1400px;
margin:0 auto;
padding:5px 20px;
}


/* BETTER SECTION SPACING */
section{
    padding:50px 0;
}

.logo img{
height:50px;
}

nav a.active {
    color: yellow;
    font-weight: bold;
}

nav a{
color:white;
margin:0 12px;
text-decoration:none;
font-weight:500;
transition: 0.3s;
}

/* HAMBURGER ICON */
.menu-toggle{
    display:none;
    font-size:28px;
    cursor:pointer;
    color:white;
}

/* MOBILE MENU */
@media(max-width:768px){

    .menu-toggle{
        display:block;
        position:absolute;
        right:20px;
        top:20px;
        z-index:1001;
    }

    nav{
        display:flex;              /* 🔥 always flex */
        flex-direction:column;
        background:#4b0082;
        position:absolute;
        top:70px;
        right:0;
        width:100%;
        text-align:center;
        padding:20px 0;
        z-index:1000;

        opacity:0;
        pointer-events:none;
        transform:translateY(-20px);
        transition:0.3s;
    }

    nav.active{
        opacity:1;
        pointer-events:auto;
        transform:translateY(0);
    }
}


.hero{
margin-top: 0;
padding-top:0;
position:relative;
width:100%;
height: 60vh;
overflow:hidden;
opacity: 1 !important;
transform: none !important;
}
.hero + section{
    padding-top: 20px;   /* instead of 70px */
}
.slider {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.slides picture {
    flex: 0 0 100%;
    height: 100%;
}

.slides {
    display: flex;
    height: 100%;
}

.slides img{
    height: auto;        /* ✅ no crop */
    object-fit: cover;
    }

html, body {
    overflow-x: hidden;
}
.slide.active {
    opacity: 1;
    z-index: 1;
}.hero-text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
color:white;
background:rgba(0,0,0,0.35);
padding:25px 35px;
border-radius:10px;
}

.hero img{
width:100%;
height:100%;
object-fit:cover;
}

.banner{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.hero-text{
width: 90%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
color:white;
background:rgba(0,0,0,0.35);
padding:25px 35px;
border-radius:10px;
}

.hero-text h1{
font-size:42px;
margin-bottom:10px;
}

img{
max-width:100%;
display:block;
}
.btn{
background:var(--gold);
color:white;
}


.btn-whatsapp{
background:#25D366;
color:white;
}



section:not(.hero) {
    opacity: 0;
    transform: translateY(40px);
    transition: 0.6s ease;
}
section.show {
    opacity: 1;
    transform: translateY(0);
}
.call-float{
position:fixed;
bottom:95px;
right:25px;
width:55px;
height:55px;
background:#e53935;   /* nice modern red */
color:white;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
z-index:999;
box-shadow:0 4px 12px rgba(0,0,0,0.3);
text-decoration:none;
}

.call-float img{
width:26px;
height:26px;
}

.call-float:hover{
background:#c62828;
transform:scale(1.1);
transition:0.3s;
}
/* ABOUT SECTION */

#about .container {
    background: #f5f5f5;   /* light gray box */
    backdrop-filter: none; /* remove glass blur */
}

#about h2 {
    color: #222;
}

#about p {
    color: #333;
        text-align: justify;
    line-height: 1.8;
}


.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
}

.about-grid img{
width:100%;
border-radius:10px;
}
.about-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
}

/* First image - vertical */
.about-images img:nth-child(1) {
    grid-row: span 2;
    height: 100%;
    object-fit: cover;
}

/* Two horizontal images */
.about-images img:nth-child(2),
.about-images img:nth-child(3) {
    height: 100%;
    object-fit: cover;
}

/* General styling */
.about-images img {
    width: 100%;
    border-radius: 10px;
}

/* WHAT WE BUY */

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:40px;
}

#process .grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

#process .card{
    height: 100%;
    display: flex;
    flex-direction: column;
}

#process .card p{
    font-size: 15px;
    line-height: 1.6;
}
@media(max-width:992px){
    #process .grid{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:600px){
    #process .grid{
        grid-template-columns: 1fr;
    }
}

.card{
background:white;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.25);
text-align:center;
}

.card img{
width:100%;
height:200px;
object-fit:cover;
}

.card p{
padding:15px;
font-weight:600;
}
.card:hover{
transform:translateY(-6px);
}

/* PROCESS */

.card h3{
    margin:15px 0 10px;
    font-size:18px;
    color:#4b0082;
}

.card p{
    padding:0 15px 20px;
    font-size:14px;
    color:#444;
    line-height:1.5;
}

.steps{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap:30px;
margin-top:40px;
}

.step{
background:white;
padding:25px;
border-radius:10px;
text-align:center;
box-shadow:0 8px 18px rgba(0,0,0,0.1);
}

.step img{
width:70px;
margin-bottom:10px;
}

/* CONTACT */


.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
margin-top:30px;
}

.contact-grid iframe{
width:100%;
height:300px;
border:0;
}

.contact-grid input,
.contact-grid textarea{
width:100%;
padding:12px;
margin-bottom:10px;
border:1px solid #ccc;
}

.contact-grid button{
background:var(--gold);
color:white;
border:none;
padding:12px 20px;
}
.map iframe{
width:100%;
height:350px;
border:0;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

.contact-form input,
.contact-form textarea{
width:100%;
padding:5px;
margin-bottom:12px;
border-radius:6px;
border:1px solid #ccc;
}

.contact-form button{
background: var(--purple-dark);
color:white;
padding:14px 25px;
border:none;
border-radius:6px;
cursor:pointer;
}
.whatsapp-float{
position:fixed;
bottom:25px;
right:25px;
z-index:999;
}

.whatsapp-float img{
width:60px;
}

.whatsapp-float img{
width:60px;
}

.contact-buttons a{
display:inline-block;
margin:10px;
padding:12px 20px;
border-radius:5px;
text-decoration:none;
color:white;
}

.call-btn{
background:#ff9800;
}

.whatsapp-btn{
background:#25D366;
}
.review-widget {
    background: #f5f5f5;   /* light gray */
    padding: 20px;
    border-radius: 12px;
    margin-top: 30px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.review-widget iframe {
    width: 100%;
    border: none;
    border-radius: 10px;
}

/* Follow ups */
.video-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:20px;
    margin-top:40px;
}

/* Vertical reel style */
.video-card{
    position:relative;
    overflow:hidden;
    border-radius:12px;
    aspect-ratio: 9 / 16;
    width: 75%;           /* 🔥 reduce size */
    margin: 0 auto;       /* center */
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* Video fill */
.video-card video{
    width:100%;
    height:100%;
    object-fit:cover;
    transition: transform 0.5s ease;
}

/* Overlay with logo + text */
.video-overlay{
    position:absolute;
    bottom:0;
    width:100%;
    background:rgba(0,0,0,0.7);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    padding:16px;        /* increased */
    font-weight:700;
    font-size:20px;      /* bigger text */
}

/* Logo */
.social-icon{
    width:40px;   /* was 20px → now 2X */
    height:40px;
}

/* Hover effect */
.video-card:hover video{
    transform:scale(1.08);
}

/* Hover effect */
.video-card:hover video{
    transform:scale(1.1);
}

.video-card:hover .video-overlay{
    background:rgba(106,13,173,0.8);
}

/* FOOTER */

footer{
background:linear-gradient(90deg,#6a0dad,#ff6fa5);
color:white;
padding:40px 0;
}
footer a{
color:white;
}

footer a:hover{
color:#ffd1e6;
}

.footer-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:40px;
    max-width:1000px;
    margin:auto;
    text-align:center; /* 🔥 ADD THIS */
}

.footer-grid h3{
margin-bottom:6px;
}

.footer-grid a{
display:block;
margin:2px 0;       /* small gap */
line-height:1.1;    /* tighter */
text-decoration:none;
color:white;
font-weight:500;
text-decoration:none;
}

.footer-grid a:hover{
transform:translateX(3px);
transition:0.2s;
color:#ffd1e6;
}

.footer-grid p{
    margin:4px 0;
    line-height:1.3;
   
}
.copyright{
text-align:center;
margin-top:30px;
border-top:1px solid #444;
padding-top:15px;
}

footer .container{
max-width:1200px;
margin:auto;
padding:0 20px;
}
/* MOBILE */

@media(max-width:768px){

/* Layout fixes */
.about-grid{
    grid-template-columns:1fr;
}

.contact-grid{
    grid-template-columns:1fr;
}

.footer-grid{
    grid-template-columns:1fr;
}

/* NAVBAR FIX */
.nav-container{
    flex-direction: column;
    align-items: center;
}

/* LOGO FIX */
.logo img{
    height: 45px;
    width: auto;
    margin-bottom: 8px;
}

/* MENU FIX */
nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
}

nav a{
    font-size:14px;
    margin:5px;
}

/* HERO / BANNER FIX */
.hero{
    height: auto;        /* ✅ allow full height */
    }
/* Show full image in mobile */

/* TEXT FIX */
.hero-text{
    width: 90%;
    padding: 15px;
}

.hero-text h1{
    font-size: 22px;
}

.hero-text p{
    font-size: 14px;
}

}

#contact .container {
    background: rgba(0,0,0,0.4);   /* 🔥 darker background */
}

#contact .contact-grid p,
#contact .contact-grid b,
#contact .contact-grid a {
    color: #ffffff !important;
}