.solar-mobile-menu:not(.open) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(105%) !important;
}
.solar-menu-backdrop:not(.open) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
/* =========================================================
   SEPARATED NAVIGATION + SLIDER/BANNER MODULES
   Structural wrappers only — existing design is untouched.
========================================================= */
.solar-nav-section,
.solar-banner-section {
    position: static;
    width: 100%;
}

/* =========================================================
   SEPARATED NAVIGATION + SLIDER/BANNER MODULES
   Structural wrappers only — existing design/behavior remains.
========================================================= */
.solar-nav-section,
.solar-banner-section {
    position: static;
    width: 100%;
}

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

.solar-main-hero,
.solar-main-hero * {
    box-sizing: border-box;
}

.solar-main-hero {
    position: relative;

    width: 100%;

    min-height: 790px;

    overflow: hidden;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    background: #061a35;
}


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

.solar-main-header {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    height: 92px;

    z-index: 100;

    background: rgba(5,20,38,.24);

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

    backdrop-filter: blur(7px);
}


.solar-header-container {

    width:
        calc(100% - 90px);

    max-width: 1550px;

    height: 100%;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* LOGO */

.solar-main-logo img {

    width: 185px;

    display: block;

    height: auto;
}


/* Desktop uses the horizontal hamburger menu; navigation opens in the overlay. */

/* =========================================================
   HAMBURGER
========================================================= */

.solar-menu-button {

    display: flex;

    width: 52px;

    height: 52px;

    border: 0;

    background: transparent;

    cursor: pointer;

    padding: 7px;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 6px;

    transition: .3s ease;
}

.solar-menu-button:hover {
    transform: scale(1.06);
}

.solar-menu-button span {
    display: block;

    width: 34px;

    height: 3px;

    margin: 0;

    border-radius: 10px;

    background: #fff;

    transition: .3s ease;
}


.solar-menu-button span {

    display: block;

    width: 32px;

    height: 3px;

    margin: 6px 0;

    border-radius: 10px;

    background: #fff;
}


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

.solar-carousel {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;
}


.solar-slide {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

    opacity: 0;

    visibility: hidden;

    transform: scale(1.05);

    transition:
        opacity 1s ease,
        visibility 1s ease,
        transform 6s ease;
}


.solar-slide.active {

    opacity: 1;

    visibility: visible;

    transform: scale(1);
}


/* DARK LAYER */

.solar-slide-dark {

    position: absolute;

    inset: 0;

    background:
        rgba(0,0,0,.30);
}


/* GRADIENT */

.solar-slide-gradient {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(2,17,34,.88) 0%,
            rgba(2,17,34,.60) 32%,
            rgba(2,17,34,.16) 65%,
            rgba(2,17,34,.28) 100%
        );
}


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

.solar-slide-content {

    position: absolute;

    left: 7.5%;

    top: 48%;

    width: 48%;

    max-width: 700px;

    transform: translateY(-50%);

    z-index: 5;
}


/* TAG */

.solar-slide-tag {

    color: #e5b869;

    font-size: 12px;

    letter-spacing: 2.5px;

    font-weight: 700;

    margin-bottom: 20px;

    opacity: 0;

    transform: translateY(20px);
}


.solar-slide.active
.solar-slide-tag {

    animation:
        solarFadeUp .7s .15s forwards;
}


/* HEADING */

.solar-slide h1 {

    margin: 0;

    color: #fff;

    font-size:
        clamp(43px, 4.3vw, 70px);

    line-height: 1.05;

    font-weight: 500;

    letter-spacing: -2px;

    opacity: 0;

    transform: translateY(30px);
}


.solar-slide.active
h1 {

    animation:
        solarFadeUp .8s .25s forwards;
}


/* DESCRIPTION */

.solar-slide-description {

    max-width: 560px;

    color:
        rgba(255,255,255,.82);

    font-size: 16px;

    line-height: 1.6;

    margin:
        25px 0 27px;

    opacity: 0;

    transform: translateY(20px);
}


.solar-slide.active
.solar-slide-description {

    animation:
        solarFadeUp .7s .4s forwards;
}


/* ACTIONS */

.solar-slide-actions {

    display: flex;

    gap: 12px;

    opacity: 0;

    transform: translateY(20px);
}


.solar-slide.active
.solar-slide-actions {

    animation:
        solarFadeUp .7s .5s forwards;
}


/* BUTTON */

.solar-primary-btn {

    display: inline-flex;

    align-items: center;

    gap: 30px;

    padding:
        15px 21px;

    background: #e5b869;

    color: #111;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition: .3s;
}


.solar-primary-btn span {

    font-size: 22px;

    transition: .3s;
}


.solar-primary-btn:hover {

    background: #fff;
}


.solar-primary-btn:hover span {

    transform: translateX(5px);
}


/* SECONDARY */

.solar-secondary-btn {

    display: inline-flex;

    align-items: center;

    padding:
        15px 23px;

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

    color: #fff;

    text-decoration: none;

    font-size: 13px;

    transition: .3s;
}


.solar-secondary-btn:hover {

    background: #fff;

    color: #111;
}


/* =========================================================
   SLIDE NUMBER
========================================================= */

.solar-slide-number {

    position: absolute;

    left: 7.5%;

    bottom: 70px;

    z-index: 8;

    display: flex;

    align-items: baseline;

    gap: 8px;

    color: #fff;

    font-size: 17px;

    letter-spacing: 1px;
}


.solar-slide-number .current {

    font-size: 28px;

    font-weight: 700;

    color: #fff;
}


.solar-slide-number .slash {

    color:
        rgba(255,255,255,.45);
}


/* =========================================================
   PROGRESS
========================================================= */

.solar-slide-progress {

    position: absolute;

    left: 7.5%;

    bottom: 49px;

    display: flex;

    gap: 7px;

    z-index: 8;
}


.solar-slide-progress span {

    width: 25px;

    height: 3px;

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

    transition: .4s;
}


.solar-slide-progress span.active {

    width: 48px;

    background: #e5b869;
}


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

.solar-slide-arrows {

    position: absolute;

    left: calc(7.5% + 160px);

    bottom: 45px;

    display: flex;

    gap: 8px;

    z-index: 10;
}


.solar-slide-arrows button {

    width: 43px;

    height: 43px;

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

    background:
        rgba(0,0,0,.18);

    color: #fff;

    cursor: pointer;

    font-size: 20px;

    transition: .25s;
}


.solar-slide-arrows button:hover {

    background: #e5b869;

    border-color: #e5b869;

    color: #111;
}


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

.solar-enquiry-card {

    position: absolute;

    z-index: 20;

    top: 50%;

    right: 5%;

    transform: translateY(-47%);

    width: 570px;

    padding: 29px 30px 22px;

    background:
        linear-gradient(
            145deg,
            #f4cc85,
            #b88d3e
        );

    box-shadow:
        0 25px 70px rgba(0,0,0,.28);

    color: #111;
}


/* FORM HEADING */

.solar-form-small {

    display: block;

    font-size: 11px;

    letter-spacing: 2px;

    font-weight: 800;

    color:
        rgba(0,0,0,.58);

    margin-bottom: 7px;
}


.solar-form-heading h2 {

    margin: 0;

    font-size: 27px;

    line-height: 1.15;

    font-weight: 400;
}


.solar-form-heading h2 strong {

    font-weight: 800;
}


.solar-form-heading p {

    margin:
        9px 0 19px;

    font-size: 13px;

    line-height: 1.45;

    color:
        rgba(0,0,0,.68);
}


/* LOOKING */

.solar-looking-title {

    font-size: 17px;

    font-weight: 600;

    margin-bottom: 11px;
}


.solar-radio-group {

    display: flex;

    gap: 25px;

    flex-wrap: wrap;
}


.solar-radio-option {

    display: flex;

    align-items: center;

    gap: 8px;

    cursor: pointer;

    font-size: 14px;
}


.solar-radio-option input {

    position: absolute;

    opacity: 0;
}


.solar-radio-circle {

    width: 21px;

    height: 21px;

    border-radius: 50%;

    background: #fff;

    border: 2px solid #fff;

    position: relative;
}


.solar-radio-option input:checked
+ .solar-radio-circle:after {

    content: "";

    position: absolute;

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: #e5b869;

    top: 4px;

    left: 4px;
}


/* NOTE */

.solar-required-note {

    font-size: 10px;

    color:
        rgba(120,25,0,.8);

    margin:
        7px 0 15px;
}


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

.solar-form-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 11px;
}


.solar-input-wrap input,
.solar-mobile-input input,
.solar-mobile-input select {

    width: 100%;

    height: 45px;

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

    outline: none;

    border-radius: 0;

    background:
        rgba(255,133,23,.1);

    color: #fff;

    padding: 0 12px;

    font-size: 13px;
}


.solar-input-wrap input::placeholder,
.solar-mobile-input input::placeholder {

    color:
        rgba(255,255,255,.95);
}


.solar-mobile-input {

    display: grid;

    grid-template-columns:
        112px 1fr;
}


.solar-mobile-input select {

    appearance: auto;

    padding-left: 9px;
}


.solar-mobile-input option {

    color: #111;
}


.solar-input-wrap.full {

    grid-column:
        1 / -1;
}


/* =========================================================
   TERMS
========================================================= */

.solar-form-terms {

    margin-top: 15px;

    font-size: 10.5px;

    line-height: 1.45;

    color:
        rgba(0,0,0,.72);
}


.solar-form-terms a {

    color: #06234b;

    text-decoration: underline;
}


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

.solar-form-buttons {

    display: flex;

    margin-top: 17px;

    gap: 3px;
}


.solar-generate-btn,
.solar-call-button {

    height: 53px;

    border: 0;

    background: #031d3b;

    color: #fff;

    text-decoration: none;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 17px;
}


.solar-generate-btn {

    width: 52%;

    font-size: 12px;

    letter-spacing: 1.4px;

    font-weight: 700;
}


.solar-call-button {

    width: 48%;

    gap: 9px;
}


.solar-call-button small {

    display: block;

    font-size: 9px;

    color:
        rgba(255,255,255,.65);

    margin-bottom: 2px;
}


.solar-call-button {

    font-size: 13px;

    font-weight: 600;
}


.solar-call-button .phone-icon {

    font-size: 17px;
}


.solar-generate-btn b,
.solar-call-button b {

    font-size: 21px;

    font-weight: 400;

    transition: .25s;
}


.solar-generate-btn:hover b,
.solar-call-button:hover b {

    transform:
        translateX(5px);
}


/* TRUST */

.solar-form-trust {

    display: flex;

    justify-content: center;

    gap: 10px;

    margin-top: 14px;

    font-size: 10px;

    color:
        rgba(0,0,0,.62);
}


.solar-form-trust span {

    color:
        #08345d;

    font-weight: 900;
}


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

.solar-mobile-menu {

    position: fixed;

    inset: 0;

    z-index: 9999;

    background:
        rgba(2,18,36,.97);

    backdrop-filter: blur(15px);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-20px);

    transition: .35s;

    overflow-y: auto;
}


.solar-mobile-menu.open {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}


.solar-mobile-menu-inner {

    width:
        calc(100% - 35px);

    margin: auto;
}


