/********** Template CSS **********/
:root {
    --primary: #d8b748 !important;
    --light: #F8F8F8;
    --dark: #252525;
}
body {
    font-family: 'DM Sans', sans-serif;
}
h1,
h2,
.h1,
.h2,
.fw-bold {
    font-weight: 600 !important;
}

h3,
h4,
.h3,
.h4,
.fw-medium {
    font-weight: 500 !important;
}

h5,
h6,
.h5,
.h6,
.fw-normal {
    font-weight: 400 !important;
}
.back-to-top {
    position: fixed;
    display: none;  /* hidden initially */
    right: 30px;
    bottom: 30px;
    z-index: 99;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    font-weight: 500;
    transition: .5s;
}

.btn.btn-primary,
.btn.btn-secondary {
    color: #FFFFFF;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

.btn-outline-body {
    color: var(--primary);
    border-color: #777777;
}

.btn-outline-body:hover {
    color: #FFFFFF;
    background: var(--primary);
    border-color: var(--primary);
}


/*** Navbar ***/
.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

.navbar .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 30px 0;
    color: var(--dark);
    font-weight: 500;
    text-transform: uppercase;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}

.navbar.sticky-top {
    top: -100px;
    transition: .5s;
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar .navbar-nav {
        border-top: 1px solid #EEEEEE;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        transition: .5s;
        opacity: 0;
    }

    .navbar .nav-item:hover .dropdown-menu {
        transform: rotateX(0deg);
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}
/* =========================================
   Global Section Spacing
   ========================================= */

.container-xxl {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
}


/* =========================================
   Global Section Spacing - Mobile
   ========================================= */

@media (max-width: 767.98px) {

    .container-xxl {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

}

/*** Header ***/
.owl-carousel-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, .5);
}

@media (max-width: 768px) {
    .header-carousel .owl-carousel-item {
        position: relative;
        min-height: 500px;
    }

    .header-carousel .owl-carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .header-carousel .owl-carousel-item p {
        font-size: 16px !important;
    }
}

.header-carousel .owl-dots {
    position: absolute;
    width: 60px;
    height: 100%;
    top: 0;
    right: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.header-carousel .owl-dots .owl-dot {
    position: relative;
    width: 45px;
    height: 45px;
    margin: 5px 0;
    background: var(--dark);
    transition: .5s;
}

.header-carousel .owl-dots .owl-dot.active {
    width: 60px;
    height: 60px;
}

.header-carousel .owl-dots .owl-dot img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 2px;
    transition: .5s;
    opacity: .3;
}

.header-carousel .owl-dots .owl-dot.active img {
    opacity: 1;
}

.page-header {
    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(../img/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: var(--light);
}
.header-carousel h1 {
    line-height: 0.9;
}

/*** Section Title ***/
.section-title {
    color: var(--primary);
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
}


/*** Facts ***/
.fact-item .fact-icon {
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-bottom: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border-radius: 120px;
    transition: .5s;
}

.fact-item:hover .fact-icon {
    background: var(--dark);
}

.fact-item .fact-icon i {
    color: var(--primary);
    transition: .5;
}

.fact-item:hover .fact-icon i {
    color: #FFFFFF;
}


/*** About & Feature ***/
.about-img,
.feature-img {
    position: relative;
    height: 100%;
    min-height: 490px;
}

.about-img img,
.feature-img img {
    position: absolute;
    width: 60%;
    height: 80%;
    object-fit: cover;
}

.about-img img:last-child,
.feature-img img:last-child {
    margin: 20% 0 0 40%;
}

.about-img::before,
.feature-img::before {
    position: absolute;
    content: "";
    width: 60%;
    height: 80%;
    top: 10%;
    left: 20%;
    border: 5px solid var(--primary);
    z-index: -1;
}
/* =========================================================
   ABOUT SECTION - MOBILE ONLY
   ========================================================= */

.about-mobile-title {
    display: none;
}


@media (max-width: 767.98px) {

    /* -----------------------------------------------------
       COLUMN ORDER
       ----------------------------------------------------- */

    .about-row {
        display: flex;
        flex-direction: column;
    }

    .about-images {
        order: 1;
    }

    .about-content {
        order: 2;
    }


    /* -----------------------------------------------------
       MOBILE ABOUT US LABEL
       ----------------------------------------------------- */

    .about-mobile-title {
        display: block;
        margin-bottom: 20px;
    }

    /* Hide desktop About Us label */
    .about-content > .section-title {
        display: none;
    }


    /* -----------------------------------------------------
       STACK IMAGES
       ----------------------------------------------------- */

    .about-img {
        position: relative;
        height: auto;
        min-height: 0;

        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .about-img img,
    .about-img img:last-child {
        position: static;

        width: 100%;
        height: 230px;

        margin: 0 !important;

        object-fit: cover;
        display: block;
    }


    /* Remove desktop gold frame */
    .about-img::before {
        display: none;
    }

}

/*** Service ***/
.service-item .bg-img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.service-item .service-text {
    background: var(--light);
    transition: .5s;
}

.service-item:hover .service-text {
    background: rgba(0, 0, 0, .7);
}

.service-item * {
    transition: .5;
}

.service-item:hover * {
    color: #FFFFFF;
}

.service-item .btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    color: var(--dark);
    background: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    transition: .5s;
}

.service-item:hover .btn {
    width: 140px;
}


/*** Project ***/
.project .nav .nav-link {
    background: var(--light);
    transition: .5s;
}

.project .nav .nav-link.active {
    background: var(--primary);
}

.project .nav .nav-link.active h3 {
    color: #FFFFFF !important;
}
/* =========================================
   Product Section - Equal Height
   ========================================= */

.project .row.g-4 {
    align-items: stretch;
}

.project .col-lg-4 {
    display: flex;
}

.project .nav-pills {
    width: 100%;
    height: 100%;
}

.project .col-lg-8 {
    display: flex;
}

.project .tab-content {
    width: 100%;
    height: 100%;
}

.project .tab-pane {
    height: 100%;
}

.project .tab-pane > .row {
    height: 100%;
}

.project .tab-pane .col-md-6:first-child {
    min-height: 100%;
}

.project .tab-pane .col-md-6:first-child > div {
    height: 100%;
}

.project .tab-pane .col-md-6:first-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*** Team ***/
.team-items {
    margin: -.75rem;
}

.team-item {
    padding: .75rem;
}

.team-item::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    background: #FFFFFF;
    transition: .5s;
    z-index: -1;
}

.team-item:hover::after {
    height: 100%;
    background: var(--primary);
}

