/* =========================================================
   HAFELE SERVICE CENTER
   DARK RED / ORANGE GLASS THEME
========================================================= */

:root {

    --black: #070303;
    --black-soft: #0d0505;

    --red-dark: #250708;

    --red: #ff2528;
    --orange: #ff681e;

    --white: #ffffff;

    --text: #c2b4b4;
    --muted: #958585;

    --border: rgba(255,255,255,0.12);

}


/* =========================================================
   RESET
========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {

    font-family: "Inter", sans-serif;

    background: var(--black);

    color: var(--white);

    overflow-x: hidden;

}


a {
    text-decoration: none;

    color: inherit;
}


img {
    max-width: 100%;

    display: block;
}


/* =========================================================
   HEADER
========================================================= */

.main-header {

    position: relative;

    top: 18px;

    left: 50%;

    transform: translateX(-50%);

    width: 82%;

    max-width: 1380px;

    height: 84px;

    z-index: 1000;

    border: 1px solid var(--border);

    border-radius: 25px;

    background: rgba(17,7,7,0.82);

    backdrop-filter: blur(20px);

}


.header-inner {

    height: 100%;

    padding: 0 20px;

    display: flex;

    align-items: center;

}


/* =========================================================
   BRAND
========================================================= */

.brand {

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 250px;

}

.logo-box {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}


.brand-name strong {

    display: block;

    font-size: 16px;

    line-height: 1.2;

}


.brand-name small {

    display: block;

    color: #968686;

    font-size: 10px;

    letter-spacing: .5px;

    margin-top: 3px;

}


/* =========================================================
   NAV
========================================================= */

.main-nav {

    flex: 1;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 31px;

}


.main-nav a {

    color: #b4a5a5;

    font-size: 14px;

    white-space: nowrap;

    transition: .25s;

}


.main-nav a:hover {

    color: white;

}


/* =========================================================
   CALL BUTTON
========================================================= */

.header-call {

    height: 51px;

    padding: 0 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    border-radius: 30px;

    background:
        linear-gradient(
            100deg,
            var(--red),
            var(--orange)
        );

    font-size: 14px;

    font-weight: 700;

}


/* =========================================================
   HERO
========================================================= */

.hero {

    min-height: 760px;

    position: relative;

    overflow: hidden;

    padding:
        180px 0 20px;

    background:

        radial-gradient(
            circle at 3% 8%,
            rgba(255,25,30,.55),
            transparent 30%
        ),

        radial-gradient(
            circle at 97% 45%,
            rgba(255,88,20,.30),
            transparent 30%
        ),

        linear-gradient(
            110deg,
            #3c080a 0%,
            #190506 30%,
            #080303 60%,
            #160605 80%,
            #391307 100%
        );

}


.hero-container {

    width: 82%;

    max-width: 1380px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 55px;

    position: relative;

    z-index: 2;

}


/* glow */

.hero-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

    pointer-events: none;

}


.hero-glow-left {

    width: 300px;

    height: 300px;

    background: rgba(255,20,30,.15);

    left: -120px;

    top: 170px;

}


.hero-glow-right {

    width: 400px;

    height: 400px;

    background: rgba(255,80,15,.13);

    right: -150px;

    top: 250px;

}


/* =========================================================
   HERO LEFT
========================================================= */

.hero-content {

    position: relative;

}


.hero-small-icon {

    position: absolute;

    left: -55px;

    top: -65px;

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 25px;

    background: rgba(35,7,8,.75);

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

    color: var(--red);

    font-size: 25px;

}


.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 10px 19px;

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

    border-radius: 30px;

    background: rgba(22,7,7,.55);

    color: #e9dfdf;

    font-size: 12px;

    font-weight: 700;

}


.hero-badge span {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--red);

}


.hero-content h1 {

    margin-top: 30px;

    margin-bottom: 30px;

    font-size: clamp(60px,5.2vw,88px);

    line-height: 1.04;

    letter-spacing: -3px;

    font-weight: 800;

}


.hero-content h1 span {

    display: block;

    background:
        linear-gradient(
            90deg,
            #ff2528,
            #ff6a1d
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


.hero-subtitle {

    max-width: 720px;

    color: #c2b4b4;

    font-size: 22px;

    line-height: 1.5;

    margin-bottom: 17px;

}


.hero-description {

    max-width: 730px;

    color: #968686;

    font-size: 15px;

    line-height: 1.75;

}


/* =========================================================
   HERO BUTTONS
========================================================= */

.hero-buttons {

    display: flex;

    gap: 14px;

    margin-top: 36px;

}


.btn-primary {

    min-width: 205px;

    height: 57px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border-radius: 30px;

    background:
        linear-gradient(
            100deg,
            var(--red),
            var(--orange)
        );

    color: white;

    font-size: 14px;

    font-weight: 700;

}


.btn-secondary {

    min-width: 175px;

    height: 57px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border-radius: 30px;

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

    background: rgba(10,4,4,.55);

    color: white;

    font-size: 14px;

    font-weight: 600;

}


/* =========================================================
   HERO IMAGE
========================================================= */

.hero-visual {

    position: relative;

}


.hero-image-box {

    height: 505px;

    padding: 9px;

    border-radius: 30px;

    border: 1px solid rgba(255,50,40,.25);

    background: rgba(15,5,5,.80);

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

}


.hero-image-box img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 22px;

}


/* =========================================================
   SAME DAY
========================================================= */

.same-day-card {

    position: absolute;

    right: 18px;

    top: -18px;

    height: 76px;

    min-width: 200px;

    padding: 0 17px;

    display: flex;

    align-items: center;

    gap: 12px;

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

    border-radius: 23px;

    background: rgba(24,8,8,.94);

    backdrop-filter: blur(15px);

}


.floating-icon {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--red),
            var(--orange)
        );

}


.same-day-card strong {

    display: block;

    font-size: 14px;

}


.same-day-card small {

    display: block;

    color: #968686;

    font-size: 10px;

}


/* =========================================================
   RATING
========================================================= */

.rating-card {

    position: absolute;

    left: 30px;

    bottom: -25px;

    height: 76px;

    min-width: 275px;

    padding: 0 20px;

    display: flex;

    align-items: center;

    gap: 14px;

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

    border-radius: 23px;

    background: rgba(23,8,8,.96);

}


.stars {

    color: var(--red);

    font-size: 19px;

    letter-spacing: 1px;

}


.rating-card strong {

    display: block;

    font-size: 15px;

}


.rating-card small {

    display: block;

    color: #948484;

    font-size: 10px;

}


