/* =========================================================
   ROBOTO SLAB - HEADINGS
========================================================= */

@font-face {
    font-family: 'Roboto Slab';
    src: url('../fonts/RobotoSlab-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Slab';
    src: url('../fonts/RobotoSlab-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   ROBOTO - BODY
========================================================= */

@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
/* ========================================
   GLOBAL
======================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.5;
}


/* Paragraphs inherit Roboto from body */
p {
    font-family: inherit;
    font-weight: 400;
}

h1 {
    font-family: 'Roboto Slab', serif;
    font-size: 68px;
    font-weight: 800;
    line-height: 1.1;
}

h2 {
    font-family: 'Roboto Slab', serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.15;
}

/* =========================================================
   MAIN CONTENT PARAGRAPH TYPOGRAPHY
   About + Hero + Why Choose Us
========================================================= */

.about-content p,
.hero-content p,
.why-choose-content p {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.5;
}

/* Tablet */
@media (max-width: 1100px) {
    .about-content p,
    .hero-content p,
    .why-choose-content p {
        font-size: 22px;
    }
}


/* Mobile */
@media (max-width: 767px) {
    .about-content p,
    .hero-content p,
    .why-choose-content p {
        font-size: 18px;
    }
}


/* Small Mobile */
@media (max-width: 480px) {
    .about-content p,
    .hero-content p,
    .why-choose-content p {
        font-size: 16px;
    }
}

/* Tablet */
@media (max-width: 1100px) {
    h1 {
        font-size: 56px;
    }

    h2 {
        font-family: 'Roboto Slab', serif;
        font-size: 42px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    h1 {
        font-size: 42px;
    }

    h2 {
        font-family: 'Roboto Slab', serif;
        font-size: 34px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    h1 {
        font-size: 36px;
    }

    h2 {
        font-family: 'Roboto Slab', serif;
        font-size: 30px;
    }
}

h3,
h4,
h5,
h6 {
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a,
button,
input,
textarea,
select,
label {
    font-family: 'Roboto', sans-serif;
}


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

.site-header {
    position: absolute;
    top: 22px;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 0 5%;
}

.header-container {
    width: 100%;
    max-width: 1400px;
    min-height: 64px;

    margin: 0 auto;
    padding: 7px 14px 7px 20px;

    display: flex;
    align-items: center;

    background: rgba(205, 197, 202, 0.838);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border-radius: 18px;
}


/* Logo */

.site-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-logo img {
    width: 130px;
    height: auto;
    display: block;
}


/* Navigation */

.main-navigation {
    margin-left: auto;
}

.main-navigation ul {
    display: flex;
    align-items: center;
    gap: clamp(22px, 2.2vw, 42px);

    margin: 0;
    padding: 0;

    list-style: none;
}

.main-navigation a {
    position: relative;
    display: block;

    color: #111111;
    font-size: 13px;
    font-weight: 700;

    text-decoration: none;
    text-transform: uppercase;

    transition: color 0.3s ease;
}

.main-navigation a:hover {
    color: #E82D91;
}


/* Phone */

.header-phone {
    margin-left: 30px;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 9px 15px;

    border: 1px solid rgba(0, 0, 0, 0.45);
    border-radius: 20px;

    color: #111;
    font-size: 13px;
    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;
}

.header-phone .phone-icon {
    width: 18px;
    height: 18px;

    display: block;

    object-fit: contain;
}

/* Hamburger */

.menu-toggle {
    display: none;

    width: 42px;
    height: 42px;

    margin-left: auto;

    border: 0;
    background: transparent;

    cursor: pointer;
}

.menu-toggle span {
    display: block;

    width: 25px;
    height: 2px;

    margin: 5px auto;

    background: #111;

    transition: 0.3s ease;
}


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

.hero-slider {
    position: relative;

    width: 100%;
    min-height: 720px;
    height: 100vh;

    max-height: 900px;

    overflow: hidden;

    color: #fff;
}


/* Backgrounds */

.hero-backgrounds,
.hero-bg,
.hero-overlay {
    position: absolute;
    inset: 0;
}

.hero-bg {
    background-size: cover;
    background-position: center;

    opacity: 0;

    transform: scale(1.03);

    transition:
        opacity 0.8s ease,
        transform 5s ease;
}

.hero-bg.active {
    opacity: 1;
    transform: scale(1);
}


/* Overlay */

.hero-overlay {
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.70) 0%,
            rgba(0, 0, 0, 0.47) 48%,
            rgba(0, 0, 0, 0.22) 100%
        );
}


/* Main container */

.hero-container {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 1400px;
    height: 100%;

    margin: 0 auto;

    padding-top: 180px;
}

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

.hero-content {
    position: relative;
    z-index: 4;

    /* Allow heading and paragraph to use more horizontal space */
    width: 100%;
    max-width: 1200px;
}


/* HERO H1 */
.hero-content h1 {
    width: 100%;
    max-width: 1150px;

    margin: 0 0 32px;

    font-family: 'Roboto Slab', serif;
    font-size: 68px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1px;

    color: #ffffff;
}


/* HERO PARAGRAPH */
.hero-content p {
    width: 100%;
    max-width: 1100px;

    margin: 0;

    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.55;

    color: #ffffff;
}

/* ========================================
   WATERMARK
======================================== */

.hero-watermark {
    position: absolute;

    left: 0;
    bottom: 55px;

    z-index: 1;

    white-space: nowrap;

    font-family: 'Stardom', serif;

    font-size: clamp(80px, 10vw, 165px);
    line-height: 1;

    font-weight: 700;

    color: transparent;

    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.24);

    opacity: 0.65;

    pointer-events: none;
    user-select: none;
}


/* ========================================
   PREVIEW CARDS
======================================== */

.hero-previews {
    position: absolute;

    right: 0;
    bottom: 42px;

    z-index: 5;

    display: flex;
    align-items: flex-end;
    gap: 14px;
}

.hero-preview {
    width: clamp(120px, 13vw, 185px);
    height: clamp(175px, 20vw, 270px);

    padding: 0;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 16px;

    background: transparent;

    cursor: pointer;

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

.hero-preview:hover {
    transform: translateY(-7px);
}

.hero-preview img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


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

.hero-controls {
    position: absolute;

    left: 90px;
    bottom: 25px;

    z-index: 6;

    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==============================
   Hero Slider Arrows
================================ */

.hero-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    padding: 0;

    /* Remove outer circle */
    border: none;
    border-radius: 0;

    background: transparent;

    cursor: pointer;
    transition: 0.25s ease;
}


.hero-arrow img {
    display: block;

    width: 30px;
    height: 30px;

    object-fit: contain;

    /* Make icon white */
    filter: brightness(0) invert(1);

    /* Reduce white intensity */
    opacity: 0.55;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


/* Hover */
.hero-arrow:hover {
    background: transparent;
}


/* Small hover effect */
.hero-arrow:hover img {
    transform: scale(1.1);
}


/* Decorative lines */

.hero-controls::before,
.hero-controls::after {
    content: "";

    display: block;

    width: 80px;
    height: 1px;

    background: rgba(255, 255, 255, 0.45);
}


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

@media (max-width: 1100px) {

    .site-header {
        padding: 0 4%;
    }

    .header-container {
        min-height: 62px;
    }

    .main-navigation,
    .header-phone {
        display: none;
    }

    .menu-toggle {
        display: block;
    }


    /* Open menu */

    .main-navigation.active {
        display: block;

        position: absolute;

        top: calc(100% + 10px);
        left: 4%;
        right: 4%;

        padding: 25px;

        background: rgba(255, 255, 255, 0.97);

        border-radius: 15px;
    }

    .main-navigation.active ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }


    .hero-slider {
        min-height: 760px;
    }

    .hero-container {
        width: 92%;
        padding-top: 160px;
    }

    .hero-content {
        width: 85%;
    }

    .hero-previews {
        right: 0;
    }

    .hero-preview {
        width: 145px;
        height: 205px;
    }

    .hero-watermark {
        bottom: 65px;
    }

    .hero-controls {
        left: 0;
    }
}


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

@media (max-width: 767px) {

    .site-header {
        top: 12px;
        padding: 0 16px;
    }

    .header-container {
        min-height: 58px;
        padding: 6px 10px 6px 15px;

        border-radius: 14px;
    }

    .site-logo img {
        width: 78px;
    }


    .hero-slider {
        height: auto;
        min-height: 760px;
    }

    .hero-container {
        width: auto;
        height: 760px;

        margin: 0 20px;

        padding-top: 135px;
    }


    /* Text */

    .hero-content {
        width: 100%;
    }

    .hero-content h1 {
        max-width: 520px;

        font-size: clamp(38px, 11vw, 55px);
        line-height: 1.05;
    }

    .hero-content p {
        max-width: 520px;

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


    /* Preview cards */

    .hero-previews {
        left: 0;
        right: auto;
        bottom: 85px;

        width: 100%;

        gap: 10px;
    }

    .hero-preview {
        flex: 1;

        width: auto;
        height: 165px;

        border-radius: 12px;
    }


    /* Watermark */

    .hero-watermark {
        left: -5px;
        bottom: 245px;

        font-size: 70px;

        opacity: 0.45;
    }


    /* Controls */

    .hero-controls {
        left: 0;
        bottom: 30px;
    }

    .hero-controls::before,
    .hero-controls::after {
        width: 45px;
    }

}


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

@media (max-width: 480px) {

    .hero-slider {
        min-height: 720px;
    }

    .hero-container {
        height: 720px;
        margin: 0 16px;
    }

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

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

    .hero-preview {
        height: 145px;
    }

    .hero-watermark {
        font-size: 58px;
    }

}

/* ========================================
   HOME ABOUT SECTION
======================================== */

.home-about {
    position: relative;
    width: 100%;
    min-height: 650px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #f4f7f8;
}


/* ========================================
   BACKGROUND IMAGE
======================================== */

.about-bg {
    position: absolute;
    inset: 0;

    background-image: url('../images/about-bg.webp');
    background-size: cover;
    background-position: center;

    z-index: 0;
}


/* White faded layer */

.about-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(247, 251, 252, 0.94) 0%,
            rgba(247, 251, 252, 0.88) 43%,
            rgba(247, 251, 252, 0.68) 67%,
            rgba(247, 251, 252, 0.48) 100%
        );
}


/* ========================================
   CONTAINER
======================================== */
.about-container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 90px 0;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
    gap: clamp(60px, 7vw, 110px);
    align-items: start;
}

.about-content {
    margin-top: 0;
    align-self: start;
}

.about-images {
    margin-top: 0;
    align-self: start;
    transform: none;
}
/* ========================================
   LEFT CONTENT
======================================== */

.about-content {
    max-width: 680px;
}


/* Small ABOUT US title */

.section-label {
    margin-bottom: 20px;

    display: flex;
    align-items: center;
    gap: 12px;

    color: #676767;

    font-family: 'Ranade', sans-serif;
    font-size: 14px;
    font-weight: 500;

    text-transform: uppercase;
}

.section-label-line {
    display: block;

    width: 20px;
    height: 1px;

    background: #777;
}


/* Heading */

.about-content h2 {
    max-width: 650px;

    margin: 0 0 24px;

    color: #111;

    font-family: 'Roboto Slab', serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.08;

    letter-spacing: -0.5px;
}


/* Paragraph */

.about-content p {
    max-width: 650px;

    margin: 0 0 30px;

    color: #242424;

    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.65;
}


/* ========================================
   VIEW MORE BUTTON
======================================== */

.about-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 140px;

    padding: 13px 25px;

    background: #693296;

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

    color: #fff;

    font-family: 'Ranade', sans-serif;
    font-size: 13px;
    font-weight: 600;

    text-decoration: none;
    text-transform: uppercase;

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

.about-button:hover {
    background: #E82D91;
    border-color: #E82D91;

    color: #fff;

    transform: translateY(-2px);
}


/* ========================================
   RIGHT IMAGE GALLERY
======================================== */

.about-gallery-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* White tilted strip */

.about-gallery {
    width: min(100%, 370px);

    padding: 17px;

    display: flex;
    flex-direction: column;
    gap: 14px;

    background: #fff;

    transform: rotate(7deg);

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

    transition: transform 0.4s ease;
}


/* Individual image */

.about-gallery-item {
    position: relative;

    width: 100%;
    aspect-ratio: 1.7 / 1;

    overflow: hidden;

    background: #eee;
}

.about-gallery-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.about-gallery-item:hover img {
    transform: scale(1.05);
}


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

@media (min-width: 1400px) {

    .home-about {
        min-height: 700px;
    }

    .about-container {
        padding: 95px 0;
    }

}


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

@media (max-width: 1100px) {

    .home-about {
        min-height: auto;
    }

    .about-container {
        width: 92%;

        padding: 75px 0;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(260px, 0.65fr);

        gap: 55px;
    }

    .about-content h2 {
        font-size: clamp(36px, 4.5vw, 48px);
    }

    .about-content p {
        font-size: 16px;
    }

    .about-gallery {
        width: 300px;
        padding: 14px;
        gap: 11px;

        transform: rotate(5deg);
    }

}


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

/* =========================================
   ABOUT PAGE - MOBILE CONTENT ORDER
========================================= */

@media (max-width: 767px) {

    .about-container {
        display: flex;
        flex-direction: column;
        gap: 30px;

        width: auto;
        margin-left: 16px;
        margin-right: 16px;
    }

    /* Text first */
    .about-content {
        order: 1;
        width: 100%;
    }

    /* Image/gallery second */
    .about-images,
    .about-gallery-wrapper {
        order: 2;
        width: 100%;
    }

    .about-content h2 {
        margin-top: 0;
        margin-bottom: 16px;

        font-size: 34px;
        line-height: 1.2;
    }

    .about-content p {
        font-size: 16px;
        line-height: 1.6;
    }

    .about-images img,
    .about-gallery-wrapper img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 380px;
        object-fit: cover;
    }
}

/* Gallery - mobile only */
@media (max-width: 767px) {

    .about-gallery-wrapper {
        width: 100%;
        padding: 10px 25px 15px;
    }

    .about-gallery {
        width: min(100%, 350px);
        margin: 0 auto;
        padding: 13px;
        gap: 10px;
        transform: rotate(3deg);
    }
}




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

@media (max-width: 480px) {

    .about-container {
        margin: 0 16px;
        padding: 55px 0 65px;

        gap: 40px;
    }

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

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

    .about-button {
        min-width: 130px;

        padding: 12px 21px;

        font-size: 12px;
    }

    .about-gallery-wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }

    .about-gallery {
        transform: rotate(2.5deg);
    }

}

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

.why-choose {
    position: relative;
    width: 100%;
    min-height: 760px;
    overflow: hidden;
    color: #ffffff;
    background: #693296;
}

/* ========================================
   WHY CHOOSE - BACKGROUND IMAGE
======================================== */

.why-choose-bg {
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image: url('../images/why-bg.webp');

    /* Fill complete section */
    background-size: cover;

    /* Show important part of image on LEFT */
    background-position: left center;

    background-repeat: no-repeat;
}


/* ========================================
   PURPLE GRADIENT OVERLAY
======================================== */

.why-choose-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(
        90deg,

        /* LEFT - image clearly visible */
        rgba(105, 50, 150, 0.10) 0%,

        /* Start adding purple */
        rgba(105, 50, 150, 0.25) 25%,

        /* CENTER */
        rgba(105, 50, 150, 0.60) 50%,

        /* RIGHT - strong purple */
        rgba(105, 50, 150, 0.90) 70%,

        /* FAR RIGHT - full purple */
        #693296 100%
    );
}
/* =========================================================
   MAIN CONTAINER
========================================================= */

.why-choose-container {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 1400px;

    margin: 0 auto;
    padding: 0px 0 48px;
}


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

.why-choose-top {
    width: 100%;

    display: flex;
    justify-content: flex-end;
    min-height: 600px;

    padding-top: 0px;

    margin-bottom: 35px;
}

/* White content panel */

.why-choose-content {
    width: 75%;
    max-width: 780px;
    min-height: 450px;

    padding: 48px 55px 52px;

    background: #ffffff;
    color: #111111;

    border-radius: 0 0 0 90px;
}


/* Small label */

.why-label {
    margin-bottom: 16px;
    color: #666666;
}

.why-label .section-label-line {
    background: #777777;
}


/* Heading */

.why-choose-content h2 {
    max-width: 520px;

    margin: 0 0 20px;

    color: #111111;

    font-family: 'Roboto Slab', serif;
    font-size: clamp(36px, 3.3vw, 52px);
    font-weight: 600;
    line-height: 1.08;

    letter-spacing: -0.5px;
}


/* Paragraph */

.why-choose-content p {
    max-width: 100%;

    margin: 0 0 15px;

    color: #242424;

    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
}


/* Button */

.why-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 120px;

    margin-top: 5px;
    padding: 10px 21px;

    border: 1px solid #693296;
    border-radius: 18px;

    background: #693296;

    color: #ffffff;

    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;

    text-decoration: none;
    text-transform: uppercase;

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.why-button:hover {
    background: #E82D91;
    border-color: #E82D91;

    transform: translateY(-2px);
}


/* =========================================================
   BENEFIT CARDS
========================================================= */

.why-benefits {
    width: 100%;

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

    gap: 14px;

    margin-bottom: 26px;
}


/* Card */

.why-card {
    min-width: 0;
    min-height: 150px;

    padding: 20px 12px 17px;

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

    background: #ffffff;

    border-radius: 9px;

    text-align: center;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}


