/* Reset default browser margins and set a fallback font for consistency */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    height: 100%;                       /*Ensure body takes full height for scroll calculation if needed */
    overflow-x: hidden;                 /* Prevent horizontal scroll */
    font-size: 16px;
    font-family: Arial, sans-serif;     /* Use Arial as default font, with sans-serif fallback */
    scroll-behavior: smooth;            /* Enable smooth scrolling for anchor links */
    overflow-x: hidden;                 /* Prevent horizontal scroll */
}

/* Define CSS custom properties (variables) for reusable values */
:root {
/* Logo 2 sizing */
    --logo2-height: 2.5rem;                              /* Default logo height for desktop screens */
    --logo2-height-tablet: 1.5rem;                       /* Logo height for tablet screens */
    --logo2-height-mobile: 1.5rem;                       /* Logo height for mobile screens */
    --logo2-height-small: 1.2rem;                        /* Logo height for very small screens */
/* navbar spacing */
    --navbar-padding-h: 1rem;                            /* Default top/bottom padding for navbar */
    --navbar-padding-v: 1rem;                            /* Default right/left padding for navbar */
    --navbar-height: calc(var(--logo2-height) + 2 * 
                          var(--navbar-padding-h));      /* Navbar height: logo + padding */
/* Colors */
    --nav-bar-color: #ffffff;                            /* Navbar background color (white) */
    --shadow-color: rgba(0, 0, 0, 0.1);                  /* Subtle shadow color for navbar */
    --nav-button-color: #000000;
    --button-hover:#f3f3f3;
    --button-focus:#ff7f33;
    --button-orange:#ff6200;
    --button-orange-hover:#e55a00;
    --white-font-color:#ffffff;
    --black-font-color:#000000;
    --main-background-color: #f0f0f0;
    --Page2-background-color:#e0e0e0;
    --Page3-background-color:#DFDFDF;
    --Page4-background-color:#1a1a1a;
    --Spec-background-color:#E6E6E6;

/* Hero text margins for easy adjustment */
    --hero-text-margin-left-desktop: 3rem;           /* Desktop left margin for hero text */
    --hero-text-margin-bottom-desktop: 3.75rem;      /* Desktop bottom margin for hero text */
    --hero-text-margin-left-tablet: 2rem;            /* Tablet left margin (reduced) */
    --hero-text-margin-bottom-tablet: 2.5rem;        /* Tablet bottom margin (reduced) */
    --hero-text-margin-left-mobile: 1.5rem;          /* Mobile left margin (unchanged) */
    --hero-text-margin-top-mobile: 2.5rem;           /* Mobile top margin (unchanged) */

/* Font size */
    --hero-header-desktop-large: 56px;
    --hero-header-desktop: 47px;
    --hero-header-tablet: 45px;
    --hero-header-mobile: 27px;
    --hero-header-small-mobile: 24px;
    --hero-text-desktop-large: 32px;
    --hero-text-desktop: 27px;
    --hero-text-tablet: 25px;
    --hero-text-mobile: 17px;
    --hero-text-small-mobile: 14px;

    --page2-header-desktop-large: 68px;
    --page2-header-desktop: 68px;
    --page2-header-tablet: clamp(2rem, 4vw, 3rem);
    --page2-header-mobile: 32px;
    --page2-header-small-mobile: 28px;
    --page2-text-desktop-large: 20px;
    --page2-text-desktop: 20px;
    --page2-text-tablet: clamp(1rem, 1.4vw, 1.25rem);
    --page2-text-mobile: 17px;
    --page2-text-small-mobile: 15px;

    --page3-header-desktop-large: 27px;
    --page3-header-desktop: 27px;
    --page3-header-tablet: clamp(18px, 12px + 0.78125vw, 22px);
    --page3-header-mobile: 20px;
    --page3-header-small-mobile: 18px;
    --page3-bold-desktop-large: 38px;
    --page3-bold-desktop: 38px;
    --page3-bold-tablet: clamp(22px, 10px + 1.5625vw, 30px);
    --page3-bold-mobile: 26px;
    --page3-bold-small-mobile: 22px;
    --page3-bottom-desktop-large: 18px;
    --page3-bottom-desktop: 18px;
    --page3-bottom-tablet: clamp(13px, 10px + 0.390625vw, 15px);
    --page3-bottom-mobile: 13px;
    --page3-bottom-small-mobile: 11px;

    --content-header-desktop-large: 68px;
    --content-header-desktop: 66px;
    --content-header-tablet: clamp(42px, 4.85vw, 60px);
    --content-header-mobile: 32px;
    --content-header-small-mobile: 26px;
    --content-header2-desktop-large: 24px;
    --content-header2-desktop: 22px;
    --content-header2-tablet: clamp(16px, 1.75vw, 20px);
    --content-header2-mobile: 16px;
    --content-header2-small-mobile: 16px;
    --content-title-desktop-large: 30px;
    --content-title-desktop: 30px;
    --content-title-tablet: 26px;
    --content-title-mobile: 26px;
    --content-title-small-mobile: 24px;
    --content-textL-desktop-large: 22px;
    --content-textL-desktop: 22px;
    --content-textL-tablet: 18px;
    --content-textL-mobile: 18px;
    --content-textL-small-mobile: 16px;
    --content-textS-desktop-large: 18px;
    --content-textS-desktop: 18px;
    --content-textS-tablet: 14px;
    --content-textS-mobile: 14px;
    --content-textS-small-mobile: 12px;

    --footer-text-desktop-large: 14px;
    --footer-text-desktop: 14px;
    --footer-text-tablet: 12px;
    --footer-text-mobile: 12px;
    --footer-text-small-mobile: 10px;
}

/* Style the navigation bar */
.navbar {
    display: flex;                                 /* Use flexbox to align items horizontally */
    justify-content: space-between;                /* Space logo and other content (if added) apart */
    align-items: center;                           /* Vertically center content within navbar */
    background-color: var(--nav-bar-color);        /* Set navbar background color */
    box-shadow: 0 2px 4px var(--shadow-color);     /* Add subtle shadow for depth */
    position: fixed;                               /* Fix navbar to the top of the viewport */
    top: 0;                                        /* Align to top edge */
    left: 0;                                       /* Align to left edge */
    width: 100%;                                   /* Span full viewport width */
    padding: var(--navbar-padding-h) 
             var(--navbar-padding-v);              /* Apply vertical and horizontal padding */
    transition: all 0.3s ease;                     /* Smooth transition for padding changes on scroll */
    min-height: fit-content;
    box-sizing: border-box;                        /* Include padding in width calculations */               
    z-index: 1000;                                 /* Ensure navbar stays above other content */
}
.logo2-container,
.logo1-container {                                 /* Style the container holding the logo */
    display: flex;                                 /* Use flexbox to align items horizontally */
    align-items: center;                           /* Vertically center content within logo-containers */
    justify-content: center;
    flex-shrink: 0;                                /* Prevent logo from shrinking disproportionately */
}
.logo2-container {
    margin-left: 0.5rem;                           /* Added slight margin from left edge */
}
.logo1-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
    .logo2 {                                                   /* Style the logo image */
        height: var(--logo2-height);                           /* Set logo height using variable */
        width: auto;                                           /* Maintain aspect ratio */
        object-fit: contain;
        transition: height 0.3s ease, transform 0.3s ease;     /* Add transitions for height and transform */
    }
    .logo1 {
        height: calc(var(--logo2-height) * 0.8);               /* Set logo height using variable */
    }
.logo2.shrink,
.logo1.shrink,
.nav-button.shrink {                /* Shrink logo size when scrolled */
    transform: scale(0.8);          /* Reduce logo to 80% of original size */
}
.nav-buttons {
    display: flex;                  /* Use flexbox to align items horizontally */
    gap: 1rem;
    flex-shrink: 0;
}
.nav-button {
    padding: 8px 16px;
    text-decoration: none;
    color: var(--nav-button-color);
    background-color: transparent;
    border-radius: 12px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
    white-space: nowrap;
}
.nav-button:hover {
    background-color: var(--button-hover);
    transform: scale(1.02);
}
.nav-button:focus {
    outline: 2px solid var(--button-focus);
}

@media screen and (min-width: 1367px) {                                                              /* Large Desktop */
        .logo1-container {
                left: 50%;
        }
}

@media screen and (min-width: 1281px) 
              and (max-width: 1366px) {                                                              /* Desktop */
        .logo1-container {
                left: calc(50% - 130px);
        }
}

@media screen and (min-width: 768px) 
              and (max-width: 1280px) {                                                              /* Tablet */
        :root {
                --logo2-height: var(--logo2-height-tablet);
                --navbar-padding-v: 0.75rem;
                --navbar-height: calc(var(--logo2-height) + 2 * var(--navbar-padding-h));
        }
        .navbar {
                gap: 1rem;   /* Space between elements */
        }
        .navbar.scrolled {
                padding: calc(var(--navbar-padding-h) / 2) var(--navbar-padding-v);
        }
        .logo2-container {
                flex-shrink: 0;
                margin-left: 0.5rem;
        }
        .logo1-container {
                left: calc(50% - 160px);
        }
        .logo1 {
                height: calc(var(--logo2-height) * 0.8);     /* Set logo height using variable */
        }
        .nav-buttons {
                gap: 0.75rem;
        }
        .nav-button {
                font-size: 0.8rem;     /* 10% reduction from desktop */
        }
}

@media screen and (min-width: 321px) 
              and (max-width: 767px) {                                                               /* Mobile styles */
        :root {
                --logo2-height: var(--logo2-height-mobile);
                --navbar-padding-v: 0.75rem;
                --navbar-height: calc(var(--logo2-height) + 2 * var(--navbar-padding-h));
        }
        .navbar {
                justify-content: flex-start;   /* Align items to the start */
                gap: 0.75rem;                  /* Space between logo2 and logo1 */
                flex-wrap: nowrap;
        }
        .navbar.scrolled {
                padding: calc(var(--navbar-padding-h) / 2) 1rem;
        }
        .logo2-container {
                flex-shrink: 0;
                margin-left: 0.5rem;
        }
        .logo1-container {
                left: 60%;
        }
        .logo1 {
                height: calc(var(--logo2-height) * 0.8);
        }
        .nav-buttons {
                display: none;    /* Hide buttons on mobile */
        }
}

@media screen and (max-width: 380px) {                                                               /* Small mobile */
        :root {
                --logo2-height: var(--logo2-height-small);
                --navbar-padding-v: 0.75rem;
                --navbar-height: calc(var(--logo2-height) + 2 * var(--navbar-padding-h));
        }
        .navbar {
                justify-content: flex-start;   /* Align items to the start */
                gap: 0.75rem;                  /* Space between logo2 and logo1 */
                flex-wrap: nowrap;
        }
        .navbar.scrolled {
                padding: calc(var(--navbar-padding-h) / 2) 1rem;
        }
        .logo1-container {
                left: 60%;
        }
        .logo1 {
                height: calc(var(--logo2-height) * 0.8);
        }
        .nav-buttons {
                display: none; /* Hide buttons on mobile */
        }
}

/* - - - - - - HERO SECTION - - - - - - */
.section_hero {
    position: relative;
    min-height: calc(100vh - var(--navbar-height));
    margin-top: var(--navbar-height);
    background-color: var(--main-background-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
}
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;              /* Ensure video covers the entire section */
    object-position: 50% 50%;       /* Default center focus */
    z-index: 1;
}
.hero-content {
    position: absolute;
    bottom: var(--hero-text-margin-bottom-desktop);    /* Bottom margin for desktop */
    left: var(--hero-text-margin-left-desktop);        /* Left margin for desktop */
    color: var(--white-font-color);
    max-width: 50rem;
    text-align: left;
    text-shadow: 0 0 7px rgba(0, 0, 0, 0.1);           /* Optional: text shadow for readability */
    z-index: 2;
}
.hero-content h1 {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: var(--hero-header-desktop-large);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 12px 0;                                /* Bottom margin */
}
.hero-content h2 {
    font-family: 'Roboto', Arial, sans-serif;
    font-size: var(--hero-text-desktop-large);
    font-style: italic;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 16px 0;                                /* Bottom margin */
}

@media screen and (min-width: 1367px) {                                                              /* Large Desktop */
        .hero-content h1 {
            font-size: var(--hero-header-desktop-large);
            margin: 0 0 12px 0;                        /* Bottom margin */
        }
        .hero-content h2 {
            font-size: var(--hero-text-desktop-large);
            margin: 0 0 16px 0;                        /* Bottom margin */
        }
}