/* =========================================================
   STATS
========================================================= */

.stats-section {

    padding: 0 0 80px;

    background: #090303;

}


.stats-container {

    width: 82%;

    max-width: 1380px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 20px;

}


.stat-card {

    height: 177px;

    padding: 24px;

    position: relative;

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

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(31,9,9,.88),
            rgba(19,7,7,.84)
        );

}


.stat-card > i {

    display: block;

    color: var(--red);

    font-size: 24px;

    margin-bottom: 10px;

}


.stat-card strong {

    display: block;

    color: #ff302e;

    font-size: 36px;

    line-height: 1.15;

}


.stat-card span {

    color: #aa9a9a;

    font-size: 14px;

}


.stat-line {

    position: absolute;

    left: 24px;

    right: 24px;

    bottom: 23px;

    height: 3px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            var(--red),
            var(--orange)
        );

}

/* =========================================================
   ABOUT
========================================================= */

.about-section {

    padding: 10px 8% 45px;

    background:


        radial-gradient(
            circle at 15% 45%,
            rgba(255, 25, 30, 0.16),
            transparent 35%
        ),

        radial-gradient(
            circle at 85% 70%,
            rgba(255, 60, 20, 0.10),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #120404 0%,
            #090303 50%,
            #100404 100%
        );

}

.about-container {

    max-width: 1200px;

    margin: auto;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

}


.section-tag {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 8px 17px;

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

    border-radius: 30px;

    color: var(--red);

    background: rgba(20,6,6,.55);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.3px;

}


.section-tag span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--red);

}


.about-left h2 {

    margin: 22px 0;

    font-size: 52px;

    line-height: 1.08;

    letter-spacing: -2px;

}