/* =========================================================
   CARD ICONS
========================================================= */

.why-card-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

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

    margin-bottom: 10px;

    border-radius: 50%;
}


.why-card-icon-img {
    display: block;

    width: 23px;
    height: 23px;

    object-fit: contain;

    filter: brightness(0) invert(1);
}


/* Icon backgrounds */

.icon-blue {
    background: #55B9DB;
}

.icon-green {
    background: #5ECF75;
}

.icon-pink {
    background: #EE4E9C;
}

.icon-purple {
    background: #693296;
}

.icon-gray {
    background: #858585;
}


/* =========================================================
   CARD TITLES
========================================================= */

.why-card h3 {
    min-height: 38px;

    margin: 0;

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

    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;

    text-align: center;
    color: #4A2168;
}


.why-card:nth-child(1) h3 {
    color: #01546f;
}

.why-card:nth-child(2) h3 {
    color: #016d17;
}

.why-card:nth-child(3) h3 {
    color: #6d0135;
}

.why-card:nth-child(4) h3 {
    color: #693296;
}

.why-card:nth-child(5) h3 {
    color: #666666;
}


/* Small line inside cards */

.why-card-line {
    display: block;

    width: 24px;
    height: 1px;

    margin-top: 9px;

    background: #bdbdbd;
}


/* =========================================================
   BOTTOM FEATURES
========================================================= */

.why-features {
    width: 100%;

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

    column-gap: 70px;
    row-gap: 16px;

    padding: 0 38px;
}


/* Individual feature */

.why-feature {
    position: relative;

    min-height: 50px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 4px 0 11px;
}


/* Third item centered like reference */

.why-feature:nth-child(3) {
    grid-column: 1 / -1;

    width: calc(50% - 35px);

    justify-self: center;
}


/* Line below feature */

.why-feature::after {
    content: "";

    position: absolute;

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

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.10) 0%,
            rgba(255,255,255,0.55) 25%,
            rgba(255,255,255,0.55) 75%,
            rgba(255,255,255,0.10) 100%
        );
}


/* Feature circle */

.why-feature-icon {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

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

    border-radius: 50%;

    background: #ffffff;
}


.why-feature-icon-img {
    display: block;

    width: 22px;
    height: 22px;

    object-fit: contain;

    filter:
        brightness(0)
        saturate(100%)
        invert(25%)
        sepia(30%)
        saturate(2934%)
        hue-rotate(245deg)
        brightness(82%)
        contrast(92%);
}


/* Feature text */

.why-feature-text {
    min-width: 0;
}


.why-feature-text h4 {
    margin: 0 0 1px;

    color: #ffffff;

    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}


.why-feature-text p {
    margin: 0;

    color: rgba(255,255,255,0.88);

    font-family: 'Roboto', sans-serif;
    font-size: 9px;
    font-weight: 400;
    line-height: 1.25;
}


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

@media (max-width: 1100px) {

    .why-choose {
        min-height: auto;
    }

    .why-choose-container {
        width: 92%;
        padding: 55px 0;
    }

    .why-choose-top {
        margin-bottom: 40px;
    }

    .why-choose-content {
        width: 62%;
        max-width: 620px;

        padding: 38px 40px;

        border-radius: 0 0 0 70px;
    }

    .why-choose-content h2 {
        font-size: clamp(34px, 4.5vw, 45px);
    }

    .why-choose-content p {
        font-size: 13px;
    }


    /* 3 cards + 2 cards */

    .why-benefits {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 14px;

        margin-bottom: 35px;
    }

    .why-card {
        min-height: 155px;
    }


    /* Bottom features */

    .why-features {
        padding: 0 20px;

        column-gap: 40px;
    }

    .why-feature:nth-child(3) {
        width: calc(50% - 20px);
    }
}


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

@media (max-width: 850px) {

    .why-choose-content {
        width: 72%;
    }

}


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

@media (max-width: 767px) {

    .why-choose {
        min-height: auto;
    }


    /* Background */

    .why-choose-bg {
        background-position: center center;
    }

    .why-choose-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(91,35,139,0.72) 0%,
                rgba(105,50,150,0.82) 50%,
                rgba(105,50,150,0.90) 100%
            );
    }


    /* Container */

    .why-choose-container {
        width: auto;

        margin: 0 20px;
        padding: 45px 0 50px;
    }


    /* Content panel */

    .why-choose-top {
        display: block;

        margin-bottom: 32px;
    }

    .why-choose-content {
        width: 100%;
        max-width: none;

        padding: 32px 24px 36px;

        border-radius: 0 0 0 52px;
    }

    .why-choose-content h2 {
        max-width: 500px;

        font-size: clamp(32px, 9vw, 40px);
    }

    .why-choose-content p {
        font-size: 14px;
        line-height: 1.55;
    }


    /* Cards */

    .why-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 12px;

        margin-bottom: 35px;
    }

    .why-card {
        min-height: 145px;

        padding: 18px 10px 15px;
    }

    .why-card:last-child {
        grid-column: 1 / -1;

        width: calc(50% - 6px);

        justify-self: center;
    }


    /* Bottom features */

    .why-features {
        width: 100%;

        padding: 0;

        grid-template-columns: 1fr;

        gap: 14px;
    }

    .why-feature,
    .why-feature:nth-child(3) {
        width: 100%;

        grid-column: auto;
    }
}


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

@media (max-width: 480px) {

    .why-choose-container {
        margin: 0 16px;

        padding: 38px 0 45px;
    }

    .why-choose-content {
        padding: 28px 20px 32px;

        border-radius: 0 0 0 42px;
    }

    .why-choose-content h2 {
        font-size: 31px;
    }

    .why-choose-content p {
        font-size: 13px;
    }


    /* Cards one per row */

    .why-benefits {
        grid-template-columns: 1fr;
    }

    .why-card,
    .why-card:last-child {
        width: 100%;

        min-height: 135px;

        grid-column: auto;
    }


    .why-feature-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }

    .why-feature-icon-img {
        width: 20px;
        height: 20px;
    }

    .why-feature-text h4 {
        font-size: 13px;
    }
}
/* =========================================================
   RENTAL SERVICES
========================================================= */

.rental-services {
    width: 100%;
    padding: 100px 0;
    background: #f7f3fa;
}

.rental-services-container {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
}


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

.rental-services-content {
    width: 100%;
    margin-bottom: 55px;
}


/* Small OUR SERVICES label */

.rental-services-label {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 16px;

    color: #666666;

    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;

    text-transform: uppercase;
}

.rental-services-label span {
    display: block;

    width: 20px;
    height: 1px;

    background: #777777;
}


/* Main heading */

.rental-services-content h2 {
    width: 100%;
    max-width: 1000px;

    margin: 0 0 24px;

    color: #111111;

    font-family: 'Stardom', serif;
    font-size: clamp(40px, 4vw, 58px);
    font-weight: 400;
    line-height: 1.08;
}


/* Paragraph - full width */

.rental-services-content p {
    width: 100%;
    max-width: none;

    margin: 0 0 28px;

    color: #242424;

    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
}


/* Button */

.rental-services-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 140px;
    padding: 13px 25px;

    background: #693296;

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

    color: #ffffff;

    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;

    text-decoration: none;

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.rental-services-btn:hover {
    background: #E82D91;
    border-color: #E82D91;

    transform: translateY(-2px);
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.rental-services-grid {
    width: 100%;

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

    gap: 24px;
}


/* Individual card */

.rental-service-card {
    position: relative;

    width: 100%;
    aspect-ratio: 1 / 1.05;

    overflow: hidden;

    background: #ffffff;

    border: 6px solid #ffffff;
    border-radius: 20px;
}

.rental-service-card img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;
}

.rental-service-card:hover img {
    transform: scale(1.04);
}


/* Card title */

.rental-service-overlay {
    position: absolute;

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

    padding: 55px 15px 17px;

    background: linear-gradient(
        to top,
        rgba(255,255,255,0.96) 0%,
        rgba(255,255,255,0.70) 40%,
        rgba(255,255,255,0) 100%
    );

    text-align: center;
}

.rental-service-overlay h3 {
    margin: 0;

    color: #111111;

    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

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

@media (max-width: 1100px) {

    .rental-services {
        padding: 80px 0;
    }

    .rental-services-container {
        width: 92%;
    }

    .rental-services-content {
        margin-bottom: 45px;
    }

    .rental-services-content h2 {
        max-width: 700px;

        font-size: clamp(36px, 5vw, 48px);
    }

    .rental-services-content p {
        font-size: 15px;
        line-height: 1.7;
    }

    .rental-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 20px;
    }

    .rental-service-card {
        aspect-ratio: 4 / 3;
    }
}


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

@media (max-width: 767px) {

    .rental-services {
        padding: 65px 0;
    }

    .rental-services-container {
        width: auto;

        margin-left: 20px;
        margin-right: 20px;
    }

    .rental-services-content {
        margin-bottom: 38px;
    }

    .rental-services-label {
        margin-bottom: 14px;

        font-size: 12px;
    }

    .rental-services-content h2 {
        max-width: none;

        margin-bottom: 20px;

        font-size: clamp(34px, 10vw, 44px);
        line-height: 1.08;
    }

    .rental-services-content p {
        margin-bottom: 24px;

        font-size: 15px;
        line-height: 1.65;
    }

    .rental-services-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .rental-service-card {
        aspect-ratio: 4 / 3;

        border-width: 5px;
        border-radius: 16px;
    }
}


/* =========================================================
   SERVICES - SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .rental-services-container {
        margin-left: 16px;
        margin-right: 16px;
    }

    .rental-services {
        padding: 55px 0;
    }

    .rental-services-content h2 {
        font-size: 34px;
    }

    .rental-services-content p {
        font-size: 14px;
    }

} /* IMPORTANT: closes Services mobile media query */


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

.booking-cta {
    width: 100%;
    padding: 100px 0;
    background: #ffffff;
}

.booking-cta-container {
    position: relative;

    width: 90%;
    max-width: 1400px;
    min-height: 520px;

    margin: 0 auto;

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

    overflow: hidden;

    border-radius: 20px;
}

/* CTA BACKGROUND IMAGE */

.booking-cta-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;

    z-index: 0;
}


/* CTA GRADIENT */

.booking-cta-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 25%,
        rgba(255, 255, 255, 0.20) 45%,
        rgba(255, 255, 255, 0.88) 68%,
        rgba(255, 255, 255, 0.98) 100%
    );
}


/* CTA CONTENT */

.booking-cta-content {
    position: relative;
    z-index: 2;

    width: 50%;
    max-width: 580px;

    padding: 60px;

    text-align: center;
}

.booking-cta-content h2 {
    margin: 0 0 20px;

    font-family: 'Roboto', sans-serif;
    font-size: clamp(38px, 4vw, 56px);
    font-weight: 400;
    line-height: 1.08;

    color: #111111;
}

.booking-cta-content p {
    max-width: 500px;

    margin: 0 auto 28px;

    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.6;

    color: #242424;
}


/* CTA BUTTON */

.booking-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 140px;
    min-height: 46px;

    padding: 0 28px;

    background: #663492;
    border: 1px solid #663492;
    border-radius: 12px;

    color: #ffffff;

    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;

    text-decoration: none;

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.booking-cta-btn:hover {
    background: #E82D91;
    border-color: #E82D91;

    transform: translateY(-2px);
}


/* =========================================================
   CTA - TABLET
========================================================= */

@media (max-width: 1100px) {

    .booking-cta {
        padding: 80px 0;
    }

    .booking-cta-container {
        width: 92%;
        min-height: 460px;
    }

    .booking-cta-image {
        object-position: 40% center;
    }

    .booking-cta-content {
        width: 55%;
        padding: 40px;
    }

    .booking-cta-content h2 {
        font-size: 40px;
    }

    .booking-cta-content p {
        font-size: 15px;
    }
}

/* =========================================================
   CTA - MOBILE
========================================================= */

