/* =========================
   RNL DETAILING V2
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;
background:#0f1115;
color:#ffffff;
line-height:1.7;
overflow-x:hidden;
}

/* Scrollbar */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#161a20;
}

::-webkit-scrollbar-thumb{
background:#3a3f49;
border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
background:#565d69;
}

/* Images */

img{
max-width:100%;
display:block;
}

/* Links */

a{
text-decoration:none;
color:white;
}

/* Lists */

ul{
list-style:none;
}

/* Sections */

section{
padding:90px 8%;
}

/* Titles */

.section-title{
text-align:center;
margin-bottom:60px;
}

.section-title h2{
font-size:42px;
margin-bottom:15px;
font-weight:700;
}

.section-title p{
color:#b9c0cb;
font-size:18px;
}

/* Buttons */

.btn{
display:inline-block;
padding:15px 35px;
border-radius:50px;
font-weight:600;
transition:.35s;
cursor:pointer;
}

.primary-btn{
background:white;
color:#111;
}

.primary-btn:hover{
transform:translateY(-3px);
}

.secondary-btn{
border:2px solid white;
color:white;
margin-left:15px;
}

.secondary-btn:hover{
background:white;
color:#111;
}

/* =========================
Loading Screen
========================= */

#loader{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#0f1115;
display:flex;
justify-content:center;
align-items:center;
z-index:99999;
transition:.6s;
}

#loader img{
width:220px;
animation:pulse 1.5s infinite;
}

@keyframes pulse{

0%{
transform:scale(.95);
}

50%{
transform:scale(1);
}

100%{
transform:scale(.95);
}

}

/* =========================
Navigation
========================= */

header{
position:fixed;
top:0;
left:0;
width:100%;
z-index:1000;
}

.navbar{

display:flex;
justify-content:space-between;
align-items:center;

padding:20px 8%;

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

backdrop-filter:blur(18px);

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

}

.logo img{

height:75px;

}

.nav-links{

display:flex;
gap:35px;

}

.nav-links a{

font-weight:500;

transition:.3s;

}

.nav-links a:hover{

color:#d6dbe3;

}

.menu-toggle{

display:none;

font-size:32px;

cursor:pointer;

}

/* =========================
Hero
========================= */

.hero{

position:relative;

height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

overflow:hidden;

}

.hero-slideshow{

position:absolute;

width:100%;

height:100%;

top:0;

left:0;

}

.slide{

position:absolute;

width:100%;

height:100%;

background-size:cover;

background-position:center;

opacity:0;

transition:opacity 1.5s ease;

animation:kenburns 18s linear infinite;

}

.slide.active{

opacity:1;

}

@keyframes kenburns{

0%{

transform:scale(1);

}

100%{

transform:scale(1.15);

}

}

.hero-overlay{

position:absolute;

width:100%;

height:100%;

background:rgba(0,0,0,.58);

}

.hero-content{

position:relative;

z-index:2;

max-width:900px;

padding:20px;

}

.hero-logo{

width:220px;

margin:0 auto 30px;

}

.hero h1{

font-size:65px;

margin-bottom:20px;

}

.hero p{

font-size:21px;

color:#d5d8df;

margin-bottom:40px;

}

.scroll-down{

position:absolute;

bottom:40px;

left:50%;

transform:translateX(-50%);

font-size:34px;

animation:bounce 2s infinite;

}

@keyframes bounce{

0%,100%{

transform:translate(-50%,0);

}

50%{

transform:translate(-50%,10px);

}

}
/* =========================
   Trust Banner
========================= */

.trust-banner{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
padding:70px 8%;
background:#14181f;
}

.trust-card{
background:#1b2028;
padding:35px 25px;
border:1px solid #2b313b;
border-radius:18px;
text-align:center;
transition:.35s;
}

.trust-card:hover{
transform:translateY(-8px);
border-color:#626b78;
}

.trust-card h3{
margin:18px 0 12px;
font-size:22px;
}

.trust-card p{
color:#b7bec9;
font-size:15px;
}

/* =========================
   About
========================= */

.about{
background:#0f1115;
}

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

.about-image img{
width:320px;
margin:auto;
}

.about-text p{
font-size:19px;
color:#d3d8df;
margin-bottom:25px;
line-height:1.9;
}