.team-item .team-social {
    position: absolute;
    width: 100%;
    bottom: -20px;
    left: 0;
}

.team-item .team-social .btn {
    display: inline-flex;
    margin: 0 2px;
    color: var(--primary);
    background: var(--light);
}

.team-item .team-social .btn:hover {
    color: #FFFFFF;
    background: var(--primary);
}

/*** Services Images ***/

.team-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}
/*** Appointment ***/
.bootstrap-datetimepicker-widget.bottom {
    top: auto !important;
}

.bootstrap-datetimepicker-widget .table * {
    border-bottom-width: 0px;
}

.bootstrap-datetimepicker-widget .table th {
    font-weight: 500;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    padding: 10px;
    border-radius: 2px;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background: var(--primary);
}

.bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: var(--primary);
}


/*** Testimonial ***/
.testimonial-carousel {
    display: flex !important;
    flex-direction: column-reverse;
    max-width: 700px;
    margin: 0 auto;
}

.testimonial-carousel .owl-dots {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.testimonial-carousel .owl-dots .owl-dot {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 5px;
    transition: .5s;
}

.testimonial-carousel .owl-dots .owl-dot.active {
    width: 100px;
    height: 100px;
}

.testimonial-carousel .owl-dots .owl-dot::after {
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    content: "\f10d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--primary);
    background: #FFFFFF;
    border-radius: 40px;
    transition: .5s;
    opacity: 0;
}

.testimonial-carousel .owl-dots .owl-dot.active::after {
    opacity: 1;
}

.testimonial-carousel .owl-dots .owl-dot img {
    opacity: .4;
    transition: .5s;
}

.testimonial-carousel .owl-dots .owl-dot.active img {
    opacity: 1;
}


/*** Footer ***/
.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: #777777;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--primary);
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    color: var(--primary);
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .form-control {
    border-color: #777777;
}

.footer .copyright {
    padding: 25px 0;
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
    color: var(--light);
}

.footer .copyright a:hover {
    color: var(--primary);
}


/* FORCE NEW PRIMARY COLOR EVERYWHERE */
:root{
    --primary:#bc9d5f;
}

/* Bootstrap overrides */
.text-primary{
    color:#d8b748 !important;
}

.bg-primary{
    background-color:#bc9d5f !important;
}

.btn-primary{
    background-color:#d8b748 !important;
    border-color:#d8b748 !important;
}

.btn-primary:hover{
    background-color:#d8b748 !important;
    border-color:#d8b748 !important;
}

.border-primary{
    border-color:#d8b748 !important;
}

/* Icons + SVG + fontawesome colors */
i.text-primary,
.text-primary i,
svg.text-primary{
    color:#d8b748 !important;
    fill:#d8b748 !important;
}











/* =========================================================
   SKS BRANDS SECTION
   ========================================================= */

.sks-brands-section {
    display: flex;
    width: 100%;
    min-height: 360px;
    overflow: hidden;
    background: #FFFFFF;
}


/* Left 40% */

.sks-brands-content {
    width: 40%;
    background: #252525;
    padding: 55px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sks-brands-label {
    color: #d8b748;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.sks-brands-content h2 {
    color: #FFFFFF;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 600;
    margin-bottom: 22px;
}

.sks-brands-content p {
    color: #BDBDBD;
    font-size: 15px;
    line-height: 1.8;
    margin: 0;
    max-width: 390px;
}


/* Right 60% */

.sks-brands-logos {
    width: 60%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #FFFFFF;
}


/* Individual Logo */

.sks-brand-logo {
    min-height: 120px;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
    transition: all 0.4s ease;
}

.sks-brand-logo img {
    max-width: 125px;
    max-height: 55px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: all 0.4s ease;
}


/* Hover */

.sks-brand-logo:hover {
    background: #FAFAFA;
}

.sks-brand-logo:hover img {
    transform: scale(1.06);
}


/* Remove right border from every 3rd logo */

.sks-brand-logo:nth-child(3n) {
    border-right: none;
}


/* Remove bottom border from last row */

.sks-brand-logo:nth-last-child(-n + 3) {
    border-bottom: none;
}


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

@media (max-width: 991.98px) {

    .sks-brands-section {
        min-height: 330px;
    }

    .sks-brands-content {
        padding: 40px 35px;
    }

    .sks-brands-content h2 {
        font-size: 34px;
    }

    .sks-brands-logos {
        grid-template-columns: repeat(3, 1fr);
    }

    .sks-brand-logo {
        min-height: 105px;
        padding: 20px;
    }

    .sks-brand-logo img {
        max-width: 105px;
        max-height: 45px;
    }

}


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

@media (max-width: 767.98px) {

    .sks-brands-section {
        flex-direction: column;
    }

    .sks-brands-content {
        width: 100%;
        padding: 45px 30px;
    }

    .sks-brands-label {
        font-size: 13px;
        letter-spacing: 3px;
    }

    .sks-brands-content h2 {
        font-size: 32px;
    }

    .sks-brands-content p {
        font-size: 14px;
    }

    .sks-brands-logos {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
    }

    .sks-brand-logo {
        min-height: 105px;
    }

    /* Reset 3-column borders for mobile */

    .sks-brand-logo:nth-child(3n) {
        border-right: 1px solid #EEEEEE;
    }

    .sks-brand-logo:nth-child(2n) {
        border-right: none;
    }

    .sks-brand-logo:nth-last-child(-n + 3) {
        border-bottom: 1px solid #EEEEEE;
    }

    .sks-brand-logo:nth-last-child(-n + 2) {
        border-bottom: none;
    }

}


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

@media (max-width: 480px) {

    .sks-brands-content {
        padding: 38px 25px;
    }

    .sks-brands-content h2 {
        font-size: 28px;
    }

    .sks-brands-logos {
        grid-template-columns: repeat(2, 1fr);
    }

    .sks-brand-logo {
        min-height: 90px;
        padding: 15px;
    }

    .sks-brand-logo img {
        max-width: 90px;
        max-height: 40px;
    }

}








/* =========================================================
   SKS ABOUT INTRO
   ========================================================= */

.sks-about-intro {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
}


/* Intro Content */

.sks-about-intro-content {
    max-width: 900px;
    margin-bottom: 45px;
}

.sks-about-intro-content .section-title {
    margin-bottom: 18px;
}

.sks-about-intro-content h1 {
    color: #252525;
    font-size: 52px;
    line-height: 1.15;
    font-weight: 600;
    margin-bottom: 25px;
}

.sks-about-intro-content p {
    max-width: 760px;
    color: #666666;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 0;
}


/* Images */

.sks-about-images {
    margin-top: 10px;
}

.sks-about-image {
    width: 100%;
    height: 360px;
    overflow: hidden;
}

.sks-about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.sks-about-image:hover img {
    transform: scale(1.03);
}


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

@media (max-width: 991.98px) {

    .sks-about-intro {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }

    .sks-about-intro-content h1 {
        font-size: 42px;
    }

    .sks-about-image {
        height: 300px;
    }

}


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

@media (max-width: 767.98px) {

    .sks-about-intro {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }

    .sks-about-intro-content {
        margin-bottom: 30px;
    }

    .sks-about-intro-content h1 {
        font-size: 34px;
        line-height: 1.2;
    }

    .sks-about-intro-content p {
        font-size: 15px;
        line-height: 1.7;
    }

    .sks-about-image {
        height: 250px;
    }

}










/* =========================================================
   SKS FEATURED PRODUCTS SECTION
   ========================================================= */

.sks-products-section {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.sks-products-heading {
    max-width: 750px;
    margin-bottom: 40px;
}

.sks-products-heading .section-title {
    margin-bottom: 18px;
}

.sks-products-heading h1 {
    color: #252525;
    line-height: 1.15;
    margin-bottom: 18px;
}

.sks-products-heading p {
    max-width: 680px;
    color: #666666;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 0;
}


/* =========================================================
   PRODUCT GALLERY
   ========================================================= */

.sks-products-gallery {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr;
    align-items: start;
    gap: 12px;
    width: 100%;
}


/* =========================================================
   PRODUCT IMAGE BOX
   ========================================================= */

.sks-product-item {
    width: 100%;
    height: 290px;
    overflow: hidden;
    background: #f7f7f7;
}


/* =========================================================
   MAIN PRODUCT
   Taller + Slightly Wider
   ========================================================= */

.sks-product-main {
    height: 430px;
}


/* =========================================================
   PRODUCT IMAGES
   ========================================================= */

.sks-product-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}


/* =========================================================
   HOVER EFFECT
   ========================================================= */

.sks-product-item:hover img {
    transform: scale(1.03);
}


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

.sks-products-cta {
    display: flex;
    justify-content: flex-end;
    margin-top: 25px;
}


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

@media (max-width: 991.98px) {

    .sks-products-section {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }

    .sks-products-heading {
        margin-bottom: 35px;
    }

    .sks-products-heading h1 {
        font-size: 42px;
    }


    .sks-products-gallery {
        grid-template-columns: 1.6fr 1fr 1fr;
        gap: 10px;
        align-items: start;
    }


    /* Main image */
    .sks-product-main {
        height: 350px;
    }


    /* Smaller images */
    .sks-product-item:not(.sks-product-main) {
        height: 240px;
    }

}


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

@media (max-width: 767.98px) {

    .sks-products-section {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }

    .sks-products-heading {
        margin-bottom: 30px;
    }

    .sks-products-heading h1 {
        font-size: 34px;
        line-height: 1.2;
    }

    .sks-products-heading p {
        font-size: 15px;
        line-height: 1.7;
    }


    /* =====================================================
       PRODUCT GALLERY
       Stack Products Vertically
       ===================================================== */

    .sks-products-gallery {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        overflow: visible;
    }


    /* =====================================================
       ALL PRODUCT IMAGES
       Same Width + Consistent Height
       ===================================================== */

    .sks-product-item,
    .sks-product-main {
        width: 100%;
        height: 320px;
        flex: none;
    }


    /* =====================================================
       PRODUCT IMAGES
       ===================================================== */

    .sks-product-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }


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

    .sks-products-cta {
        justify-content: center;
        margin-top: 25px;
    }

}








/* =========================================================
   PRODUCTS PAGE INTRO
   ========================================================= */

.sks-products-intro {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.sks-products-intro .section-title {
    margin-bottom: 18px;
}

.sks-products-intro h1 {
    color: #252525;
    line-height: 1.2;
    margin-bottom: 20px;
}

.sks-products-intro p {
    color: #666;
    font-size: 16px;
    line-height: 1.8;
    margin: 0 auto;
    max-width: 750px;
}


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

@media (max-width: 767.98px) {

    .sks-products-intro {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }

    .sks-products-intro h1 {
        font-size: 34px;
    }

    .sks-products-intro p {
        font-size: 15px;
        line-height: 1.7;
    }

}








/* =========================================================
   SKS BRAND PRODUCTS
   ========================================================= */

.sks-brand-products {
    padding-top: 80px !important;
    padding-bottom: 90px !important;
}


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

.sks-brand-block {
    margin-bottom: 110px;
}

.sks-brand-block:last-of-type {
    margin-bottom: 70px;
}


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

.sks-brand-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 38px;
}


/* Brand title + number */

.sks-brand-title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}


