
:root{
    --red:#e21d2d;
    --red-dark:#b90e1d;
    --black:#0a0a0a;
    --dark:#111111;
    --dark-2:#171717;
    --white:#ffffff;
    --off-white:#f7f7f7;
    --text:#151515;
    --muted:#6f6f6f;
    --border:#dedede;
    --container:1200px;
    --shadow:0 18px 50px rgba(0,0,0,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:Inter,Arial,sans-serif;
    color:var(--text);
    background:#fff;
    line-height:1.6;
    overflow-x:hidden;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
.container{width:min(var(--container),calc(100% - 36px));margin:auto}

/* TOP BAR */
.topbar{
    background:#090909;
    color:#ddd;
    font-size:12px;
    letter-spacing:.5px;
}
.topbar .container{
    min-height:34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.topbar-left,.topbar-right{
    display:flex;
    gap:22px;
    align-items:center;
}
.topbar a:hover{color:#fff}

/* HEADER */
.header{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(12px);
    border-bottom:1px solid #e8e8e8;
    box-shadow:0 4px 18px rgba(0,0,0,.05);
}
.nav{
    min-height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}
.logo img{
    width:210px;
    height:72px;
    object-fit:contain;
}
.nav-menu{
    display:flex;
    align-items:center;
    gap:27px;
    font-size:14px;
    font-weight:800;
}
.nav-menu a{
    position:relative;
    padding:31px 0;
}
.nav-menu a:not(.nav-btn):after{
    content:"";
    position:absolute;
    left:0;
    right:100%;
    bottom:23px;
    height:2px;
    background:var(--red);
    transition:.25s;
}
.nav-menu a:hover:after,
.nav-menu a.active:after{
    right:0;
}
.nav-menu a:hover,.nav-menu a.active{color:var(--red)}
.nav-btn,.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:0;
    background:var(--red);
    color:#fff!important;
    padding:13px 21px!important;
    border-radius:4px;
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.8px;
    transition:.25s;
}
.nav-btn:hover,.btn:hover{
    background:#111;
    transform:translateY(-2px);
}
.nav-btn:after{display:none!important}

.menu-toggle{
    display:none;
    width:42px;
    height:42px;
    border:1px solid #ddd;
    background:#fff;
    cursor:pointer;
    border-radius:4px;
}
.menu-toggle span{
    display:block;
    width:20px;
    height:2px;
    margin:4px auto;
    background:#111;
}

/* HERO */
.hero{
    position:relative;
    min-height:680px;
    overflow:hidden;
    background:#101010;
    color:#fff;
}
.hero-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    opacity:.92;
}
.hero-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(0,0,0,.90) 0%,rgba(0,0,0,.66) 43%,rgba(0,0,0,.16) 100%),
        linear-gradient(0deg,rgba(0,0,0,.78),transparent 55%);
}
.hero-inner{
    position:relative;
    z-index:2;
    min-height:680px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 390px;
    align-items:center;
    gap:45px;
    padding:70px 0;
}
.kicker{
    color:var(--red);
    font-size:10px;
    font-weight:900;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:15px;
}
.hero h1{
    font-size:clamp(50px,7vw,88px);
    line-height:.94;
    letter-spacing:-4px;
    font-weight:900;
    max-width:760px;
}
.hero h1 span{color:var(--red)}
.hero-sub{
    max-width:620px;
    color:#d0d0d0;
    font-size:15px;
    margin:25px 0 28px;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn-outline{
    border:1px solid #777;
    background:transparent;
    color:#fff!important;
}
.btn-outline:hover{border-color:#fff;background:#fff;color:#111!important}
.hero-points{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    max-width:720px;
    margin-top:45px;
    border-top:1px solid rgba(255,255,255,.2);
}
.hero-point{
    padding:17px 15px 0 0;
    border-right:1px solid rgba(255,255,255,.15);
}
.hero-point:last-child{border-right:0;padding-left:15px}
.hero-point strong{display:block;font-size:11px;text-transform:uppercase}
.hero-point span{display:block;color:#999;font-size:12px;margin-top:4px}

.booking-card{
    background:#fff;
    color:#111;
    padding:28px;
    border-radius:9px;
    box-shadow:0 25px 70px rgba(0,0,0,.35);
}
.booking-card h2{
    font-size:28px;
    line-height:1.05;
    margin-bottom:8px;
}
.booking-card h2 span{color:var(--red)}
.booking-card>p{font-size:11px;color:#777;margin-bottom:17px}
.booking-card label{
    display:block;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.7px;
    font-weight:900;
    margin-bottom:11px;
}
.booking-card input,
.booking-card select,
.booking-card textarea{
    display:block;
    width:100%;
    margin-top:6px;
    border:1px solid #ddd;
    background:#fafafa;
    padding:12px 13px;
    color:#111;
    outline:none;
    border-radius:4px;
    font-size:11px;
}
.booking-card input:focus,
.booking-card select:focus,
.booking-card textarea:focus{
    border-color:var(--red);
    background:#fff;
}
.booking-card textarea{resize:vertical;min-height:75px}
.form-btn{width:100%;cursor:pointer;margin-top:2px}

/* SECTIONS */
.section{padding:95px 0}
.section.light{background:#f6f6f6}
.section.dark{background:#101010;color:#fff}
.section-tag{
    color:var(--red);
    font-size:13px;
    font-weight:900;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:13px;
}
.section-title{
    font-size:clamp(35px,4vw,55px);
    line-height:1.05;
    letter-spacing:-2px;
    margin-bottom:16px;
}
.section-title span{color:var(--red)}
.section-lead{
    color:#777;
    font-size:14px;
    max-width:720px;
}
.dark .section-lead{color:#aaa}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* SERVICE GRID */
.service-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-top:48px;
}
.service-card{
    background:#fff;
    border:1px solid #ddd;
    border-radius:6px;
    overflow:hidden;
    transition:.3s;
    box-shadow:0 7px 25px rgba(0,0,0,.05);
}
.service-card:hover{
    transform:translateY(-7px);
    border-color:#bbb;
    box-shadow:var(--shadow);
}
.service-card-img{
    width:100%;
    height:190px;
    object-fit:cover;
}
.service-card-body{padding:22px}
.service-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--red);
    color:#fff;
    margin-top:-42px;
    position:relative;
    border:4px solid #fff;
    font-size:16px;
}
.service-card h3{
    font-size:16px;
    line-height:1.2;
    margin:16px 0 9px;
}
.service-card p{
    color:#777;
    font-size:16px;
    min-height:52px;
}
.service-link{
    display:inline-block;
    color:var(--red);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    margin-top:16px;
    letter-spacing:1px;
}

/* BRANDS */
.brands{
    background:#0b0b0b;
    color:#fff;
    padding:22px 0;
}
.brand-row{
    display:flex;
    gap:10px;
    align-items:center;
    overflow:auto;
    scrollbar-width:none;
}
.brand-row::-webkit-scrollbar{display:none}
.brand-title{
    flex:0 0 auto;
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-right:12px;
}
.brand{
    flex:0 0 auto;
    min-width:100px;
    height:38px;
    display:grid;
    place-items:center;
    padding:0 14px;
    border:1px solid #444;
    border-radius:4px;
    background:#fff;
    color:#222;
    font-size:10px;
    font-weight:900;
}

/* ABOUT */
.two-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:75px;
    align-items:center;
}
.about-image{
    border-radius:7px;
    overflow:hidden;
    box-shadow:var(--shadow);
}
.about-image img{
    width:100%;
    height:430px;
    object-fit:cover;
}
.about-copy p{font-size:14px;color:#777;margin-bottom:15px}
.about-points{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:25px;
}
.about-point{
    padding:17px;
    border:1px solid #e2e2e2;
    background:#fff;
}
.about-point strong{font-size:14px;display:block}
.about-point span{font-size:14px;color:#777}

/* FEATURES */
.feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    margin-top:45px;
}
.feature{
    background:#fff;
    border:1px solid #ddd;
    padding:27px;
}
.feature-number{
    color:var(--red);
    font-size:14px;
    font-weight:900;
}
.feature h3{font-size:15px;margin:13px 0 7px}
.feature p{font-size:15px;color:#777}

/* SERVICE DETAIL */
.page-hero{
    min-height:390px;
    position:relative;
    color:#fff;
    display:flex;
    align-items:end;
    overflow:hidden;
}
.page-hero img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}
.page-hero:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(0,0,0,.83),rgba(0,0,0,.32));
}
.page-hero .container{
    position:relative;
    z-index:2;
    padding:80px 0 55px;
}
.breadcrumb{
    font-size:12px;
    color:#ccc;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:14px;
}
.page-hero h1{
    font-size:clamp(40px,6vw,70px);
    line-height:1;
    letter-spacing:-3px;
}
.detail-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:25px;
}
.detail-list div{
    border:1px solid #e0e0e0;
    padding:13px 15px;
    font-size:11px;
}
.detail-list div:before{
    content:"✓";
    color:var(--red);
    font-weight:900;
    margin-right:9px;
}
.process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    margin-top:45px;
}
.process{
    border:1px solid #ddd;
    padding:26px;
    background:#fff;
}
.process b{color:var(--red);font-size:10px}
.process h3{font-size:15px;margin:13px 0 7px}
.process p{font-size:11px;color:#777}

/* CONTACT */
.contact-grid{
    display:grid;
    grid-template-columns:1fr 1.25fr;
    gap:35px;
    align-items:stretch;
}
.contact-info{
    background:#111;
    color:#fff;
    padding:38px;
}
.contact-info h2{font-size:35px;line-height:1.05;margin-bottom:15px}
.contact-info p{font-size:12px;color:#aaa;margin-bottom:25px}
.contact-item{
    display:flex;
    gap:15px;
    padding:15px 0;
    border-top:1px solid #2b2b2b;
}
.contact-item .ci-icon{color:var(--red);font-size:20px}
.contact-item small{display:block;color:#777;font-size:12px;text-transform:uppercase;letter-spacing:1px}
.contact-item strong{font-size:12px}
.map-wrap{
    min-height:430px;
    border:1px solid #ddd;
    overflow:hidden;
}
.map-wrap iframe{width:100%;height:100%;min-height:430px;border:0}

/* BOOKING PAGE */
.booking-layout{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:35px;
}
.booking-info{
    background:#111;
    color:#fff;
    padding:40px;
}
.booking-info h2{font-size:38px;line-height:1.05}
.booking-info h2 span{color:var(--red)}
.booking-info p{color:#aaa;font-size:14px;margin:18px 0}
.booking-checks{list-style:none;margin-top:25px}
.booking-checks li{font-size:14px;margin:11px 0;color:#ddd}
.booking-checks li:before{content:"✓";color:var(--red);font-weight:900;margin-right:9px}
.booking-form{
    border:1px solid #ddd;
    padding:35px;
    background:#fff;
    box-shadow:var(--shadow);
}
.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}
.form-group{margin-bottom:17px}
.form-group.full{grid-column:1/-1}
.form-group label{
    display:block;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.5px;
    margin-bottom:6px;
}
.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    border:1px solid #ddd;
    background:#fafafa;
    padding:13px;
    outline:none;
    font-size:14px;
}
.form-group textarea{min-height:130px;resize:vertical}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{border-color:var(--red);background:#fff}
.form-status{font-size:11px;margin-top:10px;color:#555}

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

.footer {
    background: #090909;
    color: #fff;
    border-top: 4px solid var(--red);
}

.footer-main {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr;
    gap: 40px;
    padding: 60px 0 45px;
}

.footer-logo {
    width: 205px;
    height: 75px;
    object-fit: contain;
}

.footer p {
    color: #888;
    font-size: 14px;
    max-width: 320px;
    margin: 18px 0;
}

.footer h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 17px;
}

.footer a,
.footer span {
    display: block;
    color: #888;
    font-size: 14px;
    margin: 8px 0;
}

.footer a:hover {
    color: #fff;
}


/* =========================================
   FOOTER BOTTOM
========================================= */

.footer-bottom {
    border-top: 1px solid #242424;
    padding: 14px 0;
    color: #666;
    font-size: 9px;
    margin: 0;
    width: 100%;
}

.footer-bottom .container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px;
}

/* Keep copyright text on ONE LINE */
.footer-bottom > .container > span {
    display: inline-block !important;
    color: #666;
    font-size: 14px;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

/* Keep year inline with © */
.footer-bottom #year {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit;
    font-size: inherit;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .footer-bottom .container {
        flex-direction: column !important;
        justify-content: center !important;
        text-align: center;
        gap: 6px;
    }

    .footer-bottom > .container > span {
        white-space: normal !important;
    }
}
/* WHATSAPP */
.whatsapp-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1100;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #25D366;
    color: #ffffff;
    font-size: 32px;
    text-decoration: none;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}
.whatsapp-float:hover{transform:scale(1.08)}
.whatsapp-float:before{
    content:"";
    position:absolute;
    inset:-5px;
    border:2px solid rgba(37,211,102,.28);
    border-radius:50%;
    animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.18);opacity:0}}