/* =========================
   How It Works
========================= */

.process{
background:#14181f;
}

.process-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
}

.process-step{
background:#1b2028;
padding:35px;
border-radius:18px;
text-align:center;
border:1px solid #2b313b;
transition:.35s;
}

.process-step:hover{
transform:translateY(-8px);
}

.process-step span{
display:inline-flex;
align-items:center;
justify-content:center;
width:65px;
height:65px;
border-radius:50%;
background:white;
color:#111;
font-size:28px;
font-weight:700;
margin-bottom:20px;
}

.process-step h3{
margin-bottom:15px;
font-size:23px;
}

.process-step p{
color:#bcc3ce;
}

/* =========================
   Services
========================= */

.services{
background:#0f1115;
}

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

.service-card{
background:#1b2028;
border:1px solid #2b313b;
border-radius:20px;
padding:35px;
transition:.35s;
}

.service-card:hover{
transform:translateY(-10px);
border-color:#6a7381;
}

.service-icon{
font-size:50px;
margin-bottom:20px;
}

.service-card h3{
font-size:28px;
margin-bottom:15px;
}

.service-card p{
color:#bcc3ce;
margin-bottom:25px;
}

.service-price{
font-size:22px;
margin-bottom:20px;
}

.details-btn,
.book-btn{
display:inline-block;
padding:12px 22px;
border-radius:40px;
margin-top:10px;
font-weight:600;
transition:.3s;
cursor:pointer;
}

.details-btn{
background:white;
color:#111;
border:none;
}

.details-btn:hover{
transform:translateY(-3px);
}

.book-btn{
border:2px solid white;
color:white;
margin-left:10px;
}

.book-btn:hover{
background:white;
color:#111;
}

.service-details{
margin-top:25px;
padding-top:20px;
border-top:1px solid #2b313b;
}

.service-details ul{
padding-left:18px;
}

.service-details li{
list-style:disc;
margin-bottom:12px;
color:#d2d7de;
}
/* =========================
   Gallery
========================= */

.gallery{
background:#14181f;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
}

.gallery-item{
overflow:hidden;
border-radius:18px;
border:1px solid #2b313b;
cursor:pointer;
}

.gallery-item img{
width:100%;
height:280px;
object-fit:cover;
transition:transform .45s ease;
}

.gallery-item:hover img{
transform:scale(1.08);
}

/* =========================
   Before & After
========================= */

.before-after{
background:#0f1115;
}

.before-after-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
gap:35px;
}

.ba-card{
background:#1b2028;
border:1px solid #2b313b;
border-radius:18px;
overflow:hidden;
transition:.35s;
}

.ba-card:hover{
transform:translateY(-8px);
}

.ba-images{
display:grid;
grid-template-columns:1fr 1fr;
}

.ba-images img{
height:260px;
width:100%;
object-fit:cover;
}

.ba-labels{
display:flex;
justify-content:space-between;
padding:18px 25px;
font-weight:600;
}

/* =========================
   Pricing
========================= */

.pricing{
background:#14181f;
}

.pricing-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
margin-bottom:50px;
}

.price-card{
background:#1b2028;
padding:35px;
border-radius:20px;
border:1px solid #2b313b;
transition:.35s;
}

.price-card:hover{
transform:translateY(-10px);
border-color:#6a7381;
}

.price-card h3{
font-size:26px;
margin-bottom:20px;
}

.price-card ul{
padding-left:20px;
}

.price-card li{
margin-bottom:14px;
color:#d0d5dd;
list-style:disc;
}

.addons{
margin-top:40px;
background:#1b2028;
padding:35px;
border-radius:20px;
border:1px solid #2b313b;
}

.addons h3{
margin-bottom:20px;
}

.addons ul{
padding-left:20px;
}

.addons li{
margin-bottom:12px;
list-style:disc;
color:#d0d5dd;
}

/* =========================
   Quote Estimator
========================= */

.quote-estimator{
background:#0f1115;
}

.quote-box{
max-width:700px;
margin:auto;
background:#1b2028;
padding:40px;
border-radius:20px;
border:1px solid #2b313b;
}

.quote-box select{
width:100%;
padding:16px;
margin-bottom:20px;
border:none;
border-radius:12px;
background:#2b313b;
color:white;
font-size:16px;
}

