/* MAX 1009px and min 769px */
@media (max-width: 991px ) {
    
.dark-mode-toggle {
    position: absolute;
    top: 4rem;
    left: 1rem;
    display: flex;
    gap: 0.5rem;
}

.dark-mode-toggle .btn-circle {
    width: 40px; /* Adjust button size */
    height: 40px; /* Ensure buttons are circular */
    font-size: 1.2rem; /* Adjust icon size */
}

.btn-circle-bold {
    font-weight: bold; /* Bold text */
    color: #fff; /* Matches btn-subtle text color */
    background-color: #0078bb; /* Matches btn-subtle background */
    font-size: 1.5rem; /* Icon size */
    width: 72px; /* Fixed width for perfect circle */
    height: 72px; /* Fixed height for perfect circle */
    border-radius: 50%; /* Makes the button circular */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid #0078bb; /* Matches btn-subtle border */
    transition: all 0.3s ease; /* Smooth hover effects */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    text-decoration: none; /* Remove underline */
}

.dark-mode .btn-circle-bold {
    border: 2px solid #0078bb; /* Matches btn-subtle border */
}

/* Updated Circle Button Styling */
.btn-circle {
    background-color: transparent; /* Matches btn-subtle background */
    color: #0078bb; /* Matches btn-subtle text color */
    font-size: 1.5rem; /* Icon size */
    width: 72px; /* Fixed width for perfect circle */
    height: 72px; /* Fixed height for perfect circle */
    border-radius: 50%; /* Makes the button circular */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid #0078bb; /* Matches btn-subtle border */
    transition: all 0.3s ease; /* Smooth hover effects */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    text-decoration: none; /* Remove underline */
}

.dark-mode .btn-circle {
    color: #fff; /* Matches btn-subtle text color */
    border: 2px solid #0078bb; /* Matches btn-subtle border */
}

.btn-circle:hover {
    background-color: rgba(255, 255, 255, 0.3); /* Slightly opaque white */
    color: #fff; /* Matches btn-subtle hover text color */
    transform: scale(1.1); /* Noticeable size increase */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Enhanced shadow */
}


.btn-circle-bold:hover {
    background-color: rgba(255, 255, 255, 0.8); /* Slightly opaque white */
    color: #0078bb; /* Matches btn-subtle hover text color */
    transform: scale(1.1); /* Noticeable size increase */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Enhanced shadow */
}

.btn-block {
    display: block; /* Make button full width */
    width: 100%; /* Full width */
    margin: 0; /* Remove default margin */
}

.request-service-btn {
    display: block; /* Make button full width */
    width: 100%; /* Full width */
    margin: 0; /* Remove default margin */
}

    /* QUICK CONTACT BUTTONS */
.quick-contact-buttons {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.quick-contact-buttons-navbar {
    position: absolute;
        bottom: 8rem;
        right: 1rem;
        display: flex;
        flex-direction: row;
        gap: 1rem;
}

.quick-contact-buttons {
    display: none !important;
}


/* Show quick contact buttons inside navbar when expanded on mobile */
.navbar.show .quick-contact-buttons-navbar {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 1rem;
}






 /* =========================
   NAVBAR STYLING
   ========================= */
   .navbar {
    display: flex; /* Enables flexbox */
    justify-content: space-between; /* Pushes brand and links to sides */
    padding: 0.4rem 1rem; /* Adjust padding for smaller screens */
    position: fixed; /* Keeps navbar fixed at the top */
    top: 0; /* Aligns it to the top of the viewport */
    width: 100%; /* Full width */
    z-index: 400; /* Ensures navbar stays on top */
    align-items: center; /* Centers items vertically */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: all 0.3s ease;
}

.dark-mode .navbar {
    box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1); /* Lighter shadow */
}

.navbar:hover {
    background: rgba(255, 255, 255, 0.15); /* Slightly more opaque on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Enhanced shadow */
}


.navbar-nav {
    display: flex;
    flex-direction: column; /* Stack links vertically */
    gap: 10px; /* Space between links */
    margin-left: 0; /* Align links below brand */
    width: 100%; /* Full width for dropdown */
    padding: 10px 0; /* Add padding for spacing */
}

.nav-link {
    color: #000; /* Black text for better contrast */
    font-size: 1.2rem; /* Slightly smaller font size for iPhone */
    font-weight: 400; /* Keep the font weight light */
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease; /* Smooth hover animation */
    padding: 10px 15px; /* Increase clickable area */
}


.dark-mode .nav-link {
    color: #fff; /* Highlight color for dark mode */
}

.nav-link:hover {
    color: #49aaff; /* Lighter hover color */
    transform: scale(1.05); /* Slight scaling effect on hover */
}

.navbar-cta-button {
    margin-top: 2rem; /* Add spacing above the button */
    width: 92%; /* Full width */
}






/* =========================
NAVBAR TOGGLER Styling
========================= */


/* NAVBAR TOGGLER */
.navbar-toggler {
    position: relative;
    z-index: 1100;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-right: -10px;
}

/* Styling for the inner icon bars */
.navbar-toggler .icon-bar {
    width: 30px;
    height: 3px;
    background-color: #0078bb;
    transition: transform 0.4s ease-in-out, opacity 0.3s ease-in-out;
}

/* Dark Mode Toggle for Bars */
.dark-mode .navbar-toggler .icon-bar {
    background-color: #fff;
}

/* NAVBAR TOGGLER ANIMATION - TURN INTO 'X' */
.navbar-toggler.navbar-active .bar1 {
    transform: rotate(-45deg) translate(-5px, 5px);
}

.navbar-toggler.navbar-active .bar2 {
    opacity: 0; /* Hide the middle bar */
}

.navbar-toggler.navbar-active .bar3 {
    transform: rotate(45deg) translate(-5px, -5px);
}


/* Remove focus and active outline/border */
.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}


