/*=====================================================
        GUPTA TYRE SHOP
        STYLE.CSS
        Sprint 1 - Part 2
======================================================*/

/*==============================
        GOOGLE FONT
===============================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


/*==============================
        GLOBAL
===============================*/

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

html {
    scroll-behavior: smooth;
}

body {

    font-family: 'Poppins', sans-serif;

    background: #ffffff;

    color: #212529;

    overflow-x: hidden;

}


/*==============================
        COLORS
===============================*/

:root {

    --primary: #FFC107;

    --dark: #151515;

    --light: #ffffff;

    --gray: #6c757d;

}


/*==============================
        NAVBAR
===============================*/

.navbar {

    padding: 18px 0;

    background: #1d1d1d !important;

}

.navbar-brand {

    font-size: 28px;

    font-weight: 700;

    color: var(--primary) !important;

}

.nav-link {

    color: #ffffff !important;

    margin-left: 18px;

    font-weight: 500;

    transition: .35s;

}

.nav-link:hover {

    color: var(--primary) !important;

}


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

.hero {

    position: relative;

}


/*==============================
        CAROUSEL
===============================*/

#homeSlider {

    width: 100%;

}

#homeSlider .carousel-inner {

    width: 100%;

}

#homeSlider {
    width: 100%;
}

#homeSlider .carousel-inner {
    width: 100%;
}

#homeSlider .carousel-item {
    position: relative;
    height: 650px;
    overflow: hidden;
}


/*==============================
        HERO IMAGE
===============================*/
.hero-img {
    width: 100%;
    height: 650px;
    object-fit: cover;
    object-position: center center;
    display: block;
}


/*==============================
        OVERLAY
===============================*/

.hero-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.48);
    z-index: 1;
}


/*==============================
        CONTENT
===============================*/

.hero-content {
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    z-index: 2;
    max-width: 650px;
    color: #fff;
}

.hero-tag {

    display: inline-block;

    padding: 10px 22px;

    border-radius: 40px;

    background: #FFC107;

    color: #111;

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 25px;

}

.hero-content h1 {

    font-size: 68px;

    font-weight: 800;

    line-height: 1.1;

    margin-bottom: 20px;

}

.hero-content p {

    font-size: 21px;

    line-height: 1.8;

    color: #f3f3f3;

    margin-bottom: 35px;

}


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

.hero-btns {

    display: flex;

    gap: 18px;

}

.hero-btns .btn {

    padding: 15px 35px;

    border-radius: 50px;

    font-weight: 600;

}


/*==============================
        CONTROLS
===============================*/

.carousel-control-prev,
.carousel-control-next {

    width: 70px;

}

.carousel-control-prev-icon,
.carousel-control-next-icon {

    width: 45px;

    height: 45px;

}


/*==============================
        INDICATORS
===============================*/

.carousel-indicators {

    bottom: 35px;

}

.carousel-indicators button {

    width: 14px;

    height: 14px;

    border-radius: 50%;

}

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

@media (max-width: 992px) {

    .hero-content {

        max-width: 500px;

    }

    .hero-content h1 {

        font-size: 46px;

    }

    .hero-content p {

        font-size: 18px;

    }

}


@media (max-width: 768px) {

    #homeSlider .carousel-item {

        height: 520px;

        min-height: 520px;

    }

    @media (max-width: 768px) {

        #homeSlider .carousel-item {
            height: 520px;
            min-height: 520px;
        }

        .hero-img {
            width: 100%;
            height: 520px;
            object-fit: cover;
            object-position: center center;
        }

        .hero-content {
            left: 25px;
            right: 25px;
            max-width: 100%;
        }

        .hero-content h1 {
            font-size: 32px;
        }

        .hero-content p {
            display: none;
        }

        .hero-btns {
            flex-direction: column;
        }

        .hero-btns .btn {
            width: 220px;
        }
    }

    .hero-content {

        left: 25px;

        right: 25px;

        max-width: 100%;

    }

    .hero-content h1 {

        font-size: 32px;

    }

    .hero-content p {

        display: none;

    }

    .hero-btns {

        flex-direction: column;

    }

    .hero-btns .btn {

        width: 220px;

    }

}

/*=========================================
        QUICK SEARCH
=========================================*/

.quick-search {

    margin-top: -80px;

    position: relative;

    z-index: 10;

}

.search-card {

    background: #fff;

    border-radius: 25px;

    padding: 40px;

}

.search-title {

    font-size: 34px;

    font-weight: 700;

}

.search-subtitle {

    color: #666;

}

.form-control,
.form-select {

    height: 58px;

    border-radius: 12px;

}

/*=========================================
        SERVICES
=========================================*/

.home-services {

    padding: 90px 0;

}

.section-tag {

    display: inline-block;

    background: #FFC107;

    padding: 8px 20px;

    border-radius: 30px;

    font-weight: 700;

    margin-bottom: 20px;

}

.section-title {

    font-size: 46px;

    font-weight: 800;

}

.section-subtitle {

    color: #777;

    margin-top: 15px;

}

.service-box {

    background: #fff;

    border-radius: 20px;

    padding: 40px 30px;

    text-align: center;

    height: 100%;

    transition: .35s;

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

}

.service-box:hover {

    transform: translateY(-10px);

}

.service-box i {

    font-size: 60px;

    color: #FFC107;

    margin-bottom: 20px;

}

.service-box h4 {

    font-weight: 700;

    margin-bottom: 15px;

}

.service-box p {

    color: #666;

    margin-bottom: 25px;

}

.callback-box {

    background: #1f1f1f;

    color: #fff;

    border-radius: 20px;

    padding: 45px;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-align: center;

}

.callback-box h3 {

    font-weight: 700;

    margin-bottom: 20px;

}

.callback-box p {

    color: #ddd;

    margin-bottom: 30px;

}

/*====================================
        OFFERS
=====================================*/

.offers-section {

    padding: 90px 0;

    background: #f8f9fa;

}

.offer-card {

    background: #fff;

    padding: 40px;

    border-radius: 20px;

    text-align: center;

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

    transition: .3s;

    height: 100%;

}

.offer-card:hover {

    transform: translateY(-8px);

}

.offer-card h3 {

    font-size: 46px;

    font-weight: 800;

    color: #FFC107;

}

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

.brands-section {

    padding: 90px 0;

}

.brand-box {

    background: #fff;

    height: 130px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    font-size: 28px;

    font-weight: 700;

    box-shadow: 0 10px 20px rgba(0, 0, 0, .08);

    transition: .3s;

}

.brand-box:hover {

    background: #FFC107;

}

/*====================================
        REVIEWS
=====================================*/

.review-section {

    padding: 90px 0;

    background: #f8f9fa;

}

.review-box {

    background: #fff;

    padding: 35px;

    border-radius: 20px;

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

    text-align: center;

    height: 100%;

}

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

.contact-strip {

    background: #151515;

    color: #fff;

    padding: 70px 0;

}

.contact-strip p {

    color: #ddd;

}

/*====================================
        WHATSAPP
=====================================*/

.whatsapp-btn {

    position: fixed;

    bottom: 25px;

    right: 25px;

    width: 60px;

    height: 60px;

    background: #25D366;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 30px;

    text-decoration: none;

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

    z-index: 999;

}

.whatsapp-btn:hover {

    color: #fff;

    transform: scale(1.08);

}

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

.why-section {

    padding: 100px 0;

    background: #ffffff;

}

.why-card {

    background: #fff;

    padding: 40px 30px;

    border-radius: 20px;

    text-align: center;

    height: 100%;

    transition: .35s;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);

}

.why-card:hover {

    transform: translateY(-10px);

}

.why-icon {

    width: 90px;

    height: 90px;

    margin: auto;

    margin-bottom: 25px;

    background: #FFC107;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

}

.why-icon i {

    font-size: 42px;

    color: #111;

}

.why-card h4 {

    font-weight: 700;

    margin-bottom: 15px;

}

.why-card p {

    color: #666;

    line-height: 1.8;

}

/*=========================================
        BUSINESS STATISTICS
=========================================*/

.stats-section {

    padding: 70px 0;

    background: #151515;

    color: #ffffff;

}


.stat-card {

    height: 100%;

    padding: 20px 15px;

    transition: .3s ease;

}


.stat-card:hover {

    transform: translateY(-6px);

}


.stat-icon {

    width: 70px;

    height: 70px;

    margin: 0 auto 18px;

    border-radius: 50%;

    background: #FFC107;

    color: #151515;

    display: flex;

    align-items: center;

    justify-content: center;

}


.stat-icon i {

    font-size: 30px;

}


.stat-card h3 {

    margin-bottom: 8px;

    font-size: 38px;

    font-weight: 800;

}


.stat-card p {

    margin: 0;

    color: #dddddd;

    font-size: 15px;

}


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

.process-section {

    padding: 100px 0;

    background: #f8f9fa;

}


.process-card {

    position: relative;

    height: 100%;

    padding: 40px 25px;

    background: #ffffff;

    border-radius: 20px;

    text-align: center;

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

    transition: .35s ease;

}


.process-card:hover {

    transform: translateY(-8px);

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

}


.process-number {

    position: absolute;

    top: 18px;

    right: 20px;

    font-size: 14px;

    font-weight: 800;

    color: #adb5bd;

}


.process-icon {

    width: 80px;

    height: 80px;

    margin: 0 auto 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #FFC107;

    color: #151515;

}


.process-icon i {

    font-size: 34px;

}


.process-card h4 {

    margin-bottom: 15px;

    font-size: 21px;

    font-weight: 700;

}


.process-card p {

    margin: 0;

    color: #6c757d;

    line-height: 1.7;

}


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

@media (max-width: 768px) {

    .stats-section {

        padding: 55px 0;

    }

    .stat-card h3 {

        font-size: 30px;

    }

    .stat-icon {

        width: 60px;

        height: 60px;

    }

    .stat-icon i {

        font-size: 25px;

    }

    .process-section {

        padding: 70px 0;

    }

}

/*=========================================
        PREMIUM GALLERY
=========================================*/

.gallery-section {

    padding: 100px 0;

    background: #ffffff;

}


/* Gallery Card */

.gallery-card {

    position: relative;

    height: 300px;

    overflow: hidden;

    border-radius: 22px;

    background: #151515;

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

    cursor: pointer;

}


/* Image */

.gallery-image {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition: transform .6s ease;

}


/* Dark overlay */

.gallery-card::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
            to top,
            rgba(0, 0, 0, .85),
            rgba(0, 0, 0, .05)
    );

    z-index: 1;

}


/* Hover Image */

.gallery-card:hover .gallery-image {

    transform: scale(1.08);

}


/* Gallery Content */

.gallery-overlay {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    padding: 30px;

    color: #ffffff;

    z-index: 2;

}


/* Small category */