.quote-box label{
display:block;
margin:12px 0;
color:#d2d7df;
}

.quote-total{
margin:30px 0;
font-size:30px;
font-weight:700;
text-align:center;
}

.quote-btn{
display:block;
width:100%;
padding:18px;
background:white;
color:#111;
border:none;
border-radius:50px;
font-size:18px;
font-weight:600;
cursor:pointer;
transition:.3s;
}

.quote-btn:hover{
transform:translateY(-3px);
}

/* =========================
   Reviews
========================= */

.reviews{
background:#14181f;
}

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

.review-card{
background:#1b2028;
padding:35px;
border-radius:18px;
border:1px solid #2b313b;
transition:.35s;
}

.review-card:hover{
transform:translateY(-8px);
}

.review-stars{
font-size:22px;
margin-bottom:15px;
}

.review-card p{
color:#d3d8df;
margin-bottom:20px;
}

.review-card h4{
font-size:18px;
}

.review-buttons{
margin-top:50px;
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}
/* =========================
   Booking
========================= */

.booking{
background:#0f1115;
}

.booking-form{
max-width:800px;
margin:auto;
display:grid;
gap:20px;
}

.booking-form input,
.booking-form select,
.booking-form textarea{
width:100%;
padding:16px;
background:#1b2028;
border:1px solid #2b313b;
border-radius:12px;
color:#fff;
font-size:16px;
font-family:inherit;
}

.booking-form textarea{
min-height:160px;
resize:vertical;
}

.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus{
outline:none;
border-color:#6a7381;
}

.booking-form button{
padding:18px;
border:none;
border-radius:50px;
background:#fff;
color:#111;
font-size:18px;
font-weight:600;
cursor:pointer;
transition:.3s;
}

.booking-form button:hover{
transform:translateY(-3px);
}

/* =========================
   FAQ
========================= */

.faq{
background:#14181f;
}

.faq-container{
max-width:900px;
margin:auto;
display:flex;
flex-direction:column;
gap:20px;
}

.faq-item{
background:#1b2028;
border:1px solid #2b313b;
border-radius:15px;
padding:25px;
}

.faq-item h3{
margin-bottom:10px;
font-size:22px;
}

.faq-item p{
color:#cbd2db;
}

/* =========================
   Contact
========================= */

.contact{
background:#0f1115;
}

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

.contact-card{
background:#1b2028;
padding:35px;
border-radius:18px;
border:1px solid #2b313b;
transition:.3s;
}

.contact-card:hover{
transform:translateY(-8px);
}

.contact-card h3{
margin-bottom:15px;
}

.contact-card p,
.contact-card a{
color:#d2d7df;
}

/* =========================
   Footer
========================= */

footer{
background:#090b0f;
padding:50px 8%;
text-align:center;
border-top:1px solid #222831;
}

footer img{
width:140px;
margin:0 auto 20px;
}

footer p{
color:#9ca5b3;
margin:10px 0;
}

.footer-links{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
margin:20px 0;
}

.footer-links a:hover{
color:#d6dbe3;
}

/* =========================
   Floating Buttons
========================= */

.floating-call,
.back-to-top{
position:fixed;
right:25px;
width:60px;
height:60px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
text-decoration:none;
z-index:999;
transition:.3s;
box-shadow:0 10px 25px rgba(0,0,0,.35);
}

.floating-call{
bottom:100px;
background:#fff;
color:#111;
}

.back-to-top{
bottom:25px;
background:#1b2028;
color:#fff;
border:1px solid #2b313b;
}

.floating-call:hover,
.back-to-top:hover{
transform:translateY(-5px);
}

/* =========================
   Fade Animation
========================= */

.fade-in{
opacity:0;
transform:translateY(40px);
transition:all .8s ease;
}

.fade-in.show{
opacity:1;
transform:translateY(0);
}

/* =========================
   Responsive
========================= */

@media(max-width:992px){

.hero h1{
font-size:48px;
}

.hero p{
font-size:18px;
}

.about-container{
grid-template-columns:1fr;
text-align:center;
}

.about-image img{
width:240px;
}

.nav-links{
gap:18px;
}

}

