/* Desktop-Specific Styling */
@media (min-width: 993px) {


.dark-mode-toggle {
    margin-left: 1rem;
    margin-right: 0;
}


.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 */
}

/* 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 */
}

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


.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 repeating */
    display: flex;
    justify-content: center; /* Center content horizontally */
    position: relative; /* To allow overlay */
    color: white; /* Text color for contrast */
    z-index: 1;
    align-items: center;
}

.hero-buttons-main {
    display: flex;
    justify-content: left;
    align-items: left;
    gap: 0.3rem;
    margin-top: 4rem;
}

.hero-button {
    font-size: 1.2rem;
    margin-top: 4rem;
}

/* Opaque Black Overlay */
.hero::before {
    backdrop-filter: blur(5px); /* Apply blur effect */
    -webkit-backdrop-filter: blur(5px);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.15); /* 60% opaque white */
    z-index: 0; /* Ensures the overlay stays behind content */
}

.dark-mode .hero::before {
    background: rgba(0, 0, 0, 0.6); /* 60% opaque black */
    z-index: 0; /* Ensures the overlay stays behind content */
}

.hero-buttons {
    display: flex;
    justify-content: left;
    align-items: left;
    gap: 1rem;
    margin-top: 4rem;
}

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

.hero-main-heading {
    justify-content: left;
    align-items: left;
    flex-direction: column;
    display: flex;
}

/* LIGHT MODE styles for 'CLYDE' & 'WORKBOATS */
.hero-main-heading-clyde {
    font-size: clamp(15rem, 14vw, 24rem);
    font-weight: 900;
    color: #000; /* Example color for emphasis */
    -webkit-text-stroke: 2px #0078bb; /* Outline color and thickness */
}

.hero-main-heading-workboats {
    font-size: clamp(8rem, 10vw, 18rem);
    font-weight: 900;
    color: #000;
    -webkit-text-stroke: 2px #0078bb; /* Outline color and thickness */
}

/* DARK MODE styles for 'CLYDE' & 'WORKBOATS */
.dark-mode .hero-main-heading-clyde {
    color: #0078bb;
    -webkit-text-stroke: 1px rgb(255, 255, 255); /* Outline color and thickness */
}

.dark-mode .hero-main-heading-workboats {
    color: #0078bb;
    -webkit-text-stroke: 1px rgb(255, 255, 255); /* Outline color and thickness */
}

.hero-subheading {
    white-space: nowrap; 
    color: #fff;
    font-weight: 600;
    display: block;
    width: fit-content; /* Adjusts the width to match the heading automatically */
    display: flex;
    justify-content: left;
    align-items: left;
}

.dark-mode .hero-subheading {
    color: #fff;
}

.dots {
    font-size: 2rem;
    color: #0071db;   
    margin: 0 1rem;
}

.dark-mode .dots {
    color: #0071db;   
    }
   
/* QUICK CONTACT BUTTONS */
.quick-contact-buttons {
    position: absolute;
    bottom: 1rem;
    right: 1.2rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

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

}

.lead {
    font-size: 1.8rem;
    line-height: 1.9;
    margin: 0; /* Remove extra margin */
    padding: 0; /* Reset padding */
    color: #000; /* Text color for better readability */
}

.cta-container {
    position: absolute; /* Allows placement relative to the hero section */
    bottom: 6rem; /* Distance from the bottom of the hero section */
    left: 50%; /* Horizontally center */
    transform: translateX(-50%); /* Adjust for perfect centering */
    padding: 1rem; /* Add some padding inside the container */
    display: flex;
    flex-direction: column; /* Align items in a column */
    align-items: center; /* Center items horizontally */
    text-align: center; /* Center text */
    gap: 1rem; /* Space between elements */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
    z-index: 2; /* Ensure it stays above the background overlay */
    outline: 2px solid #0071db;
}

.dark-mode .cta-container .lead {
    color: #fff; /* Light text for dark mode */
}