.gallery-overlay span {

    display: inline-block;

    margin-bottom: 8px;

    color: #FFC107;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


/* Heading */

.gallery-overlay h4 {

    margin: 0;

    font-size: 22px;

    font-weight: 700;

}


/* Gallery Button */

.gallery-button {

    padding: 14px 30px;

    border-radius: 50px;

    font-weight: 600;

    transition: .3s ease;

}


.gallery-button:hover {

    background: #FFC107;

    border-color: #FFC107;

    color: #151515;

    transform: translateY(-3px);

}


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

@media (max-width: 768px) {

    .gallery-section {

        padding: 70px 0;

    }

    .gallery-card {

        height: 260px;

    }

    .gallery-overlay {

        padding: 22px;

    }

    .gallery-overlay h4 {

        font-size: 19px;

    }

}

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

.faq-section {

    padding: 100px 0;

    background: #f8f9fa;

}


.faq-section .section-subtitle {

    max-width: 500px;

    margin: 15px 0 0;

}


.accordion {

    --bs-accordion-border-color: #e9ecef;

}


.accordion-item {

    margin-bottom: 14px;

    border: 0;

    border-radius: 14px !important;

    overflow: hidden;

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

}


.accordion-button {

    padding: 20px 22px;

    font-weight: 600;

    color: #151515;

    background: #ffffff;

    box-shadow: none !important;

}


.accordion-button:not(.collapsed) {

    color: #151515;

    background: #FFC107;

}


.accordion-button::after {

    transition: transform .25s ease;

}


.accordion-body {

    padding: 20px 22px;

    color: #6c757d;

    line-height: 1.8;

    background: #ffffff;

}


/* FAQ Help */

.faq-help-card {

    display: flex;

    align-items: flex-start;

    gap: 18px;

    margin-top: 35px;

    padding: 25px;

    background: #ffffff;

    border-radius: 18px;

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

}


.faq-help-card > i {

    flex-shrink: 0;

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #FFC107;

    color: #151515;

    font-size: 24px;

}


.faq-help-card h5 {

    margin-bottom: 8px;

    font-weight: 700;

}


.faq-help-card p {

    margin-bottom: 18px;

    color: #6c757d;

    line-height: 1.6;

}


/*=========================================
        FINAL CTA
=========================================*/

.final-cta {

    padding: 90px 0;

    background: #ffffff;

}


.cta-box {

    padding: 60px;

    border-radius: 28px;

    background: #151515;

    color: #ffffff;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .15);

}


.cta-tag {

    display: inline-block;

    margin-bottom: 15px;

    color: #FFC107;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


.cta-box h2 {

    margin-bottom: 15px;

    font-size: 42px;

    font-weight: 800;

}


.cta-box p {

    margin: 0;

    color: #d8d8d8;

    line-height: 1.8;

}


.cta-buttons {

    display: flex;

    justify-content: flex-end;

    gap: 12px;

    flex-wrap: wrap;

}


.cta-buttons .btn {

    padding: 13px 24px;

    border-radius: 50px;

    font-weight: 600;

}


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

.contact-info-section {

    padding: 80px 0;

    background: #f8f9fa;

}


.contact-info-card {

    display: flex;

    align-items: flex-start;

    gap: 18px;

    height: 100%;

    padding: 30px;

    background: #ffffff;

    border-radius: 18px;

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

}


.contact-info-icon {

    flex-shrink: 0;

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #FFC107;

    color: #151515;

    font-size: 22px;

}


.contact-info-card h5 {

    margin-bottom: 10px;

    font-weight: 700;

}


.contact-info-card p {

    margin: 0;

    color: #6c757d;

    line-height: 1.7;

}


.contact-info-card a {

    display: inline-block;

    margin-top: 8px;

    color: #151515;

    font-weight: 600;

    text-decoration: none;

}


.contact-info-card a:hover {

    color: #d39e00;

}


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

@media (max-width: 991px) {

    .cta-box {

        padding: 45px 35px;

    }

    .cta-box h2 {

        font-size: 34px;

    }

    .cta-buttons {

        justify-content: flex-start;

    }

}


@media (max-width: 575px) {

    .faq-section {

        padding: 70px 0;

    }

    .faq-help-card {

        flex-direction: column;

    }

    .final-cta {

        padding: 70px 15px;

    }

    .cta-box {

        padding: 35px 25px;

    }

    .cta-box h2 {

        font-size: 28px;

    }

    .cta-buttons {

        flex-direction: column;

        align-items: stretch;

    }

    .cta-buttons .btn {

        width: 100%;

    }

    .contact-info-section {

        padding: 60px 0;

    }

}

/*==================================================
        SPRINT 3 - TYRES PAGE
==================================================*/


/*==================================================
        TYRE PAGE HERO
==================================================*/

.tyre-page-hero {

    position: relative;

    min-height: 560px;

    display: flex;

    align-items: center;

    background-image: url('/images/tyres/tyre-hero.jpg');

    background-size: cover;

    background-position: center;

    overflow: hidden;

}


.tyre-hero-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(
            90deg,
            rgba(0, 0, 0, .82) 0%,
            rgba(0, 0, 0, .62) 45%,
            rgba(0, 0, 0, .25) 100%
    );

}


.tyre-hero-content {

    position: relative;

    z-index: 2;

    max-width: 720px;

    padding: 90px 0;

    color: #ffffff;

}


.tyre-hero-tag {

    display: inline-block;

    padding: 9px 20px;

    margin-bottom: 22px;

    border-radius: 40px;

    background: #FFC107;

    color: #151515;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.4px;

}


.tyre-hero-content h1 {

    margin-bottom: 22px;

    font-size: 58px;

    font-weight: 800;

    line-height: 1.12;

}


.tyre-hero-content p {

    max-width: 650px;

    margin-bottom: 32px;

    color: #eeeeee;

    font-size: 18px;

    line-height: 1.8;

}


.tyre-hero-buttons {

    display: flex;

    gap: 14px;

    flex-wrap: wrap;

}


.tyre-hero-buttons .btn {

    padding: 13px 25px;

    border-radius: 50px;

    font-weight: 600;

}


/*==================================================
        TYRE INTRO
==================================================*/

.tyre-intro-section {

    padding: 100px 0;

    background: #ffffff;

}


.tyre-intro-image {

    position: relative;

    overflow: hidden;

    border-radius: 24px;

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

}


.tyre-intro-image img {

    width: 100%;

    height: 500px;

    display: block;

    object-fit: cover;

}


.tyre-image-badge {

    position: absolute;

    left: 25px;

    bottom: 25px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 15px 20px;

    border-radius: 15px;

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

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

}


.tyre-image-badge > i {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #FFC107;

    color: #151515;

    font-size: 21px;

}


.tyre-image-badge strong {

    display: block;

    color: #151515;

    font-size: 14px;

}


.tyre-image-badge span {

    display: block;

    margin-top: 2px;

    color: #6c757d;

    font-size: 12px;

}


.tyre-intro-text {

    margin-top: 20px;

    color: #6c757d;

    line-height: 1.9;

}


.tyre-highlights {

    display: grid;

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

    gap: 14px;

    margin: 28px 0;

}


.tyre-highlight {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #343a40;

    font-size: 14px;

    font-weight: 500;

}


.tyre-highlight i {

    color: #FFC107;

    font-size: 17px;

}


.tyre-intro-button {

    padding: 13px 25px;

    border-radius: 50px;

    font-weight: 600;

}


/*==================================================
        TYRE PAGE RESPONSIVE
==================================================*/

@media (max-width: 992px) {

    .tyre-page-hero {

        min-height: 500px;

    }

    .tyre-hero-content {

        max-width: 620px;

    }

    .tyre-hero-content h1 {

        font-size: 46px;

    }

    .tyre-intro-section {

        padding: 75px 0;

    }

}


@media (max-width: 768px) {

    .tyre-page-hero {

        min-height: 500px;

    }

    .tyre-hero-content {

        padding: 70px 15px;

    }

    .tyre-hero-content h1 {

        font-size: 36px;

    }

    .tyre-hero-content p {

        font-size: 16px;

    }

    .tyre-hero-buttons {

        flex-direction: column;

        align-items: flex-start;

    }

    .tyre-hero-buttons .btn {

        width: 220px;

    }

    .tyre-intro-image img {

        height: 350px;

    }

    .tyre-highlights {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 480px) {

    .tyre-hero-content h1 {

        font-size: 30px;
    }

    .tyre-image-badge {

        left: 15px;

        right: 15px;

        bottom: 15px;

    }
}

/*==================================================
        SPRINT 3 - TYRE FINDER
==================================================*/


/*==================================================
        FIND TYRE SECTION
==================================================*/

.find-tyre-section {

    padding: 100px 0;

    background: #f8f9fa;

}


/*==================================================
        FINDER CARD
==================================================*/

.tyre-finder-card {

    overflow: hidden;

    background: #ffffff;

    border-radius: 25px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .10);

}


/*==================================================
        FINDER INTRO
==================================================*/

.tyre-finder-intro {

    height: 100%;

    padding: 45px 35px;

    background: #151515;

    color: #ffffff;

}


.finder-icon {

    width: 70px;

    height: 70px;

    margin-bottom: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #FFC107;

    color: #151515;

}


.finder-icon i {

    font-size: 30px;

}


.tyre-finder-intro h3 {

    margin-bottom: 18px;

    font-size: 28px;

    font-weight: 700;

}


.tyre-finder-intro > p {

    margin-bottom: 30px;

    color: #d5d5d5;

    line-height: 1.8;

}


.finder-benefit {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

    color: #eeeeee;

    font-size: 14px;

}


.finder-benefit i {

    color: #FFC107;

}


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

.tyre-finder-form {

    padding: 45px;

}


.finder-tabs {

    display: flex;

    gap: 10px;

    margin-bottom: 30px;

    padding-bottom: 18px;

    border-bottom: 1px solid #e9ecef;

}


.finder-tab {

    padding: 11px 18px;

    border: 0;

    border-radius: 30px;

    background: #f1f3f5;

    color: #495057;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    transition: .3s ease;

}


.finder-tab:hover {

    background: #e9ecef;

}


.finder-tab.active {

    background: #FFC107;

    color: #151515;

}


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

.tyre-finder-form .form-label {

    margin-bottom: 8px;

    color: #343a40;

    font-size: 14px;

    font-weight: 600;

}


.tyre-finder-form .form-select,
.tyre-finder-form .form-control {

    min-height: 52px;

    border: 1px solid #dee2e6;

    border-radius: 10px;

    font-family: inherit;

    box-shadow: none;

}


.tyre-finder-form .form-select:focus,
.tyre-finder-form .form-control:focus {

    border-color: #FFC107;

    box-shadow: 0 0 0 .2rem rgba(255, 193, 7, .15);

}


.optional-text {

    color: #999;

    font-size: 12px;

    font-weight: 400;

}


/*==================================================
        SEARCH BUTTON
==================================================*/

.finder-search-btn {

    width: 100%;

    min-height: 52px;

    border-radius: 10px;

    color: #151515;

    font-weight: 700;

    border: 0;

}


.finder-search-btn:hover {

    background: #e0a800;

    color: #151515;

}


/*==================================================
        FINDER NOTE
==================================================*/

.finder-note {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 25px;

    padding: 14px 16px;

    border-radius: 10px;

    background: #f8f9fa;

    color: #6c757d;

    font-size: 13px;

}


.finder-note i {

    color: #FFC107;

    font-size: 17px;

}


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

@media (max-width: 991px) {

    .tyre-finder-intro {

        padding: 35px;

    }

    .tyre-finder-form {

        padding: 35px;

    }

}


@media (max-width: 768px) {

    .find-tyre-section {

        padding: 70px 0;

    }

    .tyre-finder-intro {

        padding: 35px 25px;

    }

    .tyre-finder-form {

        padding: 30px 25px;

    }

    .finder-tabs {

        flex-direction: column;

    }

    .finder-tab {

        width: 100%;

    }

}


@media (max-width: 480px) {

    .tyre-finder-form {

        padding: 25px 18px;

    }

    .finder-note {

        align-items: flex-start;

    }

}

/*==================================================
        SPRINT 3 - TYRE CATEGORIES
==================================================*/

.tyre-categories-section {

    padding: 100px 0;

    background: #f8f9fa;

}


/*==================================================
        CATEGORY CARD
==================================================*/

.tyre-category-card {

    height: 100%;

    overflow: hidden;

    background: #ffffff;

    border-radius: 22px;

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

    transition: transform .35s ease,
    box-shadow .35s ease;

}


.tyre-category-card:hover {

    transform: translateY(-8px);

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

}


/*==================================================
        CATEGORY IMAGE
==================================================*/

.tyre-category-image {

    position: relative;

    height: 240px;

    overflow: hidden;

}


.tyre-category-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .5s ease;

}


.tyre-category-card:hover
.tyre-category-image img {

    transform: scale(1.06);

}


.category-label {

    position: absolute;

    top: 18px;

    left: 18px;

    padding: 7px 13px;

    border-radius: 30px;

    background: #FFC107;

    color: #151515;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

}


/*==================================================
        CATEGORY CONTENT
==================================================*/

.tyre-category-content {

    position: relative;

    padding: 30px;

}


.category-icon {

    width: 52px;

    height: 52px;

    margin-bottom: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fff3cd;

    color: #151515;

}


.category-icon i {

    font-size: 22px;

}


.tyre-category-content h4 {

    margin-bottom: 12px;

    font-size: 21px;

    font-weight: 700;

}


.tyre-category-content p {

    margin-bottom: 20px;

    color: #6c757d;

    line-height: 1.7;

}


.category-link {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #151515;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

}


.category-link i {

    transition: transform .25s ease;

}


.category-link:hover {

    color: #b88600;

}


.category-link:hover i {

    transform: translateX(5px);

}


/*==================================================
        TYRE SERVICES
==================================================*/