@media screen and (min-width: 1281px) 
              and (max-width: 1366px) {                                                              /* Desktop */
        .hero-content {
            max-width: 40.5rem;     /* 650px */
        }
        .hero-content h1 {
            font-size: var(--hero-header-desktop);
            margin: 0 0 12px 0;                        /* Bottom margin */
        }
        .hero-content h2 {
            font-size: var(--hero-text-desktop);
            margin: 0 0 16px 0;                        /* Bottom margin */
        }
}

@media screen and (min-width: 768px) 
              and (max-width: 1280px) {                                                              /* Tablet */
        .hero-video {
            object-position: 40% 30%;                        /* Tablet: focus on 40% horizontal, 30% vertical */
        }
        .hero-content {
            bottom: var(--hero-text-margin-bottom-tablet);   /* Bottom margin for desktop */
            left: var(--hero-text-margin-left-tablet);       /* Left margin for desktop */
            max-width: 37.5rem;                      
        }
        .hero-content h1 {
            font-size: var(--hero-header-tablet);
            margin: 0 0 12px 0;
        }
        .hero-content h2 {
            font-size: var(--hero-text-tablet);
            margin: 0 0 16px 0;
        }
}

@media screen and (min-width: 321px) 
              and (max-width: 767px) {                                                               /* Mobile styles */
        .hero-video {
            object-position: 60% 50%;                   /* Mobile: focus on 60% horizontal, 50% vertical */
        }
        .hero-content {
            top: var(--hero-text-margin-top-mobile);    /* Bottom margin for desktop */
            left: var(--hero-text-margin-left-mobile);  /* Left margin for desktop */
            max-width: 25rem;                       
        }
        .hero-content h1 {
            font-size: var(--hero-header-mobile);
            margin: 0 0 12px 0;
        }
        .hero-content h2 {
            font-size: var(--hero-text-mobile);
            margin: 0 0 16px 0;
        }
}

@media screen and (max-width: 380px) {                                                               /* Small mobile */
        .hero-video {
            object-position: 60% 50%;                             /* Same as mobile for small screens */
        }
        .hero-content {
            top: var(--hero-text-margin-top-mobile);   /* Bottom margin for desktop */
            left: var(--hero-text-margin-left-mobile);       /* Left margin for desktop */
            max-width: 21.75rem;                              /* 350px */
        }
        .hero-content h1 {
            font-size: var(--hero-header-small-mobile);
            margin: 0 0 12px 0;
        }
        .hero-content h2 {
            font-size: var(--hero-text-small-mobile);
            margin: 0 0 16px 0;
        }
}

/* - - - - - - PAGE_2 SECTION - - - - - - */
.section_page2 {
    display: flex;                                       /* Use flexbox for content layout */
    flex-direction: column;                              /* Stack content vertically */
    background-color: var(--Page2-background-color);
}
.page2-header h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: var(--page2-header-desktop-large);
    color: var(--black-font-color);
    margin-bottom: 15px;
}
.page2-header h2 {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: var(--page2-text-desktop-large);
    font-weight: 400;
    color: var(--black-font-color);
    text-shadow: none;
    max-width: 550px;
    margin: 0 auto 20px;
}

@media screen and (min-width: 1367px) {                                                              /* Large Desktop */
        .section_page2 {
                height: auto;                            /* Let image dictate height */
                position: relative;                      /* For absolute positioning of text */
                overflow: hidden;                        /* Hide overflowing image */
                padding: 0;
        }
        .page2-header {
                position: absolute;                      /* Position text over image */
                top: 160px;                              /* Keep generous top margin */
                left: 0;
                width: 50%;                              /* Left column (column1) */
                text-align: center;                      /* Center text in column1 */
                padding: 1rem;
                z-index: 2;                              /* Above image */
            }
        .page2-header h1 {
                font-size: var(--page2-header-desktop-large);
                margin-bottom: 15px;
        }
        .page2-header h2 {
                font-size: var(--page2-text-desktop-large);
                max-width: 550px;  
                margin: 0 auto 20px;
        }
        .page2-graphic1 {
                width: 100%;
                height: 100%; /* Image sets section height */
                overflow: hidden; /* Hide excess image */
        }
        .page2-graphic1 .page2-image1 {
                width: 166.67%; /* Show only 60% of image (100/0.6 = 166.67%) */
                height: auto; /* Maintain aspect ratio */
                object-fit: cover;
                object-position: 0% 50%; /* Align left, keep vertical center */
                display: block;
        }
}

@media screen and (min-width: 1281px) 
              and (max-width: 1366px) {                                                              /* Desktop */
        .section_page2 {
                height: auto; /* Let image dictate height */
                position: relative; /* For absolute positioning of text */
                overflow: hidden; /* Hide overflowing image */
        }
        .page2-header {
                position: absolute; /* Position text over image */
                top: 140px; /* Keep generous top margin */
                left: 0;
                width: 50%; /* Left column (column1) */
                text-align: center; /* Center text in column1 */
                padding: 1rem;
                z-index: 2; /* Above image */
        }
        .page2-header h1 {
                font-size: var(--page2-header-desktop);
                margin-bottom: 15px;
        }
        .page2-header h2 {
                font-size: var(--page2-text-desktop);
                max-width: 550px;
                margin: 0 auto 20px;
        }
        .page2-graphic1 {
                width: 100%;
                height: 100%; /* Image sets section height */
                overflow: hidden; /* Hide excess image */
        }
        .page2-graphic1 .page2-image1 {
                width: 166.67%; /* Show only 60% of image (100/0.6 = 166.67%) */
                height: auto; /* Maintain aspect ratio */
                object-fit: cover;
                object-position: 0% 50%; /* Align left, keep vertical center */
                display: block;
        }
}

@media screen and (min-width: 768px) 
              and (max-width: 1280px) {                                                              /* Tablet */
        .section_page2 {
            height: auto; /* Let image dictate height */
            position: relative; /* For absolute positioning of text */
            overflow: hidden; /* Hide overflowing image */
        }
        .page2-header {
                position: absolute; /* Position text over image */
                top: 60px; /* Keep generous top margin */
                left: 0;
                width: 50%; /* Left column (column1) */
                text-align: center; /* Center text in column1 */
                padding: 1rem;
                z-index: 2; /* Above image */
        }
        .page2-header h1 {
                font-size: var(--page2-header-tablet);
                margin-bottom: 15px;
        }
        .page2-header h2 {
                font-size: var(--page2-text-tablet);
                max-width: 80%;
                margin: 0 auto 20px;
        }
        .page2-graphic1 {
                width: 100%;
                height: 100%; /* Image sets section height */
                overflow: hidden; /* Hide excess image */
        }
        .page2-graphic1 .page2-image1 {
                width: 190%;
                height: auto; /* Maintain aspect ratio */
                object-fit: cover;
                object-position: 0% 50%; /* Align left, keep vertical center */
                display: block;
        }
}

@media screen and (min-width: 321px) 
              and (max-width: 767px) {                                                               /* Mobile styles */
        .section_page2 {
                height: auto; /* Height driven by text + image */
                flex-direction: column; /* Stack text and image vertically */
        }
        .page2-header {
                text-align: center;
                margin-top: 32px; /* Reduced top margin for mobile */
                padding: 1rem;
                flex-shrink: 0; /* Prevent header from shrinking */
        }
        .page2-header h1 {
                font-size: var(--page2-header-mobile);
                margin-bottom: 10px;
        }
        .page2-header h2 {
                font-size: var(--page2-text-mobile);
                max-width: 90%;
                margin: 0 auto 15px;
        }
        .page2-graphic1 {
                width: 100%;
                height: auto; /* Let image height dictate container */
                overflow-x: hidden; /* Hide horizontal overflow only */
                overflow-y: visible; /* Allow vertical overflow to show full image */
        }
        .page2-graphic1 .page2-image1 {
                width: 250%; /* Show 60% of 150% scaled image (100/0.6 * 1.5 = 250%) */
                height: auto; /* Maintain aspect ratio */
                object-fit: contain; /* Ensure full image is visible without cropping */
                object-position: 0% 0%; /* Align to top-left for maximum left-side focus */
                margin-left: -40%; /* Shift image left to show more of the left side */
                display: block;
        }
}

@media screen and (max-width: 380px) {                                                               /* Small mobile */
        .section_page2 {
                height: auto; /* Height driven by text + image */
                flex-direction: column; /* Stack text and image vertically */
        }
        .page2-header {
                text-align: center;
                margin-top: 32px; /* Reduced top margin for mobile */
                padding: 1rem;
                flex-shrink: 0; /* Prevent header from shrinking */
        }
        .page2-header h1 {
                font-size: var(--page2-header-small-mobile);
                margin-bottom: 10px;
        }
        .page2-header h2 {
                font-size: var(--page2-text-small-mobile);
                max-width: 90%;
                margin: 0 auto 15px;
        }
        .page2-graphic1 {
                width: 100%;
                height: auto; /* Let image height dictate container */
                overflow-x: hidden; /* Hide horizontal overflow only */
                overflow-y: visible; /* Allow vertical overflow to show full image */
        }
        .page2-graphic1 .page2-image1 {
                width: 250%; /* Show 60% of 150% scaled image (100/0.6 * 1.5 = 250%) */
                height: auto; /* Maintain aspect ratio */
                object-fit: contain; /* Ensure full image is visible without cropping */
                object-position: 0% 0%; /* Align to top-left for maximum left-side focus */
                margin-left: -40%; /* Shift image left to show more of the left side */
                display: block;
        }
}

/* - - - - - - PAGE_3 SECTION - - - - - - */
.section_page3 {
    display: block;             /* Use block to avoid flexbox gaps */
    background-color: var(--Page3-background-color);
    height: auto;              /* Match scaled image height */
    position: relative;       /* For absolute positioning of text if present */
    overflow: hidden;          /* Prevent overflow from adding space */
    padding: 0;                /* Remove padding */
    margin: 0;                 /* Remove margins */
}
.page3-content {
    color: #000000; /* White text for contrast on dark background */
    font-family: 'Montserrat', Arial, sans-serif;
    z-index: 2; /* Ensure text is above the image */
}
.page3-text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Space between text blocks */
    padding: 1rem;
}
.page3-text1, .page3-text2, .page3-text3 {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center text horizontally within each block */
    text-align: center;
}
.p1 {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500; /* Normal weight by default */
    font-size: var(--page3-header-desktop-large);
    margin-bottom: 5px;
}
.p2 {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 900;
    font-size: var(--page3-bold-desktop-large);
    margin-bottom: 5px;
}
.p3 {
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 300;
    font-size: var(--page3-bottom-desktop-large);
}

@media screen and (min-width: 1367px) {                                                              /* Large Desktop */
        .section_page3 {
                position: relative; /* For absolute positioning of content */
                height: auto; /* Image dictates height */
                overflow: hidden;
                padding: 0;
                margin: 0;
        }
        .page3-content {
                position: absolute;
                top: 50%;
                left: 64%;
                width: 27%; /* Occupy the third column */
                height: 100%; /* Span full section height */
                transform: translateY(-50%); /* Center vertically */
                display: grid;
                grid-template-rows: 1fr 1fr 1fr; /* Split into three equal rows */
                align-items: center; /* Center content vertically in grid */
                padding-top: 6%; /* Margin from top to text1 */
                padding-bottom: 6%; /* Margin from text3 to bottom */
        }
        .page3-text {
                display: contents; /* Remove flex container to allow grid rows */
        }
        .page3-text1, .page3-text2, .page3-text3 {
                display: flex;
                flex-direction: column;
                justify-content: center; /* Center vertically in each grid row */
                align-items: center; /* Center horizontally in each grid row */
                text-align: center;
        }
        .p1 {
                font-size: var(--page3-header-desktop-large);
                margin-bottom: 5px;
        }
        .p2 {
                font-size: var(--page3-bold-desktop-large);
                margin-bottom: 5px;
        }
        .p3 {
                font-size: var(--page3-bottom-desktop-large);
        }
        .page3-graphic1 {
                width: 100%;
                height: auto;         /* Match scaled image height */
                overflow: hidden;     /* Hide excess image */
                margin: 0;            /* Remove margins */
        }
        .page3-graphic1 .page3-image1 {
                width: 133.34%;       /* 166.67% * 0.8 to scale to 80% of original size */
                height: auto;         /* Maintain aspect ratio */
                object-fit: cover;
                object-position: 0% 50%; /* Align left, keep vertical center */
                display: block;
                margin: 0;            /* Remove margins */
        }
}