/* STORY */
.background-image-container {
    min-height: 100vh; /* 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 SECTION: Heading & Subheading */
.story-top {
    text-align: left;
    padding-bottom: 2rem; /* Space before the fade */
}


/* BOTTOM SECTION: Section Subheading & Buttons */
.story-bottom {
    position: absolute;
    bottom: 1rem;
    padding-bottom: 2rem;
    width: 100%;
    text-align: center;
}

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

.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 {
    font-size: clamp(0.8rem, 2vw, 1rem); /* Dynamically adjusts font size */
    line-height: 1.5; /* Adjust line height for readability */
    color: #2b2b2b; /* Optional: ensure text is clearly visible */
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
}

.dark-mode .overlay-subheading {
    color: #58c5ff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.section-subheading {
    font-size: 2rem;
    border-left: 8px solid #0078bb; /* Optional: add a decorative border */
    padding: 0 2rem; /* Optional: add padding for spacing */
    color: rgb(21, 21, 21);
    font-weight: 100;
    margin-left: 8rem;
    margin-right: 8rem;
    margin-bottom: 2rem;
}

.dark-mode .section-subheading {
    border-left-color: #58c5ff; /* Change border color */
    color: rgb(223, 223, 223);
}

.copyright {
    font-size: 1.1rem;
    color: #000000;
}

.dark-mode .copyright {
    color: #fff;
}




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

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








/* DELIVERY INFO CONTAINER - Fixed to Bottom Right */
.delivery-info-container {
    backdrop-filter: blur(20px); /* Apply blur effect */
    -webkit-backdrop-filter: blur(20px);
    border-radius: 64px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Soft shadow */
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 10; /* Ensures it stays on top */
    margin-top: 6rem;
    width: 300px; 
    position: absolute;
    overflow: hidden;
    bottom: 2rem;
    right: 1.2rem;
    background: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
}

.dark-mode .delivery-info-container {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Darker shadow */
    background: rgba(0, 0, 0, 0.2); /* Semi-transparent black */    
}


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

/* 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.6rem;
    font-weight: bold;
    margin-right: 1rem;
    text-align: center;
}

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

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

/* FIRST LINE - "Delivery Available" */
.delivery-top {
    color: #0077bb; /* Blue */
    display: block;
    font-size: 1.5rem;
}

.dark-mode .delivery-top {
    color: #0077bb;
}

/* SECOND LINE - "Across the UK" */
.delivery-bottom {
    color: #3f3f3f;
    display: block;
    font-size: 1.5rem;
}

.dark-mode .delivery-bottom {
    color: #fff;
}

/* 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; transform: translate(-50%, 0) scale(1); } /* Holds in place */
    100% { opacity: 1; transform: translate(-50%, 100%) scale(1); } /* Slides down to exit */
}


/* 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 */
}




















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

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

}

.vessels-include-box {
    margin-top: 4rem;
    margin-bottom: 6rem;
}

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

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

/* Fleet Info List (Grid Style) */
.fleet-info-list {
    display: flex;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-height: 300px;
}

/* Individual Fleet Info Item */
.fleet-info-list li {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    color: #003366;
    padding: 2rem;
    text-align: center;
    border-radius: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1; /* Allow dynamic growth */
    min-width: 220px; /* Ensures better text scaling */
    max-width: 350px;
    height: auto; /* Allows flexible height based on text */
    transition: transform 0.3s ease-in-out;
}

.dark-mode .fleet-info-list li {
    background: rgba(0, 0, 0, 0.1);
    color: #f1f1f1;
}