/* Number */

.sks-brand-number {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #cdaa3d;
    padding-top: 8px;
    min-width: 28px;
}


/* Section label */

.sks-brand-heading .section-title {
    margin-bottom: 10px;
}


/* Brand heading */

.sks-brand-heading h2 {
    margin: 0;
    color: #252525;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.15;
}


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

.sks-brand-link {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;

    color: #252525;
    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    padding-bottom: 7px;

    border-bottom: 1px solid #cdaa3d;

    transition: all 0.3s ease;
}

.sks-brand-link i {
    color: #cdaa3d;
    transition: transform 0.3s ease;
}

.sks-brand-link:hover {
    color: #cdaa3d;
}

.sks-brand-link:hover i {
    transform: translateX(5px);
}


/* =========================================================
   EDITORIAL PRODUCT GRID
   ========================================================= */

.sks-products-editorial {
    display: grid;

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

    gap: 18px;

    align-items: stretch;
}


/* Two-product layout */

.sks-products-two {
    grid-template-columns: repeat(2, 1fr);
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.sks-product-card {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: #f5f5f5;
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.sks-product-image {
    position: relative;

    width: 100%;

    height: 440px;

    overflow: hidden;
}


/* Three-product sections */

.sks-products-editorial:not(.sks-products-two)
.sks-product-image {
    height: 460px;
}


/* Image */

.sks-product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.5s ease;
}


/* Hover */

.sks-product-card:hover .sks-product-image img {
    transform: scale(1.045);
}


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

.sks-product-image::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 35%;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.45),
        rgba(0, 0, 0, 0)
    );

    pointer-events: none;
}


/* =========================================================
   PRODUCT BADGE
   ========================================================= */