.tyre-services-section {

    padding: 100px 0;

    background: #ffffff;

}


.tyre-service-cta {

    margin-top: 25px;

    padding: 13px 25px;

    border-radius: 50px;

    font-weight: 600;

}


/*==================================================
        TYRE SERVICE CARD
==================================================*/

.tyre-service-card {

    position: relative;

    height: 100%;

    min-height: 250px;

    padding: 30px;

    overflow: hidden;

    border: 1px solid #eeeeee;

    border-radius: 20px;

    background: #ffffff;

    transition: transform .3s ease,
    box-shadow .3s ease;

}


.tyre-service-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 15px 35px rgba(0, 0, 0, .09);

}


.service-icon {

    width: 58px;

    height: 58px;

    margin-bottom: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: #FFC107;

    color: #151515;

}


.service-icon i {

    font-size: 25px;

}


.tyre-service-card h4 {

    margin-bottom: 12px;

    font-size: 19px;

    font-weight: 700;

}


.tyre-service-card p {

    margin: 0;

    max-width: 340px;

    color: #6c757d;

    font-size: 14px;

    line-height: 1.75;

}


.service-number {

    position: absolute;

    top: 20px;

    right: 22px;

    color: #dee2e6;

    font-size: 24px;

    font-weight: 800;

}


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

@media (max-width: 768px) {

    .tyre-categories-section,
    .tyre-services-section {

        padding: 70px 0;

    }

    .tyre-category-image {

        height: 220px;

    }

    .tyre-category-content {

        padding: 25px;

    }

    .tyre-service-card {

        min-height: auto;

    }

}

/*==================================================
        TRUSTED TYRE BRANDS
==================================================*/

.tyre-brands-section {
    padding: 100px 0;
    background: #f8f9fa;
}


/* Brand Card */

.tyre-brands-section .tyre-brand-card {

    position: relative;

    min-height: 150px;

    padding: 25px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e5e5e5;

    border-radius: 18px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);

    cursor: pointer;

    overflow: hidden;

    transition: transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    background-color 0.35s ease;

}


/* Yellow top accent */

.tyre-brands-section .tyre-brand-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 0;

    height: 4px;

    background: #ffc107;

    transition: width 0.35s ease;

}


/* Hover */

.tyre-brands-section .tyre-brand-card:hover {

    transform: translateY(-10px);

    background: #ffffff;

    border-color: #ffc107;

    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);

}


/* Expand yellow line */

.tyre-brands-section .tyre-brand-card:hover::before {

    width: 100%;

}


/* Brand Name */

.tyre-brands-section .brand-logo-text {

    color: #151515;

    font-size: 25px;

    font-weight: 800;

    letter-spacing: 1px;

    transition: color 0.35s ease,
    transform 0.35s ease;

}


/* Brand name hover */

.tyre-brands-section .tyre-brand-card:hover .brand-logo-text {

    color: #d39e00;

    transform: scale(1.08);

}


/* Brand subtitle */

.tyre-brands-section .tyre-brand-card span {

    margin-top: 7px;

    color: #888888;

    font-size: 12px;

    font-weight: 500;

    transition: color 0.35s ease;

}


/* Subtitle hover */

.tyre-brands-section .tyre-brand-card:hover span {

    color: #555555;

}


/* Note */

.tyre-brands-section .brand-note {

    margin: 0;

    color: #888888;

    font-size: 13px;

}


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

@media (max-width: 768px) {

    .tyre-brands-section {

        padding: 70px 0;

    }

    .tyre-brands-section .tyre-brand-card {

        min-height: 125px;

    }

    .tyre-brands-section .brand-logo-text {

        font-size: 20px;

    }

}

/*==================================================
        SPRINT 3 - TYRE ENQUIRY
==================================================*/

.tyre-enquiry-section {

    padding: 80px 0;

    background: #f8f9fa;

}


.tyre-enquiry-card {

    padding: 55px;

    border-radius: 28px;

    background: #151515;

    color: #ffffff;

    box-shadow: 0 20px 45px rgba(0, 0, 0, .15);

}


.enquiry-tag {

    display: inline-block;

    margin-bottom: 15px;

    color: #ffc107;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.tyre-enquiry-card h2 {

    margin-bottom: 15px;

    font-size: 38px;

    font-weight: 800;

    line-height: 1.2;

}


.tyre-enquiry-card p {

    max-width: 700px;

    margin: 0;

    color: #d8d8d8;

    line-height: 1.8;

}


.enquiry-buttons {

    display: flex;

    justify-content: flex-end;

    gap: 12px;

    flex-wrap: wrap;

}


.enquiry-buttons .btn {

    padding: 13px 22px;

    border-radius: 50px;

    font-weight: 600;

}


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

.tyre-faq-section {

    padding: 100px 0;

    background: #ffffff;

}


.tyre-faq-section .accordion-item {

    margin-bottom: 14px;

    border: 0;

    border-radius: 14px !important;

    overflow: hidden;

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

}


.tyre-faq-section .accordion-button {

    padding: 20px;

    font-weight: 600;

    color: #151515;

    background: #ffffff;

    box-shadow: none;

}


.tyre-faq-section .accordion-button:not(.collapsed) {

    background: #ffc107;

    color: #151515;

}


.tyre-faq-section .accordion-body {

    padding: 20px;

    color: #6c757d;

    line-height: 1.8;

    background: #ffffff;

}


/* FAQ Tip */

.tyre-faq-tip {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-top: 30px;

    padding: 22px;

    border-radius: 16px;

    background: #fff8df;

}


.tyre-faq-tip > i {

    flex-shrink: 0;

    color: #d39e00;

    font-size: 24px;

}


.tyre-faq-tip strong {

    display: block;

    margin-bottom: 6px;

}


.tyre-faq-tip p {

    margin: 0;

    color: #6c757d;

    font-size: 14px;

    line-height: 1.6;

}


/*==================================================
        FINAL TYRE CTA
==================================================*/

.tyre-final-cta {

    padding: 100px 0;

    background: #f8f9fa;

}


.tyre-final-cta h2 {

    margin: 18px 0 12px;

    font-size: 44px;

    font-weight: 800;

}


.tyre-final-cta p {

    margin-bottom: 30px;

    color: #6c757d;

}


.tyre-final-buttons {

    display: flex;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;

}


.tyre-final-buttons .btn {

    padding: 13px 25px;

    border-radius: 50px;

    font-weight: 600;

}


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

@media (max-width: 991px) {

    .tyre-enquiry-card {

        padding: 45px 35px;

    }

    .tyre-enquiry-card h2 {

        font-size: 32px;

    }

    .enquiry-buttons {

        justify-content: flex-start;

    }

}


@media (max-width: 768px) {

    .tyre-enquiry-section,
    .tyre-faq-section,
    .tyre-final-cta {

        padding: 70px 0;

    }

    .tyre-enquiry-card {

        padding: 35px 25px;

    }

    .tyre-enquiry-card h2 {

        font-size: 28px;

    }

    .enquiry-buttons {

        flex-direction: column;

        align-items: stretch;

    }

    .enquiry-buttons .btn {

        width: 100%;

    }

    .tyre-final-cta h2 {

        font-size: 32px;

    }

    .tyre-final-buttons {

        flex-direction: column;

        align-items: stretch;

        padding: 0 20px;

    }

}

/*==================================================
        SPRINT 4 - ACCESSORIES PAGE
==================================================*/


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

.accessories-page-hero {

    position: relative;

    min-height: 560px;

    display: flex;

    align-items: center;

    background-image: url('/images/accessories/accessories-hero.jpg');

    background-size: cover;

    background-position: center;

    overflow: hidden;

}


.accessories-hero-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(
            90deg,
            rgba(0, 0, 0, .84) 0%,
            rgba(0, 0, 0, .62) 48%,
            rgba(0, 0, 0, .20) 100%
    );

}


.accessories-hero-content {

    position: relative;

    z-index: 2;

    max-width: 720px;

    padding: 90px 0;

    color: #ffffff;

}


.accessories-hero-tag {

    display: inline-block;

    padding: 9px 20px;

    margin-bottom: 22px;

    border-radius: 40px;

    background: #FFC107;

    color: #151515;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.4px;

}


.accessories-hero-content h1 {

    margin-bottom: 22px;

    font-size: 58px;

    font-weight: 800;

    line-height: 1.12;

}


.accessories-hero-content p {

    max-width: 650px;

    margin-bottom: 32px;

    color: #eeeeee;

    font-size: 18px;

    line-height: 1.8;

}


.accessories-hero-buttons {

    display: flex;

    gap: 14px;

    flex-wrap: wrap;

}


.accessories-hero-buttons .btn {

    padding: 13px 25px;

    border-radius: 50px;

    font-weight: 600;

}


/*==================================================
        ACCESSORIES INTRO
==================================================*/

.accessories-intro-section {

    padding: 100px 0;

    background: #ffffff;

}


.accessories-intro-image {

    position: relative;

    overflow: hidden;

    border-radius: 24px;

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

}


.accessories-intro-image img {

    width: 100%;

    height: 500px;

    display: block;

    object-fit: cover;

}


.accessories-image-badge {

    position: absolute;

    left: 25px;

    bottom: 25px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 15px 20px;

    border-radius: 15px;

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

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

}


.accessories-image-badge > i {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #FFC107;

    color: #151515;

    font-size: 21px;

}


.accessories-image-badge strong {

    display: block;

    color: #151515;

    font-size: 14px;

}


.accessories-image-badge span {

    display: block;

    margin-top: 2px;

    color: #6c757d;

    font-size: 12px;

}


.accessories-intro-text {

    margin-top: 20px;

    color: #6c757d;

    line-height: 1.9;

}


.accessories-highlights {

    display: grid;

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

    gap: 14px;

    margin: 28px 0;

}


.accessory-highlight {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #343a40;

    font-size: 14px;

    font-weight: 500;

}


.accessory-highlight i {

    color: #FFC107;

    font-size: 17px;

}


.accessories-intro-button {

    padding: 13px 25px;

    border-radius: 50px;

    font-weight: 600;

}


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

@media (max-width: 992px) {

    .accessories-page-hero {

        min-height: 500px;

    }

    .accessories-hero-content {

        max-width: 620px;

    }

    .accessories-hero-content h1 {

        font-size: 46px;

    }

    .accessories-intro-section {

        padding: 75px 0;

    }

}


@media (max-width: 768px) {

    .accessories-page-hero {

        min-height: 500px;

    }

    .accessories-hero-content {

        padding: 70px 15px;

    }

    .accessories-hero-content h1 {

        font-size: 36px;

    }

    .accessories-hero-content p {

        font-size: 16px;

    }

    .accessories-hero-buttons {

        flex-direction: column;

        align-items: flex-start;

    }

    .accessories-hero-buttons .btn {

        width: 220px;

    }

    .accessories-intro-image img {

        height: 350px;

    }

    .accessories-highlights {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 480px) {

    .accessories-hero-content h1 {

        font-size: 30px;

    }

    .accessories-image-badge {

        left: 15px;

        right: 15px;

        bottom: 15px;

    }

}

/*==================================================
        SPRINT 4 - ACCESSORY CATEGORIES
==================================================*/

.accessory-categories-section {

    padding: 100px 0;

    background: #f8f9fa;

}


/*==================================================
        CATEGORY CARD
==================================================*/

.accessory-category-card {

    height: 100%;

    overflow: hidden;

    background: #ffffff;

    border-radius: 20px;

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

    transition: transform .35s ease,
    box-shadow .35s ease;

}


.accessory-category-card:hover {

    transform: translateY(-8px);

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

}


/*==================================================
        CATEGORY IMAGE
==================================================*/

.accessory-category-image {

    position: relative;

    height: 210px;

    overflow: hidden;

}


.accessory-category-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .5s ease;

}


.accessory-category-card:hover
.accessory-category-image img {

    transform: scale(1.07);

}


/* Number */

.accessory-category-number {

    position: absolute;

    top: 15px;

    right: 15px;

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 193, 7, .95);

    color: #151515;

    font-size: 12px;

    font-weight: 800;

}


/*==================================================
        CATEGORY CONTENT
==================================================*/

.accessory-category-content {

    position: relative;

    padding: 25px;

}


.accessory-category-icon {

    width: 52px;

    height: 52px;

    margin-bottom: 17px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: #fff3cd;

    color: #151515;

}