#navbarNav {
    /* Base state: completely gone */
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background:
      radial-gradient(circle at 30% 85%, rgba(210, 225, 245, 0.7), transparent 50%),
      radial-gradient(circle at 70% 15%, rgba(180, 205, 230, 0.6), transparent 50%),
      radial-gradient(circle at 50% 50%, rgba(200, 215, 235, 0.5), transparent 50%),
      linear-gradient(135deg, #f4f7fa, #d9e3ed, #b8c9da);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transform: scale(1.1);

    /* Only animate opacity/scale, not visibility */
    transition: opacity 0.35s ease-in-out,
                transform 0.35s ease-in-out;
}

/* Show Class - Navbar Expanded */
#navbarNav.show {
    display: flex;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}


/* Dark Mode Styling for Expanded Navbar */
body.dark-mode #navbarNav {
    background: 
    radial-gradient(circle at 30% 75%, rgba(20, 40, 80, 0.9), transparent 60%),
    radial-gradient(circle at 70% 25%, rgba(10, 30, 60, 0.8), transparent 60%),
    linear-gradient(135deg, #0a0e18, #060c24, #000000);
}




/* Navbar Links Styling for Overlay */
.navbar-nav .nav-link {
    font-size: 1.5rem;
    color: #0077e0; /* Light mode text color */
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    transition: color 0.6s ease-in-out; /* Smoother color transition */
    padding: 10px;
}

body.dark-mode .navbar-nav .nav-link {
    color: #f5f5f5; /* Dark mode text color */
    transition: color 0.6s ease-in-out; /* Smoother color transition */
}

body.dark-mode .navbar-nav .nav-link:hover {
    color: #e0e0e0; /* Dark mode hover effect */
    transition: color 0.6s ease-in-out; /* Smoother color transition */
}






/* =========================
HERO STYLING - MOBILE
========================= */
    
    .hero {
        height: 100vh; /* Full viewport height */
        width: 100%; /* Full width */
        background-size: cover; /* Cover the entire section */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent  */
        display: flex;
        position: relative; /* To allow overlay */
        color: white; /* Text color for contrast */
        z-index: 1;
        align-items: center;
        overflow: hidden;
    }





/* Adjust overlay for mobile */
.hero::before {
    content: "";
    backdrop-filter: blur(5px); /* Soften the overlay */
    -webkit-backdrop-filter: blur(5px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2); /* 60% opaque white */

    z-index: 0; /* Ensure overlay stays behind content */
}

/* Dark mode overlay adjustment */
.dark-mode .hero::before {
    background: rgba(0, 0, 0, 0.6); /* Darker overlay for contrast */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.hero-heading-container {
    width: 100%; /* Allows it to span and align properly */
}




/* Adjust Quick Contact Buttons */
.quick-contact-buttons {
    position: absolute;
    bottom: 1rem;
    right: 50%;
    transform: translateX(50%);
    display: flex;
    flex-direction: row;
    gap: 1rem;
}


/* =====================
STORY STYLING - IPHONE
===================== */

#story {
    min-height: 100vh; /* Full viewport height */
}


.overlay-heading {
    font-size: clamp(1.2rem, 8vw, 6rem); /* Slightly larger on mobile */
    color: #2d2d2d;
    font-weight: 600;
    line-height: 1.1; /* Tighter line spacing for stacked effect */
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    margin: 0.5rem 0;
    white-space: normal; /* Allows wrapping */
    max-width: 90%; /* Prevents excessive width */
    word-break: break-word;
}

/* Dark Mode Heading */
.dark-mode .overlay-heading {
    color: #d9e3ed;
}

.overlay-subheading {
    font-size: clamp(0.9rem, 3vw, 1.5rem);  
    margin-bottom: 0.8rem;
    color: #2b2b2b;
}

.dark-mode .overlay-subheading {
    color: #58c5ff;
}

.section-subheading {
    font-size: clamp(1.2rem, 2.8vw, 1.8rem);
    text-align: left;
    border-left: 4px solid #0071bb;
    padding: 0 1rem;
    color: black;
    margin-left: 2rem;
    margin-right: 2rem;
    margin-bottom: 2rem;
} 

.dark-mode .section-subheading {
    color: white;
    border-left: 4px solid #58c5ff;
}



/* Button Container */
.button-container {
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    text-align: center;
    display: flex;
    flex-direction: column;
}
.button-container a {
    text-decoration: none;
    min-width: 180px;
}

.button-container2 {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    gap: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
}

.button-container3 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-left: 1.2rem;
    margin-right: 1.2rem;
}

.background-image-container {
    flex-direction: column;
    text-align: center;
    min-height: 100%; /* Occupy 36% of the viewport height */
    width: 100%; /* Full width */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: left; /* Align text to the left */
}

/* TOP OVERLAY - Mobile */
.text-overlay-container {
    text-align: center;
    padding-top: 90px; /* Buffer for the navbar */
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
    height: 100vh;
    display: block;
    z-index: 200;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space between top & bottom elements */
    flex-grow: 1; /* Ensures it expands */
    background: linear-gradient(
        to bottom,
        rgba(233, 233, 233, 1) 0%,  
        rgba(255, 255, 255, 0.6) 20%,  
        rgba(255, 255, 255, 0) 50%,  
        rgba(255, 255, 255, 0.6) 80%,  
        rgba(227, 227, 227, 1) 100%  
    );
}