/* Ensure the text scales to fill the width properly */
.fleet-text {
    font-size: clamp(1.2rem, 1.5vw, 2rem);
    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 Icon */
.green-check {
    color: #28a745;
    font-size: 2rem;
    margin-bottom: 0.4rem;
}

/* Fleet Icons */
.fleet-icon {
    font-size: 3rem;
    color: #0078bb;
}



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

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



/* =======================
KEY SPECIFICATIONS
========================= */
.key-specifications {
    margin-top: 1.5rem;
}

.key-specifications h4 {
    font-size: 1.8rem;
    font-weight: bold;
    color: #555;
}

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

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

/* TAB IMAGE */
.tab-img {
    width: 100%;
    height: 80px;
    padding: 1rem;
    object-fit: cover;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

/* ENLARGE IMAGE WHEN TAB IS ACTIVE */
.tab-button.tab-active .tab-img {
    transform: scale(1.1); /* Slightly enlarges selected image */
}

/* TAB LABEL */
.tab-label {
    font-size: clamp(0.6rem, 2vw, 1rem);
    font-weight: bold;
    color: #000000;
    margin-left: auto;
    margin-right: auto;
}

.dark-mode .tab-label {
    color: #fff;
}


    .specifications-container {
        text-align: center;
    }

    
    /* Specifications Container */
    .specs-grid-container { 
        text-align: center;
        border-radius: 36px;    
        box-shadow: 0 0 10px rgba(0, 120, 187, 0.3);
        margin-bottom: 4rem;
        margin-right: 8rem;
        margin-left: 8rem;
        background: rgba(255, 255, 255, 0.3);
    }

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

        .spec-table-subheading {
            padding-top: 2rem;
            padding-bottom: 2rem;
            margin-left: 8rem;
            margin-right: 8rem;
            text-align: center;
            justify-content: center;
    
        }

        .fleet-info-heading h2 {
            font-size: clamp(0.8rem, 3vw, 1.2rem);
            font-weight: bold;
            color: #0071db;
            margin-top: 2rem;
        }

        .spec-table-sub-sub {
            padding-top: 2rem;
            padding-bottom: 2rem;
            margin-left: 8rem;
            margin-right: 8rem;
            text-align: left;
            justify-content: left;
        }
        
    /* Add a dividing line between the first and second row */
    .spec-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Top row: 2 columns */
        grid-template-rows: auto auto;  /* Two rows */
        gap: 20px;
        position: relative;
    }

    /* First row (Vessel and Type) */
    .spec-grid .first-row {
        border-left: 4px solid rgba(0, 113, 219, 0.7);
    }

    /* Second-row styling */
    .spec-grid .second-row {
        grid-column: span 2;
        display: grid;
        grid-template-columns: repeat(6, 1fr); /* Second row: 6 columns */
        gap: 20px;
    }

    .spec-grid .second-row2 {
        grid-column: span 2;
        display: grid;
        grid-template-columns: repeat(6, 1fr); /* Second row: 6 columns */
        gap: 20px;
        border-left: 4px solid rgba(0, 113, 219, 0.7);
    }

    .spec-cell {
        display: flex;
        flex-direction: column; /* Ensures icon is above text */
        align-items: center;
        justify-content: center;
        padding-left: 2rem;
        text-align: center;
        transition: all 0.3s ease-in-out;
    }

    .spec-cell:hover {
        transform: scale(1.05);
    }

    /* Icon Styling */
    .spec-cell .icon {
        font-size: clamp(1.4rem, 5vw, 5rem);
        color: rgba(0, 113, 219, 0.7);
        margin-bottom: 10px;
    }
    

    /* First row text styling */
    .feature-text.first-row-text {
        font-size: clamp(1.5rem, 3vw, 1.8rem);
        font-weight: bold;
        color: #0071db;
    }

    /* Second row text styling */
    .feature-text.second-row-text {
        font-size: clamp(1rem, 1.5vw, 1.2rem);
        font-weight: bold;
        color: #0071db;
    }

    /* Detail text styling */
    .details-text {
        font-size: clamp(1rem, 2vw, 1.4rem);
        color: #333;
        font-weight: normal;
        padding-left: 1rem;
        min-width: 100px;
    }

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

    /* Feature and details text in the same line */
    .spec-cell .feature-detail {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        font-size: clamp(1rem, 2vw, 1.5rem);
        font-weight: 600;
        color: #333;
    }

    .disclaimer-text {
        font-size: clamp(0.8rem, 2vw, 1rem);
        color: #333;
        text-align: center;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }

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


/* =======================
HORIZONTAL LIST STYLING
========================= */
.horizontal-list {
    display: flex;
    flex-wrap: wrap; /* Ensures wrapping on smaller screens */
    gap: 20px; /* Space between items */
    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);
}