.about-left h2 span {

    display: block;

    background:
        linear-gradient(
            90deg,
            var(--red),
            var(--orange)
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


.about-left p {

    color: #968686;

    font-size: 14px;

    line-height: 1.8;

    margin-bottom: 12px;

}


.about-points {

    margin-top: 25px;

}


.about-points div {

    color: #c4b6b6;

    font-size: 12px;

    margin-bottom: 10px;

}


.about-points i {

    color: var(--red);

    margin-right: 8px;

}


/* about stats */

.about-right {

    padding: 38px;

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 20px;

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

    border-radius: 28px;

    background: rgba(22,7,7,.75);

}


.about-stat {

    height: 115px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

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

    border-radius: 23px;

    background: rgba(27,10,10,.80);

}


.about-stat strong {

    color: #ff382d;

    font-size: 35px;

}


.about-stat span {

    color: #998989;

    font-size: 11px;

}


/* =========================================================
   GENERAL HEADING
========================================================= */

.section-heading {

    max-width: 1000px;

    margin: 0 auto 65px;

    text-align: center;

}


.section-heading h2 {

    margin: 17px 0;

    font-size: 52px;

    line-height: 1.08;

    letter-spacing: -2px;

}


.section-heading h2 span {

    color: var(--red);

    background:
        linear-gradient(
            90deg,
            var(--red),
            var(--orange)
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


.section-heading p {

    color: #a08f8f;

    font-size: 16px;

    line-height: 1.6;

}


/* =========================================================
   SERVICES
========================================================= */
.services-section {

    padding: 55px 7% 50px;

    background:
        linear-gradient(
            180deg,
            #100404,
            #090303
        );

}


.services-grid {

    max-width: 1380px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 30px;

}


.service-card {

    overflow: hidden;

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

    border-radius: 28px;

    background: #130909;

}

.service-image {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
    background: #090505;
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.service-icon {

    position: absolute;

    left: 20px;

    bottom: 20px;

    width: 61px;

    height: 61px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #ff2929,
            #ff681e
        );

    color: white;

    font-size: 24px;

}


.service-placeholder {

    display: flex;

    align-items: center;

    justify-content: center;

    color: #382121;

    font-size: 75px;

}


.service-content {

    padding: 25px 30px 30px;

}


.service-content h3 {

    font-size: 22px;

    margin-bottom: 10px;

}


.service-content p {

    color: #9a8989;

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   WHY CHOOSE US
========================================================= */

.why-section {

    padding: 50px 8%;

    background: #090303;

}


.why-grid {

    max-width: 1380px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 20px;

}


.why-card {

    min-height: 230px;

    padding: 30px;

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

    border-radius: 25px;

    background: rgba(22,8,8,.72);

}


.why-icon {

    width: 61px;

    height: 61px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255,40,30,.45);

    border-radius: 50%;

    background: rgba(255,25,25,.06);

    color: var(--red);

    font-size: 24px;

    margin-bottom: 22px;

}


.why-card h3 {

    font-size: 18px;

    margin-bottom: 10px;

}


.why-card p {

    color: #9b8a8a;

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   PROCESS
========================================================= */

.process-section {

    position: relative;

    padding: 110px 7%;

    background:
        linear-gradient(
            120deg,
            #210607,
            #0a0303 55%,
            #200b05
        );

}


.process-grid {

    max-width: 1050px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 60px 150px;

}


.process-card {

    min-height: 155px;

    padding: 28px 30px;

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

    border-radius: 28px;

    background: rgba(20,7,7,.75);

    position: relative;

}


.process-card span {

    display: block;

    color: var(--red);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 10px;

}


.process-card i {

    position: absolute;

    right: -60px;

    top: 50%;

    transform: translateY(-50%);

    width: 61px;

    height: 61px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--red),
            var(--orange)
        );

    font-size: 23px;

}


.process-card h3 {

    font-size: 20px;

    margin-bottom: 8px;

}


.process-card p {

    color: #9c8c8c;

    font-size: 14px;

}



.process-line {

    position: absolute;

    width: 1px;

    height: 570px;

    background: rgba(255,40,30,.35);

    left: 50%;

    top: 310px;

}


/* =========================================================
   BRANDS
========================================================= */

.brands-section {

    padding: 50px 0 0;

    background: #090303;

    overflow: hidden;

}

.brand-boxes div:hover {
    background: #e50914;
    color: #ffffff;
    border-color: #e50914;
    transform: translateY(-4px);
}


/* =========================================================
   MOVING BRANDS
========================================================= */

.brand-marquee {

    width: 100%;

    overflow: hidden;

    margin-top: 80px;

    padding: 22px 0;

    border-top: 1px solid rgba(255,255,255,.04);

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

}


.brand-track {

    display: flex;

    align-items: center;

    width: max-content;

    white-space: nowrap;

    animation: moveBrands 28s linear infinite;

}


.brand-track span {

    color: #5b4e4e;

    font-size: 34px;

    font-weight: 700;

    margin: 0 22px;

}


.brand-track b {

    color: var(--red);

    font-size: 20px;

}


@keyframes moveBrands {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* =========================================================
   AREAS
========================================================= */

.areas-section {

    padding: 110px 8%;

    background:
        linear-gradient(
            180deg,
            #100404,
            #090303
        );

}


.areas-grid {

    max-width: 1150px;

    margin: auto;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 12px;

}



/* =========================================================
   TESTIMONIAL SLIDER
========================================================= */

.testimonial-section {

    padding: 30px 8%;

    background: #090303;

    overflow: hidden;

}


/* slider main area */

.testimonial-slider {

    max-width: 1100px;

    margin: auto;

    display: flex;

    align-items: center;

    gap: 25px;

}


/* viewport */

.testimonial-window {

    width: 100%;

    overflow: hidden;

}


/* moving cards */

.testimonial-track {

    display: flex;

    width: 100%;

    transition: transform .7s cubic-bezier(.77,0,.18,1);

}


/* each card */

.testimonial-card {

    flex: 0 0 100%;

    min-height: 380px;

    padding: 60px;

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

    border-radius: 30px;

    background:

        linear-gradient(
            145deg,
            rgba(25,9,9,.96),
            rgba(16,6,6,.92)
        );

    position: relative;

}


/* subtle floating effect */

.testimonial-card {

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

}


/* stars */

.testimonial-stars {

    color: #ff2929;

    font-size: 25px;

    letter-spacing: 3px;

    margin-bottom: 32px;

}


/* testimonial text */

.testimonial-card > p {

    max-width: 850px;

    color: #eee7e7;

    font-size: 25px;

    line-height: 1.65;

}


/* customer */

.customer {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 32px;

}


/* avatar */

.customer-avatar {

    width: 61px;

    height: 61px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:

        linear-gradient(
            135deg,
            #ff2929,
            #ff681e
        );

    color: white;

    font-size: 17px;

    font-weight: 700;

}


/* name */

.customer strong {

    display: block;

    color: white;

    font-size: 15px;

}


/* location */

.customer small {

    display: block;

    margin-top: 5px;

    color: #968686;

    font-size: 12px;

}


/* =========================================================
   TESTIMONIAL ARROWS
========================================================= */

.testimonial-arrow {

    width: 56px;

    height: 56px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

    background: rgba(20,7,7,.8);

    color: white;

    cursor: pointer;

    font-size: 16px;

    transition: .3s;

}


.testimonial-arrow:hover {

    background:
        linear-gradient(
            135deg,
            #ff2528,
            #ff681e
        );

    border-color: transparent;

}


/* =========================================================
   TESTIMONIAL DOTS
========================================================= */

.testimonial-dots {

    margin-top: 30px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

}


.testimonial-dots button {

    width: 10px;

    height: 10px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #443838;

    cursor: pointer;

    transition: .35s;

}


.testimonial-dots button.active {

    width: 40px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #ff2528,
            #ff681e
        );

}


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

@media (max-width: 700px) {

    .testimonial-section {

        padding: 50px 5%;

    }


    .testimonial-slider {

        gap: 10px;

    }


    .testimonial-card {

        min-height: 340px;

        padding: 32px 25px;

    }


    .testimonial-card > p {

        font-size: 17px;

        line-height: 1.6;

    }


    .testimonial-stars {

        font-size: 20px;

    }


    .testimonial-arrow {

        width: 42px;

        height: 42px;

        font-size: 13px;

    }

}


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

.faq-section {

    padding: 30px 8%;

    background: #0c0303;

}


.faq-list {

    max-width: 900px;

    margin: auto;

}


.faq-list details {

    margin-bottom: 12px;

    padding: 0 25px;

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

    border-radius: 18px;

    background: rgba(24,8,8,.75);

}


.faq-list summary {

    padding: 23px 0;

    cursor: pointer;

    font-size: 15px;

    font-weight: 600;

    list-style: none;

}


.faq-list summary::-webkit-details-marker {

    display: none;

}


.faq-list summary::after {

    content: "+";

    float: right;

    color: var(--red);

    font-size: 22px;

}


.faq-list details[open] summary::after {

    content: "−";

}


.faq-list details p {

    padding-bottom: 22px;

    color: #988888;

    font-size: 13px;

    line-height: 1.7;

}


/* =========================================================
   BOOKING
========================================================= */

.booking-section {

    padding: 50px 8%;

    background:
        radial-gradient(
            circle at 10% 50%,
            rgba(255,30,30,.18),
            transparent 35%
        ),

        linear-gradient(
            110deg,
            #330708,
            #130404
        );

}


.booking-container {

    max-width: 1250px;

    margin: auto;

    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 70px;

    align-items: center;

}


.booking-left h2 {

    margin: 22px 0;

    font-size: 50px;

    line-height: 1.08;

}


.booking-left h2 span {

    display: block;

    background:
        linear-gradient(
            90deg,
            var(--red),
            var(--orange)
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


.booking-left p {

    color: #9b8b8b;

    font-size: 14px;

    line-height: 1.8;

}


.booking-points {

    margin-top: 25px;

}


.booking-points div {

    color: #c5b7b7;

    font-size: 13px;

    margin-bottom: 11px;

}


.booking-points i {

    color: var(--red);

    margin-right: 8px;

}


/* =========================================================
   FORM
========================================================= */

.booking-form {

    padding: 32px;

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

    border-radius: 25px;

    background: rgba(19,7,7,.90);

}


.booking-form input,
.booking-form select,
.booking-form textarea {

    width: 100%;

    margin-bottom: 15px;

    padding: 14px;

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

    border-radius: 8px;

    outline: none;

    background: rgba(255,255,255,.035);

    color: white;

    font-size: 13px;

}


.booking-form select option {

    background: #160606;

}


.booking-form textarea {

    height: 120px;

    resize: vertical;

}


.booking-form .btn-primary {

    width: 100%;

    border: 0;

    cursor: pointer;

}


/* =========================================================
   CONTACT
========================================================= */

.contact-section {

    padding: 50px 8%;

    background: #090303;

}


.contact-container {

    max-width: 1380px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

}


.contact-info {

    padding: 45px;

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

    border-radius: 28px;

    background: rgba(21,7,7,.75);

}


.contact-info h2 {

    font-size: 30px;

    margin-bottom: 30px;

}


.contact-detail {

    display: flex;

    gap: 15px;

    margin-bottom: 20px;

    color: #b8a8a8;

}


.contact-detail i {

    color: var(--red);

    font-size: 18px;

}


.contact-buttons {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;

    margin-top: 40px;

}


.contact-buttons .btn-primary,
.contact-buttons .btn-secondary {

    min-width: 0;

    width: 100%;

}


/* map */

.map-box {

    min-height: 420px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 28px;

    background:

        linear-gradient(
            rgba(35,8,8,.75),
            rgba(12,4,4,.90)
        ),

        repeating-linear-gradient(
            45deg,
            #211010 0px,
            #211010 2px,
            #140707 2px,
            #140707 30px
        );

}


.map-box div {

    text-align: center;

    color: var(--red);

}


.map-box i {

    display: block;

    font-size: 50px;

    margin-bottom: 10px;

}


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

.footer {

    padding-top: 50px;

    background: #070202;

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

}


.footer-container {

    width: 82%;

    max-width: 1380px;

    margin: auto;

    padding-bottom: 65px;

    display: grid;

    grid-template-columns: 1.5fr 1fr 1fr 1fr;

    gap: 50px;

}


.footer-logo {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

}


.footer-logo strong {

    display: block;

    font-size: 16px;

}


.footer-logo small {

    display: block;

    color: #8f7e7e;

    font-size: 10px;

}


.footer-brand p {

    max-width: 340px;

    color: #857575;

    font-size: 12px;

    line-height: 1.8;

}


.footer-column h3 {

    font-size: 15px;

    margin-bottom: 20px;

}


.footer-column a,
.footer-column p {

    display: block;

    color: #8f7f7f;

    font-size: 12px;

    margin-bottom: 11px;

}


/* =========================================================
   SOCIAL
========================================================= */

.social-icons {

    display: flex;

    gap: 10px;

    margin-top: 22px;

}


.social-icons a {

    width: 43px;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

    color: #aaa;

    transition: .3s;

}


.social-icons a:hover {

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--red),
            var(--orange)
        );

}


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

.footer-bottom {

    min-height: 75px;

    padding: 0 8%;

    display: flex;

    align-items: center;

    justify-content: space-between;

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

}


.footer-bottom p {

    color: #746565;

    font-size: 11px;

}


.footer-bottom a {

    padding: 10px 18px;

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

    border-radius: 30px;

    color: #8e7e7e;

    font-size: 11px;

}


.disclaimer {

    padding: 18px 8%;

    border-top: 1px solid rgba(255,255,255,.07);

    color: #655757;

    font-size: 10px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1150px) {

    .main-header,
    .hero-container,
    .stats-container,
    .footer-container {

        width: 90%;

    }


    .main-nav {

        gap: 15px;

    }


    .main-nav a {

        font-size: 11px;

    }


    .brand {

        min-width: 190px;

    }


    .services-grid {

        grid-template-columns: repeat(2,1fr);

    }


    .why-grid {

        grid-template-columns: repeat(2,1fr);

    }


    .brand-boxes {

        grid-template-columns: repeat(4,1fr);

    }

}


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

@media (max-width: 850px) {

    .main-header {

        width: 94%;

        height: 70px;

    }


    .main-nav {

        display: none;

    }


    .header-call {

        margin-left: auto;

        height: 44px;

        padding: 0 15px;

        font-size: 11px;

    }



    .hero {

        padding-top: 135px;

    }


    .hero-container {

        width: 90%;

        grid-template-columns: 1fr;

    }


    .hero-content {

        text-align: center;

    }


    .hero-small-icon {

        display: none;

    }


    .hero-content h1 {

        font-size: 54px;

    }


    .hero-subtitle,
    .hero-description {

        margin-left: auto;

        margin-right: auto;

    }


    .hero-buttons {

        justify-content: center;

    }


    .stats-container {

        width: 90%;

        grid-template-columns: repeat(2,1fr);

    }


    .about-container {

        grid-template-columns: 1fr;

    }


    .process-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .process-card:nth-child(even) {

        transform: none;

    }


    .process-line {

        display: none;

    }


    .process-card i {

        right: 20px;

    }


    .booking-container {

        grid-template-columns: 1fr;

    }


    .contact-container {

        grid-template-columns: 1fr;

    }


    .footer-container {

        grid-template-columns: repeat(2,1fr);

    }

}


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

@media (max-width: 550px) {

    .main-header {

        top: 8px;

    }


    .logo-box {

        width: 43px;

        height: 43px;

        font-size: 15px;

    }


    .brand-name strong {

        font-size: 12px;

    }


    .brand-name small {

        font-size: 8px;

    }


    .header-call {

        padding: 0 11px;

        font-size: 10px;

    }


    .hero {

        padding-top: 115px;

    }


    .hero-content h1 {

        font-size: 43px;

        letter-spacing: -1.5px;

    }


    .hero-subtitle {

        font-size: 16px;

    }


    .hero-description {

        font-size: 12px;

    }


    .hero-buttons {

        flex-direction: column;

    }


    .btn-primary,
    .btn-secondary {

        width: 100%;

        min-width: 0;

    }


    .hero-image-box {

        height: 350px;

    }


    .same-day-card {

        right: 5px;

        top: -12px;

        min-width: 165px;

        height: 62px;

    }


    .rating-card {

        left: 5px;

        bottom: -20px;

        min-width: 220px;

        height: 60px;

    }


    .stats-container {

        grid-template-columns: repeat(2,1fr);

        gap: 10px;

    }


    .stat-card {

        height: 135px;

        padding: 17px;

    }


    .stat-card strong {

        font-size: 24px;

    }


    .stat-card span {

        font-size: 10px;

    }


    .about-section {

        padding: 20px 5% 75px;

    }


    .about-left h2 {

        font-size: 36px;

    }


    .about-right {

        padding: 15px;

        gap: 10px;

    }


    .section-heading h2 {

        font-size: 36px;

    }


    .section-heading p {

        font-size: 13px;

    }


    .services-section,
    .why-section,
    .process-section,
    .areas-section,
    .testimonial-section,
    .faq-section,
    .contact-section {

        padding: 75px 5%;

    }


    .services-grid {

        grid-template-columns: 1fr;

    }

    .why-grid {

       grid-template-columns: repeat(2,1fr);

    }


    .brand-boxes {

        width: 90%;

        grid-template-columns: repeat(3,1fr);

    }


    .brand-boxes div {

        height: 100px;

        font-size: 14px;

    }


    .brand-track span {

        font-size: 24px;

        margin: 0 14px;

    }


    .testimonial-card {

        padding: 30px;

        min-height: auto;

    }


    .testimonial-card > p {

        font-size: 18px;

    }


    .booking-section {

        padding: 75px 5%;

    }


    .booking-left h2 {

        font-size: 36px;

    }


    .contact-buttons {

        grid-template-columns: 1fr;

    }


    .footer-container {

        width: 90%;

        grid-template-columns: 1fr;

    }


    .footer-bottom {

        padding: 20px 5%;

        flex-direction: column;

        gap: 15px;

        align-items: flex-start;

    }


    .disclaimer {

        padding: 18px 5%;

    }




    .why-card {
    min-height: 220px;
    padding: 20px;
}

.why-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
    margin-bottom: 16px;
}

.why-card h3 {
    font-size: 15px;
}

.why-card p {
    font-size: 11px;
    line-height: 1.6;
}

}

@media (max-width: 900px) {

    .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;

        width: 280px !important;
        height: 100vh;

        display: flex !important;
        flex-direction: column;
        align-items: flex-start;

        padding: 90px 25px 30px;

        background: #000000;

        z-index: 99999;

        transform: translateX(100%);

        transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);

        visibility: hidden;
    }

    .main-nav.mobile-open {
        transform: translateX(0);
        visibility: visible;
    }

    .main-nav a {
        width: 100%;
        padding: 13px 10px;

        color: #ffffff;
        font-size: 15px;

        border-bottom: 1px solid rgba(255,255,255,0.12);
    }

   
}