@media screen and (min-width: 1281px) 
              and (max-width: 1366px) {                                                              /* Desktop */
        .section_page3 {
                position: relative; /* For absolute positioning of content */
                height: auto; /* Image dictates height */
                overflow: hidden;
                padding: 0;
                margin: 0;
        }
        .page3-content {
                position: absolute;
                top: 50%;
                left: 64%;
                width: 27%; /* Occupy the third column */
                height: 100%; /* Span full section height */
                transform: translateY(-50%); /* Center vertically */
                display: grid;
                grid-template-rows: 1fr 1fr 1fr; /* Split into three equal rows */
                align-items: center; /* Center content vertically in grid */
                padding-top: 5%; /* Margin from top to text1 */
                padding-bottom: 5%; /* Margin from text3 to bottom */
        }
        .page3-text {
                display: contents; /* Remove flex container to allow grid rows */
        }
        .page3-text1, .page3-text2, .page3-text3 {
                display: flex;
                flex-direction: column;
                justify-content: center; /* Center vertically in each grid row */
                align-items: center; /* Center horizontally in each grid row */
                text-align: center;
        }
        .p1 {
                font-size: var(--page3-header-desktop);
                margin-bottom: 5px;
        }
        .p2 {
                font-size: var(--page3-bold-desktop);
                margin-bottom: 5px;
        }
        .p3 {
                font-size: var(--page3-bottom-desktop);
        }
        .page3-graphic1 {
                width: 100%;
                height: auto;         /* Match scaled image height */
                overflow: hidden;     /* Hide excess image */
                margin: 0;            /* Remove margins */
        }
        .page3-graphic1 .page3-image1 {
                width: 133.34%;       /* 166.67% * 0.8 to scale to 80% of original size */
                height: auto;         /* Maintain aspect ratio */
                object-fit: cover;
                object-position: 0% 50%; /* Align left, keep vertical center */
                display: block;
                margin: 0;            /* Remove margins */
        }
}

@media screen and (min-width: 768px) 
              and (max-width: 1280px) {                                                              /* Tablet */
        .section_page3 {
                position: relative; /* For absolute positioning of content */
                height: auto; /* Image dictates height */
                overflow: hidden;
                padding: 0;
                margin: 0;
        }
        .page3-content {
                position: absolute;
                top: 50%;
                left: 64%;
                width: 27%; /* Occupy the third column */
                height: 100%; /* Span full section height */
                transform: translateY(-50%); /* Center vertically */
                display: grid;
                grid-template-rows: 1fr 1fr 1fr; /* Split into three equal rows */
                align-items: center; /* Center content vertically in grid */
                padding-top: 2%; /* Margin from top to text1 */
                padding-bottom: 2%; /* Margin from text3 to bottom */
        }
        .page3-text {
                display: contents; /* Remove flex container to allow grid rows */
        }
        .page3-text1, .page3-text2, .page3-text3 {
                display: flex;
                flex-direction: column;
                justify-content: center; /* Center vertically in each grid row */
                align-items: center; /* Center horizontally in each grid row */
                text-align: center;
        }
        .p1 {
                font-size: var(--page3-header-tablet);
                margin-bottom: 5px;
        }
        .p2 {
                font-size: var(--page3-bold-tablet);
                margin-bottom: 5px;
        }
        .p3 {
                font-size: var(--page3-bottom-tablet);
        }
        .page3-graphic1 {
                width: 100%;
                height: auto;         /* Match scaled image height */
                overflow: hidden;     /* Hide excess image */
                margin: 0;            /* Remove margins */
        }
        .page3-graphic1 .page3-image1 {
                width: 133.34%;       /* 166.67% * 0.8 to scale to 80% of original size */
                height: auto;         /* Maintain aspect ratio */
                object-fit: cover;
                object-position: 0% 50%; /* Align left, keep vertical center */
                display: block;
                margin: 0;            /* Remove margins */
        }
}

@media screen and (min-width: 321px) 
              and (max-width: 767px) {                                                               /* Mobile styles */
        .section_page3 {
                display: flex;
                flex-direction: column; /* Stack text above image */
                height: auto;
                position: relative;
                overflow-x: hidden;
                overflow-y: auto;
                padding: 1rem 0; /* Add padding for spacing */
                margin: 0;
        }
        .page3-content {
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 1rem; /* Space between text and image */
        }
        .page3-text {
                width: 90%; /* Restrict width for readability */
        }
        .p1 {
                font-size: var(--page3-header-mobile);
                margin-bottom: 8px;
        }
        .p2 {
                font-size: var(--page3-bold-mobile);
                margin-bottom: 8px;
        }
        .p3 {
                font-size: var(--page3-bottom-mobile);
        }
        .page3-graphic1 {
                width: 100%;
                height: auto;         /* Match scaled image height */
                overflow-x: hidden;   /* Hide horizontal overflow */
                overflow-y: auto;     /* Allow image to dictate height */
                margin: 0;            /* Remove margins */
        }
        .page3-graphic1 .page3-image1 {
                width: 200%;          /* 250% * 0.8 to scale to 80% of original size */
                height: auto;         /* Maintain aspect ratio */
                object-fit: contain;  /* Ensure full image is visible without cropping */
                object-position: 0% 0%; /* Align to top-left for maximum left-side focus */
                margin-left: -10%;    /* Shift image left to show more of the left side */
                display: block;
                margin-top: 0;        /* Explicitly remove top margin */
                margin-bottom: 0;     /* Explicitly remove bottom margin */
        }
}

@media screen and (max-width: 380px) {                                                               /* Small mobile */
        .section_page3 {
                display: flex;
                flex-direction: column; /* Stack text above image */
                height: auto;
                position: relative;
                overflow-x: hidden;
                overflow-y: auto;
                padding: 1rem 0; /* Add padding for spacing */
                margin: 0;
        }
        .page3-content {
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 1rem; /* Space between text and image */
        }
        .page3-text {
                width: 90%; /* Restrict width for readability */
        }
        .p1 {
                font-size: var(--page3-header-small-mobile);
                margin-bottom: 5px;
        }
        .p2 {
                font-size: var(--page3-bold-small-mobile);
                margin-bottom: 5px;
        }
        .p3 {
                font-size: var(--page3-bottom-small-mobile);
        }
        .page3-graphic1 {
                width: 100%;
                height: auto;         /* Match scaled image height */
                overflow-x: hidden;   /* Hide horizontal overflow */
                overflow-y: auto;     /* Allow image to dictate height */
                margin: 0;            /* Remove margins */
        }
        .page3-graphic1 .page3-image1 {
                width: 200%;          /* 250% * 0.8 to scale to 80% of original size */
                height: auto;         /* Maintain aspect ratio */
                object-fit: contain;  /* Ensure full image is visible without cropping */
                object-position: 0% 0%; /* Align to top-left for maximum left-side focus */
                margin-left: -10%;    /* Shift image left to show more of the left side */
                display: block;
                margin-top: 0;        /* Explicitly remove top margin */
                margin-bottom: 0;     /* Explicitly remove bottom margin */
        }
}

/* - - - - - - PAGE_4 SECTION - - - - - - */
.section_page4 {
    background-color: var(--Page4-background-color); /* Very dark background */
    color: var(--white-font-color); /* White text */
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 0; /* Top/bottom margin and side padding */
    min-height: fit-content; /* Height based on content */
    box-sizing: border-box;
}
.page4-content {
    text-align: center;
    padding: 0 20px; /* Horizontal padding for cpntent */
}
.page4-content h1 {
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    margin: 10px 0;
}

.page4-content h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    margin: 10px 0;
}

@media screen and (min-width: 1367px) {                                                              /* Large Desktop */
        .page4-content h1 {
                font-size: var(--content-title-desktop-large);
        }
        .page4-content h2 {
                font-size: var(--content-textL-desktop-large);
        }
}

@media screen and (min-width: 1281px) 
              and (max-width: 1366px) {                                                              /* Desktop */
        .page4-content h1 {
                font-size: var(--content-title-desktop);
        }
        .page4-content h2 {
                font-size: var(--content-textL-desktop);
        }
}

@media screen and (min-width: 768px) 
              and (max-width: 1280px) {                                                              /* Tablet */
        .page4-content h1 {
                font-size: var(--content-title-tablet);
        }
        .page4-content h2 {
                font-size: var(--content-textL-tablet);
        }
}

@media screen and (min-width: 321px) 
              and (max-width: 767px) {                                                               /* Mobile styles */
        .page4-content h1 {
                font-size: var(--content-title-mobile);
        }
        .page4-content h2 {
                font-size: var(--content-textL-mobile);
        }
}

@media screen and (max-width: 380px) {                                                               /* Small mobile */
        .page4-content h1 {
                font-size: var(--content-title-small-mobile);
        }
        .page4-content h2 {
                font-size: var(--content-textL-small-mobile);
        }
}

/* - - - - - - PAGE_5 SECTION - - - - - - */
.section_page5 {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    touch-action: pan-y;                                /* Allows vertical scrolling on touch */
    display: flex;                                      /* Use flexbox for content layout */
    flex-direction: column;                             /* Stack content vertically */
    justify-content: center;                            /* Center content vertically */
    align-items: center;                                /* Center content horizontally */
    text-align: center;                                 /* Center text content */
    padding: 20px;                                      /* Add inner spacing */
    box-sizing: border-box;                             /* Include padding in size calculations */
    min-height: 100vh;                                  /* Allow content to dictate height, with minimum full viewport */
    background-color: var(--main-background-color);
}
.layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.layer.rent {
    z-index: 1;
    clip-path: polygon(calc(50% - 50% * tan(30deg)) 0%, 100% 0%, 100% 100%, calc(50% + 50% * tan(30deg)) 100%);
}
.layer.buy {
    z-index: 2;
    clip-path: polygon(0% 0%, calc(50% - 50% * tan(30deg)) 0%, calc(50% + 50% * tan(30deg)) 100%, 0% 100%);
}
.page5-content {
    position: relative;
    width: 100%;
    height: 100%;
}
.page5-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.page5-text {
    position: absolute;
    top: 20px;
    padding: 20px;
    color: var(--white-font-color);
    max-width: 400px;
    z-index: 2;
    background: rgba(150, 150, 150, 0.5);
    border-radius: 8px;                         /* Optional: adds rounded corners for a smoother look */
}
.layer.rent .page5-text {
    right: 20px;
    text-align: right;
}
.layer.buy .page5-text {
    left: 20px;
    text-align: left;
}
.page5-text h1 {
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: var(--content-title-desktop-large);
    margin: 0 0 10px;
}
.page5-text p {
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    font-size: var(--content-textS-desktop-large);
    text-shadow: none;
    max-width: 600px;
    margin: 0 0 30px;
}
.page5-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--button-orange);
    color: var(--white-font-color);
    text-decoration: none;
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: var(--content-textS-desktop-large);
    border-radius: 5px;
    transition: background-color 0.3s;
}
.page5-button:hover {
    background-color: var(--button-orange-hover);
}
.handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 5px;
    height: 100%;
    background: orange;
    transform: skewX(30deg);
    transform-origin: center;
    cursor: ew-resize;
    z-index: 4;
    user-select: none;
    touch-action: none;
}

@media screen and (min-width: 1367px) {                                                              /* Large Desktop */
        .layer.rent .page5-text {
                right: 20px;
                text-align: right;
                max-width: 600px;
        }
        .layer.buy .page5-text {
                left: 20px;
                text-align: left;
                max-width: 600px;
        }
        .page5-text h1 {
                font-size: var(--content-title-desktop-large);
                margin: 0 0 10px;
        }
        .page5-text p {
                font-size: var(--content-textS-desktop-large);
                margin: 0 0 30px;
        }
        .page5-button {
                font-size: var(--content-textS-desktop-large);
        }
}

@media screen and (min-width: 1281px) 
              and (max-width: 1366px) {                                                              /* Desktop */
        .layer.rent .page5-text {
                right: 20px;
                text-align: right;
                max-width: 550px;
        }
        .layer.buy .page5-text {
                left: 20px;
                text-align: left;
                max-width: 550px;
        }
        .page5-text h1 {
                font-size: var(--content-title-desktop);
                margin: 0 0 10px;
        }
        .page5-text p {
                font-size: var(--content-textS-desktop);
                margin: 0 0 30px;
        }
        .page5-button {
                font-size: var(--content-textS-desktop);
        }
}