/* Icons */
.horizontal-list li i {
    font-size: 1.5rem;
    justify-content: center;
    text-align: center;
    color: #0078bb;
}

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

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











/* =========================
   SERVICES SECTION STYLING
   ========================= */

   #equipment {
    min-height: 100vh;
}

.equipment-container {
    margin-bottom: 2rem;
}

.heading-header {
    margin-left: 1.2rem;
}



/* Equipment Grid */
.equipment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-right: 8rem;
    margin-left: 8rem;
    height: 100%;
    margin-bottom: 2rem;
}

/* Equipment Item Styling */
.equipment-item {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateY(100px);
    opacity: 0;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.dark-mode .equipment-item {
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);}

/* 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));
}

/* Equipment Icons */
.equipment-item .icon {
    font-size: 4rem;
    color: #0078bb;
    transition: color 0.3s ease;
    padding: 1rem 0;
}

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

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


/* Equipment Descriptions */
.equipment-item .service-description {
    font-size: 1.2rem;
    color: #292929;
    max-width: 90%;
    opacity: 0.8;
    margin-bottom: 1rem;
}

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

.equipment-bottom {
    text-align: center;
    padding-bottom: 2rem;
    width: 100%;
}


/* =========================
   EQUIPMENT GRID STYLING - FADE & STAGGERED APPEARANCE
========================= */

/* Equipment Item Styling */
.equipment-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
    border-radius: 36px;
    opacity: 0; /* Start hidden */
    transform: translateY(50px); /* Start lower */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    height: 100%;
}

/* 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;
}






/* TOP: Heading + Subheading */
.services-top {
    text-align: left;
    padding-bottom: 2rem;
}


/* BOTTOM: Service Details + Buttons */
.services-bottom {
    text-align: center;
    padding-top: 2rem;
    position: absolute;
    bottom: 1rem;
    right: 1.2rem;
    left: 1.2rem;
}


/* EXTRA SERVICES 3 LOGOS */

/* Ensure services row is horizontal */
.services-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Ensures responsiveness */
    margin-top: 1.5rem;
    margin-bottom: 3rem;
    margin-right: 8rem;
    margin-left: 8rem;
    gap: 1rem;
}

/* Individual service items */
.service-extra {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px); /* Apply blur effect */
    -webkit-backdrop-filter: blur(10px);

    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 36px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    padding: 2rem;
}

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


.service-extra .service-description {
    font-size: 1.2rem;
    color: #333;
    opacity: 0.8;
    margin-top: auto; /* Pushes the description to the bottom */

}

.dark-mode .service-extra .service-description {
    color: #c8c8c8;
}

/* Ensure icons remain prominent */
.service-extra .icon {
    font-size: 4rem;
    color: #0078bb;
    transition: color 0.3s ease;
    padding: 1rem;
}

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

.services-background {
    width: 100%; 
    background-size: cover;
    position: relative;
}

/* Font Awesome Icons */
.icon {
    font-size: 3rem;
    color: #0078bb;
    min-width: 25px;
}

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

}

.rental-form {
    margin-bottom: 8rem;
}

.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;
    align-items: center;
    display: flex;
    justify-content: center;
}

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

/* Rental Form Subheading */
.rental-form-subheading {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    max-width: 80%;
    color: #3f3f3f;
    margin: 0 auto;
    opacity: 0.9;
    line-height: 1.4;
}

.dark-mode .rental-form-subheading {
    color: rgba(255, 255, 255, 0.8);

}

    

