html {
  scroll-behavior: smooth;
}

/* HERO SLIDES */
/* HERO SLIDES */

.slide{
    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    opacity:0;
    transform:scale(1.08);

    transition:
        opacity 1.2s ease,
        transform 7s ease;
}

.slide.active{
    opacity:1;
    transform:scale(1);
}
@media (max-width:768px){

    #hero{
        min-height:100svh;
    }

    .slide{
        background-position:center;
    }


}
/* Hero text */
#hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
#hero h2,
#hero h3,
#hero p{

    text-shadow:
        0 6px 20px rgba(0,0,0,.65);

}

/* NAV */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0%;
  height: 1px;
  background: #c9a84c;
  transition: 0.3s;
}

.nav-link:hover::after {
  width: 100%;
}

/* DOTS */
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transition: 0.3s;
  cursor: pointer;
}

.dot-active {
  background: #c9a84c;
  transform: scale(1.5);
}

/* ===========================
   PREMIUM GLASS SERVICE CARD
=========================== */

.service-card{
    position:relative;
    display:flex;
    flex-direction:column;
    height:100%;

    overflow:hidden;

    border-radius:28px;

    border:1px solid rgba(201,168,76,.45);

    background:rgba(10,20,13,.25);

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

    transition:.45s ease;

    box-shadow:
        0 18px 45px rgba(0,0,0,.35),
        inset 0 1px rgba(255,255,255,.08);
}

/* Gold Glow */

.service-card::before{

    content:"";

    position:absolute;
    inset:0;

    border-radius:inherit;

    background:
        radial-gradient(circle at top left,
        rgba(201,168,76,.15),
        transparent 40%);

    pointer-events:none;
    z-index:1;
}

/* Hover */

.service-card:hover{

    transform:translateY(-12px);

    border-color:#c9a84c;

    box-shadow:
        0 30px 60px rgba(0,0,0,.45),
        0 0 30px rgba(201,168,76,.15);

}

/* IMAGE */

.service-image{

    overflow:hidden;

}

.service-image img{

    width:100%;
    height:290px;

    object-fit:cover;

    transition:.8s ease;

}

.service-card:hover .service-image img{

    transform:scale(1.08);

}

/* CONTENT */

.service-content{

    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    flex:1;

    padding:30px;

    background:
        linear-gradient(
            rgba(24,42,30,.45),
            rgba(11,22,15,.82)
        );

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

    border-top:1px solid rgba(201,168,76,.25);

}

/* Heading */

.service-content h3{

    font-family:"Playfair Display",serif;

    font-size:2rem;

    font-weight:600;

    color:#fff;

    margin-bottom:18px;

}

/* Description */

.service-content p{

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

    font-size:17px;

    line-height:1.8;

    margin-bottom:auto;

}

/* Button */

.service-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    align-self:flex-start;

    width:auto;

    margin-top:30px;

    padding:16px 30px;

    background:#c9a84c;

    color:#08120c;

    border-radius:999px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

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

}

.service-btn svg,
.service-btn i{

    transition:.35s;

}

.service-btn:hover{

    transform:translateY(-4px);

    background:#d8b95f;

    box-shadow:
        0 18px 35px rgba(201,168,76,.35);

}

.service-btn:hover svg,
.service-btn:hover i{

    transform:translateX(6px);

}
/* REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: 0.8s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
body{
    background:#07120b;
    color:white;
    font-family:'Montserrat',sans-serif;
}
/* Title font reuse */
.title {
  font-family: 'Playfair Display', serif;
}

/* NAV styling consistency */
.gallery-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

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

/* Masonry Gallery */

.gallery-masonry{
    column-count:3;
    column-gap:24px;
    padding:0 40px 60px;
}

.img-card{
    width:100%;
    margin-bottom:24px;

    display:inline-block;

    overflow:hidden;
    border-radius:18px;
    background:#0f1c13;

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

    transition:.35s;
    break-inside:avoid;
}

.img-card:hover{
    transform:translateY(-6px);
    border-color:#c9a84c;
    box-shadow:0 15px 35px rgba(0,0,0,.35);
}

.img-card img{
    width:100%;
    height:auto;
    display:block;
    transition:.5s;
}

.img-card:hover img{
    transform:scale(1.04);
}

@media(max-width:1000px){

    .gallery-masonry{
        column-count:2;
    }

}

@media(max-width:650px){

    .gallery-masonry{
        column-count:1;
        padding:0 20px 40px;
    }

}
/* ===========================
   ABOUT US
=========================== */

.about-img{
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.08);
    transition: .4s;
    background: #132317;
}

.about-img img{
    width: 100%;
    display: block;
    transition: .6s;
}