.accessory-category-icon i {

    font-size: 22px;

}


.accessory-category-content h4 {

    margin-bottom: 10px;

    font-size: 19px;

    font-weight: 700;

}


.accessory-category-content p {

    min-height: 72px;

    margin-bottom: 18px;

    color: #6c757d;

    font-size: 13px;

    line-height: 1.7;

}


/* Link */

.accessory-category-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #151515;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

}


.accessory-category-link i {

    transition: transform .25s ease;

}


.accessory-category-link:hover {

    color: #b88600;

}


.accessory-category-link:hover i {

    transform: translateX(5px);

}


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

@media (max-width: 768px) {

    .accessory-categories-section {

        padding: 70px 0;

    }

    .accessory-category-image {

        height: 230px;

    }

    .accessory-category-content {

        padding: 25px;

    }

}


@media (max-width: 480px) {

    .accessory-category-image {

        height: 210px;

    }

}

/*==================================================
        SPRINT 4 - FEATURED ACCESSORIES
==================================================*/

.featured-accessories-section {

    padding: 100px 0;

    background: #ffffff;

}


/*==================================================
        VIEW ALL BUTTON
==================================================*/

.featured-view-all {

    padding: 12px 22px;

    border-radius: 50px;

    font-size: 14px;

    font-weight: 600;

}


/*==================================================
        FEATURED CARD
==================================================*/

.featured-accessory-card {

    height: 100%;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #eeeeee;

    border-radius: 22px;

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

    transition: transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;

}


.featured-accessory-card:hover {

    transform: translateY(-8px);

    border-color: #ffc107;

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

}


/*==================================================
        FEATURED IMAGE
==================================================*/

.featured-accessory-image {

    position: relative;

    height: 270px;

    overflow: hidden;

}


.featured-accessory-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .5s ease;

}


.featured-accessory-card:hover
.featured-accessory-image img {

    transform: scale(1.06);

}


/*==================================================
        FEATURED BADGE
==================================================*/

.featured-badge {

    position: absolute;

    top: 18px;

    left: 18px;

    padding: 7px 13px;

    border-radius: 30px;

    background: #ffc107;

    color: #151515;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

}


/*==================================================
        FEATURED CONTENT
==================================================*/

.featured-accessory-content {

    padding: 27px;

}


.featured-category {

    display: inline-block;

    margin-bottom: 10px;

    color: #b88600;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.2px;

}


.featured-accessory-content h4 {

    margin-bottom: 11px;

    color: #151515;

    font-size: 20px;

    font-weight: 700;

}


.featured-accessory-content p {

    min-height: 72px;

    margin-bottom: 22px;

    color: #6c757d;

    font-size: 14px;

    line-height: 1.75;

}


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

.featured-accessory-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding-top: 18px;

    border-top: 1px solid #eeeeee;

}


.featured-info {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #777777;

    font-size: 12px;

}


.featured-info i {

    color: #d39e00;

    font-size: 15px;

}


.featured-enquire {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #151515;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;

}


.featured-enquire i {

    transition: transform .25s ease;

}


.featured-enquire:hover {

    color: #b88600;

}


.featured-enquire:hover i {

    transform: translateX(5px);

}


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

@media (max-width: 991px) {

    .featured-accessories-section {

        padding: 80px 0;

    }

}


@media (max-width: 768px) {

    .featured-accessories-section {

        padding: 70px 0;

    }

    .featured-view-all {

        margin-top: 15px;

    }

    .featured-accessory-image {

        height: 240px;

    }

}


@media (max-width: 480px) {

    .featured-accessory-image {

        height: 220px;

    }

    .featured-accessory-content {

        padding: 23px;

    }

    .featured-accessory-footer {

        align-items: flex-start;

        flex-direction: column;

    }

}

/*==================================================
        SPRINT 4 - ACCESSORY BRANDS
==================================================*/

.accessory-brands-section {

    padding: 100px 0;

    background: #f8f9fa;

}


/*==================================================
        ACCESSORY BRAND CARD
==================================================*/

.accessory-brand-card {

    position: relative;

    min-height: 180px;

    padding: 30px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e7e7e7;

    border-radius: 20px;

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

    overflow: hidden;

    cursor: pointer;

    transition: transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;

}


/* Yellow top line */

.accessory-brand-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 0;

    height: 4px;

    background: #ffc107;

    transition: width .35s ease;

}


.accessory-brand-card:hover {

    transform: translateY(-9px);

    border-color: #ffc107;

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

}


.accessory-brand-card:hover::before {

    width: 100%;

}


/* Icon */

.accessory-brand-icon {

    width: 58px;

    height: 58px;

    margin-bottom: 17px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fff3cd;

    color: #151515;

    transition: background-color .35s ease,
    transform .35s ease;

}


.accessory-brand-icon i {

    font-size: 24px;

}


.accessory-brand-card:hover
.accessory-brand-icon {

    background: #ffc107;

    transform: scale(1.08);

}


.accessory-brand-card h4 {

    margin-bottom: 5px;

    color: #151515;

    font-size: 18px;

    font-weight: 700;

}


.accessory-brand-card span {

    color: #888888;

    font-size: 12px;

}


/* Note */

.accessory-brand-note {

    margin: 0;

    color: #888888;

    font-size: 13px;

}


/*==================================================
        ACCESSORY BENEFITS
==================================================*/

.accessory-benefits-section {

    padding: 100px 0;

    background: #ffffff;

}


.accessory-benefit-button {

    margin-top: 25px;

    padding: 13px 25px;

    border-radius: 50px;

    font-weight: 600;

}


/*==================================================
        BENEFIT CARD
==================================================*/

.accessory-benefit-card {

    height: 100%;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #eeeeee;

    border-radius: 18px;

    transition: transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;

}


.accessory-benefit-card:hover {

    transform: translateY(-6px);

    border-color: #ffc107;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .09);

}


/* Icon */

.accessory-benefit-icon {

    width: 56px;

    height: 56px;

    margin-bottom: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: #ffc107;

    color: #151515;

}


.accessory-benefit-icon i {

    font-size: 24px;

}


.accessory-benefit-card h4 {

    margin-bottom: 12px;

    color: #151515;

    font-size: 19px;

    font-weight: 700;

}


.accessory-benefit-card p {

    margin: 0;

    color: #6c757d;

    font-size: 14px;

    line-height: 1.75;

}


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

@media (max-width: 768px) {

    .accessory-brands-section,
    .accessory-benefits-section {

        padding: 70px 0;

    }


    .accessory-brand-card {

        min-height: 150px;

        padding: 25px 15px;

    }


    .accessory-benefit-card {

        padding: 25px;

    }

}

/*==================================================
        SPRINT 4 - ACCESSORY ENQUIRY
==================================================*/

.accessory-enquiry-section {

    padding: 80px 0;

    background: #f8f9fa;

}


.accessory-enquiry-card {

    padding: 55px;

    border-radius: 28px;

    background: #151515;

    color: #ffffff;

    box-shadow: 0 20px 45px rgba(0, 0, 0, .15);

}


.accessory-enquiry-tag {

    display: inline-block;

    margin-bottom: 15px;

    color: #ffc107;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.accessory-enquiry-card h2 {

    margin-bottom: 15px;

    font-size: 38px;

    font-weight: 800;

    line-height: 1.2;

}


.accessory-enquiry-card p {

    max-width: 700px;

    margin: 0;

    color: #d8d8d8;

    line-height: 1.8;

}


.accessory-enquiry-buttons {

    display: flex;

    justify-content: flex-end;

    gap: 12px;

    flex-wrap: wrap;

}


.accessory-enquiry-buttons .btn {

    padding: 13px 22px;

    border-radius: 50px;

    font-weight: 600;

}


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

.accessory-faq-section {

    padding: 100px 0;

    background: #ffffff;

}


.accessory-faq-section .accordion-item {

    margin-bottom: 14px;

    border: 0;

    border-radius: 14px !important;

    overflow: hidden;

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

}


.accessory-faq-section .accordion-button {

    padding: 20px;

    color: #151515;

    font-weight: 600;

    background: #ffffff;

    box-shadow: none;

}


.accessory-faq-section .accordion-button:not(.collapsed) {

    background: #ffc107;

    color: #151515;

}


.accessory-faq-section .accordion-body {

    padding: 20px;

    color: #6c757d;

    line-height: 1.8;

    background: #ffffff;

}


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

.accessory-faq-tip {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-top: 30px;

    padding: 22px;

    border-radius: 16px;

    background: #fff8df;

}


.accessory-faq-tip > i {

    flex-shrink: 0;

    color: #d39e00;

    font-size: 24px;

}


.accessory-faq-tip strong {

    display: block;

    margin-bottom: 6px;

    color: #151515;

}


.accessory-faq-tip p {

    margin: 0;

    color: #6c757d;

    font-size: 14px;

    line-height: 1.6;

}


/*==================================================
        FINAL ACCESSORY CTA
==================================================*/

.accessory-final-cta {

    padding: 100px 0;

    background: #f8f9fa;

}


.accessory-final-cta h2 {

    margin: 18px 0 12px;

    color: #151515;

    font-size: 44px;

    font-weight: 800;

}


.accessory-final-cta p {

    margin-bottom: 30px;

    color: #6c757d;

}


.accessory-final-buttons {

    display: flex;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;

}


.accessory-final-buttons .btn {

    padding: 13px 25px;

    border-radius: 50px;

    font-weight: 600;

}


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

@media (max-width: 991px) {

    .accessory-enquiry-card {

        padding: 45px 35px;

    }


    .accessory-enquiry-card h2 {

        font-size: 32px;

    }


    .accessory-enquiry-buttons {

        justify-content: flex-start;

    }

}


@media (max-width: 768px) {

    .accessory-enquiry-section,
    .accessory-faq-section,
    .accessory-final-cta {

        padding: 70px 0;

    }


    .accessory-enquiry-card {

        padding: 35px 25px;

    }


    .accessory-enquiry-card h2 {

        font-size: 28px;

    }


    .accessory-enquiry-buttons {

        flex-direction: column;

        align-items: stretch;

    }


    .accessory-enquiry-buttons .btn {

        width: 100%;

    }


    .accessory-final-cta h2 {

        font-size: 32px;

    }


    .accessory-final-buttons {

        flex-direction: column;

        align-items: stretch;

        padding: 0 20px;

    }

}

/*==================================================
        SPRINT 4 - FINAL ACCESSORIES CLEANUP
==================================================*/


/*==================================================
        GLOBAL ACCESSORIES SAFETY
==================================================*/

.accessories-page-hero,
.accessories-intro-section,
.accessory-categories-section,
.featured-accessories-section,
.accessory-brands-section,
.accessory-benefits-section,
.accessory-enquiry-section,
.accessory-faq-section,
.accessory-final-cta {

    width: 100%;

    overflow: hidden;

}


/*==================================================
        IMAGE SAFETY
==================================================*/

.accessories-page-hero img,
.accessories-intro-section img,
.accessory-categories-section img,
.featured-accessories-section img {

    max-width: 100%;

}


/*==================================================
        ACCESSORY CATEGORY CONSISTENCY
==================================================*/

.accessory-category-card {

    display: flex;

    flex-direction: column;

}


.accessory-category-content {

    display: flex;

    flex-direction: column;

    flex: 1;

}


.accessory-category-link {

    margin-top: auto;

}


/*==================================================
        FEATURED CARD CONSISTENCY
==================================================*/

.featured-accessory-card {

    display: flex;

    flex-direction: column;

}


.featured-accessory-content {

    display: flex;

    flex-direction: column;

    flex: 1;

}


.featured-accessory-footer {

    margin-top: auto;

}


/*==================================================
        BRAND CARD CONSISTENCY
==================================================*/

.accessory-brand-card {

    height: 100%;

}


/*==================================================
        BENEFIT CARD CONSISTENCY
==================================================*/

.accessory-benefit-card {

    height: 100%;

}


/*==================================================
        BUTTON CONSISTENCY
==================================================*/

.accessories-page-hero .btn,
.accessories-intro-section .btn,
.accessory-categories-section .btn,
.featured-accessories-section .btn,
.accessory-benefits-section .btn,
.accessory-enquiry-section .btn,
.accessory-final-cta .btn {

    transition: transform .25s ease,
    box-shadow .25s ease,
    background-color .25s ease;

}