.solar-mobile-menu-header {

    height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;

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


.solar-mobile-menu-header img {

    width: 150px;
}


.solar-mobile-menu-header button {

    width: 45px;

    height: 45px;

    border: 0;

    background: transparent;

    position: relative;
}


.solar-mobile-menu-header button span {

    position: absolute;

    left: 7px;

    top: 21px;

    width: 31px;

    height: 3px;

    background: #fff;
}


.solar-mobile-menu-header button span:first-child {

    transform: rotate(45deg);
}


.solar-mobile-menu-header button span:last-child {

    transform: rotate(-45deg);
}


.solar-mobile-navigation {

    padding:
        35px 0 60px;
}


.solar-mobile-navigation a {

    display: block;

    color: #fff;

    text-decoration: none;

    font-size: 27px;

    font-weight: 400;

    padding: 11px 0;

    transition: .25s;
}


.solar-mobile-navigation a:hover {

    color: #e5b869;

    padding-left: 8px;
}


.solar-mobile-navigation
.solar-mobile-quote {

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #e5b869;

    color: #111;

    padding:
        14px 18px;

    margin-top: 20px;

    font-size: 20px;

    font-weight: 700;
}


.solar-mobile-navigation
.solar-mobile-quote:hover {

    color: #111;

    padding-left: 18px;
}



/* =========================================================
   UNIVERSAL HAMBURGER MENU - DESKTOP
========================================================= */

@media (min-width: 901px) {

    .solar-mobile-menu-inner {
        width: calc(100% - 110px);
        max-width: 1450px;
    }

    .solar-mobile-menu-header {
        height: 92px;
    }

    .solar-mobile-navigation {
        display: grid;
        grid-template-columns: repeat(2, minmax(240px, 1fr));
        column-gap: 80px;
        row-gap: 0;
        padding: 55px 4% 70px;
    }

    .solar-mobile-navigation a {
        font-size: clamp(25px, 2.2vw, 38px);
        padding: 12px 0;
        border-bottom: 1px solid rgba(255,255,255,.10);
    }

    .solar-mobile-navigation .solar-mobile-quote {
        width: fit-content;
        min-width: 210px;
        border: 0;
        margin-top: 22px;
        padding: 15px 20px;
    }

    .solar-mobile-menu-header img {
        width: 185px;
    }

    .solar-mobile-menu-header button {
        width: 52px;
        height: 52px;
    }

    .solar-mobile-menu-header button span {
        width: 34px;
        left: 9px;
        top: 24px;
    }
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes solarFadeUp {

    from {

        opacity: 0;

        transform:
            translateY(30px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


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

@media (max-width: 1200px) {

    .solar-desktop-nav {

        gap: 17px;
    }

    .solar-enquiry-card {

        width: 500px;

        right: 25px;
    }

    .solar-slide-content {

        width: 46%;

        left: 5%;
    }

    .solar-slide h1 {

        font-size: 47px;
    }

}


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

@media (max-width: 900px) {

    .solar-main-hero {

        min-height: auto;

        overflow: visible;

        display: flex;

        flex-direction: column;
    }


    /* HEADER */

    .solar-main-header {

        height: 80px;
    }


    .solar-header-container {

        width:
            calc(100% - 32px);
    }


    .solar-main-logo img {

        width: 150px;
    }

    /* CAROUSEL */

    .solar-carousel {

        position: relative;

        height: 540px;

        order: 1;
    }


    .solar-slide-content {

        left: 25px;

        right: 25px;

        top: 47%;

        width: auto;

        transform:
            translateY(-50%);
    }


    .solar-slide h1 {

        font-size:
            clamp(34px, 8vw, 48px);

        line-height: 1.08;

        letter-spacing: -1px;
    }


    .solar-slide-tag {

        font-size: 9px;

        letter-spacing: 1.7px;

        margin-bottom: 13px;
    }


    .solar-slide-description {

        font-size: 13px;

        max-width: 390px;

        margin:
            16px 0 20px;
    }


    .solar-slide-actions {

        gap: 7px;
    }


    .solar-primary-btn,
    .solar-secondary-btn {

        padding:
            12px 14px;

        font-size: 11px;
    }


    .solar-primary-btn {

        gap: 13px;
    }


    .solar-slide-number {

        left: 25px;

        bottom: 55px;
    }


    .solar-slide-progress {

        left: 25px;

        bottom: 35px;
    }


    .solar-slide-arrows {

        right: 25px;

        left: auto;

        bottom: 28px;
    }


    .solar-slide-arrows button {

        width: 38px;

        height: 38px;
    }


    /* FORM */

    .solar-enquiry-card {

        position: relative;

        top: auto;

        right: auto;

        transform: none;

        width: 100%;

        order: 2;

        padding:
            27px 17px 22px;

        box-shadow: none;
    }


    .solar-form-heading h2 {

        font-size: 25px;
    }


    .solar-form-heading p {

        font-size: 12px;
    }


    .solar-form-grid {

        display: flex;

        flex-direction: column;

        gap: 10px;
    }


    .solar-radio-group {

        flex-direction: column;

        gap: 11px;
    }


    .solar-form-buttons {

        flex-direction: column;

        gap: 7px;
    }


    .solar-generate-btn,
    .solar-call-button {

        width: 100%;
    }

}



@media (max-width: 900px) {

    .solar-menu-button {
        width: 45px;
        height: 45px;
        padding: 5px;
        gap: 5px;
    }

    .solar-menu-button span {
        width: 29px;
        height: 3px;
    }

}

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

@media (max-width: 420px) {

    .solar-carousel {

        height: 510px;
    }


    .solar-slide h1 {

        font-size: 26px;
    }


    .solar-slide-description {

        font-size: 12px;
    }


    .solar-primary-btn {

        padding:
            11px 12px;
    }


    .solar-secondary-btn {

        padding:
            11px 13px;
    }


    .solar-slide-number {

        bottom: 51px;
    }

}


/* Header remains visible above the hero */
.solar-main-header {
    z-index: 9000 !important;
}

.solar-main-logo {
    position: relative;
    z-index: 9001;
}



/* =========================================================
   RIGHT SIDE MENU DRAWER - DESKTOP + MOBILE
========================================================= */

.solar-mobile-menu {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;

    width: min(520px, 88vw) !important;
    height: 100vh !important;

    z-index: 30000 !important;

    background:
        linear-gradient(
            145deg,
            rgba(3,24,48,.985),
            rgba(1,15,31,.99)
        ) !important;

    backdrop-filter: blur(18px);

    opacity: 0 !important;
    visibility: hidden !important;

    transform: translateX(105%) !important;

    transition:
        transform .48s cubic-bezier(.22,.61,.36,1),
        opacity .3s ease,
        visibility .3s ease !important;

    overflow-y: auto !important;

    box-shadow:
        -25px 0 70px rgba(0,0,0,.38);

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

.solar-mobile-menu.open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
}

.solar-mobile-menu-inner {
    width: calc(100% - 56px) !important;
    max-width: none !important;
    min-height: 100%;
    margin: 0 auto !important;
}

.solar-mobile-menu-header {
    height: 105px !important;

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

    border-bottom:
        1px solid rgba(255,255,255,.13) !important;
}

.solar-mobile-menu-header img {
    width: 170px !important;
    max-width: 70%;
    height: auto;
}

.solar-mobile-menu-header button {
    width: 48px !important;
    height: 48px !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    background: rgba(255,255,255,.04) !important;
    cursor: pointer;
    position: relative;
}

.solar-mobile-menu-header button span {
    position: absolute;
    left: 8px !important;
    top: 22px !important;
    width: 30px !important;
    height: 2px !important;
    background: #fff;
}

.solar-mobile-menu-header button span:first-child {
    transform: rotate(45deg);
}

.solar-mobile-menu-header button span:last-child {
    transform: rotate(-45deg);
}


/* MENU LINKS */

.solar-mobile-navigation {
    display: flex !important;
    flex-direction: column !important;
    padding: 34px 0 55px !important;
}

.solar-mobile-navigation a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;

    color: #fff !important;
    text-decoration: none;

    font-size: 25px !important;
    line-height: 1.2;

    font-weight: 400;

    padding: 16px 0 !important;

    margin: 0 !important;

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

    transition:
        color .25s ease,
        padding-left .25s ease,
        border-color .25s ease;
}

.solar-mobile-navigation a:hover {
    color: #f4cc85 !important;
    padding-left: 8px !important;
    border-color: rgba(255,138,24,.45);
}


/* QUOTE */

.solar-mobile-navigation .solar-mobile-quote {
    display: flex !important;

    width: fit-content !important;
    min-width: 205px;

    margin-top: 25px !important;

    padding: 14px 20px !important;

    background: #e5b869 !important;
    color: #111 !important;

    border: 0 !important;

    font-size: 18px !important;
    font-weight: 700;
}

.solar-mobile-navigation .solar-mobile-quote:hover {
    background: #fff !important;
    color: #111 !important;
    padding-left: 20px !important;
}


/* =========================================================
   THREE DIFFERENT HORIZONTAL HAMBURGER LINE SIZES
========================================================= */

.solar-menu-button {
    display: flex !important;

    width: 55px !important;
    height: 55px !important;

    padding: 7px 5px !important;

    border: 0 !important;
    background: transparent !important;

    cursor: pointer;

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

    gap: 7px;

    transition: transform .25s ease;
}

.solar-menu-button:hover {
    transform: scale(1.06);
}

.solar-menu-button .menu-line {
    display: block;

    height: 3px;

    border-radius: 20px;

    background: #fff;

    transition:
        width .3s ease,
        transform .3s ease,
        background .3s ease;
}

/* 3 DIFFERENT WIDTHS */
.solar-menu-button .menu-line-large {
    width: 36px;
}

.solar-menu-button .menu-line-medium {
    width: 27px;
}

.solar-menu-button .menu-line-small {
    width: 18px;
}

.solar-menu-button:hover .menu-line-large {
    width: 29px;
}

.solar-menu-button:hover .menu-line-medium {
    width: 36px;
}

.solar-menu-button:hover .menu-line-small {
    width: 25px;
}


/* =========================================================
   MENU OPEN ANIMATION
========================================================= */

.solar-mobile-menu.open .solar-mobile-navigation a {
    animation: solarMenuItemIn .45s both;
}

.solar-mobile-menu.open .solar-mobile-navigation a:nth-child(1) { animation-delay: .08s; }
.solar-mobile-menu.open .solar-mobile-navigation a:nth-child(2) { animation-delay: .12s; }
.solar-mobile-menu.open .solar-mobile-navigation a:nth-child(3) { animation-delay: .16s; }
.solar-mobile-menu.open .solar-mobile-navigation a:nth-child(4) { animation-delay: .20s; }
.solar-mobile-menu.open .solar-mobile-navigation a:nth-child(5) { animation-delay: .24s; }
.solar-mobile-menu.open .solar-mobile-navigation a:nth-child(6) { animation-delay: .28s; }
.solar-mobile-menu.open .solar-mobile-navigation a:nth-child(7) { animation-delay: .32s; }
.solar-mobile-menu.open .solar-mobile-navigation a:nth-child(8) { animation-delay: .36s; }
.solar-mobile-menu.open .solar-mobile-navigation a:nth-child(9) { animation-delay: .40s; }
.solar-mobile-menu.open .solar-mobile-navigation a:nth-child(10) { animation-delay: .44s; }

@keyframes solarMenuItemIn {
    from {
        opacity: 0;
        transform: translateX(25px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


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

@media (max-width: 900px) {

    .solar-mobile-menu {
        width: min(430px, 92vw) !important;
    }

    .solar-mobile-menu-inner {
        width: calc(100% - 34px) !important;
    }

    .solar-mobile-menu-header {
        height: 82px !important;
    }

    .solar-mobile-menu-header img {
        width: 150px !important;
    }

    .solar-mobile-navigation {
        padding-top: 25px !important;
    }

    .solar-mobile-navigation a {
        font-size: 23px !important;
        padding: 14px 0 !important;
    }

    .solar-mobile-navigation .solar-mobile-quote {
        font-size: 18px !important;
        min-width: 190px;
    }

    .solar-menu-button {
        width: 46px !important;
        height: 46px !important;
        gap: 5px;
    }

    .solar-menu-button .menu-line-large {
        width: 31px;
    }

    .solar-menu-button .menu-line-medium {
        width: 23px;
    }

    .solar-menu-button .menu-line-small {
        width: 15px;
    }
}


/* =========================================================
   DARK PAGE BACKDROP WHEN DRAWER IS OPEN
========================================================= */

.solar-mobile-menu::before {
    content: "";
    position: fixed;

    top: 0;
    right: 100%;
    bottom: 0;

    width: 100vw;

    background: rgba(0,0,0,.28);

    pointer-events: none;
}



/* =========================================================
   FINAL HAMBURGER VISIBILITY FIX
   Desktop + Mobile
========================================================= */

.solar-main-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 92px !important;
    z-index: 10000 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.solar-header-container {
    position: relative !important;
    width: calc(100% - 90px) !important;
    max-width: 1550px !important;
    height: 100% !important;
    margin: 0 auto !important;

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

.solar-main-header .solar-menu-button {
    position: absolute !important;

    top: 50% !important;
    right: 0 !important;

    transform: translateY(-50%) !important;

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

    width: 58px !important;
    height: 58px !important;

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

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    z-index: 10001 !important;

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

    gap: 7px !important;

    cursor: pointer !important;

    appearance: none !important;
    -webkit-appearance: none !important;
}

.solar-main-header .solar-menu-button .menu-line {
    display: block !important;

    flex: none !important;

    height: 3px !important;

    min-height: 3px !important;

    max-height: 3px !important;

    border-radius: 20px !important;

    background: #ffffff !important;

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

    box-shadow: 0 0 1px rgba(255,255,255,.8);

    transition:
        width .25s ease,
        opacity .25s ease,
        transform .25s ease !important;
}

.solar-main-header .solar-menu-button .menu-line-large {
    width: 38px !important;
}

.solar-main-header .solar-menu-button .menu-line-medium {
    width: 29px !important;
}

.solar-main-header .solar-menu-button .menu-line-small {
    width: 19px !important;
}

.solar-main-header .solar-menu-button:hover .menu-line-large {
    width: 31px !important;
}

.solar-main-header .solar-menu-button:hover .menu-line-medium {
    width: 38px !important;
}

.solar-main-header .solar-menu-button:hover .menu-line-small {
    width: 25px !important;
}


/* Keep logo and menu on top of carousel */
.solar-main-logo {
    position: relative !important;
    z-index: 10001 !important;
}


/* Mobile */
@media (max-width: 900px) {

    .solar-main-header {
        height: 80px !important;
    }

    .solar-header-container {
        width: calc(100% - 32px) !important;
    }

    .solar-main-header .solar-menu-button {
        width: 50px !important;
        height: 50px !important;
        right: 0 !important;
        gap: 5px !important;
    }

    .solar-main-header .solar-menu-button .menu-line-large {
        width: 32px !important;
    }

    .solar-main-header .solar-menu-button .menu-line-medium {
        width: 24px !important;
    }

    .solar-main-header .solar-menu-button .menu-line-small {
        width: 16px !important;
    }
}


/* =========================================================
   V4 MENU POLISH
========================================================= */

/* The drawer must sit above the original header/hamburger.
   This fixes the close button being hidden by the hamburger. */
.solar-main-header {
    z-index: 9000 !important;
}

.solar-menu-backdrop {
    position: fixed;
    inset: 0;

    z-index: 10990;

    background: rgba(0, 10, 24, .38);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.solar-menu-backdrop.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Drawer */
.solar-mobile-menu {
    z-index: 11000 !important;

    width: min(500px, 86vw) !important;

    /* Remove the blur effect that was creating the
       hazy/blurred area near the hamburger. */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    background:
        linear-gradient(
            160deg,
            #061d38 0%,
            #03152a 100%
        ) !important;

    box-shadow:
        -18px 0 55px rgba(0,0,0,.42) !important;
}

/* Drawer header */
.solar-mobile-menu-inner {
    width: calc(100% - 46px) !important;
}

.solar-mobile-menu-header {
    height: 88px !important;
    position: relative;
}

.solar-mobile-menu-header > a img {
    width: 160px !important;
}

/* Always-visible, obvious close button */
.solar-mobile-menu-header button#solarMenuClose {
    position: relative !important;

    z-index: 11020 !important;

    width: 44px !important;
    height: 44px !important;

    flex: 0 0 44px;

    border: 1px solid rgba(255,255,255,.30) !important;
    border-radius: 50% !important;

    background: rgba(255,255,255,.06) !important;

    cursor: pointer !important;

    display: block !important;
}

.solar-mobile-menu-header button#solarMenuClose span {
    left: 7px !important;
    top: 20px !important;

    width: 28px !important;
    height: 2px !important;

    background: #fff !important;

    margin: 0 !important;
}

.solar-mobile-menu-header button#solarMenuClose:hover {
    background: #e5b869 !important;
    border-color: #e5b869 !important;
}

.solar-mobile-menu-header button#solarMenuClose:hover span {
    background: #111 !important;
}

/* Much tighter menu item spacing */
.solar-mobile-navigation {
    padding: 18px 0 20px !important;
}

.solar-mobile-navigation a {
    min-height: 0 !important;

    font-size: 21px !important;
    line-height: 1.15 !important;

    padding: 10px 0 !important;

    border-bottom:
        1px solid rgba(255,255,255,.09) !important;
}

.solar-mobile-navigation a:hover {
    padding-left: 6px !important;
}

.solar-mobile-navigation .solar-mobile-quote {
    min-height: 0 !important;

    margin-top: 15px !important;

    padding: 12px 18px !important;

    font-size: 17px !important;

    border-bottom: 0 !important;
}

/* =========================================================
   FOUR SAMPLE MENU IMAGES
========================================================= */

.solar-menu-visuals {
    padding: 10px 0 35px;
}

.solar-menu-visual-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;

    margin: 12px 0 12px;
}

.solar-menu-visual-heading span {
    color: #e5b869;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.solar-menu-visual-heading small {
    color: rgba(255,255,255,.58);

    font-size: 9px;
    line-height: 1.3;

    text-align: right;
}

.solar-menu-image-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 9px;
}

.solar-menu-image-card {
    position: relative;

    display: block !important;

    min-height: 108px;

    padding: 0 !important;

    overflow: hidden;

    border: 0 !important;

    background: #0b2948;

    text-decoration: none !important;

    transform: translateZ(0);

    border-radius: 2px;

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

.solar-menu-image-card::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.03) 30%,
            rgba(0,0,0,.72) 100%
        );

    pointer-events: none;
}

.solar-menu-image-card img {
    width: 100%;
    height: 108px;

    display: block;

    object-fit: cover;

    transition:
        transform .5s ease;
}

.solar-menu-image-card span {
    position: absolute;

    left: 12px;
    bottom: 9px;

    z-index: 2;

    color: #fff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .2px;
}

.solar-menu-image-card:hover {
    transform: translateY(-3px);

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

.solar-menu-image-card:hover img {
    transform: scale(1.07);
}

/* Prevent old universal menu animation from making image cards
   inherit the huge menu-link treatment. */
.solar-mobile-menu.open .solar-menu-image-card {
    animation: solarMenuImageIn .45s both;
}

.solar-mobile-menu.open .solar-menu-image-card:nth-child(1) {
    animation-delay: .28s;
}

.solar-mobile-menu.open .solar-menu-image-card:nth-child(2) {
    animation-delay: .33s;
}

.solar-mobile-menu.open .solar-menu-image-card:nth-child(3) {
    animation-delay: .38s;
}

.solar-mobile-menu.open .solar-menu-image-card:nth-child(4) {
    animation-delay: .43s;
}

@keyframes solarMenuImageIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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

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

@media (max-width: 900px) {

    .solar-mobile-menu {
        width: min(410px, 91vw) !important;
    }

    .solar-mobile-menu-inner {
        width: calc(100% - 34px) !important;
    }

    .solar-mobile-menu-header {
        height: 78px !important;
    }

    .solar-mobile-menu-header > a img {
        width: 145px !important;
    }

    .solar-mobile-navigation {
        padding-top: 13px !important;
    }

    .solar-mobile-navigation a {
        font-size: 19px !important;
        padding: 9px 0 !important;
    }

    .solar-mobile-navigation .solar-mobile-quote {
        font-size: 16px !important;
        margin-top: 12px !important;
        padding: 11px 16px !important;
    }

    .solar-menu-visual-heading small {
        max-width: 150px;
    }

    .solar-menu-image-card,
    .solar-menu-image-card img {
        height: 92px;
        min-height: 92px;
    }

    .solar-menu-image-card span {
        font-size: 12px;
        left: 9px;
        bottom: 7px;
    }
}



/* =========================================================
   V5 - TATA-< DESKTOP HERO DIMENSIONS
   No desktop hero/page scrolling caused by this component.
========================================================= */

@media (min-width: 901px) {

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
    }

    .solar-main-hero {
        position: relative !important;

        width: 100% !important;

        /*
         * Matches the compact desktop composition:
         * header + hero fit inside the browser viewport.
         */
        height: min(623px, calc(100vh - 20px)) !important;
        min-height: 0 !important;

        overflow: hidden !important;
    }

    /* ---------------------------------------------
       TOP NAV BAR
       --------------------------------------------- */

    .solar-main-header {
        position: absolute !important;

        top: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 108px !important;

        z-index: 10000 !important;

        background: rgba(4, 20, 37, .48) !important;

        border-bottom:
            1px solid rgba(255,255,255,.10) !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .solar-header-container {
        width: calc(100% - 100px) !important;
        max-width: 1700px !important;
        height: 100% !important;

        margin: 0 auto !important;

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

    .solar-main-logo img {
        width: 190px !important;
        height: auto !important;
    }


    /* ---------------------------------------------
       HAMBURGER
       Three close, balanced line lengths.
       --------------------------------------------- */

    .solar-main-header .solar-menu-button {
        position: absolute !important;

        top: 50% !important;
        right: 0 !important;

        width: 46px !important;
        height: 46px !important;

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

        transform: translateY(-50%) !important;

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

        gap: 4px !important;

        background: transparent !important;
        border: 0 !important;

        z-index: 10001 !important;
    }

    .solar-main-header .solar-menu-button .menu-line {
        height: 3px !important;
        min-height: 3px !important;
        max-height: 3px !important;

        border-radius: 20px !important;

        background: #fff !important;

        box-shadow: none !important;
    }

    .solar-main-header .solar-menu-button .menu-line-large {
        width: 33px !important;
    }

    .solar-main-header .solar-menu-button .menu-line-medium {
        width: 30px !important;
    }

    .solar-main-header .solar-menu-button .menu-line-small {
        width: 27px !important;
    }

    .solar-main-header .solar-menu-button:hover .menu-line-large,
    .solar-main-header .solar-menu-button:hover .menu-line-medium,
    .solar-main-header .solar-menu-button:hover .menu-line-small {
        width: initial !important;
    }

    .solar-main-header .solar-menu-button:hover .menu-line-large {
        width: 33px !important;
    }

    .solar-main-header .solar-menu-button:hover .menu-line-medium {
        width: 30px !important;
    }

    .solar-main-header .solar-menu-button:hover .menu-line-small {
        width: 27px !important;
    }


    /* ---------------------------------------------
       CAROUSEL
       --------------------------------------------- */

    .solar-carousel {
        position: absolute !important;

        top: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 100% !important;

        overflow: hidden !important;
    }

    .solar-slide {
        height: 100% !important;
        min-height: 0 !important;
    }


    /* ---------------------------------------------
       LEFT CONTENT - closer to reference
       --------------------------------------------- */

    .solar-slide-content {
        left: 5.2% !important;
        top: 49% !important;

        width: 48% !important;
        max-width: 650px !important;
    }

    .solar-slide h1 {
        font-size: clamp(40px, 3.5vw, 58px) !important;
        line-height: 1.05 !important;
        letter-spacing: -1.4px !important;
    }

    .solar-slide-description {
        font-size: 15px !important;
        max-width: 570px !important;
        margin-top: 21px !important;
    }


    /* ---------------------------------------------
       SLIDE NUMBER / CONTROLS
       --------------------------------------------- */

    .solar-slide-number {
        left: 5.2% !important;
        bottom: 58px !important;
    }

    .solar-slide-progress {
        left: 5.2% !important;
        bottom: 34px !important;
    }

    .solar-slide-arrows {
        left: calc(5.2% + 205px) !important;
        bottom: 29px !important;
    }


    /* ---------------------------------------------
       FORM - same compact vertical footprint
       --------------------------------------------- */

    .solar-enquiry-card {
        top: 52% !important;
        right: 4.5% !important;

        width: 570px !important;

        transform: translateY(-50%) !important;

        padding: 27px 27px 18px !important;
    }

    .solar-form-heading p {
        margin-bottom: 16px !important;
    }

    .solar-form-grid {
        gap: 10px !important;
    }

    .solar-input-wrap input,
    .solar-mobile-input input,
    .solar-mobile-input select {
        height: 44px !important;
    }

    .solar-form-terms {
        margin-top: 12px !important;
    }

    .solar-form-buttons {
        margin-top: 13px !important;
    }

    .solar-generate-btn,
    .solar-call-button {
        height: 52px !important;
    }

    .solar-form-trust {
        margin-top: 10px !important;
    }
}


/* =========================================================
   V5 - DRAWER MUST SIT ABOVE THE HEADER
========================================================= */

.solar-mobile-menu {
    z-index: 20000 !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.solar-mobile-menu.open {
    z-index: 20000 !important;
}

.solar-mobile-menu-header {
    position: relative !important;
    z-index: 20001 !important;
}

.solar-mobile-menu-header button {
    position: relative !important;
    z-index: 20002 !important;
    cursor: pointer !important;
}


/* =========================================================
   V5 - COMPACT DRAWER MENU SPACING
========================================================= */

@media (min-width: 901px) {

    .solar-mobile-menu {
        width: 490px !important;
    }

    .solar-mobile-menu-inner {
        width: calc(100% - 50px) !important;
    }

    .solar-mobile-menu-header {
        height: 108px !important;
    }

    .solar-mobile-navigation {
        padding: 20px 0 30px !important;
    }

    .solar-mobile-navigation a {
        font-size: 22px !important;
        padding: 10px 0 !important;
        line-height: 1.15 !important;
    }

    .solar-mobile-navigation .solar-mobile-quote {
        margin-top: 14px !important;
        padding: 12px 18px !important;
        font-size: 17px !important;
    }
}


/* =========================================================
   V5 - DESKTOP MENU IMAGES: 4 COMPACT CARDS
========================================================= */

@media (min-width: 901px) {

    .solar-menu-image-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-top: 18px !important;
    }

    .solar-menu-image-card {
        height: 82px !important;
        overflow: hidden !important;
    }

    .solar-menu-image-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        transition: transform .35s ease !important;
    }

    .solar-menu-image-card:hover img {
        transform: scale(1.07) !important;
    }
}


/* =========================================================
   V5 - MOBILE
========================================================= */

@media (max-width: 900px) {

    .solar-main-hero {
        min-height: 0 !important;
        overflow: visible !important;
    }

    .solar-main-header {
        height: 80px !important;
    }

    .solar-header-container {
        width: calc(100% - 32px) !important;
    }

    .solar-main-header .solar-menu-button {
        right: 0 !important;
        gap: 4px !important;
    }

    .solar-main-header .solar-menu-button .menu-line-large {
        width: 31px !important;
    }

    .solar-main-header .solar-menu-button .menu-line-medium {
        width: 28px !important;
    }

    .solar-main-header .solar-menu-button .menu-line-small {
        width: 25px !important;
    }
}



/* =========================================================
   V6 - HEADER + HERO CONTENT SEPARATION
   Header occupies its own visual band; carousel/form begin
   below it. Hero remains 100vh on desktop.
========================================================= */

@media (min-width: 901px) {

    .solar-main-hero {
        position: relative !important;

        width: 100% !important;
        height: 100vh !important;
        min-height: 0 !important;

        overflow: hidden !important;

        background: #061a35 !important;
    }

    /* Header is a separate top band */
    .solar-main-header {
        position: absolute !important;

        top: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 108px !important;

        z-index: 10000 !important;

        background:
            rgba(3, 20, 37, .72) !important;

        border-bottom:
            1px solid rgba(255,255,255,.12) !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /*
     * The actual hero content starts BELOW
     * the header. Nothing is allowed to sit
     * underneath the 108px header.
     */
    .solar-carousel {
        position: absolute !important;

        top: 108px !important;
        left: 0 !important;

        width: 100% !important;
        height: calc(100vh - 108px) !important;

        overflow: hidden !important;
    }

    .solar-slide {
        top: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 100% !important;

        min-height: 0 !important;
    }

    /*
     * Keep background image contained within
     * the content area below header.
     */
    .solar-slide-gradient {
        background:
            linear-gradient(
                90deg,
                rgba(2,17,34,.86) 0%,
                rgba(2,17,34,.54) 35%,
                rgba(2,17,34,.12) 68%,
                rgba(2,17,34,.28) 100%
            ) !important;
    }

    /*
     * LEFT CONTENT: vertically centered inside
     * the area BELOW the header.
     */
    .solar-slide-content {
        left: 5.2% !important;

        top: 50% !important;

        width: 47% !important;
        max-width: 680px !important;

        transform: translateY(-50%) !important;
    }

    .solar-slide h1 {
        font-size:
            clamp(38px, 3.45vw, 58px) !important;

        line-height: 1.04 !important;
    }

    .solar-slide-description {
        max-width: 560px !important;

        margin-top: 20px !important;
        margin-bottom: 22px !important;

        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    /*
     * FORM: also centered ONLY inside the area
     * below the header.
     */
    .solar-enquiry-card {
        position: absolute !important;

        top: calc(108px + (100vh - 108px) / 2) !important;

        right: 4.5% !important;

        width: 570px !important;

        transform: translateY(-50%) !important;

        max-height:
            calc(100vh - 130px) !important;

        overflow: hidden !important;

        padding:
            24px 27px 17px !important;
    }

    .solar-form-heading h2 {
        font-size: 26px !important;
        line-height: 1.13 !important;
    }

    .solar-form-heading p {
        margin-top: 7px !important;
        margin-bottom: 14px !important;
    }

    .solar-looking-title {
        margin-bottom: 8px !important;
    }

    .solar-required-note {
        margin:
            5px 0 12px !important;
    }

    .solar-form-grid {
        gap: 9px !important;
    }

    .solar-input-wrap input,
    .solar-mobile-input input,
    .solar-mobile-input select {
        height: 43px !important;
    }

    .solar-form-terms {
        margin-top: 11px !important;
    }

    .solar-form-buttons {
        margin-top: 12px !important;
    }

    .solar-generate-btn,
    .solar-call-button {
        height: 50px !important;
    }

    .solar-form-trust {
        margin-top: 8px !important;
    }


    /*
     * Slide counter/controls now live inside
     * the content area below the header.
     */
    .solar-slide-number {
        left: 5.2% !important;
        bottom: 50px !important;
    }

    .solar-slide-progress {
        left: 5.2% !important;
        bottom: 26px !important;
    }

    .solar-slide-arrows {
        left:
            calc(5.2% + 205px) !important;

        bottom: 21px !important;
    }
}


/* =========================================================
   VERY SHORT DESKTOP SCREENS
   Keep the form inside the available area.
========================================================= */

@media (min-width: 901px) and (max-height: 760px) {

    .solar-main-header {
        height: 92px !important;
    }

    .solar-carousel {
        top: 92px !important;
        height: calc(100vh - 92px) !important;
    }

    .solar-enquiry-card {
        top:
            calc(92px + (100vh - 92px) / 2) !important;

        width: 550px !important;

        padding:
            18px 24px 13px !important;
    }

    .solar-form-heading h2 {
        font-size: 23px !important;
    }

    .solar-form-heading p {
        margin-bottom: 9px !important;
    }

    .solar-radio-group {
        gap: 16px !important;
    }

    .solar-required-note {
        margin-bottom: 8px !important;
    }

    .solar-input-wrap input,
    .solar-mobile-input input,
    .solar-mobile-input select {
        height: 39px !important;
    }

    .solar-form-terms {
        margin-top: 8px !important;
    }

    .solar-form-buttons {
        margin-top: 9px !important;
    }

    .solar-generate-btn,
    .solar-call-button {
        height: 45px !important;
    }

    .solar-form-trust {
        margin-top: 5px !important;
    }

    .solar-slide h1 {
        font-size: 43px !important;
    }

    .solar-slide-description {
        margin-top: 14px !important;
        margin-bottom: 16px !important;
    }
}


/* =========================================================
   MOBILE - keep existing stacked behavior
========================================================= */

@media (max-width: 900px) {

    .solar-main-hero {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .solar-main-header {
        position: absolute !important;
        height: 80px !important;
    }

    .solar-carousel {
        position: relative !important;
        top: auto !important;
        height: 540px !important;
    }

    .solar-enquiry-card {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        max-height: none !important;
        overflow: visible !important;
    }
}



/* =========================================================
   V7 - CONTENT-ONLY SLIDE ANIMATION
   Background/image remains static; only slide content fades/slides.
========================================================= */

.solar-slide {
    animation: none !important;
}

.solar-slide.active .solar-slide-bg,
.solar-slide.active .solar-slide-background,
.solar-slide.active .solar-slide-image,
.solar-slide.active .solar-slide-bg img,
.solar-slide.active > img {
    animation: none !important;
    transform: none !important;
}

/* Content enters, while the background stays completely still */
.solar-slide.active .solar-slide-content {
    animation: solarContentIn .65s cubic-bezier(.22,.61,.36,1) both !important;
}

.solar-slide.active .solar-slide-number,
.solar-slide.active .solar-slide-progress,
.solar-slide.active .solar-slide-arrows {
    animation: solarControlsIn .55s ease-out .08s both !important;
}

@keyframes solarContentIn {
    from {
        opacity: 0;
        transform: translate3d(28px, -50%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, -50%, 0);
    }
}

@keyframes solarControlsIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   STANDARD HAMBURGER ICON
   Three equal horizontal lines + open/close animation.
========================================================= */

.solar-main-header .solar-menu-button {
    width: 48px !important;
    height: 48px !important;

    padding: 8px !important;

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

    gap: 6px !important;

    background: transparent !important;
    border: 0 !important;

    cursor: pointer !important;
}

.solar-main-header .solar-menu-button .menu-line {
    display: block !important;

    width: 30px !important;
    height: 3px !important;
    min-height: 3px !important;

    margin: 0 !important;

    border-radius: 4px !important;

    background: #fff !important;

    transform-origin: center !important;

    transition:
        transform .35s cubic-bezier(.22,.61,.36,1),
        opacity .25s ease,
        width .25s ease !important;
}

/* Open state: hamburger -> X */
body.solar-menu-open .solar-main-header .solar-menu-button .menu-line:nth-child(1) {
    transform: translateY(9px) rotate(45deg) !important;
}

body.solar-menu-open .solar-main-header .solar-menu-button .menu-line:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
}

body.solar-menu-open .solar-main-header .solar-menu-button .menu-line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg) !important;
}

/* Keep it standard on hover */
.solar-main-header .solar-menu-button:hover .menu-line {
    width: 30px !important;
}


/* =========================================================
   SLIDE NAVIGATION - IMAGE-STYLE ARROW BUTTONS
   Uses the existing arrow characters, but presents them as
   compact visual buttons rather than large text controls.
========================================================= */

.solar-slide-arrows button {
    width: 46px !important;
    height: 46px !important;

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

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

    border: 1px solid rgba(255,255,255,.58) !important;

    background: rgba(4,24,45,.32) !important;

    color: transparent !important;

    position: relative !important;

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

/* Create clean white arrow graphics with CSS */
.solar-slide-arrows button:first-child::before {
    content: "" !important;

    width: 9px !important;
    height: 9px !important;

    border-left: 2px solid #fff !important;
    border-bottom: 2px solid #fff !important;

    transform: rotate(45deg) !important;
}

.solar-slide-arrows button:last-child::before {
    content: "" !important;

    width: 9px !important;
    height: 9px !important;

    border-right: 2px solid #fff !important;
    border-top: 2px solid #fff !important;

    transform: rotate(45deg) !important;
}

.solar-slide-arrows button:hover {
    background: rgba(255,138,24,.92) !important;
    border-color: #f4cc85 !important;
    transform: translateY(-2px) !important;
}

.solar-slide-arrows button:hover::before {
    border-color: #071a32 !important;
}


/* =========================================================
   PREVENT BACKGROUND TRANSITION / ZOOM
========================================================= */

.solar-slide-bg,
.solar-slide-background,
.solar-slide-image,
.solar-slide-bg img {
    animation: none !important;
    transition: none !important;
}




/* =========================================================
   V8 - ABSOLUTELY STATIC BANNER BACKGROUNDS
   No image fade, zoom, slide, scale, transform or transition.
   Only textual/content layers may animate.
========================================================= */

/* Freeze the slide containers and all visual/background layers */
.solar-carousel,
.solar-carousel .solar-slide,
.solar-carousel .solar-slide::before,
.solar-carousel .solar-slide::after,
.solar-carousel .solar-slide-bg,
.solar-carousel .solar-slide-background,
.solar-carousel .solar-slide-image,
.solar-carousel .solar-slide-media,
.solar-carousel .solar-slide-picture,
.solar-carousel .solar-slide-bg img,
.solar-carousel .solar-slide-background img,
.solar-carousel .solar-slide-image img,
.solar-carousel .solar-slide-media img,
.solar-carousel .solar-slide-picture img,
.solar-carousel .solar-slide > img {
    animation: none !important;
    transition: none !important;

    transform: none !important;

    filter: none !important;
}

/*
 * Do NOT fade/translate the complete slide.
 * A slide-level opacity animation makes the background
 * appear animated even when its image itself is static.
 */
.solar-carousel .solar-slide {
    opacity: 1 !important;
}

/*
 * Keep the background image itself fully opaque and fixed.
 */
.solar-carousel .solar-slide-bg,
.solar-carousel .solar-slide-background,
.solar-carousel .solar-slide-image,
.solar-carousel .solar-slide-media,
.solar-carousel .solar-slide-picture {
    opacity: 1 !important;
    transform: none !important;
}

/*
 * Any image directly inside a visual layer is also frozen.
 */
.solar-carousel .solar-slide-bg img,
.solar-carousel .solar-slide-background img,
.solar-carousel .solar-slide-image img,
.solar-carousel .solar-slide-media img,
.solar-carousel .solar-slide-picture img,
.solar-carousel .solar-slide > img {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}

/*
 * If the implementation uses a background-image on the slide
 * itself, freeze the pseudo-elements as well.
 */
.solar-carousel .solar-slide::before,
.solar-carousel .solar-slide::after {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}

/*
 * Content is the ONLY layer that is allowed to animate.
 */
.solar-carousel .solar-slide.active .solar-slide-content {
    animation: solarContentIn .65s cubic-bezier(.22,.61,.36,1) both !important;
}

/* Never animate form/background because it belongs to the page shell. */
.solar-enquiry-card {
    animation: none !important;
    transition: none !important;
}



/* =========================================================
   V9 - COMPACT DESKTOP BANNER
   Fixed banner height + correctly aligned slide controls.
========================================================= */

@media (min-width: 901px) {

    /*
     * Compact banner: deliberately NOT 100vh.
     * This leaves the page below available for the next section.
     */
    .solar-main-hero {
        height: 620px !important;
        min-height: 620px !important;
        max-height: 620px !important;

        overflow: hidden !important;
    }

    /*
     * Header stays inside the 620px banner.
     */
    .solar-main-header {
        height: 108px !important;
    }

    /*
     * Slide area is exactly the remaining space.
     */
    .solar-carousel {
        top: 108px !important;
        height: 512px !important;
        min-height: 0 !important;

        overflow: hidden !important;
    }

    .solar-slide {
        height: 512px !important;
        min-height: 0 !important;
    }

    /*
     * Keep the form fully inside the compact banner.
     */
    .solar-enquiry-card {
        top: 256px !important;
        max-height: 480px !important;

        width: 570px !important;
        right: 4.5% !important;

        transform: translateY(-50%) !important;
    }

    /*
     * Left content is centered within the 512px slide area.
     */
    .solar-slide-content {
        top: 256px !important;
        transform: translateY(-50%) !important;
    }

    /*
     * Slide number/progress and arrows share one visual
     * baseline area. Arrows are to the RIGHT of the progress
     * indicators instead of floating too low/high.
     */
    .solar-slide-number {
        left: 5.2% !important;
        bottom: 68px !important;

        margin: 0 !important;
    }

    .solar-slide-progress {
        left: 5.2% !important;
        bottom: 38px !important;

        margin: 0 !important;
    }

    .solar-slide-arrows {
        position: absolute !important;

        left: calc(5.2% + 215px) !important;
        bottom: 20px !important;

        display: flex !important;
        align-items: center !important;
        gap: 8px !important;

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

        z-index: 20 !important;
    }

    .solar-slide-arrows button {
        width: 46px !important;
        height: 46px !important;

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

        flex: 0 0 46px !important;

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

    /*
     * The arrows should sit centered vertically in their
     * button and never inherit text-line positioning.
     */
    .solar-slide-arrows button::before {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;

        margin: 0 !important;

        transform-origin: center !important;
    }

    .solar-slide-arrows button:first-child::before {
        transform: translate(-35%, -50%) rotate(45deg) !important;
    }

    .solar-slide-arrows button:last-child::before {
        transform: translate(-65%, -50%) rotate(45deg) !important;
    }
}


/* =========================================================
   V9 - SMALLER DESKTOP SCREENS
========================================================= */

@media (min-width: 901px) and (max-height: 760px) {

    .solar-main-hero {
        height: 600px !important;
        min-height: 600px !important;
        max-height: 600px !important;
    }

    .solar-carousel {
        height: 492px !important;
    }

    .solar-slide {
        height: 492px !important;
    }

    .solar-enquiry-card {
        top: 246px !important;
        width: 550px !important;
    }

    .solar-slide-content {
        top: 246px !important;
    }

    .solar-slide-number {
        bottom: 65px !important;
    }

    .solar-slide-progress {
        bottom: 35px !important;
    }

    .solar-slide-arrows {
        left: calc(5.2% + 205px) !important;
        bottom: 17px !important;
    }
}


/* =========================================================
   V9 - MOBILE IS NOT FORCED TO THE DESKTOP HEIGHT
========================================================= */

@media (max-width: 900px) {

    .solar-main-hero {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
}



/* =========================================================
   V10 - DESKTOP FORM + MOBILE EDGE / ARROW FIX
========================================================= */

/* Prevent browser-level white gutters on every viewport */
html,
body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: #061a35 !important;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 901px) {

    /*
     * Keep the form inside the compact 620px banner,
     * vertically centered in the area below the header.
     */
    .solar-enquiry-card {
        top: 364px !important;

        right: 5% !important;

        width: min(570px, 36vw) !important;

        transform: translateY(-50%) !important;

        margin: 0 !important;
    }

    /*
     * Keep form controls from creating overflow.
     */
    .solar-enquiry-card,
    .solar-enquiry-card * {
        max-width: 100%;
    }

    /*
     * Desktop arrows: fixed position relative to the
     * bottom-left control area, not relative to text.
     */
    .solar-slide-arrows {
        left: 305px !important;
        bottom: 20px !important;

        width: 108px !important;
        height: 46px !important;

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

        gap: 8px !important;
    }

    .solar-slide-arrows button {
        position: relative !important;

        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;
        min-height: 46px !important;

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

    .solar-slide-number {
        left: 5.2% !important;
        bottom: 68px !important;
    }

    .solar-slide-progress {
        left: 5.2% !important;
        bottom: 38px !important;
    }
}


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

@media (max-width: 900px) {

    /*
     * Eliminate the white strips visible around the mobile
     * hero and force the component to occupy the viewport width.
     */
    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .solar-main-hero {
        width: 100vw !important;
        max-width: 100vw !important;

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

        min-height: 0 !important;
        height: auto !important;

        overflow: hidden !important;

        background: #061a35 !important;
    }

    .solar-main-header {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;

        margin: 0 !important;
    }

    .solar-header-container {
        width: calc(100% - 28px) !important;
        margin: 0 auto !important;
    }

    /*
     * Mobile carousel itself has no side gutter.
     */
    .solar-carousel {
        width: 100% !important;
        max-width: 100% !important;

        left: 0 !important;
        right: 0 !important;

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

        overflow: hidden !important;
    }

    .solar-slide {
        width: 100% !important;
        max-width: 100% !important;

        left: 0 !important;
        right: 0 !important;

        margin: 0 !important;
    }

    /*
     * Mobile slide controls:
     * number + progress remain bottom-left;
     * arrows sit together at bottom-right.
     */
    .solar-slide-number {
        left: 24px !important;
        bottom: 64px !important;

        margin: 0 !important;

        z-index: 30 !important;
    }

    .solar-slide-progress {
        left: 24px !important;
        bottom: 37px !important;

        margin: 0 !important;

        z-index: 30 !important;
    }

    .solar-slide-arrows {
        position: absolute !important;

        left: auto !important;
        right: 20px !important;

        bottom: 20px !important;

        width: 100px !important;
        height: 44px !important;

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

        gap: 8px !important;

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

        z-index: 31 !important;
    }

    .solar-slide-arrows button {
        position: relative !important;

        width: 44px !important;
        height: 44px !important;

        min-width: 44px !important;
        min-height: 44px !important;

        flex: 0 0 44px !important;

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

    /*
     * Mobile form must not introduce any horizontal gutter.
     */
    .solar-enquiry-card {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;

        margin-left: 12px !important;
        margin-right: 12px !important;

        box-sizing: border-box !important;

        right: auto !important;
        left: auto !important;

        overflow: visible !important;
    }

    .solar-enquiry-card,
    .solar-enquiry-card form,
    .solar-enquiry-card input,
    .solar-enquiry-card select,
    .solar-enquiry-card button {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    /*
     * Remove any accidental transforms/gutters from
     * mobile slide content.
     */
    .solar-slide-content {
        max-width: calc(100% - 40px) !important;
    }
}


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

@media (max-width: 480px) {

    .solar-slide-number {
        left: 18px !important;
        bottom: 20px !important;
    }

    .solar-slide-progress {
        left: 18px !important;
        bottom: 10px !important;
    }

    .solar-slide-arrows {
        right: 16px !important;
        bottom: 16px !important;
        width: 94px !important;
    }

    .solar-slide-arrows button {
        width: 41px !important;
        height: 41px !important;
        min-width: 41px !important;
        min-height: 41px !important;
        flex-basis: 41px !important;
    }

    .solar-enquiry-card {
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;

        margin-left: 10px !important;
        margin-right: 10px !important;
    }
}



/* =========================================================
   FINAL - FULL-BLEED HERO + TRANSPARENT HEADER +
   SEPARATE DESKTOP / MOBILE IMAGE SOURCES
========================================================= */

/* The slide image is the full hero canvas. The header overlays it. */
.solar-carousel .solar-slide {
    background-image: var(--solar-desktop-bg) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
}

@media (min-width: 901px) {

    /* Hero image starts at the very top, behind the header. */
    .solar-main-hero {
        height: 620px !important;
        min-height: 620px !important;
        max-height: 620px !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .solar-main-header {
        top: 0 !important;
        height: 108px !important;
        background: rgba(4,20,37,.48) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 10000 !important;
    }

    .solar-carousel {
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        z-index: 1 !important;
    }

    .solar-slide {
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Keep content/form positioned against the complete 620px hero. */
    .solar-slide-content {
        top: 53% !important;
        transform: translateY(-50%) !important;
    }

    .solar-enquiry-card {
        top: 56% !important;
        transform: translateY(-50%) !important;
    }
}

@media (max-width: 900px) {

    /* Mobile uses its own image source variable. */
    .solar-carousel .solar-slide {
        background-image: var(--solar-mobile-bg) !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    /* Header remains over the first part of the mobile image. */
    .solar-main-header {
        position: absolute !important;
        top: 0 !important;
        height: 80px !important;
        background: rgba(4,20,37,.48) !important;
        z-index: 10000 !important;
    }

    .solar-carousel {
        position: relative !important;
        top: 0 !important;
        height: 60vh !important;
        min-height: 420px !important;
        max-height: 560px !important;
        width: 100% !important;
    }

    .solar-slide {
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /*
     * Mobile slide content starts below the 80px transparent header.
     * This keeps the tag/heading/description from touching or
     * overlapping the header while still vertically centering the
     * content in the remaining image area.
     */
    .solar-slide-content {
        top: calc(80px + (100% - 80px) / 2) !important;
        transform: translateY(-50%) !important;
        z-index: 5 !important;
    }

    /* Give the first text line a small safety gap below the header. */
    .solar-slide-content .solar-slide-tag {
        margin-top: 8px !important;
    }
}

/*
 * IMPORTANT:
 * To use truly different mobile artwork, replace only the
 * --solar-mobile-bg URL on each slide. Desktop URLs remain untouched.
 */

/* =========================================================
   FINAL MOBILE FORM WIDTH FIX
   Keeps equal left/right spacing and prevents any child
   from creating horizontal overflow on mobile.
========================================================= */
@media (max-width: 900px) {

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

    .solar-main-hero {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    /* Full-width mobile image area */
    .solar-carousel {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .solar-carousel .solar-slide {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background-size: cover !important;
        background-position: center center !important;
    }

    /* FORM CARD: exactly 10px on both sides */
    .solar-enquiry-card {
        position: relative !important;
        display: block !important;

        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        min-width: 0 !important;

        margin: 0 auto !important;
        padding: 24px 14px 18px !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;

        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Every form layer is allowed to shrink with the card. */
    .solar-enquiry-card,
    .solar-enquiry-card form,
    .solar-enquiry-card .solar-form-heading,
    .solar-enquiry-card .solar-radio-group,
    .solar-enquiry-card .solar-form-grid,
    .solar-enquiry-card .solar-input-wrap,
    .solar-enquiry-card .solar-mobile-input,
    .solar-enquiry-card .solar-form-buttons,
    .solar-enquiry-card .solar-generate-btn,
    .solar-enquiry-card .solar-call-button {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Keep the two-column desktop form from causing overflow. */
    .solar-form-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 9px !important;
        width: 100% !important;
    }

    .solar-input-wrap,
    .solar-input-wrap.full {
        min-width: 0 !important;
    }

    .solar-input-wrap input,
    .solar-mobile-input input,
    .solar-mobile-input select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Country code + phone number must stay inside the card. */
    .solar-mobile-input {
        display: grid !important;
        grid-template-columns: 88px minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .solar-mobile-input > * {
        min-width: 0 !important;
    }

    .solar-mobile-input input {
        min-width: 0 !important;
    }

    /* Radio labels can wrap instead of pushing the card wider. */
    .solar-radio-group {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 9px 18px !important;
        width: 100% !important;
    }

    .solar-radio-option {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
    }

    .solar-radio-option span:last-child {
        overflow-wrap: anywhere !important;
    }

    .solar-form-heading h2 {
        font-size: 24px !important;
        line-height: 1.14 !important;
        overflow-wrap: anywhere !important;
    }

    .solar-form-heading p,
    .solar-form-terms,
    .solar-form-trust {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    .solar-form-buttons {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .solar-generate-btn,
    .solar-call-button {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .solar-enquiry-card {
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .solar-mobile-input {
        grid-template-columns: 82px minmax(0, 1fr) !important;
    }
}



/* =========================================================
   MODERN SOLAR CALCULATOR
   Scoped only to #solarEnquiry so the existing hero/design
   remains untouched.
========================================================= */

.solar-modern-enquiry,
.solar-modern-enquiry * {
    box-sizing: border-box;
}

.solar-modern-enquiry {
    --sm-orange: #f4cc85;
    --sm-orange-dark: #ec6f08;
    --sm-navy: #10263a;
    --sm-navy-2: #17364f;
    --sm-ink: #172433;
    --sm-muted: #6e7c88;
    --sm-border: #dce4e9;
    --sm-soft: #f6f9fa;

    width: min(560px, calc(100% - 30px)) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    color: var(--sm-ink) !important;
    border: 1px solid rgba(255,255,255,.65);
    box-shadow: 0 28px 70px rgba(0,0,0,.30) !important;
}

.solar-modern-enquiry .solar-modern-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.solar-modern-glow-one {
    width: 190px;
    height: 190px;
    top: -100px;
    right: -60px;
    background: rgba(255,138,24,.18);
}

.solar-modern-glow-two {
    width: 140px;
    height: 140px;
    bottom: -80px;
    left: -70px;
    background: rgba(16,38,58,.08);
}

.solar-modern-top {
    position: relative;
    z-index: 2;
    padding: 23px 27px 18px;
    background:
        radial-gradient(circle at 88% 20%, rgba(255,138,24,.18), transparent 30%),
        linear-gradient(135deg, #f9fcfd 0%, #ffffff 72%);
    border-bottom: 1px solid #edf1f3;
}

.solar-modern-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--sm-orange-dark);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.solar-modern-kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sm-orange);
    box-shadow: 0 0 0 4px rgba(255,138,24,.12);
}

.solar-modern-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.solar-modern-title-row h2 {
    margin: 0;
    color: var(--sm-navy);
    font-size: 25px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.6px;
}

.solar-modern-title-row h2 span {
    color: var(--sm-orange-dark);
}

.solar-modern-title-row p {
    max-width: 410px;
    margin: 7px 0 0;
    color: var(--sm-muted);
    font-size: 11px;
    line-height: 1.45;
}

.solar-modern-sun {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #fff3e6;
    color: var(--sm-orange-dark);
    font-size: 24px;
    box-shadow: inset 0 0 0 1px rgba(255,138,24,.14);
}

.solar-modern-mode-card {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 17px 27px 14px;
    padding: 12px 14px;
    border: 1px solid #e5ebef;
    border-radius: 14px;
    background: #f8fafb;
}

.solar-modern-mode-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.solar-modern-mode-caption {
    color: #87939d;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.solar-modern-mode-copy strong {
    color: var(--sm-navy);
    font-size: 12px;
}

.solar-modern-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.solar-modern-mode-label {
    color: #98a3ab;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
    transition: color .2s ease;
}

.solar-modern-mode-label.active {
    color: var(--sm-navy);
}

.solar-modern-toggle {
    position: relative;
    display: block;
    width: 42px;
    height: 23px;
    flex: 0 0 42px;
    cursor: pointer;
}

.solar-modern-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.solar-modern-toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    background: #cbd5dc;
    transition: background .25s ease;
}

.solar-modern-toggle-thumb {
    position: absolute;
    width: 17px;
    height: 17px;
    top: 3px;
    left: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,.18);
    transition: transform .25s ease;
}

.solar-modern-toggle input:checked + .solar-modern-toggle-track {
    background: var(--sm-orange);
}

.solar-modern-toggle input:checked + .solar-modern-toggle-track .solar-modern-toggle-thumb {
    transform: translateX(19px);
}

.solar-modern-form {
    position: relative;
    z-index: 2;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
    width: auto !important;
    margin: 0 27px !important;
}

.solar-modern-field {
    min-width: 0;
}

.solar-modern-field-full {
    grid-column: 1 / -1;
}

.solar-modern-field label {
    display: block;
    margin: 0 0 5px;
    color: #44535f;
    font-size: 8px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .35px;
}

.solar-modern-field label span {
    color: var(--sm-orange-dark);
}

.solar-modern-input {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--sm-border);
    border-radius: 9px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.solar-modern-input:focus-within {
    border-color: rgba(255,138,24,.75);
    box-shadow: 0 0 0 3px rgba(255,138,24,.10);
    transform: translateY(-1px);
}

.solar-modern-input input {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 11px !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #1d2a34 !important;
    font: 500 11px/1 Arial, Helvetica, sans-serif !important;
    box-shadow: none !important;
}

.solar-modern-input input::placeholder {
    color: #98a3ab;
    opacity: 1;
}

.solar-modern-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    flex: 0 0 31px;
    color: var(--sm-orange-dark);
    font-size: 12px;
}

.solar-modern-country {
    display: flex;
    align-items: center;
    align-self: stretch;
    padding: 0 0 0 10px;
    color: var(--sm-navy);
    font-size: 9px;
    font-weight: 800;
    border-right: 1px solid #e6ecef;
}

.solar-modern-country + input {
    padding-left: 9px !important;
}

.solar-modern-money > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    flex: 0 0 31px;
    color: var(--sm-orange-dark);
    font-size: 13px;
    font-weight: 800;
}

.solar-modern-helper {
    margin: 5px 1px 0;
    color: #89959e;
    font-size: 7px;
    line-height: 1.35;
}

.solar-modern-helper strong {
    color: #687780;
}

.solar-modern-commercial-fields {
    grid-column: 1 / -1;
    display: contents;
}

.solar-modern-leasing {
    grid-column: 1 / -1;
    display: none;
    min-width: 0;
}

.solar-modern-check {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(255,138,24,.22);
    border-radius: 10px;
    background: #fff8f0;
    cursor: pointer;
}

.solar-modern-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.solar-modern-check-box {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 1px solid #cbd5dc;
    border-radius: 5px;
    background: #fff;
    transition: .2s ease;
}

.solar-modern-check input:checked + .solar-modern-check-box {
    border-color: var(--sm-orange);
    background: var(--sm-orange);
    box-shadow: inset 0 0 0 4px #fff;
}

.solar-modern-check strong,
.solar-modern-check small {
    display: block;
}

.solar-modern-check strong {
    color: var(--sm-navy);
    font-size: 9px;
}

.solar-modern-check small {
    margin-top: 2px;
    color: #8a969f;
    font-size: 7px;
}

.solar-modern-result,
.solar-modern-commercial-banner {
    grid-column: 1 / -1;
    min-width: 0;
}

.solar-modern-result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-top: 1px;
    padding: 10px 14px;
    border-radius: 11px;
    background: linear-gradient(135deg, #102b41, #183b56);
    color: #fff;
}

.solar-modern-result-icon {
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(255,138,24,.16);
    color: #ffb04f;
    font-size: 17px;
}

.solar-modern-result span {
    display: block;
    color: rgba(255,255,255,.68);
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.solar-modern-result strong {
    display: block;
    margin-top: 2px;
    color: #fff;
    font-size: 14px;
    line-height: 1.1;
}

.solar-modern-result strong b {
    color: #ffab3d;
    font-size: 23px;
}

.solar-modern-commercial-banner {
    display: none;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border-radius: 11px;
    background: linear-gradient(135deg, #102b41, #183b56);
    color: #fff;
}

.solar-modern-banner-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(255,138,24,.16);
    color: #ffab3d;
    font-size: 18px;
}

.solar-modern-commercial-banner span,
.solar-modern-commercial-banner strong,
.solar-modern-commercial-banner small {
    display: block;
}

.solar-modern-commercial-banner span {
    color: rgba(255,255,255,.72);
    font-size: 7px;
}

.solar-modern-commercial-banner strong {
    margin: 2px 0;
    color: #ffb04f;
    font-size: 14px;
    line-height: 1.05;
}

.solar-modern-commercial-banner small {
    color: rgba(255,255,255,.65);
    font-size: 7px;
}

.solar-modern-submit-area {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 1px;
}

.solar-modern-slot {
    align-self: center;
    color: #89959e;
    font-size: 7px;
    font-weight: 700;
}

.solar-modern-slot i {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 4px;
    vertical-align: middle;
    border-radius: 50%;
    background: #54b966;
    box-shadow: 0 0 0 3px rgba(84,185,102,.10);
}

.solar-modern-submit {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100% !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 17px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, var(--sm-orange), #c59b4e) !important;
    color: #fff !important;
    font: 800 10px/1 Arial, Helvetica, sans-serif !important;
    letter-spacing: .15px;
    cursor: pointer;
    box-shadow: 0 9px 20px rgba(255,122,12,.22);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.solar-modern-submit b {
    font-size: 19px;
    line-height: 1;
    transition: transform .2s ease;
}

.solar-modern-submit:hover {
    transform: translateY(-1px);
    filter: saturate(1.05);
    box-shadow: 0 12px 25px rgba(255,122,12,.28);
}

.solar-modern-submit:hover b {
    transform: translateX(4px);
}

.solar-modern-submit:disabled {
    opacity: .65;
    cursor: wait;
    transform: none;
}

.solar-modern-disclaimer {
    grid-column: 1 / -1;
    margin: -2px 0 0 !important;
    color: #929da5;
    text-align: center;
    font-size: 6.5px;
    line-height: 1.4;
}

.solar-modern-trust {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    padding: 10px 15px;
    border-top: 1px solid #edf1f3;
    color: #7b8790;
    font-size: 7px;
    font-weight: 700;
}

.solar-modern-trust span {
    color: #4eaf60;
    font-size: 9px;
}

/* Calculator mode visibility */
.solar-modern-enquiry .solar-commercial-only {
    display: none;
}

.solar-modern-enquiry .solar-commercial-mode .solar-commercial-only {
    display: block;
}

.solar-modern-enquiry .solar-commercial-mode .solar-modern-commercial-fields {
    display: contents;
}

.solar-modern-enquiry .solar-commercial-mode #leasingCheckboxGroup {
    display: block;
}

.solar-modern-enquiry .solar-commercial-mode #residentialOutput,
.solar-modern-enquiry .solar-commercial-mode #slotBadge,
.solar-modern-enquiry .solar-commercial-mode #disclaimerNote {
    display: none !important;
}

.solar-modern-enquiry .solar-commercial-mode #commercialOutput {
    display: flex;
}

/* Keep the existing card positioning on desktop, but use the new visual skin. */
@media (max-width: 1100px) {
    .solar-modern-enquiry {
        width: min(530px, calc(100% - 24px)) !important;
    }

    .solar-modern-form,
    .solar-modern-enquiry .solar-modern-mode-card {
        margin-left: 22px !important;
        margin-right: 22px !important;
    }

    .solar-modern-top {
        padding-left: 22px;
        padding-right: 22px;
    }
}

@media (max-width: 900px) {
    .solar-modern-enquiry {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
        width: calc(100% - 20px) !important;
        max-width: 600px !important;
        margin: 18px auto 24px !important;
    }
}

@media (max-width: 600px) {
    .solar-modern-enquiry {
        width: calc(100% - 20px) !important;
        border-radius: 18px !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
    }

    .solar-modern-top {
        padding: 20px 16px 15px;
    }

    .solar-modern-title-row h2 {
        font-size: 21px;
    }

    .solar-modern-title-row p {
        font-size: 9px;
        max-width: 300px;
    }

    .solar-modern-sun {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 11px;
        font-size: 20px;
    }

    .solar-modern-mode-card {
        align-items: flex-start;
        flex-direction: column;
        margin: 13px 16px 12px !important;
        padding: 11px;
    }

    .solar-modern-toggle-wrap {
        width: 100%;
        justify-content: space-between;
    }

    .solar-modern-form {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 16px !important;
    }

    .solar-modern-field-full {
        grid-column: 1;
    }

    .solar-modern-field label {
        font-size: 8px;
    }

    .solar-modern-input {
        height: 43px;
    }

    .solar-modern-input input {
        font-size: 11px !important;
    }

    .solar-modern-result,
    .solar-modern-commercial-banner {
        grid-column: 1;
    }

    .solar-modern-submit-area,
    .solar-modern-disclaimer {
        grid-column: 1;
    }

    .solar-modern-trust {
        margin-top: 14px;
        padding-bottom: 13px;
        gap: 7px;
    }
}

@media (max-width: 380px) {
    .solar-modern-title-row h2 {
        font-size: 19px;
    }

    .solar-modern-title-row p {
        font-size: 8px;
    }

    .solar-modern-mode-label {
        font-size: 8px;
    }

    .solar-modern-submit {
        font-size: 9px !important;
    }
}



/* Commercial form: allow the full expanded calculator to remain visible.
   Residential layout, position, slider and mobile layout are unchanged. */
@media (min-width: 901px) {
    .solar-main-hero {
        overflow: visible !important;
    }

    .solar-carousel {
        overflow: hidden !important;
    }

    #solarEnquiry {
        z-index: 20000 !important;
    }

    #solarEnquiry.solar-modern-enquiry {
        overflow: hidden !important;
    }
}



/* Keep the carousel locked to the hero while allowing the taller calculator card
   to extend below the hero without changing the slider height or position. */
@media (min-width: 901px) {
    .solar-main-hero {
        overflow: visible !important;
    }

    .solar-carousel {
        overflow: hidden !important;
        z-index: 1 !important;
    }

    .solar-main-header {
        z-index: 10000 !important;
    }

    .solar-enquiry-card.solar-modern-enquiry {
        z-index: 50 !important;
    }
}

/* =========================================================
   FINAL FORM LAYOUT
   - Mode switch stays at the top of the calculator.
   - Old calculator title/subtitle are removed.
   - Trust row is removed.
   - Commercial leasing + business offer stay side-by-side.
   - Residential output remains full width.
   - Slider/hero positioning is untouched.
========================================================= */
.solar-modern-top-mode-only {
    padding: 10px 27px 0 !important;
    background: #fff !important;
    border-bottom: 0 !important;
}

.solar-modern-top-mode-only .solar-modern-mode-card {
    margin: 0 0 14px !important;
    width: 100%;
}

/* Commercial: leasing on the left, business offer on the right. */
@media (min-width: 901px) {
    .solar-modern-form.solar-commercial-mode #leasingCheckboxGroup {
        grid-column: 1 !important;
        grid-row: auto !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .solar-modern-form.solar-commercial-mode #commercialOutput {
        grid-column: 2 !important;
        grid-row: auto !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .solar-modern-form.solar-commercial-mode .solar-button-wrapper {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
}

/* Keep the two bottom items readable on smaller screens. */
@media (max-width: 900px) {
    .solar-modern-top-mode-only {
        padding: 10px 16px 0 !important;
    }

    .solar-modern-top-mode-only .solar-modern-mode-card {
        margin-bottom: 12px !important;
    }

    .solar-modern-form.solar-commercial-mode #leasingCheckboxGroup,
    .solar-modern-form.solar-commercial-mode #commercialOutput {
        grid-column: 1 !important;
        width: 100% !important;
    }
}

/* Menu must always sit above the solar enquiry card when opened. */
.solar-mobile-menu {
    z-index: 30000 !important;
}
.solar-menu-backdrop {
    z-index: 29999 !important;
}
.solar-mobile-menu.open {
    z-index: 30000 !important;
}

.solar-mobile-menu:not(.open) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(105%) !important;
}
.solar-mobile-menu.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
}
.solar-menu-backdrop:not(.open) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* =========================================================
   FINAL SLIDER BOTTOM CONTROLS
   ONLY adjusts the bottom progress indicators + arrow buttons.
   Slide images, text, animations, form and other layout remain unchanged.
========================================================= */

/* Progress bars: keep them perfectly horizontal and evenly spaced. */
.solar-slide-progress {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    height: 4px !important;
    bottom: 48px !important;
}

.solar-slide-progress span {
    display: block !important;
    flex: 0 0 25px !important;
    width: 25px !important;
    height: 3px !important;
    min-height: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 3px !important;
    transform: none !important;
    background: rgba(255,255,255,.42) !important;
    transition: width .35s ease, background .35s ease !important;
}

.solar-slide-progress span.active {
    flex-basis: 48px !important;
    width: 48px !important;
    background: #e5b869 !important;
}

/* Arrow group: sit cleanly on the same bottom control line. */
.solar-slide-arrows {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    bottom: 31px !important;
}

.solar-slide-arrows button {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 45px !important;
    width: 45px !important;
    height: 45px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255,255,255,.68) !important;
    background: rgba(0,0,0,.18) !important;
    color: #fff !important;
}

/* Use the actual Font Awesome chevron glyphs.
   No pseudo-element is used, so the icon cannot be offset/doubled. */
.solar-slide-arrows button::before {
    content: none !important;
    display: none !important;
}

.solar-slide-arrows button i.fa {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 17px !important;
    line-height: 1 !important;
    text-align: center !important;
    transform: none !important;
}

/* Desktop: arrows remain immediately after the progress area. */
@media (min-width: 901px) {
    .solar-slide-arrows {
        left: calc(7.5% + 160px) !important;
        right: auto !important;
        bottom: 28px !important;
    }

    .solar-slide-progress {
        left: 7.5% !important;
        right: auto !important;
        bottom: 49px !important;
    }
}

/* Mobile: keep the progress bars on the left and arrows on the right,
   with both controls locked to the same bottom area and no overlap. */
@media (max-width: 900px) {
    .solar-slide-progress {
        left: 25px !important;
        right: auto !important;
        bottom: 34px !important;
        gap: 5px !important;
        height: 4px !important;
    }

    .solar-slide-progress span {
        flex-basis: 18px !important;
        width: 18px !important;
        height: 3px !important;
    }

    .solar-slide-progress span.active {
        flex-basis: 34px !important;
        width: 34px !important;
    }

    .solar-slide-arrows {
        left: auto !important;
        right: 25px !important;
        bottom: 14px !important;
        gap: 7px !important;
        align-items: center !important;
    }

    .solar-slide-arrows button {
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 40px !important;
    }

    .solar-slide-arrows button i.fa {
        font-size: 15px !important;
    }
}

/* Small mobile: maintain the same proportions without crowding. */
@media (max-width: 420px) {
    .solar-slide-progress {
        left: 20px !important;
        bottom: 10px !important;
        gap: 4px !important;
    }

    .solar-slide-progress span {
        flex-basis: 16px !important;
        width: 16px !important;
    }

    .solar-slide-progress span.active {
        flex-basis: 30px !important;
        width: 30px !important;
    }

    .solar-slide-arrows {
        right: 20px !important;
        bottom: 12px !important;
        gap: 6px !important;
    }

    .solar-slide-arrows button {
        flex-basis: 38px !important;
        width: 38px !important;
        height: 38px !important;
    }
}

/* =========================================================
   FINAL MOBILE ARROW CENTER FIX
   Keep the existing desktop positioning unchanged.
   Only correct the arrow glyph centering inside its button.
========================================================= */
.solar-slide-arrows button {
    position: relative !important;
    overflow: hidden !important;
}

.solar-slide-arrows button:first-child::before,
.solar-slide-arrows button:last-child::before {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 9px !important;
    height: 9px !important;
    margin: -5px 0 0 -5px !important;
    box-sizing: border-box !important;
}

/* Previous / left arrow */
.solar-slide-arrows button:first-child::before {
    transform: rotate(45deg) !important;
}

/* Next / right arrow */
.solar-slide-arrows button:last-child::before {
    transform: rotate(45deg) !important;
}

/* Mobile: keep both arrow buttons on exactly the same vertical center */
@media (max-width: 900px) {
    .solar-slide-arrows {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .solar-slide-arrows button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }

    .solar-slide-arrows button:first-child::before,
    .solar-slide-arrows button:last-child::before {
        top: 50% !important;
        left: 50% !important;
        margin: -5px 0 0 -5px !important;
    }
}

/* =========================================================
   FINAL MOBILE SLIDE ACTION BUTTON POSITION FIX
   Keep text position unchanged.
   Only move the CTA buttons slightly upward so they do not
   collide with the slide number / progress / arrow controls.
========================================================= */
@media (max-width: 900px) {
    .solar-slide-actions {
        position: relative !important;
        top: -12px !important;
        z-index: 25 !important;
    }

    .solar-primary-btn,
    .solar-secondary-btn {
        position: relative !important;
        z-index: 26 !important;
    }
}

/* Very small screens: give the controls a little more separation. */
@media (max-width: 420px) {
    .solar-slide-actions {
        top: -14px !important;
    }
}

/* Final polish: improve breathing room, banner readability and +91 alignment. */
.solar-modern-top-mode-only {
    padding: 14px 27px 4px !important;
}

.solar-modern-top-mode-only .solar-modern-mode-card {
    margin: 0 0 13px !important;
    padding: 11px 13px !important;
    min-height: 48px;
    box-sizing: border-box;
}

.solar-modern-form {
    row-gap: 12px !important;
    padding-bottom: 14px !important;
}

.solar-modern-input input {
    font-size: 11.5px !important;
    line-height: 1.2 !important;
}

.solar-modern-input input::placeholder {
    color: #7f8b94 !important;
    opacity: 1 !important;
}

/* Keep the country code centered and visually separated from the number. */
.solar-modern-country {
    width: 40px !important;
    min-width: 40px !important;
    flex: 0 0 40px !important;
    height: 100% !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    font-size: 10px !important;
    line-height: 1 !important;
    text-align: center !important;
}

.solar-modern-country + input {
    padding-left: 11px !important;
}

/* Commercial bottom row: clearer hierarchy and spacing. */
.solar-modern-commercial-banner {
    min-height: 62px !important;
    padding: 11px 13px !important;
    gap: 10px !important;
    box-sizing: border-box !important;
}

.solar-modern-commercial-banner span {
    font-size: 8px !important;
    line-height: 1.15 !important;
    letter-spacing: .05px;
}

.solar-modern-commercial-banner strong {
    margin: 3px 0 2px !important;
    font-size: 15px !important;
    line-height: 1.05 !important;
    letter-spacing: .15px !important;
}

.solar-modern-commercial-banner small {
    font-size: 8px !important;
    line-height: 1.2 !important;
    color: rgba(255,255,255,.78) !important;
}

.solar-modern-banner-icon {
    width: 35px !important;
    height: 35px !important;
    flex: 0 0 35px !important;
    font-size: 17px !important;
}

.solar-modern-check {
    min-height: 62px !important;
    padding: 9px 11px !important;
    box-sizing: border-box !important;
}

.solar-modern-check strong {
    font-size: 9.5px !important;
    line-height: 1.15 !important;
}

.solar-modern-check small {
    font-size: 7.5px !important;
    line-height: 1.2 !important;
}

.solar-modern-submit-area {
    margin-top: 1px !important;
}

.solar-modern-submit {
    min-height: 44px !important;
}

@media (max-width: 900px) {
    .solar-modern-top-mode-only {
        padding: 12px 16px 3px !important;
    }

    .solar-modern-form {
        row-gap: 10px !important;
        padding-bottom: 12px !important;
    }

    .solar-modern-commercial-banner,
    .solar-modern-check {
        min-height: 58px !important;
    }
}







/* ================= EMBEDDED STYLE BLOCK 1 ================= */

        /* Brighter travel image */
        #solarHero .solar-slide-dark{
            background:rgba(3,18,32,.12) !important;
            opacity:.48 !important;
        }

        #solarHero .solar-slide-gradient{
            background:linear-gradient(90deg,
                rgba(3,18,34,.56) 0%,
                rgba(3,18,34,.24) 42%,
                rgba(3,18,34,.04) 72%,
                rgba(3,18,34,.10) 100%) !important;
            opacity:.82 !important;
        }

        #solarHero .solar-slide{
            background-position:center center !important;
            background-size:cover !important;
        }

        #solarHero .solar-slide-content h1{
            text-shadow:0 3px 18px rgba(0,0,0,.28);
        }

        #solarHero .solar-slide-description,
        #solarHero .solar-slide-title2{
            text-shadow:0 2px 10px rgba(0,0,0,.22);
        }

        #solarHero .solar-slide-actions{
            display:flex;
            align-items:center;
            flex-wrap:wrap;
            gap:10px;
            margin-top:18px;
        }

        #solarHero .solar-primary-btn,
        #solarHero .solar-secondary-btn{
            white-space:nowrap;
            min-width:0;
        }

        /* MOBILE HERO */
        @media (max-width:700px){
            #solarHero .solar-slide-dark{
                background:rgba(2,16,30,.08) !important;
                opacity:.42 !important;
            }

            #solarHero .solar-slide-gradient{
                background:linear-gradient(180deg,
                    rgba(2,18,34,.10) 0%,
                    rgba(2,18,34,.06) 30%,
                    rgba(2,18,34,.20) 63%,
                    rgba(2,18,34,.52) 100%) !important;
                opacity:.80 !important;
            }

            #solarHero .solar-slide-content{
                position:absolute !important;
                left:20px !important;
                right:20px !important;
                top:32% !important;
                bottom:auto !important;
                width:auto !important;
                max-width:none !important;
                padding:0 !important;
                transform:none !important;
                z-index:5 !important;
            }

            #solarHero .solar-slide-tag{
                margin-bottom:8px !important;
                font-size:10px !important;
                letter-spacing:2px !important;
                line-height:1.2 !important;
            }

            #solarHero .solar-slide-content h1{
                max-width:100% !important;
                margin:0 !important;
                font-size:34px !important;
                line-height:1.04 !important;
                letter-spacing:-1.1px !important;
            }

            #solarHero .solar-slide-title2{
                max-width:100% !important;
                margin-top:8px !important;
                font-size:16px !important;
                line-height:1.22 !important;
            }

            #solarHero .solar-slide-description{
                max-width:100% !important;
                margin-top:8px !important;
                font-size:13px !important;
                line-height:1.4 !important;
            }

            /* Destination + Contact buttons stay on one clean row */
            #solarHero .solar-slide-actions{
                display:flex !important;
                flex-wrap:nowrap !important;
                align-items:center !important;
                justify-content:flex-start !important;
                gap:12px !important;
                margin-top:24px !important;
                width:100% !important;
                box-sizing:border-box !important;
            }

            #solarHero .solar-primary-btn,
            #solarHero .solar-secondary-btn{
                height:48px !important;
                min-height:48px !important;
                padding:0 14px !important;
                font-size:12px !important;
                line-height:1 !important;
                white-space:nowrap !important;
                box-sizing:border-box !important;
                margin:0 !important;
                flex-shrink:0 !important;
            }

            #solarHero .solar-primary-btn{
                flex:0 0 auto !important;
                gap:10px !important;
            }

            #solarHero .solar-primary-btn span{
                width:28px !important;
                height:28px !important;
                flex:0 0 28px !important;
                display:flex !important;
                align-items:center !important;
                justify-content:center !important;
            }

            #solarHero .solar-secondary-btn{
                flex:0 0 auto !important;
                min-width:88px !important;
            }

            /* Keep navigation below the content */
            #solarHero .solar-slide-number{
                left:20px !important;
                bottom:43px !important;
            }

            #solarHero .solar-slide-progress{
                left:20px !important;
                bottom:27px !important;
            }

            #solarHero .solar-slide-arrows{
                right:20px !important;
                bottom:22px !important;
            }

            #solarHero .solar-slide-arrows button{
                width:50px !important;
                height:50px !important;
            }

            /* Hero points remain available from DB but don't crowd mobile text */
            #solarHero .solar-hero-points{
                margin-top:9px !important;
                gap:5px !important;
            }

            #solarHero .solar-hero-point{
                font-size:8px !important;
                min-height:23px !important;
                padding:3px 7px 3px 4px !important;
            }

            #solarHero .solar-hero-point:nth-child(n+4){
                display:none;
            }
        }

        @media (max-width:430px){
            #solarHero .solar-slide-content{
                left:18px !important;
                right:18px !important;
                top:33% !important;
            }

            #solarHero .solar-slide-content h1{
                font-size:30px !important;
                line-height:1.05 !important;
            }

            #solarHero .solar-slide-title2{
                font-size:15px !important;
            }

            #solarHero .solar-slide-description{
                font-size:12px !important;
            }

            #solarHero .solar-slide-actions{
                gap:10px !important;
                margin-top:22px !important;
            }

            #solarHero .solar-primary-btn,
            #solarHero .solar-secondary-btn{
                height:45px !important;
                min-height:45px !important;
                padding:0 11px !important;
                font-size:11px !important;
            }

            #solarHero .solar-primary-btn span{
                width:26px !important;
                height:26px !important;
                flex-basis:26px !important;
            }

            #solarHero .solar-secondary-btn{
                min-width:84px !important;
            }
        }

        @media (max-width:360px){
            #solarHero .solar-slide-content{
                top:33% !important;
            }

            #solarHero .solar-slide-content h1{
                font-size:27px !important;
            }

            #solarHero .solar-slide-title2{
                font-size:14px !important;
            }

            #solarHero .solar-slide-description{
                font-size:11px !important;
            }

            #solarHero .solar-primary-btn,
            #solarHero .solar-secondary-btn{
                padding:0 9px !important;
                font-size:10.5px !important;
            }
        }
    