@media screen and (min-width: 768px) 
              and (max-width: 1280px) {                                                              /* Tablet */
        .layer.rent .page5-text {
                right: 20px;
                text-align: right;
                max-width: 500px;
        }
        .layer.buy .page5-text {
                left: 20px;
                text-align: left;
                max-width: 500px;
        }
        .page5-text h1 {
                font-size: var(--content-title-tablet);
                margin: 0 0 10px;
        }
        .page5-text p {
                font-size: var(--content-textS-tablet);
                max-width: 550px;
                margin: 0 0 30px;
        }
        .page5-button {
                font-size: var(--content-textS-tablet);
        }
}

@media screen and (min-width: 321px) 
              and (max-width: 767px) {                                                               /* Mobile styles */
        .page5-text {
                border-radius: 8px;
                max-width: 70%;
        }
        .page5-text h1 {
                font-size: var(--content-title-mobile);
                margin: 0 0 10px;
        }
        .page5-text p {
                font-size: var(--content-textS-mobile);
                margin: 0 0 30px;
        }
        .page5-button {
                font-size: var(--content-textS-mobile);
        }
        .handle {
                transform: skewX(5deg);
        }
        .layer.rent {
                clip-path: polygon(calc(50% - 50% * tan(5deg)) 0%, 100% 0%, 100% 100%, calc(50% + 50% * tan(5deg)) 100%);
        }
        .layer.buy {
                clip-path: polygon(0% 0%, calc(50% - 50% * tan(5deg)) 0%, calc(50% + 50% * tan(5deg)) 100%, 0% 100%);
        }
}

@media screen and (max-width: 380px) {                                                               /* Small mobile */
        .page5-text {
                border-radius: 8px;
                max-width: 70%;
        }
        .page5-text h1 {
                font-size: var(--content-title-small-mobile);
                margin: 0 0 10px;
        }
        .page5-text p {
                font-size: var(--content-textS-small-mobile);
                margin: 0 0 30px;
        }
        .page5-button {
                font-size: var(--content-textS-small-mobile);
        }
        .handle {
                transform: skewX(5deg);
        }
        .layer.rent {
                clip-path: polygon(calc(50% - 50% * tan(5deg)) 0%, 100% 0%, 100% 100%, calc(50% + 50% * tan(5deg)) 100%);
        }
        .layer.buy {
                clip-path: polygon(0% 0%, calc(50% - 50% * tan(5deg)) 0%, calc(50% + 50% * tan(5deg)) 100%, 0% 100%);
        }
}

/* - - - - - - PAGE_6 SECTION - - - - - - */
.section_page6 {
    background-color: var(--Page4-background-color);
    color: var(--white-font-color);
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 0; /* Top/bottom margin and side padding */
    min-height: fit-content; /* Height based on content */
    box-sizing: border-box;
}
.page6-content {
    text-align: center;
    padding: 0 20px; /* Horizontal padding for cpntent */
}
.page6-content h1 {
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    margin: 10px 0;
}

.page6-content h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    margin: 10px 0;
}

@media screen and (min-width: 1367px) {                                                              /* Large Desktop */
        .page6-content h1 {
                font-size: var(--content-title-desktop-large);
        }
        .page6-content h2 {
                font-size: var(--content-textL-desktop-large);
        }
}

@media screen and (min-width: 1281px) 
              and (max-width: 1366px) {                                                              /* Desktop */
        .page6-content h1 {
                font-size: var(--content-title-desktop);
        }
        .page6-content h2 {
                font-size: var(--content-textL-desktop);
        }
}

@media screen and (min-width: 768px) 
              and (max-width: 1280px) {                                                              /* Tablet */
        .page6-content h1 {
                font-size: var(--content-title-tablet);
        }
        .page6-content h2 {
                font-size: var(--content-textL-tablet);
        }
}

@media screen and (min-width: 321px) 
              and (max-width: 767px) {                                                               /* Mobile styles */
        .page6-content h1 {
                font-size: var(--content-title-mobile);
        }
        .page6-content h2 {
                font-size: var(--content-textL-mobile);
        }
}

@media screen and (max-width: 380px) {                                                               /* Small mobile */
        .page6-content h1 {
                font-size: var(--content-title-small-mobile);
        }
        .page6-content h2 {
                font-size: var(--content-textL-small-mobile);
        }
}

/* - - - - - - PAGE_7 SECTION - - - - - - */
.section_page7 {
    position: relative;
    width: 100vw;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.section_page7 img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* - - - - - - PAGE_8 SECTION - - - - - - */
.section_page8 {
    position: relative; /* For absolute positioning of header and video */
    min-height: 100vh; /* Ensure full viewport height */
    display: flex; /* Flexbox for layout */
    flex-direction: column; /* Stack video and bottom content vertically */
    background-color: var(--Spec-background-color);
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden; /* Prevent horizontal overflow */
}
.page8-video {
    position: relative; /* Natural flow */
    width: 70%;
    height: auto;
    object-fit: contain; /* Show entire video without black bars */
    object-position: 50% 50%; /* Center video */
    z-index: 1; /* Behind header text */
    margin: 17vw auto 0; /* Center with small top margin */
    display: block; /* Remove inline gaps */
    border: none; /* Ensure no border */
    padding: 0; /* Remove padding */
}
.page8-header {
    position: absolute; /* Position over video */
    top: 3rem; /* Generous top margin */
    left: 4rem; /* Generous left margin */
    text-align: left; /* Left-aligned text */
    z-index: 2; /* Above video */
    max-width: 50%; /* Limit text width */
}
.page8-header h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: var(--content-header-desktop-large);
    color: var(--black-font-color);
    margin-bottom: 15px;
}
.page8-header h2 {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: var(--content-header2-desktop-large);
    font-weight: 400;
    color: var(--black-font-color);
    text-shadow: none;
    max-width: 550px; /* 50% width * 80% * 1367px = 550px */
    margin: 0 0 0.6rem 0; /* Added bottom margin for spacing */
}
.page8-content-bottom {
    display: flex; /* Two-column layout */
    justify-content: center; /* Center content */
    gap: 2rem; /* Space between columns */
    padding: 1rem; /* Padding around bottom section */
    margin-top: 1rem; /* Small margin below video */
    position: relative; /* Ensure it stacks below video */
    z-index: 2; /* Above video */
    width: 90%; /* Match video width */
    margin-left: auto; /* Center */
    margin-right: auto; /* Center */
}
.page8-bottom-left {
    flex: 0 0 50%; /* Image takes 50% of container width */
}
.image8_bottom {
    width: 100%;
    height: auto;
    border-radius: 30px; /* Rounded edges */
    object-fit: cover;
}
.page8-bottom-right {
    flex: 1; /* Text takes remaining space */
    text-align: left; /* Left-aligned text */
    margin-left: 1rem; /* Margin from image */
}
.page8-bottom-right h1 {
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: var(--content-title-desktop-large);
    margin-bottom: 15px;
}
.page8-bottom-right p {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: var(--content-textL-desktop-large);
    margin-bottom: 1rem;
}

@media screen and (min-width: 1367px) {                                                              /* Large Desktop */
        .page8-video {
                width: 70%;
                margin: 17vw auto 0; /* Center with small top margin */
        }
        .page8-header {
                top: 3rem; /* Generous top margin */
                left: 4rem; /* Generous left margin */
                max-width: 50%; /* Limit text width */
        }
        .page8-header h1 {
                font-size: var(--content-header-desktop-large);
                margin-bottom: 15px;
        }
        .page8-header h2 {
                font-size: var(--content-header2-desktop-large);
                max-width: 550px; /* 50% width * 80% * 1367px = 550px */
                margin: 0 0 0.6rem 0; /* Added bottom margin for spacing */
        }
        .page8-content-bottom {
                gap: 2rem; /* Space between columns */
                padding: 1rem; /* Padding around bottom section */
                margin-top: 1rem; /* Small margin below video */
                width: 90%; /* Match video width */
        }
        .page8-bottom-right {
                margin-left: 1rem; /* Margin from image */
        }
        .page8-bottom-right h1 {
                font-size: var(--content-title-desktop-large);
                margin-bottom: 15px;
        }
        .page8-bottom-right p {
                font-size: var(--content-textL-desktop-large);
                margin-bottom: 1rem;
        }
}

@media screen and (min-width: 1281px) 
              and (max-width: 1366px) {                                                              /* Desktop */
        .page8-video {
                width: 70%;
                margin: 17vw auto 0; /* Center with small top margin */
        }
        .page8-header {
                top: 3rem; /* Generous top margin */
                left: 4rem; /* Generous left margin */
        }
        .page8-header h1 {
                font-size: var(--content-header-desktop);
                margin-bottom: 15px;
        }
        .page8-header h2 {
                font-size: var(--content-header2-desktop);
                max-width: 550px; /* 50% width * 80% * 1367px = 550px */
                margin: 0 0 0.6rem 0; /* Added bottom margin for spacing */
        }
        .page8-content-bottom {
                gap: 2rem; /* Space between columns */
                padding: 1rem; /* Padding around bottom section */
                margin-top: 1rem; /* Small margin below video */
                width: 90%; /* Match video width */
        }
        .page8-bottom-right {
                margin-left: 1rem; /* Margin from image */
        }
        .page8-bottom-right h1 {
                font-size: var(--content-title-desktop);
                margin-bottom: 15px;
        }
        .page8-bottom-right p {
                font-size: var(--content-textL-desktop);
                margin-bottom: 1rem;
        }
}

@media screen and (min-width: 768px) 
              and (max-width: 1280px) {                                                              /* Tablet */
        .page8-video {
                width: 70%;
                margin: 23vw auto 0; /* Center with small top margin */
        }
        .page8-header {
                top: 3rem; /* Generous top margin */
                left: 4rem; /* Generous left margin */
        }
        .page8-header h1 {
                font-size: var(--content-header-tablet);
                margin-bottom: 15px;
        }
        .page8-header h2 {
                font-size: var(--content-header2-tablet);
                max-width: 500px;
                margin: 0 0 0.6rem 0; /* Added bottom margin for spacing */
        }
        .page8-content-bottom {
                gap: 2rem; /* Space between columns */
                padding: 1rem; /* Padding around bottom section */
                margin-top: 1rem; /* Small margin below video */
                width: 90%; /* Match video width */
        }
        .page8-bottom-left {
                flex: 0 0 40%; /* Image takes 40% of container width */
        }
        .page8-bottom-right {
                margin-left: 1rem; /* Margin from image */
        }
        .page8-bottom-right h1 {
                font-size: var(--content-title-tablet);
                margin-bottom: 15px;
        }
        .page8-bottom-right p {
                font-size: var(--content-textL-tablet);
                margin-bottom: 1rem;
        }
}

@media screen and (min-width: 321px) 
              and (max-width: 767px) {                                                               /* Mobile styles */
        .section_page8 {
                width: 100%; /* Full width */
                margin: 0; /* Remove centering margin */
                flex-direction: column; /* Stack vertically */
        }
        .page8-header {
                position: relative; /* Natural flow */
                top: 0;
                left: 0;
                text-align: center; /* Centered text */
                max-width: 100%; /* Full width */
                padding: 1rem;
                order: 1; /* First in layout */
        }
        .page8-header h1 {
                font-size: var(--content-header-mobile);
        }
        .page8-header h2 {
                font-size: var(--content-header2-mobile);
                margin: 0 0 10px 0;
                max-width: 90%; /* Restrict width */
                margin-left: auto;
                margin-right: auto;
        }
        .page8-video {
                width: 100%; /* Full width */
                max-width: none; /* No max-width limit */
                height: auto; /* Let video dictate height */
                margin: 0; /* No margins */
                object-fit: contain; /* Show entire video without black bars */
                order: 2; /* Second in layout */
        }
        .page8-content-bottom {
                flex-direction: column; /* Stack vertically */
                gap: 1rem; /* Space between elements */
                padding: 1rem;
                margin-top: 0; /* No extra margin */
                width: 100%; /* Full width */
                order: 3; /* Third in layout */
        }
        .page8-bottom-right {
                text-align: center; /* Centered text */
                order: 1; /* Text before image */
                margin-left: auto; /* Remove margin for mobile */
                margin-right: auto;
                width: 90%; /* Text 90% width */
        }
        .page8-bottom-left {
                flex: none; /* Remove fixed width */
                width: 90%; /* Image 90% width */
                margin: 0 auto; /* Center image */
                order: 2; /* Image after text */
        }
        .page8-bottom-right h1 {
                font-size: var(--content-title-mobile);
                margin-bottom: 15px;
        }
        .page8-bottom-right p {
                font-size: var(--content-textS-mobile);
                margin-bottom: 1rem;
        }
}