.accessories-page-hero .btn:hover,
.accessories-intro-section .btn:hover,
.featured-accessories-section .btn:hover,
.accessory-benefits-section .btn:hover,
.accessory-enquiry-section .btn:hover,
.accessory-final-cta .btn:hover {

    transform: translateY(-2px);

}


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

@media (max-width: 768px) {

    .accessories-page-hero,
    .accessories-intro-section,
    .accessory-categories-section,
    .featured-accessories-section,
    .accessory-brands-section,
    .accessory-benefits-section,
    .accessory-enquiry-section,
    .accessory-faq-section,
    .accessory-final-cta {

        overflow: hidden;

    }


    .accessories-intro-section .row {

        --bs-gutter-y: 2.5rem;

    }


    .accessory-categories-section .row,
    .featured-accessories-section .row {

        --bs-gutter-y: 1.5rem;

    }


    .accessory-benefits-section .row {

        --bs-gutter-y: 1.5rem;

    }


    .accessory-brand-card {

        min-height: 145px;

    }


    .accessory-benefit-card {

        min-height: auto;

    }

}


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

@media (max-width: 480px) {

    .accessories-hero-content {

        padding-left: 10px;

        padding-right: 10px;

    }


    .accessories-intro-section,
    .accessory-categories-section,
    .featured-accessories-section,
    .accessory-brands-section,
    .accessory-benefits-section,
    .accessory-faq-section {

        padding-top: 60px;

        padding-bottom: 60px;

    }


    .accessory-enquiry-section,
    .accessory-final-cta {

        padding-top: 60px;

        padding-bottom: 60px;

    }


    .accessory-category-content p,
    .featured-accessory-content p {

        min-height: auto;

    }


    .accessory-category-image {

        height: 200px;

    }


    .featured-accessory-image {

        height: 210px;

    }


    .accessory-enquiry-card {

        border-radius: 20px;

    }
}
/*==================================================
        SPRINT 5 - SERVICES HERO
==================================================*/

.services-page-hero {

    position: relative;

    min-height: 560px;

    display: flex;

    align-items: center;

    background-image:
            url('/images/services/services-hero.jpg');

    background-size: cover;

    background-position: center;

    overflow: hidden;

}


.services-hero-overlay {

    position: absolute;

    inset: 0;

    background:
            linear-gradient(
                    90deg,
                    rgba(0, 0, 0, .86) 0%,
                    rgba(0, 0, 0, .62) 50%,
                    rgba(0, 0, 0, .18) 100%
            );

}


.services-hero-content {

    position: relative;

    z-index: 2;

    max-width: 720px;

    padding: 90px 0;

    color: #ffffff;

}


.services-hero-tag {

    display: inline-block;

    padding: 9px 20px;

    margin-bottom: 22px;

    border-radius: 40px;

    background: #ffc107;

    color: #151515;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.4px;

}


.services-hero-content h1 {

    margin-bottom: 22px;

    font-size: 58px;

    font-weight: 800;

    line-height: 1.12;

}


.services-hero-content p {

    max-width: 650px;

    margin-bottom: 32px;

    color: #eeeeee;

    font-size: 18px;

    line-height: 1.8;

}


.services-hero-buttons {

    display: flex;

    gap: 14px;

    flex-wrap: wrap;

}


.services-hero-buttons .btn {

    padding: 13px 25px;

    border-radius: 50px;

    font-weight: 600;

}


/*==================================================
        SERVICES INTRO
==================================================*/

.services-intro-section {

    padding: 100px 0;

    background: #ffffff;

}


.services-intro-image {

    position: relative;

    overflow: hidden;

    border-radius: 24px;

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

}


.services-intro-image img {

    width: 100%;

    height: 500px;

    display: block;

    object-fit: cover;

}


.services-image-badge {

    position: absolute;

    left: 25px;

    bottom: 25px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 15px 20px;

    border-radius: 15px;

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

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

}


.services-image-badge > i {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #ffc107;

    color: #151515;

    font-size: 21px;

}


.services-image-badge strong {

    display: block;

    color: #151515;

    font-size: 14px;

}


.services-image-badge span {

    display: block;

    margin-top: 2px;

    color: #6c757d;

    font-size: 12px;

}


.services-intro-text {

    margin-top: 20px;

    color: #6c757d;

    line-height: 1.9;

}


.services-highlights {

    display: grid;

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

    gap: 14px;

    margin: 28px 0;

}


.service-highlight {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #343a40;

    font-size: 14px;

    font-weight: 500;

}


.service-highlight i {

    color: #ffc107;

    font-size: 17px;

}


.services-intro-button {

    padding: 13px 25px;

    border-radius: 50px;

    font-weight: 600;

}


/*==================================================
        SERVICES HERO RESPONSIVE
==================================================*/

@media (max-width: 992px) {

    .services-page-hero {

        min-height: 500px;

    }

    .services-hero-content h1 {

        font-size: 46px;

    }

    .services-intro-section {

        padding: 75px 0;

    }

}


@media (max-width: 768px) {

    .services-page-hero {

        min-height: 500px;

    }

    .services-hero-content {

        padding: 70px 15px;

    }

    .services-hero-content h1 {

        font-size: 36px;

    }

    .services-hero-content p {

        font-size: 16px;

    }

    .services-hero-buttons {

        flex-direction: column;

        align-items: flex-start;

    }

    .services-hero-buttons .btn {

        width: 220px;

    }

    .services-intro-image img {

        height: 350px;

    }

    .services-highlights {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 480px) {

    .services-hero-content h1 {

        font-size: 30px;

    }

    .services-image-badge {

        left: 15px;

        right: 15px;

        bottom: 15px;

    }

}
/*==================================================
        SPRINT 5 - MAIN SERVICES
==================================================*/

.main-services-section {

    padding: 100px 0;

    background: #f8f9fa;

}


/*==================================================
        SERVICE CARD
==================================================*/

.main-service-card {

    height: 100%;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    background: #ffffff;

    border: 1px solid #eeeeee;

    border-radius: 20px;

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

    transition:
            transform .35s ease,
            box-shadow .35s ease,
            border-color .35s ease;

}


.main-service-card:hover {

    transform: translateY(-8px);

    border-color: #ffc107;

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

}


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

.main-service-image {

    position: relative;

    height: 240px;

    overflow: hidden;

}


.main-service-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .5s ease;

}


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

    transform: scale(1.06);

}


/*==================================================
        SERVICE NUMBER
==================================================*/

.main-service-number {

    position: absolute;

    top: 16px;

    right: 16px;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #ffc107;

    color: #151515;

    font-size: 12px;

    font-weight: 800;

}


/*==================================================
        SERVICE CONTENT
==================================================*/

.main-service-content {

    flex: 1;

    display: flex;

    flex-direction: column;

    padding: 28px;

}


/*==================================================
        SERVICE ICON
==================================================*/

.main-service-icon {

    width: 54px;

    height: 54px;

    margin-bottom: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: #fff3cd;

    color: #151515;

}


.main-service-icon i {

    font-size: 23px;

}


.main-service-card:hover
.main-service-icon {

    background: #ffc107;

}


/*==================================================
        SERVICE TEXT
==================================================*/

.main-service-content h4 {

    margin-bottom: 11px;

    color: #151515;

    font-size: 20px;

    font-weight: 700;

}


.main-service-content p {

    min-height: 78px;

    margin-bottom: 22px;

    color: #6c757d;

    font-size: 14px;

    line-height: 1.75;

}


/*==================================================
        SERVICE LINK
==================================================*/

.main-service-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: auto;

    color: #151515;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

}


.main-service-link i {

    transition: transform .25s ease;

}


.main-service-link:hover {

    color: #b88600;

}


.main-service-link:hover i {

    transform: translateX(5px);

}


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

@media (max-width: 768px) {

    .main-services-section {

        padding: 70px 0;

    }


    .main-service-image {

        height: 230px;

    }


    .main-service-content {

        padding: 25px;

    }


    .main-service-content p {

        min-height: auto;

    }

}


@media (max-width: 480px) {

    .main-service-image {

        height: 210px;

    }

}
/*==================================================
        SPRINT 5 - SERVICE PROCESS
==================================================*/

.service-process-section {

    padding: 100px 0;

    background: #ffffff;

}


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

.service-process-card {

    position: relative;

    height: 100%;

    padding: 35px 25px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #eeeeee;

    border-radius: 20px;

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

    transition:
            transform .3s ease,
            box-shadow .3s ease,
            border-color .3s ease;

}


.service-process-card:hover {

    transform: translateY(-8px);

    border-color: #ffc107;

    box-shadow: 0 18px 38px rgba(0, 0, 0, .10);

}


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

.process-number {

    position: absolute;

    top: 15px;

    right: 15px;

    color: #dddddd;

    font-size: 13px;

    font-weight: 800;

}


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

.process-icon {

    width: 65px;

    height: 65px;

    margin: 0 auto 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    background: #fff3cd;

    color: #151515;

    transition:
            background-color .3s ease,
            transform .3s ease;

}


.process-icon i {

    font-size: 27px;

}


.service-process-card:hover
.process-icon {

    background: #ffc107;

    transform: scale(1.06);

}


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

.service-process-card h4 {

    margin-bottom: 12px;

    color: #151515;

    font-size: 19px;

    font-weight: 700;

}


.service-process-card p {

    margin: 0;

    color: #6c757d;

    font-size: 14px;

    line-height: 1.75;

}


/*==================================================
        WORKSHOP BENEFITS
==================================================*/

.workshop-benefits-section {

    padding: 100px 0;

    background: #f8f9fa;

}


.workshop-benefit-button {

    margin-top: 25px;

    padding: 13px 25px;

    border-radius: 50px;

    font-weight: 600;

}


/*==================================================
        WORKSHOP BENEFIT CARD
==================================================*/

.workshop-benefit-card {

    height: 100%;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #eeeeee;

    border-radius: 18px;

    transition:
            transform .3s ease,
            box-shadow .3s ease,
            border-color .3s ease;

}


.workshop-benefit-card:hover {

    transform: translateY(-6px);

    border-color: #ffc107;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .09);

}


/*==================================================
        BENEFIT ICON
==================================================*/

.workshop-benefit-icon {

    width: 56px;

    height: 56px;

    margin-bottom: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: #ffc107;

    color: #151515;

}


.workshop-benefit-icon i {

    font-size: 24px;

}


/*==================================================
        BENEFIT TEXT
==================================================*/

.workshop-benefit-card h4 {

    margin-bottom: 12px;

    color: #151515;

    font-size: 19px;

    font-weight: 700;

}


.workshop-benefit-card p {

    margin: 0;

    color: #6c757d;

    font-size: 14px;

    line-height: 1.75;

}


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

@media (max-width: 768px) {

    .service-process-section,
    .workshop-benefits-section {

        padding: 70px 0;

    }


    .service-process-card {

        padding: 30px 22px;

    }


    .workshop-benefit-card {

        padding: 25px;

    }

}
/*==================================================
        SPRINT 5 - RECOMMENDED SERVICES
==================================================*/

.recommended-services-section {

    padding: 100px 0;

    background: #ffffff;

}


/*==================================================
        RECOMMENDED SERVICE CARD
==================================================*/

.recommended-service-card {

    position: relative;

    height: 100%;

    padding: 32px;

    display: flex;

    flex-direction: column;

    background: #ffffff;

    border: 1px solid #e7e7e7;

    border-radius: 22px;

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

    transition:
            transform .35s ease,
            box-shadow .35s ease,
            border-color .35s ease;

}


.recommended-service-card:hover {

    transform: translateY(-8px);

    border-color: #ffc107;

    box-shadow: 0 20px 42px rgba(0, 0, 0, .11);

}


/*==================================================
        FEATURED RECOMMENDATION
==================================================*/

.recommended-service-card.featured {

    border: 2px solid #ffc107;

}


.recommended-popular {

    position: absolute;

    top: 18px;

    right: 18px;

    padding: 6px 12px;

    border-radius: 30px;

    background: #ffc107;

    color: #151515;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

}


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

.recommended-service-header {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 22px;

}


.recommended-service-icon {

    width: 55px;

    height: 55px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background: #fff3cd;

    color: #151515;

    transition:
            background-color .3s ease,
            transform .3s ease;

}


.recommended-service-icon i {

    font-size: 23px;

}