/* ================= EMBEDDED STYLE BLOCK 2 ================= */

    .solar-slide-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}.solar-slide-video~.solar-slide-dark,.solar-slide-video~.solar-slide-gradient{z-index:1}.solar-slide-video~.solar-slide-content,.solar-slide-video~.solar-slide-number,.solar-slide-video~.solar-slide-progress,.solar-slide-video~.solar-slide-arrows{z-index:2}.solar-slide-title2{margin:8px 0 0;max-width:650px;color:rgba(255,255,255,.94);font-size:18px;line-height:1.35;font-weight:700}.solar-hero-points{display:flex;flex-wrap:wrap;gap:8px 10px;max-width:700px;margin:14px 0 0}.solar-hero-point{display:inline-flex;align-items:center;gap:7px;min-height:29px;padding:5px 10px 5px 6px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(5,25,45,.28);backdrop-filter:blur(6px);color:#fff;font-size:10px;font-weight:700}.solar-hero-point-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px;border-radius:50%;background:#e5b869;color:#fff;font-size:9px}@media(max-width:700px){.solar-slide-title2{font-size:14px;max-width:92%}.solar-hero-points{gap:6px;max-width:92%}.solar-hero-point{font-size:9px;min-height:26px;padding:4px 8px 4px 5px}.solar-hero-point-icon{width:18px;height:18px;flex-basis:18px}.solar-slide-video{display:none}}
    

/* ================= EMBEDDED STYLE BLOCK 3 ================= */

/* =========================================================
   PREMIUM TOUR ENQUIRY FORM
   Scoped only to .tour-enquiry-card
========================================================= */

.tour-enquiry-card{
    position:relative;
    width:min(535px, calc(100% - 30px));
    padding:25px 25px 17px;
    border-radius:26px;
    background:
        radial-gradient(circle at 96% 0%, rgba(255,143,45,.20), transparent 26%),
        radial-gradient(circle at 0% 100%, rgba(17,75,120,.08), transparent 30%),
        rgba(255,255,255,.985);
    border:1px solid rgba(255,255,255,.90);
    box-shadow:0 28px 70px rgba(3,20,43,.34), 0 8px 25px rgba(0,0,0,.12);
    overflow:visible;
    isolation:isolate;
    z-index:20;
}

.tour-enquiry-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(135deg,rgba(229, 184, 105, .42),rgba(255,255,255,.9),rgba(7,52,88,.12));
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
    z-index:-1;
}