/* Main Heading */
.overlay-heading {
    font-size: clamp(2rem, 8vw, 5rem);
    color: #2d2d2d;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    margin-top: 1rem;
}

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






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

.button-container2 a {
    text-decoration: none;
    min-width: 180px;
}

    
    
    



/* =========================
SERVICES STYLING
========================= */

        /* CTA Button Styling */
        .button-box {
            display: flex;
            justify-content: left;
            align-items: center;
            margin-left: 4rem;
        }
    
        .button-box .btn {
            font-size: 1.2rem;
        }








/* Quick Contact Buttons */
.quick-contact-buttons2 {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 1rem;
}





/* =========================
RENTAL FORM STYLING
========================= */




/* Progress Bar Container */
.progress-container {
    position: fixed;
    bottom: 0;
    right: 1.2rem;
    left: 1.2rem;
    backdrop-filter: blur(10px); /* Glass effect */
    -webkit-backdrop-filter: blur(10px);

    background: rgba(255, 255, 255, 0.1); /* Transparent white */
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 36px;
    padding: 5px 0;
    z-index: 998;
}

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

/* Step Label */
.progress-step {
    text-align: center;
    flex: 1;
    position: relative;
}

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

.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;
}

/* RENTAL FORM INFO CONTAINER MODAL */

/* 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); /* Glass effect */
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    z-index: 999;
}

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

/* Rental Info Modal */
.rental-info-tab {
    position: fixed;
    top: 50%; /* Keep it centered */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw; /* Default for most screens */
    max-width: 800px; /* Reduce max-width for better scaling */
    max-height: 90vh; /* Prevents overflow on small screens */
    background: rgba(255, 255, 255, 0.95);
    color: #000;
    padding: 2rem;
    border-radius: 36px; /* Slightly smaller for better mobile fit */
    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, transform 0.4s ease-in-out;
    z-index: 1000;
    overflow-y: auto; /* Allow scrolling if content overflows */
}


/* Heading Styling */
.list-heading {
    font-size: clamp(1.8rem, 2vw, 2.2rem);
    font-weight: 700;
    color: #0078bb;
    margin-bottom: 1rem;
}

/* Common List Styles */
.rental-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rental-info-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 36px; /* Matches feature-box style */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Adds shadow */
    font-size: 1rem;
    backdrop-filter: blur(10px); /* Adds blur effect */
    -webkit-backdrop-filter: blur(10px);
}



.rental-included h4 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #001926;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

.dark-mode .rental-included h4 {
    color: #fff;
}

.rental-included li {
    background: rgba(255, 255, 255, 0.2);
    color: #005f8d;
}

.rental-included li i {
    color: #0078bb; /* Blue check icons */
}

.rental-additional h4 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #001926;
    margin-bottom: 0.5rem;
    margin-top: 1rem;

}

.rental-additional li {
    color: #005f8d;
    background: rgba(255, 255, 255, 0.2);
}

.rental-additional li i {
    color: #0078bb; /* Blue check icons */
}

/* Disclaimer Text */
.disclaimer-text {
    font-size: 1rem;
    color: #555;
    text-align: center;
    display: block;
    margin-top: 1rem;
}

.dark-mode .rental-info-tab {
    background: rgba(0, 0, 0, 0.2);
}



.rental-additional i,
.rental-included i {
    color: #0078bb;
    margin-left: 2rem;
}



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

/* Close Button */
.btn-info-toggle {
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    z-index: 1200; /* Ensures button is clickable */
}

/* Dark Mode Adjustments */
.dark-mode .modal-overlay {
    background: rgba(0, 0, 0, 0.8); /* Darker overlay in dark mode */
}

.dark-mode .rental-info-tab {
    background: rgba(0, 24, 48, 0.95); /* Slightly darker for better contrast */
    color: #fff;
}

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

.rental-info-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 900px; /* Ensures the list stays centered */
}