@media(max-width:768px){

section{
padding:70px 6%;
}

.hero h1{
font-size:38px;
}

.hero-logo{
width:170px;
}

.nav-links{
display:none;
}

.menu-toggle{
display:block;
}

.btn{
display:block;
width:100%;
margin:10px 0;
text-align:center;
}

.secondary-btn{
margin-left:0;
}

.section-title h2{
font-size:32px;
}

.gallery-item img,
.ba-images img{
height:220px;
}

}

@media(max-width:500px){

.hero h1{
font-size:30px;
}

.hero p{
font-size:16px;
}

.section-title h2{
font-size:28px;
}

.price-card,
.service-card,
.review-card,
.contact-card{
padding:25px;
}

}@media (max-width:768px){

.nav-links.active{
display:flex;
flex-direction:column;
position:absolute;
top:90px;
left:0;
width:100%;
background:#11151b;
padding:25px;
gap:20px;
text-align:center;
border-top:1px solid #2b313b;
}

}/* Maintenance Membership */

.maintenance{
    background:#0d0d0d;
    padding:80px 20px;
    text-align:center;
}

.maintenance h2{
    color:#fff;
    font-size:42px;
    margin-bottom:10px;
}

.subtitle{
    color:#bfbfbf;
    margin-bottom:40px;
}

.membership-card{

    max-width:700px;
    margin:auto;
    background:#111;
    border:1px solid #444;
    border-radius:20px;
    padding:40px;

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

}

.membership-card table{

    width:100%;
    margin:30px 0;
    border-collapse:collapse;

}

.membership-card th,
.membership-card td{

    padding:15px;
    border-bottom:1px solid #333;

}

.membership-card ul{

    list-style:none;
    text-align:left;
    margin-top:20px;

}

.membership-card li{

    padding:8px 0;

}

.membership-btn{

display:inline-block;

margin-top:30px;

padding:15px 35px;

background:white;

color:black;

border-radius:8px;

text-decoration:none;

font-weight:bold;

transition:.3s;

}

.membership-btn:hover{

background:#d9d9d9;

}/* ==========================
   Travel Fee Section
========================== */

.travel-fee {
    background: #000;
    padding: 80px 20px;
    text-align: center;
}

.travel-fee h2 {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 15px;
}

.travel-fee p {
    color: #ccc;
    max-width: 700px;
    margin: 0 auto 25px;
    line-height: 1.7;
}

.travel-card {
    max-width: 750px;
    margin: auto;
    background: #111;
    border: 1px solid #333;
    border-radius: 18px;
    padding: 35px;
    box-shadow: 0 8px 30px rgba(255,255,255,0.08);
}

.travel-card h3 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 1.6rem;
}

.travel-table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
}

.travel-table th,
.travel-table td {
    padding: 16px;
    border-bottom: 1px solid #333;
}

.travel-table th {
    color: #fff;
    font-size: 1rem;
    background: #1a1a1a;
}

.travel-table td {
    color: #ddd;
}

.travel-table tr:hover {
    background: #1a1a1a;
}

.travel-note {
    margin-top: 20px;
    color: #fff;
    font-weight: 600;
}

@media (max-width: 768px) {

    .travel-card {
        padding: 25px;
    }

    .travel-fee h2 {
        font-size: 2rem;
    }

    .travel-table th,
    .travel-table td {
        padding: 12px;
        font-size: 0.9rem;
    }

}/* Reviews */

.reviews{
    padding:90px 20px;
    background:#111;
    text-align:center;
}

.section-subtitle{
    color:#bdbdbd;
    margin-bottom:40px;
}

.review-placeholder{
    max-width:700px;
    margin:auto;
    background:#1a1a1a;
    border:1px solid #333;
    border-radius:16px;
    padding:45px 35px;
    transition:.3s;
}

.review-placeholder:hover{
    transform:translateY(-6px);
    border-color:#ffffff;
}

.stars{
    color:#FFD700;
    font-size:2rem;
    margin-bottom:20px;
}

.review-placeholder h3{
    color:#fff;
    margin-bottom:15px;
}

.review-placeholder p{
    color:#d0d0d0;
    line-height:1.8;
    margin-bottom:30px;
}

.review-btn{
    display:inline-block;
    padding:15px 34px;
    background:#fff;
    color:#000;
    text-decoration:none;
    border-radius:50px;
    font-weight:700;
    transition:.3s;
}

.review-btn:hover{
    background:#d9d9d9;
}