.about-img:hover{
    border-color: #c9a84c;
    box-shadow: 0 20px 45px rgba(0,0,0,.35);
}

.about-img:hover img{
    transform: scale(1.05);
}
/* ===========================
   WHATSAPP FLOAT BUTTON
=========================== */

.whatsapp-float{

    position:fixed;

    right:30px;

    bottom:30px;

    width:68px;

    height:68px;

    background:#25D366;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

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

    z-index:9999;

    transition:.35s;

    animation:whatsappPulse 2s infinite;

}

.whatsapp-float:hover{

    transform:scale(1.12);

    box-shadow:0 15px 35px rgba(37,211,102,.45);

}

@keyframes whatsappPulse{

    0%{

        box-shadow:0 0 0 0 rgba(37,211,102,.55);

    }

    70%{

        box-shadow:0 0 0 16px rgba(37,211,102,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(37,211,102,0);

    }

}

@media(max-width:768px){

    .whatsapp-float{

        width:60px;

        height:60px;

        right:20px;

        bottom:20px;

    }

}
.call-btn{

    background:#c9a84c;

    color:#0d1a0f;

    padding:12px 24px;

    border-radius:999px;

    font-weight:600;

    transition:.3s;

}

.call-btn:hover{

    background:white;

    transform:translateY(-2px);

}
.contact-form{

display:flex;

flex-direction:column;

gap:20px;

}


.contact-form input,
.contact-form textarea{
    background:#1a2d1d;
    color:#c3cc49;
    border:1px solid rgba(255,255,255,.15);
    border-radius:16px;
    padding:18px 20px;
    transition:.3s;
}

.contact-form input.active,
.contact-form textarea.active{
    background:#d4b35a; /* Slight gold */
    color:#0d1a0f;
}

.contact-form button{

background:#c9a84c;

color:#0d1a0f;

padding:18px;

border-radius:14px;

font-weight:600;

transition:.3s;

cursor:pointer;

}

.contact-form button:hover{

background:rgb(214, 206, 99);

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

.footer-link{

    color:#9ca3af;

    transition:.3s;

}

.footer-link:hover{

    color:#c9a84c;

    padding-left:8px;

}

.footer-call-btn{

    background:#c9a84c;

    color:#0d1a0f;

    padding:12px 26px;

    border-radius:999px;

    font-weight:600;

    transition:.3s;

}

.footer-call-btn:hover{

    background:white;

    transform:translateY(-2px);

}
#contact .grid{
    align-items:stretch;
}

#contact .bg-\[\#132317\]{
    height:100%;
}

#contact .contact-form{
    height:100%;
}

#contact .contact-form textarea{
    min-height:220px;
    resize:none;
}

#contact .bg-\[\#132317\]{
    transition:.35s;
}

#contact .bg-\[\#132317\]:hover{
    border-color:#c9a84c;
    box-shadow:0 20px 45px rgba(0,0,0,.35);
}
/* ABOUT */

#about img{

    transition:.5s;

}

#about .rounded-full:hover img{

    transform:scale(1.08);

}

#about .rounded-full{

    box-shadow:0 20px 60px rgba(0,0,0,.35);

}

#about .bg-\[\#132317\]{

    transition:.35s;

}

#about .bg-\[\#132317\]:hover{

    transform:translateY(-6px);

    border-color:#c9a84c;

    box-shadow:0 20px 40px rgba(0,0,0,.35);

}
.service-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:14px 26px;

    margin-top:25px;

    background:#c9a84c;

    color:#09120b;

    border-radius:999px;

    font-weight:600;

    transition:.35s;

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

}

.service-btn svg{

    transition:.35s;

}

.service-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(201,168,76,.35);

}

.service-btn:hover svg{

    transform:translateX(6px);

}
.font-playfair{
    font-family:'Playfair Display', serif;
}

.text-gold{
    color:#c9a84c;
}
.contact-title{
    display:flex;
    align-items:center;
    gap:12px;

    color:#c9a84c;
    font-size:22px;
    font-weight:600;

    margin-bottom:14px;
}

.contact-title i{
    width:22px;
    text-align:center;
    font-size:20px;
    color:#c9a84c;
}
.main-bg{
    position:relative;
    overflow:hidden;
  background:
        url("images/bg.jpg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
}
.main-bg::before{

    content:"";

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        rgba(5,15,9,.70),
        rgba(5,15,9,.75)
    );

    z-index:0;

}

.main-bg>*{

    position:relative;

    z-index:1;

}
/* ===========================================================
   TESTIMONIALS SECTION
=========================================================== */

#testimonials{
    position: relative;
}