.list-heading {
    font-size: 2.2rem;
    font-weight: bold;
    color: #000;
    margin-bottom: 3rem;
}

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

/* Styles each list item */
.rental-info-list li {
    display: flex;
    align-items: center;
    justify-content: center; /* Centers text inside the modal */
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3); /* Adds divider */
}

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

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

/* Ensures icons stay left-aligned */
.rental-info-list i {
    flex-shrink: 0; /* Prevents icons from resizing */
    min-width: 50px; /* Keeps icons consistently aligned */
    text-align: left; /* Aligns icons properly */
    font-size: 2.2rem;
    color: #0078bb;
    margin-right: auto; /* Pushes text to center while keeping icons left */
}

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

/* Ensures text remains centered within the modal */
.rental-info-tab {
    text-align: center;
}

/* Targets text inside list items */
.rental-info-list p {
    margin: 0;
    font-size: 1.2rem;
    text-align: center;
    margin-left: -40px;
    font-weight: 700;
    flex-grow: 1; /* Allows text to fill available space */
    color: #0078bb;
}

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


/* Toggle Button (Info Icon) */
.btn-info-toggle {
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    z-index: 1200;
}

/* Animation for Icon */
.btn-info-toggle i {
    font-size: 2rem;
    display: inline-block;
    transition: transform 0.4s ease-in-out;
    translate: 29px 13px;

}

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

}

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


/* Dark Mode Adjustments */
.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 .btn-info-toggle {
    color: #fff;
}









/* CUSTOMER JOURNEY CONTAINER */
.customer-journey-container {
    text-align: center;
    margin-top: 4rem;
    margin-left: 8rem;
    margin-right: 8rem;
    justify-content: space-between;
}

/* FLEX LAYOUT FOR STEPS */
.customer-journey {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 1rem;
}

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

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

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

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

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

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

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

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

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



/* Boat Type Buttons */
.boat-type-container {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
    margin-top: 1rem;
}

.boat-type-btn {
    border: 2px solid #0078bb;
    border-radius: 38px;
    padding: 1rem;
    text-align: center;
    width: 120px;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

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

.boat-type-btn img {
    width: 100%;
    height: auto;
    margin-bottom: 0.5rem;
    border-radius: 5px;
}

.boat-type-btn.selected {
    background: #ffffff;
    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: 1rem;
    font-weight: bold;
    color: inherit;
    margin: 0;
}

.boat-type-btn.selected h4 {
    color: #0078bb;
}

.dark-mode .boat-type-btn.selected h4 {
    color: #fff;
}

.form-label {
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 0.3rem;
    color: #3f3f3f;
}

.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;
}


.contact-details {
    font-size: 1rem;
    line-height: 1.6;
}

/* =========================
FIELDSET STYLING 
========================= */

/* General Fieldset Styling */
fieldset {
width: 100%; /* Ensures full width */
max-width: 1000px; /* Prevents excessive stretching on large screens */
border-radius: 38px; /* Consistent smooth corners */
padding: 2.2rem;
margin: 0 auto 2rem; /* Centers the fieldset & adds bottom spacing */
transition: all 0.3s ease-in-out; /* Smooth hover effects */
box-sizing: border-box; /* Ensures padding doesn’t expand fieldset */
}



/* FIELDSET HOVER & FOCUS STATES */
fieldset:hover {
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.3);
}

fieldset:focus-within {
box-shadow: 0 0 12px rgba(0, 64, 128, 0.4); /* Subtle focus glow */
}

/* Legend Styling */
legend {
    font-size: 2.4rem;
    font-weight: bold;
    margin-bottom: 1rem;
    padding: 0 10px; /* Padding around the text for better spacing */
    flex-direction: row;
    display: flex;
    color: #3f3f3f;
}

.dark-mode legend {
    color: #fff;
}

legend i {
    font-size: 3rem;
    margin-right: 3rem;
    color: #3f3f3f;
}

.dark-mode legend i {
    color: rgba(255, 255, 255, 0.8);
}