/* DARK MODE: Now Using Dark Navy Instead of Black */
.dark-mode .text-overlay-container {
    background: linear-gradient(
        to bottom,
        rgba(10, 20, 40, 1) 0%,  /* Deep navy */
        rgba(20, 40, 80, 0.7) 25%,  /* Rich blue-gray */
        rgba(15, 30, 60, 0) 50%,  /* Muted dark navy */
        rgba(20, 40, 80, 0.7) 75%,  /* Soft blend back */
        rgba(10, 20, 40, 1) 100%  /* Deep navy at the bottom */
    );
}

.overlay-subheading {
    display: none; /* Hides subheading on mobile */
    /* font-size: clamp(1.2rem, 3vw, 1.6rem);
    color: white;
    margin-bottom: 1rem; */
}

/* DELIVERY INFO CONTAINER - hidden on mobile */

.delivery-info-container {
    display: none;
    /* display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.2rem;
    border-radius: 12px;
    text-align: left;
    max-width: 800px;
    position: relative; */
}





.dark-mode .delivery-info-container {
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15); /* Soft shadow */
}

/* DELIVERY BOX */
.delivery-info {
    display: none;
    /* display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.2rem;
    border-radius: 12px;
    text-align: left;
    max-width: 800px;
    position: relative; */
}

/* CIRCULAR MAP IMAGE */
.map-image {
    width: 100px; /* Increased size */
    height: 100px;
    border-radius: 50%; /* Makes it circular */
    object-fit: cover;
    position: absolute;
    translate: 60%;
    opacity: 1;
    z-index: 1; /* Ensures it's behind the pin drop */
    animation: mapSwoop 12s linear infinite;
}

/* DELIVERY TEXT */
.delivery-text {
    text-align: left;
}

/* DELIVERY HEADING */
.map-heading {
    font-size: 1.1rem;
    font-weight: bold;
    color: #0077db;
    margin-right: 1rem;
}

.dark-mode .map-heading {
    color: #fff;
}

/* DELIVERY DESCRIPTION */
.delivery-text p {
    font-size: 1rem;
    color: #555;
    margin: 0;
}

/* FIRST LINE - "Delivery Available" */
.delivery-top {
    color: #0055ff; /* Blue */
    display: block;
    font-size: 1.2rem;
}

/* SECOND LINE - "Across the UK" */
.delivery-bottom {
    color: #fff; /* Red */
    display: block;
}

/* ANIMATION CONTAINER */
.animation-container {
    position: relative;
    width: 100px;
    height: 80px;
    overflow: hidden;
}

/* TRUCK BOAT ICON */
.truck-boat-icon {
    width: 80px;
    position: absolute;
    bottom: 30px;
    animation: truckSequence 12s linear infinite;
    z-index: 2; /* Ensures truck is above the map */
    margin-left: 1rem;
}

/* PIN DROP */
.pin-drop {
    font-size: 2rem;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    animation: pinSequence 12s linear infinite;
    z-index: 3; /* Ensures pin drop is above everything */
}

/* TRUCK MOVEMENT */
@keyframes truckSequence {
    0% { transform: translateX(120%); }   /* Start off-screen right */
    17% { transform: translateX(0); }     /* Moves into center (2s) */
    50% { transform: translateX(0); }     /* Holds in center (4s) */
    58% { transform: translateX(-120%); } /* Zooms off left (1s) */
    100% { transform: translateX(-120%); } /* Off-screen left */
}

/* MAP SWOOP ANIMATION */
@keyframes mapSwoop {
    0%, 49% { opacity: 0; transform: translate(-50%, -100%) scale(0); } /* Hidden before truck exits */
    55% { opacity: 1; transform: translate(-50%, 0) scale(1); } /* Map swoops in */
    90% { opacity: 1; } /* Holds in place */
    100% { opacity: 1; transform: translate(-50%, 0) scale(1); } /* Ensures it holds before leaving */
}

/* PIN DROP MOVEMENT - Bounces Back Up */
@keyframes pinSequence {
    0%, 55% { opacity: 0; transform: translateY(-100px) translateX(-50%); } /* Hidden before truck exits */
    60% { opacity: 1; transform: translateY(10px) translateX(-50%); } /* Drops fully (1s) */
    65% { transform: translateY(0px) translateX(-50%) scale(1.2); } /* First bounce */
    70% { transform: translateY(5px) translateX(-50%) scale(1); } /* Settles */
    90% { opacity: 1; transform: translateY(0) translateX(-50%); } /* Holds in place (4s) */
    95% { transform: translateY(-20px) translateX(-50%) scale(1.1); } /* Small bounce up */
    100% { transform: translateY(-40px) translateX(-50%) scale(1); } /* Rising */
}
    
.vessels-include-box {
    margin-bottom: 3rem;

}



















/* =========================
FLEET STYLING
========================= */

.fleet-container {
    margin-left: 1rem;
    margin-right: 1rem;
    padding-top: 90px; /* Buffer for the navbar */
}


/* Scrollable tabs for mobile */
.boat-tabs {
    overflow-x: auto;
    white-space: nowrap;
    display: flex;
    justify-content: flex-start;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    overflow-x: hidden;
}

/* Ensures tab buttons align with the spec table */
.tab-buttons {
    max-width: 900px; /* Match the spec table width */
    margin-bottom: 1rem;
    margin-top: 1rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between; /* Even spacing between buttons */
    gap: 5px;
}


/* Default tab button styling */
.tab-button {
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    text-align: center;
    font-size: clamp(0.7rem, 2vw, 0.9rem);
    color: #555;
    cursor: pointer;
    transition: box-shadow 0.5s ease-in-out, background 0.5s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 88px;
    min-width: 70px;
    aspect-ratio: 1 / 1; /* Ensures a perfect circle */
    border-radius: 50%;
    position: relative;
}

/* Dark mode adjustments */
.dark-mode .tab-button {
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
}