.sks-product-badge {
    position: absolute;

    left: 18px;
    bottom: 18px;

    z-index: 2;

    display: inline-flex;
    align-items: center;

    background: #d5b13f;

    color: #171717;

    padding: 7px 13px;

    border-radius: 50px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.4px;

    line-height: 1;

    text-transform: uppercase;

    white-space: nowrap;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


.sks-product-card:hover .sks-product-badge {
    transform: translateY(-3px);
}


/* =========================================================
   MAIN CTA
   ========================================================= */

.sks-products-main-cta {
    display: flex;

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

    gap: 40px;

    background: #242424;

    padding: 48px 55px;

    margin-top: 10px;
}


/* CTA label */

.sks-cta-label {
    display: block;

    color: #d5b13f;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 10px;
}


/* CTA heading */

.sks-products-main-cta h2 {
    color: #ffffff;

    font-size: 32px;

    line-height: 1.2;

    margin-bottom: 10px;
}


/* CTA paragraph */

.sks-products-main-cta p {
    color: #bdbdbd;

    font-size: 15px;

    line-height: 1.7;

    max-width: 650px;

    margin: 0;
}


/* CTA button */

.sks-cta-button {
    flex-shrink: 0;

    white-space: nowrap;
}


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

@media (max-width: 1199.98px) {

    .sks-brand-heading h2 {
        font-size: 34px;
    }

    .sks-product-image {
        height: 400px;
    }

    .sks-products-editorial:not(.sks-products-two)
    .sks-product-image {
        height: 420px;
    }

}


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

@media (max-width: 991.98px) {

    .sks-brand-products {
        padding-top: 65px !important;
        padding-bottom: 70px !important;
    }

    .sks-brand-block {
        margin-bottom: 80px;
    }

    .sks-brand-heading {
        gap: 25px;
    }

    .sks-brand-heading h2 {
        font-size: 30px;
    }

    .sks-brand-title-wrap {
        gap: 15px;
    }

    .sks-brand-number {
        font-size: 12px;
    }

    .sks-product-image,
    .sks-products-editorial:not(.sks-products-two)
    .sks-product-image {
        height: 360px;
    }

    .sks-products-main-cta {
        padding: 40px;
    }

}


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

@media (max-width: 767.98px) {

    .sks-brand-products {
        padding-top: 50px !important;
        padding-bottom: 60px !important;
    }


    .sks-brand-block {
        margin-bottom: 65px;
    }


    /* Header */

    .sks-brand-heading {
        display: block;

        margin-bottom: 25px;
    }


    .sks-brand-title-wrap {
        gap: 12px;
    }


    .sks-brand-number {
        padding-top: 6px;
        min-width: 22px;
        font-size: 10px;
    }


    .sks-brand-heading h2 {
        font-size: 27px;
        line-height: 1.2;
    }


    .sks-brand-heading .section-title {
        margin-bottom: 8px;
    }


    /* View All */

    .sks-brand-link {
        margin-top: 18px;
    }


    /* Product grid */

    .sks-products-editorial {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .sks-products-two {
        grid-template-columns: 1fr;
    }


    /* Product image */

    .sks-product-image,
    .sks-products-editorial:not(.sks-products-two)
    .sks-product-image {
        height: 360px;
    }


    /* Badge */

    .sks-product-badge {
        left: 14px;
        bottom: 14px;

        font-size: 10px;

        padding: 7px 11px;
    }


    /* CTA */

    .sks-products-main-cta {
        display: block;

        padding: 35px 25px;
    }


    .sks-products-main-cta h2 {
        font-size: 26px;
    }


    .sks-products-main-cta p {
        font-size: 14px;
    }


    .sks-cta-button {
        margin-top: 25px;
    }

}







/* =========================================================
   SKS TRADING INTRO
   ========================================================= */

.sks-trading-intro {
    padding-top: 90px !important;
    padding-bottom: 100px !important;
}


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

.sks-trading-content {
    width: 100%;
}


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

.sks-trading-heading {
    max-width: 850px;
    margin-bottom: 45px;
}

.sks-trading-heading .section-title {
    margin-bottom: 16px;
}

.sks-trading-heading h1 {
    color: #252525;
    line-height: 1.15;
    margin-bottom: 0;
}


/* =========================================================
   TRADING IMAGE
   ========================================================= */

.sks-trading-image {
    width: 100%;
    height: 500px;
    overflow: hidden;
    background: #f5f5f5;
    margin-bottom: 40px;
}

.sks-trading-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.sks-trading-image:hover img {
    transform: scale(1.02);
}


/* =========================================================
   TRADING TEXT
   ========================================================= */

.sks-trading-text {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.sks-trading-text p {
    color: #666666;
    font-size: 17px;
    line-height: 1.9;
    margin-bottom: 20px;
}


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

@media (max-width: 991.98px) {

    .sks-trading-intro {
        padding-top: 70px !important;
        padding-bottom: 80px !important;
    }

    .sks-trading-heading {
        margin-bottom: 35px;
    }

    .sks-trading-heading h1 {
        font-size: 42px;
    }

    .sks-trading-image {
        height: 420px;
        margin-bottom: 35px;
    }

    .sks-trading-text p {
        font-size: 16px;
        line-height: 1.8;
    }

}


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

@media (max-width: 767.98px) {

    .sks-trading-intro {
        padding-top: 55px !important;
        padding-bottom: 65px !important;
    }

    .sks-trading-heading {
        margin-bottom: 28px;
    }

    .sks-trading-heading h1 {
        font-size: 34px;
        line-height: 1.2;
    }

    .sks-trading-image {
        height: 280px;
        margin-bottom: 30px;
    }

    .sks-trading-text p {
        font-size: 15px;
        line-height: 1.75;
    }

}








/* =========================================================
   About CTA Section
========================================================= */

.about-cta-section {
    padding-top: 60px;
    padding-bottom: 60px;
}

.about-cta {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Background Image */

.about-cta-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.6s ease;
}

.about-cta:hover .about-cta-img {
    transform: scale(1.03);
}


/* Dark Overlay */

.about-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.72) 45%,
        rgba(0, 0, 0, 0.30) 100%
    );
    z-index: 2;
}


/* Content */

.about-cta-content {
    position: relative;
    z-index: 3;
    max-width: 720px;
    padding: 70px;
}


/* Small Yellow Label */

.about-cta-label {
    display: inline-block;
    background: var(--primary);
    color: #000;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 8px 16px;
    margin-bottom: 20px;
}


/* Heading */