@media (max-width: 767px) {

    .booking-cta {
        padding: 60px 0;
    }

    .booking-cta-container {
        width: auto;
        min-height: auto;

        margin: 0 20px;
        padding-top: 260px;

        display: block;

        border-radius: 16px;

        background-color: #ffffff;
    }

    .booking-cta-image {
        width: 100%;
        height: 300px;

        top: 0;
        bottom: auto;

        object-fit: cover;
        object-position: top center;
    }

    .booking-cta-overlay {
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 20%,
            rgba(255, 255, 255, 0.25) 40%,
            rgba(255, 255, 255, 0.96) 60%,
            #ffffff 70%
        );
    }

    .booking-cta-content {
        width: 100%;
        max-width: none;

        padding: 30px 20px 38px;

        text-align: center;
    }

    .booking-cta-content h2 {
        margin-bottom: 16px;

        font-size: 34px;
        line-height: 1.1;
    }

    .booking-cta-content p {
        margin-bottom: 24px;

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

/* =========================================================
   CTA - SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .booking-cta {
        padding: 50px 0;
    }

    .booking-cta-container {
        margin: 0 16px;
        padding-top: 230px;
    }

    .booking-cta-image {
        height: 270px;
    }

    .booking-cta-content {
        padding: 25px 16px 32px;
    }

    .booking-cta-content h2 {
        font-size: 31px;
    }

    .booking-cta-content p {
        font-size: 14px;
    }
}

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

.site-footer {
    position: relative;
    width: 100%;
    overflow: hidden;

    background: #ffffff;

    color: #252525;
}


/* =========================================================
   COMMON CONTAINER
========================================================= */

.footer-container {
    width: 90%;
    max-width: 1400px;

    margin: 0 auto;
}


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

.footer-main {
    width: 100%;

    padding: 75px 0 30px;
}

.footer-grid {
    display: grid;

    grid-template-columns:
        minmax(200px, 0.9fr)
        minmax(180px, 0.8fr)
        minmax(250px, 1.15fr)
        minmax(230px, 1fr);

    gap: clamp(35px, 5vw, 80px);

    align-items: start;
}


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

.footer-column {
    min-width: 0;
}

.footer-column h3 {
    margin: 0 0 25px;

    color: #252525;

    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}


/* =========================================================
   BUSINESS INFO
========================================================= */

.footer-logo {
    display: inline-block;

    margin-bottom: 15px;
}

.footer-logo img {
    display: block;

    width: 145px;
    height: auto;
}

.footer-business-info p {
    max-width: 230px;

    margin: 0;

    color: #252525;

    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.35;
}


/* =========================================================
   LINKS
========================================================= */

.footer-links {
    margin: 0;
    padding: 0;

    list-style: none;
}

.footer-links li {
    margin-bottom: 20px;
}

.footer-links li:last-child {
    margin-bottom: 0;
}

.footer-links a {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: #3a3a3a;

    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.4;

    text-decoration: none;

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

.footer-links a span {
    color: #252525;

    font-size: 24px;
    line-height: 1;
}

.footer-links a:hover {
    color: #693296;

    transform: translateX(3px);
}


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

.footer-contact-list {
    margin-top: 15px;
    padding: 0;

    list-style: none;
}

.footer-contact-list li {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 20px;

    color: #3a3a3a;

    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

.footer-contact-list a {
    color: inherit;

    text-decoration: none;

    transition: color 0.3s ease;
}

.footer-contact-list a:hover {
    color: #693296;
}

.footer-contact-icon {
    width: 20px;

    flex: 0 0 20px;

    text-align: center;

    color: #252525;
}

.footer-contact-icon {
    width: 20px;
    height: 20px;

    flex: 0 0 20px;

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

.footer-contact-icon-img {
    display: block;

    width: 18px;
    height: 18px;

    object-fit: contain;
}

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

.footer-socials {
    display: flex;
    align-items: center;

    gap: 16px;

    margin-top: 26px;
}

.footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    color: #252525;

    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

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

.footer-socials a:hover {
    color: #693296;

    transform: translateY(-2px);
}


/* =========================================================
   FOOTER DECORATIVE IMAGE
========================================================= */

.footer-visual {
    position: relative;

    width: 100%;

    margin-top: 10px;
}

.footer-visual-container {
    width: 100%;

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

.footer-visual img {
    display: block;

    width: 100%;
    max-width: 1600px;
    height: auto;

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


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

.footer-bottom {
    width: 100%;

    padding: 0 0 10px;

    background: #ffffff;
}

.footer-bottom-container {
    padding-top: 10px;

    border-top: 1px solid #dedede;

    text-align: center;
}

.footer-bottom p {
    margin: 0;

    color: #111111;

    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    line-height: 1.6;
}

.footer-bottom a {
    color: #693296;

    font-weight: 600;

    text-decoration: none;
}

.footer-bottom a:hover {
    color: #E82D91;
}

.footer-divider {
    margin: 0 4px;
}


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

@media (max-width: 1100px) {

    .footer-container {
        width: 92%;
    }

    .footer-main {
        padding: 65px 0 25px;
    }

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

        column-gap: 60px;
        row-gap: 50px;
    }

    .footer-business-info p {
        max-width: 300px;
    }

    .footer-visual img {
        min-width: 900px;

        position: relative;
        left: 50%;

        transform: translateX(-50%);
    }
}


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

@media (max-width: 767px) {

    .footer-container {
        width: auto;

        margin-left: 20px;
        margin-right: 20px;
    }

    .footer-main {
        padding: 55px 0 20px;
    }

    .footer-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .footer-column h3 {
        margin-bottom: 18px;

        font-size: 17px;
    }

    .footer-business-info p {
        max-width: 320px;
    }

    .footer-links li {
        margin-bottom: 15px;
    }

    .footer-contact-list li {
        margin-bottom: 16px;
    }


    /* Decorative artwork */

    .footer-visual {
        margin-top: 10px;

        overflow: hidden;
    }

    .footer-visual img {
        width: auto;
        min-width: 760px;
        max-width: none;

        height: 260px;

        position: relative;
        left: 50%;

        object-fit: contain;

        transform: translateX(-50%);
    }


    /* Copyright */

    .footer-bottom {
        padding-top: 0px;
        padding-bottom: 15px;
    }

    .footer-bottom-container {
        padding-top: 14px;
    }

    .footer-bottom p {
        max-width: 420px;

        margin: 0 auto;

        font-size: 11px;
        line-height: 1.7;
    }
}


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

@media (max-width: 480px) {

    .footer-container {
        margin-left: 16px;
        margin-right: 16px;
    }

    .footer-main {
        padding-top: 45px;
    }

    .footer-grid {
        gap: 35px;
    }

    .footer-logo img {
        width: 130px;
    }

    .footer-visual img {
        min-width: 680px;
        height: 230px;
    }

    .footer-bottom p {
        font-size: 10px;
    }

    .footer-divider {
        display: none;
    }

    .footer-company {
        display: inline-block;
    }
}
.footer-social-link {
    width: 32px;
    height: 32px;

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

    text-decoration: none;
}

.footer-social-icon {
    display: block;

    width: 18px;
    height: 18px;

    object-fit: contain;

    transition: transform 0.3s ease;
}

.footer-social-link:hover .footer-social-icon {
    transform: translateY(-2px);
}

/* =========================================================
   CONTACT SMALL MAP
========================================================= */

.footer-contact-map {
    width: 100%;
    max-width: 280px;
    margin-top: 22px;
    overflow: hidden;
    border-radius: 12px;
    background: #f3f3f3;
}
.footer-contact-map {
    width: 100%;
    height: 180px;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 12px;
}

.footer-contact-map iframe {
    display: block;
    width: 100%;
    height: 145px;
    border: 0;
}

@media (max-width: 1100px) {
    .footer-contact-map {
        max-width: 360px;
    }

    .footer-contact-map iframe {
        height: 170px;
    }
}

@media (max-width: 767px) {
    .footer-contact-map {
        width: 100%;
        max-width: 420px;
        margin-top: 20px;
    }

    .footer-contact-map iframe {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .footer-contact-map {
        max-width: 100%;
    }

    .footer-contact-map iframe {
        height: 180px;
    }
}


/* =========================================================
   ABOUT PAGE HERO
========================================================= */

/* =========================================
   ABOUT US HERO
========================================= */

.about-page-hero {
    position: relative;
    width: 100%;
    height: 700px;
    overflow: hidden;
}

.about-page-hero-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

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

.about-page-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1;
}

.about-page-hero-content {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 1400px;
    height: 100%;
    margin: 0 auto;

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

.about-page-hero-content h1 {
    margin: 0;

    font-family: 'Roboto Slab', serif;
    font-size: 68px;
    font-weight: 800;
    line-height: 1.15;

    color: #ffffff;
    text-align: left;
}


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

@media (max-width: 1100px) {

    .about-page-hero {
        height: 600px;
    }

    .about-page-hero-content {
        width: 92%;
    }

    .about-page-hero-content h1 {
        font-size: 52px;
    }
}


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

@media (max-width: 767px) {

    .about-page-hero {
        height: 500px;
    }

    .about-page-hero-content {
        width: auto;
        margin-left: 16px;
        margin-right: 16px;
    }

    .about-page-hero-content h1 {
        width: 100%;
        font-size: 40px;
        line-height: 1.15;
        text-align: left;
    }
}


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

@media (max-width: 480px) {

    .about-page-hero {
        height: 430px;
    }

    .about-page-hero-content h1 {
        font-size: 34px;
    }
}

.about-page-intro {
    position: relative;

    width: 100%;

    padding: 0 0 100px;

    background: #ffffff;

    overflow: visible;
}

.about-page-accent {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 12px;

    background: linear-gradient(
        90deg,
        #693296 0%,
        #9b3ca3 50%,
        #E82D91 100%
    );

    z-index: 1;
}

.about-page-container {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 1400px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);

    gap: clamp(50px, 6vw, 90px);

    align-items: start;
}


/* LEFT PORTRAIT */

.about-page-image {
    position: relative;
    z-index: 3;

    width: 100%;
    max-width: 300px;

    /* Pull image upward into hero */
    margin-top: -120px;

    overflow: hidden;

    border: 4px solid #E82D91;
    border-radius: 160px;
}

.about-page-image img {
    display: block;

    width: 100%;
    height: 560px;

    object-fit: cover;
    object-position: center;

    border-radius: inherit;
}


/* RIGHT TEXT */

.about-page-content {
    width: 100%;

    padding-top: 60px;
    
}

.about-page-content h1 {
    max-width: 950px;
    margin: 0 0 28px;

    color: #111111;

    font-family: 'Roboto Slab', serif;
    font-size: clamp(40px, 4vw, 58px);
    font-weight: 400;
    line-height: 1.08;
}

.about-page-content p {
    max-width: 1000px;

    margin: 0 0 22px;

    color: #242424;

    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    line-height: 1.7;
}

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

@media (max-width: 1100px) {

    .about-page-hero {
        height: 420px;
    }

}



@media (max-width: 767px) {

    .about-page-hero {
        height: 330px;
    }

    .about-page-hero-image {
        object-position: center center;
    }

    .about-page-hero-bg {
        background-position: center;
    }

    .about-page-intro {
        padding-bottom: 65px;
        overflow: hidden;
    }

    .about-page-accent {
        height: 9px;
    }

    .about-page-container {
        width: auto;

        margin: 0 20px;

        display: flex;
        flex-direction: column;

        gap: 35px;
    }

    .about-page-image {
        width: min(72%, 290px);
        max-width: none;

        margin: -70px auto 0;

        border-width: 3px;
    }

    .about-page-image img {
        height: 430px;
    }

    .about-page-content {
        padding-top: 0;
    }

    .about-page-content h1 {
        margin-bottom: 20px;

        font-size: clamp(34px, 10vw, 44px);
    }

    .about-page-content p {
        margin-bottom: 18px;

        font-size: 15px;
        line-height: 1.65;
    }
}

@media (max-width: 480px) {

    .about-page-hero {
        height: 280px;
    }

    .about-page-container {
        margin-left: 16px;
        margin-right: 16px;
    }

    .about-page-image {
        width: min(78%, 260px);
        margin-top: -55px;
    }

    .about-page-image img {
        height: 380px;
    }

    .about-page-content h1 {
        font-size: 34px;
    }

    .about-page-content p {
        font-size: 14px;
    }
}
/* =========================================================
   COMPANY VISION / MISSION
========================================================= */

.company-vision {
    position: relative;
    width: 100%;

    padding: 100px 0;

    overflow: hidden;

    background: linear-gradient(
        180deg,
        #663492 0%,
        #70489f 30%,
        #6876b3 60%,
        #59b8d5 100%
    );

    color: #ffffff;
}


/* =========================================================
   CONTAINER
========================================================= */

.company-vision-container {
    position: relative;

    width: 90%;
    max-width: 1400px;

    margin: 0 auto;
}


/* =========================================================
   CENTER VERTICAL LINE
========================================================= */

.company-vision-line {
    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 2px;

    background: rgba(255, 255, 255, 0.9);

    transform: translateX(-50%);
}


/* =========================================================
   EACH ROW
========================================================= */

.company-vision-row {
    position: relative;

    width: 100%;
    min-height: 420px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        100px
        minmax(0, 1fr);

    align-items: center;
}


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

.company-vision-card {
    width: 100%;
    max-width: 460px;

    text-align: center;
}


/* LEFT */

.company-vision-left .company-vision-card {
    grid-column: 1;

    justify-self: end;

    margin-right: 35px;
}


/* RIGHT */

.company-vision-right .company-vision-card {
    grid-column: 3;

    justify-self: start;

    margin-left: 35px;
}


/* =========================================================
   CIRCULAR IMAGE
========================================================= */

.company-vision-image {
    width: 358px;
    height: 358px;

    margin: 0 auto 30px;

    overflow: hidden;

    border: 3px solid #E82D91;
    border-radius: 50%;

    background: #ffffff;
}

.company-vision-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    border-radius: 50%;
}


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

.company-vision-card h2 {
    margin: 0 0 15px;

    color: #ffffff;

    font-family: 'Stardom', serif;

    font-size: clamp(28px, 2.4vw, 38px);
    font-weight: 400;

    line-height: 1.15;
}


/* =========================================================
   PARAGRAPH
========================================================= */

.company-vision-card p {
    width: 100%;
    max-width: 450px;

    margin: 0 auto 15px;

    color: rgba(255, 255, 255, 0.95);

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

    font-size: 24px;
    font-weight: 400;

    line-height: 1.65;
}

.company-vision-card p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   TIMELINE DOT
========================================================= */

.company-vision-dot {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 5;

    width: 45px;
    height: 45px;

    background: #693296;

    border: 10px solid #ffffff;
    border-radius: 50%;

    transform: translate(-50%, -50%);
}


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

@media (max-width: 1100px) {

    .company-vision {
        padding: 80px 0;
    }

    .company-vision-container {
        width: 92%;
    }

    .company-vision-image {
        width: 280px;
        height: 280px;
    }

    .company-vision-row {
        min-height: 500px;
    }

    .company-vision-card {
        max-width: 360px;
    }

    .company-vision-left .company-vision-card {
        margin-right: 20px;
    }

    .company-vision-right .company-vision-card {
        margin-left: 20px;
    }


    .company-vision-card h2 {
        font-size: 30px;
    }

    .company-vision-card p {
        font-size: 14px;
    }
}


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

@media (max-width: 767px) {

    .company-vision {
        padding: 65px 0;
    }

    .company-vision-container {
        width: auto;

        margin-left: 20px;
        margin-right: 20px;
    }


    /* Center line stays in center like reference */

    .company-vision-line {
        left: 50%;
    }

    .company-vision-card {
        max-width: 100%;
    }


    .company-vision-left .company-vision-card {
        grid-column: 1;

        margin-right: 8px;
    }


    .company-vision-right .company-vision-card {
        grid-column: 3;

        margin-left: 8px;
    }


    .company-vision-image {
        width: 160px;
        height: 160px;
    }

    .company-vision-row {
        min-height: 400px;
    }


    .company-vision-card h2 {
        margin-bottom: 10px;

        font-size: 22px;
    }


    .company-vision-card p {
        font-size: 11px;
        line-height: 1.5;
    }


    .company-vision-dot {
        width: 15px;
        height: 15px;

        border-width: 3px;
    }
}


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

@media (max-width: 480px) {

    .company-vision {
        padding: 50px 0;
    }

    .company-vision-container {
        margin-left: 12px;
        margin-right: 12px;
    }

    .company-vision-image {
        width: 130px;
        height: 130px;
    }

    .company-vision-row {
        min-height: 350px;
    }

    .company-vision-left .company-vision-card {
        margin-right: 5px;
    }

    .company-vision-right .company-vision-card {
        margin-left: 5px;
    }

    .company-vision-card h2 {
        font-size: 19px;
    }

    .company-vision-card p {
        font-size: 10px;
        line-height: 1.45;
    }
}

/* =========================================================
   STANDARD MAIN CONTENT PARAGRAPH TYPOGRAPHY
   Desktop: 28px | Tablet: 22px | Mobile: 18px | Small: 16px
========================================================= */
.hero-content p,
.about-content p,
.why-choose-content p,
.rental-services-content p,
.booking-cta-content p {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.5;
}

@media (max-width: 1100px) {
    .hero-content p,
    .about-content p,
    .why-choose-content p,
    .rental-services-content p,
    .booking-cta-content p {
        font-size: 22px;
    }
}

@media (max-width: 767px) {
    .hero-content p,
    .about-content p,
    .why-choose-content p,
    .rental-services-content p,
    .booking-cta-content p {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .hero-content p,
    .about-content p,
    .why-choose-content p,
    .rental-services-content p,
    .booking-cta-content p {
        font-size: 16px;
    }
}

/* =========================================================
   FOOTER RESPONSIVE FIX
   2 x 2 layout for tablet + normal mobile
========================================================= */

@media (max-width: 766px) {

    .footer-container {
        width: auto;
        margin: 0 20px;
        padding-top: 45px;
        padding-bottom: 25px;
    }

    .footer-grid {
        display: grid;

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

        column-gap: 35px;
        row-gap: 40px;

        align-items: start;
    }

    /* Remove unnecessary spacing from columns */
    .footer-business,
    .footer-quick-links,
    .footer-services,
    .footer-contact {
        width: 100%;
        margin: 0;
        padding: 0;
    }


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

    .footer-contact-map {
        width: 100%;
        height: 170px;

        margin: 0;
        padding: 0;

        overflow: hidden;

        border-radius: 20px;
    }

    .footer-contact-map iframe {
        display: block;

        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;

        border: 0;
    }


    /* ==============================
       REDUCE LIST SPACING
    ============================== */

    .footer-links,
    .footer-services-list {
        margin: 0;
        padding: 0;
    }

    .footer-links li,
    .footer-services-list li {
        margin-bottom: 14px;
    }


    /* ==============================
       DECORATIVE BOTTOM IMAGE
    ============================== */

    .footer-decoration {
        margin-top: 20px;
    }

    .footer-decoration img {
        display: block;
        width: 100%;
        height: auto;
    }
}

@media (max-width: 520px) {

    .footer-container {
        margin: 0 16px;
        padding-top: 40px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }

    .footer-contact-map {
        height: 180px;
        margin-top: 12px;
    }

    .footer-decoration {
        margin-top: 15px;
    }
}


/* =========================================================
   ABOUT PAGE - MOBILE FIX
========================================================= */

@media (max-width: 767px) {

    /* About intro section */
    .about-page-intro {
        padding: 50px 0 70px;
        overflow: hidden;
    }

    .about-page-container {
        width: auto;
        margin: 0 20px;

        display: flex;
        flex-direction: column;

        gap: 40px;
        align-items: stretch;
    }


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

    .about-page-image {
        position: relative;

        width: 100%;
        max-width: 420px;

        /* IMPORTANT: remove desktop overlap */
        margin: 0 auto;

        border: 3px solid #E82D91;
        border-radius: 120px;

        overflow: hidden;
    }

    .about-page-image img {
        position: static;

        display: block;

        width: 100%;
        height: auto;

        /* Better mobile proportion */
        aspect-ratio: 4 / 5;

        object-fit: cover;
        object-position: center;

        border-radius: inherit;
    }


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

    .about-page-content {
        width: 100%;

        padding: 0;
        margin: 0;

        text-align: left;
    }

    .about-page-content h2 {
        font-size: 34px;
        line-height: 1.2;
    }

    .about-page-content p {
        font-size: 18px;
        line-height: 1.5;
    }
}


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

@media (max-width: 480px) {

    .about-page-container {
        margin: 0 16px;
        gap: 32px;
    }

    .about-page-image {
        width: 100%;
        max-width: 330px;

        border-radius: 100px;
    }

    .about-page-content h2 {
        font-size: 30px;
    }

    .about-page-content p {
        font-size: 16px;
    }
}

/* =========================================================
   COMPANY VISION - TABLET
   Keep timeline design + align with site container
========================================================= */

@media (max-width: 1100px) {

    .company-vision-container {
        width: 92%;
        max-width: 1400px;
        margin: 0 auto;
        padding: 0;
    }

    .company-vision-row {
        width: 100%;
        min-height: 480px;

        display: grid;
        grid-template-columns: 1fr 60px 1fr;
        align-items: center;

        margin: 0;
        padding: 35px 0;
    }

    /* LEFT ITEM */
    .company-vision-left .company-vision-card {
        grid-column: 1;
        justify-self: start;
    }

    /* RIGHT ITEM */
    .company-vision-right .company-vision-card {
        grid-column: 3;
        justify-self: end;
    }

    .company-vision-card {
        width: 100%;
        max-width: 320px;
        margin: 0;
    }

    .company-vision-image {
        width: 260px;
        height: 260px;
        margin: 0 auto 25px;
    }

    .company-vision-card h2 {
        font-size: 34px;
    }

    .company-vision-card p {
        width: 100%;
        max-width: 320px;

        font-size: 17px;
        line-height: 1.55;
    }
}

/* =========================================================
   COMPANY VISION - MOBILE
========================================================= */

@media (max-width: 767px) {

    .company-vision {
        width: 100%;
        padding: 55px 0 65px;
    }

    /* SAME ALIGNMENT AS FOOTER / OTHER SECTIONS */
    .company-vision-container {
        position: relative;

        width: auto;
        max-width: none;

        margin: 0 20px;
        padding: 0;
    }


    /* CENTER TIMELINE */
    .company-vision-line {
        position: absolute;

        top: 0;
        bottom: 0;
        left: 50%;

        width: 2px;
        height: 100%;

        transform: translateX(-50%);
    }


    /* EACH TIMELINE ROW */
    .company-vision-row {
        position: relative;

        width: 100%;
        min-height: 390px;

        display: grid;

        /* equal left/right areas */
        grid-template-columns:
            minmax(0, 1fr)
            40px
            minmax(0, 1fr);

        align-items: center;

        margin: 0;
        padding: 30px 0;
    }


    /* LEFT CARD */
    .company-vision-left .company-vision-card {
        grid-column: 1;

        width: 100%;
        max-width: none;

        justify-self: stretch;

        margin: 0;
        padding-right: 10px;

        text-align: left;
    }


    /* RIGHT CARD */
    .company-vision-right .company-vision-card {
        grid-column: 3;

        width: 100%;
        max-width: none;

        justify-self: stretch;

        margin: 0;
        padding-left: 10px;

        text-align: left;
    }


    /* CENTER DOT */
    .company-vision-dot {
        position: absolute;

        top: 50%;
        left: 50%;

        width: 14px;
        height: 14px;

        margin: 0;

        border: 3px solid #ffffff;
        border-radius: 50%;

        transform: translate(-50%, -50%);

        z-index: 5;
    }


    /* IMAGES */
    .company-vision-image {
        width: 100%;
        max-width: 145px;
        height: auto;

        aspect-ratio: 1 / 1;

        margin: 0 0 20px;

        border-radius: 50%;
    }

    .company-vision-image img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        border-radius: inherit;
    }


    /* TEXT */
    .company-vision-card h2 {
        width: 100%;

        margin: 0 0 12px;

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

        text-align: left;
    }

    .company-vision-card p {
        width: 100%;
        max-width: none;

        margin: 0;

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

        text-align: left;
    }
}

/* =========================================================
   COMPANY VISION - MOBILE
========================================================= */

@media (max-width: 767px) {

    .company-vision {
        width: 100%;
        padding: 55px 0 65px;
    }

    /* SAME ALIGNMENT AS FOOTER / OTHER SECTIONS */
    .company-vision-container {
        position: relative;

        width: auto;
        max-width: none;

        margin: 0 20px;
        padding: 0;
    }


    /* CENTER TIMELINE */
    .company-vision-line {
        position: absolute;

        top: 0;
        bottom: 0;
        left: 50%;

        width: 2px;
        height: 100%;

        transform: translateX(-50%);
    }


    /* EACH TIMELINE ROW */
    .company-vision-row {
        position: relative;

        width: 100%;
        min-height: 390px;

        display: grid;

        /* equal left/right areas */
        grid-template-columns:
            minmax(0, 1fr)
            40px
            minmax(0, 1fr);

        align-items: center;

        margin: 0;
        padding: 30px 0;
    }


    /* LEFT CARD */
    .company-vision-left .company-vision-card {
        grid-column: 1;

        width: 100%;
        max-width: none;

        justify-self: stretch;

        margin: 0;
        padding-right: 10px;

        text-align: left;
    }


    /* RIGHT CARD */
    .company-vision-right .company-vision-card {
        grid-column: 3;

        width: 100%;
        max-width: none;

        justify-self: stretch;

        margin: 0;
        padding-left: 10px;

        text-align: left;
    }


    /* CENTER DOT */
    .company-vision-dot {
        position: absolute;

        top: 50%;
        left: 50%;

        width: 14px;
        height: 14px;

        margin: 0;

        border: 3px solid #ffffff;
        border-radius: 50%;

        transform: translate(-50%, -50%);

        z-index: 5;
    }


    /* IMAGES */
    .company-vision-image {
        width: 100%;
        max-width: 145px;
        height: auto;

        aspect-ratio: 1 / 1;

        margin: 0 0 20px;

        border-radius: 50%;
    }

    .company-vision-image img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        border-radius: inherit;
    }


    /* TEXT */
    .company-vision-card h2 {
        width: 100%;

        margin: 0 0 12px;

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

        text-align: left;
    }

    .company-vision-card p {
        width: 100%;
        max-width: none;

        margin: 0;

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

        text-align: left;
    }
}

/* =========================================================
   FOOTER MOBILE - REDUCE MAP TO DECORATION SPACE
========================================================= */

@media (max-width: 767px) {

    /* Contact column should finish directly after map */
    .footer-contact {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Map */
    .footer-contact-map {
        margin-top: 15px;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Remove large height/space from footer grid */
    .footer-grid {
        min-height: 0 !important;
        height: auto !important;

        margin-bottom: 0 !important;
        padding-bottom: 25px !important;
    }

    /* Main footer container */
    .footer-container {
        min-height: 0 !important;
        height: auto !important;

        padding-bottom: 0 !important;
    }

    /* Decorative image section */
    .footer-decoration {
        margin-top: 20px !important;
        padding-top: 0 !important;
    }

    .footer-decoration img {
        display: block;

        width: 100%;
        height: auto;

        margin: 0;
    }
}


/* =========================================================
   FAQ PAGE - HERO
========================================================= */
/* =========================================
   FAQ / Terms Hero Text
========================================= */

.faq-page-hero {
    position: relative;
    width: 100%;
    min-height: 700px;
    overflow: hidden;
}

.faq-page-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.faq-page-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(105, 50, 150, 0.45);
    z-index: 1;
}

/* Hero text */
.faq-page-hero-content {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 1400px;
    height: 100%;

    margin: 0 auto;
    padding: 0 20px;

    box-sizing: border-box;

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

/* Breadcrumb + heading wrapper */

.faq-page-hero-inner {
    width: 100%;
    margin: 0;
    padding: 0;

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

    text-align: left;
}


/* Breadcrumb */

.faq-page-hero .kd-breadcrumb {
    margin: 0 0 35px 0;
    padding-top: 7px;
    padding-bottom: 7px;

    align-self: flex-start;
}

/* Heading */

.faq-page-hero-content h1 {
    width: 100%;
    max-width: 1200px;

    margin: 0;
    padding: 0;

    text-align: left;
}

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

@media (max-width: 1100px) {

    .faq-page-hero-content {
        width: 92%;

        padding-left: 14px;
        padding-right: 14px;
    }
}


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

@media (max-width: 767px) {

    .faq-page-hero-content {
        width: auto;

        margin-left: 16px;
        margin-right: 16px;

        padding-left: 0;
        padding-right: 0;
    }

    .faq-page-hero-inner {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .faq-page-hero .kd-breadcrumb {
        margin-left: 8px !important;
        margin-bottom: 20px;
        
    }

    .faq-page-hero-content h1 {
        margin-left: 0;
        padding-left: 0;
    }
}

/* =========================================================
   FAQ HERO - SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .faq-page-hero {
        height: 350px;
        border-bottom-width: 5px;
    }
}

/* =========================================================
   FAQ PAGE - ACCORDION SECTION
========================================================= */

.faq-accordion-section {
    position: relative;

    width: 100%;

    padding: 95px 0 120px;

    color: #ffffff;

    background:
        linear-gradient(
            180deg,
            #ef4da3 0%,
            #c544a2 35%,
            #983b9b 68%,
            #693296 100%
        );
}


/* Main centered content */
.faq-accordion-container {
    width: 90%;
    max-width: 1050px;

    margin: 0 auto;
}



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

.faq-accordion {
    width: 100%;
}


.faq-item {
    width: 100%;

    border-top: 1px solid rgba(255, 255, 255, 0.22);
}


/* Last bottom line */
.faq-item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}


/* Question button */
.faq-question {
    width: 100%;

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

    gap: 25px;

    padding: 22px 12px;

    border: 0;

    background: transparent;

    color: #ffffff;

    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.45;

    text-align: left;

    cursor: pointer;
}


/* Question text */
.faq-question-text {
    flex: 1;
}


/* =========================
   CIRCULAR ARROW
========================= */

.faq-arrow {
    width: 28px;
    height: 28px;

    flex: 0 0 28px;

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

    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;

    color: #ffffff;

    font-size: 17px;
    line-height: 1;

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


.faq-question:hover .faq-arrow {
    background: #ffffff;
    color: #693296;
}


/* Rotate arrow when opened */
.faq-question[aria-expanded="true"] .faq-arrow {
    transform: rotate(90deg);

    background: #ffffff;
    color: #693296;
}


/* =========================
   ANSWER
========================= */

.faq-answer {
    display: grid;

    grid-template-rows: 0fr;

    overflow: hidden;

    transition: grid-template-rows 0.35s ease;
}


.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
}


.faq-answer-inner {
    min-height: 0;
    overflow: hidden;
}


.faq-answer p {
    margin: 0;

    padding:
        0
        60px
        24px
        12px;

    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;

    color: rgba(255, 255, 255, 0.9);
}


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

@media (max-width: 1100px) {

    .faq-accordion-section {
        padding: 80px 0 100px;
    }

    .faq-accordion-container {
        width: 92%;
        max-width: 900px;
    }

    .faq-accordion-container h2 {
        max-width: 680px;

        margin-bottom: 60px;

        font-size: 42px;
    }

    .faq-question {
        padding: 20px 10px;

        font-size: 17px;
    }
}


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

@media (max-width: 767px) {

    .faq-accordion-section {
        padding: 65px 0 80px;
    }

    .faq-accordion-container {
        width: auto;

        margin: 0 20px;
    }

    .faq-accordion-container h2 {
        max-width: 500px;

        margin-bottom: 45px;

        font-size: 34px;
        line-height: 1.2;
    }

    /* Let mobile wrap naturally */
    .faq-title-break {
        display: none;
    }

    .faq-question {
        gap: 16px;

        padding: 18px 5px;

        font-size: 16px;
        line-height: 1.45;
    }

    .faq-arrow {
        width: 26px;
        height: 26px;

        flex-basis: 26px;

        font-size: 15px;
    }

    .faq-answer p {
        padding:
            0
            42px
            20px
            5px;

        font-size: 15px;
    }
}


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

@media (max-width: 480px) {

    .faq-accordion-section {
        padding: 55px 0 70px;
    }

    .faq-accordion-container {
        margin: 0 16px;
    }

    .faq-accordion-container h2 {
        margin-bottom: 38px;

        font-size: 30px;
    }

    .faq-question {
        padding: 16px 3px;

        font-size: 15px;
    }

    .faq-answer p {
        padding:
            0
            36px
            18px
            3px;

        font-size: 14px;
    }

    .faq-arrow {
        width: 24px;
        height: 24px;

        flex-basis: 24px;
    }
}

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

.faq-arrow {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;

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

    /* No CSS circle/background */
    border: none;
    border-radius: 0;
    background: transparent;

    transition: transform 0.3s ease;
}


/* SVG */
.faq-arrow-icon {
    display: block;

    width: 30px;
    height: 30px;

    object-fit: contain;

    /*
     * Converts a black SVG to white.
     * Remove this if your SVG is already white.
     */
    filter: brightness(0) invert(1);

    transition: transform 0.3s ease;
}


/* ========================================
   HOVER
   No fill/background
======================================== */

.faq-question:hover .faq-arrow {
    background: transparent;
    color: inherit;
}

.faq-question:hover .faq-arrow-icon {
    filter: brightness(0) invert(1);
}


/* ========================================
   OPEN STATE
   Right arrow becomes down arrow
======================================== */

.faq-question[aria-expanded="true"] .faq-arrow {
    background: transparent;

    transform: rotate(90deg);
}

.faq-question[aria-expanded="true"] .faq-arrow-icon {
    filter: brightness(0) invert(1);
}

@media (max-width: 767px) {

    .faq-arrow,
    .faq-arrow-icon {
        width: 27px;
        height: 27px;
    }

    .faq-arrow {
        flex-basis: 27px;
    }
}


@media (max-width: 480px) {

    .faq-arrow,
    .faq-arrow-icon {
        width: 24px;
        height: 24px;
    }

    .faq-arrow {
        flex-basis: 24px;
    }
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.4s ease;
}

.faq-answer-inner {
    min-height: 0;
    overflow: hidden;
}

.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
}

.faq-arrow-icon {
    transition: transform 0.3s ease;
}

.faq-question[aria-expanded="true"] .faq-arrow-icon {
    transform: rotate(90deg);
}

/* ========================================
   STICKY / FIXED HEADER - ALL DEVICES
======================================== */

.site-header {
    position: fixed;
    top: 22px;
    left: 0;

    width: 100%;

    padding: 0 5%;

    z-index: 9999;
}

@media (max-width: 1100px) {

    .site-header {
        position: fixed;
        top: 16px;
        left: 0;

        width: 100%;
        padding: 0 4%;

        z-index: 9999;
    }
}

@media (max-width: 767px) {

    .site-header {
        position: fixed;
        top: 12px;
        left: 0;

        width: 100%;

        padding: 0 16px;

        z-index: 9999;
    }
}

@media (max-width: 480px) {

    .site-header {
        top: 10px;
        padding: 0 12px;
    }
}

/* =========================================
   TERMS & CONDITIONS HERO
========================================= */

.terms-page-hero {
    position: relative;
    width: 100%;
    height: 700px;
    overflow: hidden;
}

.terms-page-hero-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

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

/* Optional dark overlay for text readability */
.terms-page-hero-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.25);
    z-index: 1;
}

/* Same alignment as your main website content */
.terms-page-hero-content {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 1400px;
    height: 100%;

    margin: 0 auto;

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

.terms-page-hero-content h1 {
    margin: 0;

    font-family: 'Roboto Slab', serif;
    font-size: 68px;
    font-weight: 800;
    line-height: 1.15;

    color: #ffffff;
    text-align: left;
}

/* =========================================================
   TERMS & CONDITIONS - CONTENT
========================================================= */

.terms-content-section {
    width: 100%;

    padding: 90px 0 110px;

    background: #f8e3f2;
}


/*
 * Same left/right alignment as the other
 * main sections of the website.
 */
.terms-content-container {
    width: 90%;
    max-width: 1400px;

    margin: 0 auto;
}


/* Keep long legal text comfortable to read */
.terms-content {
    width: 100%;
    max-width: 1200px;

    margin: 0;
}


/* Main title */

.terms-content h1 {
    margin: 0 0 28px;

    font-family: 'Roboto Slab', serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;

    color: #111111;
}


/* Section headings */

.terms-content h2 {
    margin: 45px 0 16px;

    font-family: 'Roboto Slab', serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.25;

    color: #111111;
}


/* Paragraphs */

.terms-content p {
    max-width: 1150px;

    margin: 0 0 18px;

    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;

    color: #252525;
}


/* Lists */

.terms-content ul,
.terms-content ol {
    max-width: 1100px;

    margin: 8px 0 25px;
    padding-left: 25px;
}

.terms-content li {
    margin-bottom: 10px;

    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.65;

    color: #252525;
}


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

@media (max-width: 1100px) {

    .terms-page-hero {
        height: 430px;
    }

    .terms-content-section {
        padding: 75px 0 90px;
    }

    .terms-content-container {
        width: 92%;
    }

    .terms-content h1 {
        font-size: 42px;
    }

    .terms-content h2 {
        margin-top: 38px;
        font-size: 29px;
    }

    .terms-content p,
    .terms-content li {
        font-size: 17px;
    }
}


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

@media (max-width: 767px) {

    .terms-page-hero {
        height: 340px;

        border-bottom-width: 6px;
    }

    .terms-content-section {
        padding: 55px 0 70px;
    }

    /*
     * Same mobile alignment convention as
     * About/Footer/other sections.
     */
    .terms-content-container {
        width: auto;

        margin-left: 20px;
        margin-right: 20px;
    }

    .terms-content {
        width: 100%;
        max-width: none;
    }

    .terms-content h1 {
        margin-bottom: 22px;

        font-size: 34px;
        line-height: 1.2;
    }

    .terms-content h2 {
        margin: 34px 0 13px;

        font-size: 26px;
    }

    .terms-content p {
        margin-bottom: 16px;

        font-size: 16px;
        line-height: 1.65;
    }

    .terms-content ul,
    .terms-content ol {
        margin-bottom: 22px;

        padding-left: 22px;
    }

    .terms-content li {
        margin-bottom: 8px;

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


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

@media (max-width: 480px) {

    .terms-page-hero {
        height: 290px;

        border-bottom-width: 5px;
    }

    .terms-content-section {
        padding: 45px 0 60px;
    }

    .terms-content-container {
        margin-left: 16px;
        margin-right: 16px;
    }

    .terms-content h1 {
        font-size: 30px;
    }

    .terms-content h2 {
        margin-top: 30px;

        font-size: 23px;
    }

    .terms-content p,
    .terms-content li {
        font-size: 15px;
    }
}

/* =========================================================
   TERMS & CONDITIONS - BALLOON BULLETS
========================================================= */

.terms-balloon-list {
    list-style: none;

    margin: 15px 0 28px;
    padding: 0;

    max-width: 1100px;
}

.terms-balloon-list li {
    position: relative;

    margin: 0 0 16px;
    padding-left: 34px;

    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;

    color: #252525;
}


/* Balloon SVG */
.terms-balloon-list li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 5px;

    width: 25px;
    height: 30px;

    background-image: url('../images/ballon.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


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

@media (max-width: 1100px) {

    .terms-balloon-list li {
        font-size: 17px;
        padding-left: 32px;
    }

    .terms-balloon-list li::before {
        width: 16px;
        height: 21px;
    }
}


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

@media (max-width: 767px) {

    .terms-balloon-list {
        margin: 12px 0 24px;
    }

    .terms-balloon-list li {
        margin-bottom: 14px;

        padding-left: 29px;

        font-size: 16px;
        line-height: 1.55;
    }

    .terms-balloon-list li::before {
        top: 4px;

        width: 15px;
        height: 20px;
    }
}


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

@media (max-width: 480px) {

    .terms-balloon-list li {
        padding-left: 27px;

        font-size: 15px;
    }

    .terms-balloon-list li::before {
        width: 14px;
        height: 19px;
    }
}

/* =========================================
   PRIVACY POLICY HERO
========================================= */

.privacy-page-hero {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
}

.privacy-page-hero-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

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

.privacy-page-hero-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.25);
    z-index: 1;
}

.privacy-page-hero-content {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 1400px;
    height: 100%;

    margin: 0 auto;

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

.privacy-page-hero-content h1 {
    margin: 0;

    font-family: 'Roboto Slab', serif;
    font-size: 68px;
    font-weight: 800;
    line-height: 1.15;

    color: #ffffff;
    text-align: left;
}


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

@media (max-width: 1100px) {

    .privacy-page-hero {
        height: 600px;
    }

    .privacy-page-hero-content {
        width: 92%;
    }

    .privacy-page-hero-content h1 {
        font-size: 52px;
    }
}


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

@media (max-width: 767px) {

    .privacy-page-hero {
        height: 500px;
    }

    .privacy-page-hero-content {
        width: auto;
        margin-left: 16px;
        margin-right: 16px;
    }

    .privacy-page-hero-content h1 {
        width: 100%;
        font-size: 40px;
        line-height: 1.15;
        text-align: left;
    }
}


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

@media (max-width: 480px) {

    .privacy-page-hero {
        height: 430px;
    }

    .privacy-page-hero-content h1 {
        font-size: 34px;
    }
}

/* =========================================================
   PRIVACY POLICY - CONTENT
========================================================= */

.privacy-content-section {
    width: 100%;

    padding: 90px 0 110px;

    background: #f8e3f2;
}


/* Same alignment as other website sections */
.privacy-content-container {
    width: 90%;
    max-width: 1400px;

    margin: 0 auto;
}


.privacy-content {
    width: 100%;
    max-width: 1200px;

    margin: 0;
}


/* HEADINGS */

.privacy-content h1 {
    margin: 0 0 28px;

    font-family: 'Roboto Slab', serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;

    color: #111;
}


.privacy-content h2 {
    margin: 45px 0 16px;

    font-family: 'Roboto Slab', serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.25;

    color: #111;
}


/* PARAGRAPHS */

.privacy-content p {
    width: 100%;
    max-width: 1150px;

    margin: 0 0 18px;

    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;

    color: #252525;
}


/* =========================================================
   PRIVACY BALLOON LIST
========================================================= */

.privacy-balloon-list {
    width: 100%;
    max-width: 1100px;

    list-style: none;

    margin: 15px 0 30px;
    padding: 0;
}


.privacy-balloon-list li {
    position: relative;

    margin: 0 0 16px;

    padding-left: 34px;

    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;

    color: #252525;
}


.privacy-balloon-list li::before {
    content: "";

    position: absolute;

    top: 5px;
    left: 0;

    width: 25px;
    height: 30px;

    background-image: url('../images/ballon.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


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

@media (max-width: 1100px) {

    .privacy-page-hero {
        height: 430px;
    }

    .privacy-content-section {
        padding: 75px 0 90px;
    }

    .privacy-content-container {
        width: 92%;
    }

    .privacy-content h1 {
        font-size: 42px;
    }

    .privacy-content h2 {
        margin-top: 38px;

        font-size: 29px;
    }

    .privacy-content p,
    .privacy-balloon-list li {
        font-size: 17px;
    }
}


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

@media (max-width: 767px) {

    .privacy-page-hero {
        height: 340px;

        border-bottom-width: 6px;
    }

    .privacy-content-section {
        padding: 55px 0 70px;
    }

    /*
     * Same mobile left/right alignment used
     * across your website.
     */
    .privacy-content-container {
        width: auto;

        margin-left: 20px;
        margin-right: 20px;
    }

    .privacy-content {
        width: 100%;
        max-width: none;
    }

    .privacy-content h1 {
        margin-bottom: 22px;

        font-size: 34px;
    }

    .privacy-content h2 {
        margin: 34px 0 13px;

        font-size: 26px;
    }

    .privacy-content p {
        margin-bottom: 16px;

        font-size: 16px;
        line-height: 1.65;
    }

    .privacy-balloon-list {
        margin: 12px 0 25px;
    }

    .privacy-balloon-list li {
        margin-bottom: 14px;

        padding-left: 29px;

        font-size: 16px;
        line-height: 1.55;
    }

    .privacy-balloon-list li::before {
        top: 4px;

        width: 15px;
        height: 20px;
    }
}


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

@media (max-width: 480px) {

    .privacy-page-hero {
        height: 290px;

        border-bottom-width: 5px;
    }

    .privacy-content-section {
        padding: 45px 0 60px;
    }

    .privacy-content-container {
        margin-left: 16px;
        margin-right: 16px;
    }

    .privacy-content h1 {
        font-size: 30px;
    }

    .privacy-content h2 {
        margin-top: 30px;

        font-size: 23px;
    }

    .privacy-content p,
    .privacy-balloon-list li {
        font-size: 15px;
    }

    .privacy-balloon-list li {
        padding-left: 27px;
    }

    .privacy-balloon-list li::before {
        width: 14px;
        height: 19px;
    }
}

/* =========================================================
   CONTACT PAGE - HERO
========================================================= */

.contact-page-hero {
    position: relative;

    width: 100%;
    min-height: 760px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #222;

    border-bottom: 8px solid transparent;

    border-image:
        linear-gradient(
            90deg,
            #693296 0%,
            #E82D91 100%
        ) 1;
}


/* =========================
   BACKGROUND IMAGE
========================= */

.contact-page-hero-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    z-index: 0;
}


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

.contact-page-hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background: rgba(255, 255, 255, 0.35);

    pointer-events: none;
}


/* =========================
   MAIN CONTAINER
========================= */

.contact-page-hero-container {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 1400px;

    margin: 0 auto;

    padding-top: 130px;
    padding-bottom: 70px;
}


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

.contact-page-hero-content {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    text-align: center;
}


/* HEADING */

.contact-page-hero-content h1 {
    max-width: 700px;

    margin: 0 auto 35px;

    font-family: 'Roboto Slab', serif;
    font-size: 58px;
    font-weight: 800;
    line-height: 1.08;

    color: #111;
}


/* PARAGRAPHS */

.contact-page-hero-content p {
    max-width: 1150px;

    margin: 0 auto 18px;

    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.55;

    color: #111;
}


/* Last paragraph */
.contact-page-hero-content p:last-child {
    margin-bottom: 0;
}

/* =========================================================
   CONTACT HERO - TABLET
========================================================= */

@media (max-width: 1100px) {

    .contact-page-hero {
        min-height: 650px;
    }

    .contact-page-hero-container {
        width: 92%;

        padding-top: 120px;
        padding-bottom: 60px;
    }

    .contact-page-hero-content h1 {
        max-width: 600px;

        margin-bottom: 28px;

        font-size: 48px;
    }

    .contact-page-hero-content p {
        max-width: 900px;

        margin-bottom: 16px;

        font-size: 18px;
        line-height: 1.55;
    }
}

/* =========================================================
   CONTACT HERO - TABLET
========================================================= */

@media (max-width: 1100px) {

    .contact-page-hero {
        min-height: 650px;
    }

    .contact-page-hero-container {
        width: 92%;

        padding-top: 120px;
        padding-bottom: 60px;
    }

    .contact-page-hero-content h1 {
        max-width: 600px;

        margin-bottom: 28px;

        font-size: 48px;
    }

    .contact-page-hero-content p {
        max-width: 900px;

        margin-bottom: 16px;

        font-size: 18px;
        line-height: 1.55;
    }
}

/* =========================================================
   CONTACT HERO - SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .contact-page-hero {
        min-height: 650px;

        border-bottom-width: 5px;
    }

    .contact-page-hero-container {
        margin-left: 16px;
        margin-right: 16px;

        padding-top: 110px;
        padding-bottom: 45px;
    }

    .contact-page-hero-content h1 {
        margin-bottom: 22px;

        font-size: 34px;
    }

    .contact-page-hero-content p {
        margin-bottom: 14px;

        font-size: 15px;
        line-height: 1.55;
    }
}

/* =========================================================
     CONTACT PAGE - HEROT PAGE - DETAILS / FORM
========================================================= */

.contact-details-section {
    width: 100%;
    padding: 100px 0 120px;

    background: #ffffff;
}


/* Same alignment as other website sections */

.contact-details-container {
    width: 90%;
    max-width: 1400px;

    margin: 0 auto;

    display: grid;

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

    column-gap: clamp(70px, 8vw, 130px);
    row-gap: 110px;

    align-items: center;
}


/* =========================================================
   IMAGE COLLAGES
========================================================= */

.contact-collage {
    position: relative;

    width: 100%;
    max-width: 520px;
}


/* Large rectangular image */

.contact-main-image {
    width: 78%;

    overflow: hidden;

    border-radius: 14px;
    border: 4px solid #168BD2;
}


.contact-main-image img {
    display: block;

    width: 100%;
    height: 560px;

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


/* Circle image */

.contact-circle-image {
    position: absolute;

    width: 190px;
    height: 190px;

    overflow: hidden;

    border: 4px solid #E82D91;
    border-radius: 50%;

    background: #ffffff;

    z-index: 2;
}


.contact-circle-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* First circle */

.contact-collage-top .contact-circle-image {
    top: 28%;
    right: 0;
}


/* Bottom collage */

.contact-collage-bottom {
    justify-self: end;
}


/* Move main bottom image to right */

.contact-collage-bottom .contact-main-image {
    margin-left: auto;
}


/* Bottom circle on left */

.contact-collage-bottom .contact-circle-image {
    top: 25%;
    left: 0;
}

/* =========================================================
   CONTACT INFO CARDS
========================================================= */

.contact-info-cards {
    width: 100%;
    max-width: 540px;

    justify-self: end;

    display: flex;
    flex-direction: column;

    gap: 22px;
}


.contact-info-card {
    width: 100%;
    min-height: 150px;

    padding: 25px 25px;

    display: flex;
    flex-direction: column;

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

    gap: 10px;

    background: #F8C5E4;

    border-radius: 22px;

    text-align: center;
    text-decoration: none;

    color: #111111;

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


a.contact-info-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 10px 25px
        rgba(105, 50, 150, 0.12);
}


.contact-info-icon {
    display: block;

    width: 25px;
    height: 25px;

    object-fit: contain;
}


.contact-info-card strong {
    font-family: 'Roboto', sans-serif;

    font-size: 18px;
    font-weight: 500;

    line-height: 1.4;

    color: #111111;
}


.contact-info-card span {
    font-family: 'Roboto', sans-serif;

    font-size: 15px;
    font-weight: 400;

    color: #252525;
}

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

.contact-page-form-wrap {
    width: 100%;
    max-width: 540px;
}


.contact-page-form {
    width: 100%;

    padding: 35px;

    background: #693296;

    border-radius: 16px;
}


.contact-page-field {
    width: 100%;

    margin-bottom: 18px;
}


.contact-page-field label,
.contact-consent legend {
    display: block;

    margin-bottom: 7px;

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

    font-size: 14px;
    font-weight: 400;

    color: #ffffff;
}


.contact-page-field input,
.contact-page-field textarea {
    width: 100%;

    padding: 13px 15px;

    border: 0;
    outline: none;

    border-radius: 7px;

    background: #A986C4;

    color: #ffffff;

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

    font-size: 16px;
}


.contact-page-field textarea {
    min-height: 120px;

    resize: vertical;
}


.contact-page-field input:focus,
.contact-page-field textarea:focus {
    outline: 2px solid rgba(255, 255, 255, 0.75);
}


/* Consent */

.contact-consent {
    margin: 5px 0 25px;
    padding: 0;

    border: 0;
}


.contact-consent label {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 14px;

    cursor: pointer;
}


.contact-consent input {
    width: 17px;
    height: 17px;

    flex: 0 0 17px;

    margin-top: 3px;
}


.contact-consent span {
    font-family: 'Roboto', sans-serif;

    font-size: 12px;
    font-weight: 400;

    line-height: 1.5;

    color: #ffffff;
}


/* Submit */

.contact-submit {
    width: 100%;

    padding: 13px 20px;

    border: 0;
    border-radius: 30px;

    background: #ffffff;

    color: #693296;

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

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

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


.contact-submit:hover {
    background: #E82D91;
    color: #ffffff;

    transform: translateY(-2px);
}

/* =========================================================
   CONTACT DETAILS - TABLET
========================================================= */

@media (max-width: 1100px) {

    .contact-details-section {
        padding: 80px 0 95px;
    }


    .contact-details-container {
        width: 92%;

        column-gap: 45px;
        row-gap: 80px;
    }


    .contact-main-image {
        width: 82%;
    }


    .contact-main-image img {
        height: 440px;
    }


    .contact-circle-image {
        width: 150px;
        height: 150px;
    }


    .contact-info-card {
        min-height: 130px;

        padding: 20px;
    }


    .contact-page-form {
        padding: 28px;
    }
}

/* =========================================================
   CONTACT DETAILS - MOBILE
========================================================= */

@media (max-width: 767px) {

    .contact-details-section {
        padding: 60px 0 75px;
    }


    .contact-details-container {
        width: auto;

        margin-left: 20px;
        margin-right: 20px;

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

        gap: 55px;
    }


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

    .contact-collage {
        width: 100%;
        max-width: 500px;

        margin: 0 auto;
    }


    .contact-main-image {
        width: 82%;
    }


    .contact-main-image img {
        width: 100%;
        height: auto;

        aspect-ratio: 4 / 5;

        object-fit: cover;
    }


    .contact-circle-image {
        width: 135px;
        height: 135px;
    }


    .contact-collage-top .contact-circle-image {
        top: 30%;
        right: 0;
    }


    .contact-collage-bottom .contact-circle-image {
        top: 30%;
        left: 0;
    }


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

    .contact-info-cards {
        width: 100%;
        max-width: 500px;

        margin: 0 auto;

        gap: 15px;
    }


    .contact-info-card {
        min-height: 115px;

        padding: 20px;

        border-radius: 18px;
    }


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

    .contact-page-form-wrap {
        width: 100%;
        max-width: 500px;

        margin: 0 auto;
    }


    .contact-page-form {
        padding: 25px 20px;

        border-radius: 14px;
    }
}

@media (max-width: 480px) {

    .contact-details-container {
        margin-left: 16px;
        margin-right: 16px;

        gap: 45px;
    }


    .contact-main-image {
        width: 85%;
    }


    .contact-circle-image {
        width: 110px;
        height: 110px;

        border-width: 3px;
    }


    .contact-info-card {
        min-height: 105px;

        padding: 17px 15px;
    }


    .contact-info-card strong {
        font-size: 16px;
    }


    .contact-info-card span {
        font-size: 14px;
    }


    .contact-page-form {
        padding: 22px 16px;
    }


    .contact-page-field input,
    .contact-page-field textarea {
        font-size: 15px;
    }
}

/* =========================================================
   PRODUCTS PAGE - HERO
========================================================= */

.products-page-hero {
    position: relative;

    width: 100%;
    min-height: 720px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #222;

    border-bottom: 8px solid transparent;
    border-image:
        linear-gradient(
            90deg,
            #693296 0%,
            #E82D91 100%
        ) 1;
}


/* =========================================================
   BACKGROUND
========================================================= */

.products-page-hero-image {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    z-index: 0;
}


/* Very light overlay */

.products-page-hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background: rgba(255, 255, 255, 0.10);

    pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.products-page-hero-container {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 1400px;

    margin: 0 auto;

    /*
     * Space for your fixed/floating header.
     */
    padding-top: 140px;
    padding-bottom: 70px;
}


/* =========================================================
   PURPLE/PINK CONTENT PANEL
========================================================= */

.products-page-hero-content {
    width: 68%;
    max-width: 900px;

    padding: 55px 50px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(105, 50, 150, 0.94) 0%,
            rgba(126, 52, 157, 0.92) 45%,
            rgba(232, 45, 145, 0.78) 100%
        );

    color: #ffffff;
}


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

.products-page-hero-content h1 {
    margin: 0 0 32px;

    font-family: 'Roboto Slab', serif;

    font-size: 48px;
    font-weight: 800;
    line-height: 1.15;

    color: #ffffff;
}


/* =========================================================
   PARAGRAPHS
========================================================= */

.products-page-hero-content p {
    margin: 0 0 8px;

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

    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;

    color: #ffffff;
}


.products-page-hero-content p:last-of-type {
    margin-bottom: 30px;
}


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

.products-hero-btn {
    display: inline-flex;

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

    min-height: 48px;

    padding: 10px 25px;

    border: 2px solid #ffffff;
    border-radius: 15px;

    background: transparent;

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

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

    line-height: 1;

    color: #ffffff;

    text-decoration: none;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


.products-hero-btn:hover {
    background: #ffffff;

    color: #693296;

    transform: translateY(-2px);
}

/* =========================================================
   PRODUCTS HERO - TABLET
========================================================= */

@media (max-width: 1100px) {

    .products-page-hero {
        min-height: 680px;
    }


    .products-page-hero-container {
        width: 92%;

        padding-top: 125px;
        padding-bottom: 60px;
    }


    .products-page-hero-content {
        width: 75%;
        max-width: 760px;

        padding: 45px 40px;

        border-radius: 20px;
    }


    .products-page-hero-content h1 {
        margin-bottom: 26px;

        font-size: 42px;
    }


    .products-page-hero-content p {
        font-size: 18px;
        line-height: 1.5;
    }


    .products-hero-btn {
        font-size: 17px;
    }
}

/* =========================================================
   PRODUCTS HERO - MOBILE
========================================================= */

@media (max-width: 767px) {

    .products-page-hero {
        min-height: auto;

        border-bottom-width: 6px;
    }


    .products-page-hero-image {
        object-position: center center;
    }


    /*
     * Helps the white text remain readable
     * behind the translucent panel.
     */
    .products-page-hero-overlay {
        background: rgba(0, 0, 0, 0.05);
    }


    .products-page-hero-container {
        width: auto;

        margin-left: 20px;
        margin-right: 20px;

        padding-top: 120px;
        padding-bottom: 55px;
    }


    .products-page-hero-content {
        width: 100%;
        max-width: none;

        padding: 35px 28px;

        border-radius: 18px;

        background:
            linear-gradient(
                135deg,
                rgba(105, 50, 150, 0.94) 0%,
                rgba(232, 45, 145, 0.84) 100%
            );
    }


    .products-page-hero-content h1 {
        margin-bottom: 22px;

        font-size: 34px;
        line-height: 1.15;
    }


    .products-page-hero-content p {
        margin-bottom: 8px;

        font-size: 16px;
        line-height: 1.55;
    }


    .products-page-hero-content p:last-of-type {
        margin-bottom: 25px;
    }


    .products-hero-btn {
        min-height: 44px;

        padding: 9px 21px;

        font-size: 16px;

        border-radius: 13px;
    }
}

/* =========================================================
   PRODUCTS HERO - SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .products-page-hero {
        border-bottom-width: 5px;
    }


    .products-page-hero-container {
        margin-left: 16px;
        margin-right: 16px;

        padding-top: 105px;
        padding-bottom: 45px;
    }


    .products-page-hero-content {
        padding: 28px 20px;

        border-radius: 16px;
    }


    .products-page-hero-content h1 {
        margin-bottom: 20px;

        font-size: 30px;
        line-height: 1.15;
    }


    .products-page-hero-content p {
        font-size: 15px;
        line-height: 1.5;
    }


    .products-page-hero-content p:last-of-type {
        margin-bottom: 22px;
    }


    .products-hero-btn {
        min-height: 42px;

        padding: 8px 18px;

        font-size: 15px;
    }
}

/* =========================================================
   PRODUCT SHOWCASE
========================================================= */

.product-showcase {
    width: 100%;

    padding: 90px 0 100px;

    background: #ffffff;
}


.product-showcase-container {
    width: 90%;
    max-width: 1400px;

    margin: 0 auto;
}


/* =========================================================
   PRODUCT INFORMATION
========================================================= */

.product-showcase-info {
    width: 100%;

    margin-bottom: 45px;
}


.product-showcase-info h2 {
    margin: 0 0 18px;

    font-family: 'Roboto Slab', serif;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.15;

    color: #111111;
}


.product-showcase-info p {
    width: 100%;
    max-width: 1250px;

    margin: 0;

    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.65;

    color: #252525;
}


/* =========================================================
   MAIN WIDE PRODUCT IMAGE
========================================================= */

.product-showcase-main {
    width: 100%;

    margin: 0 0 55px;

    overflow: hidden;
}


.product-showcase-main img {
    display: block;

    width: 100%;
    height: auto;

    /*
     * Your images are already composed with
     * the three product views.
     */
    object-fit: contain;

    object-position: center;

    transition:
        opacity 0.2s ease,
        transform 0.3s ease;
}

/* =========================================================
   PRODUCT CATEGORY SELECTOR
========================================================= */

.product-category-list {
    width: 100%;

    display: grid;

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

    gap: 20px;

    align-items: start;
}


.product-category-item {
    --product-color: #693296;

    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 12px;

    padding: 10px 5px 14px;

    border: 0;
    border-bottom: 3px solid transparent;

    background: transparent;

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

    cursor: pointer;

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


.product-category-image {
    width: 100%;
    height: 115px;

    display: flex;

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


.product-category-image img {
    display: block;

    width: auto;
    height: auto;

    max-width: 100px;
    max-height: 110px;

    object-fit: contain;

    transition: transform 0.25s ease;
}


.product-category-name {
    max-width: 110px;

    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;

    text-align: center;

    color: var(--product-color);
}


/* Hover */

.product-category-item:hover
.product-category-image img {
    transform: translateY(-5px);
}


/* Active */

.product-category-item.active {
    border-bottom-color: var(--product-color);
}


.product-category-item.active
.product-category-image img {
    transform:
        translateY(-5px)
        scale(1.06);
}


.product-category-item.active
.product-category-name {
    font-weight: 600;
}

/* =========================================================
   PRODUCT SHOWCASE - TABLET
========================================================= */

@media (max-width: 1100px) {

    .product-showcase {
        padding: 75px 0 85px;
    }


    .product-showcase-container {
        width: 92%;
    }


    .product-showcase-info {
        margin-bottom: 38px;
    }


    .product-showcase-info h2 {
        font-size: 42px;
    }


    .product-showcase-info p {
        font-size: 18px;
    }


    .product-showcase-main {
        margin-bottom: 50px;
    }


    /* 4 × 2 */

    .product-category-list {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 30px 20px;
    }
}

/* =========================================================
   PRODUCT SHOWCASE - MOBILE
========================================================= */

@media (max-width: 767px) {

    .product-showcase {
        padding: 55px 0 70px;
    }


    .product-showcase-container {
        width: auto;

        margin-left: 20px;
        margin-right: 20px;
    }


    .product-showcase-info {
        margin-bottom: 30px;
    }


    .product-showcase-info h2 {
        margin-bottom: 14px;

        font-size: 34px;
    }


    .product-showcase-info p {
        font-size: 16px;
        line-height: 1.6;
    }


    /* Keep entire 3-chair image visible */

    .product-showcase-main {
        width: 100%;

        margin-bottom: 40px;
    }


    .product-showcase-main img {
        width: 100%;
        height: auto;

        object-fit: contain;
    }


    /* 2 × 4 product selector */

    .product-category-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 25px 20px;
    }


    .product-category-image {
        height: 105px;
    }


    .product-category-name {
        font-size: 15px;
    }
}

@media (max-width: 480px) {

    .product-showcase {
        padding: 45px 0 60px;
    }


    .product-showcase-container {
        margin-left: 16px;
        margin-right: 16px;
    }


    .product-showcase-info h2 {
        font-size: 30px;
    }


    .product-showcase-info p {
        font-size: 15px;
    }


    .product-showcase-main {
        margin-bottom: 35px;
    }


    .product-category-list {
        gap: 22px 14px;
    }


    .product-category-image {
        height: 90px;
    }


    .product-category-image img {
        max-width: 80px;
        max-height: 85px;
    }


    .product-category-name {
        font-size: 14px;
    }
}



/* =========================================================
   HEADER MENU RELIABILITY FIX
   Keeps the tablet/mobile dropdown above every page hero.
========================================================= */
.header-container {
    position: relative;
}

@media (max-width: 1100px) {
    .menu-toggle {
        position: relative;
        z-index: 10002;
        flex: 0 0 42px;
        padding: 0;
    }

    .main-navigation.active {
        display: block !important;
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        width: 100%;
        z-index: 10001;
        margin: 0;
        padding: 25px;
        background: rgba(255, 255, 255, 0.98);
        border-radius: 15px;
        box-shadow: 0 14px 35px rgba(0, 0, 0, 0.14);
    }

    .main-navigation.active ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .main-navigation.active a {
        width: 100%;
    }

    .menu-toggle.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

/* =========================================================
   FLOATING CALL + BACK TO TOP
========================================================= */

.floating-actions {
    position: fixed;
    left: 50%;
    bottom: 30px;

    width: 90%;
    max-width: 1400px;

    transform: translateX(-50%);

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

    z-index: 9999;

    pointer-events: none;
}


/* BOTH BUTTONS */

.floating-btn {
    width: 64px;
    height: 64px;

    padding: 0;
    margin: 0;

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

    border: none;
    border-radius: 50%;

    cursor: pointer;
    pointer-events: auto;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.20);

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


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

.floating-call {
    position: relative;
    bottom: 40px;  
    background:
        linear-gradient(
            135deg,
            #E82D91 0%,
            #ff2387 100%
        );
     
}



/* =========================
   BACK TO TOP
========================= */

.floating-top {
    position: relative;
    bottom: 65px;
    background:
        linear-gradient(
            135deg,
            #26a9e8 0%,
            #1595dc 100%
        );
    
}


/* =========================
   ICON IMAGES
========================= */

.floating-btn img {
    display: block;

    width: 30px;
    height: 30px;

    object-fit: contain;

    filter: brightness(0) invert(1);

    pointer-events: none;
}


/* Arrow can be slightly smaller */

.floating-top img {
    width: 27px;
    height: 27px;
}


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

.floating-btn:hover {
    transform: translateY(-5px);

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


/* =========================
   BACK TO TOP VISIBILITY
========================= */

.floating-top {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0.3s ease;
}

.floating-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


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

@media (max-width: 1100px) {

    .floating-actions {
        width: 92%;
        bottom: 24px;
    }

    .floating-btn {
        width: 58px;
        height: 58px;
    }

    .floating-btn img {
        width: 27px;
        height: 27px;
    }

}


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

@media (max-width: 767px) {

    .floating-actions {
        width: auto;

        left: 20px;
        right: 20px;
        bottom: 20px;

        transform: none;
    }

    .floating-btn {
        width: 54px;
        height: 54px;
    }

    .floating-btn img {
        width: 25px;
        height: 25px;
    }

}


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

@media (max-width: 480px) {

    .floating-actions {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }

    .floating-btn {
        width: 50px;
        height: 50px;
    }

    .floating-btn img {
        width: 23px;
        height: 23px;
    }

}

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

.form-error {
    display: block;

    margin-top: 7px;

    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;

    color: #ffdddd;
}


.contact-page-field input.input-error,
.contact-page-field textarea.input-error {
    border-color: #ffdddd;
    box-shadow: 0 0 0 1px #ffdddd;
}


.consent-error {
    margin-top: 10px;
}

/* =========================================================
   INTERNATIONAL PHONE FIELD
   Matches KD Party Rentals contact form
========================================================= */

.contact-page-field .iti {
    width: 100%;
    display: block;
}


/* Main phone input */
.contact-page-field .iti input,
.contact-page-field .iti input[type="tel"] {
    width: 100%;
    min-height: 48px;

    padding-top: 13px;
    padding-bottom: 13px;

    border: 0;
    outline: none;

    border-radius: 7px;

    /* SAME COLOR AS OTHER FORM FIELDS */
    background: #A986C4;

    color: #ffffff;

    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 400;

    box-shadow: none;
}


/* Placeholder */
.contact-page-field .iti input::placeholder {
    color: rgba(255, 255, 255, 0.72);
    opacity: 1;
}


/* =========================================================
   FLAG / COUNTRY BUTTON
========================================================= */

.contact-page-field .iti__country-container {
    border-radius: 7px 0 0 7px;
}


.contact-page-field .iti__selected-country {
    padding-left: 14px;
    padding-right: 12px;

    border: 0;

    border-radius: 7px 0 0 7px;

    background: rgba(255, 255, 255, 0.12);
}


/* Hover */
.contact-page-field .iti__selected-country:hover {
    background: rgba(255, 255, 255, 0.18);
}


/* Divider between flag and phone */
.contact-page-field .iti__selected-country::after {
    content: "";

    position: absolute;

    top: 20%;
    right: 0;

    width: 1px;
    height: 60%;

    background: rgba(255, 255, 255, 0.35);
}


/* Flag */
.contact-page-field .iti__flag {
    transform: scale(1.05);
}


/* Dropdown arrow */
.contact-page-field .iti__arrow {
    border-top-color: #ffffff;
}

.contact-page-field .iti__arrow--up {
    border-bottom-color: #ffffff;
}


/* =========================================================
   COUNTRY DROPDOWN
========================================================= */

.contact-page-field .iti__dropdown-content {
    z-index: 99999;

    margin-top: 5px;

    background: #ffffff;

    border: 1px solid #dddddd;
    border-radius: 7px;

    font-family: "Roboto", sans-serif;
    font-size: 15px;

    color: #252525;

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

    overflow: hidden;
}


/* Country list */
.contact-page-field .iti__country-list {
    max-height: 260px;
}


/* Each country */
.contact-page-field .iti__country {
    min-height: 44px;

    padding: 9px 12px;

    display: flex;
    align-items: center;
}


/* Country hover */
.contact-page-field .iti__country:hover,
.contact-page-field .iti__country.iti__highlight {
    background: #f2f2f2;
}


/* Country name */
.contact-page-field .iti__country-name {
    color: #252525;
}


/* Country dial code */
.contact-page-field .iti__dial-code {
    color: #888888;
}


/* =========================================================
   SEARCH FIELD
========================================================= */

.contact-page-field .iti__search-input {
    width: calc(100% - 20px);

    margin: 10px;

    padding: 10px 12px;

    border: 1px solid #dddddd;
    border-radius: 6px;

    background: #ffffff;

    color: #252525;

    font-family: "Roboto", sans-serif;
    font-size: 15px;

    outline: none;
}


.contact-page-field .iti__search-input:focus {
    border-color: #693296;

    box-shadow:
        0 0 0 2px
        rgba(105, 50, 150, 0.10);
}


/* =========================================================
   PHONE FOCUS
========================================================= */

.contact-page-field .iti:focus-within input {
    outline: 2px solid rgba(255, 255, 255, 0.75);

    border: 0;

    box-shadow: none;
}


/* =========================================================
   VALIDATION ERROR
========================================================= */

.contact-page-field .iti input.input-error {
    outline: 1px solid #ffdddd;

    box-shadow:
        0 0 0 1px #ffdddd;
}


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

@media (max-width: 1100px) {

    .contact-page-field .iti input,
    .contact-page-field .iti input[type="tel"] {
        min-height: 46px;
        font-size: 15px;
    }

}


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

@media (max-width: 767px) {

    .contact-page-field .iti input,
    .contact-page-field .iti input[type="tel"] {
        min-height: 46px;

        padding-top: 12px;
        padding-bottom: 12px;

        font-size: 15px;
    }


    .contact-page-field .iti__selected-country {
        padding-left: 12px;
        padding-right: 10px;
    }


    .contact-page-field .iti__dropdown-content {
        font-size: 14px;
    }


    .contact-page-field .iti__country-list {
        max-height: 230px;
    }

}

/* =========================================================
   FOOTER MAP - FINAL CONSOLIDATED FIX
   Keep this block at the END of main.css.
========================================================= */
.footer-contact-map {
    display: block;
    width: 100%;
    max-width: 280px;
    height: 180px;
    margin: 20px 0 0;
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
    background: transparent;
    line-height: 0;
}

.footer-contact-map iframe {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

@media (max-width: 1100px) {
    .footer-contact-map {
        max-width: 360px;
        height: 170px;
    }
}

@media (max-width: 767px) {
    .footer-contact-map {
        width: 100%;
        max-width: 420px;
        height: 170px;
        margin: 15px 0 0 !important;
    }

    .footer-contact {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

@media (max-width: 520px) {
    .footer-contact-map {
        max-width: 100%;
        height: 180px;
        margin-top: 12px !important;
    }
}

.contact-form-status {
    width: 100%;
    margin-top: 15px;

    font-size: 14px;
    line-height: 1.5;
}

.contact-form-status.success {
    color: #ffffff;
}

.contact-form-status.error {
    color: #ffd6d6;
}

.contact-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}
/* =========================================
   Footer Tablet - Remove Extra Space
========================================= */

@media (min-width: 481px) and (max-width: 766px) {

    .site-footer {
        min-height: 0;
    }

    .footer-content {
        height: auto;
        min-height: 0;
        padding-bottom: 20px;
    }

    .footer-contact-map {
        margin-bottom: 0;
    }

    .footer-contact-map iframe {
        display: block;
        margin-bottom: 0;
    }

    .footer-decoration,
    .footer-image {
        margin-top: 0;
    }
}

/* =========================================================
   FOOTER <= 766PX - MAP TO DECORATIVE IMAGE SPACING FIX
   Uses the actual footer classes from footer.php.
========================================================= */
@media (min-width: 481px) and (max-width: 766px) {
    .footer-main {
        padding-bottom: 0 !important;
    }

    .footer-grid {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        row-gap: 30px;
    }

    .footer-contact,
    .footer-contact-map {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .footer-visual {
        margin-top: -32px !important;
        padding-top: 0 !important;
        overflow: hidden;
    }

    .footer-visual-container {
        margin: 0;
        padding: 0;
    }

    .footer-visual img {
        display: block;
        width: auto;
        min-width: 760px;
        max-width: none;
        height: auto !important;
        margin: 0;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        object-fit: contain;
        object-position: center bottom;
    }
}

/* =========================================================
   GLOBAL MOBILE CONTENT ALIGNMENT FIX
   Aligns page content with the mobile header's 16px gutter.
========================================================= */
@media (max-width: 767px) {
    .hero-container,
    .about-container,
    .why-choose-container,
    .rental-services-container,
    .booking-cta-container,
    .about-page-container,
    .company-vision-container,
    .faq-accordion-container,
    .terms-content-container,
    .privacy-content-container,
    .contact-page-hero-container,
    .contact-details-container,
    .products-page-hero-container,
    .product-showcase-container,
    .footer-container,
    .footer-bottom-container {
        width: auto;
        max-width: none;
        margin-left: 16px;
        margin-right: 16px;
        box-sizing: border-box;
    }
}

/* =========================================================
   ABOUT US PAGE - MOBILE ORDER
   Hero -> Text -> Image
========================================================= */

@media (max-width: 767px) {

    .about-page-container {
        display: flex;
        flex-direction: column;

        width: auto;
        margin-left: 16px;
        margin-right: 16px;

        gap: 32px;
        align-items: stretch;
    }

    /* TEXT FIRST */
    .about-page-content {
        order: 1;

        width: 100%;
        margin: 0;
        padding: 0;

        text-align: left;
    }

    /* IMAGE SECOND */
    .about-page-image {
        order: 2;

        width: 100%;
        max-width: 330px;

        margin: 0 auto;

        border: 3px solid #E82D91;
        border-radius: 80px;
        overflow: hidden;
    }

    .about-page-image img {
        display: block;

        width: 100%;
        height: 360px;

        object-fit: cover;
        object-position: center;

        border-radius: inherit;
    }

    .about-page-content h1 {
        margin: 0 0 20px;

        font-size: 34px;
        line-height: 1.15;
    }

    .about-page-content p {
        margin: 0 0 18px;

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


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

    .about-page-container {
        gap: 28px;
    }

    .about-page-image {
        max-width: 300px;
        border-radius: 70px;
    }

    .about-page-image img {
        height: 330px;
    }

    .about-page-content h1 {
        font-size: 30px;
    }
}

/* =========================================================
   HERO BREADCRUMB - SINGLE WHITE CARD
========================================================= */

.kd-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    width: fit-content;

    margin: 0 0 20px;
     padding: 0px 20px;

    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}


/* HOME LINK */

.kd-breadcrumb-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;
    height: auto;

    padding: 0;

    background: transparent;
    border-radius: 0;

    text-decoration: none;
}


/* HOME SVG */

.kd-breadcrumb-home img {
    display: block;

    width: 18px;
    height: 18px;

    object-fit: contain;
}


/* SEPARATOR */

.kd-breadcrumb-separator {
    color: #999999;

    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
}


/* CURRENT PAGE */

.kd-breadcrumb-current {
    padding: 0;

    background: transparent;
    border-radius: 0;

    color: #663492;

    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
}


/* HOVER */

.kd-breadcrumb-home:hover {
    background: transparent;
    transform: none;
}


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

@media (max-width: 767px) {

    .kd-breadcrumb {
        gap: 9px;

        margin-bottom: 14px;
        padding: 0px 14px;

        border-radius: 8px;
    }

    .kd-breadcrumb-home img {
        width: 16px;
        height: 16px;
    }

    .kd-breadcrumb-separator {
        font-size: 14px;
    }

    .kd-breadcrumb-current {
        font-size: 13px;
    }
}

/* =========================================================
   FAQ + CONTACT HERO
   FINAL HEADER ALIGNMENT FIX
========================================================= */

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

.faq-page-hero-content {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 1400px;
    min-height: 700px;
    height: 100%;

    margin: 0 auto;
    padding: 0 20px;

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

    text-align: left;
}


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

/*
   IMPORTANT:
   contact-page-hero-container is ALREADY
   the 90% / 1400px site container.
   Do not add another 5% to content.
*/

.contact-page-hero-container {
    width: 90%;
    max-width: 1400px;

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

    padding-left: 20px;
    padding-right: 20px;
}


.contact-page-hero-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

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

    text-align: left;
}


/* ---------- INNER ---------- */

.faq-page-hero-inner,
.contact-page-hero-inner {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

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

    text-align: left;
}


/* ---------- BREADCRUMB ---------- */

.faq-page-hero .kd-breadcrumb,
.contact-page-hero .kd-breadcrumb {
    align-self: flex-start;

    margin-left: 0;
    margin-right: 0;
    margin-bottom: 16px;
}


/* ---------- HEADINGS ---------- */

.faq-page-hero-content h1,
.contact-page-hero-content h1 {
    width: 100%;
    max-width: none;

    margin-left: 0;
    margin-right: 0;

    padding: 0;

    text-align: left;
}


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

.contact-page-hero-content p {
    width: 100%;
    max-width: none;

    margin-left: 0;
    margin-right: 0;

    text-align: left;
}


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

@media (max-width: 1100px) {

    .faq-page-hero-content {
        width: 92%;
        padding-left: 14px;
        padding-right: 14px;
    }

    .contact-page-hero-container {
        width: 92%;

        padding-left: 14px;
        padding-right: 14px;
    }
}


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

@media (max-width: 767px) {

    .faq-page-hero-content {
        width: auto;

        margin-left: 16px;
        margin-right: 16px;

        padding-left: 0;
        padding-right: 0;
    }

    .contact-page-hero-container {
        width: auto;

        margin-left: 16px;
        margin-right: 16px;

        padding-left: 0;
        padding-right: 0;
    }

    .faq-page-hero .kd-breadcrumb,
    .contact-page-hero .kd-breadcrumb {
        margin-bottom: 12px;
    }
}

/* =========================================================
   CONTACT HERO - FINAL LEFT ALIGNMENT
========================================================= */

.contact-page-hero-container {
    width: 90%;
    max-width: 1400px;

    margin: 0 auto;
    padding: 0;

    box-sizing: border-box;
}


/* All hero content starts from SAME line */
.contact-page-hero-content {
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

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

    text-align: left;
}


/* Inner wrapper */
.contact-page-hero-inner {
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


/* Breadcrumb */
.contact-page-hero .kd-breadcrumb {
    align-self: flex-start;

    margin: 0 0 30px 0;
}


/* Heading */
.contact-page-hero-content h1 {
    width: 100%;
    max-width: 850px;

    margin: 0 0 30px 0;
    padding: 0;

    text-align: left;
}


/* Paragraphs */
.contact-page-hero-content p {
    width: 100%;
    max-width: 1100px;

    margin: 0 0 22px 0;
    padding: 0;

    text-align: left;
}


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

@media (max-width: 1100px) {

    .contact-page-hero-container {
        width: 92%;
    }

    .contact-page-hero-content h1 {
        max-width: 750px;
    }

    .contact-page-hero-content p {
        max-width: 900px;
    }
}


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

@media (max-width: 767px) {

    .contact-page-hero-container {
        width: auto;

        margin-left: 16px;
        margin-right: 16px;

        padding: 0;
    }

    .contact-page-hero-content,
    .contact-page-hero-inner {
        width: 100%;

        margin: 0;
        padding: 0;
    }

    .contact-page-hero .kd-breadcrumb {
        margin: 0 0 20px 0;
    }

    .contact-page-hero-content h1 {
        width: 100%;
        max-width: 100%;

        margin: 0 0 20px 0;
    }

    .contact-page-hero-content p {
        width: 100%;
        max-width: 100%;

        margin: 0 0 16px 0;
    }
}


/* =========================================================
   FAQ HERO - FINAL ALIGNMENT FIX
   Header desktop gutter = 5%
   Header tablet gutter  = 4%
   Header mobile gutter  = 16px
========================================================= */

.faq-page-hero-content {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 1400px;
    min-height: 700px;
    height: 100%;

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

    /* Remove the extra 20px offset from earlier FAQ rules */
    padding-left: 0;
    padding-right: 0;

    box-sizing: border-box;

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

    text-align: left;
}

.faq-page-hero-inner {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

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

    text-align: left;
}

.faq-page-hero .kd-breadcrumb {
    align-self: flex-start;
    margin-left: 0;
    margin-right: 0;
}

.faq-page-hero-content h1 {
    width: 100%;
    max-width: none;

    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;

    color: #ffffff;
    text-align: left;
}

/* Tablet: matches .site-header { padding: 0 4%; } */
@media (max-width: 1100px) {
    .faq-page-hero-content {
        width: 92%;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Mobile: matches .site-header { padding: 0 16px; } */
@media (max-width: 767px) {
    .faq-page-hero-content {
        width: auto !important;
        min-height: 100% !important;

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

        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .faq-page-hero-inner,
    .faq-page-hero-content h1 {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* FAQ mobile: move only the breadcrumb slightly inward */
    .faq-page-hero .kd-breadcrumb {
        margin-left: 8px !important;
        padding-left: 14px !important;
    }

    .faq-page-hero-content h1 {
        color: #ffffff;
    }
}


/* =========================================================
   HERO BACKGROUND IMAGES
========================================================= */

.hero-bg {
    position: absolute;
    inset: 0;

    overflow: hidden;

    opacity: 0;
    transform: scale(1.03);

    transition:
        opacity 0.8s ease,
        transform 5s ease;
}

.hero-bg.active {
    opacity: 1;
    transform: scale(1);
}

.hero-bg-image {
    display: block;

    width: 100%;
    height: 100%;

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

.single-blog-layout {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(0, 3fr)
        minmax(260px, 1fr);

    gap: 50px;
    align-items: start;
}

@media (max-width: 900px) {

    .single-blog-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* =========================================================
   SINGLE BLOG HERO
========================================================= */

.single-blog-hero {
    position: relative;

    min-height: 550px;

    display: flex;
    align-items: center;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: #ffffff;
}

.single-blog-hero-content {
    position: relative;
    z-index: 2;
}

.blog-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 25px;

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

.blog-breadcrumb a {
    color: #ffffff;
    text-decoration: none;
}

.blog-breadcrumb a:hover {
    color: #F75BB0;
}

.single-blog-title {
    max-width: 900px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(42px, 5vw, 70px);
    line-height: 1.1;
}

.single-blog-meta {
    margin-top: 20px;

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


/* =========================================================
   SINGLE BLOG CONTENT
========================================================= */

.single-blog-main {
    padding: 90px 0;
}

.single-blog-layout {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 3fr)
        minmax(260px, 1fr);

    gap: 50px;

    align-items: start;
}

.single-blog-content {
    min-width: 0;
}

.single-blog-content h2 {
    margin: 40px 0 18px;

    color: #663492;

    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.3;
}

.single-blog-content h3 {
    margin: 30px 0 15px;

    color: #663492;

    font-size: 25px;
}

.single-blog-content p {
    margin: 0 0 22px;

    color: #7A7A7A;

    font-size: 17px;
    line-height: 1.8;
}

.single-blog-content ul,
.single-blog-content ol {
    margin: 0 0 25px;
    padding-left: 25px;

    color: #7A7A7A;
}

.single-blog-content li {
    margin-bottom: 10px;

    line-height: 1.7;
}

.single-blog-content img {
    display: block;

    width: 100%;
    height: auto;

    margin: 35px 0;

    border-radius: 15px;
}


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

@media (min-width: 601px) and (max-width: 1024px) {

    .single-blog-hero {
        min-height: 480px;
    }

    .single-blog-main {
        padding: 70px 0;
    }

    .single-blog-layout {
        grid-template-columns: 1fr;

        gap: 40px;
    }

}


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

@media (max-width: 600px) {

    .single-blog-hero {
        min-height: 420px;
    }

    .single-blog-title {
        font-size: clamp(34px, 10vw, 46px);
    }

    .blog-breadcrumb {
        font-size: 13px;
    }

    .single-blog-main {
        padding: 50px 0;
    }

    .single-blog-layout {
        grid-template-columns: 1fr;

        gap: 35px;
    }

}
/* =========================================================
   BLOG ARCHIVE + SINGLE POST
   Shared alignment: matches the site's 90% / 1400px sections.
========================================================= */
.blog-container {
    width: 90%;
    max-width: 1400px;
    margin-inline: auto;
}

/* Blog archive hero */
.blog-page-hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
}

.blog-page-hero-image,
.blog-page-hero-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.blog-page-hero-image {
    object-fit: cover;
    object-position: center;
}

.blog-page-hero-overlay {
    background: linear-gradient(90deg, rgba(38, 14, 50, .78), rgba(102, 52, 146, .42), rgba(0, 0, 0, .18));
}

.blog-page-hero-content {
    position: relative;
    z-index: 2;
    padding-top: 90px;
}

.blog-page-hero h1 {
    margin: 0;
    color: #fff;
    font-family: 'Roboto Slab', serif;
    font-size: clamp(48px, 6vw, 82px);
    line-height: 1.05;
}

/* Shared breadcrumb */
.blog-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 22px;
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
}

.blog-breadcrumb a,
.blog-breadcrumb span {
    color: inherit;
}

.blog-breadcrumb a {
    text-decoration: none;
}

.blog-breadcrumb a:hover,
.blog-breadcrumb a:focus-visible {
    color: #F75BB0;
}

/* Archive */
.blog-listing-section {
    padding: 90px 0 100px;
    background: #fff;
}

.blog-section-heading {
    max-width: 760px;
    margin: 0 auto 48px;
    text-align: center;
}

.blog-section-heading > span {
    display: inline-block;
    margin-bottom: 10px;
    color: #F75BB0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.blog-section-heading h2 {
    margin-top: 25px;
    color: #663492;
    font-family: 'Roboto Slab', serif;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.blog-card {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(102, 52, 146, .10);
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(35, 22, 43, .08);
}

.blog-card-image {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #f4f4f4;
}

.blog-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

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

.blog-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 25px 25px 27px;
}

.blog-card-date {
    margin-bottom: 10px;
    color: #F75BB0;
    font-size: 14px;
    font-weight: 600;
}

.blog-card-title {
    margin: 0 0 14px;
    font-family: 'Roboto Slab', serif;
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.25;
}

.blog-card-title a {
    color: #663492;
    text-decoration: none;
}

.blog-card-excerpt,
.blog-card-excerpt p {
    color: #7A7A7A;
    font-size: 16px;
    line-height: 1.65;
}

.blog-card-excerpt p {
    margin: 0 0 20px;
}

.blog-card-link {
    width: fit-content;
    margin-top: auto;
    color: #663492;
    font-weight: 600;
    text-decoration: none;
}

.blog-card-link:hover,
.blog-card-link:focus-visible {
    color: #F75BB0;
}

.blog-pagination {
    margin-top: 50px;
}

.blog-pagination .page-numbers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.blog-pagination .page-numbers li {
    margin: 0;
}

.blog-pagination a.page-numbers,
.blog-pagination span.page-numbers {
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(102, 52, 146, .20);
    border-radius: 50px;
    color: #663492;
    background: #fff;
    text-decoration: none;
}

.blog-pagination span.current,
.blog-pagination a.page-numbers:hover,
.blog-pagination a.page-numbers:focus-visible {
    color: #fff;
    background: #663492;
    border-color: #663492;
}

/* Single hero */
.single-blog-hero {
    position: relative;
    min-height: 570px;
    display: flex;
    align-items: center;
    background-color: #663492;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
}

.single-blog-hero-content {
    padding-top: 90px;
}

.single-blog-title {
    max-width: 1050px;
    margin: 0;
    color: #fff;
    font-family: 'Roboto Slab', serif;
    font-size: clamp(42px, 5vw, 70px);
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.single-blog-meta {
    margin: 20px 0 0;
    color: rgba(255, 255, 255, .9);
    font-size: 15px;
}

/* Single content */
.single-blog-main {
    padding: 90px 0 100px;
    background: #fff;
}

.single-blog-layout {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr);
    gap: clamp(35px, 4vw, 60px);
    align-items: start;
}

.single-blog-content {
    min-width: 0;
    color: #7A7A7A;
    font-size: 17px;
    line-height: 1.8;
}

.single-blog-content > :first-child {
    margin-top: 0;
}

.single-blog-content h2,
.single-blog-content h3,
.single-blog-content h4 {
    color: #663492;
    font-family: 'Roboto Slab', serif;
    line-height: 1.25;
}

.single-blog-content h2 {
    margin: 44px 0 18px;
    font-size: clamp(28px, 3vw, 38px);
}

.single-blog-content h3 {
    margin: 34px 0 14px;
    font-size: clamp(22px, 2.3vw, 28px);
}

.single-blog-content p {
    margin: 0 0 22px;
}

.single-blog-content ul,
.single-blog-content ol {
    margin: 0 0 26px;
    padding-left: 24px;
}

.single-blog-content li + li {
    margin-top: 8px;
}

.single-blog-content img,
.single-blog-content figure,
.single-blog-content .wp-block-image img {
    max-width: 100%;
    height: auto;
}

.single-blog-content figure,
.single-blog-content .wp-block-image {
    margin: 34px 0;
}

.single-blog-content img {
    display: block;
    border-radius: 14px;
}

.single-blog-content a {
    color: #663492;
}

/* Recent sidebar */
.single-blog-sidebar {
    min-width: 0;
    position: sticky;
    top: 28px;
}

.admin-bar .single-blog-sidebar {
    top: 60px;
}

.recent-blogs {
    padding: 26px;
    background: #fff;
    border: 1px solid rgba(102, 52, 146, .12);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(35, 22, 43, .07);
}

.recent-blogs-title {
    margin: 0 0 24px;
    color: #663492;
    font-family: 'Roboto Slab', serif;
    font-size: 28px;
}

.recent-blog-card {
    padding: 0 0 20px;
    margin: 0 0 20px;
    border-bottom: 1px solid rgba(122, 122, 122, .18);
}

.recent-blog-card:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.recent-blog-image {
    display: block;
    overflow: hidden;
    margin-bottom: 13px;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
}

.recent-blog-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recent-blog-date {
    display: block;
    margin-bottom: 7px;
    color: #F75BB0;
    font-size: 13px;
    font-weight: 600;
}

.recent-blog-info h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
}

.recent-blog-info h3 a {
    color: #663492;
    text-decoration: none;
}

.recent-blog-info h3 a:hover,
.recent-blog-info h3 a:focus-visible {
    color: #F75BB0;
}

/* Tablet */
@media (min-width: 601px) and (max-width: 1024px) {
    .blog-container,
    .single-blog-layout {
        width: 92%;
    }

    .blog-page-hero,
    .single-blog-hero {
        min-height: 470px;
    }

    .blog-page-hero-content,
    .single-blog-hero-content {
        padding-top: 82px;
    }

    .blog-listing-section,
    .single-blog-main {
        padding: 70px 0 80px;
    }

    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .single-blog-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .single-blog-sidebar {
        position: static;
    }

    .recent-blog-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }

    .recent-blog-card {
        margin: 0;
        padding: 0;
        border: 0;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .blog-container,
    .single-blog-layout {
        width: calc(100% - 32px);
    }

    .blog-page-hero,
    .single-blog-hero {
        min-height: 410px;
    }

    .blog-page-hero-content,
    .single-blog-hero-content {
        padding-top: 76px;
    }

    .blog-breadcrumb {
        gap: 7px;
        margin-bottom: 18px;
        font-size: 13px;
    }

    .single-blog-hero .blog-breadcrumb .current {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        /* -webkit-line-clamp: 2; */
    }

    .single-blog-title {
        font-size: clamp(34px, 10vw, 46px);
    }

    .blog-listing-section,
    .single-blog-main {
        padding: 52px 0 60px;
    }

    .blog-section-heading {
        margin-bottom: 32px;
    }

    .blog-grid,
    .single-blog-layout,
    .recent-blog-list {
        grid-template-columns: 1fr;
    }

    .blog-grid {
        gap: 22px;
    }

    .blog-card-body,
    .recent-blogs {
        padding: 20px;
    }

    .single-blog-content {
        font-size: 16px;
        line-height: 1.75;
    }

    .single-blog-sidebar {
        position: static;
    }
}

@media (max-width: 380px) {
    .blog-container,
    .single-blog-layout {
        width: calc(100% - 24px);
    }

    .blog-card-body,
    .recent-blogs {
        padding: 18px;
    }
}

/* =========================================================
   BLOG PAGINATION
========================================================= */

.blog-pagination {
    width: 100%;

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

    gap: 10px;

    margin-top: 55px;
}

.blog-pagination .page-numbers {
    width: 46px;
    height: 46px;

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

    border: 1px solid rgba(102, 52, 146, 0.20);
    border-radius: 50%;

    background: #ffffff;

    color: #663492;

    font-size: 15px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;

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


/* Current Page */
.blog-pagination .page-numbers.current {
    background: #663492;
    border-color: #663492;

    color: #ffffff;
}


/* Hover */
.blog-pagination a.page-numbers:hover {
    background: #F75BB0;
    border-color: #F75BB0;

    color: #ffffff;

    transform: translateY(-2px);
}


/* Previous + Next */
.blog-pagination .prev,
.blog-pagination .next {
    background: #663492;
    border-color: #663492;

    color: #ffffff;
}


/* Dots */
.blog-pagination .dots {
    border: 0;
    background: transparent;

    color: #7A7A7A;
}


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

@media (min-width: 601px) and (max-width: 1024px) {

    .blog-pagination {
        margin-top: 45px;
    }

    .blog-pagination .page-numbers {
        width: 44px;
        height: 44px;
    }

}


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

@media (max-width: 600px) {

    .blog-pagination {
        gap: 7px;

        margin-top: 35px;
    }

    .blog-pagination .page-numbers {
        width: 40px;
        height: 40px;

        font-size: 14px;
    }

}

/* =========================================================
   SINGLE BLOG BREADCRUMB
========================================================= */

.single-blog-breadcrumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    width: fit-content;
    max-width: 100%;

    margin: 0 0 28px;
    padding: 14px 20px;

    background: #ffffff;

    border-radius: 14px;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.08);

    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}


/* Home icon */
.single-blog-breadcrumb .breadcrumb-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    color: #663492;

    text-decoration: none;
}

.single-blog-breadcrumb .breadcrumb-home svg {
    display: block;

    width: 22px;
    height: 22px;
}


/* Divider */
.single-blog-breadcrumb .breadcrumb-divider {
    flex: 0 0 auto;

    color: #7A7A7A;

    font-weight: 400;
}


/* Blog Link */
.single-blog-breadcrumb .breadcrumb-blog {
    flex: 0 0 auto;

    color: #663492;

    font-weight: 700;

    text-decoration: none;

    transition: color 0.25s ease;
}

.single-blog-breadcrumb .breadcrumb-blog:hover {
    color: #F75BB0;
}


/* Current post */
.single-blog-breadcrumb .breadcrumb-current {
    min-width: 0;

    color: #7A7A7A;

    font-weight: 500;
}


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

@media (min-width: 601px) and (max-width: 1024px) {

    .single-blog-breadcrumb {
        gap: 8px;

        padding: 12px 17px;

        font-size: 14px;
    }

}


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

@media (max-width: 600px) {

    .single-blog-breadcrumb {
        display: flex;

        width: fit-content;
        max-width: 100%;

        gap: 7px;

        margin-bottom: 22px;
        padding: 11px 14px;

        border-radius: 11px;

        font-size: 13px;

        flex-wrap: nowrap;
    }

    .single-blog-breadcrumb .breadcrumb-home svg {
        width: 19px;
        height: 19px;
    }

    .single-blog-breadcrumb .breadcrumb-current {
        max-width: 170px;

        overflow: hidden;

        white-space: nowrap;
        text-overflow: ellipsis;
    }

}
/* =========================================================
   SINGLE BLOG SIDEBAR / TAGS / POST NAVIGATION
========================================================= */
.blog-sidebar-stack {
    display: grid;
    gap: 28px;
}

.blog-sidebar-box {
    padding: 28px;
    background: #fff;
    border: 1px solid rgba(102, 52, 146, .12);
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(35, 22, 43, .08);
}

.blog-sidebar-title,
.recent-blogs-title.blog-sidebar-title {
    position: relative;
    margin: 0 0 26px;
    padding-bottom: 15px;
    color: #663492;
    font-family: 'Roboto Slab', serif;
    font-size: clamp(24px, 2vw, 30px);
    line-height: 1.2;
}

.blog-sidebar-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 58px;
    height: 4px;
    border-radius: 999px;
    background: #F75BB0;
}

.blog-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px;
    overflow: hidden;
    border: 1px solid rgba(102, 52, 146, .12);
    border-radius: 12px;
    background: #f7f5f8;
}

.blog-search-form input[type='search'] {
    min-width: 0;
    width: 100%;
    height: 58px;
    padding: 0 18px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #333;
    font: inherit;
}

.blog-search-form input[type='search']::placeholder {
    color: #7A7A7A;
}

.blog-search-form button {
    width: 64px;
    height: 58px;
    border: 0;
    background: #F75BB0;
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    transition: background-color .25s ease, transform .25s ease;
}

.blog-search-form button:hover,
.blog-search-form button:focus-visible {
    background: #663492;
}

/* Compact recent posts for the sidebar. */
.blog-sidebar-box.recent-blogs {
    padding: 28px;
}

.blog-sidebar-box .recent-blog-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 15px;
    align-items: center;
}

.blog-sidebar-box .recent-blog-image {
    margin: 0;
    width: 92px;
    aspect-ratio: 1 / 1;
}

.blog-sidebar-box .recent-blog-info h3 {
    margin: 0 0 7px;
    font-size: 16px;
    line-height: 1.35;
}

.blog-sidebar-box .recent-blog-date {
    margin: 0;
    font-size: 12px;
}

/* Tags span the same aligned content width as the article area. */
.blog-post-tags {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-top: 55px;
    padding: 24px 28px;
    border: 1px solid rgba(102, 52, 146, .12);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(35, 22, 43, .07);
}

.blog-post-tags-label {
    flex: 0 0 auto;
    padding-top: 10px;
    color: #663492;
    font-size: 18px;
    font-weight: 700;
}

.blog-post-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.blog-post-tags-list a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 8px 16px;
    border-radius: 10px;
    background: rgba(102, 52, 146, .08);
    color: #663492;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color .25s ease, background-color .25s ease, transform .25s ease;
}

.blog-post-tags-list a:hover,
.blog-post-tags-list a:focus-visible {
    background: #663492;
    color: #fff;
    transform: translateY(-2px);
}

/* Modern featured-image previous / next navigation. */
.post-navigation-section {
    padding: 28px 0 0;
}

.post-navigation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.post-nav-card {
    position: relative;
    min-height: 230px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    border-radius: 20px;
    background-color: #663492;
    background-size: cover;
    background-position: center;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 12px 34px rgba(35, 22, 43, .12);
    transition: transform .3s ease, box-shadow .3s ease;
}

.post-nav-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 15%, rgba(30, 12, 39, .30) 100%);
    pointer-events: none;
}

.post-nav-card > span {
    position: relative;
    z-index: 1;
}

.post-nav-card:hover,
.post-nav-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px rgba(35, 22, 43, .18);
}

.post-nav-direction {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    color: #F75BB0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.post-nav-title {
    max-width: 560px;
    color: #fff;
    font-family: 'Roboto Slab', serif;
    font-size: clamp(21px, 2vw, 29px);
    font-weight: 700;
    line-height: 1.28;
}

.post-nav-next {
    align-items: flex-end;
    text-align: right;
}

.post-nav-next .post-nav-direction {
    justify-content: flex-end;
}

/* When only one adjacent post exists, keep the card balanced. */
.post-navigation-grid > .post-nav-card:only-child {
    grid-column: 1 / -1;
    width: min(100%, 680px);
}

.post-navigation-grid > .post-nav-next:only-child {
    justify-self: end;
}

@media (min-width: 601px) and (max-width: 1024px) {
    .blog-sidebar-stack {
        gap: 22px;
    }

    .blog-sidebar-box .recent-blog-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blog-sidebar-box .recent-blog-card {
        grid-template-columns: 86px minmax(0, 1fr);
    }

    .blog-sidebar-box .recent-blog-image {
        width: 86px;
    }

    .blog-post-tags {
        margin-top: 45px;
    }

    .post-nav-card {
        min-height: 205px;
        padding: 26px;
    }
}

@media (max-width: 600px) {
    .blog-sidebar-box,
    .blog-sidebar-box.recent-blogs {
        padding: 20px;
    }

    .blog-search-form {
        grid-template-columns: minmax(0, 1fr) 56px;
    }

    .blog-search-form input[type='search'],
    .blog-search-form button {
        height: 54px;
    }

    .blog-search-form button {
        width: 56px;
    }

    .blog-sidebar-box .recent-blog-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .blog-sidebar-box .recent-blog-card {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 13px;
        padding-bottom: 16px;
        margin-bottom: 16px;
        border-bottom: 1px solid rgba(122, 122, 122, .18);
    }

    .blog-sidebar-box .recent-blog-card:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: 0;
    }

    .blog-sidebar-box .recent-blog-image {
        width: 82px;
    }

    .blog-post-tags {
        flex-direction: column;
        gap: 12px;
        margin-top: 36px;
        padding: 20px;
    }

    .blog-post-tags-label {
        padding-top: 0;
    }

    .blog-post-tags-list a {
        min-height: 38px;
        padding: 7px 12px;
        font-size: 13px;
    }

    .post-navigation-section {
        padding-top: 20px;
    }

    .post-navigation-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .post-nav-card,
    .post-navigation-grid > .post-nav-card:only-child {
        width: 100%;
        min-height: 185px;
        padding: 22px;
        grid-column: auto;
    }

    .post-nav-next,
    .post-navigation-grid > .post-nav-next:only-child {
        align-items: flex-start;
        justify-self: stretch;
        text-align: left;
    }

    .post-nav-next .post-nav-direction {
        justify-content: flex-start;
    }
}

/* =========================================================
   BLOG PAGINATION - SQUARE PARTY RENTAL STYLE
========================================================= */
.blog-section .blog-container > .blog-pagination {
    width: 100%;
    margin: 60px auto 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    clear: both;
}

.blog-section .blog-pagination > .page-numbers {
    box-sizing: border-box;
    flex: 0 0 58px;
    width: 58px;
    min-width: 58px;
    height: 58px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e3e3e3;
    border-radius: 0;
    background: #ffffff;
    color: #111111;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: none;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.blog-section .blog-pagination > .page-numbers.current {
    background: #663492;
    border-color: #663492;
    color: #ffffff;
}

.blog-section .blog-pagination > a.page-numbers:hover,
.blog-section .blog-pagination > a.page-numbers:focus-visible {
    background: #F75BB0;
    border-color: #F75BB0;
    color: #ffffff;
    outline: none;
}

.blog-section .blog-pagination > .prev,
.blog-section .blog-pagination > .next {
    font-size: 25px;
    font-weight: 400;
}

.blog-section .blog-pagination > .dots {
    flex-basis: 42px;
    width: 42px;
    min-width: 42px;
    border-color: transparent;
    background: transparent;
    color: #7A7A7A;
}

/* Keep previous/next post cards clearly separated from the footer. */
.post-navigation-section {
    padding-bottom: 80px;
}

@media (min-width: 601px) and (max-width: 1024px) {
    .blog-section .blog-container > .blog-pagination {
        margin-top: 48px;
        gap: 9px;
    }

    .blog-section .blog-pagination > .page-numbers {
        flex-basis: 50px;
        width: 50px;
        min-width: 50px;
        height: 50px;
        font-size: 16px;
    }

    .post-navigation-section {
        padding-bottom: 65px;
    }
}

@media (max-width: 600px) {
    .blog-section .blog-container > .blog-pagination {
        margin-top: 38px;
        gap: 6px;
    }

    .blog-section .blog-pagination > .page-numbers {
        flex-basis: 40px;
        width: 40px;
        min-width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .blog-section .blog-pagination > .prev,
    .blog-section .blog-pagination > .next {
        font-size: 20px;
    }

    .blog-section .blog-pagination > .dots {
        flex-basis: 24px;
        width: 24px;
        min-width: 24px;
    }

    .post-navigation-section {
        padding-bottom: 50px;
    }
}


/* =========================================================
   BLOG PAGINATION - REFERENCE SQUARE DESIGN FINAL
========================================================= */
.blog-section .blog-container > .blog-pagination {
    width: 100%;
    margin: 64px auto 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    clear: both;
}

.blog-section .blog-pagination > a.page-numbers,
.blog-section .blog-pagination > span.page-numbers {
    box-sizing: border-box;
    flex: 0 0 72px;
    width: 72px;
    min-width: 72px;
    height: 72px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e2e2;
    border-radius: 0;
    background: #ffffff;
    color: #111111;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: none;
    transform: none;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* Keep Party Rental branding for the selected page. */
.blog-section .blog-pagination > span.page-numbers.current {
    background: #663492;
    border-color: #663492;
    color: #ffffff;
}

.blog-section .blog-pagination > a.page-numbers:hover,
.blog-section .blog-pagination > a.page-numbers:focus-visible {
    background: #F75BB0;
    border-color: #F75BB0;
    color: #ffffff;
    outline: none;
    transform: none;
}

.blog-section .blog-pagination > a.prev,
.blog-section .blog-pagination > a.next {
    font-size: 28px;
    font-weight: 400;
}

.blog-section .blog-pagination > span.dots {
    flex-basis: 46px;
    width: 46px;
    min-width: 46px;
    border-color: transparent;
    background: transparent;
    color: #7A7A7A;
}

@media (min-width: 601px) and (max-width: 1024px) {
    .blog-section .blog-container > .blog-pagination {
        margin-top: 50px;
        gap: 9px;
    }

    .blog-section .blog-pagination > a.page-numbers,
    .blog-section .blog-pagination > span.page-numbers {
        flex-basis: 56px;
        width: 56px;
        min-width: 56px;
        height: 56px;
        font-size: 18px;
    }

    .blog-section .blog-pagination > a.prev,
    .blog-section .blog-pagination > a.next {
        font-size: 24px;
    }
}

@media (max-width: 600px) {
    .blog-section .blog-container > .blog-pagination {
        margin-top: 38px;
        gap: 6px;
    }

    .blog-section .blog-pagination > a.page-numbers,
    .blog-section .blog-pagination > span.page-numbers {
        flex-basis: 42px;
        width: 42px;
        min-width: 42px;
        height: 42px;
        font-size: 15px;
    }

    .blog-section .blog-pagination > a.prev,
    .blog-section .blog-pagination > a.next {
        font-size: 20px;
    }

    .blog-section .blog-pagination > span.dots {
        flex-basis: 22px;
        width: 22px;
        min-width: 22px;
    }
}

@media (max-width: 380px) {
    .blog-section .blog-container > .blog-pagination {
        gap: 5px;
    }

    .blog-section .blog-pagination > a.page-numbers,
    .blog-section .blog-pagination > span.page-numbers {
        flex-basis: 38px;
        width: 38px;
        min-width: 38px;
        height: 38px;
        font-size: 14px;
    }
}