.tour-enquiry-card .solar-modern-glow{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    filter:blur(2px);
    z-index:-1;
}

.tour-enquiry-card .solar-modern-glow-one{
    width:150px;
    height:150px;
    top:-92px;
    right:-42px;
    background:rgba(229, 184, 105, .20);
}

.tour-enquiry-card .solar-modern-glow-two{
    width:125px;
    height:125px;
    bottom:-92px;
    left:-60px;
    background:rgba(20,91,145,.08);
}

/* Header deliberately centered */
.tour-enquiry-card .tour-enquiry-header{
    position:relative;
    text-align:center;
    margin:0 auto 18px;
    max-width:460px;
}

.tour-enquiry-card .tour-enquiry-caption{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:0 0 7px;
    color:#e5b869;
    font-size:9px;
    line-height:1;
    font-weight:900;
    letter-spacing:2.1px;
    text-transform:uppercase;
}

.tour-enquiry-card .tour-enquiry-caption::before,
.tour-enquiry-card .tour-enquiry-caption::after{
    content:"";
    width:24px;
    height:2px;
    border-radius:10px;
    background:linear-gradient(90deg,transparent,#e5b869);
}

.tour-enquiry-card .tour-enquiry-caption::after{
    background:linear-gradient(90deg,#e5b869,transparent);
}

.tour-enquiry-card .tour-enquiry-header h2{
    margin:0;
    color:#15263b;
    font-size:26px;
    line-height:1.12;
    font-weight:850;
    letter-spacing:-.65px;
}

.tour-enquiry-card .tour-enquiry-header p{
    margin:7px 0 0;
    color:#738092;
    font-size:11px;
    line-height:1.4;
}

/* Form grid */
.tour-enquiry-card .solar-modern-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.tour-enquiry-card .solar-modern-field{
    position:relative;
    min-width:0;
    margin:0;
}

.tour-enquiry-card .solar-modern-field-full{
    grid-column:1 / -1;
}

.tour-enquiry-card .tour-field-label{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:11px;
    margin:0 0 5px 3px;
    color:#566578;
    font-size:9px;
    line-height:1;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
}

.tour-enquiry-card .tour-field-required{
    color:#d4af37;
    font-size:8px;
}

/* Inputs */
.tour-enquiry-card .solar-modern-input{
    position:relative;
    display:flex;
    align-items:center;
    width:100%;
    min-height:44px;
    background:#fff;
    border:1px solid #dbe3ec;
    border-radius:12px;
    transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}

.tour-enquiry-card .solar-modern-input:hover{
    border-color:#c6d1dd;
}

.tour-enquiry-card .solar-modern-input:focus-within{
    border-color:#e5b869;
    box-shadow:0 0 0 3px rgba(229, 184, 105, .10);
    transform:translateY(-1px);
}

.tour-enquiry-card .solar-modern-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 40px;
    width:40px;
    color:#e5b869;
    font-size:13px;
}

.tour-enquiry-card .solar-modern-input input{
    width:100%;
    min-width:0;
    height:42px;
    padding:0 12px 0 0;
    border:0;
    outline:0;
    background:transparent;
    color:#243449;
    font:600 12px/1 inherit;
}

.tour-enquiry-card .solar-modern-input input::placeholder{
    color:#8b97a6;
    font-weight:500;
}

.tour-enquiry-card .solar-modern-country{
    display:flex;
    align-items:center;
    justify-content:center;
    align-self:stretch;
    min-width:50px;
    padding:0 7px;
    border-right:1px solid #e1e6ec;
    color:#27364a;
    font-size:11px;
    font-weight:900;
}

/* =========================================================
   CUSTOM DROPDOWN
   Replaces the browser's plain static-looking select UI.
========================================================= */

.tour-custom-select{
    position:relative;
    width:100%;
}

.tour-native-select{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
    pointer-events:none !important;
    overflow:hidden !important;
}

.tour-select-trigger{
    position:relative;
    display:flex;
    align-items:center;
    width:100%;
    min-height:44px;
    padding:0 38px 0 0;
    border:0;
    outline:0;
    background:transparent;
    color:#25364b;
    cursor:pointer;
    text-align:left;
    font:700 12px/1 inherit;
}

.tour-select-trigger .tour-trigger-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 40px;
    width:40px;
    color:#e5b869;
    font-size:13px;
}