/* =========================================
   FLOATING CONTACT BUTTONS - MOBILE FIX
========================================= */

.floating-buttons {
    position: fixed !important;

    right: 12px !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;

    width: 48px !important;
    height: auto !important;

    gap: 10px !important;

    z-index: 2147483647 !important;

    visibility: visible !important;
    opacity: 1 !important;

    transform: none !important;

    pointer-events: auto !important;
}

.floating-buttons a {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;

    height: 48px !important;
    min-height: 48px !important;

    padding: 0 !important;
    margin: 0 !important;

    flex-shrink: 0 !important;

    border-radius: 50% !important;
    box-sizing: border-box !important;

    overflow: hidden !important;

    visibility: visible !important;
    opacity: 1 !important;
}

.floating-buttons a i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 48px !important;
    height: 48px !important;

    font-size: 19px !important;
    margin: 0 !important;
}

.floating-buttons a span {
    display: none !important;
}

.floating-buttons .floating-enquiry {
    background: #ff5a1f !important;
}

.floating-buttons .whatsapp {
    background: #25D366 !important;
}

.floating-buttons .floating-call {
    background: #e52525 !important;
}

/* DESKTOP */
@media (min-width: 851px) {
    .floating-buttons {
        right: 18px !important;
        bottom: 20px !important;
        width: 48px !important;
    }
}

