.elementor-kit-5{--e-global-color-primary:#1A1A1A;--e-global-color-secondary:#F5F3EF;--e-global-color-text:#555555;--e-global-color-accent:#C6A47E;--e-global-typography-primary-font-family:"Playfair Display";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1240px;}.e-con{--container-max-width:1240px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ================================================
   1. BRAND COLOURS
   Change as required - refer to Soleva Bathrooms
   ================================================ */
:root {
    --brand-1: #C6A47E; /* Gold */
    --brand-2: #2B2B2B; /* Charcoal */
}



/* ================================================
   2. PRIMARY BUTTON BEHAVIOUR
   Applied via CSS cLass 'cta-solid-button', button begins gold and becomes transparent on hover
   ================================================ */
/* Default state */
.cta-solid-button .elementor-button {
    background-color: var(--brand-1) !important;
    color: #ffffff !important;
    border: 2px solid var(--brand-1) !important;
    transition: all 0.3s ease;
}

/* Hover state (ONLY when button is hovered) */
.cta-solid-button .elementor-button:hover {
    background-color: transparent !important;
    color: var(--brand-1) !important;
    border: 2px solid var(--brand-1) !important;
}

/* Icon default */
.cta-solid-button .elementor-button-icon {
    transform: rotate(45deg);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Icon hover */
.cta-solid-button .elementor-button:hover .elementor-button-icon {
    transform: rotate(360deg);
}

/* Icon colour default */
.cta-solid-button .elementor-button-icon i,
.cta-solid-button .elementor-button-icon svg {
    color: #ffffff;
    fill: #ffffff;
    transition: all 0.3s ease;
}

/* Icon colour on hover (FIXED) */
.cta-solid-button .elementor-button:hover .elementor-button-icon i,
.cta-solid-button .elementor-button:hover .elementor-button-icon svg {
    color: var(--brand-1);
    fill: var(--brand-1);
}



/* ================================================
   3. SECONDARY BUTTON BEHAVIOUR
   Applied via CSS class 'cta-outline-inverse', inverse of primary button
   ================================================ */
/* Default */
.cta-outline-inverse .elementor-button {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 2px solid var(--brand-1) !important;
    transition: all 0.3s ease;
}

/* Hover ONLY when button itself is hovered */
.cta-outline-inverse .elementor-button:hover {
    background-color: var(--brand-1) !important;
    border-color: var(--brand-1) !important;
    color: #ffffff !important;
}

/* Icon default */
.cta-outline-inverse .elementor-button-icon i,
.cta-outline-inverse .elementor-button-icon svg {
    transform: rotate(45deg);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Icon hover (IMPORTANT FIX HERE TOO) */
.cta-outline-inverse .elementor-button:hover .elementor-button-icon i,
.cta-outline-inverse .elementor-button:hover .elementor-button-icon svg {
    transform: rotate(360deg);
}



/* ================================================
   4. HEADER CTA BUTTON
   Button begins as secondary button, colour changed to charcoal on scroll
   ================================================ */
/* Header Button ON SCROLL */
.elementor-sticky--effects.elementor-sticky--active 
.cta-outline-inverse .elementor-button {
    border-color: rgba(43,43,43,0.8) !important;
}

/* Header Button HOVER (on scroll) */
.elementor-sticky--effects.elementor-sticky--active 
.cta-outline-inverse .elementor-button:hover {
    background-color: rgba(43,43,43,0.9) !important;
    color: #ffffff !important;
    border-color: rgba(43,43,43,0.9) !important;
}

/* Default Header State (top of page) */
.elementor-sticky--effects {
    background-color: transparent !important;
    transition: all 0.5s ease;
}

/* On scroll (sticky active) */
.elementor-sticky--effects.elementor-sticky--active {
    background-color: rgba(198, 164, 126, 0.9) !important;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}



/* ================================================
   5. NAV MENU
   Spacing tighter, hover effect applied
   ================================================ */
/* Tighten nav menu spacing */
.elementor-nav-menu--main .elementor-item {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Default state Nav Menu */
.elementor-nav-menu--main .elementor-item {
    transition: all 0.3s ease;
}

/* Hover effect Stationary Nav Menu */
.elementor-nav-menu--main .elementor-item:hover {
    color: var(--brand-1) !important;
}

/* Hover effect SCROLL Nav menu (gold header active) */
.elementor-sticky--effects.elementor-sticky--active 
.elementor-nav-menu--main .elementor-item:hover {
    color: var(--brand-2) !important;
}



/* ================================================
   6. PROJECT CARDS
   Applied via CSS class 'project-card' on each flex container
   ================================================ */

.project-card {
    position: relative;
    overflow: hidden !important;
    border-radius: 8px;
    min-height: 440px !important;
    cursor: pointer;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.45s ease;
}

/* Zooming background - inherits image set in Elementor and scales it */
.project-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
}

.project-card:hover::before {
    transform: scale(1.07);
}

/* Gradient overlay fades in on hover */
.project-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 30%,
        rgba(43, 43, 43, 0.82) 100%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
    pointer-events: none;
}

.project-card:hover::after {
    opacity: 1;
}

/* Card lifts + gold inset line appears at bottom */
.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.18),
                inset 0 -3px 0 var(--brand-1);
}

/* Inner content sits above overlays */
.project-card > .e-con-inner {
    position: relative;
    z-index: 2;
}

/* Text reveal - apply class 'card-info' to any widget you want animated in */
.project-card .card-info {
    transform: translateY(10px);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
                opacity 0.35s ease 0.05s;
}

.project-card:hover .card-info {
    transform: translateY(0);
    opacity: 1;
}

.project-card .card-info .elementor-heading-title,
.project-card .card-info p {
    color: #ffffff !important;
}

/* Ensure card text sits firmly above the gradient overlay */
.project-card .card-info {
    position: relative;
    z-index: 3;
}

/* Text shadow gives the white text crisp definition against the image */
.project-card .card-info .elementor-heading-title,
.project-card .card-info p {
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

/* Add gap between card bottom and header */
.project-card .card-info.elementor-widget {
    margin-bottom: 10px !important;
}

/* Fix: Close the gap between label and heading */
.project-card .elementor-widget-text-editor.card-info {
    margin-bottom: -20px !important;
}

/* Fix: Gold line at bottom of card on hover */
.project-card {
    border-bottom: 3px solid transparent;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.45s ease,
                border-color 0.4s ease;
}

.project-card:hover {
    border-bottom-color: var(--brand-1);
}

/* ================================
   7. LOGO AUTOSCROLL
   ================================ */

.logo-scroll-wrapper {
    overflow: hidden;
    width: 100%;
    padding: 1px;
    background-color: #F7F4F0;
    border-top: 1px solid rgba(198, 164, 126, 0.2);
    border-bottom: 1px solid rgba(198, 164, 126, 0.2);
}

.logo-scroll-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: logoScroll 25s linear infinite;
}

/* Pauses on hover - subtle but a nice touch */
.logo-scroll-track:hover {
    animation-play-state: paused;
}

.logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 48px;
}

/* Greyscale by default, full colour on hover */
.logo-item img {
    height: 48px;
    width: auto;
    max-width: 140px;
    filter: grayscale(100%) opacity(0.45);
    transition: filter 0.4s ease;
}

.logo-item img:hover {
    filter: grayscale(0%) opacity(1);
}

@keyframes logoScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Enlarge smaller logos by adding following code and adding 'large logo' to HTML widget */
.logo-item.logo-large img {
    height: 80px;
}/* End custom CSS */