legend h2 {
    font-size: 2.4rem;
    font-weight: bold;
    margin-left: 2rem;

}

/* Input and Textarea Styling */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 1rem;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #0078bb; /* Focused border color */
    outline: none;
    box-shadow: 0 0 5px rgba(0, 120, 187, 0.3); /* Subtle blue glow */
}

/* Label Styling */
label {
    font-weight: bold;
    display: block;
    color: #383838;
}

.dark-mode label {
    color: #bebebe;
}

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

.dark-mode .form-check-label {
    color: #fff;
}


.header-heading {
    font-size: 3rem;
    font-weight: bold;
    color: #0078bb;
    margin-top: 1rem;
}

.text-side {
    flex: 1; /* Take up half the width */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem;
}

.text-side h2 {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 2rem;
    color: #0078bb;
}

.text-side p {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 2rem;
}

.text-side .steps {
    list-style-type: none;
    padding: 0;
    font-size: 1rem;
    color: #555;
}

.text-side .steps li {
    margin-bottom: 0.5rem;
}

.image-side {
    flex: 1; /* Take up half the width */
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-side img {
    width: 100%;
    max-height: 100%;
    object-fit: cover; /* Ensures the image fills the space proportionally */
}

/* General styling for the header subheading icons */
.header-subheading-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: absolute;
    top: 160px;
    right: 1.2rem;
    gap: 15px;
    font-size: 1rem;
    z-index: 999;
}

.additional-requirements-container {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping onto new lines */
    gap: 12px; /* Space between items */
    justify-content: flex-start; /* Align items to the left */
}



/* =========================
   OPTIONAL EXTRAS TILE STYLING
   ========================= */

   .form-check-equipment {
    border: 2px solid #0078bb;
    border-radius: 38px;
    padding: 1rem;
    text-align: center;
    width: 120px;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Hover Effect */
.form-check-equipment:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 120, 187, 0.3);
}

/* Icon Styling */
.form-check-equipment i {
    font-size: 2.4rem;
    color: #0078bb;
    margin-bottom: 0.5rem;
}

/* Label Styling */
.form-check-equipment label {
    font-size: 1rem;
    font-weight: bold;
    color: inherit;
    margin: 0;
    cursor: pointer;
}

/* Selected State */
.form-check-equipment.selected {
    background: #ffffff;
    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;
}

/* Selected State - Icon & Label */
.form-check-equipment.selected i,
.form-check-equipment.selected label {
    color: #0078bb;
}

/* Dark Mode */
.dark-mode .form-check-equipment {
    border-color: #0078bb;
    background-color: transparent;
}

.dark-mode .form-check-equipment.selected {
    background-color: #58c5ff;
    color: #fff !important;
}

.dark-mode .form-check-equipment.selected i,
.dark-mode .form-check-equipment.selected label {
    color: #fff;
}

/* Hide Default Checkbox */
.form-check-equipment input[type="checkbox"] {
    display: none;
}


.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}



.form-check-label {
    margin: 0;
    line-height: 1.5; /* Improves label readability */
}      



/* 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 */
    white-space: nowrap; /* Prevent text from wrapping */
}

/* 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(1.2rem, 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;
}



/* General visibility and transition styling */
#dateFields, #periodLengthField {
    opacity: 1;
    visibility: visible;
    height: auto;
    transition: opacity 0.3s ease, visibility 0.3s ease, height 0.3s ease;
}

/* Set a minimum height to prevent jumping */
#dateFields, #periodLengthField {
    min-height: 60px; /* Consistent height for both sections */
}

/* Flexbox to center the content */
#periodLengthField {
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
    flex-direction: column; /* Stack label and input vertically */
    text-align: center; /* Center-align text */
    gap: 1rem; /* Add spacing between label and input */
}