.recommended-service-card:hover
.recommended-service-icon {

    background: #ffc107;

    transform: scale(1.05);

}


.recommended-service-label {

    color: #a67c00;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.3px;

}


/*==================================================
        TITLE
==================================================*/

.recommended-service-card h3 {

    margin-bottom: 14px;

    color: #151515;

    font-size: 22px;

    font-weight: 700;

    line-height: 1.35;

}


.recommended-service-card p {

    margin-bottom: 22px;

    color: #6c757d;

    font-size: 14px;

    line-height: 1.75;

}


/*==================================================
        SERVICE LIST
==================================================*/

.recommended-service-list {

    margin-bottom: 25px;

    padding-top: 18px;

    border-top: 1px solid #eeeeee;

}


.recommended-service-list div {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 10px;

    color: #4d4d4d;

    font-size: 13px;

}


.recommended-service-list div:last-child {

    margin-bottom: 0;

}


.recommended-service-list i {

    color: #d39e00;

    font-size: 15px;

}


/*==================================================
        LINK
==================================================*/

.recommended-service-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: auto;

    color: #151515;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

}


.recommended-service-link i {

    transition: transform .25s ease;

}


.recommended-service-link:hover {

    color: #a67c00;

}


.recommended-service-link:hover i {

    transform: translateX(5px);

}


/*==================================================
        INFORMATION NOTE
==================================================*/

.recommended-services-note {

    max-width: 850px;

    margin: 40px auto 0;

    padding: 18px 22px;

    display: flex;

    align-items: flex-start;

    gap: 12px;

    border-radius: 14px;

    background: #f8f9fa;

}


.recommended-services-note i {

    flex-shrink: 0;

    margin-top: 2px;

    color: #b88600;

    font-size: 18px;

}


.recommended-services-note p {

    margin: 0;

    color: #6c757d;

    font-size: 13px;

    line-height: 1.7;

}


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

@media (max-width: 768px) {

    .recommended-services-section {

        padding: 70px 0;

    }


    .recommended-service-card {

        padding: 27px;

    }


    .recommended-service-card h3 {

        font-size: 20px;

    }


    .recommended-services-note {

        margin-top: 30px;

    }

}


@media (max-width: 480px) {

    .recommended-service-card {

        padding: 24px;

    }


    .recommended-service-header {

        align-items: flex-start;

    }

}
/*==================================================
        SPRINT 5 - SERVICES FAQ
==================================================*/

.services-faq-section {

    padding: 100px 0;

    background: #ffffff;

}


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

.services-faq-section .accordion-item {

    margin-bottom: 14px;

    overflow: hidden;

    border: 1px solid #eeeeee;

    border-radius: 14px !important;

    box-shadow: 0 6px 22px rgba(0, 0, 0, .04);

}


.services-faq-section .accordion-button {

    padding: 20px;

    color: #151515;

    font-size: 15px;

    font-weight: 600;

    background: #ffffff;

    box-shadow: none;

}


.services-faq-section .accordion-button:not(.collapsed) {

    background: #ffc107;

    color: #151515;

}


.services-faq-section .accordion-button:focus {

    box-shadow: none;

}


.services-faq-section .accordion-body {

    padding: 20px;

    color: #6c757d;

    font-size: 14px;

    line-height: 1.8;

    background: #ffffff;

}


/*==================================================
        FAQ SUPPORT CARD
==================================================*/

.service-faq-support {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-top: 30px;

    padding: 24px;

    border-radius: 18px;

    background: #fff8df;

}


.service-faq-support-icon {

    width: 50px;

    height: 50px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: #ffc107;

    color: #151515;

}


.service-faq-support-icon i {

    font-size: 22px;

}


.service-faq-support strong {

    display: block;

    margin-bottom: 5px;

    color: #151515;

    font-size: 15px;

}


.service-faq-support p {

    margin: 0 0 10px;

    color: #6c757d;

    font-size: 13px;

    line-height: 1.6;

}


.service-faq-support a {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #151515;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

}


.service-faq-support a:hover {

    color: #a67c00;

}


/*==================================================
        SERVICE ENQUIRY CTA
==================================================*/

.service-enquiry-section {

    padding: 80px 0;

    background: #f8f9fa;

}


.service-enquiry-card {

    padding: 55px;

    overflow: hidden;

    border-radius: 28px;

    background: #151515;

    color: #ffffff;

    box-shadow: 0 20px 45px rgba(0, 0, 0, .15);

}


.service-enquiry-tag {

    display: inline-block;

    margin-bottom: 15px;

    color: #ffc107;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.service-enquiry-card h2 {

    max-width: 650px;

    margin-bottom: 15px;

    font-size: 38px;

    font-weight: 800;

    line-height: 1.2;

}


.service-enquiry-card p {

    max-width: 680px;

    margin: 0;

    color: #d7d7d7;

    font-size: 15px;

    line-height: 1.8;

}


.service-enquiry-buttons {

    display: flex;

    justify-content: flex-end;

    gap: 12px;

    flex-wrap: wrap;

}


.service-enquiry-buttons .btn {

    padding: 13px 22px;

    border-radius: 50px;

    font-weight: 600;

}


/*==================================================
        FINAL SERVICES CTA
==================================================*/

.services-final-cta {

    padding: 100px 0;

    background: #ffffff;

}


.services-final-cta h2 {

    margin: 18px 0 12px;

    color: #151515;

    font-size: 44px;

    font-weight: 800;

}


.services-final-cta p {

    margin-bottom: 30px;

    color: #6c757d;

    font-size: 15px;

}


.services-final-buttons {

    display: flex;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;

}


.services-final-buttons .btn {

    padding: 13px 25px;

    border-radius: 50px;

    font-weight: 600;

}


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

@media (max-width: 991px) {

    .service-enquiry-card {

        padding: 45px 35px;

    }


    .service-enquiry-card h2 {

        font-size: 32px;

    }


    .service-enquiry-buttons {

        justify-content: flex-start;

    }

}


@media (max-width: 768px) {

    .services-faq-section,
    .service-enquiry-section,
    .services-final-cta {

        padding: 70px 0;

    }


    .service-enquiry-card {

        padding: 35px 25px;

    }


    .service-enquiry-card h2 {

        font-size: 28px;

    }


    .service-enquiry-buttons {

        flex-direction: column;

        align-items: stretch;

    }


    .service-enquiry-buttons .btn {

        width: 100%;

    }


    .services-final-cta h2 {

        font-size: 32px;

    }


    .services-final-buttons {

        flex-direction: column;

        align-items: stretch;

        padding: 0 20px;

    }

}
/*==================================================
        SPRINT 5 - FINAL SERVICES CLEANUP
==================================================*/


/*==================================================
        GLOBAL SERVICES SAFETY
==================================================*/

.services-page-hero,
.services-intro-section,
.main-services-section,
.service-process-section,
.workshop-benefits-section,
.recommended-services-section,
.services-faq-section,
.service-enquiry-section,
.services-final-cta {

    width: 100%;

    overflow: hidden;

}


/*==================================================
        IMAGE SAFETY
==================================================*/

.services-page-hero img,
.services-intro-section img,
.main-services-section img {

    max-width: 100%;

}


/*==================================================
        SERVICE CARD HEIGHT CONSISTENCY
==================================================*/

.main-service-card,
.service-process-card,
.workshop-benefit-card,
.recommended-service-card {

    height: 100%;

}


/*==================================================
        SERVICE CONTENT CONSISTENCY
==================================================*/

.main-service-content {

    min-height: 280px;

}


.recommended-service-card {

    display: flex;

    flex-direction: column;

}


/*==================================================
        SERVICE IMAGE CONSISTENCY
==================================================*/

.main-service-image {

    width: 100%;

    overflow: hidden;

}


.main-service-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/*==================================================
        BUTTON HOVER
==================================================*/

.services-page-hero .btn,
.services-intro-section .btn,
.main-services-section .btn,
.workshop-benefits-section .btn,
.recommended-services-section .btn,
.services-faq-section .btn,
.service-enquiry-section .btn,
.services-final-cta .btn {

    transition:
            transform .25s ease,
            box-shadow .25s ease;

}


.services-page-hero .btn:hover,
.services-intro-section .btn:hover,
.workshop-benefits-section .btn:hover,
.service-enquiry-section .btn:hover,
.services-final-cta .btn:hover {

    transform: translateY(-2px);

}


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

@media (max-width: 991px) {

    .services-hero-content {

        max-width: 650px;

    }


    .services-intro-image img {

        height: 430px;

    }


    .main-service-content {

        min-height: auto;

    }


    .service-process-card {

        min-height: 260px;

    }

}


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

@media (max-width: 768px) {

    .services-page-hero,
    .services-intro-section,
    .main-services-section,
    .service-process-section,
    .workshop-benefits-section,
    .recommended-services-section,
    .services-faq-section,
    .service-enquiry-section,
    .services-final-cta {

        overflow: hidden;

    }


    .services-page-hero {

        min-height: 500px;

        background-position: center;

    }


    .services-hero-content {

        padding-top: 70px;

        padding-bottom: 70px;

    }


    .services-hero-content h1 {

        font-size: 36px;

        line-height: 1.2;

    }


    .services-hero-content p {

        font-size: 15px;

        line-height: 1.7;

    }


    .services-hero-buttons {

        flex-direction: column;

        align-items: stretch;

    }


    .services-hero-buttons .btn {

        width: 100%;

        max-width: 280px;

    }


    .services-intro-section {

        padding-top: 70px;

        padding-bottom: 70px;

    }


    .services-intro-image img {

        height: 350px;

    }


    .services-image-badge {

        left: 15px;

        right: 15px;

        bottom: 15px;

    }


    .services-highlights {

        grid-template-columns: 1fr;

    }


    .main-services-section {

        padding-top: 70px;

        padding-bottom: 70px;

    }


    .main-service-image {

        height: 230px;

    }


    .main-service-content {

        min-height: auto;

        padding: 25px;

    }


    .main-service-content p {

        min-height: auto;

    }


    .service-process-section,
    .workshop-benefits-section,
    .recommended-services-section {

        padding-top: 70px;

        padding-bottom: 70px;

    }


    .service-process-card {

        min-height: auto;

    }


    .workshop-benefit-card {

        padding: 25px;

    }


    .recommended-service-card {

        padding: 27px;

    }


    .services-faq-section {

        padding-top: 70px;

        padding-bottom: 70px;

    }


    .service-enquiry-section {

        padding-top: 60px;

        padding-bottom: 60px;

    }


    .service-enquiry-card {

        padding: 35px 25px;

        border-radius: 22px;

    }


    .service-enquiry-buttons {

        flex-direction: column;

        align-items: stretch;

    }


    .service-enquiry-buttons .btn {

        width: 100%;

    }


    .services-final-cta {

        padding-top: 70px;

        padding-bottom: 70px;

    }


    .services-final-buttons {

        flex-direction: column;

        align-items: stretch;

        padding-left: 20px;

        padding-right: 20px;

    }

}


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

@media (max-width: 480px) {

    .services-hero-content {

        padding-left: 10px;

        padding-right: 10px;

    }


    .services-hero-content h1 {

        font-size: 30px;

    }


    .services-hero-tag {

        font-size: 10px;

        padding: 8px 14px;

    }


    .services-intro-image img {

        height: 300px;

    }


    .services-image-badge {

        padding: 12px 14px;

    }


    .services-image-badge > i {

        width: 40px;

        height: 40px;

        font-size: 18px;

    }


    .services-image-badge strong {

        font-size: 12px;

    }


    .services-image-badge span {

        font-size: 10px;

    }


    .main-service-image {

        height: 210px;

    }


    .main-service-content {

        padding: 23px;

    }


    .recommended-service-card {

        padding: 23px;

    }


    .service-faq-support {

        padding: 20px;

    }


    .service-enquiry-card h2 {

        font-size: 28px;

    }


    .services-final-cta h2 {

        font-size: 30px;

    }

}
/*==================================================
        SPRINT 6 - CONTACT HERO
==================================================*/

.contact-page-hero {

    position: relative;

    min-height: 520px;

    display: flex;

    align-items: center;

    background-image:
            url('/images/contact/contact-hero.jpg');

    background-size: cover;

    background-position: center;

    overflow: hidden;

}