.tab-button.tab-active {
    color: #fff;
    border-bottom: none;
    box-shadow: 0 -3px 10px rgba(0, 120, 187, 0.3), /* Top shadow */
    3px 0 10px rgba(0, 120, 187, 0.3),  /* Right shadow */
    -3px 0 10px rgba(0, 120, 187, 0.3); /* Left shadow */
    background: 
    radial-gradient(circle at 30% 75%, rgba(173, 216, 230, 0.9), transparent 60%),
    radial-gradient(circle at 70% 25%, rgba(135, 206, 250, 0.4), transparent 60%),
    linear-gradient(135deg, #ffffff, #e3f2fd, #cfe8ff); /* More white tones */       
   
}

.dark-mode .tab-button.tab-active {
    background: 
    radial-gradient(circle at 30% 85%, rgba(6, 78, 173, 0.9), transparent 60%),
    radial-gradient(circle at 70% 15%, rgba(2, 72, 157, 0.8), transparent 60%),
    linear-gradient(135deg, #0a2540, #071e36, #021226);   
}


.tab-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 5px;
}


.tab-label {
    opacity: 0;
}



/* Fleet section adjustments for mobile */
.specs-grid-container {
    text-align: left;
    border-radius: 36px;
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 10px rgba(0, 120, 187, 0.3);
    min-height: 400px;
    margin-left: 1rem;
    margin-right: 1rem;
}

.dark-mode .specs-grid-container {
    background: rgba(0, 0, 0, 0.2) 
  }





.features-container {
    display: flex;
    flex-wrap: wrap; /* Ensures items stay in a row but wrap if necessary */
    justify-content: space-between; /* Even spacing between items */
    gap: 0.5rem;
}


.spec-card-buttons {
    display: flex;
    justify-content: center; /* Centered by default */
    flex-direction: column;
    gap: 0.5rem;

}

.spec-card-buttons .btn {
    font-size: 1.2rem;
    padding: 0.5rem 1.5rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.spec-card-header {
    display: flex;
    align-items: left;
    flex-wrap: wrap; /* Wrap on smaller screens */
}

/* Details text on the right */
.details-text {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    color: #333;
    flex-grow: 1;
    text-align: right;
}

.dark-mode .details-text {
    color: #fff;
}

.disclaimer-text {
    font-size: clamp(0.8rem, 3vw, 1rem);
    text-align: center;
    padding: 0 1rem;
}



/* ===================== */
/* Rental Info Section */
/* ===================== */
.rental-info {
    background: rgba(0, 120, 187, 0.1);
    padding: 1.5rem;
    border-radius: 12px;
    margin-top: 2rem;
}

.rental-info h4 {
    font-size: clamp(1.4rem, 1.8vw, 2rem);
    font-weight: 600;
    color: #0078bb;
    margin-bottom: 1rem;
}

.rental-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rental-info li {
    font-size: clamp(1.2rem, 1.5vw, 1.6rem);
    color: #474646;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 0;
}

.rental-info li i {
    color: #0078bb;
}

/* Dark Mode */
.dark-mode .rental-info {
    background: rgba(0, 100, 187, 0.2);
}

.dark-mode .rental-info h4,
.dark-mode .rental-info li {
    color: #f1f1f1;
}


/* =========================
   SERVICES STYLING - MOBILE FRIENDLY
   ========================= */


.service-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px; /* Rounded corners */
    cursor: pointer;
}

.service-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure image covers the item fully */
    filter: brightness(70%); /* Slightly lighter to improve visibility on small screens */
    transition: transform 0.3s ease, filter 0.3s ease;
}

.service-icon {
    top: 40%; /* Adjust positioning for smaller screens */
    left: 20%; /* Center icon better */
    margin-top: -40px; /* Adjust offset for smaller icons */
    margin-left: -40px; /* Adjust offset for smaller icons */
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.service-icon img {
    width: 60px; /* Reduce icon size */
    height: auto;
}

.service-overlay h3 {
    font-size: 1rem; /* Reduce font size */
    opacity: 1; /* Make text always visible for accessibility */
    transform: translate(-50%, -50%);
    z-index: 2;
}

.service-item:hover .service-overlay h3 {
    opacity: 1; /* Ensure visibility on hover */
}

.service-item:hover .service-icon {
    animation: slideOffRight 0.8s forwards; /* Slightly faster animation */
}

.service-item:hover .service-overlay {
    background: rgba(0, 0, 0, 0.4); /* Slightly darker for emphasis */
}






.services-background {
    background-position: right center; /* Aligns to the right-hand side */
    background-size: cover; /* Ensures full coverage */
}

.services-grid {
    gap: 1rem; /* Maintain spacing between items */
}


/* =========================
   EQUIPMENT GRID STYLING - MOBILE FRIENDLY
   ========================= */

   .equipment-container {
    text-align: center; /* Centered for better mobile readability */
    max-width: 100%;
    margin-left: 1rem;
    margin-right: 1rem;
   }

/* Equipment Grid Layout */
.equipment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem; /* Adds spacing between items */
    justify-content: center;
}

