html{
    overflow-x:hidden !important;
}
:root{--gold:#d4af37;--gold-light:#f5d97a;--dark:#0a0a0a;--dark-2:#141414;--gray:#888;--light:#f8f8f8}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:var(--dark);color:#fff;overflow-x:hidden;line-height:1.6}
h1,h2,h3,h4,.serif{font-family:'Playfair Display',serif;letter-spacing:-.5px}
.gold{color:var(--gold)}
.bg-dark-2{background:var(--dark-2)}
a{text-decoration:none;color:inherit;transition:.3s}
.btn-gold{background:linear-gradient(135deg,var(--gold),#b8941f);color:#000;border:none;padding:14px 36px;font-weight:600;border-radius:50px;letter-spacing:1px;text-transform:uppercase;font-size:13px;position:relative;overflow:hidden;transition:.4s;cursor:pointer}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 15px 40px rgba(212,175,55,.4);color:#000}
.btn-outline-gold{background:transparent;color:var(--gold);border:2px solid var(--gold);padding:12px 34px;font-weight:600;border-radius:50px;letter-spacing:1px;text-transform:uppercase;font-size:13px;transition:.4s;cursor:pointer}
.btn-outline-gold:hover{background:var(--gold);color:#000;transform:translateY(-3px)}

/* NAVBAR */
.navbar{background:rgba(10,10,10,.85);backdrop-filter:blur(20px);padding:18px 0;transition:.3s;border-bottom:1px solid rgba(212,175,55,.1);z-index:1000}
.navbar.scrolled{padding:12px 0;background:rgba(10,10,10,.98)}
.navbar-brand{font-family:'Playfair Display',serif;font-size:28px;font-weight:800;color:#fff!important}
.navbar-brand span{color:var(--gold)}
.nav-link{color:#ccc!important;font-weight:500;font-size:14px;text-transform:uppercase;letter-spacing:1px;margin:0 8px;position:relative;cursor:pointer}
.nav-link:hover,.nav-link.active{color:var(--gold)!important}
.nav-link::after{content:'';position:absolute;bottom:-4px;left:50%;width:0;height:2px;background:var(--gold);transition:.3s;transform:translateX(-50%)}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.navbar-toggler{border:1px solid var(--gold);color:var(--gold)}
.navbar-toggler:focus{box-shadow:none}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:120px 0 80px;background:radial-gradient(circle at 20% 50%,rgba(212,175,55,.15),transparent 50%),radial-gradient(circle at 80% 80%,rgba(212,175,55,.08),transparent 50%),#050505}
.hero::before{content:'';position:absolute;inset:0;background-image: url('/storage/front/your-image.jpg') !important;background-size:cover;background-position:center;opacity:.25;z-index:0}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent,#0a0a0a 90%);z-index:1}
.hero .container{position:relative;z-index:2}
.hero-badge{display:inline-block;padding:8px 20px;border:1px solid var(--gold);border-radius:50px;color:var(--gold);font-size:12px;letter-spacing:3px;text-transform:uppercase;margin-bottom:25px;animation:fadeUp .8s}
.hero h1{font-size:clamp(2.5rem,6vw,5.5rem);font-weight:800;line-height:1.05;margin-bottom:25px;animation:fadeUp 1s}
.hero h1 .gold{font-style:italic;font-weight:700}
.hero p{font-size:18px;color:#bbb;max-width:580px;margin-bottom:40px;animation:fadeUp 1.2s}
.hero-buttons{display:flex;gap:20px;flex-wrap:wrap;animation:fadeUp 1.4s}
.hero-stats{display:flex;gap:50px;margin-top:80px;flex-wrap:wrap;animation:fadeUp 1.6s}
.stat h3{font-size:42px;color:var(--gold);margin-bottom:5px}
.stat p{font-size:13px;color:#999;text-transform:uppercase;letter-spacing:2px;margin:0}

@keyframes fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
@keyframes shine{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* SECTIONS */
section{padding:100px 0;position:relative}
.section-label{color:var(--gold);font-size:13px;letter-spacing:4px;text-transform:uppercase;margin-bottom:15px;display:inline-block;font-weight:600}
.section-title{font-size:clamp(2rem,4vw,3.5rem);font-weight:800;margin-bottom:20px;line-height:1.1}
.section-subtitle{color:#999;max-width:600px;margin:0 auto 60px;font-size:17px}

/* SERVICES */
.service-card{background:linear-gradient(145deg,#141414,#0d0d0d);border:1px solid rgba(255,255,255,.05);border-radius:20px;padding:40px 30px;height:100%;transition:.5s;position:relative;overflow:hidden;cursor:pointer}
.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:scaleX(0);transition:.5s}
.service-card:hover{transform:translateY(-10px);border-color:rgba(212,175,55,.3);box-shadow:0 25px 60px rgba(0,0,0,.5)}
.service-card:hover::before{transform:scaleX(1)}
.service-icon{width:70px;height:70px;border-radius:15px;background:linear-gradient(135deg,rgba(212,175,55,.15),rgba(212,175,55,.05));display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--gold);margin-bottom:25px;transition:.5s}
.service-card:hover .service-icon{background:var(--gold);color:#000;transform:rotateY(360deg)}
.service-card h3{font-size:22px;margin-bottom:15px}
.service-card p{color:#999;font-size:15px;margin-bottom:20px}
.service-price{color:var(--gold);font-weight:700;font-size:24px;font-family:'Playfair Display',serif}
.service-price small{font-size:12px;color:#666;font-weight:400}

/* ABOUT */
.about-img{position:relative;border-radius:25px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.about-img img{width:100%;display:block;transition:.6s}
.about-img:hover img{transform:scale(1.05)}
.about-badge{position:absolute;bottom:30px;right:30px;background:var(--gold);color:#000;padding:25px 35px;border-radius:15px;text-align:center}
.about-badge h3{font-size:42px;font-weight:800;margin:0;line-height:1}
.about-badge p{font-size:12px;text-transform:uppercase;letter-spacing:2px;margin:5px 0 0;font-weight:600}
.about-feature{display:flex;gap:20px;margin-bottom:25px;align-items:start}
.about-feature i{color:var(--gold);font-size:24px;flex-shrink:0;margin-top:3px}
.about-feature h5{margin-bottom:5px;font-weight:600}
.about-feature p{color:#999;font-size:14px;margin:0}

/* PROCESS */
.process-step{text-align:center;position:relative}
.process-num{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#b8941f);color:#000;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;margin:0 auto 25px;font-family:'Playfair Display',serif;box-shadow:0 10px 30px rgba(212,175,55,.3);transition:.4s}
.process-step:hover .process-num{transform:translateY(-8px) scale(1.05);box-shadow:0 20px 40px rgba(212,175,55,.5)}

/* GALLERY */
.gallery-item{border-radius:20px;overflow:hidden;position:relative;cursor:pointer;height:280px}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:.6s}
.gallery-item:hover img{transform:scale(1.1)}
.gallery-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,10,10,.95));display:flex;align-items:flex-end;padding:25px;opacity:0;transition:.4s}
.gallery-item:hover .gallery-overlay{opacity:1}
.gallery-overlay h5{color:var(--gold);margin-bottom:5px}
.gallery-overlay p{color:#ccc;font-size:13px;margin:0}

/* TESTIMONIALS */
.testimonial{background:linear-gradient(145deg,#141414,#0a0a0a);border:1px solid rgba(255,255,255,.05);border-radius:20px;padding:40px;position:relative;height:100%;transition:.4s}
.testimonial:hover{border-color:rgba(212,175,55,.3);transform:translateY(-5px)}
.testimonial .quote-icon{font-size:50px;color:var(--gold);opacity:.3;position:absolute;top:20px;right:30px}
.stars{color:var(--gold);margin-bottom:15px;font-size:14px}
.testimonial p{color:#ccc;font-style:italic;margin-bottom:25px;font-size:15px}
.testimonial-author{display:flex;align-items:center;gap:15px}
.testimonial-author img{width:55px;height:55px;border-radius:50%;border:2px solid var(--gold);object-fit:cover}
.testimonial-author h6{margin:0;color:#fff}
.testimonial-author span{font-size:13px;color:#888}

/* PRICING */
.pricing-card{background:linear-gradient(145deg,#141414,#0d0d0d);border:1px solid rgba(255,255,255,.05);border-radius:25px;padding:50px 35px;height:100%;text-align:center;transition:.5s;position:relative}
.pricing-card.featured{border-color:var(--gold);background:linear-gradient(145deg,#1a1610,#0f0d08);transform:scale(1.05)}
.pricing-card:hover{transform:translateY(-10px);border-color:rgba(212,175,55,.4)}
.pricing-card.featured:hover{transform:translateY(-10px) scale(1.05)}
.pricing-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--gold);color:#000;padding:5px 20px;border-radius:50px;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.pricing-card h3{font-size:24px;margin-bottom:10px}
.pricing-card .price{font-size:60px;font-weight:800;color:var(--gold);font-family:'Playfair Display',serif;line-height:1;margin:20px 0}
.pricing-card .price small{font-size:16px;color:#777;font-weight:400}
.pricing-card ul{list-style:none;padding:0;margin:30px 0;text-align:left}
.pricing-card ul li{padding:10px 0;color:#bbb;font-size:14px;border-bottom:1px solid rgba(255,255,255,.05)}
.pricing-card ul li i{color:var(--gold);margin-right:10px}

/* BOOKING */
.booking-form{background:linear-gradient(145deg,#141414,#0a0a0a);padding:50px;border-radius:25px;border:1px solid rgba(212,175,55,.15)}
.form-control,.form-select{background:#0a0a0a;border:1px solid rgba(255,255,255,.1);color:#fff;padding:14px 20px;border-radius:12px;font-size:15px}
.form-control:focus,.form-select:focus{background:#0a0a0a;border-color:var(--gold);color:#fff;box-shadow:0 0 0 .25rem rgba(212,175,55,.15)}
.form-label{color:#bbb;font-size:13px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-weight:500}

/* CTA */
.cta-section{background:linear-gradient(135deg,#1a1410,#0a0a0a);border-radius:30px;padding:80px 50px;text-align:center;position:relative;overflow:hidden;border:1px solid rgba(212,175,55,.2)}
.cta-section::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(212,175,55,.1),transparent 60%);animation:float 6s ease-in-out infinite}

/* FOOTER */
footer{background:#050505;padding:80px 0 30px;border-top:1px solid rgba(212,175,55,.1)}
footer h5{color:var(--gold);font-size:16px;margin-bottom:25px;text-transform:uppercase;letter-spacing:2px}
footer a{color:#888;display:block;padding:6px 0;font-size:14px}
footer a:hover{color:var(--gold);padding-left:8px}
.social-icons{display:flex;gap:12px;margin-top:20px}
.social-icons a{width:42px;height:42px;border-radius:50%;background:#141414;display:flex;align-items:center;justify-content:center;color:#888;padding:0;border:1px solid rgba(255,255,255,.05)}
.social-icons a:hover{background:var(--gold);color:#000;padding:0;transform:translateY(-3px)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.05);padding-top:25px;margin-top:50px;text-align:center;color:#666;font-size:13px}

/* PAGE TRANSITIONS */
.page{display:none;animation:fadeUp .6s}
.page.active{display:block}
.page-header{padding:160px 0 80px;text-align:center;background:radial-gradient(circle at center,rgba(212,175,55,.1),transparent 60%);border-bottom:1px solid rgba(255,255,255,.05)}
.breadcrumb-custom{color:#888;font-size:14px}
.breadcrumb-custom .gold{color:var(--gold)}

/* ADMIN */
.admin-sidebar{background:#0a0a0a;min-height:100vh;padding:30px 0;border-right:1px solid rgba(212,175,55,.1)}
.admin-sidebar a{display:flex;align-items:center;gap:12px;padding:14px 25px;color:#888;font-size:14px;font-weight:500;border-left:3px solid transparent}
.admin-sidebar a:hover,.admin-sidebar a.active{color:var(--gold);background:rgba(212,175,55,.05);border-left-color:var(--gold);padding-left:25px}
.admin-sidebar a i{width:20px}
.stat-card{background:linear-gradient(145deg,#141414,#0d0d0d);border:1px solid rgba(255,255,255,.05);border-radius:15px;padding:25px;transition:.3s}
.stat-card:hover{border-color:rgba(212,175,55,.3);transform:translateY(-3px)}
.stat-card .icon{width:50px;height:50px;border-radius:12px;background:rgba(212,175,55,.1);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:15px}
.stat-card h2{font-size:32px;color:#fff;margin:0;font-weight:700}
.stat-card p{color:#888;font-size:13px;margin:5px 0 0;text-transform:uppercase;letter-spacing:1px}
.admin-table{background:#0d0d0d;border-radius:15px;overflow:hidden;border:1px solid rgba(255,255,255,.05)}
.admin-table table{margin:0;color:#ccc}
.admin-table th{background:#0a0a0a;color:var(--gold);font-size:12px;text-transform:uppercase;letter-spacing:1px;border:none;padding:18px 20px;font-weight:600}
.admin-table td{border-color:rgba(255,255,255,.05);padding:18px 20px;vertical-align:middle;font-size:14px}
.admin-table tr:hover{background:rgba(212,175,55,.03)}
.badge-status{padding:6px 14px;border-radius:50px;font-size:11px;font-weight:600;text-transform:uppercase}
.badge-completed{background:rgba(40,167,69,.15);color:#28a745}
.badge-pending{background:rgba(255,193,7,.15);color:#ffc107}
.badge-progress{background:rgba(13,110,253,.15);color:#0d6efd}

.fade-up{opacity:0;transform:translateY(30px);transition:.8s}
.fade-up.visible{opacity:1;transform:translateY(0)}

@media(max-width:768px){
  section{padding:70px 0}
  .hero{padding:80px 0 }
  .hero-stats{gap:30px;margin-top:50px}
  .stat h3{font-size:32px}
  .pricing-card.featured{transform:none}
  .pricing-card.featured:hover{transform:translateY(-10px)}
  .booking-form{padding:30px 25px}
  .cta-section{padding:50px 25px}
  .btn-gold {
    padding: 14px 12px;
    font-size:10px;
}
 .btn-outline-gold {
    padding: 12px 34px;
    font-size: 10px;
}
}

.compare-label {
            font-size: 0.8rem;
            color: var(--gray);
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        /* Before/After Container Slider */
        .comparison-slider {
            position: relative;
            width: 100%;
            height: 450px; /* Adjust height as needed */
            overflow: hidden;
            border-radius: 16px;
            background-color: var(--dark-2);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
        }

        .comparison-slider img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            pointer-events: none;
        }

        /* Before Image (Top Layer) */
        .img-before {
            z-index: 2;
            /* Initial split width (50%) */
            clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); 
        }

        /* After Image (Background Layer) */
        .img-after {
            z-index: 1;
        }

        /* Invisible Range Input Layered Exactly On Top */
        .slider-input {
            position: absolute;
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 100%;
            background: transparent;
            z-index: 3;
            cursor: ew-resize;
            margin: 0;
        }

        .slider-input:focus {
            outline: none;
        }

        /* Custom Split Line Divider mimicking the range thumb */
        .slider-line {
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 3px;
            background-color: var(--gold); /* Theme applied */
            z-index: 2;
            pointer-events: none;
            transform: translateX(-50%);
        }

        .slider-line::after {
            content: '◄►';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            background-color: var(--gold); /* Theme applied */
            color: var(--dark);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
            box-shadow: 0 0 15px rgba(212, 175, 55, 0.3); /* Subtle gold glow */
            transition: background-color 0.2s ease;
        }

.slider-input:focus {
            outline: none;
        }

        /* Chrome, Safari, Edge, Opera Track */
        /* .slider-input::-webkit-slider-runnable-track {
            width: 100%;
            height: 6px; 
            background: var(--dark);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        } */

        /* Firefox Track */
        .slider-input::-moz-range-track {
            width: 100%;
            height: 6px;
            background: var(--dark);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* Hide the native browser slider thumbs entirely since we use a custom element */
        .slider-input::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 46px;
            height: 46px;
        }
        .slider-input::-moz-range-thumb {
            width: 46px;
            height: 46px;
            background: transparent;
            border: none;
        }
        /* Input Hover Effect for the Knob */
        .slider-input:hover ~ .slider-line::after {
            background-color: var(--gold-light);
        }

        /* Badges for Before/After text */
        .badge-before, .badge-after {
            position: absolute;
            top: 15px;
            background: rgba(10, 10, 10, 0.85); /* Semi-transparent dark */
            color: var(--gold-light);
            border: 1px solid var(--gold);
            padding: 5px 12px;
            font-size: 0.75rem;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-radius: 4px;
            pointer-events: none;
        }
        
        .badge-before { left: 15px; z-index: 4; }

        .badge-after { right: 15px; z-index: 4; }
        @media(max-width:600px){
            /* =========================================
   FIXED MOBILE OVERRIDES FOR THE SLIDER
   ========================================= */

.section-header {
            letter-spacing: 1px;
        }

        .compare-label {
            font-size: 0.8rem;
            color: var(--gray);
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        /* Container Slider */
        .comparison-slider {
            position: relative;
            width: 100%;
            height: 450px; 
            overflow: hidden;
            border-radius: 16px;
            background-color: var(--dark-2);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
            cursor: ew-resize;
            user-select: none;
            -webkit-user-select: none;
        }

        .comparison-slider img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            pointer-events: none;
        }

        /* Before Image Layer */
        .img-before {
            z-index: 2;
            clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); 
        }

        /* After Image Layer */
        .img-after {
            z-index: 1;
        }

        /* Custom Vertical Split Line */
        .slider-line {
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 4px;
            background-color: var(--gold); 
            z-index: 3;
            pointer-events: none;
            transform: translateX(-50%);
        }

        /* Gold Outer Ring Handle */
        .slider-handle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 46px;
            height: 46px;
            background-color: var(--gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
            transition: background-color 0.2s ease;
        }

        /* Centered Inner Dot (Solid Black) */
        .slider-handle::before {
            content: '';
            width: 20px;
            height: 20px;
            background-color: var(--dark);
            border-radius: 50%;
            z-index: 2;
        }

        /* Side indicator arrows */
        .slider-handle::after {
            content: '◄   ►';
            position: absolute;
            font-size: 8px;
            color: var(--dark);
            font-weight: bold;
            z-index: 1;
            letter-spacing: 12px;
            text-indent: 7px;
        }

        /* Hover effect */
        .comparison-slider:hover .slider-handle {
            background-color: var(--gold-light);
        }

        /* Badges for Before/After text */
        .badge-before, .badge-after {
            position: absolute;
            top: 15px;
            background: rgba(10, 10, 10, 0.85); 
            color: var(--gold-light);
            border: 1px solid var(--gold);
            padding: 5px 12px;
            font-size: 0.75rem;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-radius: 4px;
            pointer-events: none;
            z-index: 4;
        }
    
        }
        .service-card a:hover {
    color: white !important;
}