.tour-select-trigger .tour-trigger-text{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.tour-select-trigger .tour-trigger-placeholder{
    color:#8b97a6;
    font-weight:600;
}

.tour-select-trigger .tour-trigger-arrow{
    position:absolute;
    right:14px;
    top:50%;
    width:7px;
    height:7px;
    margin-top:-5px;
    border-right:2px solid #718095;
    border-bottom:2px solid #718095;
    transform:rotate(45deg);
    transition:transform .2s ease,border-color .2s ease;
}

.tour-custom-select.open .tour-select-trigger .tour-trigger-arrow{
    margin-top:0;
    transform:rotate(225deg);
    border-color:#d4af37;
}

.tour-custom-select.open .solar-modern-input{
    border-color:#e5b869;
    box-shadow:0 0 0 3px rgba(229, 184, 105, .10);
}

.tour-dropdown-panel{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 7px);
    z-index:9999;
    display:none;
    padding:7px;
    border:1px solid #e0e6ed;
    border-radius:15px;
    background:#fff;
    box-shadow:0 18px 42px rgba(10,30,52,.20);
    animation:tourDropdownIn .16s ease-out;
}

.tour-custom-select.open .tour-dropdown-panel{
    display:block;
}

@keyframes tourDropdownIn{
    from{opacity:0;transform:translateY(-5px) scale(.985)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

.tour-dropdown-search{
    position:relative;
    margin-bottom:6px;
}

.tour-dropdown-search i{
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    color:#9aa5b3;
    font-size:11px;
}

.tour-dropdown-search input{
    width:100%;
    height:34px;
    padding:0 10px 0 31px;
    border:1px solid #e4e9ef;
    border-radius:9px;
    outline:0;
    background:#f8fafc;
    color:#26364a;
    font:600 11px/1 inherit;
}

.tour-dropdown-search input:focus{
    border-color:#ffad62;
    background:#fff;
}

.tour-dropdown-options{
    max-height:205px;
    overflow-y:auto;
    padding-right:2px;
}

.tour-dropdown-option{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    min-height:37px;
    padding:7px 9px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:#304156;
    cursor:pointer;
    text-align:left;
    font:650 11px/1.2 inherit;
    transition:background .15s ease,color .15s ease;
}

.tour-dropdown-option:hover{
    background:#fff3e8;
    color:#ed7200;
}

.tour-dropdown-option.selected{
    background:#fff0df;
    color:#ed7200;
    font-weight:800;
}

.tour-dropdown-option .tour-option-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:25px;
    height:25px;
    flex:0 0 25px;
    border-radius:8px;
    background:#fff7ef;
    color:#e5b869;
    font-size:10px;
}

.tour-dropdown-empty{
    padding:13px 9px;
    text-align:center;
    color:#8b97a6;
    font-size:10px;
}

/* Date */
.tour-enquiry-card input[type="date"]{
    color-scheme:light;
    cursor:pointer;
}

.tour-enquiry-card input[type="date"]::-webkit-calendar-picker-indicator{
    opacity:.65;
    cursor:pointer;
}

/* Submit */
.tour-enquiry-card .solar-modern-submit-area{
    grid-column:1 / -1;
    margin-top:2px;
}

.tour-enquiry-card .solar-modern-submit{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-height:49px;
    padding:0 10px 0 19px;
    border:0;
    border-radius:13px;
    background:linear-gradient(135deg,#e5b869,#ff7000);
    color:#fff;
    box-shadow:0 10px 24px rgba(229, 184, 105, .26);
    cursor:pointer;
    font-size:12px;
    font-weight:850;
    transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}

.tour-enquiry-card .solar-modern-submit:hover{
    transform:translateY(-2px);
    box-shadow:0 15px 30px rgba(229, 184, 105, .32);
    filter:saturate(1.06);
}

.tour-enquiry-card .solar-modern-submit:active{
    transform:translateY(0);
}

.tour-enquiry-card .solar-modern-submit b{
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:9px;
    background:rgba(255,255,255,.20);
    font-size:12px;
}

.tour-enquiry-card .solar-modern-disclaimer{
    grid-column:1 / -1;
    margin:0;
    text-align:center;
    color:#8a95a3;
    font-size:8.5px;
    line-height:1.35;
}

/* Mobile */
@media (max-width:700px){
    .tour-enquiry-card{
        width:calc(100% - 22px);
        padding:21px 16px 14px;
        border-radius:21px;
    }

    .tour-enquiry-card .tour-enquiry-header h2{
        font-size:22px;
    }

    .tour-enquiry-card .tour-enquiry-header p{
        font-size:10px;
    }

    .tour-enquiry-card .solar-modern-form{
        grid-template-columns:1fr;
        gap:9px;
    }

    .tour-enquiry-card .solar-modern-field-full,
    .tour-enquiry-card .solar-modern-submit-area,
    .tour-enquiry-card .solar-modern-disclaimer{
        grid-column:auto;
    }

    .tour-dropdown-panel{
        position:fixed;
        left:12px;
        right:12px;
        top:auto;
        width:auto;
        max-height:min(360px,70vh);
    }

    .tour-dropdown-options{
        max-height:245px;
    }
}

@media (max-width:390px){
    .tour-enquiry-card{
        padding:18px 13px 13px;
    }

    .tour-enquiry-card .tour-enquiry-header h2{
        font-size:20px;
    }

    .tour-enquiry-card .solar-modern-input,
    .tour-enquiry-card .tour-select-trigger{
        min-height:42px;
    }

    .tour-enquiry-card .solar-modern-input input{
        height:40px;
        font-size:11px;
    }
}


/* ================= EMBEDDED STYLE BLOCK 4 ================= */

/* =========================================================
   PREMIUM DESTINATION EXPLORER
   Static now; easy to connect to DB later.
========================================================= */
.premium-destinations-section{
    position:relative;
    overflow:hidden;
    padding:105px 24px 90px;
    color:#fff;
    background:
        radial-gradient(circle at 8% 18%,rgba(214,157,63,.13),transparent 27%),
        radial-gradient(circle at 90% 75%,rgba(38,91,116,.18),transparent 30%),
        linear-gradient(135deg,#071522 0%,#0a1d2a 52%,#07131e 100%);
}
.premium-destinations-container{position:relative;z-index:2;width:min(1180px,100%);margin:0 auto}
.premium-destinations-glow{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}
.premium-destinations-glow-one{width:360px;height:360px;left:-180px;top:80px;background:rgba(225,166,73,.06)}
.premium-destinations-glow-two{width:440px;height:440px;right:-230px;bottom:-180px;background:rgba(65,130,154,.08)}

.premium-destinations-top{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:50px;
    margin-bottom:42px;
}
.premium-destinations-eyebrow{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:15px;
    color:#d8ad63;
    font-size:9px;
    font-weight:800;
    letter-spacing:3px;
}
.premium-destinations-eyebrow span{width:30px;height:1px;background:#d8ad63;display:block}
.premium-destinations-top h2{
    margin:0;
    color:#fff;
    font-family:Georgia,"Times New Roman",serif;
    font-size:48px;
    line-height:1.02;
    font-weight:500;
    letter-spacing:-1.5px;
}
.premium-destinations-top h2 em{color:#d9ad63;font-style:italic}
.premium-destinations-intro{
    width:360px;
    padding-bottom:4px;
}
.premium-destinations-intro p{
    margin:0 0 16px;
    color:rgba(255,255,255,.63);
    font-size:12px;
    line-height:1.8;
}
.premium-destinations-intro a{
    color:#e0b66c;
    font-size:10px;
    font-weight:800;
    letter-spacing:1px;
    text-decoration:none;
    text-transform:uppercase;
}
.premium-destinations-intro a i{margin-left:8px}

.premium-destination-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:repeat(3,210px);
    gap:13px;
}
.premium-destination{
    position:relative;
    display:block;
    overflow:hidden;
    min-width:0;
    border-radius:18px;
    background:#122432;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 18px 45px rgba(0,0,0,.22);
    text-decoration:none!important;
    isolation:isolate;
}
.premium-destination-featured{
    grid-column:span 2;
    grid-row:span 2;
    border-radius:22px;
}
.premium-destination img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .75s cubic-bezier(.2,.7,.2,1),filter .5s ease;
}
.premium-destination-shade{
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(180deg,rgba(3,15,24,.02) 20%,rgba(3,15,24,.15) 45%,rgba(3,15,24,.88) 100%),
        linear-gradient(90deg,rgba(3,15,24,.22),transparent 65%);
}
.premium-destination:hover img{transform:scale(1.065);filter:saturate(1.08)}
.premium-destination-content{
    position:absolute;
    z-index:2;
    left:24px;
    right:20px;
    bottom:21px;
}
.premium-destination-kicker{
    display:block;
    margin-bottom:8px;
    color:#e1ba72;
    font-size:7px;
    font-weight:900;
    letter-spacing:2px;
}
.premium-destination h3{
    margin:0 0 5px;
    color:#fff;
    font-family:Georgia,"Times New Roman",serif;
    font-size:28px;
    line-height:1;
    font-weight:500;
    text-shadow:0 3px 20px rgba(0,0,0,.35);
}
.premium-destination p{
    margin:0;
    color:rgba(255,255,255,.72);
    font-size:9px;
    line-height:1.5;
}
.premium-destination-featured .premium-destination-content{
    left:32px;
    bottom:29px;
}
.premium-destination-featured h3{font-size:46px}
.premium-destination-featured p{font-size:11px}
.premium-destination-cta{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-top:17px;
    padding:9px 13px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:999px;
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(10px);
    color:#fff;
    font-size:8px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
}
.premium-destination-cta i{
    color:#e4b765;
    font-size:10px;
}
.premium-destination-mini{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:12px;
    color:#e2b86d;
    font-size:7px;
    font-weight:800;
    letter-spacing:.8px;
    text-transform:uppercase;
}
.premium-destination-mini i{font-size:8px}

.premium-destinations-footer{
    display:flex;
    align-items:center;
    gap:17px;
    margin-top:30px;
}
.premium-footer-line{
    width:45px;
    height:1px;
    background:#d6a957;
}
.premium-destinations-footer>span{
    color:rgba(255,255,255,.42);
    font-size:7px;
    font-weight:800;
    letter-spacing:2px;
}
.premium-destinations-footer a{
    margin-left:auto;
    color:#dcb166;
    font-size:9px;
    font-weight:800;
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:.7px;
}
.premium-destinations-footer a i{margin-left:7px}

@media(max-width:850px){
    .premium-destinations-section{padding:72px 16px 65px}
    .premium-destinations-top{align-items:flex-start;flex-direction:column;gap:22px}
    .premium-destinations-top h2{font-size:39px}
    .premium-destinations-intro{width:100%;max-width:560px}
    .premium-destination-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-template-rows:220px 220px 220px 220px;
    }
    .premium-destination-featured{grid-column:span 2;grid-row:span 2}
    .premium-destination h3{font-size:23px}
    .premium-destination-featured h3{font-size:38px}
}
@media(max-width:560px){
    .premium-destinations-section{padding:58px 13px 50px}
    .premium-destinations-top{margin-bottom:27px}
    .premium-destinations-top h2{font-size:33px;letter-spacing:-.8px}
    .premium-destinations-intro p{font-size:11px;line-height:1.7}
    .premium-destination-grid{
        grid-template-columns:1fr 1fr;
        grid-template-rows:205px 145px 145px 145px;
        gap:9px;
    }
    .premium-destination-featured{grid-column:span 2;grid-row:span 1;border-radius:18px}
    .premium-destination-content{left:13px;right:10px;bottom:13px}
    .premium-destination-featured .premium-destination-content{left:18px;bottom:17px}
    .premium-destination-kicker{font-size:5.5px;letter-spacing:1.4px;margin-bottom:5px}
    .premium-destination h3{font-size:20px;margin-bottom:3px}
    .premium-destination-featured h3{font-size:31px}
    .premium-destination p{font-size:7px}
    .premium-destination-featured p{font-size:8px}
    .premium-destination-cta{margin-top:10px;padding:7px 10px;font-size:6.5px}
    .premium-destination-mini{margin-top:6px;font-size:5.5px;gap:5px}
    .premium-destinations-footer{gap:9px;margin-top:21px}
    .premium-destinations-footer>span{font-size:5.5px;letter-spacing:1.2px}
    .premium-destinations-footer a{font-size:6.5px}
}


/* ================= EMBEDDED STYLE BLOCK 5 ================= */

/* =========================================================
   PREMIUM TOUR COLLECTION v2
   Luxury Editorial Travel Design
========================================================= */

.tour-collection-section{
    position:relative;
    overflow:hidden;
    padding:115px 24px 105px;
    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(211,169,100,.10),
            transparent 26%
        ),
        radial-gradient(
            circle at 92% 80%,
            rgba(30,76,95,.07),
            transparent 28%
        ),
        #f8f6f1;
    color:#173044;
}


/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.tour-collection-section::before{
    content:"";
    position:absolute;
    width:560px;
    height:560px;
    right:-290px;
    top:-290px;
    border:1px solid rgba(181,140,68,.14);
    border-radius:50%;
    pointer-events:none;
}

.tour-collection-section::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    left:-260px;
    bottom:-250px;
    border:1px solid rgba(25,61,78,.08);
    border-radius:50%;
    pointer-events:none;
}