/* =====================================================
   SERVICE AREAS
===================================================== */

.areas-section {
    padding: 100px 6%;
    background:
        linear-gradient(
            135deg,
            #210708 0%,
            #100303 50%,
            #180604 100%
        );
}


/* HEADING */

.areas-section .section-heading {
    text-align: center;
    margin-bottom: 70px;
}

.areas-section .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 9px 18px;

    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 30px;

    color: #ff2929;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
}

.areas-section .section-tag span {
    width: 8px;
    height: 8px;

    background: #ff2929;

    border-radius: 50%;
}


.areas-section .section-heading h2 {
    margin: 28px 0 20px;

    color: #ffffff;

    font-size: 56px;
    line-height: 1.1;
    font-weight: 800;
}

.areas-section .section-heading h2 span {
    color: #ff2929;
}


.areas-section .section-heading p {
    margin: 0;

    color: #b9aaaa;

    font-size: 20px;
    line-height: 1.6;
}


/* AREA GRID */

.areas-grid {
    max-width: 1460px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 15px;
}


/* AREA BOX */

.area-box {
    min-height: 58px;

    padding: 0 20px;

    display: flex;
    align-items: center;

    gap: 14px;

    background: rgba(20, 8, 8, 0.75);

    border: 1px solid rgba(255,255,255,0.12);

    border-radius: 30px;

    color: #eeeeee;

    font-size: 17px;
    font-weight: 600;

    transition: all 0.3s ease;
}

.area-box i {
    color: #ff2528;
    font-size: 12px;
}


.area-box:hover {
    border-color: rgba(255,40,40,1.2);

    background: rgba(35,10,10,0.9);

    transform: translateY(-2px);
}


/* BOTTOM TEXT */

.areas-bottom-text {
    margin-top: 32px;

    text-align: center;

    color: #a99a9a;

    font-size: 18px;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {

    .areas-section {
        padding: 80px 5%;
    }

    .areas-section .section-heading h2 {
        font-size: 45px;
    }

    .areas-section .section-heading p {
        font-size: 17px;
    }

    .areas-grid {
        grid-template-columns: repeat(4, 1fr);
    }

}


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

@media (max-width: 650px) {

    .areas-section {
        padding: 70px 5%;
    }

    .areas-section .section-heading {
        margin-bottom: 45px;
    }

    .areas-section .section-heading h2 {
        font-size: 34px;
    }

    .areas-section .section-heading p {
        font-size: 15px;
    }

    .areas-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
}

    .area-box {
    min-height: 50px;
    padding: 0 8px;
    gap: 6px;
    font-size: 11px;
}

    .areas-bottom-text {
        font-size: 15px;
        line-height: 1.6;
    }

}