/* Ensure inputs are responsive */
input[type="number"], input[type="date"] {
    max-width: 100%; /* Ensure inputs shrink on smaller screens */
    width: 300px; /* Default width for larger screens */
    padding: 0.75rem; /* Adjust padding for readability */
    font-size: 1rem; /* Ensure text is legible */
}

/* Label styling */
label.form-label {
    font-size: 1.2rem; /* Larger labels for better readability */
    font-weight: bold;
}


    /* =========================
   DATE PICKER STYLING (Light & Dark Mode)
========================= */

/* Pikaday Calendar Wrapper */
.pika-single {

    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    
    width: 400px;
    max-width: 95vw;
    max-height: 88vh;
    border-radius: 12px;
    border: 3px solid #004080;
    position: fixed !important;
    z-index: 1000 !important; /* Ensures it appears above overlay */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
}

/* Calendar Header */
.pika-label {
    font-size: 1.7rem;
    font-weight: bold;
    color: #004080;
}

/* Calendar Table */
.pika-table {
    font-size: 1.4rem;
    width: 100%;
    text-align: center;
}

/* Calendar Days (Weekdays) */
.pika-table th {
    font-size: 1.2rem;
    font-weight: 600;
    color: #004080;
    padding-bottom: 10px;
}

/* Date Buttons */
.pika-button {
    font-size: 1.4rem;
    padding: 14px;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
}

/* Hover & Active States */
.pika-button:hover,
.is-selected .pika-button {
    background: #004080;
    color: white;
    font-weight: bold;
    border-radius: 6px;
}

/* Disabled Dates */
.is-disabled .pika-button {
    color: rgba(0, 0, 0, 0.3);
    cursor: not-allowed;
}

/* =========================
   DARK MODE STYLING
========================= */
.dark-mode .pika-single {
    background: rgba(10, 37, 64, 0.9);
    color: white;
    border-color: #0078bb;
}


.dark-mode .pika-button:hover {
    background: #0078bb;
}

/* Selected Date in Dark Mode */
.dark-mode .pika-single td.is-selected {
    background: #0078bb !important;
    color: white !important;
    border-radius: 6px;
}






































/* ======================= */
/* POLICY STYLING - LIGHT */
/* ======================= */

.policy-section {
    padding: 4rem 0;
    line-height: 1.7;
    margin-top: 90px;
    color: #222; /* Slightly softer than black */
    transition: background-color 0.3s, color 0.3s;
}

.policy-section .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.policy-heading {
    font-size: 2.5rem;
    color: #003366; /* Deep navy tone for brand alignment */
    margin-bottom: 2rem;
    margin-top: 4rem;
    text-align: center;
    font-weight: 700;
    transition: color 0.3s;
}

.policy-section h2 {
    font-size: 1.8rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #004080; /* Clear navy heading */
    transition: color 0.3s;
}

.policy-section p,
.policy-section ul {
    font-size: 1.1rem;
    color: #333333;
    margin-bottom: 1.5rem;
    transition: color 0.3s;
}

.policy-section .intro {
    font-size: 1.2rem;
    margin-bottom: 3rem;
    text-align: justify;
    color: #444;
    transition: color 0.3s;
}

.policy-section a {
    color: #0078bb; /* Bright brand blue for links */
    text-decoration: underline;
    transition: color 0.3s;
}

.policy-section address {
    font-style: normal;
    color: #222;
}


/* ======================= */
/* POLICY STYLING - DARK */
/* ======================= */

.dark-mode .policy-section {
    color: #e0e6eb;
}

.dark-mode .policy-heading {
    color: #7dcaff; /* Vibrant light blue */
}

.dark-mode .policy-section h2 {
    color: #7dcaff; /* Softer blue for headings */
}

.dark-mode .policy-section p,
.dark-mode .policy-section ul {
    color: #d0dce8;
}

.dark-mode .policy-section .intro {
    color: #b0c7db;
}

.dark-mode .policy-section a {
    color: #84d7ff; /* Bright, soft blue */
}

.dark-mode .policy-section address {
    color: #ccd6e0;
}




}