.tour-collection-container{
    position:relative;
    z-index:2;
    width:min(1180px,100%);
    margin:0 auto;
}


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

.tour-collection-header{
    max-width:780px;
    margin:0 auto 62px;
    text-align:center;
}


.tour-collection-eyebrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    color:#a87935;

    font-size:11px;
    line-height:1;
    font-weight:800;
    letter-spacing:3px;
}


.tour-collection-eyebrow span{
    width:32px;
    height:1px;
    background:#c79b54;
}


.tour-collection-header h2{
    margin:20px 0 17px;

    color:#173044;

    font-family:Georgia,"Times New Roman",serif;
    font-size:54px;
    line-height:1.04;
    font-weight:500;

    letter-spacing:-1.8px;
}


.tour-collection-header h2 em{
    color:#d4af37;
    font-style:italic;
}


.tour-collection-header p{
    max-width:650px;
    margin:0 auto;

    color:#6f7d87;

    font-size:14px;
    line-height:1.75;
}


/* =========================================================
   FEATURED PACKAGE
========================================================= */

.tour-featured-package{
    display:grid;
    grid-template-columns:1.48fr .82fr;

    min-height:550px;

    overflow:hidden;

    background:#fff;

    border:1px solid rgba(25,48,68,.07);
    border-radius:14px;

    box-shadow:
        0 28px 75px rgba(23,48,68,.11),
        0 4px 15px rgba(23,48,68,.04);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}