.testimonial-card{
    background: rgba(19,35,23,.75);
    backdrop-filter: blur(18px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:28px;
    padding:35px;
    transition:.4s ease;
    display:flex;
    flex-direction:column;
    height:100%;
}

.testimonial-card:hover{
    transform:translateY(-8px);
    border-color:#c9a84c;
    box-shadow:0 25px 60px rgba(0,0,0,.35);
}

.quote-icon{
    width:60px;
    height:60px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#c9a84c;
    color:#08130c;
    font-size:24px;
    margin-bottom:25px;
}

.stars{
    color:#c9a84c;
    font-size:22px;
    letter-spacing:4px;
    margin-bottom:18px;
}

.testimonial-text{
    color:#d3d3d3;
    line-height:1.9;
    font-size:16px;
    flex:1;
}

.testimonial-user{
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:30px;
}

.user-image{
    width:65px;
    height:65px;
    border-radius:50%;
    background:#c9a84c;
    color:#08130c;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
}

.testimonial-user h4{
    font-size:20px;
    font-weight:600;
}

.testimonial-user span{
    color:#b5b5b5;
    font-size:14px;
}

/* ===========================================================
VIDEO CARDS
=========================================================== */

.video-card{

    background:#132317;
    border:1px solid rgba(255,255,255,.08);
    border-radius:28px;
    overflow:hidden;
    transition:.4s;
}

.video-card:hover{

    transform:translateY(-8px);
    border-color:#c9a84c;
    box-shadow:0 25px 60px rgba(0,0,0,.35);

}

.video-card video{

    width:100%;
    display:block;
    aspect-ratio:16/9;
    object-fit:cover;
    background:#000;

}

.video-content{

    padding:30px;

}

.video-content h3{

    font-family:'Playfair Display',serif;
    font-size:34px;
    margin-bottom:14px;

}

.video-content p{

    color:#cfcfcf;
    line-height:1.8;

}

/* ===========================================================
GOOGLE REVIEW
=========================================================== */

.google-review{

    margin-top:90px;

    background:#132317;

    border-radius:30px;

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

    padding:45px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

    transition:.4s;

}

.google-review:hover{

    border-color:#c9a84c;

}

.google-left{

    display:flex;

    align-items:center;

    gap:25px;

}

.google-left img{

    width:70px;

}

.google-left h3{

    font-size:34px;

    font-family:'Playfair Display',serif;

}

.google-left p{

    color:#bfbfbf;

    margin-top:8px;

}

.google-rating{

    display:flex;

    align-items:center;

    gap:20px;

}

.rating-number{

    font-size:60px;

    color:#c9a84c;

    font-weight:700;

}

.google-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-top:20px;

    background:#c9a84c;

    color:#08130c;

    padding:15px 30px;

    border-radius:999px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.google-btn:hover{

    transform:translateY(-3px);

    background:white;

}

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

@media(max-width:1024px){

.google-review{

flex-direction:column;
text-align:center;

}

.google-left{

flex-direction:column;

}

.google-rating{

justify-content:center;

}

}

@media(max-width:768px){

#testimonials{

padding-top:90px;
padding-bottom:90px;

}

.testimonial-card{

padding:28px;

}

.video-content{

padding:24px;

}

.video-content h3{

font-size:28px;

}

.google-review{

padding:30px;

}

.google-left h3{

font-size:28px;

}

.rating-number{

font-size:48px;

}

}

@media(max-width:480px){

.testimonial-card{

padding:22px;

}

.quote-icon{

width:52px;
height:52px;
font-size:20px;

}

.stars{

font-size:18px;

}

.testimonial-text{

font-size:15px;

}

.user-image{

width:55px;
height:55px;
font-size:20px;

}

.testimonial-user h4{

font-size:18px;

}

.video-content h3{

font-size:24px;

}

.google-left img{

width:55px;

}

.google-left h3{

font-size:24px;

}

.rating-number{

font-size:40px;

}

.google-btn{

width:100%;
justify-content:center;

}

}
/* Reveal Animation */

.reveal{
    opacity:0;
    transform:translateY(60px);
    transition:all .8s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

/* Smooth Video Zoom */

.video-card{
    overflow:hidden;
}

.video-card video{
    transition:transform .5s ease;
}

.video-card:hover video{
    transform:scale(1.05);
}

/* Gold Glow */

.testimonial-card:hover,
.video-card:hover,
.google-review:hover{

    box-shadow:
    0 0 25px rgba(201,168,76,.15),
    0 25px 60px rgba(0,0,0,.4);

}

/* Button Animation */

.google-btn i{

    transition:.3s;

}

.google-btn:hover i{

    transform:translateX(6px);

}

/* Star Animation */

.stars{

    animation:starGlow 2s infinite alternate;

}

@keyframes starGlow{

    from{
        opacity:.7;
    }

    to{
        opacity:1;
        text-shadow:0 0 10px #c9a84c;
    }

}