/* Reset & font */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Poppins', sans-serif; }
body { background:#fafafa; color:#333; line-height:1.6; }

/* Header */
header { display:flex; justify-content:space-between; align-items:center; padding:20px 40px; background:#1b1b1b; color:#fff; position:sticky; top:0; z-index:1000; box-shadow:0 3px 8px rgba(0,0,0,0.2);}
header .logo h1{font-size:2rem; font-weight:700; color:#f1c40f;}
header .logo p{font-size:0.9rem; color:#fff; margin-top:3px;}
nav a{color:#fff; text-decoration:none; margin-left:25px; font-size:1.1rem; font-weight:500; position:relative; transition:0.3s;}
nav a:hover{color:#f1c40f;}

.hero {
    position: relative;
    height: 500px; /* adjust as needed */
    overflow: hidden;
}

.hero-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 300%; /* 3 images side by side */
    height: 100%;
    display: flex;
    animation: slide 15s infinite;
}

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

.hero-text {
    position: relative;
    z-index: 2;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}

@keyframes slide {
    0% { transform: translateX(0%); }
    33% { transform: translateX(-100%); }
    66% { transform: translateX(-200%); }
    100% { transform: translateX(0%); }
}

/* Hero Section */
.hero { text-align:center; background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('images/hero.jpg') no-repeat center center/cover; color:#fff; padding:150px 20px;}
.hero h2{font-size:3rem; margin-bottom:15px; font-weight:700; text-shadow:2px2px8px rgba(0,0,0,0.6);}
.hero p{font-size:1.3rem; text-shadow:1px1px6px rgba(0,0,0,0.5);}

/* Section Boxes */
.section-box { padding:50px 20px; margin:30px auto; border-radius:15px; color:#333; max-width:1000px; box-shadow:0 10px 25px rgba(0,0,0,0.1); transition: transform 0.3s, box-shadow 0.3s; background-clip: padding-box;}
.section-box:hover {transform:translateY(-5px); box-shadow:0 15px 30px rgba(0,0,0,0.15);}
.about.section-box {background: linear-gradient(135deg,#ffd8d8,#ffe4e1);}
.services.section-box {background: linear-gradient(135deg,#fff0d8,#fff8e1);}
.gallery.section-box {background: linear-gradient(135deg,#d8f0ff,#e1f5fe);}
.contact.section-box {background: linear-gradient(135deg,#d8ffd8,#e1ffee);}
.section-box h2{font-size:2rem; margin-bottom:20px; text-align:center;}
.section-box p{font-size:1.1rem; text-align:center; max-width:750px; margin:0 auto;}

/* About Section */
.about-content { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px;}
.about-text { flex:1 1 400px; }
.about-image { flex:1 1 400px; }
.about-image img { width:100%; border-radius:12px; }

/* Marquee sliding images */
.about-marquee { display:flex; gap:20px; overflow:hidden; margin-top:30px; }
.about-marquee img { width:250px; height:150px; object-fit:cover; border-radius:12px; animation:slide-left 15s linear infinite; }
@keyframes slide-left{0%{transform:translateX(100%);} 100%{transform:translateX(-100%);}}

/* Services */
.services-list {list-style:disc inside; font-size:1.1rem; max-width:700px; margin:20px auto; text-align:left; padding-left:0;}
.services-list li {margin-bottom:10px; padding-left:10px;}
.services-poster {margin-top:30px; text-align:center;}
.services-poster img {max-width:100%; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,0.15);}

/* Gallery */
.category {margin-bottom:50px;}
.category h3 {font-size:1.5rem; margin-bottom:15px; color:#444; border-bottom:2px solid #f1c40f; display:inline-block; padding-bottom:5px;}
.gallery-container {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px;}
.gallery-container img {width:100%; height:250px; object-fit:cover; border-radius:12px; transition:transform 0.3s,box-shadow 0.3s;}
.gallery-container img:hover{transform:scale(1.05); box-shadow:0 10px 25px rgba(0,0,0,0.4);}

/* Reviews */
#reviews .review{background:#fff; padding:20px; border-radius:12px; box-shadow:0 5px 15px rgba(0,0,0,0.1); margin-bottom:15px; font-style:italic;}

/* Contact */
.contact a{display:inline-block; margin:10px 15px; padding:10px 20px; background:#f1c40f; color:#1b1b1b; font-weight:600; text-decoration:none; border-radius:8px; transition:0.3s;}
.contact a:hover{background:#d4ac0d;}
.contact .map{margin-top:25px; border-radius:12px; overflow:hidden;}

/* Footer */
footer{text-align:center; padding:25px; background:linear-gradient(90deg,#1b1b1b,#333); color:#fff;}

/* Floating Buttons */
.floating-buttons {position:fixed; top:40%; right:10px; display:flex; flex-direction:column; gap:15px; z-index:10000;}
.floating-buttons a {width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.5rem; box-shadow:0 5px 15px rgba(0,0,0,0.2); transition:transform 0.3s,box-shadow 0.3s;}
.floating-buttons a:hover {transform:translateY(-5px); box-shadow:0 10px 20px rgba(0,0,0,0.3);}
.floating-buttons .whatsapp{background:#25D366;}
.floating-buttons .instagram{background:#C13584;}
.floating-buttons .phone{background:#000;}

/* Scroll animation for sections */
.animate-on-scroll {opacity:0; transform:translateY(20px); transition:all 0.6s ease-out;}
.animate-on-scroll.show {opacity:1; transform:translateY(0);}

/* Responsive */
@media(max-width:768px){.about-content{flex-direction:column;}.hero h2{font-size:2rem;}.hero p{font-size:1rem;}}