.about-cta-content h2 {
    color: #fff;
    font-size: 44px;
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 20px;
}


/* Paragraph */

.about-cta-content p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    line-height: 1.8;
    max-width: 650px;
    margin-bottom: 30px;
}


/* Buttons */

.about-cta-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}


/* Secondary Outline Button */

.about-cta-outline {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: transparent;
}

.about-cta-outline:hover {
    background: #fff;
    color: #000;
}


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

@media (max-width: 991px) {

    .about-cta {
        min-height: 400px;
    }

    .about-cta-content {
        padding: 55px;
    }

    .about-cta-content h2 {
        font-size: 38px;
    }

}


@media (max-width: 767px) {

    .about-cta-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .about-cta {
        min-height: 480px;
    }

    .about-cta-overlay {
        background: rgba(0, 0, 0, 0.72);
    }

    .about-cta-content {
        padding: 40px 25px;
    }

    .about-cta-content h2 {
        font-size: 30px;
        line-height: 1.2;
    }

    .about-cta-content p {
        font-size: 15px;
        line-height: 1.7;
    }

    .about-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .about-cta-buttons .btn {
        text-align: center;
        width: 100%;
    }

}







/* =========================================================
   SKS DYSON PRODUCTS PAGE
   ========================================================= */

.sks-dyson-products {
    padding-top: 80px !important;
    padding-bottom: 90px !important;
}


/* =========================================================
   DYSON INTRO
   ========================================================= */

.sks-dyson-intro {
    max-width: 900px;
    margin-bottom: 75px;
}

.sks-dyson-title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}

.sks-dyson-number {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #cdaa3d;
    padding-top: 8px;
    min-width: 28px;
}

.sks-dyson-intro .section-title {
    margin-bottom: 10px;
}

.sks-dyson-intro h1 {
    color: #252525;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
}

.sks-dyson-intro > p {
    color: #666;
    font-size: 16px;
    line-height: 1.8;
    max-width: 700px;
    margin: 25px 0 0 50px;
}


/* =========================================================
   DYSON CATEGORY
   ========================================================= */

.sks-dyson-category {
    margin-bottom: 100px;
}

.sks-dyson-category:last-of-type {
    margin-bottom: 70px;
}


/* =========================================================
   CATEGORY HEADING
   ========================================================= */

.sks-dyson-category-heading {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 30px;
}

.sks-dyson-category-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #cdaa3d;
    color: #cdaa3d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.sks-dyson-category-heading h2 {
    color: #252525;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

.sks-dyson-grid {
    display: grid;
    gap: 18px;
    align-items: stretch;
}

.sks-dyson-grid-four {
    grid-template-columns: repeat(2, 1fr);
}