.tour-featured-package:hover{
    transform:translateY(-3px);

    box-shadow:
        0 35px 85px rgba(23,48,68,.14),
        0 6px 18px rgba(23,48,68,.05);
}


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

.tour-featured-image{
    position:relative;
    min-height:550px;
    overflow:hidden;
}


.tour-featured-image img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform 1s cubic-bezier(.2,.7,.2,1);
}


.tour-featured-package:hover
.tour-featured-image img{
    transform:scale(1.045);
}


.tour-featured-image-shade{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(4,18,28,.02) 30%,
            rgba(4,18,28,.10) 60%,
            rgba(4,18,28,.52) 100%
        );
}


/* =========================================================
   DURATION
========================================================= */

.tour-featured-duration{
    position:absolute;
    left:30px;
    bottom:28px;

    display:flex;
    align-items:center;
    gap:8px;

    color:#fff;

    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;
}


.tour-featured-duration span{
    color:#fff;

    font-family:Georgia,"Times New Roman",serif;

    font-size:23px;
    line-height:1;
    font-weight:500;
}


.tour-featured-duration i{
    width:25px;
    height:1px;

    background:rgba(255,255,255,.65);
}


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

.tour-featured-content{
    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:55px 52px;
}


.tour-featured-number{
    margin-bottom:27px;

    color:#b48846;

    font-size:10px;
    line-height:1;
    font-weight:900;
    letter-spacing:2.3px;
}


.tour-featured-location{
    margin-bottom:15px;

    color:#a77935;

    font-size:10px;
    line-height:1;
    font-weight:900;
    letter-spacing:2px;
}


.tour-featured-location i{
    margin-right:5px;
}


.tour-featured-content h3{
    margin:0;

    color:#193247;

    font-family:Georgia,"Times New Roman",serif;

    font-size:43px;
    line-height:1.04;
    font-weight:500;

    letter-spacing:-1.2px;
}


.tour-featured-content h3 em{
    display:block;

    color:#b88642;

    font-style:italic;
    font-weight:400;
}


.tour-featured-content p{
    margin:24px 0 0;

    color:#6f7d87;

    font-size:13px;
    line-height:1.8;
}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.tour-featured-highlights{
    display:flex;
    flex-direction:column;
    gap:11px;

    margin-top:27px;
}


.tour-featured-highlights span{
    display:flex;
    align-items:center;
    gap:11px;

    color:#64727c;

    font-size:10px;
    line-height:1.3;
    font-weight:700;
}


.tour-featured-highlights i{
    display:flex;
    align-items:center;
    justify-content:center;

    width:28px;
    height:28px;
    flex:0 0 28px;

    border-radius:50%;

    background:#f4efe5;

    color:#b27f35;

    font-size:10px;
}


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

.tour-explore-link{
    display:flex;
    align-items:center;
    justify-content:space-between;

    width:100%;

    margin-top:32px;
    padding-top:18px;

    border-top:1px solid #e6e3dd;

    color:#9e7133;

    font-size:10px;
    line-height:1;
    font-weight:900;
    letter-spacing:1.3px;

    text-decoration:none;
    text-transform:uppercase;
}


.tour-explore-link span{
    display:flex;
    align-items:center;
    justify-content:center;

    width:38px;
    height:38px;

    border:1px solid #c9a263;
    border-radius:50%;

    color:#9e7133;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.tour-explore-link:hover span{
    background:#c49a58;
    color:#fff;
    transform:translateX(3px);
}


/* =========================================================
   SECONDARY JOURNEYS
========================================================= */

.tour-secondary-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;

    margin-top:22px;
}


.tour-secondary-package{
    display:grid;
    grid-template-columns:43% 57%;

    min-height:225px;

    overflow:hidden;

    background:#fff;

    border:1px solid rgba(25,48,68,.06);

    box-shadow:
        0 18px 48px rgba(23,48,68,.07);

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


.tour-secondary-package:hover{
    transform:translateY(-5px);

    box-shadow:
        0 25px 58px rgba(23,48,68,.11);
}


/* SECONDARY IMAGE */

.tour-secondary-image{
    position:relative;
    overflow:hidden;
}


.tour-secondary-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1);
}


.tour-secondary-package:hover
.tour-secondary-image img{
    transform:scale(1.065);
}


.tour-secondary-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(4,20,30,.01),
            rgba(4,20,30,.42)
        );
}


.tour-secondary-duration{
    position:absolute;

    left:15px;
    bottom:15px;

    color:#fff;

    font-size:8px;
    line-height:1;
    font-weight:900;
    letter-spacing:1.2px;
}


/* SECONDARY CONTENT */

.tour-secondary-content{
    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:28px 31px;
}


.tour-secondary-location{
    color:#a87935;

    font-size:9px;
    line-height:1;
    font-weight:900;

    letter-spacing:1.8px;
}


.tour-secondary-content h3{
    margin:11px 0 10px;

    color:#193247;

    font-family:Georgia,"Times New Roman",serif;

    font-size:27px;
    line-height:1.08;
    font-weight:500;

    letter-spacing:-.5px;
}


.tour-secondary-content p{
    margin:0;

    color:#74818a;

    font-size:10px;
    line-height:1.7;
}


.tour-secondary-content a{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-top:19px;

    color:#a57634;

    font-size:8px;
    line-height:1;
    font-weight:900;

    letter-spacing:1.2px;

    text-decoration:none;
    text-transform:uppercase;
}


.tour-secondary-content a i{
    font-size:9px;
    transition:transform .2s ease;
}


.tour-secondary-content a:hover i{
    transform:translateX(4px);
}


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

.tour-collection-footer{
    display:flex;
    align-items:center;

    margin-top:35px;
}


.tour-collection-footer span{
    color:#9b9180;

    font-size:8px;
    line-height:1;
    font-weight:900;

    letter-spacing:2px;
}


.tour-collection-footer a{
    margin-left:auto;

    color:#a87935;

    font-size:9px;
    line-height:1;
    font-weight:900;

    letter-spacing:1.1px;

    text-decoration:none;
    text-transform:uppercase;
}


.tour-collection-footer a i{
    margin-left:9px;
}


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

@media(max-width:900px){

    .tour-collection-section{
        padding:90px 20px 80px;
    }

    .tour-collection-header h2{
        font-size:45px;
    }

    .tour-featured-package{
        grid-template-columns:1fr;
    }

    .tour-featured-image{
        min-height:430px;
    }

    .tour-featured-content{
        padding:45px;
    }

    .tour-secondary-grid{
        grid-template-columns:1fr;
    }

}


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