@media (max-width: 850px) {
    .brand-boxes {
        width: 90%;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .brand-boxes > div {
        width: 100%;
        height: 100px;
        box-sizing: border-box;
        font-size: 14px;
    }
}

/* Laptop and above: 3 boxes */
@media (min-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

/* Tablet: 2 boxes */
@media (max-width: 1023px) and (min-width: 651px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Phone: 1 box */
@media (max-width: 650px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   SERVICE IMAGE SLIDER
===================================================== */

.service-slider {
    overflow: hidden;
    position: relative;
}

.service-slides {
    display: flex;
    width: 300%;
    height: 100%;
    animation: serviceSlide 9s infinite;
}

.service-slides img {
    width: 33.333333%;
    height: 100%;
    flex-shrink: 0;
    object-fit: cover;
    object-position: center;
    display: block;
}


/* =====================================================
   CHIMNEY + HOB SLIDE ANIMATION
===================================================== */

@keyframes serviceSlide {

    0% {
        transform: translateX(0);
    }

    28% {
        transform: translateX(0);
    }

    33% {
        transform: translateX(-33.333333%);
    }

    61% {
        transform: translateX(-33.333333%);
    }

    66% {
        transform: translateX(-66.666666%);
    }

    94% {
        transform: translateX(-66.666666%);
    }

    100% {
        transform: translateX(0);
    }

}

/* =========================================================
   WORK PROCESS - SCROLL REVEAL
========================================================= */

/* Start hidden */

.process-card {
    opacity: 0;

    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}


/* LEFT SIDE CARDS */

.process-card:nth-child(odd) {
    transform: translateX(-100px);
}


/* RIGHT SIDE CARDS */

.process-card:nth-child(even) {
    transform: translateX(100px);
}


/* When visible */

.process-card.process-show {
    opacity: 1;
    transform: translateX(0);
}


/* Slight delay for each card */

.process-card:nth-child(1) {
    transition-delay: 0.05s;
}

.process-card:nth-child(2) {
    transition-delay: 0.15s;
}

.process-card:nth-child(3) {
    transition-delay: 0.25s;
}

.process-card:nth-child(4) {
    transition-delay: 0.35s;
}

.process-card:nth-child(5) {
    transition-delay: 0.45s;
}

.process-card:nth-child(6) {
    transition-delay: 0.55s;
}


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

@media (max-width: 850px) {

    .process-card:nth-child(odd),
    .process-card:nth-child(even) {

        transform: translateY(60px);

    }

    .process-card.process-show {

        transform: translateY(0);

    }

}

/* =====================================================
   HERO - SCROLL REVEAL ANIMATION
===================================================== */

/* HERO LEFT - START FROM LEFT */

.hero-content {
    opacity: 0;
    transform: translateX(-100px);

    transition:
        opacity 1.4s ease,
        transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}


/* HERO RIGHT - START FROM RIGHT */

.hero-visual {
    opacity: 0;
    transform: translateX(100px);

    transition:
        opacity 1.4s ease,
        transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}


/* WHEN HERO BECOMES VISIBLE */

.hero.hero-show .hero-content,
.hero.hero-show .hero-visual {
    opacity: 1;
    transform: translateX(0);
}


/* SMALL DELAY FOR RIGHT SIDE */

.hero.hero-show .hero-visual {
    transition-delay: 0.25s;
}

/* =====================================================
   ABOUT - CENTER SCROLL REVEAL
===================================================== */
.about-left {

    width: 100%;

    max-width: 1100px;

    opacity: 0;

    transform: translateY(80px);

    transition:
        opacity 1.5s ease,
        transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);

}


/* WHEN ABOUT BECOMES VISIBLE */

.about-section.about-show .about-left {

    opacity: 1;

    transform: translateY(0);

}


/* CENTER THE CONTENT */

.about-left {

    width: 100%;

    max-width: 900px;

}


.about-left .section-tag {

    margin-left: auto;
    margin-right: auto;

}


.about-left h2 {

    text-align: center;

}


.about-left p {

    text-align: center;

}


.about-points {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 12px 30px;

}


.about-points div {

    margin-bottom: 0;

}

/* =====================================================
   ABOUT - LAPTOP SIZE
===================================================== */

@media (min-width: 851px) {

    .about-left h2 {
        font-size: 58px;
    }

    .about-left p {
        font-size: 16px;
        line-height: 1.85;
    }

    .about-points div {
        font-size: 14px;
    }

}

/* =====================================================
   SERVICES + WHY CHOOSE US - SCROLL REVEAL
===================================================== */

/* SERVICES */
.services-section .section-heading,
.services-section .service-card {
    opacity: 0;
    transform: translateY(60px);
    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* WHY CHOOSE US */
.why-section .section-heading,
.why-section .why-card {
    opacity: 0;
    transform: translateY(60px);
    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}


/* WHEN VISIBLE */

.services-section.services-show .section-heading,
.services-section.services-show .service-card,
.why-section.why-show .section-heading,
.why-section.why-show .why-card {
    opacity: 1;
    transform: translateY(0);
}


/* SERVICES CARD DELAY */

.services-section.services-show .service-card:nth-child(1) {
    transition-delay: 0.10s;
}

.services-section.services-show .service-card:nth-child(2) {
    transition-delay: 0.20s;
}

.services-section.services-show .service-card:nth-child(3) {
    transition-delay: 0.30s;
}

.services-section.services-show .service-card:nth-child(4) {
    transition-delay: 0.40s;
}

.services-section.services-show .service-card:nth-child(5) {
    transition-delay: 0.50s;
}

.services-section.services-show .service-card:nth-child(6) {
    transition-delay: 0.60s;
}

.services-section.services-show .service-card:nth-child(7) {
    transition-delay: 0.70s;
}

.services-section.services-show .service-card:nth-child(8) {
    transition-delay: 0.80s;
}

.services-section.services-show .service-card:nth-child(9) {
    transition-delay: 0.90s;
}

.services-section.services-show .service-card:nth-child(10) {
    transition-delay: 1s;
}


/* WHY CHOOSE US CARD DELAY */

.why-section.why-show .why-card:nth-child(1) {
    transition-delay: 0.10s;
}

.why-section.why-show .why-card:nth-child(2) {
    transition-delay: 0.20s;
}

.why-section.why-show .why-card:nth-child(3) {
    transition-delay: 0.30s;
}

.why-section.why-show .why-card:nth-child(4) {
    transition-delay: 0.40s;
}

/* =====================================================
   REMAINING SECTIONS - SCROLL REVEAL
===================================================== */

/* -----------------------------------------------------
   BRANDS
----------------------------------------------------- */

.brands-section .section-heading,
.brands-section .brand-boxes,
.brands-section .brand-marquee {
    opacity: 0;
    transform: translateY(60px);

    transition:
        opacity 1.2s ease,
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.brands-section.brands-show .section-heading,
.brands-section.brands-show .brand-boxes,
.brands-section.brands-show .brand-marquee {
    opacity: 1;
    transform: translateY(0);
}

.brands-section.brands-show .brand-boxes {
    transition-delay: 0.20s;
}

.brands-section.brands-show .brand-marquee {
    transition-delay: 0.40s;
}


/* -----------------------------------------------------
   SERVICE AREAS
----------------------------------------------------- */

.areas-section .section-heading,
.areas-section .areas-grid,
.areas-section .areas-bottom-text {
    opacity: 0;
    transform: translateY(60px);

    transition:
        opacity 1.2s ease,
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.areas-section.areas-show .section-heading,
.areas-section.areas-show .areas-grid,
.areas-section.areas-show .areas-bottom-text {
    opacity: 1;
    transform: translateY(0);
}

.areas-section.areas-show .areas-grid {
    transition-delay: 0.20s;
}

.areas-section.areas-show .areas-bottom-text {
    transition-delay: 0.40s;
}


/* -----------------------------------------------------
   TESTIMONIALS
----------------------------------------------------- */

.testimonial-section .section-heading,
.testimonial-section .testimonial-slider,
.testimonial-section .testimonial-dots {
    opacity: 0;
    transform: translateY(60px);

    transition:
        opacity 1.2s ease,
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.testimonial-section.testimonial-show .section-heading,
.testimonial-section.testimonial-show .testimonial-slider,
.testimonial-section.testimonial-show .testimonial-dots {
    opacity: 1;
    transform: translateY(0);
}

.testimonial-section.testimonial-show .testimonial-slider {
    transition-delay: 0.20s;
}

.testimonial-section.testimonial-show .testimonial-dots {
    transition-delay: 0.40s;
}


/* -----------------------------------------------------
   FAQ
----------------------------------------------------- */

.faq-section .section-heading,
.faq-section .faq-list {
    opacity: 0;
    transform: translateY(60px);

    transition:
        opacity 1.2s ease,
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-section.faq-show .section-heading,
.faq-section.faq-show .faq-list {
    opacity: 1;
    transform: translateY(0);
}

.faq-section.faq-show .faq-list {
    transition-delay: 0.20s;
}


/* -----------------------------------------------------
   BOOK SERVICE
----------------------------------------------------- */

.booking-section .booking-left,
.booking-section .booking-form {
    opacity: 0;
    transform: translateY(60px);

    transition:
        opacity 1.2s ease,
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.booking-section.booking-show .booking-left,
.booking-section.booking-show .booking-form {
    opacity: 1;
    transform: translateY(0);
}

.booking-section.booking-show .booking-form {
    transition-delay: 0.25s;
}



/* -----------------------------------------------------
   CONTACT
----------------------------------------------------- */

.contact-section .section-heading,
.contact-section .contact-info,
.contact-section .map-box {
    opacity: 0;
    transform: translateY(60px);

    transition:
        opacity 1.2s ease,
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-section.contact-show .section-heading,
.contact-section.contact-show .contact-info,
.contact-section.contact-show .map-box {
    opacity: 1;
    transform: translateY(0);
}

.contact-section.contact-show .contact-info {
    transition-delay: 0.20s;
}

.contact-section.contact-show .map-box {
    transition-delay: 0.40s;
}


/* =====================================================
   BRANDS - FIXED LOGO SIZE & BOX
===================================================== */

.brand-boxes {
    width: 90%;
    max-width: 1380px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.brand-item {
    width: 100%;
    height: 150px;

    padding: 15px;
    box-sizing: border-box;

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

    background: rgba(22, 8, 8, 0.75);

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;

    overflow: hidden;

    transition: 0.35s ease;
}

.brand-logo {
    width: 150px;
    height: 90px;

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

    overflow: hidden;
    flex-shrink: 0;

    background: #ffffff;

    border-radius: 12px;

    padding: 10px;
    box-sizing: border-box;
}

.brand-logo img {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
    object-position: center;
}


/* REMOVE DUPLICATE BRAND NAME */
.brand-item span {
    display: none !important;
}


/* HOVER */
.brand-item:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 80, 30, 0.5);
}


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

@media (max-width: 650px) {

    .brand-boxes {
        width: 92%;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .brand-item {
        height: 120px;
        padding: 10px;
        border-radius: 16px;
    }

    .brand-logo {
        width: 90px;
        height: 60px;

        padding: 7px;
        border-radius: 9px;
    }
}

/* =====================================================
   BRANDS - LOGO CARDS
===================================================== */

.brand-boxes {
    width: 90%;
    max-width: 1380px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 14px;
}


/* BRAND CARD */

.brand-item {
    width: 100%;
    height: 137px;

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

    padding: 12px;
    box-sizing: border-box;

    background: rgba(22, 8, 8, 0.75);

    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 22px;

    overflow: hidden;

    transition: 0.3s ease;
}


/* LOGO AREA */

.brand-logo {
    width: 100%;
    height: 100%;

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

    overflow: hidden;
}


/* LOGO IMAGE */

.brand-logo img {
    display: block;

    max-width: 90%;
    max-height: 90%;

    width: auto;
    height: auto;

    object-fit: contain;
}


/* REMOVE BRAND NAME TEXT */

.brand-item span {
    display: none !important;
}


/* HOVER */

.brand-item:hover {
    transform: translateY(-4px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1150px) {

    .brand-boxes {
        width: 90%;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

}


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

@media (max-width: 650px) {

    .brand-boxes {
        width: 92%;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .brand-item {
        height: 110px;
        padding: 8px;
        border-radius: 16px;
    }

    .brand-logo img {
        max-width: 88%;
        max-height: 88%;
    }

}

/* =====================================================
   BRANDS - 4 BOXES PER ROW ON MOBILE
===================================================== */

@media (max-width: 650px) {

    .brand-boxes {
        width: 96%;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .brand-item {
        height: 85px;
        padding: 6px;
        border-radius: 12px;
    }

    .brand-logo img {
        max-width: 90%;
        max-height: 90%;
    }

}

/* =====================================================
   PREMIUM MOBILE HAMBURGER
===================================================== */

.mobile-menu-btn {
    display: none;
    width: 42px;
    height: 42px;
    margin-left: 10px;

    align-items: center;
    justify-content: center;

    background: rgba(15, 3, 3, 0.90);
    color: #ffffff;

    border: 1px solid #ff2528;
    border-radius: 12px;

    font-size: 20px;
    cursor: pointer;

    box-shadow: 0 0 18px rgba(255, 37, 40, 0.16);

    transition: all 0.6s ease;
}

.mobile-menu-btn:hover {
    background: rgba(255, 37, 40, 0.12);
    box-shadow: 0 0 25px rgba(255, 37, 40, 0.30);
    transform: translateY(-1px);
}

.mobile-menu-btn i {
    display: block;
    transition: transform 0.5s ease;
}


/* TABLET + MOBILE */
@media (max-width: 850px) {

    .mobile-menu-btn {
        display: flex;
    }

}


/* SMALL MOBILE */
@media (max-width: 550px) {

    .mobile-menu-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
        margin-left: 8px;
    }

}

/* =====================================================
   MOBILE MENU BUTTON - ALWAYS ABOVE MENU
===================================================== */

.mobile-menu-btn {
    position: relative;
    z-index: 100001;
}

.mobile-menu-btn i {
    transition: transform 0.5s ease, opacity 0.3s ease;
}

/* MOBILE MENU BUTTON ABOVE SIDE MENU */

.mobile-menu-btn {
    position: relative;
    z-index: 100001;
}


/* =====================================================
   FINAL MOBILE FULL WIDTH FIX
===================================================== */

@media (max-width: 850px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    .main-header,
    .hero,
    .stats-section,
    .about-section,
    .services-section,
    .why-section,
    .brands-section,
    .areas-section,
    .testimonial-section,
    .faq-section,
    .booking-section,
    .contact-section,
    footer {
        width: 100%;
        max-width: 100%;
    }

    .hero-container,
    .stats-container,
    .footer-container {
        width: 90%;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

}



/* =========================
   BOOK SERVICE FORM
========================= */

.booking-form {
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 25px;
    background: rgba(19, 7, 7, 0.90);
}

.booking-form input,
.booking-form select,
.booking-form textarea {
    width: 100%;
    margin-bottom: 15px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    outline: none;
    background: rgba(255, 255, 255, 0.035);
    color: #ffffff;
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
}

.booking-form input::placeholder,
.booking-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.65);
}

.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.06);
}

.booking-form select {
    cursor: pointer;
}

.booking-form select option {
    background: #160606;
    color: #ffffff;
}

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

.booking-form .btn-primary {
    width: 100%;
    border: 0;
    cursor: pointer;
}


/* =========================
   THANK YOU POPUP
========================= */

.thank-you-popup {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
}

.thank-you-popup.show {
    display: flex;
}

.thank-you-box {
    width: 100%;
    max-width: 380px;
    background: #160606;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 30px 25px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    animation: thankYouPopupIn 0.3s ease;
}

.thank-you-icon {
    width: 55px;
    height: 55px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: #25a55f;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.thank-you-box h3 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 24px;
}

.thank-you-box p {
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    line-height: 1.6;
}

.thank-you-box button {
    border: none;
    background: #ffffff;
    color: #160606;
    padding: 10px 25px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.thank-you-box button:hover {
    opacity: 0.9;
}

@keyframes thankYouPopupIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(15px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}


/* =========================================
   FLOATING BUTTONS - TAP TO EXPAND
========================================= */

.floating-buttons {
    position: fixed !important;
    right: 12px !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;

    width: auto !important;
    height: auto !important;
    gap: 10px !important;

    z-index: 2147483647 !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* Default circular button */
.floating-buttons a {
    position: relative !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;

    height: 48px !important;
    min-height: 48px !important;

    padding: 0 14px !important;
    margin: 0 !important;

    flex-shrink: 0 !important;
    box-sizing: border-box !important;

    border-radius: 30px !important;
    overflow: hidden !important;
    white-space: nowrap !important;

    visibility: visible !important;
    opacity: 1 !important;

    transition:
        width 0.3s ease,
        max-width 0.3s ease !important;
}

/* Icon */
.floating-buttons a i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 20px !important;
    width: 20px !important;
    height: 48px !important;

    margin: 0 !important;
    color: #ffffff !important;
    font-size: 20px !important;
    line-height: 1 !important;
}

/* Label hidden initially */
.floating-buttons a span {
    display: inline-block !important;

    width: 0 !important;
    margin-left: 0 !important;

    overflow: hidden !important;
    opacity: 0 !important;

    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;

    transition: opacity 0.2s ease !important;
}

/* Expanded button */
.floating-buttons a.expanded {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;

    border-radius: 30px !important;
    justify-content: flex-start !important;
}

/* Show label */
.floating-buttons a.expanded span {
    width: auto !important;
    margin-left: 8px !important;

    opacity: 1 !important;
    visibility: visible !important;
}

/* Button colors */
.floating-buttons .floating-enquiry {
    background: #ff5a1f !important;
}

.floating-buttons .whatsapp {
    background: #25D366 !important;
}

.floating-buttons .floating-call {
    background: #e52525 !important;
}

/* Desktop position */
@media (min-width: 851px) {
    .floating-buttons {
        right: 18px !important;
        bottom: 20px !important;
    }
}




/* =========================================
   HOB SLIDER - 8 IMAGES
========================================= */
.hob-slides {
    width: 800%;   /* 8 images × 100% */
}

.hob-slides img {
    width: 12.5%;  /* 100% ÷ 8 = 12.5% */
}

@keyframes hobSlide {
    0%   { transform: translateX(0); }
    10%  { transform: translateX(0); }
    12%  { transform: translateX(-12.5%); }
    22%  { transform: translateX(-12.5%); }
    24%  { transform: translateX(-25%); }
    34%  { transform: translateX(-25%); }
    36%  { transform: translateX(-37.5%); }
    46%  { transform: translateX(-37.5%); }
    48%  { transform: translateX(-50%); }
    58%  { transform: translateX(-50%); }
    60%  { transform: translateX(-62.5%); }
    70%  { transform: translateX(-62.5%); }
    72%  { transform: translateX(-75%); }
    82%  { transform: translateX(-75%); }
    84%  { transform: translateX(-87.5%); }
    94%  { transform: translateX(-87.5%); }
    100% { transform: translateX(0); }
}

.hob-slides {
    animation: hobSlide 24s infinite; /* slower because more images */
}




/* =========================================
   CHIMNEY SLIDER - 6 IMAGES
========================================= */
.chimney-slides {
    width: 600%;   /* 6 images × 100% */
}

.chimney-slides img {
    width: 16.666666%;  /* 100% ÷ 6 */
}

@keyframes chimneySlide {
    0%   { transform: translateX(0); }
    12%  { transform: translateX(0); }
    16%  { transform: translateX(-16.666666%); }
    28%  { transform: translateX(-16.666666%); }
    32%  { transform: translateX(-33.333333%); }
    44%  { transform: translateX(-33.333333%); }
    48%  { transform: translateX(-50%); }
    60%  { transform: translateX(-50%); }
    64%  { transform: translateX(-66.666666%); }
    76%  { transform: translateX(-66.666666%); }
    80%  { transform: translateX(-83.333333%); }
    92%  { transform: translateX(-83.333333%); }
    100% { transform: translateX(0); }
}

.chimney-slides {
    animation: chimneySlide 18s infinite;
}


/* =========================================
   SERVICES GRID - FORCE 3 / 2 / 1
========================================= */

/* Laptop & Desktop: 3 boxes */
@media (min-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 30px !important;
    }
}

/* Tablet: 2 boxes */
@media (max-width: 1023px) and (min-width: 651px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Phone: 1 box */
@media (max-width: 650px) {
    .services-grid {
        grid-template-columns: 1fr !important;
    }
}