/* BACK TO TOP */
.back-top{
    position:fixed;
    right:25px;
    bottom:92px;
    z-index:1090;
    width:38px;
    height:38px;
    display:none;
    place-items:center;
    border:0;
    background:#111;
    color:#fff;
    cursor:pointer;
}
.back-top.show{display:grid}

/* RESPONSIVE */
@media(max-width:1050px){
    .nav-menu{gap:16px}
    .service-grid{grid-template-columns:repeat(2,1fr)}
    .hero-inner{grid-template-columns:1fr 360px}
    .footer-main{grid-template-columns:2fr 1fr 1fr}
}
@media(max-width:800px){
    .topbar-left span:nth-child(2),.topbar-right{display:none}
    .nav{min-height:70px}
    .logo img{width:170px;height:58px}
    .menu-toggle{display:block}
    .nav-menu{
        position:absolute;
        left:0;
        right:0;
        top:70px;
        background:#fff;
        border-bottom:1px solid #ddd;
        padding:12px 18px 18px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:0;
    }
    .nav-menu.open{display:flex}
    .nav-menu a{padding:13px 4px;border-bottom:1px solid #eee}
    .nav-menu a:not(.nav-btn):after{display:none}
    .nav-btn{text-align:center;margin-top:8px}
    .hero,.hero-inner{min-height:auto}
    .hero-inner{grid-template-columns:1fr;padding:75px 0}
    .booking-card{max-width:550px}
    .hero-points{grid-template-columns:1fr 1fr}
    .two-col,.contact-grid,.booking-layout{grid-template-columns:1fr}
    .feature-grid{grid-template-columns:1fr 1fr}
    .process-grid{grid-template-columns:1fr 1fr}
    .footer-main{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
    .container{width:calc(100% - 28px)}
    .topbar{display:none}
    .hero h1{font-size:49px;letter-spacing:-2px}
    .hero-sub{font-size:13px}
    .hero-points{grid-template-columns:1fr}
    .service-grid,.feature-grid,.process-grid,.form-grid,.detail-list{grid-template-columns:1fr}
    .section{padding:70px 0}
    .section-title{font-size:37px}
    .page-hero{min-height:340px}
    .about-points{grid-template-columns:1fr}
    .footer-main{grid-template-columns:1fr}
    .footer-bottom .container{flex-direction:column}
    .whatsapp-float{right:15px;bottom:15px}
}

.social-icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    margin: 0;
    transition: 0.3s ease;
}

.social-icons a:hover {
    color: #ed1c24;
    transform: translateY(-2px);
}

/* SERVICES DROPDOWN */
.nav-dropdown{
    position:relative;
}
.nav-dropdown > .services-toggle{
    display:flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
}
.nav-dropdown > .services-toggle .arrow{
    font-size:9px;
    transition:transform .25s ease;
}
.nav-dropdown:hover > .services-toggle .arrow{
    transform:rotate(180deg);
}
.services-dropdown{
    position:absolute;
    top:calc(100% - 8px);
    left:50%;
    transform:translateX(-50%) translateY(10px);
    width:265px;
    background:#fff;
    border-top:3px solid var(--red);
    box-shadow:0 18px 45px rgba(0,0,0,.16);
    border-radius:0 0 6px 6px;
    padding:8px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
}
.nav-dropdown:hover .services-dropdown,
.nav-dropdown:focus-within .services-dropdown{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}
.services-dropdown a{
    display:flex !important;
    align-items:center;
    gap:10px;
    padding:11px 12px !important;
    color:#222 !important;
    font-size:14px;
    font-weight:700;
    border-radius:4px;
    white-space:normal;
}
.services-dropdown a:after{
    display:none !important;
}
.services-dropdown a:hover,
.services-dropdown a.active{
    background:#f5f5f5;
    color:var(--red) !important;
}
.services-dropdown a .service-menu-icon{
    width:28px;
    height:28px;
    flex:0 0 28px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#f1f1f1;
    color:var(--red);
    font-size:13px;
}
.services-dropdown .all-services{
    border-top:1px solid #eee;
    margin-top:5px;
    padding-top:12px !important;
    color:var(--red) !important;
}

@media(max-width:800px){
    .nav-dropdown{
        width:100%;
    }
    .nav-dropdown > .services-toggle{
        justify-content:space-between;
        width:100%;
        padding:13px 4px !important;
        border-bottom:1px solid #eee;
    }
    .services-dropdown{
        position:static;
        width:100%;
        transform:none;
        box-shadow:none;
        border-top:0;
        border-left:2px solid var(--red);
        border-radius:0;
        padding:4px 0 4px 10px;
        display:none;
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }
    .nav-dropdown.open .services-dropdown{
        display:block;
    }
    .nav-dropdown.open > .services-toggle .arrow{
        transform:rotate(180deg);
    }
    .services-dropdown a{
        padding:9px 10px !important;
        border-bottom:0 !important;
    }
}