@media screen and (max-width: 380px) {                                                               /* Small mobile */
        .section_page8 {
                width: 100%; /* Full width */
                margin: 0;
                flex-direction: column; /* Stack vertically */
        }
        .page8-header h1 {
                font-size: var(--content-header-small-mobile);
        }
        .page8-header h2 {
                font-size: var(--content-header2-small-mobile);
                max-width: 90%;
                margin-left: auto;
                margin-right: auto;
        }
        .page8-bottom-right h1 {
                font-size: var(--content-title-small-mobile);
        }
        .page8-bottom-right p {
            font-size: var(--content-textS-small-mobile);
        }
}

/* - - - - - - PAGE_9 SECTION - - - - - - */
.section_page9 {
    position: relative;
    width: 100%;
    height: 100vh; /* Matches the height of the background image */
    overflow: hidden;
}
.image9 {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the section without distortion */
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1; /* Places image behind text */
}
.section_left {
    position: absolute;
    top: 20px; /* Margin from top */
    color: var(--white-font-color);
    padding: 20px;
    left: 20px; /* Margin from left */
    text-align: left;
    max-width: 30%;
}
.section_right {
    position: absolute;
    top: 50px; /* Margin from top */
    color: var(--white-font-color);
    padding: 20px;
    right: 20px; /* Margin from right */
    text-align: right;
    max-width: 30%;
}
.section_left h1 {
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: var(--content-title-desktop-large);
    margin-bottom: 15px;
}
.section_left p {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: var(--content-textL-desktop-large);
    margin-bottom: 1rem;
}
.section_right p {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: var(--content-textL-desktop-large);
    margin-bottom: 1rem;
}

@media screen and (min-width: 1367px) {                                                              /* Large Desktop */
        .section_left {
                top: 20px; /* Margin from top */
                padding: 20px;
                left: 20px; /* Margin from left */
                max-width: 30%;
        }
        .section_right {
                top: 50px; /* Margin from top */
                padding: 20px;
                right: 20px; /* Margin from right */
                max-width: 30%;
        }
        .section_left h1 {
                font-size: var(--content-title-desktop-large);
                margin-bottom: 15px;
        }
        .section_left p {
                font-size: var(--content-textL-desktop-large);
                margin-bottom: 1rem;
        }
        .section_right p {
                font-size: var(--content-textL-desktop-large);
                margin-bottom: 1rem;
        }
}

@media screen and (min-width: 1281px) 
              and (max-width: 1366px) {                                                              /* Desktop */
        .section_left {
                top: 20px; /* Margin from top */
                padding: 20px;
                left: 20px; /* Margin from left */
                max-width: 30%;
        }
        .section_right {
                top: 50px; /* Margin from top */
                padding: 20px;
                right: 20px; /* Margin from right */
                max-width: 30%;
        }
        .section_left h1 {
                font-size: var(--content-title-desktop);
                margin-bottom: 15px;
        }
        .section_left p {
                font-size: var(--content-textL-desktop);
                margin-bottom: 1rem;
        }
        .section_right p {
                font-size: var(--content-textL-desktop);
                margin-bottom: 1rem;
        }
}

@media screen and (min-width: 768px) 
              and (max-width: 1280px) {                                                              /* Tablet */
        .section_left {
                top: 20px; /* Margin from top */
                padding: 20px;
                left: 20px; /* Margin from left */
                max-width: 30%;
        }
        .section_right {
                top: 50px; /* Margin from top */
                padding: 20px;
                right: 20px; /* Margin from right */
                max-width: 30%;
        }
        .section_left h1 {
                font-size: var(--content-title-tablet);
                margin-bottom: 15px;
        }
        .section_left p {
                font-size: var(--content-textL-tablet);
                margin-bottom: 1rem;
        }
        .section_right p {
                font-size: var(--content-textL-tablet);
                margin-bottom: 1rem;
        }
}

@media screen and (min-width: 321px) 
              and (max-width: 767px) {                                                               /* Mobile styles */

        .section_page9 {
                display: flex; /* Enable Flexbox */
                flex-direction: column; /* Stack vertically */
                justify-content: space-between; /* Push children to top and bottom */
                min-height: 100vh; /* Ensure full viewport height */
                padding: 20px; /* Add padding to avoid content touching edges */
                box-sizing: border-box; /* Include padding in height calculation */
        }
        .section_left {
                position: static; /* Remove absolute positioning */
                text-align: center;
                max-width: 90%; /* Wider content for readability */
                margin: 0 auto; /* Center horizontally, no top margin */
                background: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
                padding: 15px;
                border-radius: 8px; /* Rounded corners */
        }
        .section_right {
                position: static; /* Remove absolute positioning */
                text-align: center;
                max-width: 90%; /* Wider content for readability */
                margin: 0 auto; /* Center horizontally */
                background: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
                padding: 15px;
                border-radius: 8px; /* Rounded corners */
                margin-top: auto; /* Push to bottom within flex container */
        }
        .section_left h1 {
                font-size: var(--content-title-mobile);
                margin-bottom: 15px;
        }
        .section_left p {
                font-size: var(--content-textS-mobile);
                margin-bottom: 1rem;
        }
        .section_right p {
                font-size: var(--content-textS-mobile);
                margin-bottom: 1rem;
        }
}

@media screen and (max-width: 380px) {                                                               /* Small mobile */
        .section_page9 {
                display: flex; /* Enable Flexbox */
                flex-direction: column; /* Stack vertically */
                justify-content: space-between; /* Push children to top and bottom */
                min-height: 100vh; /* Ensure full viewport height */
                padding: 20px; /* Add padding to avoid content touching edges */
                box-sizing: border-box; /* Include padding in height calculation */
        }
        .section_left {
                position: static; /* Remove absolute positioning */
                text-align: center;
                max-width: 90%; /* Wider content for readability */
                margin: 0 auto; /* Center horizontally, no top margin */
                background: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
                padding: 15px;
                border-radius: 8px; /* Rounded corners */
        }
        .section_right {
                position: static; /* Remove absolute positioning */
                text-align: center;
                max-width: 90%; /* Wider content for readability */
                margin: 0 auto; /* Center horizontally */
                background: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
                padding: 15px;
                border-radius: 8px; /* Rounded corners */
                margin-top: auto; /* Push to bottom within flex container */
        }
        .section_left h1 {
                font-size: var(--content-title-small-mobile);
                margin-bottom: 15px;
        }
        .section_left p {
                font-size: var(--content-textS-small-mobile);
                margin-bottom: 1rem;
        }
        .section_right p {
                font-size: var(--content-textS-small-mobile);
                margin-bottom: 1rem;
        }
}

/* - - - - - - PAGE_10 SECTION - - - - - - */
.section_page10 {
    background-color: var(--Spec-background-color);
    position: relative;
    width: 100%;
    overflow: hidden;
}
.page10-top {
    margin: 40px 20px 30px 30px; /* top | right | bottom | left */
    text-align: left;
}
.page10-top h1 {
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: var(--content-title-desktop-large);
    margin-bottom: 15px;
}
.page10-top p {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: var(--content-textL-desktop-large);
    text-align: left; /* Left-justified text */
    max-width: 50%;
    margin-bottom: 30px;
}
.page10-top-pictures {
    display: flex;
    flex-direction: row;
    gap: 70px; /* Increased gap between pictures */
    margin-bottom: 40px;
    justify-content: center; /* Center pictures */
    width: 100%; /* Ensure full width for centering */
}
.page10-top-pictures img {
    width: 25%; /* Reduced by 20% from 32% */
    height: auto;
    object-fit: cover;
    border-radius: 40px; /* Added 40px border-radius */
}

@media screen and (min-width: 1367px) {                                                              /* Large Desktop */
        .page10-top {
                margin: 40px 20px 30px 30px; /* top | right | bottom | left */
                text-align: left;
        }
        .page10-top h1 {
                font-size: var(--content-title-desktop-large);
                margin-bottom: 15px;
        }
        .page10-top p {
                font-size: var(--content-textL-desktop-large);
                max-width: 50%;
                margin-bottom: 30px;
        }
        .page10-top-pictures {
                gap: 70px; /* Increased gap between pictures */
                margin-bottom: 40px;
                width: 100%; /* Ensure full width for centering */
        }
        .page10-top-pictures img {
                width: 25%; /* Reduced by 20% from 32% */
                border-radius: 40px; /* Added 40px border-radius */
        }
}

@media screen and (min-width: 1281px) 
              and (max-width: 1366px) {                                                              /* Desktop */
        .page10-top {
                margin: 40px 20px 30px 30px; /* top | right | bottom | left */
                text-align: left;
        }
        .page10-top h1 {
                font-size: var(--content-title-desktop);
                margin-bottom: 15px;
        }
        .page10-top p {
                font-size: var(--content-textL-desktop);
                max-width: 50%;
                margin-bottom: 30px;
        }
        .page10-top-pictures {
                gap: 70px; /* Increased gap between pictures */
                margin-bottom: 40px;
                width: 100%; /* Ensure full width for centering */
        }
        .page10-top-pictures img {
                width: 25%; /* Reduced by 20% from 32% */
                border-radius: 40px; /* Added 40px border-radius */
        }
}

@media screen and (min-width: 768px) 
              and (max-width: 1280px) {                                                              /* Tablet */
        .page10-top {
                margin: 40px 20px 30px 30px; /* top | right | bottom | left */
                text-align: left;
        }
        .page10-top h1 {
                font-size: var(--content-title-tablet);
        }
        .page10-top p {
                font-size: var(--content-textL-tablet);
                max-width: 75%;
                margin-bottom: 30px;
        }
        .page10-top-pictures {
                gap: 40px; /* Increased gap between pictures */
                margin-bottom: 40px;
        }
        .page10-top-pictures img {
                width: 25%; /* Reduced by 20% from 32% */
                border-radius: 40px; /* Added 40px border-radius */
        }
}

@media screen and (min-width: 321px) 
              and (max-width: 767px) {                                                               /* Mobile styles */
        .page10-top {
                text-align: center;
                margin: 2rem auto 40px; /* Reduced bottom margin for mobile */
                max-width: 100%;
        }
        .page10-top h1 {
                text-align: center;
                font-size: var(--content-title-mobile);
        }
        .page10-top p {
                text-align: center; /* Center-justified text */
                max-width: 90%;
                margin-left: auto;
                margin-right: auto;
                font-size: var(--content-textS-mobile);
        }
        .page10-top-pictures {
                flex-direction: column;
                gap: 20px;
                justify-content: center;
                align-items: center;
        }
        .page10-top-pictures img {
                width: 70%;
                border-radius: 30px;
        }
}

@media screen and (max-width: 380px) {                                                               /* Small mobile */
        .page10-top {
                text-align: center;
                margin: 2rem auto 40px;
                max-width: 100%;
        }
        .page10-top h1 {
                text-align: center;
                font-size: var(--content-title-small-mobile);
        }
        .page10-top p {
                text-align: center; /* Center-justified text */
                max-width: 90%;
                margin-left: auto;
                margin-right: auto;
                font-size: var(--content-textS-small-mobile);
        }
        .page10-top-pictures img {
                width: 70%;
                border-radius: 30px;
        }
}