@media(max-width:600px){

    .tour-collection-section{
        padding:70px 14px 65px;
    }

    .tour-collection-header{
        margin-bottom:35px;
    }

    .tour-collection-eyebrow{
        font-size:7px;
        letter-spacing:2px;
        gap:8px;
    }

    .tour-collection-eyebrow span{
        width:20px;
    }

    .tour-collection-header h2{
        margin:15px 0 12px;

        font-size:34px;
        line-height:1.06;

        letter-spacing:-.9px;
    }

    .tour-collection-header p{
        font-size:10px;
        line-height:1.7;
    }


    .tour-featured-package{
        display:block;
        border-radius:12px;
    }

    .tour-featured-image{
        min-height:320px;
    }

    .tour-featured-content{
        padding:30px 23px 28px;
    }

    .tour-featured-number{
        margin-bottom:19px;
        font-size:8px;
    }

    .tour-featured-location{
        font-size:8px;
    }

    .tour-featured-content h3{
        font-size:31px;
        letter-spacing:-.7px;
    }

    .tour-featured-content p{
        margin-top:17px;
        font-size:10px;
        line-height:1.7;
    }

    .tour-featured-highlights{
        margin-top:20px;
        gap:9px;
    }

    .tour-featured-highlights span{
        font-size:8px;
    }

    .tour-featured-highlights i{
        width:25px;
        height:25px;
        flex-basis:25px;
        font-size:8px;
    }

    .tour-featured-duration{
        left:19px;
        bottom:19px;
        font-size:8px;
    }

    .tour-featured-duration span{
        font-size:19px;
    }


    .tour-secondary-grid{
        gap:13px;
        margin-top:13px;
    }

    .tour-secondary-package{
        grid-template-columns:40% 60%;
        min-height:185px;
    }

    .tour-secondary-content{
        padding:20px 17px;
    }

    .tour-secondary-location{
        font-size:7px;
    }

    .tour-secondary-content h3{
        margin:8px 0 7px;
        font-size:19px;
    }

    .tour-secondary-content p{
        font-size:8px;
        line-height:1.6;
    }

    .tour-secondary-content a{
        margin-top:14px;
        font-size:7px;
    }

    .tour-secondary-duration{
        font-size:6px;
        left:10px;
        bottom:10px;
    }


    .tour-collection-footer{
        margin-top:25px;
    }

    .tour-collection-footer span{
        font-size:6px;
        letter-spacing:1.3px;
    }

    .tour-collection-footer a{
        font-size:6.5px;
        letter-spacing:.7px;
    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media(max-width:390px){

    .tour-collection-header h2{
        font-size:30px;
    }

    .tour-featured-content h3{
        font-size:28px;
    }

    .tour-secondary-content h3{
        font-size:17px;
    }

}


/* ================= EMBEDDED STYLE BLOCK 6 ================= */


/* =========================================================
   PREMIUM TRAVELLER TESTIMONIALS
========================================================= */

.travel-testimonials-section{
    position:relative;
    overflow:hidden;

    padding:115px 24px 105px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(229, 184, 105, .09),
            transparent 27%
        ),
        radial-gradient(
            circle at 88% 78%,
            rgba(36,86,108,.08),
            transparent 30%
        ),
        #f5f2eb;

    color:#173044;
}


/* =========================================================
   DECORATIVE ORBITS
========================================================= */

.travel-testimonials-orbit{
    position:absolute;

    border:1px solid rgba(212, 175, 55, .13);

    border-radius:50%;

    pointer-events:none;
}


.orbit-one{
    width:480px;
    height:480px;

    left:-290px;
    top:-180px;
}


.orbit-two{
    width:390px;
    height:390px;

    right:-230px;
    bottom:-220px;

    border-color:rgba(24,62,82,.08);
}


/* =========================================================
   CONTAINER
========================================================= */

.travel-testimonials-container{
    position:relative;
    z-index:2;

    width:min(1120px,100%);
    margin:0 auto;
}


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

.travel-testimonials-header{
    max-width:720px;

    margin:0 auto 58px;

    text-align:center;
}


.travel-testimonials-eyebrow{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:12px;

    color:#a97a38;

    font-size:10px;
    font-weight:900;

    letter-spacing:3px;
}


.travel-testimonials-eyebrow span{
    width:30px;
    height:1px;

    background:#c59a57;
}


.travel-testimonials-header h2{
    margin:18px 0 15px;

    color:#173044;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:50px;
    line-height:1.04;

    font-weight:500;

    letter-spacing:-1.5px;
}


.travel-testimonials-header h2 em{
    color:#d4af37;

    font-style:italic;
}


.travel-testimonials-header p{
    max-width:620px;

    margin:0 auto;

    color:#71808a;

    font-size:13px;
    line-height:1.8;
}


/* =========================================================
   TESTIMONIAL GRID
========================================================= */

.travel-testimonials-track{
    display:grid;

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

    gap:20px;
}


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

.travel-testimonial-card{
    position:relative;

    min-height:365px;

    padding:35px 32px 29px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fcfbf8 100%
        );

    border:1px solid rgba(25,48,68,.08);

    box-shadow:
        0 22px 60px rgba(23,48,68,.08);

    border-radius:5px;

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


.travel-testimonial-card:hover{
    transform:translateY(-7px);

    box-shadow:
        0 30px 70px rgba(23,48,68,.13);
}


/* =========================================================
   QUOTE
========================================================= */

.travel-testimonial-quote{
    position:absolute;

    top:27px;
    right:30px;

    color:#e3d3b7;

    font-size:32px;

    opacity:.7;
}


/* =========================================================
   STARS
========================================================= */

.travel-testimonial-stars{
    display:flex;

    gap:5px;

    margin-bottom:25px;

    color:#c5964d;

    font-size:11px;
}


.travel-testimonial-stars i{
    width:13px;
}


/* =========================================================
   MESSAGE
========================================================= */

.travel-testimonial-message{
    position:relative;

    min-height:150px;

    padding-right:10px;

    color:#405363;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:17px;

    line-height:1.65;

    font-weight:400;
}


/* =========================================================
   AUTHOR
========================================================= */

.travel-testimonial-author{
    display:flex;

    align-items:center;

    gap:12px;

    padding-top:22px;

    border-top:1px solid #e8e4dc;
}


.travel-testimonial-author img,
.travel-testimonial-avatar{
    width:46px;
    height:46px;

    flex:0 0 46px;

    border-radius:50%;

    object-fit:cover;
}


.travel-testimonial-avatar{
    display:flex;

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

    background:
        linear-gradient(
            135deg,
            #d6ae68,
            #a87837
        );

    color:#fff;

    font-family:Georgia,serif;

    font-size:17px;

    font-weight:600;
}


.travel-testimonial-author-info{
    display:flex;

    flex-direction:column;

    gap:5px;
}


.travel-testimonial-author-info strong{
    color:#173044;

    font-size:12px;

    font-weight:800;
}


.travel-testimonial-author-info span{
    color:#8a949a;

    font-size:9px;

    font-weight:600;
}


.travel-testimonial-author-info span i{
    margin-right:4px;

    color:#b4843c;
}


/* =========================================================
   VERIFIED
========================================================= */

.travel-testimonial-verified{
    position:absolute;

    right:27px;
    bottom:28px;

    display:flex;

    align-items:center;

    gap:5px;

    color:#9b825d;

    font-size:7px;

    font-weight:800;

    letter-spacing:.5px;

    text-transform:uppercase;
}


.travel-testimonial-verified i{
    color:#4d9274;

    font-size:9px;
}


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

.travel-testimonials-bottom{
    display:flex;

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

    gap:15px;

    margin-top:42px;
}


.travel-testimonials-line{
    width:42px;
    height:1px;

    background:#c8a363;
}


.travel-testimonials-bottom span{
    color:#a29785;

    font-size:8px;

    font-weight:900;

    letter-spacing:2px;
}


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

@media(max-width:900px){

    .travel-testimonials-section{
        padding:90px 20px 80px;
    }


    .travel-testimonials-header h2{
        font-size:44px;
    }


    .travel-testimonials-track{
        grid-template-columns:1fr 1fr;
    }


    .travel-testimonial-card:last-child{
        grid-column:1 / -1;
        max-width:calc(50% - 10px);
        width:100%;
        margin:0 auto;
    }

}


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

@media(max-width:600px){

    .travel-testimonials-section{
        padding:72px 14px 65px;
    }


    .travel-testimonials-header{
        margin-bottom:36px;
    }


    .travel-testimonials-eyebrow{
        font-size:7px;
        letter-spacing:2px;
    }


    .travel-testimonials-eyebrow span{
        width:20px;
    }


    .travel-testimonials-header h2{
        margin:15px 0 12px;

        font-size:34px;

        letter-spacing:-.8px;
    }


    .travel-testimonials-header p{
        font-size:10px;

        line-height:1.7;
    }


    .travel-testimonials-track{
        grid-template-columns:1fr;

        gap:14px;
    }


    .travel-testimonial-card,
    .travel-testimonial-card:last-child{
        grid-column:auto;

        max-width:none;

        min-height:auto;

        padding:29px 23px 25px;

        margin:0;
    }


    .travel-testimonial-message{
        min-height:auto;

        margin-bottom:5px;

        font-size:15px;

        line-height:1.6;
    }


    .travel-testimonial-quote{
        top:23px;
        right:22px;

        font-size:27px;
    }


    .travel-testimonial-stars{
        margin-bottom:19px;
    }


    .travel-testimonial-author{
        margin-top:20px;
    }


    .travel-testimonial-verified{
        position:static;

        margin-top:15px;

        justify-content:flex-end;
    }


    .travel-testimonials-bottom{
        margin-top:27px;
    }


    .travel-testimonials-bottom span{
        font-size:5.5px;
        letter-spacing:1.2px;
    }

}



/* ================= EMBEDDED STYLE BLOCK 7 ================= */



.ribaone-footer {
    position: relative;
    overflow: hidden;
    background: #081b2c;
    color: #ffffff;
}

.ribaone-footer-container {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
    padding-left: 25px;
    padding-right: 25px;
}

.ribaone-footer-cta {
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.ribaone-footer-cta
.ribaone-footer-container {
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.ribaone-footer-eyebrow {
    display: block;
    margin-bottom: 14px;
    color: #e5b869;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.ribaone-footer-cta h2 {
    max-width: 650px;
    margin: 0;
    font-size: clamp(32px,4vw,48px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.ribaone-footer-cta h2 span {
    color: #e5b869;
}

.ribaone-footer-cta p {
    margin: 14px 0 0;
    color: rgba(255,255,255,.68);
    font-size: 14px;
    line-height: 1.7;
}

.ribaone-footer-cta-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 16px 22px 16px 25px;
    border-radius: 50px;
    background: #e5b869;
    color: #10283b;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    transition: .25s ease;
}

.ribaone-footer-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 35px rgba(244,180,0,.25);
}

.ribaone-footer-cta-btn span {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
}

.ribaone-footer-main {
    position: relative;
    padding: 82px 0 72px;
    background:
        radial-gradient(circle at 8% 15%, rgba(214,173,99,.07), transparent 24%),
        radial-gradient(circle at 92% 80%, rgba(45,102,123,.08), transparent 28%),
        linear-gradient(180deg,#071a2b 0%,#0a2235 100%);
}

.ribaone-footer-grid-layout {
    display: grid;
    grid-template-columns: 1.55fr 1fr 1fr 1.25fr;
    gap: 58px;
    align-items: start;
}

.ribaone-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
}

.ribaone-footer-logo-mark {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #e5b869;
    color: #081b2c;
    font-size: 21px;
    font-weight: 900;
}

.ribaone-footer-logo-text {
    display: flex;
    flex-direction: column;
}

.ribaone-footer-logo-text strong {
    font-size: 20px;
    letter-spacing: -.5px;
}

.ribaone-footer-logo-text small {
    margin-top: 4px;
    color: #d9b36b;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.ribaone-footer-description {
    max-width: 330px;
    margin: 22px 0 27px;
    color: rgba(255,255,255,.66);
    font-size: 13px;
    line-height: 1.85;
}

.ribaone-footer-social {
    display: flex;
    gap: 9px;
}

.ribaone-footer-social a {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    color: rgba(255,255,255,.7);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: .25s ease;
}

.ribaone-footer-social a:hover {
    background: #e5b869;
    border-color: #e5b869;
    color: #081b2c;
    transform: translateY(-3px);
}

.ribaone-footer-column h4 {
    position: relative;
    margin: 2px 0 25px;
    padding-bottom: 11px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.ribaone-footer-column h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 1px;
    background: #d8ae67;
}

.ribaone-footer-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ribaone-footer-column li {
    margin-bottom: 14px;
}

.ribaone-footer-column li a {
    position: relative;
    color: rgba(255,255,255,.68);
    text-decoration: none;
    font-size: 12px;
    line-height: 1.5;
    transition: .25s ease;
}

.ribaone-footer-column li a:hover {
    color: #e0b56d;
    padding-left: 6px;
}

.ribaone-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 20px;
}

.ribaone-contact-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(216,174,103,.15);
    border-radius: 10px;
    background: rgba(216,174,103,.09);
    color: #d9ae66;
    font-size: 14px;
}

.ribaone-contact-item span {
    display: block;
    margin-bottom: 5px;
    color: rgba(255,255,255,.45);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.ribaone-contact-item a,
.ribaone-contact-item p {
    margin: 0;
    color: rgba(255,255,255,.84);
    font-size: 12px;
    line-height: 1.55;
    text-decoration: none;
}

.ribaone-contact-item a:hover {
    color: #e5b869;
}

.ribaone-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    background: #061625;
}

.ribaone-footer-bottom-inner {
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.ribaone-footer-bottom p {
    margin: 0;
    color: rgba(255,255,255,.46);
    font-size: 11px;
    line-height: 1.5;
}

.ribaone-footer-legal {
    display: flex;
    align-items: center;
    gap: 13px;
}

.ribaone-footer-legal a {
    color: rgba(255,255,255,.48);
    font-size: 11px;
    text-decoration: none;
}

.ribaone-footer-legal a:hover {
    color: #e5b869;
}

.ribaone-footer-legal span {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
}

.ribaone-footer-made {
    display: flex;
    gap: 7px;
    color: rgba(255,255,255,.35);
    font-size: 9px;
}

.ribaone-footer-made b {
    color: #e5b869;
}


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

@media (max-width:1000px) {

    .ribaone-footer-grid-layout {
        grid-template-columns: 1fr 1fr;
        row-gap: 48px;
        gap: 42px;
    }

    .ribaone-footer-brand {
        grid-column: span 2;
    }
}


@media (max-width:700px) {

    .ribaone-footer-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .ribaone-footer-cta
    .ribaone-footer-container {
        padding-top: 55px;
        padding-bottom: 55px;
        flex-direction: column;
        align-items: flex-start;
    }

    .ribaone-footer-cta h2 {
        font-size: 34px;
    }

    .ribaone-footer-main {
        padding: 50px 0;
    }

    .ribaone-footer-grid-layout {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .ribaone-footer-brand {
        grid-column: auto;
    }

    .ribaone-footer-bottom-inner {
        padding: 22px 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .ribaone-footer-made {
        display: none;
    }

    .ribaone-footer-cta-btn {
        width: 100%;
        justify-content: space-between;
    }
}




/* =========================================================
   ARTHIC TOURS & HOLIDAYS - BRAND ADDITIONS & ENHANCEMENTS
========================================================= */

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

:root {
    --brand-navy-deep: #061625;
    --brand-navy-card: #0b2035;
    --brand-navy-border: rgba(229, 184, 105, 0.22);
    --brand-gold: #e5b869;
    --brand-gold-glow: rgba(229, 184, 105, 0.35);
    --brand-teal: #00b4d8;
    --brand-teal-light: #48cae4;
}

body {
    font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #061625;
    color: #e2e8f0;
}

h1, h2, h3, .solar-slide-content h1, .premium-destinations-top h2, .tour-collection-header h2 {
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    letter-spacing: -0.5px;
}

/* Ensure Logo displays crisply */
.solar-main-logo img, .solar-mobile-menu-header img, .ribaone-footer-logo img {
    height: auto;
    max-height: 52px;
    width: auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    .solar-main-logo img, .solar-mobile-menu-header img, .ribaone-footer-logo img {
        max-height: 42px;
    }
}

/* Package Pricing Badges */
.tour-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 16px 0;
    padding: 12px;
    background: rgba(6, 22, 37, 0.75);
    border: 1px solid rgba(229, 184, 105, 0.25);
    border-radius: 12px;
}

.tour-pricing-item {
    text-align: center;
    padding: 4px 6px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.tour-pricing-item:last-child {
    border-right: none;
}

.tour-pricing-label {
    display: block;
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.tour-pricing-val {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #e5b869;
}

.tour-pricing-val small {
    font-size: 9px;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.55);
}

/* Package Inclusions Pills */
.tour-inclusions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 16px;
}

.tour-inclusion-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 3px 8px;
    border-radius: 20px;
}

.tour-inclusion-pill i {
    color: #00b4d8;
    font-size: 10px;
}

/* Interactive Itinerary Modal */
.itinerary-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(3, 11, 20, 0.85);
    backdrop-filter: blur(8px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.itinerary-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.itinerary-modal-card {
    background: #091c2e;
    border: 1px solid rgba(229, 184, 105, 0.35);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(229, 184, 105, 0.1);
    border-radius: 20px;
    max-width: 820px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    color: #f1f5f9;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.itinerary-modal-overlay.active .itinerary-modal-card {
    transform: translateY(0);
}

.itinerary-modal-header {
    position: relative;
    height: 240px;
    overflow: hidden;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.itinerary-modal-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.itinerary-modal-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 22, 37, 0.3) 0%, rgba(9, 28, 46, 0.95) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
}

.itinerary-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(6, 22, 37, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
    z-index: 10;
}

.itinerary-modal-close:hover {
    background: #e5b869;
    color: #061625;
}

.itinerary-modal-body {
    padding: 28px;
}

.itinerary-days-container {
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.itinerary-day-box {
    display: flex;
    gap: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
    transition: border-color 0.2s ease;
}

.itinerary-day-box:hover {
    border-color: rgba(229, 184, 105, 0.35);
}

.itinerary-day-badge {
    flex: 0 0 54px;
    height: 54px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e5b869, #b88d3e);
    color: #061625;
    font-weight: 800;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    font-size: 11px;
    text-transform: uppercase;
}

.itinerary-day-badge span {
    font-size: 18px;
}

.itinerary-day-content h4 {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}

.itinerary-day-content p {
    margin: 0;
    color: #94a3b8;
    font-size: 13.5px;
    line-height: 1.6;
}

/* Pricing Section in Modal */
.itinerary-modal-pricing-box {
    background: rgba(6, 22, 37, 0.85);
    border: 1px solid rgba(229, 184, 105, 0.3);
    border-radius: 14px;
    padding: 18px;
    margin: 20px 0;
}

.itinerary-modal-actions {
    display: flex;
    gap: 14px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.itinerary-btn-whatsapp {
    flex: 1;
    min-width: 220px;
    background: #25d366;
    color: #ffffff;
    padding: 14px 22px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.itinerary-btn-whatsapp:hover {
    background: #20ba59;
    transform: translateY(-2px);
    color: #fff;
}

.itinerary-btn-enquire {
    flex: 1;
    min-width: 220px;
    background: linear-gradient(135deg, #e5b869, #d4af37);
    color: #061625;
    padding: 14px 22px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.itinerary-btn-enquire:hover {
    opacity: 0.95;
    transform: translateY(-2px);
    color: #061625;
}

/* Comparison Pricing Table Section */
.packages-table-section {
    padding: 80px 24px 70px;
    background: #040f1a;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.packages-table-container {
    max-width: 1240px;
    margin: 0 auto;
}

.table-header-block {
    text-align: center;
    margin-bottom: 40px;
}

.table-header-block .section-eyebrow {
    color: #e5b869;
    font-size: 10px;
    letter-spacing: 3px;
    font-weight: 800;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.table-header-block .section-eyebrow::before,
.table-header-block .section-eyebrow::after {
    content: '';
    width: 30px;
    height: 1px;
    background: #e5b869;
}

.table-header-block h2 {
    color: #fff;
    font-size: 36px;
    margin: 12px 0 8px;
    font-weight: 800;
}

.table-header-block p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    max-width: 650px;
    margin: 0 auto;
}

.table-responsive-wrap {
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid rgba(229, 184, 105, 0.25);
    background: rgba(6, 22, 37, 0.6);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.packages-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 780px;
    text-align: left;
}

.packages-table th {
    background: #0b2035;
    padding: 16px 20px;
    color: #e5b869;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(229, 184, 105, 0.25);
}

.packages-table td {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
    font-size: 14px;
    vertical-align: middle;
}

.packages-table tr:hover td {
    background: rgba(229, 184, 105, 0.05);
}

.destination-cell {
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 700;
    color: #ffffff;
}

.destination-cell img {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.price-cell {
    font-weight: 700;
    color: #e5b869;
    font-size: 15px;
}

.price-disclaimer-box {
    margin-top: 24px;
    padding: 18px 22px;
    background: rgba(229, 184, 105, 0.06);
    border: 1px solid rgba(229, 184, 105, 0.2);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12.5px;
    line-height: 1.6;
    text-align: center;
}

.price-disclaimer-box i {
    color: #e5b869;
    margin-right: 6px;
}

/* Floating Action Contact CTAs */
.floating-contact-bar {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
}

.floating-action-btn {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
}

.floating-action-btn:hover {
    transform: scale(1.1);
    color: #fff;
}

.floating-whatsapp {
    background: #25d366;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.35);
}

.floating-call {
    background: #00b4d8;
    box-shadow: 0 8px 25px rgba(0, 180, 216, 0.35);
}

/* Form success message toast */
.form-toast {
    display: none;
    padding: 14px 18px;
    border-radius: 10px;
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.5;
    animation: fadeIn 0.3s ease;
}

.form-toast.success {
    display: block;
    background: rgba(37, 211, 102, 0.15);
    border: 1px solid #25d366;
    color: #25d366;
}

.form-toast.error {
    display: block;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid #ef4444;
    color: #f87171;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}


/* =========================================================
   OFFICIAL ARTHIC CIRCULAR EMBLEM & LOGO STYLING
========================================================= */
.solar-main-logo, .solar-mobile-menu-header .solar-main-logo, .ribaone-footer-logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    text-decoration: none !important;
}

.solar-main-logo img, .solar-mobile-menu-header img, .ribaone-footer-logo img {
    height: 64px !important;
    width: 64px !important;
    max-height: 64px !important;
    max-width: 64px !important;
    min-width: 64px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 10px rgba(229, 184, 105, 0.25)) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.solar-main-logo:hover img {
    transform: scale(1.06) rotate(2deg) !important;
}

.solar-main-logo .brand-text-wrap, .ribaone-footer-logo .brand-text-wrap {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.15 !important;
}

.solar-main-logo .brand-title, .ribaone-footer-logo .brand-title {
    font-family: 'Cinzel', Georgia, 'Plus Jakarta Sans', serif !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: 3.5px !important;
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}

.solar-main-logo .brand-subtitle, .ribaone-footer-logo .brand-subtitle {
    font-family: 'Plus Jakarta Sans', Inter, sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: 2.8px !important;
    color: #e5b869 !important;
    text-transform: uppercase !important;
}

@media (max-width: 768px) {
    .solar-main-logo img, .solar-mobile-menu-header img, .ribaone-footer-logo img {
        height: 52px !important;
        width: 52px !important;
        max-height: 52px !important;
        max-width: 52px !important;
        min-width: 52px !important;
    }
    .solar-main-logo .brand-title {
        font-size: 18px !important;
        letter-spacing: 2.5px !important;
    }
    .solar-main-logo .brand-subtitle {
        font-size: 8.5px !important;
        letter-spacing: 2px !important;
    }
}


/* =========================================================
   TRAVEL SERVICES & CATEGORY FILTER TABS
========================================================= */
.travel-services-section {
    padding: 95px 24px 85px;
    background: #040e19;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 35px;
}

@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

.service-card {
    background: rgba(11, 32, 53, 0.65);
    border: 1px solid rgba(229, 184, 105, 0.22);
    border-radius: 16px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.service-card:hover {
    transform: translateY(-5px);
    border-color: rgba(229, 184, 105, 0.55);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 25px rgba(229, 184, 105, 0.12);
}

.service-icon-box {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(229, 184, 105, 0.2), rgba(0, 180, 216, 0.2));
    border: 1px solid rgba(229, 184, 105, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e5b869;
    font-size: 22px;
    margin-bottom: 18px;
    transition: transform 0.3s ease;
}

.service-card:hover .service-icon-box {
    transform: scale(1.1) rotate(5deg);
    color: #00b4d8;
    border-color: #00b4d8;
}

.service-card h3 {
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 10px;
}

.service-card p {
    color: #94a3b8;
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0 0 20px;
    flex-grow: 1;
}

.service-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #e5b869;
    font-size: 13px;
    font-weight: 700;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease, gap 0.2s ease;
}

.service-btn:hover {
    color: #00b4d8;
    gap: 12px;
}

/* Category Filter Tabs */
.destination-filter-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 28px 0 24px;
}

.filter-tab-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.filter-tab-btn:hover {
    background: rgba(229, 184, 105, 0.12);
    border-color: rgba(229, 184, 105, 0.4);
    color: #ffffff;
}

.filter-tab-btn.active {
    background: linear-gradient(135deg, #e5b869, #b88d3e);
    color: #061625;
    border-color: #e5b869;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(229, 184, 105, 0.3);
}

.premium-destination.filtered-out,
.tour-secondary-package.filtered-out {
    display: none !important;
}