/* Equipment Item Styling */
.equipment-item {
    backdrop-filter: blur(20px); /* Apply blur effect */
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Soft shadow */    color: white;
    padding: 5px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    /* Scroll Animation Defaults */
    transform: translateY(100px);
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

/* Scroll Animation - Appears when in viewport */
.equipment-item.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Animation Effect */
.equipment-item:nth-child(n) {
    transition-delay: calc(0.1s * var(--order));
}


/* Staggered Delays */
.equipment-grid .equipment-item:nth-child(1) { transition-delay: 0.1s; }
.equipment-grid .equipment-item:nth-child(2) { transition-delay: 0.2s; }
.equipment-grid .equipment-item:nth-child(3) { transition-delay: 0.3s; }
.equipment-grid .equipment-item:nth-child(4) { transition-delay: 0.4s; }
.equipment-grid .equipment-item:nth-child(5) { transition-delay: 0.5s; }
.equipment-grid .equipment-item:nth-child(6) { transition-delay: 0.6s; }
.equipment-grid .equipment-item:nth-child(7) { transition-delay: 0.7s; }
.equipment-grid .equipment-item:nth-child(8) { transition-delay: 0.8s; }
.equipment-grid .equipment-item:nth-child(9) { transition-delay: 0.9s; }

/* Active Animation */
.equipment-item.in-view {
    opacity: 1;
    transform: translateY(0); /* Moves into normal position */
}

/* Equipment Icons */
.equipment-item .icon {
    font-size: 2rem;
    color: #0078bb;
    margin-bottom: 8px;
}

.dark-mode .equipment-item .icon {
    color: #58c5ff;
}

/* Equipment Titles */
.equipment-item .service-title {
    font-weight: bold;
    font-size: 1rem;
    color: #0078bb;
}

/* Equipment Descriptions */
.equipment-item .service-description {
    font-size: 0.7rem;
    color: #222222;   
    margin-top: 0.5rem;

}

.dark-mode .equipment-item .service-description {
    color: #d4d4d4;
}





/* =========================
   SPECIALIZED SERVICES STYLING - MOBILE FRIENDLY
   ========================= */
.specialized-services {
    padding: 0 1rem; /* Adds spacing */
    text-align: center; /* Centered for better mobile readability */
    max-width: 100%;
}

/* Specialized Services List */
.specialized-services li {
    font-size: 1rem;
    padding: 6px 0;
    list-style: none;
    display: flex;
    flex-direction: column; /* Stack icon and text */
    align-items: center;
    gap: 5px;
    color: #ffffff;
}

/* Specialized Services Icons */
.specialized-services i {
    font-size: 1.4rem; /* Adjusted for mobile */
    color: #0cb3ff;
}

/* Services List Wrapper */
.services-list-edit {
    max-width: 100%;
    margin: 0 auto;
}

/* =========================
   SERVICES ROW STYLING - MOBILE FRIENDLY
   ========================= */




/* Ensure the entire section takes up full viewport height */
.services-section {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Full viewport height */
}



/* Ensures the bottom elements are stuck to the bottom */
.services-bottom {
    margin-top: auto; /* Pushes it down */
}



/* Service Row - Ensures items in the row have equal height */
.services-row {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Ensures all child elements stretch to the same height */
    gap: 1rem; /* Spacing between items */
}

/* Individual service items */
.service-extra {
    background: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
    backdrop-filter: blur(20px); /* Apply blur effect */
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 36px;
    width: 100%;
    max-width: 400px;
    flex-grow: 1; /* Allows elements to grow to the tallest in the row */
}

/* Ensure content inside also stretches */
.service-title, .service-description {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dark mode styles */
.dark-mode .service-extra {
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-mode .service-extra {
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* Icons remain prominent */
.service-extra .icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #0078bb;
}

.dark-mode .service-extra .icon {
    color: #58c5ff;
}

/* Service Title */
.service-title {
    font-weight: bold;
    color: #0078bb;
}






















/* =========================
CONTACT FORM - MOBILE FRIENDLY
========================= */



    
.contact-overlay {
    position: relative;
z-index: 2;
color: white;
background: linear-gradient(
    to bottom,
    rgba(202, 215, 228, 1) 0%,  
    rgba(255, 255, 255, 0.2) 25%,  
    rgba(255, 255, 255, 0) 50%,  
    rgba(255, 255, 255, 0.2) 75%,  
    rgba(202, 215, 228, 1) 100%  
);
text-align: left; /* Align text to the left */
width: 100%;
min-height: 100vh; /* Occupy full height */
}

.dark-mode .contact-overlay {
    background: linear-gradient(
        to bottom,
        rgba(10, 20, 40, 1) 0%,  /* Deep navy */
        rgba(20, 40, 80, 0.7) 25%,  /* Rich blue-gray */
        rgba(15, 30, 60, 0) 50%,  /* Muted dark navy */
        rgba(20, 40, 80, 0.7) 75%,  /* Soft blend back */
        rgba(10, 20, 40, 1) 100%  /* Deep navy at the bottom */
    );
}



.form-label {
    font-size: 1rem; /* Adjust label font size */
    color: #000;
    font-weight: 600; /* Bold label text */
}

.dark-mode .form-label {
    color: #58c5ff;
}

/* Checkbox Styling */
.form-check-label {
    font-weight: normal;
    margin-left: 0.8rem;
    color: #000;
}

.dark-mode .form-check-label {
    color: #fff;
    font-size: 1.5rem;
    justify-content: center;
    text-align: center;
}



.quick-contact-buttons2 {
    display: flex;
    justify-content: center;
    gap: 1rem; /* Add spacing between buttons */
    margin-top: 1rem; /* Add spacing above buttons */
}

.quick-contact-buttons2 .btn-circle {
    width: 40px; /* Adjust button size */
    height: 40px; /* Ensure buttons are circular */
    font-size: 1.2rem; /* Adjust icon size */
}

.text-center img {
    min-width: 240px; /* Reduce logo size */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 1rem; /* Add spacing below the logo */
}

    .boat-type-container {
        display: flex;
        flex-direction: column; /* Stack buttons vertically */
        align-items: center;
        gap: 2px;
        width: 100%;
    }

    .boat-type-btn {
        display: flex;
        flex-direction: row; /* Image & text side by side */
        justify-content: flex-start;
        width: 100%; /* Full width on mobile */
        max-width: 400px;
        padding: 14px 20px;
        border-radius: 36px;
        background: rgba(255, 255, 255, 0.1);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        border: 2px solid #0078bb;

    }

    .boat-type-btn img {
        width: 60px; /* Smaller image */
        height: auto;
        margin-right: 15px;
    }

    .boat-type-btn h4 {
        display: flex;
        align-items: center;
        font-size: 1rem;
        text-align: left;
        margin: 0; /* Remove extra spacing */
        justify-content: center;
    }

    .dark-mode .boat-type-btn {
        background: rgba(0, 0, 0, 0.2);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }


    .boat-type-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 12px rgba(0, 120, 187, 0.3);
    }

    .boat-type-btn.selected {
        background: rgba(255, 255, 255, 0.8);
        color: #0078bb !important;
        box-shadow: 0 6px 12px rgba(0, 120, 187, 0.6) !important;
        transform: scale(1.05); /* Matches hover effect */
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .dark-mode .boat-type-btn.selected {
        border-color: #0078bb;
        background-color: #58c5ff;
        }

    .boat-type-btn h4 {
        font-size: 1.6rem;
        font-weight: bold;
        color: inherit;
        margin: 0;
    }



/* Make entire tile clickable */
.equipment-checkbox-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.2);
    padding: 12px;
    border-radius: 12px;
    min-width: 150px;
    transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;
    cursor: pointer;
    position: relative;
}

/* Ensures clicking anywhere checks the box */
.equipment-checkbox-container input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.equipment-checkbox-container:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}