/* - - - - - - PAGE_11 SECTION - - - - - - */
.section_page11 {
    background-color: var(--Spec-background-color);
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: fit-content;
    width: 100%;
}
.image11_mono {
    width: 60%;
    height: auto;
    object-fit: cover;
}
.page11-text {
    width: 40%;
    padding: 0 5%;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.page11-text h1 {
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: var(--content-title-desktop-large);
    margin-bottom: 15px;
}
.page11-text p {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: var(--content-textL-desktop-large);
    text-align: left; /* Left-justified text */
    margin-bottom: 30px;
}

@media screen and (min-width: 1367px) {                                                              /* Large Desktop */
        .image11_mono {
                width: 60%;
        }
        .page11-text {
                width: 40%;
                padding: 0 5%;
        }
        .page11-text h1 {
                font-size: var(--content-title-desktop-large);
                margin-bottom: 15px;
        }
        .page11-text p {
                font-size: var(--content-textL-desktop-large);
                margin-bottom: 30px;
        }
}

@media screen and (min-width: 1281px) 
              and (max-width: 1366px) {                                                              /* Desktop */
        .image11_mono {
                width: 60%;
        }
        .page11-text {
                width: 40%;
                padding: 0 5%;
        }
        .page11-text h1 {
                font-size: var(--content-title-desktop);
                margin-bottom: 15px;
        }
        .page11-text p {
                font-size: var(--content-textL-desktop);
                margin-bottom: 30px;
        }
}

@media screen and (min-width: 768px) 
              and (max-width: 1280px) {                                                              /* Tablet */
        .image11_mono {
                width: 50%;
        }
        .page11-text {
                width: 50%;
                padding: 0 5%;
        }
        .page11-text h1 {
                font-size: var(--content-title-tablet);
                margin-bottom: 15px;
        }
        .page11-text p {
                font-size: var(--content-textL-tablet);
                margin-bottom: 30px;
        }
}

@media screen and (min-width: 321px) 
              and (max-width: 767px) {                                                               /* Mobile styles */
        .section_page11 {
                display: flex;
                flex-direction: column;
                align-items: center;
                min-height: fit-content;
                width: 100%;
                padding: 0 0;
        }
        .page11-text {
                width: 90%;
                text-align: center;
                margin-bottom: 0.5rem;
                margin-top: 0.5rem;
        }
        .page11-text h1 {
                font-size: var(--content-title-mobile);
                margin-bottom: 1rem;
        }
        .page11-text p {
                font-size: var(--content-textS-mobile);
                line-height: 1.5;
                text-align: center;
        }
        .image11_mono {
                width: 90%;
                height: auto;
                object-fit: cover;
        }
}

@media screen and (max-width: 380px) {                                                               /* Small mobile */
        .section_page11 {
                display: flex;
                flex-direction: column;
                align-items: center;
                min-height: fit-content;
                width: 100%;
                padding: 0 0;
        }
        .page11-text {
                width: 90%;
                text-align: center;
                margin-bottom: 0.5rem;
                margin-top: 0.5rem;
        }
        .page11-text h1 {
                font-size: var(--content-title-small-mobile);
                margin-bottom: 1rem;
        }
        .page11-text p {
                font-size: var(--content-textS-small-mobile);
                line-height: 1.5;
                text-align: center;
        }
        .image11_mono {
                width: 90%;
                height: auto;
                object-fit: cover;
        }
}

/* - - - - - - PAGE_12 SECTION - - - - - - */
.section_page12 {
    margin: 0;
    padding: 0;
    width: 100vw;
    position: relative;
    overflow: hidden;
    background-color: var(--Spec-background-color);
}
.page12-text-wrapper {
    position: absolute;
    max-width: 40%; /* Limit text width for readability */
    margin-left: 5%; /* Generous left margin */
    text-align: left;
}
.page12-text-wrapper h1 {
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: var(--content-title-desktop-large);
    margin-bottom: 15px;
}
.page12-text-wrapper p {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: var(--content-textL-desktop-large);
}

@media screen and (min-width: 1367px) {                                                              /* Large Desktop */
        .section_page12 {
                height: auto; /* Let height be determined by image */
                display: flex;
                align-items: center; /* Vertically center text */
                background-image: none; /* Remove background image */
        }
        .image12_duct {
                display: block; /* Show the img tag */
                width: 100vw; /* Full viewport width */
                height: auto; /* Maintain aspect ratio */
        }
        .page12-text-wrapper {
                position: absolute;
                max-width: 40%; /* Limit text width for readability */
                margin-left: 5%; /* Generous left margin */
        }
        .page12-text-wrapper h1 {
                font-size: var(--content-title-desktop-large);
                margin-bottom: 15px;
        }
        .page12-text-wrapper p {
                font-size: var(--content-textL-desktop-large);
        }
}

@media screen and (min-width: 1281px) 
              and (max-width: 1366px) {                                                              /* Desktop */
        .section_page12 {
                height: auto; /* Let height be determined by image */
                display: flex;
                align-items: center; /* Vertically center text */
                background-image: none; /* Remove background image */
        }
        .image12_duct {
                display: block; /* Show the img tag */
                width: 100vw; /* Full viewport width */
                height: auto; /* Maintain aspect ratio */
        }
        .page12-text-wrapper {
                position: absolute;
                max-width: 40%; /* Limit text width for readability */
                margin-left: 5%; /* Generous left margin */
        }
        .page12-text-wrapper h1 {
                font-size: var(--content-title-desktop);
                margin-bottom: 15px;
        }
        .page12-text-wrapper p {
                font-size: var(--content-textL-desktop);
        }
}

@media screen and (min-width: 768px) 
              and (max-width: 1280px) {                                                              /* Tablet */
        .section_page12 {
                height: auto; /* Let height be determined by image */
                display: flex;
                align-items: center; /* Vertically center text */
                background-image: none; /* Remove background image */
        }
        .image12_duct {
                display: block; /* Show the img tag */
                width: 100vw; /* Full viewport width */
                height: auto; /* Maintain aspect ratio */
        }
        .page12-text-wrapper {
                position: absolute;
                max-width: 40%; /* Limit text width for readability */
                margin-left: 5%; /* Generous left margin */
        }
        .page12-text-wrapper h1 {
                font-size: var(--content-title-tablet);
                margin-bottom: 15px;
        }
        .page12-text-wrapper p {
                font-size: var(--content-textL-tablet);
        }
}

@media screen and (min-width: 321px) 
              and (max-width: 767px) {                                                               /* Mobile styles */
        .section_page12 {
                height: auto; /* Allow natural height */
                display: flex;
                flex-direction: column; /* Stack text and image vertically */
                background-image: none; /* Remove background image */
                padding: 0;
        }
        .image12_duct {
                display: block; /* Show the img tag */
                width: 100%;
                height: 50vh; /* 50% of viewport height */
                object-fit: cover; /* Cover the area, cropping as needed */
                object-position: 60% 50%; /* Center the image content */
        }
        .page12-text-wrapper {
                position: static;
                margin: 2rem 5% 0.5rem; /* Margin from top and centered horizontally */
                max-width: 90%; /* Responsive width */
                text-align: center; /* Justify text to center */
                padding: 0; /* Padding for readability */
        }
        .page12-text-wrapper h1 {
                font-size: var(--content-title-mobile);
        }
        .page12-text-wrapper p {
                font-size: var(--content-textS-mobile); /* Adjusted for mobile */
        }
}

@media screen and (max-width: 380px) {                                                               /* Small mobile */
        .page12-text-wrapper h1 {
                font-size: var(--content-title-small-mobile); /* Slightly smaller for mobile */
        }
        .page12-text-wrapper p {
                font-size: var(--content-textS-small-mobile); /* Adjusted for mobile */
        }
}

/* - - - - - - PAGE_13 SECTION - - - - - - */
.section_page13 {
    margin: 0;
    background-color: var(--Page4-background-color);
    color: var(--white-font-color);
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}
.page13-container {
    max-width: 1900px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 40px;
}
.divider {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 50%;
    width: 5px;
    background-color: orange;
    transform: rotate(30deg);
    transform-origin: center;
}
.page13-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
}
.page13-column h1 {
    font-family: 'Exo 2', sans-serif;
    font-size: var(--content-title-desktop-large);
    font-weight: 700;
    margin: 10px 0;
}
.page13-column a {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: var(--button-orange);
    border: none;
    color: var(--white-font-color);
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: inline-block;
    text-decoration: none;
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: var(--content-textS-desktop-large);
}
.page13-column a:hover {
    background-color: var(--button-orange-hover);
}


@media screen and (min-width: 1367px) {                                                              /* Large Desktop */
        .page13-column h1 {
                font-size: var(--content-title-desktop-large);
                margin: 10px 0;
        }
        .page13-column a {
                margin-top: 20px;
                padding: 10px 20px;
                font-size: var(--content-textS-desktop-large);
        }
}

@media screen and (min-width: 1281px) 
              and (max-width: 1366px) {                                                              /* Desktop */
        .page13-column h1 {
                font-size: var(--content-title-desktop);
                margin: 10px 0;
        }
        .page13-column a {
                margin-top: 20px;
                padding: 10px 20px;
                font-size: var(--content-textS-desktop);
        }
}

@media screen and (min-width: 768px) 
              and (max-width: 1280px) {                                                              /* Tablet */
        .divider {
                transform: rotate(10deg);
        }
        .page13-column h1 {
                font-size: var(--content-title-tablet);
                margin: 10px 0;
        }
        .page13-column a {
                margin-top: 20px;
                padding: 10px 20px;
                font-size: var(--content-textS-tablet);
        }
}

@media screen and (min-width: 321px) 
              and (max-width: 767px) {                                                               /* Mobile styles */
        .divider {
                transform: rotate(0deg);
        }
        .page13-column h1 {
                font-size: 14px;
                margin: 10px 0;
        }
        .page13-column a {
                margin-top: 20px;
                padding: 10px 20px;
                font-size: 12px;
        }
}

@media screen and (max-width: 380px) {                                                               /* Small mobile */
        .divider {
                transform: rotate(0deg);
        }
        .page13-column h1 {
                font-size: 12px;
                margin: 10px 0;
        }
        .page13-column a {
                margin-top: 20px;
                padding: 10px 20px;
                font-size: 10px;
        }
}

/* - - - - - - CONTACT SECTION - - - - - - */
.section_contact {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0;
}
.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
.content {
    display: flex;
    width: 90%;                /* check if needs updating */
    z-index: 1;
}
.col {
    color: var(--white-font-color);
}
.col1 {
    width: 20%;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: var(--content-textS-desktop-large);
    color: var(--white-font-color);
}
.col2 {
    width: 60%;
}
.button-contact {
    align-self: center;
    padding: 10px 20px;
    background-color: var(--button-orange);
    color: var(--white-font-color);
    text-decoration: none;
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: var(--content-textS-desktop-large);
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}
.button-contact:hover {
    background-color: var(--button-orange-hover);
}
.col3 {
    width: 20%;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: var(--content-textS-desktop-large);
    color: var(--white-font-color);
}

@media screen and (min-width: 1367px) {                                                              /* Large Desktop */
        .col {
                display: flex;
                flex-direction: column;
        }
        .col1 {
                width: 20%;
                font-size: var(--content-textS-desktop-large);
                text-align: left;
                justify-content: left;
                align-items: left;
        }
        .col2 {
                width: 60%;
                justify-content: center;
                align-items: center;
        }
        .form {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 60%;
        }
        textarea {
                width: 100%;
                min-height: 100px;
                margin-bottom: 1rem;
                padding: 0.5rem;
                border: none;
                border-radius: 5px;
                font-size: Arial, sans-serif;
        }
        input[type="email"] {
                width: 100%;
                padding: 0.5rem;
                border: none;
                border-radius: 5px;
                font-size: Arial, sans-serif;
                margin-bottom: 1rem;
        }
        .button-contact {
                padding: 10px 20px;
                font-size: var(--content-textS-desktop-large);
                border-radius: 5px;
        }
        .col3 {
                width: 20%;
                font-size: var(--content-textS-desktop-large);
                justify-content: center;
                align-items: center;
        }
}

@media screen and (min-width: 1281px) 
              and (max-width: 1366px) {                                                              /* Desktop */
        .col {
                display: flex;
                flex-direction: column;
        }
        .col1 {
                width: 20%;
                font-size: var(--content-textS-desktop);
                text-align: left;
                justify-content: left;
                align-items: left;
        }
        .col2 {
                width: 60%;
                justify-content: center;
                align-items: center;
        }
        .form {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 60%;
        }
        textarea {
                width: 100%;
                min-height: 100px;
                margin-bottom: 1rem;
                padding: 0.5rem;
                border: none;
                border-radius: 5px;
                font-size: Arial, sans-serif;
        }
        input[type="email"] {
                width: 100%;
                padding: 0.5rem;
                border: none;
                border-radius: 5px;
                font-size: Arial, sans-serif;
                margin-bottom: 1rem;
        }
        .button-contact {
                padding: 10px 20px;
                font-size: var(--content-textS-desktop);
                border-radius: 5px;
        }
        .col3 {
                width: 20%;
                font-size: var(--content-textS-desktop);
                justify-content: center;
                align-items: center;
        }
}

@media screen and (min-width: 768px) 
              and (max-width: 1280px) {                                                              /* Tablet */
        .col {
                display: flex;
                flex-direction: column;
        }
        .col1 {
                width: 20%;
                font-size: var(--content-textS-tablet);
                text-align: left;
                justify-content: left;
                align-items: left;
                color: ver(--white-font-color);
        }
        .col2 {
                width: 60%;
                justify-content: center;
                align-items: center;
        }
        .form {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 60%;
        }
        textarea {
                width: 100%;
                min-height: 100px;
                margin-bottom: 1rem;
                padding: 0.5rem;
                border: none;
                border-radius: 5px;
                font-size: Arial, sans-serif;
        }
        input[type="email"] {
                width: 100%;
                padding: 0.5rem;
                border: none;
                border-radius: 5px;
                font-size: Arial, sans-serif;
                margin-bottom: 1rem;
        }
        .button-contact {
                padding: 10px 20px;
                font-size: var(--content-textS-tablet);
                border-radius: 5px;
        }
        .col3 {
                width: 20%;
                font-size: var(--content-textS-tablet);
                justify-content: center;
                align-items: center;
        }
}