.sks-dyson-grid-three {
    grid-template-columns: repeat(3, 1fr);
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.sks-dyson-card {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fff;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.sks-dyson-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.sks-dyson-image {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
    background: #fff;
}

.sks-dyson-grid-four .sks-dyson-image {
    height: 440px;
}

.sks-dyson-grid-three .sks-dyson-image {
    height: 430px;
}
.sks-dyson-image img {
    width: 100%;
    height: 100%;
    display: block;

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

    transform: scale(1.18);

    transition:
        opacity 0.45s ease,
        visibility 0.45s ease,
        transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}


/* =========================================================
   VARIANT PRODUCT IMAGES
   ========================================================= */

.sks-dyson-image .sks-dyson-product-image {
    position: absolute;
    inset: 0;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}


/*
   Default selected images
*/

.sks-dyson-image .airstrait-prussian,
.sks-dyson-image .airwrap-prussian {
    opacity: 1;
    visibility: visible;
}

/* =========================================================
   SINGLE PRODUCT IMAGE
   Products without variants
========================================================= */

.sks-dyson-image .sks-dyson-product-image:not(
    .airstrait-image,
    .airwrap-image,
    .purifier-cool-image
) {
    opacity: 1;
    visibility: visible;
}
/* =========================================================
   AIRSTRAIT IMAGE SWITCHING
   ========================================================= */

/* Bright Nickel selected */

.sks-dyson-card:has(
    input[name="airstrait-color"][value="bright-nickel"]:checked
) .airstrait-prussian {
    opacity: 0;
    visibility: hidden;
}

.sks-dyson-card:has(
    input[name="airstrait-color"][value="bright-nickel"]:checked
) .airstrait-nickel {
    opacity: 1;
    visibility: visible;
}


/* Prussian Blue selected */

.sks-dyson-card:has(
    input[name="airstrait-color"][value="prussian-blue"]:checked
) .airstrait-prussian {
    opacity: 1;
    visibility: visible;
}

.sks-dyson-card:has(
    input[name="airstrait-color"][value="prussian-blue"]:checked
) .airstrait-nickel {
    opacity: 0;
    visibility: hidden;
}

/* =========================================================
   AIRWRAP™ HS08 IMAGE SWITCHING
   ========================================================= */


/* =========================================================
   DEFAULT — Ceramic Khaki
========================================================= */

.sks-dyson-image .airwrap-khaki {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================================
   CERAMIC KHAKI
========================================================= */

.sks-dyson-card:has(
    input[name="airwrap-color"][value="ceramic-khaki"]:checked
) .airwrap-khaki {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.sks-dyson-card:has(
    input[name="airwrap-color"][value="ceramic-khaki"]:checked
) .airwrap-plum,
.sks-dyson-card:has(
    input[name="airwrap-color"][value="ceramic-khaki"]:checked
) .airwrap-pink,
.sks-dyson-card:has(
    input[name="airwrap-color"][value="ceramic-khaki"]:checked
) .airwrap-red {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* =========================================================
   JASPER PLUM
========================================================= */

.sks-dyson-card:has(
    input[name="airwrap-color"][value="jasper-plum"]:checked
) .airwrap-khaki,
.sks-dyson-card:has(
    input[name="airwrap-color"][value="jasper-plum"]:checked
) .airwrap-pink,
.sks-dyson-card:has(
    input[name="airwrap-color"][value="jasper-plum"]:checked
) .airwrap-red {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.sks-dyson-card:has(
    input[name="airwrap-color"][value="jasper-plum"]:checked
) .airwrap-plum {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================================
   CERAMIC PINK / ROSE GOLD
========================================================= */

.sks-dyson-card:has(
    input[name="airwrap-color"][value="ceramic-pink"]:checked
) .airwrap-khaki,
.sks-dyson-card:has(
    input[name="airwrap-color"][value="ceramic-pink"]:checked
) .airwrap-plum,
.sks-dyson-card:has(
    input[name="airwrap-color"][value="ceramic-pink"]:checked
) .airwrap-red {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.sks-dyson-card:has(
    input[name="airwrap-color"][value="ceramic-pink"]:checked
) .airwrap-pink {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================================
   RED VELVET / GOLD
========================================================= */

.sks-dyson-card:has(
    input[name="airwrap-color"][value="red-velvet"]:checked
) .airwrap-khaki,
.sks-dyson-card:has(
    input[name="airwrap-color"][value="red-velvet"]:checked
) .airwrap-plum,
.sks-dyson-card:has(
    input[name="airwrap-color"][value="red-velvet"]:checked
) .airwrap-pink {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.sks-dyson-card:has(
    input[name="airwrap-color"][value="red-velvet"]:checked
) .airwrap-red {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================================
   DYSON PURIFIER COOL™
   TP12 / TP04 IMAGE SWITCHING
========================================================= */


/* ---------------------------------------------------------
   HIDE BOTH VARIANT IMAGES BY DEFAULT
--------------------------------------------------------- */

.sks-dyson-image .purifier-cool-image {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* ---------------------------------------------------------
   DEFAULT — TP12
--------------------------------------------------------- */

.sks-dyson-image .purifier-tp12 {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* ---------------------------------------------------------
   TP12 SELECTED
--------------------------------------------------------- */

.sks-dyson-card:has(
    input[name="purifier-cool-model"][value="tp12"]:checked
) .purifier-tp12 {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.sks-dyson-card:has(
    input[name="purifier-cool-model"][value="tp12"]:checked
) .purifier-tp04 {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* ---------------------------------------------------------
   TP04 SELECTED
--------------------------------------------------------- */

.sks-dyson-card:has(
    input[name="purifier-cool-model"][value="tp04"]:checked
) .purifier-tp12 {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.sks-dyson-card:has(
    input[name="purifier-cool-model"][value="tp04"]:checked
) .purifier-tp04 {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================================
   DYSON PURIFIER COOL™
   TP12 / TP04 TITLES
========================================================= */


/* Hide both titles */

.purifier-cool-title {
    display: none;
}


/* ---------------------------------------------------------
   TP12
--------------------------------------------------------- */

.sks-dyson-card:has(
    input[name="purifier-cool-model"][value="tp12"]:checked
) .purifier-title-tp12 {
    display: block;
}


/* ---------------------------------------------------------
   TP04
--------------------------------------------------------- */

.sks-dyson-card:has(
    input[name="purifier-cool-model"][value="tp04"]:checked
) .purifier-title-tp04 {
    display: block;
}


/* =========================================================
   ⭐ VARIANT TITLES
   ========================================================= */

/*
   IMPORTANT:
   Hide ALL variant titles first.
*/

.airstrait-title,
.airwrap-title {
    display: none;
}


/*
   AIRSTRAIT
   Default = Prussian Blue / Rich Copper
*/

.sks-dyson-card:has(
    input[name="airstrait-color"][value="prussian-blue"]:checked
) .airstrait-title-prussian {
    display: block;
}


/*
   AIRSTRAIT
   Bright Nickel / Rich Copper
*/

.sks-dyson-card:has(
    input[name="airstrait-color"][value="bright-nickel"]:checked
) .airstrait-title-nickel {
    display: block;
}


/* =================================
   AIRWRAP™ HS08
   Ceramic Khaki
   Default Variant
================================= */

.sks-dyson-card:has(
    input[name="airwrap-color"][value="ceramic-khaki"]:checked
) .airwrap-title-khaki {

    display: block;

}


/* =================================
   AIRWRAP™ HS08
   Jasper Plum
================================= */

.sks-dyson-card:has(
    input[name="airwrap-color"][value="jasper-plum"]:checked
) .airwrap-title-plum {

    display: block;

}


/* =================================
   AIRWRAP™ HS08
   Ceramic Pink / Rose Gold
================================= */

.sks-dyson-card:has(
    input[name="airwrap-color"][value="ceramic-pink"]:checked
) .airwrap-title-pink {

    display: block;

}


/* =================================
   AIRWRAP™ HS08
   Red Velvet / Gold
================================= */

.sks-dyson-card:has(
    input[name="airwrap-color"][value="red-velvet"]:checked
) .airwrap-title-red {

    display: block;

}


/* =========================================================
   IMAGE HOVER
   ========================================================= */

.sks-dyson-card:hover .sks-dyson-image img {
    transform: scale(1.035);
}


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

.sks-dyson-image::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 35%;

  

    pointer-events: none;
}


/* =========================================================
   PRODUCT BADGE
   ========================================================= */

.sks-dyson-badge {
    position: absolute;

    left: 18px;
    bottom: 18px;

    z-index: 5;

    display: inline-flex;
    align-items: center;

    background: #d5b13f;
    color: #171717;

    padding: 7px 13px;

    border-radius: 50px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1;

    text-transform: uppercase;
    white-space: nowrap;

    transition: transform 0.3s ease;
}

.sks-dyson-card:hover .sks-dyson-badge {
    transform: translateY(-3px);
}


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

.sks-dyson-card-content {
    padding: 22px 22px 25px;
    background: #ffffff;
}

.sks-dyson-card-content h3 {
    color: #252525;

    font-size: 20px;
    font-weight: 700;

    line-height: 1.35;

    margin: 0;
}

.sks-dyson-card-content p {
    color: #707070;

    font-size: 14px;
    line-height: 1.7;

    margin: 10px 0 0;
}


/* =========================================================
   COLOUR VARIANTS
   ========================================================= */

.sks-dyson-colors {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: 16px;
}


/*
   Variant label
*/

.sks-dyson-color-option {
    position: relative;

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

    cursor: pointer;
}


/*
   Hide radio input
*/

.sks-dyson-color-option input {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/*
   Colour circle
*/

.sks-dyson-color {
    position: relative;

    display: block;

    width: 27px;
    height: 27px;

    padding: 0;

    border-radius: 50%;

    border: 1px solid #d0d0d0;

    overflow: hidden;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/*
   Hover
*/

.sks-dyson-color-option:hover .sks-dyson-color {
    transform: scale(1.08);

    border-color: #b9b9b9;
}


/*
   Selected
*/

.sks-dyson-color-option input:checked + .sks-dyson-color {
    border-color: #cdaa3d;

    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 3px #cdaa3d;

    transform: scale(1.08);
}


/* =========================================================
   50 / 50 COLOUR SWATCHES
   ========================================================= */


/*
   AIRSTRAIT
   Prussian Blue / Rich Copper
*/

.airstrait-color-prussian {
    background: linear-gradient(
        90deg,
        #26364b 0%,
        #26364b 50%,
        #b86f4b 50%,
        #b86f4b 100%
    );
}


/*
   AIRSTRAIT
   Bright Nickel / Rich Copper
*/

.airstrait-color-nickel {
    background: linear-gradient(
        90deg,
        #bfc2c4 0%,
        #bfc2c4 50%,
        #b86f4b 50%,
        #b86f4b 100%
    );
}


/*
   SUPERSONIC
   Prussian Blue / Rich Copper
*/

.supersonic-color-prussian {
    background: linear-gradient(
        90deg,
        #26364b 0%,
        #26364b 50%,
        #b86f4b 50%,
        #b86f4b 100%
    );
}


/* =================================
   AIRWRAP™ HS08
   Ceramic Khaki
================================= */

.airwrap-color-khaki {

    background: linear-gradient(
        90deg,
        #d8d5c9 0%,
        #d8d5c9 50%,
        #b9785e 50%,
        #b9785e 100%
    );

}

/* =================================
   AIRWRAP™ HS08
   Jasper Plum
================================= */

.airwrap-color-plum {

    background: linear-gradient(
        90deg,
        #632f45 0%,
        #632f45 50%,
        #c98f86 50%,
        #c98f86 100%
    );

}


/* =================================
   AIRWRAP™ HS08
   Ceramic Pink / Rose Gold
================================= */

.airwrap-color-pink {

    background: linear-gradient(
        90deg,
        #e7b9bd 0%,
        #e7b9bd 50%,
        #b77b67 50%,
        #b77b67 100%
    );

}


/* =================================
   AIRWRAP™ HS08
   Red Velvet / Gold
================================= */

.airwrap-color-red {

    background: linear-gradient(
        90deg,
        #8b2028 0%,
        #8b2028 50%,
        #c9a24a 50%,
        #c9a24a 100%
    );

}


/* =========================================================
   KEYBOARD ACCESSIBILITY
   ========================================================= */

.sks-dyson-color-option input:focus-visible + .sks-dyson-color {
    outline: 2px solid #cdaa3d;
    outline-offset: 3px;
}


/* =========================================================
   DYSON CTA
   ========================================================= */

.sks-dyson-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;

    background: #242424;

    padding: 48px 55px;
}

.sks-dyson-cta > div {
    flex: 1;
}

.sks-dyson-cta > div > span {
    display: block;

    color: #d5b13f;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 10px;
}

.sks-dyson-cta h2 {
    color: #ffffff;

    font-size: 32px;
    line-height: 1.2;

    margin-bottom: 10px;
}

.sks-dyson-cta p {
    color: #bdbdbd;

    font-size: 15px;
    line-height: 1.7;

    max-width: 650px;

    margin: 0;
}

.sks-dyson-cta .btn {
    flex-shrink: 0;
    white-space: nowrap;
}


/* =========================================================
   OTHER DYSON PRODUCTS
   VARIANT IMAGES
========================================================= */


/* =========================================================
   HIDE ALL VARIANT IMAGES BY DEFAULT
========================================================= */

.sks-dyson-image .ontrac-image,
.sks-dyson-image .hushjet-image {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* =========================================================
   ONTRAC
   DEFAULT — CNC COPPER
========================================================= */

.sks-dyson-image .ontrac-copper {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================================
   ONTRAC IMAGE — CNC COPPER
========================================================= */

.sks-dyson-card:has(
    input[name="ontrac-color"][value="copper"]:checked
) .ontrac-copper {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.sks-dyson-card:has(
    input[name="ontrac-color"][value="copper"]:checked
) .ontrac-cinnabar,

.sks-dyson-card:has(
    input[name="ontrac-color"][value="copper"]:checked
) .ontrac-black,

.sks-dyson-card:has(
    input[name="ontrac-color"][value="copper"]:checked
) .ontrac-aluminium {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* =========================================================
   ONTRAC IMAGE — CERAMIC CINNABAR
========================================================= */

.sks-dyson-card:has(
    input[name="ontrac-color"][value="cinnabar"]:checked
) .ontrac-copper,

.sks-dyson-card:has(
    input[name="ontrac-color"][value="cinnabar"]:checked
) .ontrac-black,

.sks-dyson-card:has(
    input[name="ontrac-color"][value="cinnabar"]:checked
) .ontrac-aluminium {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.sks-dyson-card:has(
    input[name="ontrac-color"][value="cinnabar"]:checked
) .ontrac-cinnabar {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================================
   ONTRAC IMAGE — CNC BLACK NICKEL
========================================================= */

.sks-dyson-card:has(
    input[name="ontrac-color"][value="black-nickel"]:checked
) .ontrac-copper,

.sks-dyson-card:has(
    input[name="ontrac-color"][value="black-nickel"]:checked
) .ontrac-cinnabar,

.sks-dyson-card:has(
    input[name="ontrac-color"][value="black-nickel"]:checked
) .ontrac-aluminium {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.sks-dyson-card:has(
    input[name="ontrac-color"][value="black-nickel"]:checked
) .ontrac-black {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================================
   ONTRAC IMAGE — CNC ALUMINIUM
========================================================= */

.sks-dyson-card:has(
    input[name="ontrac-color"][value="aluminium"]:checked
) .ontrac-copper,

.sks-dyson-card:has(
    input[name="ontrac-color"][value="aluminium"]:checked
) .ontrac-cinnabar,

.sks-dyson-card:has(
    input[name="ontrac-color"][value="aluminium"]:checked
) .ontrac-black {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.sks-dyson-card:has(
    input[name="ontrac-color"][value="aluminium"]:checked
) .ontrac-aluminium {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================================
   ONTRAC TITLES
========================================================= */


/* Hide all OnTrac titles */

.ontrac-title {
    display: none;
}


/* CNC Copper */

.sks-dyson-card:has(
    input[name="ontrac-color"][value="copper"]:checked
) .ontrac-title-copper {
    display: block;
}


/* Ceramic Cinnabar */

.sks-dyson-card:has(
    input[name="ontrac-color"][value="cinnabar"]:checked
) .ontrac-title-cinnabar {
    display: block;
}


/* CNC Black Nickel */

.sks-dyson-card:has(
    input[name="ontrac-color"][value="black-nickel"]:checked
) .ontrac-title-black {
    display: block;
}


/* CNC Aluminium */

.sks-dyson-card:has(
    input[name="ontrac-color"][value="aluminium"]:checked
) .ontrac-title-aluminium {
    display: block;
}


/* =========================================================
   HUSHJET IMAGE SWITCHING
========================================================= */


/* Default — Black / Teal */

.sks-dyson-image .hushjet-black {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* White / Silver selected */

.sks-dyson-card:has(
    input[name="hushjet-color"][value="white-silver"]:checked
) .hushjet-black {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.sks-dyson-card:has(
    input[name="hushjet-color"][value="white-silver"]:checked
) .hushjet-white {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* Black / Teal selected */

.sks-dyson-card:has(
    input[name="hushjet-color"][value="black-teal"]:checked
) .hushjet-black {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.sks-dyson-card:has(
    input[name="hushjet-color"][value="black-teal"]:checked
) .hushjet-white {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* =========================================================
   HUSHJET TITLES
========================================================= */


/* Hide all HushJet titles */

.hushjet-title {
    display: none;
}


/* Black / Teal */

.sks-dyson-card:has(
    input[name="hushjet-color"][value="black-teal"]:checked
) .hushjet-title-black {
    display: block;
}


/* White / Silver */

.sks-dyson-card:has(
    input[name="hushjet-color"][value="white-silver"]:checked
) .hushjet-title-white {
    display: block;
}


/* =========================================================
   ONTRAC COLOUR SWATCHES
   50 / 50 CENTERED SPLIT
========================================================= */


/* ---------------------------------------------------------
   CNC Copper
   Prussian Blue + Rich Copper
--------------------------------------------------------- */

.ontrac-color-copper {
    background: linear-gradient(
        to right,
        #18233f 0%,
        #18233f 50%,
        #c4773f 50%,
        #c4773f 100%
    );
}


/* ---------------------------------------------------------
   Ceramic Cinnabar
   Black + Cinnabar
--------------------------------------------------------- */

.ontrac-color-cinnabar {
    background: linear-gradient(
        to right,
        #171717 0%,
        #171717 50%,
        #e45b45 50%,
        #e45b45 100%
    );
}


/* ---------------------------------------------------------
   CNC Black Nickel
   Black + Silver / Nickel
--------------------------------------------------------- */

.ontrac-color-black {
    background: linear-gradient(
        to right,
        #202020 0%,
        #202020 50%,
        #a7a9ab 50%,
        #a7a9ab 100%
    );
}


/* ---------------------------------------------------------
   CNC Aluminium
   Aluminium + Copper / Gold
--------------------------------------------------------- */

.ontrac-color-aluminium {
    background: linear-gradient(
        to right,
        #aeb2b5 0%,
        #aeb2b5 50%,
        #e39a32 50%,
        #e39a32 100%
    );
}


/* =========================================================
   HUSHJET COLOUR SWATCHES
========================================================= */


/* Black / Teal */

.hushjet-color-black {
    background: linear-gradient(
        to right,
        #242424 0%,
        #242424 50%,
        #159b9b 50%,
        #159b9b 100%
    );
}


/* White / Silver */

.hushjet-color-white {
    background: linear-gradient(
        to right,
        #f4f4f4 0%,
        #f4f4f4 50%,
        #bfc2c4 50%,
        #bfc2c4 100%
    );
}
/* =========================================================
   LARGE TABLET
   ========================================================= */

@media (max-width: 1199.98px) {

    .sks-dyson-intro h1 {
        font-size: 38px;
    }

    .sks-dyson-grid-four .sks-dyson-image {
        height: 400px;
    }

    .sks-dyson-grid-three .sks-dyson-image {
        height: 390px;
    }

}


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

@media (max-width: 991.98px) {

    .sks-dyson-products {
        padding-top: 65px !important;
        padding-bottom: 70px !important;
    }

    .sks-dyson-intro {
        margin-bottom: 60px;
    }

    .sks-dyson-intro h1 {
        font-size: 34px;
    }

    .sks-dyson-category {
        margin-bottom: 75px;
    }

    .sks-dyson-category-heading h2 {
        font-size: 27px;
    }

    .sks-dyson-grid-four,
    .sks-dyson-grid-three {
        grid-template-columns: repeat(2, 1fr);
    }

    .sks-dyson-grid-four .sks-dyson-image,
    .sks-dyson-grid-three .sks-dyson-image {
        height: 350px;
    }

    .sks-dyson-cta {
        padding: 40px;
    }

}


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

@media (max-width: 767.98px) {

    .sks-dyson-products {
        padding-top: 50px !important;
        padding-bottom: 60px !important;
    }

    .sks-dyson-intro {
        margin-bottom: 50px;
    }

    .sks-dyson-title-wrap {
        gap: 12px;
    }

    .sks-dyson-number {
        min-width: 22px;
        padding-top: 6px;
        font-size: 10px;
    }

    .sks-dyson-intro h1 {
        font-size: 30px;
        line-height: 1.2;
    }

    .sks-dyson-intro > p {
        margin: 20px 0 0 34px;
        font-size: 15px;
        line-height: 1.7;
    }


    /* Category */

    .sks-dyson-category {
        margin-bottom: 60px;
    }

    .sks-dyson-category-heading {
        gap: 12px;
        margin-bottom: 22px;
    }

    .sks-dyson-category-number {
        width: 30px;
        height: 30px;
        font-size: 10px;
    }

    .sks-dyson-category-heading h2 {
        font-size: 24px;
    }


    /* Grid */

    .sks-dyson-grid-four,
    .sks-dyson-grid-three {
        grid-template-columns: 1fr;
        gap: 12px;
    }


    /* Images */

    .sks-dyson-grid-four .sks-dyson-image,
    .sks-dyson-grid-three .sks-dyson-image {
        height: 360px;
    }


    /* Content */

    .sks-dyson-card-content {
        padding: 19px 18px 22px;
    }

    .sks-dyson-card-content h3 {
        font-size: 18px;
    }

    .sks-dyson-card-content p {
        font-size: 14px;
    }


    /* Variant circles */

    .sks-dyson-color {
        width: 26px;
        height: 26px;
    }


    /* Badge */

    .sks-dyson-badge {
        left: 14px;
        bottom: 14px;
        font-size: 10px;
        padding: 7px 11px;
    }


    /* CTA */

    .sks-dyson-cta {
        display: block;
        padding: 35px 25px;
    }

    .sks-dyson-cta h2 {
        font-size: 26px;
    }

    .sks-dyson-cta p {
        font-size: 14px;
    }

    .sks-dyson-cta .btn {
        margin-top: 25px;
    }

}