/* RENTAL FORM HEADING */

.rental-form-heading {
    font-size: clamp(2rem, 10vw, 5rem);
    color: #1e1e1e;
    font-weight: 500;
    margin-top: 6rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
    display: flex;
}

.dark-mode .rental-form-heading {
    color: white;
}



.rental-form-subheading {
    font-size: clamp(1.2rem, 5vw, 2rem);
    color: #1e1e1e;
    font-weight: 500;
    margin-top: 1rem;
    line-height: 1.2;
    border-left: 4px solid #0078bb;
    padding-left: 0.5rem;
}

.dark-mode .rental-form-subheading {
    color: white;
    border-left: 4px solid #0078bb;
}


/* Fieldset Styling with Deep Navy Gradient */
fieldset {
    background: 
    radial-gradient(circle at 30% 75%, rgba(173, 216, 230, 0.8), transparent 60%),
    radial-gradient(circle at 70% 25%, rgba(135, 206, 250, 0.7), transparent 60%),
    linear-gradient(135deg, #e3f2fd, #bbdefb, #90caf9); /* Soft blue gradient */
border-radius: 16px; /* Smooth, rounded corners */
padding: 0.5rem 1rem;
border-radius: 38px; /* Smooth rounded corners */
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Subtle shadow */
transition: all 0.3s ease-in-out; /* Smooth t is readable on dark background */
}

.dark-mode fieldset {
    background: 
            radial-gradient(circle at 30% 85%, rgba(6, 78, 173, 0.9), transparent 60%),
            radial-gradient(circle at 70% 15%, rgba(2, 72, 157, 0.8), transparent 60%),
            linear-gradient(135deg, #0a2540, #071e36, #021226);
}


/* Legend Styling (Fieldset Title) */
legend {
    font-size: 1.2rem; /* Ensure readable size */
    padding: 0.8rem 1rem; /* Balanced padding */
    color: #3f3f3f;
    /* Align icon and heading in a row */
    display: flex;
    align-items: center; /* Vertically align */
    justify-content: center; /* Center the content */
    gap: 0.6rem; /* Space between icon and text */
    border-radius: 12px; /* Smooth corners */
    text-align: center; /* Center text */
}

.dark-mode legend {
    color: #fff; /* Adjust legend color for dark mode */
}


/* Icon Styling */
legend i {
    font-size: 1.8rem; /* Adjust icon size */
    color: #3f3f3f;
}

.dark-mode legend i {
    color: #fff; /* Adjust icon color for dark mode */
}
/* Heading Styling */
legend h2 {
    font-weight: bold; /* Emphasize title */
    margin: 0; /* Remove default margin */
    font-size: 2rem; /* Maintain consistency */
}


    /* Inputs and Textareas */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    textarea,
    select {
        font-size: 1rem; /* Keep inputs legible */
        padding: 0.5rem; /* Adjust padding for better fit */
        margin-bottom: 1rem; /* Add space between inputs */
    }







/* HIDE EMAIL & CALL ICONS ON MOBILE */
.header-subheading-container a { 
    display: none !important;
}


.header-heading-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 90px;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;

}



/* FULL-SCREEN OVERLAY */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5); /* Dark transparent overlay */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    z-index: 500;
}

/* Show overlay when modal is visible */
.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* RENTAL INFO MODAL */
.rental-info-tab {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92vw;
    max-width: 700px;
    max-height: 85vh;
    background: rgba(255, 255, 255, 0.95);
    color: #000;
    padding: 1.5rem;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    overflow-y: auto; /* Allows scrolling on small screens */
    z-index: 900;
}

/* Show modal */
.rental-info-tab.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
}



/* RENTAL INFO LIST */
.rental-info-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 900px;
}

/* List Heading */
.list-heading {
    font-size: 2.2rem;
    font-weight: bold;
    color: #000;
    margin-bottom: 2rem;
}

/* List Items */
.rental-info-list li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

/* Removes border from last item */
.rental-info-list li:last-child {
    border-bottom: none;
}

/* Icons in List */
.rental-info-list i {
    flex-shrink: 0;
    min-width: 50px;
    text-align: left;
    font-size: 1.8rem;
    color: #0078bb;
    margin-right: auto;
}