.contact-hero-overlay {

    position: absolute;

    inset: 0;

    background:
            linear-gradient(
                    90deg,
                    rgba(0, 0, 0, .88) 0%,
                    rgba(0, 0, 0, .65) 50%,
                    rgba(0, 0, 0, .20) 100%
            );

}


.contact-hero-content {

    position: relative;

    z-index: 2;

    max-width: 700px;

    padding: 90px 0;

    color: #ffffff;

}


.contact-hero-tag {

    display: inline-block;

    padding: 9px 20px;

    margin-bottom: 22px;

    border-radius: 40px;

    background: #ffc107;

    color: #151515;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.contact-hero-content h1 {

    margin-bottom: 20px;

    font-size: 56px;

    font-weight: 800;

    line-height: 1.15;

}


.contact-hero-content p {

    max-width: 620px;

    margin-bottom: 30px;

    color: #eeeeee;

    font-size: 17px;

    line-height: 1.8;

}


.contact-hero-buttons {

    display: flex;

    gap: 13px;

    flex-wrap: wrap;

}


.contact-hero-buttons .btn {

    padding: 13px 24px;

    border-radius: 50px;

    font-weight: 600;

}


/*==================================================
        CONTACT INFORMATION - CLIENT DETAILS
==================================================*/

.contact-details-section {

    padding: 100px 0;

    background: #f8f9fa;

}


/*==================================================
        CONTACT INFO CARD
==================================================*/

.contact-info-card {

    width: 100%;

    height: 100%;

    min-width: 0;

    padding: 32px 24px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    background: #ffffff;

    border: 1px solid #eeeeee;

    border-radius: 22px;

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

    overflow: hidden;

    transition:
            transform .35s ease,
            box-shadow .35s ease,
            border-color .35s ease;

}


.contact-info-card:hover {

    transform: translateY(-7px);

    border-color: #ffc107;

    box-shadow: 0 18px 40px rgba(0, 0, 0, .10);

}


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

.contact-info-icon {

    width: 62px;

    height: 62px;

    flex-shrink: 0;

    margin-bottom: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 17px;

    background: #fff3cd;

    color: #151515;

    transition:
            background-color .3s ease,
            transform .3s ease;

}


.contact-info-icon i {

    font-size: 25px;

}


.contact-info-card:hover
.contact-info-icon {

    background: #ffc107;

    transform: scale(1.05);

}


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

.contact-info-label {

    display: block;

    margin-bottom: 8px;

    color: #a67c00;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.4px;

}


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

.contact-info-card h4 {

    width: 100%;

    margin-bottom: 12px;

    color: #151515;

    font-size: 20px;

    font-weight: 700;

    line-height: 1.3;

}


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

.contact-info-value {

    display: block;

    max-width: 100%;

    margin-bottom: 7px;

    color: #151515;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.5;

    text-decoration: none;

    overflow-wrap: anywhere;

    word-break: break-word;

}


.contact-info-value:hover {

    color: #a67c00;

}


/*==================================================
        PHONE NUMBERS
==================================================*/

.contact-phone-list {

    width: 100%;

    margin-bottom: 10px;

}


.contact-phone-list .contact-info-value {

    margin-bottom: 5px;

}


.contact-phone-list .contact-info-value:last-child {

    margin-bottom: 0;

}


/*==================================================
        EMAIL
==================================================*/

.contact-email {

    font-size: 13px;

    line-height: 1.6;

}


/*==================================================
        DESCRIPTION
==================================================*/

.contact-info-card > p {

    width: 100%;

    max-width: 260px;

    margin: auto 0 0;

    color: #6c757d;

    font-size: 13px;

    line-height: 1.7;

}


/*==================================================
        ADDRESS
==================================================*/

.contact-address {

    width: 100%;

    margin-bottom: 12px;

}


.contact-address strong {

    display: block;

    margin-bottom: 8px;

    color: #151515;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: .3px;

}


.contact-address p {

    width: 100%;

    margin: 0;

    color: #6c757d;

    font-size: 12px;

    line-height: 1.65;

    overflow-wrap: anywhere;

    word-break: break-word;

}


/*==================================================
        LOCATION LINK
==================================================*/

.contact-location-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-top: auto;

    color: #151515;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

}


.contact-location-link:hover {

    color: #a67c00;

}


/*==================================================
        WHATSAPP
==================================================*/

.whatsapp-icon {

    background: #fff3cd;

}


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

@media (max-width: 768px) {

    .contact-details-section {

        padding: 70px 0;

    }


    .contact-info-card {

        padding: 30px 24px;

    }


    .contact-info-value {

        font-size: 14px;

    }


    .contact-email {

        font-size: 13px;

    }

}


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

@media (max-width: 480px) {

    .contact-info-card {

        padding: 28px 20px;

        border-radius: 18px;

    }


    .contact-info-icon {

        width: 58px;

        height: 58px;

    }


    .contact-info-card h4 {

        font-size: 19px;

    }

}
/*==================================================
        SPRINT 6 - CONTACT ENQUIRY
==================================================*/

/*
.contact-enquiry-section {

    padding: 100px 0;

    background: #ffffff;

}
*/


/*==================================================
        ENQUIRY POINTS
==================================================*/


/*==================================================
        CONTACT FORM CARD
==================================================*/

.contact-form-card {

    padding: 40px;

    border: 1px solid #eeeeee;

    border-radius: 24px;

    background: #ffffff;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .07);

}


.contact-form-header {

    margin-bottom: 28px;

}


.contact-form-header > span {

    display: block;

    margin-bottom: 8px;

    color: #a67c00;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.contact-form-header h3 {

    margin-bottom: 8px;

    color: #151515;

    font-size: 27px;

    font-weight: 800;

}


.contact-form-header p {

    margin: 0;

    color: #6c757d;

    font-size: 13px;

}


.contact-form-header p strong {

    color: #dc3545;

}


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

.contact-form-card .form-label {

    margin-bottom: 8px;

    color: #343a40;

    font-size: 13px;

    font-weight: 600;

}


.contact-form-card .form-label span {

    color: #dc3545;

}


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

.contact-form-card .form-control,
.contact-form-card .form-select {

    min-height: 48px;

    padding: 11px 15px;

    border: 1px solid #dddddd;

    border-radius: 10px;

    color: #151515;

    font-size: 13px;

    box-shadow: none;

    transition:
            border-color .25s ease,
            box-shadow .25s ease;

}


.contact-form-card textarea.form-control {

    min-height: 130px;

    resize: vertical;

}


.contact-form-card .form-control::placeholder {

    color: #adb5bd;

}


.contact-form-card .form-control:focus,
.contact-form-card .form-select:focus {

    border-color: #ffc107;

    box-shadow: 0 0 0 3px rgba(255, 193, 7, .15);

}


/*==================================================
        SUBMIT BUTTON
==================================================*/

.contact-submit-button {

    min-height: 50px;

    padding: 12px 28px;

    border-radius: 50px;

    color: #151515;

    font-weight: 700;

    border: none;

}


.contact-submit-button:hover {

    color: #151515;

    transform: translateY(-2px);

}


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

@media (max-width: 768px) {

    .contact-enquiry-section {

        padding: 70px 0;

    }


    .contact-enquiry-points {

        margin-top: 25px;

        margin-bottom: 35px;

    }


    .contact-form-card {

        padding: 30px 25px;

        border-radius: 20px;

    }


    .contact-form-header h3 {

        font-size: 23px;

    }


    .contact-submit-button {

        width: 100%;

    }

}


@media (max-width: 480px) {

    .contact-form-card {

        padding: 25px 20px;

    }


    .contact-enquiry-point {

        gap: 12px;

    }


    .contact-enquiry-point-icon {

        width: 45px;

        height: 45px;

    }

}
/*==================================================
        SPRINT 6 - LOCATION SECTION
==================================================*/

.contact-location-section {

    padding: 100px 0;

    background: #f8f9fa;

}


/*==================================================
        LOCATION CARD
==================================================*/

.contact-location-card {

    height: 100%;

    padding: 40px;

    background: #ffffff;

    border: 1px solid #eeeeee;

    border-radius: 24px;

    box-shadow: 0 10px 32px rgba(0, 0, 0, .06);

}


.contact-location-card-icon {

    width: 62px;

    height: 62px;

    margin-bottom: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 17px;

    background: #ffc107;

    color: #151515;

}


.contact-location-card-icon i {

    font-size: 26px;

}


.contact-location-card h3 {

    margin: 8px 0 20px;

    color: #151515;

    font-size: 27px;

    font-weight: 800;

}


/*==================================================
        FULL ADDRESS
==================================================*/

.contact-full-address {

    margin-bottom: 25px;

}


.contact-full-address p {

    margin: 0;

    color: #6c757d;

    font-size: 15px;

    line-height: 1.9;

}


.contact-full-address strong {

    color: #151515;

    font-weight: 700;

}


/*==================================================
        LOCATION ACTIONS
==================================================*/

.location-action-buttons {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin-bottom: 30px;

}


.location-action-buttons .btn {

    padding: 11px 19px;

    border-radius: 50px;

    font-size: 13px;

    font-weight: 600;

}


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

.location-quick-contact {

    padding-top: 22px;

    border-top: 1px solid #eeeeee;

}


.location-quick-contact div {

    display: flex;

    align-items: flex-start;

    gap: 11px;

    margin-bottom: 12px;

    color: #5f6368;

    font-size: 13px;

    overflow-wrap: anywhere;

}


.location-quick-contact div:last-child {

    margin-bottom: 0;

}


.location-quick-contact i {

    flex-shrink: 0;

    margin-top: 3px;

    color: #b88600;

}


.location-quick-contact span {

    overflow-wrap: anywhere;

    word-break: break-word;

}


/*==================================================
        MAP
==================================================*/

.contact-map-wrapper {

    height: 100%;

    min-height: 500px;

    overflow: hidden;

    border-radius: 24px;

    background: #e9ecef;

    box-shadow: 0 10px 32px rgba(0, 0, 0, .06);

}


.contact-map-wrapper iframe {

    width: 100%;

    height: 100%;

    min-height: 500px;

    display: block;

}


/*==================================================
        CONTACT ACTION SECTION
==================================================*/

.contact-action-section {

    padding: 80px 0;

    background: #ffffff;

}


/*==================================================
        CONTACT ACTION CARD
==================================================*/

.contact-action-card {

    padding: 50px;

    border-radius: 26px;

    background: #151515;

    color: #ffffff;

    box-shadow: 0 20px 45px rgba(0, 0, 0, .15);

}


.contact-action-tag {

    display: inline-block;

    margin-bottom: 14px;

    color: #ffc107;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.contact-action-card h2 {

    margin-bottom: 13px;

    font-size: 36px;

    font-weight: 800;

    line-height: 1.2;

}


.contact-action-card p {

    max-width: 600px;

    margin: 0;

    color: #d6d6d6;

    font-size: 14px;

    line-height: 1.8;

}


/*==================================================
        CTA BUTTONS
==================================================*/

.contact-action-buttons {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    flex-wrap: wrap;

}


.contact-action-buttons .btn {

    padding: 12px 19px;

    border-radius: 50px;

    font-size: 13px;

    font-weight: 600;

}


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

@media (max-width: 991px) {

    .contact-location-card {

        padding: 35px;

    }


    .contact-map-wrapper {

        min-height: 450px;

    }


    .contact-map-wrapper iframe {

        min-height: 450px;

    }


    .contact-action-buttons {

        justify-content: flex-start;

    }

}


@media (max-width: 768px) {

    .contact-location-section {

        padding: 70px 0;

    }


    .contact-location-card {

        padding: 30px 25px;

    }


    .contact-map-wrapper {

        min-height: 380px;

        border-radius: 20px;

    }


    .contact-map-wrapper iframe {

        min-height: 380px;

    }


    .contact-action-section {

        padding: 60px 0;

    }


    .contact-action-card {

        padding: 35px 25px;

        border-radius: 22px;

    }


    .contact-action-card h2 {

        font-size: 29px;

    }


    .contact-action-buttons {

        flex-direction: column;

        align-items: stretch;

    }


    .contact-action-buttons .btn {

        width: 100%;

    }

}


@media (max-width: 480px) {

    .contact-location-card {

        padding: 25px 20px;

    }


    .location-action-buttons {

        flex-direction: column;

        align-items: stretch;

    }


    .location-action-buttons .btn {

        width: 100%;

    }


    .contact-map-wrapper {

        min-height: 330px;

    }


    .contact-map-wrapper iframe {

        min-height: 330px;

    }


    .contact-action-card {

        padding: 30px 20px;

    }

}
/*==================================================
        SPRINT 6 - HOURS + FAQ
==================================================*/