@media screen and (min-width: 321px) 
              and (max-width: 767px) {                                                               /* Mobile styles */
        .content {
                flex-direction: column;
                width: 90%;
        }
        .col {
                width: 100%;
                text-align: center;
                margin-bottom: 1rem; 
        }
        .col1 {
                font-size: var(--content-textS-mobile);
                text-align: center; /* Center text */
                width: 100%; /* Full width for centering */
                display: block; /* Stack vertically */
        }
        .col2 {
                order: -1; /* Move form to top */
        }
        .form {
                display: flex;
                flex-direction: column;
                align-items: center; /* Center form elements */
                width: 100%;
        }
        textarea {
                width: 100%;
                min-height: 100px;
                margin-bottom: 0.5rem;
                padding: 0.5rem;
                border: none;
                border-radius: 5px;
                font-family: Arial, sans-serif;
        }
        input[type="email"] {
                width: 100%;
                padding: 0.5rem;
                border: none;
                border-radius: 5px;
                font-family: Arial, sans-serif;
                margin-bottom: 0.5rem;
        }
        .button-contact {
                width: 100%;
                padding: 10px;
                font-size: var(--content-textS-mobile);
                border-radius: 5px;
        }
        .col3 {
                font-size: var(--content-textS-mobile);
                text-align: center; /* Center text */
                width: 100%; /* Full width for centering */
                display: block; /* Stack vertically */
        }
}

@media screen and (max-width: 380px) {                                                               /* Small mobile */
}

/* Adjust navbar padding when scrolled */
.navbar.scrolled {
    padding: calc(var(--navbar-padding-h) / 2) var(--navbar-padding-v);     /* Reduce vertical padding when scrolled */
}

/* - - - - - - BUY/BOOK SECTION - - - - - - */
/* - - - - - - BUY SECTION - - - - - - */
.section_page-buy {
    display: flex;
    min-height: auto; /* Height based on content */
    max-height: none; /* Remove max-height restriction */
    margin-top: var(--navbar-height); /* Start immediately below navbar */
    background-color: var(--Spec-background-color);
    overflow: hidden;
}
.buy-left {
    flex: 0 0 50%; /* Changed to 50% */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow-y: visible;
}
.buy-content {
    text-align: center;
    width: 100%;
    margin: 0 40px;
}
.buy-content h2 {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: var(--content-title-desktop-large);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
}
.buy-content p {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: var(--content-textS-desktop-large);
    font-weight: 400;
    line-height: 1.6;
    margin: 0 0 20px 0;
}
.buy-form {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center form elements */
    max-width: 500px; /* Shortened form width */
    margin: 0 auto; /* Center form within buy-content */
}
.buy-form-group {
    margin-bottom: 15px;
    text-align: left;
    width: 100%;
}
.buy-form-group label {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: var(--content-textS-desktop-large);
    margin-bottom: 5px;
    text-align: left;
}
.buy-form-group input,
.buy-form-group select {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: var(--content-textS-desktop-large);
    width: 100%;
    box-sizing: border-box;
}
.buy-form-group textarea {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: var(--content-textS-desktop-large);
    margin-bottom: 5px;
    text-align: left;
}
.flag-icon {
    width: 16px;
    height: 12px;
    vertical-align: middle;
    margin-right: 8px;
    display: inline-block
}
.flag-wrapper {
    display: inline-flex;
    align-items: center; /* Align flag and text in dropdown options */
}
.name-group {
    display: flex;
    gap: 15px;
}
.name-field {
    flex: 1;
}
.phone-group select#phone-prefix option {
    display: flex;
    align-items: center;
    padding: 5px; /* Space for flag images */
}
.phone-group {
    display: flex;
    gap: 10px;
}
.phone-group select {
    flex: 0 0 120px;
}
.custom-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--button-orange);
    color: var(--white-font-color);
    text-decoration: none;
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: var(--content-textS-desktop-large);
    border-radius: 5px;
    transition: background-color 0.3s;
    border: none;
}
.custom-btn:hover {
    background-color: var(--button-orange-hover);
}
.buy-right {
    flex: 0 0 50%; /* Changed to 50% */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.buy-image {
    height: 100%; /* Fill available height */
    width: 100%; /* Let width adjust naturally */
    object-fit: cover; /* Trim sides if needed */
    object-position: 50% 50%;
}

@media screen and (min-width: 1367px) {                                                              /* Large Desktop */
        .section_page-buy {
                margin-top: var(--navbar-height); /* Start immediately below navbar */
        }
        .buy-left {
                flex: 0 0 50%; /* Changed to 50% */
                padding: 20px;
        }
        .buy-content {
                margin: 0 40px;
        }
        .buy-content h2 {
                font-size: var(--content-title-desktop-large);
                margin-bottom: 20px;
        }
        .buy-content p {
                font-size: var(--content-textS-desktop-large);
                margin: 0 0 20px 0;
        }
        .buy-form {
                max-width: 500px; /* Shortened form width */
                margin: 0 auto; /* Center form within buy-content */
        }
        .buy-form-group {
                margin-bottom: 15px;
                width: 100%;
        }
        .buy-form-group label {
                font-size: var(--content-textS-desktop-large);
                margin-bottom: 5px;
        }
        .buy-form-group textarea {
                font-size: var(--content-textS-desktop-large);
                margin-bottom: 5px;
        }
        .name-group {
                gap: 15px;
        }
        .phone-group select#phone-prefix option {
                padding: 5px; /* Space for flag images */
        }
        .phone-group {
                gap: 10px;
        }
        .phone-group select {
                flex: 0 0 120px;
        }
        .custom-btn {
                padding: 10px 20px;
                font-size: var(--content-textS-desktop-large);
                border-radius: 5px;
        }
        .buy-right {
                flex: 0 0 50%; /* Changed to 50% */
        }
        .buy-image {
                object-position: 50% 50%;
        }
}

@media screen and (min-width: 1281px) 
              and (max-width: 1366px) {                                                              /* Desktop */
        .section_page-buy {
                margin-top: var(--navbar-height); /* Start immediately below navbar */
        }
        .buy-left {
                flex: 0 0 50%; /* Changed to 50% */
                padding: 20px;
        }
        .buy-content {
                margin: 0 40px;
        }
        .buy-content h2 {
                font-size: var(--content-title-desktop);
                margin-bottom: 20px;
        }
        .buy-content p {
                font-size: var(--content-textS-desktop);
                margin: 0 0 20px 0;
        }
        .buy-form {
                max-width: 500px; /* Shortened form width */
                margin: 0 auto; /* Center form within buy-content */
        }
        .buy-form-group {
                margin-bottom: 15px;
                width: 100%;
        }
        .buy-form-group label {
                font-size: var(--content-textS-desktop);
                margin-bottom: 5px;
        }
        .buy-form-group textarea {
                font-size: var(--content-textS-desktop);
                margin-bottom: 5px;
        }
        .name-group {
                gap: 15px;
        }
        .phone-group select#phone-prefix option {
                padding: 5px; /* Space for flag images */
        }
        .phone-group {
                gap: 10px;
        }
        .phone-group select {
                flex: 0 0 120px;
        }
        .custom-btn {
                padding: 10px 20px;
                font-size: var(--content-textS-desktop);
                border-radius: 5px;
        }
        .buy-right {
                flex: 0 0 50%; /* Changed to 50% */
        }
        .buy-image {
                object-position: 50% 50%;
        }
}

@media screen and (min-width: 768px) 
              and (max-width: 1280px) {                                                              /* Tablet */
        .section_page-buy {
                margin-top: var(--navbar-height); /* Start immediately below navbar */
        }
        .buy-left {
                flex: 0 0 50%; /* Changed to 50% */
                padding: 20px;
        }
        .buy-content {
                margin: 0 40px;
        }
        .buy-content h2 {
                font-size: var(--content-title-tablet);
                margin-bottom: 20px;
        }
        .buy-content p {
                font-size: var(--content-textS-tablet);
                margin: 0 0 20px 0;
        }
        .buy-form {
                max-width: 500px; /* Shortened form width */
                margin: 0 auto; /* Center form within buy-content */
        }
        .buy-form-group {
                margin-bottom: 15px;
                width: 100%;
        }
        .buy-form-group label {
                font-size: var(--content-textS-tablet);
                margin-bottom: 5px;
        }
        .buy-form-group textarea {
                font-size: var(--content-textS-tablet);
                margin-bottom: 5px;
        }
        .name-group {
                gap: 15px;
        }
        .phone-group select#phone-prefix option {
                padding: 5px; /* Space for flag images */
        }
        .phone-group {
                gap: 10px;
        }
        .phone-group select {
                flex: 0 0 120px;
        }
        .custom-btn {
                padding: 10px 20px;
                font-size: var(--content-textS-tablet);
                border-radius: 5px;
        }
        .buy-right {
                flex: 0 0 50%; /* Changed to 50% */
        }
        .buy-image {
                object-position: 50% 50%;
        }
}

@media screen and (min-width: 321px) 
              and (max-width: 767px) {                                                               /* Mobile styles */
        .section_page-buy {
                flex-direction: column; /* Stack vertically */
                margin-top: var(--navbar-height); /* Keep navbar offset */
                min-height: auto; /* Height based on content */
                overflow-y: auto; /* Allow scrolling if content overflows */
        }
        .buy-left {
                flex: none; /* Remove fixed sizing */
                width: 100%; /* Full width */
                padding: 20px; /* Consistent padding */
                order: 1; /* Top row */
        }
        .buy-right {
                flex: none; /* Remove fixed sizing */
                width: 100%; /* Full width */
                padding: 0; /* No padding to avoid gaps */
                order: 2; /* Bottom row */
        }
        .buy-image {
                width: 100%;
                height: auto;
                object-fit: cover;
                object-position: 50% 50%; /* Center image */
        }
        .buy-content {
                padding-top: 20px;
                margin: 0 20px;
        }
        .buy-content h2 {
                font-size: var(--content-title-mobile);
                margin-bottom: 20px;
        }
        .buy-content p {
                font-size: var(--content-textS-mobile);
                margin: 0 0 20px 0;
        }
        .buy-form-group input,
        .buy-form-group select {
                padding: 10px;
                border-radius: 8px;
                border: 1px solid #ccc;
                font-size: var(--content-textS-mobile);
                width: 100%;
        }
        .buy-form-group label {
                font-size: var(--content-textS-mobile);
                margin-bottom: 5px;
        }
        .buy-form-group textarea {
                font-size: var(--content-textS-mobile);
                margin-bottom: 5px;
        }
        .custom-btn {
                padding: 10px 20px;
                font-size: var(--content-textS-mobile);
                border-radius: 5px;
        }
}

@media screen and (max-width: 380px) {                                                               /* Small mobile */
        .buy-content h2 {
                font-size: var(--content-title-small-mobile);
                margin-bottom: 20px;
        }
        .buy-content p {
                font-size: var(--content-textS-small-mobile);
                margin: 0 0 20px 0;
        }
        .buy-form-group input,
        .buy-form-group select {
                padding: 10px;
                border-radius: 8px;
                border: 1px solid #ccc;
                font-size: var(--content-textS-small-mobile);
                width: 100%;
        }
        .buy-form-group label {
                font-size: var(--content-textS-small-mobile);
                margin-bottom: 5px;
        }
        .buy-form-group textarea {
                font-size: var(--content-textS-small-mobile);
                margin-bottom: 5px;
        }
        .custom-btn {
                padding: 10px 20px;
                font-size: var(--content-textS-small-mobile);
                border-radius: 5px;
        }
}