/* List Text */
.rental-info-list p {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    flex-grow: 1;
    color: #0078bb;
    text-align: center;
    margin-left: -40px;
}

/* DARK MODE */
.dark-mode .modal-overlay {
    background: rgba(0, 0, 0, 0.8);
}

.dark-mode .rental-info-tab {
    background: rgba(0, 24, 48, 0.95);
    color: #fff;
}

.dark-mode .list-heading {
    color: #fff;
}

.dark-mode .rental-info-list li {
    border-color: rgba(255, 255, 255, 0.3);
}

.dark-mode .rental-info-list i {
    color: #fff;
}

.dark-mode .rental-info-list p {
    color: #0c7dff;
}

.btn-info-toggle i {
    font-size: 2rem;
    display: inline-block;
    transition: transform 0.4s ease-in-out;
    translate: 28px 12px;

}

.dark-mode .btn-info-toggle {
    color: #fff;
}

/* Icon transforms into "X" */
.btn-info-toggle i.icon-active {
    transform: rotate(90deg);
    translate: 22px 15px;
}

.btn-info-toggle i.icon-active::before {
    content: "\f00d"; /* FontAwesome 'X' */
}

.customer-journey-container {
    margin-top: 1rem; /* Add spacing above the journey */
    margin-bottom: 1rem; /* Add spacing below the journey */
}

/* FLEX LAYOUT FOR STEPS */
.customer-journey {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* INDIVIDUAL STEP BLOCK */
.journey-step {
    width: 100%;
    max-width: 400px;
    height: 250px;
    border-radius: 24px;
    padding: 1.2rem;
    text-align: center;
    transition: all 0.3s ease-in-out;
}

/* ICONS & NUMBER CONTAINER */
.journey-step-icon {
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: left;
    position: relative;
    margin-bottom: 0.8rem;
}

/* NUMBER STYLING */
.step-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    color: #0078bb;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border: 2px solid #0078bb;
}


/* STEP ICON */
.journey-step-icon i {
    padding-top: 2.2rem;
    font-size: 2rem;
    font-size: 2.2rem;
    color: #3f3f3f;
}

/* DARK MODE STYLING */
.dark-mode .journey-step-icon i {
    color: rgba(255, 255, 255, 0.8);
}


.dark-mode .step-number {
    color: #0078bb;
    border: 2px solid #0078bb;

}

/* STEP HEADINGS */
.journey-step h4 {
    font-size: 1.4rem;
    font-weight: bold;
    color: #0078bb;
    margin-bottom: 0.4rem;
}

/* STEP TEXT */
.journey-step p {
    font-size: 0.9rem;
    color: #333;
    margin: 0;
}

/* DARK MODE TEXT */
.dark-mode .journey-step p {
    color: #acacac;
}


.pika-single {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}


    .pika-button {
        font-size: 1.5rem;
        padding: 15px;
    }




/* Footer Base */
.footer {
    background: rgba(255, 255, 255, 0.1); /* Transparent white */
    color: #fff;
    padding: 2rem 0;
    text-align: center;
    font-size: 0.9rem;
}

.dark-mode .footer {
    box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 10px;
    color: #fff;
}

/* Footer Container - Default Desktop Layout */
.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    flex-wrap: wrap;
}

/* Company Info */
.company-info {
    flex: 1;
    text-align: center;
    min-width: 280px;
}

.company-info h6 {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 8px;
}


/* Policy Links */
.policy-links {
    flex: 1;
    text-align: right;
    min-width: 280px;
}

.muted-link {
    color: #ddd;
    text-decoration: none;
    font-size: 0.85rem;
}

.muted-link:hover {
    text-decoration: underline;
}


.policy-links a {
    color: #6c757d; /* Subtle link color */
    margin: 0 5px; /* Space between links */
    text-decoration: none;
    font-size: 0.85rem; /* Make the links slightly smaller */
}

.policy-links a:hover {
    color: #0048ff; /* Highlight color on hover */
    text-decoration: underline; /* Underline on hover */
}



/* ========================= */
/* MOBILE STYLING (Below 992px) */
/* ========================= */



/* ============================
   FLEET INFORMATION (Rental Includes)
============================= */

/* Container Styling */
.fleet-info-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    border-radius: 36px;
    margin-left: 1rem;
    margin-right: 1rem;
    backdrop-filter: blur(10px); /* Glass effect */
    -webkit-backdrop-filter: blur(10px);
    margin-bottom: 3rem;
}

/* Fleet Information Heading */
.fleet-info-heading h2 {
    font-size: clamp(1rem, 2vw, 2.2rem);
    font-weight: normal;
    color: #0078bb;
    margin-bottom: 1rem;
    text-align: center;
}

.dark-mode .fleet-info-heading h2 {
    color: #c7c7c7;
}

/* Fleet Info List (Grid Style) */
.fleet-info-list {
    display: flex;
    flex-direction: row;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: nowrap; /* Ensure items stay on one line unless absolutely necessary */
    justify-content: center;
    width: 100%;
}

/* Individual Fleet Info Item */
.fleet-info-list li {
    background: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
    backdrop-filter: blur(20px); /* Apply blur effect */
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
    margin-bottom: 1rem; /* Add spacing between items */
    border-radius: 12px;
    width: 100%; /* Full width */
    max-width: 400px; /* Prevents excessive stretching */
}