.contact-hours-faq-section {

    padding: 100px 0;

    background: #ffffff;

}


/*==================================================
        BUSINESS HOURS CARD
==================================================*/

.business-hours-card {

    margin-top: 30px;

    padding: 30px;

    background: #f8f9fa;

    border: 1px solid #eeeeee;

    border-radius: 22px;

}


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

.business-hours-header {

    display: flex;

    align-items: center;

    gap: 15px;

    padding-bottom: 22px;

    margin-bottom: 10px;

    border-bottom: 1px solid #e5e5e5;

}


.business-hours-icon {

    width: 52px;

    height: 52px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: #ffc107;

    color: #151515;

}


.business-hours-icon i {

    font-size: 21px;

}


.business-hours-header span {

    display: block;

    margin-bottom: 4px;

    color: #a67c00;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.4px;

}


.business-hours-header h4 {

    margin: 0;

    color: #151515;

    font-size: 19px;

    font-weight: 700;

}


/*==================================================
        HOURS ROW
==================================================*/

.business-hours-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 12px 0;

    border-bottom: 1px solid #e9e9e9;

}


.business-hours-row span {

    color: #555555;

    font-size: 13px;

}


.business-hours-row strong {

    color: #777777;

    font-size: 12px;

    font-weight: 600;

}


/*==================================================
        HOURS NOTE
==================================================*/

.business-hours-note {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-top: 20px;

    padding: 15px;

    border-radius: 12px;

    background: #fff8df;

}


.business-hours-note i {

    flex-shrink: 0;

    margin-top: 2px;

    color: #b88600;

}


.business-hours-note p {

    margin: 0;

    color: #6c757d;

    font-size: 11px;

    line-height: 1.7;

}


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

.contact-faq-accordion {

    margin-top: 30px;

}


.contact-faq-accordion .accordion-item {

    margin-bottom: 12px;

    overflow: hidden;

    border: 1px solid #eeeeee;

    border-radius: 14px !important;

    box-shadow: 0 5px 18px rgba(0, 0, 0, .04);

}


.contact-faq-accordion .accordion-button {

    padding: 18px 20px;

    color: #151515;

    font-size: 14px;

    font-weight: 600;

    background: #ffffff;

    box-shadow: none;

}


.contact-faq-accordion .accordion-button:not(.collapsed) {

    background: #ffc107;

    color: #151515;

}


.contact-faq-accordion .accordion-button:focus {

    box-shadow: none;

}


.contact-faq-accordion .accordion-body {

    padding: 18px 20px;

    color: #6c757d;

    font-size: 13px;

    line-height: 1.8;

    background: #ffffff;

}


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

@media (max-width: 991px) {

    .contact-hours-faq-section {

        padding: 80px 0;

    }

}


@media (max-width: 768px) {

    .contact-hours-faq-section {

        padding: 70px 0;

    }


    .business-hours-card {

        padding: 25px 20px;

    }


    .contact-faq-accordion {

        margin-top: 25px;

    }


    .business-hours-row {

        gap: 10px;

    }

}


@media (max-width: 480px) {

    .business-hours-header {

        gap: 12px;

    }


    .business-hours-icon {

        width: 46px;

        height: 46px;

    }


    .business-hours-row span {

        font-size: 12px;

    }


    .business-hours-row strong {

        font-size: 11px;

    }


    .contact-faq-accordion .accordion-button {

        padding: 16px;

        font-size: 13px;

    }

}
.business-hours-row.closed strong {

    color: #dc3545;

}

/*==================================================
        SPRINT 6 - FINAL CONTACT CTA
==================================================*/

.contact-final-cta {

    padding: 100px 0;

    background: #f8f9fa;

}


/*==================================================
        FINAL CTA CARD
==================================================*/

.contact-final-card {

    position: relative;

    overflow: hidden;

    padding: 60px;

    border-radius: 28px;

    background: #151515;

    color: #ffffff;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .15);

}


/*==================================================
        DECORATIVE ELEMENT
==================================================*/

.contact-final-card::after {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    right: -100px;

    bottom: -130px;

    border: 50px solid rgba(255, 193, 7, .08);

    border-radius: 50%;

    pointer-events: none;

}


/*==================================================
        CTA CONTENT
==================================================*/

.contact-final-tag {

    display: inline-block;

    margin-bottom: 15px;

    color: #ffc107;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.6px;

}


.contact-final-card h2 {

    max-width: 650px;

    margin-bottom: 18px;

    color: #ffffff;

    font-size: 42px;

    font-weight: 800;

    line-height: 1.2;

}


.contact-final-card p {

    max-width: 650px;

    margin-bottom: 25px;

    color: #d2d2d2;

    font-size: 14px;

    line-height: 1.8;

}


/*==================================================
        OPENING HOURS
==================================================*/

.contact-final-hours {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    color: #dddddd;

    font-size: 13px;

    line-height: 1.7;

}


.contact-final-hours > i {

    margin-top: 3px;

    color: #ffc107;

}


.contact-final-hours strong {

    color: #ffffff;

}


/*==================================================
        ACTIONS
==================================================*/

.contact-final-actions {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 10px;

}


/*==================================================
        ACTION ITEM
==================================================*/

.contact-final-action {

    min-width: 0;

    padding: 14px 16px;

    display: flex;

    align-items: center;

    gap: 12px;

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

    border-radius: 14px;

    color: #ffffff;

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

    text-decoration: none;

    transition:
            background-color .25s ease,
            border-color .25s ease,
            transform .25s ease;

}


.contact-final-action:hover {

    color: #ffffff;

    background: rgba(255, 193, 7, .12);

    border-color: rgba(255, 193, 7, .6);

    transform: translateX(4px);

}


/*==================================================
        ACTION ICON
==================================================*/

.contact-final-action-icon {

    width: 43px;

    height: 43px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #ffc107;

    color: #151515;

}


.contact-final-action-icon i {

    font-size: 18px;

}


/*==================================================
        ACTION TEXT
==================================================*/

.contact-final-action > span:nth-child(2) {

    min-width: 0;

    flex: 1;

}


.contact-final-action small {

    display: block;

    margin-bottom: 2px;

    color: #ffc107;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.2px;

}


.contact-final-action strong {

    display: block;

    color: #ffffff;

    font-size: 13px;

    font-weight: 600;

    overflow-wrap: anywhere;

    word-break: break-word;

}


.contact-final-action > i:last-child {

    flex-shrink: 0;

    color: #a9a9a9;

    transition: transform .25s ease;

}


.contact-final-action:hover > i:last-child {

    transform: translateX(4px);

    color: #ffc107;

}


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

.contact-final-form-button {

    margin-top: 4px;

    padding: 13px 20px;

    border-radius: 50px;

    color: #151515;

    font-size: 13px;

    font-weight: 700;

}


.contact-final-form-button:hover {

    color: #151515;

    transform: translateY(-2px);

}


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

@media (max-width: 991px) {

    .contact-final-card {

        padding: 45px;

    }


    .contact-final-card h2 {

        font-size: 36px;

    }

}


@media (max-width: 768px) {

    .contact-final-cta {

        padding: 70px 0;

    }


    .contact-final-card {

        padding: 35px 25px;

        border-radius: 22px;

    }


    .contact-final-card h2 {

        font-size: 30px;

    }


    .contact-final-actions {

        margin-top: 10px;

    }

}


@media (max-width: 480px) {

    .contact-final-card {

        padding: 30px 20px;

    }


    .contact-final-card h2 {

        font-size: 27px;

    }


    .contact-final-action {

        padding: 12px;

    }


    .contact-final-action-icon {

        width: 40px;

        height: 40px;

    }

}
/*==================================================
        CONTACT FORM VALIDATION
==================================================*/

.contact-form-card .is-invalid {

    border-color: #dc3545 !important;

    box-shadow:
            0 0 0 3px rgba(220, 53, 69, .10) !important;

}


.contact-form-card .is-valid {

    border-color: #198754 !important;

    box-shadow:
            0 0 0 3px rgba(25, 135, 84, .10) !important;

}
/*==================================================
        CONTACT PAGE FINAL CLEANUP
==================================================*/

.contact-page-hero,
.contact-details-section,
.contact-enquiry-section,
.contact-location-section,
.contact-hours-faq-section,
.contact-final-cta {

    width: 100%;

    max-width: 100%;

    overflow: hidden;

}


.contact-info-card,
.contact-form-card,
.contact-location-card,
.business-hours-card,
.contact-final-card {

    min-width: 0;

    max-width: 100%;

}


.contact-info-value,
.contact-email,
.contact-address,
.contact-full-address,
.location-quick-contact,
.contact-final-action {

    overflow-wrap: anywhere;

    word-break: break-word;

}


/*==================================================
        PREVENT MOBILE HORIZONTAL SCROLL
==================================================*/

@media (max-width: 768px) {

    .contact-page-hero .container,
    .contact-details-section .container,
    .contact-enquiry-section .container,
    .contact-location-section .container,
    .contact-hours-faq-section .container,
    .contact-final-cta .container {

        width: 100%;

        max-width: 100%;

        padding-left: 15px;

        padding-right: 15px;

    }

}
/*==================================================
        ENQUIRY RESPONSE MESSAGE
==================================================*/

.enquiry-message {

    width: 100%;

    padding: 14px 16px;

    border-radius: 10px;

    font-size: 13px;

    line-height: 1.6;

}


/* Success */

.enquiry-success {

    display: block;

    color: #146c43;

    background: #d1e7dd;

    border: 1px solid #a3cfbb;

}


/* Error */

.enquiry-error {

    display: block;

    color: #842029;

    background: #f8d7da;

    border: 1px solid #f1aeb5;

}


/* Disabled submit button */

.contact-submit-button:disabled {

    cursor: not-allowed;

    opacity: .75;

}

/*==================================================
        REQUEST A CALL BACK
==================================================*/

.callback-section {

    padding: 90px 0;

    background: #f8f9fa;

}


/*==================================================
        CALLBACK CARD
==================================================*/

.callback-card {

    position: relative;

    overflow: hidden;

    padding: 55px;

    border-radius: 28px;

    background: #151515;

    color: #ffffff;

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

}


/*==================================================
        CALLBACK TAG
==================================================*/

.callback-tag {

    display: inline-block;

    margin-bottom: 12px;

    color: #ffc107;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


/*==================================================
        CALLBACK HEADING
==================================================*/

.callback-card h2 {

    margin-bottom: 15px;

    color: #ffffff;

    font-size: 38px;

    font-weight: 800;

}


.callback-card p {

    max-width: 650px;

    margin-bottom: 20px;

    color: #d2d2d2;

    font-size: 14px;

    line-height: 1.8;

}


/*==================================================
        CALLBACK INFO
==================================================*/

.callback-info {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    color: #dddddd;

    font-size: 13px;

    line-height: 1.7;

}


.callback-info i {

    margin-top: 4px;

    color: #ffc107;

}


.callback-info strong {

    color: #ffffff;

}


/*==================================================
        CALLBACK ACTION
==================================================*/

.callback-action {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}


.callback-button {

    width: 100%;

    padding: 15px 25px;

    border: none;

    border-radius: 50px;

    color: #151515;

    font-size: 14px;

    font-weight: 700;

    text-align: center;

    transition:
            transform .25s ease,
            box-shadow .25s ease;

}


.callback-button:hover {

    color: #151515;

    transform: translateY(-3px);

    box-shadow: 0 10px 25px rgba(255, 193, 7, .25);

}


.callback-action small {

    margin-top: 10px;

    color: #999999;

    font-size: 11px;

}


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

@media (max-width: 991px) {

    .callback-card {

        padding: 45px;

    }

    .callback-action {

        align-items: flex-start;

    }

    .callback-button {

        width: auto;

        min-width: 220px;

    }

}


@media (max-width: 768px) {

    .callback-section {

        padding: 70px 0;

    }

    .callback-card {

        padding: 35px 25px;

        border-radius: 22px;

    }

    .callback-card h2 {

        font-size: 30px;

    }

    .callback-button {

        width: 100%;

    }

    .callback-action {

        align-items: stretch;

    }

}