/* - - - - - - BOOK SECTION - - - - - - */
.section_page-book {
    display: flex;
    min-height: auto; /* Height based on content */
    max-height: none; /* Remove max-height restriction */
    margin-top: var(--navbar-height); /* Start immediately below navbar */
    background-color: var(--Spec-background-color);
    overflow: hidden;
}
.book-left {
    flex: 0 0 50%; /* Changed to 50% */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow-y: visible;
}
.book-content {
    text-align: center;
    width: 100%;
    margin: 0 40px;
}
.book-content h2 {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: var(--content-title-desktop-large);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
}
.book-content p {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: var(--content-textS-desktop-large);
    font-weight: 400;
    line-height: 1.6;
    margin: 0 0 20px 0;
}
.book-form {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center form elements */
    max-width: 500px; /* Shortened form width */
    margin: 0 auto; /* Center form within buy-content */
}
.book-form-group {
    margin-bottom: 15px;
    text-align: left;
    width: 100%;
}
.book-form-group label {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: var(--content-textS-desktop-large);
    margin-bottom: 5px;
    text-align: left;
}
.book-form-group input,
.book-form-group select {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: var(--content-textS-desktop-large);
    width: 100%;
    box-sizing: border-box;
}
.book-form-group textarea {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: var(--content-textS-desktop-large);
    margin-bottom: 5px;
    text-align: left;
}
.flag-icon {
    width: 16px;
    height: 12px;
    vertical-align: middle;
    margin-right: 8px;
    display: inline-block
}
.flag-wrapper {
    display: inline-flex;
    align-items: center; /* Align flag and text in dropdown options */
}
.name-group {
    display: flex;
    gap: 15px;
}
.name-field {
    flex: 1;
}
.phone-group select#phone-prefix option {
    display: flex;
    align-items: center;
    padding: 5px; /* Space for flag images */
}
.phone-group {
    display: flex;
    gap: 10px;
}
.phone-group select {
    flex: 0 0 120px;
}
.custom-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--button-orange);
    color: var(--white-font-color);
    text-decoration: none;
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: var(--content-textS-desktop-large);
    border-radius: 5px;
    transition: background-color 0.3s;
    border: none;
}
.custom-btn:hover {
    background-color: var(--button-orange-hover);
}
.book-right {
    flex: 0 0 50%; /* Changed to 50% */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.book-image {
    height: 100%; /* Fill available height */
    width: 100%; /* Let width adjust naturally */
    object-fit: cover; /* Trim sides if needed */
    object-position: 0% 50%;
}

@media screen and (min-width: 1367px) {                                                              /* Large Desktop */
        .section_page-book {
                margin-top: var(--navbar-height); /* Start immediately below navbar */
        }
        .book-left {
                flex: 0 0 50%; /* Changed to 50% */
                padding: 20px;
        }
        .book-content {
                margin: 0 40px;
        }
        .book-content h2 {
                font-size: var(--content-title-desktop-large);
                margin-bottom: 20px;
        }
        .book-content p {
                font-size: var(--content-textS-desktop-large);
                margin: 0 0 20px 0;
        }
        .book-form {
                max-width: 500px; /* Shortened form width */
                margin: 0 auto; /* Center form within buy-content */
        }
        .book-form-group {
                margin-bottom: 15px;
                width: 100%;
        }
        .book-form-group label {
                font-size: var(--content-textS-desktop-large);
                margin-bottom: 5px;
        }
        .book-form-group textarea {
                font-size: var(--content-textS-desktop-large);
                margin-bottom: 5px;
        }
        .name-group {
                gap: 15px;
        }
        .phone-group select#phone-prefix option {
                padding: 5px; /* Space for flag images */
        }
        .phone-group {
                gap: 10px;
        }
        .phone-group select {
                flex: 0 0 120px;
        }
        .custom-btn {
                padding: 10px 20px;
                font-size: var(--content-textS-desktop-large);
                border-radius: 5px;
        }
        .book-right {
                flex: 0 0 50%; /* Changed to 50% */
        }
        .book-image {
                object-position: 0% 50%;
        }
}

@media screen and (min-width: 1281px) 
              and (max-width: 1366px) {                                                              /* Desktop */
        .section_page-book {
                margin-top: var(--navbar-height); /* Start immediately below navbar */
        }
        .book-left {
                flex: 0 0 50%; /* Changed to 50% */
                padding: 20px;
        }
        .book-content {
                margin: 0 40px;
        }
        .book-content h2 {
                font-size: var(--content-title-desktop);
                margin-bottom: 20px;
        }
        .book-content p {
                font-size: var(--content-textS-desktop);
                margin: 0 0 20px 0;
        }
        .book-form {
                max-width: 500px; /* Shortened form width */
                margin: 0 auto; /* Center form within buy-content */
        }
        .book-form-group {
                margin-bottom: 15px;
                width: 100%;
        }
        .book-form-group label {
                font-size: var(--content-textS-desktop);
                margin-bottom: 5px;
        }
        .book-form-group textarea {
                font-size: var(--content-textS-desktop);
                margin-bottom: 5px;
        }
        .name-group {
                gap: 15px;
        }
        .phone-group select#phone-prefix option {
                padding: 5px; /* Space for flag images */
        }
        .phone-group {
                gap: 10px;
        }
        .phone-group select {
                flex: 0 0 120px;
        }
        .custom-btn {
                padding: 10px 20px;
                font-size: var(--content-textS-desktop);
                border-radius: 5px;
        }
        .book-right {
                flex: 0 0 50%; /* Changed to 50% */
        }
        .book-image {
                object-position: 0% 50%;
        }
}

@media screen and (min-width: 768px) 
              and (max-width: 1280px) {                                                              /* Tablet */
.section_page-book {
                margin-top: var(--navbar-height); /* Start immediately below navbar */
        }
        .book-left {
                flex: 0 0 50%; /* Changed to 50% */
                padding: 20px;
        }
        .book-content {
                margin: 0 40px;
        }
        .book-content h2 {
                font-size: var(--content-title-tablet);
                margin-bottom: 20px;
        }
        .book-content p {
                font-size: var(--content-textS-tablet);
                margin: 0 0 20px 0;
        }
        .book-form {
                max-width: 500px; /* Shortened form width */
                margin: 0 auto; /* Center form within buy-content */
        }
        .book-form-group {
                margin-bottom: 15px;
                width: 100%;
        }
        .book-form-group label {
                font-size: var(--content-textS-tablet);
                margin-bottom: 5px;
        }
        .book-form-group textarea {
                font-size: var(--content-textS-tablet);
                margin-bottom: 5px;
        }
        .name-group {
                gap: 15px;
        }
        .phone-group select#phone-prefix option {
                padding: 5px; /* Space for flag images */
        }
        .phone-group {
                gap: 10px;
        }
        .phone-group select {
                flex: 0 0 120px;
        }
        .custom-btn {
                padding: 10px 20px;
                font-size: var(--content-textS-tablet);
                border-radius: 5px;
        }
        .book-right {
                flex: 0 0 50%; /* Changed to 50% */
        }
        .book-image {
                object-position: 10% 50%;
        }
}

@media screen and (min-width: 321px) 
              and (max-width: 767px) {                                                               /* Mobile styles */
        .section_page-book {
                flex-direction: column; /* Stack vertically */
                margin-top: var(--navbar-height); /* Keep navbar offset */
                min-height: auto; /* Height based on content */
                overflow-y: auto; /* Allow scrolling if content overflows */
        }
        .book-left {
                flex: none; /* Remove fixed sizing */
                width: 100%; /* Full width */
                padding: 20px; /* Consistent padding */
                order: 2; /* Top row */
        }
        .book-right {
                flex: none; /* Remove fixed sizing */
                width: 100%; /* Full width */
                padding: 0; /* No padding to avoid gaps */
                order: 1; /* Bottom row */
        }
        .book-image {
                width: 100%;
                height: auto;
                object-fit: cover;
                object-position: 50% 50%; /* Center image */
        }
        .book-content {
                padding-top: 20px;
                margin: 0 20px;
        }
        .book-content h2 {
                font-size: var(--content-title-mobile);
                margin-bottom: 20px;
        }
        .book-content p {
                font-size: var(--content-textS-mobile);
                margin: 0 0 20px 0;
        }
        .book-form-group input,
        .book-form-group select {
                padding: 10px;
                border-radius: 8px;
                border: 1px solid #ccc;
                font-size: var(--content-textS-mobile);
                width: 100%;
        }
        .book-form-group label {
                font-size: var(--content-textS-mobile);
                margin-bottom: 5px;
        }
        .book-form-group textarea {
                font-size: var(--content-textS-mobile);
                margin-bottom: 5px;
        }
        .custom-btn {
                padding: 10px 20px;
                font-size: var(--content-textS-mobile);
                border-radius: 5px;
        }
}

@media screen and (max-width: 380px) {                                                               /* Small mobile */
        .book-content h2 {
                font-size: var(--content-title-small-mobile);
                margin-bottom: 20px;
        }
        .book-content p {
                font-size: var(--content-textS-small-mobile);
                margin: 0 0 20px 0;
        }
        .book-form-group input,
        .book-form-group select {
                padding: 10px;
                border-radius: 8px;
                border: 1px solid #ccc;
                font-size: var(--content-textS-small-mobile);
                width: 100%;
        }
        .book-form-group label {
                font-size: var(--content-textS-small-mobile);
                margin-bottom: 5px;
        }
        .book-form-group textarea {
                font-size: var(--content-textS-small-mobile);
                margin-bottom: 5px;
        }
        .custom-btn {
                padding: 10px 20px;
                font-size: var(--content-textS-small-mobile);
                border-radius: 5px;
        }
}

/* - - - - - - CONTACT-ALT SECTION - - - - - - */
.section_contact-alt {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
}
.section_contact-alt .bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
.section_contact-alt .content {
    display: flex;
    width: 90%;                /* check if needs updating */
    z-index: 1;
}
.section_contact-alt .col {
    color: var(--white-font-color);
}
.section_contact-alt .col1 {
    width: 20%;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: var(--footer-text-desktop-large);
    color: var(--white-font-color);
}
.section_contact-alt .col2 {
    width: 60%;
}
.section_contact-alt .logo-white {
    width: 130px;
    height: auto;
}
.section_contact-alt .col3 {
    width: 20%;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: var(--footer-text-desktop-large);
    color: var(--white-font-color);
}

@media screen and (min-width: 1367px) {                                                              /* Large Desktop */
        .section_contact-alt .col1 {
                font-size: var(--footer-text-desktop-large);
        }
        .section_contact-alt .logo-white {
                width: 130px;
                height: auto;
        }
        .section_contact-alt .col3 {
                font-size: var(--footer-text-desktop-large);
        }
}

@media screen and (min-width: 1281px) 
              and (max-width: 1366px) {                                                              /* Desktop */
        .section_contact-alt .col1 {
                font-size: var(--footer-text-desktop);
        }
        .section_contact-alt .logo-white {
                width: 120px;
                height: auto;
        }
        .section_contact-alt .col3 {
                font-size: var(--footer-text-desktop);
        }
}

@media screen and (min-width: 768px) 
              and (max-width: 1280px) {                                                              /* Tablet */
        .section_contact-alt .col1 {
                font-size: var(--footer-text-tablet);
        }
        .section_contact-alt .logo-white {
                width: 120px;
                height: auto;
        }
        .section_contact-alt .col3 {
                font-size: var(--footer-text-tablet);
        }
}

@media screen and (min-width: 321px) 
              and (max-width: 767px) {                                                               /* Mobile styles */
        .section_contact-alt .content {
                flex-direction: column; /* Stack vertically */
                width: 90%; /* Maintain width */
                align-items: center; /* Center all content */
        }
        .section_contact-alt .col {
                width: 100%; /* Full width for all columns */
                text-align: center; /* Center text */
                margin-bottom: 1rem; /* Space between elements */
        }
        .section_contact-alt .col1 {
                font-size: var(--footer-text-mobile); /* Mobile font size */
                order: 2; /* Address below logo */
        }
        .section_contact-alt .col2 {
                width: 100%; /* Full width */
                display: flex; /* Flex for centering */
                justify-content: center; /* Center logo horizontally */
                order: 1; /* Logo at top */
                margin-bottom: 1rem; /* Space below logo */
        }
        .section_contact-alt .logo-white {
                width: 110px; /* Maintain logo size */
                height: auto; /* Maintain aspect ratio */
        }
        .section_contact-alt .col3 {
                font-size: var(--footer-text-mobile); /* Mobile font size */
                order: 3; /* Copyright at bottom */
        }
}

@media screen and (max-width: 380px) {                                                               /* Small mobile */
        .section_contact-alt .col1 {
                font-size: var(--footer-text-small-mobile); /* Mobile font size */
                order: 2; /* Address below logo */
        }
        .section_contact-alt .logo-white {
                width: 100px; /* Maintain logo size */
                height: auto; /* Maintain aspect ratio */
        }
        .section_contact-alt .col3 {
                font-size: var(--footer-text-small-mobile); /* Mobile font size */
                order: 3; /* Copyright at bottom */
        }
}