.dark-mode .fleet-info-list li {
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Green Check Icon */
.green-check {
    color: #28a745;
    font-size: 1.8rem;
    margin-bottom: 0.4rem;
}

/* Fleet Icons */
.fleet-icon {
    font-size: clamp(2rem, 2.5vw, 2.5rem);
    color: #0078bb;
}

.dark-mode .fleet-icon {
    color: #58c5ff;
}

/* Fleet Text - Ensures Two-Line Break */
.fleet-text {
    font-size: clamp(1.1rem, 1.3vw, 1rem);
    font-weight: bold;
    color: #0071bb;
    margin-top: 10px;
    width: 90%; /* Ensures text always takes up 90% of li */
    text-align: center;
    word-wrap: break-word; /* Prevents overflow */
}

.dark-mode .fleet-text {
    color: #fff;
}



@media (max-width: 500px) {

    .fleet-info-list li {
        max-width: 120px;
    }

    /* icon */
    .fleet-icon {
        font-size: clamp(2.2rem, 2.5vw, 2.5rem);
    }

    /* Fleet Text - Ensures Two-Line Break */
.fleet-text {
    font-size: clamp(0.9rem, 1.3vw, 1rem);
    font-weight: bold;
    color: #003366;
    margin-top: 10px;
    width: 90%; /* Ensures text always takes up 90% of li */
    text-align: center;
    word-wrap: break-word; /* Prevents overflow */
}

.green-check {
    color: rgba(40, 167, 69, 0.8);
    font-size: 1.5rem;
}

}




/* =======================
KEY SPECIFICATIONS
========================= */

.key-specifications h4 {
    font-size: 1.8rem;
    font-weight: normal;
    color: #555;
    text-align: center;
}

.dark-mode .key-specifications h4 {
    color: #c7c7c7;
}

/* Features Container */
.features-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}


/* =======================
HORIZONTAL LIST STYLING
========================= */
.horizontal-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
    align-items: center;
}



.horizontal-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(1rem, 1.2vw, 1.5rem);
    font-weight: bold;
    color: #003366;
    background: rgba(255, 255, 255, 0.1);
    padding: 2rem 2.5rem;
    border-radius: 20px;
    max-height: 90px;
    transition: transform 0.3s ease, background 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}


.dark-mode .horizontal-list li {
    background: rgba(0, 0, 0, 0.2);
    color: #f1f1f1;
}

.dark-mode .horizontal-list li i {
    color: #58c5ff;
}

/* PROGRESS */

/* PROGRESS */

/* Progress Bar Container */
.progress-container {
    position: absolute;
    bottom: 0; /* Move to top instead of bottom */
    right: 0;
    left: 0;
    backdrop-filter: blur(10px); /* Glass effect */
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.1); /* Transparent white */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0;
    z-index: 399;
}

/* Progress Bar Steps */
.progress-steps {
    display: flex;
    justify-content: space-between;
    width: 90%;
    max-width: 1200px;
    align-items: center;
    position: relative;
}

/* Step Label - Ensure Equal Width */
.progress-step {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: flex-end;
    position: relative;
    flex: 1;  /* Ensures all steps take equal space */
    max-width: 20%; /* Ensures consistent sizing regardless of number of steps */
}

/* Step Text */
.step-text {
    font-size: 1rem;
    font-weight: bold;
    color: #555;
    margin-bottom: 5px;
    transition: color 0.3s ease-in-out;
    height: 40px;
}

.dark-mode .step-text {
    color: #fff;
}

/* Progress Bar Shape */
.progress-bar-step {
    width: 100%;
    height: 16px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    transition: background 0.3s ease-in-out;
    border: 2px solid rgba(0, 0, 0, 0.1);
}

/* Active & Completed Step */
.step-complete .step-text {
    color: #0078bb !important;
}

.step-complete .progress-bar-step {
    background: #0078bb !important;
}

.dark-mode .step-complete .progress-bar-step {
    background: #58c5ff !important;
}

/* Default Step Text */
.step-text {
    font-size: 1rem;
    font-weight: bold;
    color: #555; /* Default color */
    margin-bottom: 5px;
    transition: color 0.3s ease-in-out;
}

.dark-mode .step-complete .step-text {
    color: #58c5ff !important;
}













/* Ensure Fieldset Bottom Spacing */
.bottom-fieldset {
    margin-bottom: 6rem;
}

/* Hide Default Checkbox */
.toggle-checkbox {
    display: none;
}

/* Align Checkbox Container */
.terms-checkbox-container {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Increased spacing */
    border-radius: 12px;
}

/* Ensure Label & Toggle Stay on the Same Row */
.custom-checkbox {
    display: flex;
    align-items: center;
    gap: 15px; /* Space between toggle and text */
    padding: 16px 0px; /* More padding for better spacing */
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    position: relative;
    width: 100%; /* Ensures it takes full width */
}

/* Keep Toggle on the Left */
.toggle-label {
    position: relative;
    width: 76px; /* Larger width */
    height: 42px; /* Larger height */
    background: rgba(255, 255, 255, 0.3);
    border-radius: 42px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    display: inline-block;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    flex-shrink: 0; /* Prevents shrinking */
}

/* Bigger Toggle Ball */
.toggle-label::before {
    content: "";
    width: 34px; /* Increased size */
    height: 34px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
    position: absolute;
    top: 4px;
    left: 4px;
}

/* Checked State */
.toggle-checkbox:checked + .toggle-label {
    background: #0078bb;
}

.toggle-checkbox:checked + .toggle-label::before {
    left: 38px; /* Adjusted position */
}

/* Responsive Text Styling */
.checkbox-text {
    font-size: clamp(1rem, 1.1vw, 2rem); /* Dynamically adjusts */
    font-weight: bold;
    color: #333;
    flex-grow: 1; /* Allow text to shrink within available space */
    overflow: hidden;
    text-overflow: ellipsis; /* Adds '...' if text is too long */
    white-space: wrap; 
}
.dark-mode .checkbox-text {
    color: #fff;
}

/* Ensure links are visible */
.checkbox-text a {
    color: #0078bb;
    text-decoration: underline;
}


}