@import "animation.css";
@import "images.css";
@import "variables.css";
/*******************************
    RESET STYLES
*******************************/
html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden; /* Optional: Prevent horizontal scrolling */
    background: transparent;
}

/* RESET margins and paddings for common elements */
body, h1, h2, h3, h4, h5, p, ul, li {
    margin: 0;
    padding: 0;
}

/* Typography for headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-base), serif;
}

/*FONTS DEFAULTS*/
h1 {
    font-family: var(--font-base), sans-serif;
    font-size: 3rem;
    color: var(--c-brand-dark);
    font-weight: 700;
    font-style: normal;
    text-shadow: var(--c-font-shadow);
}

h2 {
    font-family: var(--font-base), sans-serif;
    font-size: 2rem;
    color: var(--c-brand-dark);
    font-weight: 400;
    font-style: normal;
    text-shadow: var(--c-font-shadow);

}

h3 {
    font-family: var(--font-base), sans-serif;
    font-size: 1.5rem;
    color: var(--c-brand-dark);
    font-weight: 360;
    font-style: normal;
    text-shadow: var(--c-font-shadow);

}

p {
    font-family: var(--font-base), sans-serif;
    font-size: 1.5rem;
    color: var(--c-brand-dark);
    font-weight: 260;
    font-style: normal;
    text-shadow: var(--c-font-shadow);
}

/* Enable smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/*******************************
    SECTION BACKGROUNDS
*******************************/
.section-bg-1 {
    background: var(--bg-section-1);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}
.section-bg-2 {
    background: var(--bg-section-2);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}

/*******************************
            LINKS
*******************************/
a {
    text-decoration: none;
    color: var(--c-brand);
    transition: var(--transition);
}

a:hover {
    color: var(--c-brand-light);
}

/*NAVIGATION*/
/* Navbar link styling (default state) */
.navbar .nav-link {
    color: var(--c-brand-light); /* Default color for links */
    transition: var(--transition); /* Smooth transition */
}

.navbar .nav-link:hover {
    color: var(--c-brand); /* Color on hover (unchanged) */
}

/* Change navbar link colors when scrolled */
.navbar-scrolled .nav-link {
    color: var(--c-brand-grn); /* New color for links after scrolling */
}

.navbar-scrolled .nav-link:hover {
    color: var(--c-brand); /* Hover color remains consistent */
}

/*******************************
    NAVBAR GENERAL STYLES
*******************************/
.navbar-brand {
    padding: 6px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Optional debug border (remove in production) */
    /* border: 1px solid red; */
}

/*******************************
    SHARED LOGO BASE STYLES
*******************************/
.brand-logo,
.brand-logo::before {
    position: absolute;           /* Enable absolute positioning */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat; /* Prevent repeated images */
    background-size: contain;     /* Ensure images preserve aspect ratio */
    background-position: left;    /* Align the logo to the left */
    z-index: 1;                   /* Default stacking order */
}

.brand-logo {
    position: relative;              /* Relative position for pseudo-element offsets */
    height: 40px;                    /* Fixed height */
    width: 250px;                    /* Fixed width */
    display: inline-block;           /* Ensures proper block rendering */
    margin: 0;                       /* No external spacing */
    padding: 0;                      /* No internal spacing */
    line-height: 0;                  /* Avoid alignment issues */
    vertical-align: middle;          /* Center-align vertically */
    background-image: var(--i-logo-light); /* Default logo (light version) */
}

.brand-logo::before {
    content: "";                     /* Enables the pseudo-element */
    opacity: 0;                      /* Hidden by default */
    transition: opacity 0.3s ease;   /* Smooth fade between light/dark logos */
    pointer-events: none;            /* Avoid interaction interruptions */
    z-index: 2;                      /* Above the base logo */
    background-image: var(--i-logo); /* Secondary logo (dark version) */
}

/*******************************
    SCROLLED NAVBAR STYLES
*******************************/
.navbar-scrolled {
    background-color: var(--c-brand-light);   /* Change navbar background on scroll */
    box-shadow: var(--s-box-shadow);          /* Add shadow for depth */
}

.navbar-scrolled .brand-logo::before {
    opacity: 1;                   /* Fade in the dark logo on scroll */
}

.navbar-scrolled .brand-logo {
    background-image: none;       /* Disable the light logo image */
}

#description {
    position: relative;
    overflow: hidden;
    z-index: 0;
}
/*******************************
    SVG ARTWORK CONTAINER
*******************************/
.art-wrapper-1 {
    position: absolute;
    top: 5%;
    right: 2%;
    width: 280px; /* Same size as .art-1 */
    height: 400px;
    /*border: 1px solid red; !* Border on the wrapper *!*/
    z-index: -1;
    transform: rotate(0deg); /* Rotate the entire wrapper including the border */
    transform-origin: center; /* Rotate around the center of the wrapper */
    opacity: 0.3;
}

.art-1 {
    width: 100%; /* Fill the wrapper */
    height: 100%;
    -webkit-mask-image: var(--i-art-4-drk); /* Your mask */
    -webkit-mask-repeat: no-repeat; /* Prevent repeating */
    -webkit-mask-position: center; /* Center the mask */
    -webkit-mask-size: contain; /* Scale the mask proportionally */
    mask-image: var(--i-art-4-drk); /* Cross-browser mask */
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    background-color: var(--c-brand-grn); /* Fill color for the SVG */
    pointer-events: none; /* Prevent interactions */
}

.art-wrapper-2 {
    position: absolute;
    bottom: 5%;
    left: 2%;
    width: 150px; /* Same size as .art-1 */
    height: 150px;
    /*border: 1px solid red; !* Border on the wrapper *!*/
    z-index: -1;
    transform: rotate(90deg); /* Rotate the entire wrapper including the border */
    transform-origin: center; /* Rotate around the center of the wrapper */
    opacity: 0.3;
}

.art-2 {
    width: 100%; /* Fill the wrapper */
    height: 100%;
    -webkit-mask-image: var(--i-art-1-drk); /* Your mask */
    -webkit-mask-repeat: no-repeat; /* Prevent repeating */
    -webkit-mask-position: center; /* Center the mask */
    -webkit-mask-size: contain; /* Scale the mask proportionally */
    mask-image: var(--i-art-1-drk); /* Cross-browser mask */
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    background-color: var(--c-brand-grn); /* Fill color for the SVG */
    pointer-events: none; /* Prevent interactions */
}

.art-wrapper-3 {
    position: absolute;
    top: 5%;
    left: 2%;
    width: 250px; /* Same size as .art-1 */
    height: 150px;
    /*border: 1px solid red; !* Border on the wrapper *!*/
    z-index: -1;
    transform: rotate(0deg); /* Rotate the entire wrapper including the border */
    transform-origin: center; /* Rotate around the center of the wrapper */
    opacity: 0.3;
}

.art-3 {
    width: 100%; /* Fill the wrapper */
    height: 100%;
    -webkit-mask-image: var(--i-art-2-drk); /* Your mask */
    -webkit-mask-repeat: no-repeat; /* Prevent repeating */
    -webkit-mask-position: center; /* Center the mask */
    -webkit-mask-size: contain; /* Scale the mask proportionally */
    mask-image: var(--i-art-2-drk); /* Cross-browser mask */
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    background-color: var(--c-brand-grn); /* Fill color for the SVG */
    pointer-events: none; /* Prevent interactions */
}
/*******************************
    SECTION PADDINGS
*******************************/
.section-padding-first {
    padding-top: 180px !important;
    padding-bottom: 150px !important;
}

.section-padding {
    padding-top: 150px !important;
    padding-bottom: 150px !important;
}

.section-padding-top {
    padding-top: 150px !important;
}

.section-padding-btm {
    padding-bottom: 150px !important;
}
/*******************************
    GO ARROWS
*******************************/
.arrow-container {
    /*border: 1px solid #fd7e14;  !* Optional visual indicator *!*/
    width: auto;                /* Flexible width unless set specifically */
    height: 150px;              /* The container has a fixed vertical size */
    position: relative;         /* Establish positioning context */
    overflow: hidden;           /* Hide any overflow if arrows exceed bounds */
    margin: 0 auto;             /* Center the container itself horizontally */
    display: flex;              /* Enable Flexbox for easy centering */
    justify-content: center;    /* Centers the .arrows horizontally */
    align-items: center;        /* Centers the .arrows vertically */
}

.arrows {
    /*border: 1px solid #b6d4fe;  !* Optional border for debugging *!*/
    width: 60px;                /* Fixed width of the .arrows block */
    height: 100%;               /* Matches the height of .arrow-container */
    position: static;           /* Removes unnecessary positioning behavior */
    display: block;             /* Keeps `block` behavior intact */
}

.arrows path {
    stroke: #ffffff;
    fill: transparent;
    stroke-width: 1px;
    animation: arrow 6s infinite;
    -webkit-animation: arrow 6s infinite;
}
/*******************************
    BUTTONS
*******************************/
.btn {
    padding: 10px 50px;
    font-size: 16px;
    font-weight: 500;
    border: 0;
    border-radius: 9px;
    transition: var(--transition);
    text-transform: uppercase;
    /* Additional styling for the button can go here */
    /* Ensure button fits within parent */
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
}

/*BUTTON BRAND*/
.btn-brand {
    /* Define background and text color */
    background: var(--btn-soft-spot-gradient), var(--c-brand);
    background-blend-mode: overlay;
    color: var(--c-brand-light);
    /* Initially, make the border invisible */
    border: 1px solid transparent;
}

/* HOVER FOR BUTTON BRAND */
.btn-brand:hover {
    background: linear-gradient(to left, rgba(var(--c-brand-1-rgb), 1.0), rgba(0, 0, 0, 1.0)), var(--c-brand-grn); /* Gradient on hover */
    color: white; /* Optional: Change text color */
    transition: background 0.3s ease-in-out; /* Smooth hover transition */
}

/*BUTTON WRAPPERS*/
.btn-wrapper {
    /* Fully preserved styles */
    /*border: 1px solid blue; !* border *!*/
    display: flex; /* Ensures proper alignment of children */
    justify-content: right; /* Centers the button horizontally */
    align-items: center; /* Centers the button vertically */
    width: 100%; /* Button wrapper spans full width */
    height: auto; /* Adjusts dynamically based on content */
    overflow: hidden; /* Protects against overflow */
    box-sizing: border-box; /* Consistent sizing calculation */
    position: relative; /* Maintain relative position */
    padding: 0; /* Ensures spacing from top and bottom */
}
/*******************************
   HERO SECTION
*******************************/
#hero {
    /*border: 1px solid red; !* Your original border *!*/
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.hero-screen {
    position: absolute; /* Ensures it covers the #hero container */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            rgba(var(--c-brand-1-rgb, 34, 69, 146), 0.1),
            rgba(var(--c-brand-1-rgb, 34, 69, 146), 0.0)
    ); /* The gradient layer */
    pointer-events: none; /* Doesn't block interaction with any content */
}

/*IMAGES BACKGROUND CARUSEL*/
.carousel-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Places the carousel behind other content */
    overflow: hidden; /* Prevents overflow */
}

/* STYLING FOR FOREGROUND CONTENT */
.content-box-hero {
    /*border: 1px solid blue; !* border *!*/
    width: 100%;
    padding: 0;
    margin: 0;
    position: relative;  /* Ensures proper positioning for stacking with z-index */
    z-index: 1;          /* Keeps this content above the carousel background */
    display: flex;       /* Enables flexbox alignment */
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
}

.text-container-hero {
    /*border: 1px solid green; !* Your original border *!*/
    background: var(--txt-trans);
    text-align: center;
    padding: 1rem;
    /*box-shadow: var(--s-box-shadow);*/
}

.content-box-hero h1,
.content-box-hero h2,
.content-box-hero p {
    color: var(--c-brand-light);    /* Makes text readable */
    margin: 0;
    padding: 0;
}

.content-box-hero h1 {
    font-size: 5rem;
}
.content-box-hero h2 {
    font-size: 3rem;
}
.content-box-hero p {
    font-size: 2rem;
    font-weight: 360;
}

/*******************************
        SECTION LAYOUT
*******************************/
/* Left Section - Scoped Custom Styles */
.content-row-1 {
    display: flex; /* Enable Flexbox */
    justify-content: space-between; /* Equal spacing between .content-box-100 and .content-box-100-img */
    align-items: center; /* Align items vertically */
    flex-wrap: wrap; /* Allow wrapping for small screens */
}

.content-row-1 .content-box-1 {
    /*border: 1px solid blue; !* border *!*/
    width: 47%; /* Text container takes half the width */
    display: flex; /* Enable Flexbox inside .content-box-100 */
    flex-direction: column; /* Stack text elements vertically */
    gap: 20px; /* Add spacing between content elements */
}

.content-row-1 .content-box-1-img {
    width: 50%; /* Image container takes half the width */
    display: flex; /* Enable Flexbox for alignment */
    justify-content: center; /* Center image horizontally */
    align-items: center; /* Align image vertically */
    /*margin-left: 5%;*/
}

.content-box-1 {
    /* Existing styles fully preserved */
    /*border: 1px solid blue; !* border *!*/
    width: 100%;
    padding: 15px;
    margin: 0;
    position: relative;  /* Ensures proper positioning for stacking with z-index */
    z-index: 1;          /* Keeps this content above the carousel background */
    display: flex;       /* Enables flexbox alignment */
    align-items: center; /* Vertically center the content */
    justify-content: left; /* Horizontally align content to the left */
    /* NEW: Added these two to fix stacking order */
    flex-direction: column; /* Stack children vertically in the DOM order */
}

.text-container-1 {
    /*border: 1px solid deepskyblue; !* Your original border *!*/
    /* Existing styles preserved exactly as they are */
    padding: 0; /* 1rem Correct existing spacing around text */
    margin: 0;
    background: transparent; /* Keep this consistent */
    position: relative; /* Ensure proper placement within layout */
    width: 100%;
}

.content-box-1 h1,
.content-box-1 h2,
.content-box-1 p {
    color: var(--c-brand-dark);        /* Makes text readable */
    margin: 0;
    padding: 0;
}

.content-box-1-img {
    /* Existing styles fully preserved */
    /*border: 1px solid darkgreen; !* border *!*/
    width: auto;
    padding: 0;
    margin: 0;
    position: relative;  /* Ensures proper positioning for stacking with z-index */
    z-index: 1;          /* Keeps this content above the carousel background */
    display: flex;       /* Enables flexbox alignment */
    align-items: center; /* Vertically center the content */
    justify-content: right; /* Horizontally align content to the left */
    /* NEW: Added these two to fix stacking order */
    flex-direction: column; /* Stack children vertically in the DOM order */
    gap: 0; /* Adds space between .text-container-100 and .btn-wrapper */
}

.image-1-container {
    /*border: 1px solid red;*/
    width: 660px; /* Full width of the container */
    height: 660px; /* Fixed height for container */
    display: flex;
    align-items: center; /* Centers .warrior vertically */
    justify-content: center; /* Centers .warrior horizontally */
    position: relative;
    z-index: 1;
}
/*******************************
   WORLD MAP
*******************************/
.world-map-wrapper {
    position: relative;
    width: 100%; /* Full width for responsiveness */
    aspect-ratio: 3 / 2; /* Maintain the aspect ratio of the map container */
    height: auto; /* Automatically adjust height based on width */
    padding: 0;
    margin: 0;
}

/* CITY MARKERS (Dynamic Scaling and Correct Positioning) */
.city-marker-1, .city-marker-2, .city-marker-3,
.city-marker-4, .city-marker-5, .city-marker-6 {
    position: absolute; /* Required for layering and placing markers */
    width: 2%; /* Marker scales proportionally with the map */
    aspect-ratio: 1 / 1; /* Forces markers to remain perfectly circular */
    background-color: var(--c-brand);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000; /* Ensure markers are above the map */
    cursor: pointer;
    animation: pulsate 2s infinite; /* Optional Animation */
}

/* MARKER POSITIONS (Proportional to Container) */
.city-marker-1 { top: 88%; left: 30%; }
.city-marker-2 { top: 87%; left: 35%; }
.city-marker-3 { top: 68%; left: 36%; }
.city-marker-4 { top: 59%; left: 34%; }
.city-marker-5 { top: 69%; left: 53%; }
.city-marker-6 { top: 84%; left: 51%; }

/* TOOLTIPS Above Markers */
.city-marker-1::after, .city-marker-2::after,
.city-marker-3::after, .city-marker-4::after,
.city-marker-5::after, .city-marker-6::after {
    content: ''; /* Placeholder for tooltip text, assigned dynamically */
    position: absolute;
    top: -70px; /* Tooltip sits above the marker */
    left: 50%; /* Center tooltip horizontally */
    transform: translateX(-50%);

    background-color: rgba(0, 0, 0, 0.8); /* Tooltip background */
    color: #ffffff; /* Tooltip text color */
    font-size: 14px;
    font-family: Arial, sans-serif;
    padding: 12px 16px; /* Space around the text */
    border-radius: 8px; /* Add rounded corners */
    border: 1px solid #ffffff; /* White border */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Depth via shadow */
    text-align: center; /* Center tooltip text */
    white-space: pre-wrap; /* Enable line breaks using \A */
    width: 250px; /* Adjust tooltip width */
    max-width: 250px; /* Limit tooltip width */
    z-index: 2000; /* Tooltip appears above everything */
    opacity: 0; /* Hidden by default */
    visibility: hidden;
    pointer-events: none; /* Prevent interaction blocking */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; /* Smooth appearance */
}

/* TOOLTIPS Arrow */
.city-marker-1::before, .city-marker-2::before,
.city-marker-3::before, .city-marker-4::before,
.city-marker-5::before, .city-marker-6::before {
    content: '';
    position: absolute;
    bottom: -10px; /* Arrow points down */
    left: 50%; /* Center arrow under tooltip */
    transform: translateX(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent; /* Matches tooltip background */
    z-index: 2000; /* Matches tooltip z-index */
    opacity: 0; /* Hidden by default */
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* TOOLTIPS on Marker Hover */
.city-marker-1:hover::after, .city-marker-2:hover::after, .city-marker-3:hover::after,
.city-marker-4:hover::after, .city-marker-5:hover::after, .city-marker-6:hover::after,
.city-marker-1:hover::before, .city-marker-2:hover::before, .city-marker-3:hover::before,
.city-marker-4:hover::before, .city-marker-5:hover::before, .city-marker-6:hover::before {
    opacity: 1; /* Show tooltip and arrow */
    visibility: visible; /* Make tooltip visible */
}

/* TOOLTIPS Content (With Line Breaks Using \A) */
.city-marker-1::after {
    content: "MADRID\A Lat: 40.4168° N\A Lng: 3.7038° W";
}

.city-marker-2::after {
    content: "BARCELONA\A Lat: 41.3879° N\A Lng: 2.1699° E";
}

.city-marker-3::after {
    content: "PARIS\A Lat: 48.8566° N\A Lng: 2.3522° E";
}

.city-marker-4::after {
    content: "LONDON\A Lat: 51.5074° N\A Lng: 0.1278° W";
}

.city-marker-5::after {
    content: "VIENNA\A Lat: 48.2082° N\A Lng: 16.3738° E";
}

.city-marker-6::after {
    content: "ROMA\A Lat: 41.9028° N\A Lng: 12.4964° E";
}
/*******************************
  SECTION BACKGROUNDS index.php
*******************************/

.c-bg-1, .c-bg-2, .c-bg-3,
.c-bg-4, .c-bg-5, .c-bg-6,
.c-bg-7  {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}

.c-bg-1 {
    background: var(--bg-section-1);
}

.c-bg-2 {
    background: var(--bg-section-2);
}

.c-bg-3 {
    background: var(--bg-section-3);
}

.c-bg-4 {
    background: var(--bg-section-4);
}

.c-bg-5 {
    background: var(--bg-section-5);
}

.c-bg-6 {
    background: var(--bg-section-6);
}

.c-bg-7 {
    background: var(--bg-section-7);
}

/*DESCRIPTION SECTION*/
/*CONTENT BOX*/
/* Content Box (Text Block) */
.content-row-2 {
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center;    /* Vertically center */
}

.content-box-2 {
    z-index: 1;          /* Ensures text is layered above the background image */
    width: 100%;    /* Optional: Restricts the maximum width of text block */
    /*border: 3px solid darkblue; !* Debugging border for visibility (remove if not needed) *!*/
    background: var(--txt-trans); /* Semi-transparent background for increased readability */
    padding: 20px;       /* Adds spacing inside the text box */
    text-align: left;  /* Centers the text */
    overflow: hidden;        /* Ensures no overflow from child elements */
}

/* TYPOGRAPHY inside Content Box */
.content-box-2 h1,
.content-box-2 h2,
.content-box-2 p {
    margin: 0;          /* Removes default margin */
    padding: 0;         /* Removes default padding */
    color: var(--c-brand-dark); /* Original color variable (update if needed) */
}

/* DEBUGGING Element (Optional) */
.text-container-2 {
    /*border: 1px solid deepskyblue; !* Debugging border (remove if not needed) *!*/
    padding: 0;                 /* Inner padding for the container */
    background: transparent;       /* No background by default; can modify as needed */
    margin-bottom: 20px;
    --c-font-shadow: var(--c-font-shadow);
}

/*SPACE FOR THE SECTION BACKGROUND HEIGHT*/
.space-bg-image {
    width: 100%;
    height: 400px;
    background: var(--txt-trans);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}
/*END SECTION IMAGE LEFT*/

/*******************************
   WARRIOR (SVG IN images.css)
*******************************/
.warrior-container {
    /*border: 1px solid red;*/
    width: 100%; /* Full width of the container */
    height: 300px; /* Fixed height for container */
    display: flex;
    align-items: center; /* Centers .warrior vertically */
    justify-content: center; /* Centers .warrior horizontally */
    position: relative;
    z-index: 1;
}

/*FOOTER*/
footer {
    background-size: cover;
    background: var(--hero-soft-spot-gradient),
    linear-gradient(rgba(var(--c-brand-rgb), 0.1), rgba(0, 0, 0, 1.0)),
    var(--c-brand-dark); /* existing color */
    background-blend-mode: overlay;
    height: 100%; /* Full container height */
    width: 100%;
    position: relative; /* Needed for child positioning */
    z-index: 1; /* Ensure #industry's stacking context */
    overflow: hidden; /* Ensure any overflowing elements are clipped */
    color: var(--c-brand-light);
    padding-top: 0;
}
/*******************************
   LINES FOOTER
*******************************/
.line-frame-start {
    /*border: 1px solid #FF0000;*/
    display: flex;
    justify-content: flex-start;
    padding: 0;

}

.line-frame-end {
    display: flex;
    justify-content: flex-end;
    padding: 0;
    /*border: 1px solid #FF0000;*/
}

.line-footer-logo {
    width: 180px;
    height: 3px;
    background-color: var(--c-brand);
    margin: 9px 0 9px 0;
}

.ft-line-footer {
    width: 120px;
    height: 3px;
    background-color: var(--c-brand);
    margin: 16px 0 24px 10px;
}

/*WRAPPERS FOOTER*/
.ft-content-box {
    display: flex;
    float: left;
    justify-content: flex-end; /* Aligns items to the right */
    /* Optionally, use space-between/space-around for different distributions */
    flex-wrap: wrap; /* Ensures items wrap if necessary */
    gap: 16px; /* Optional: adds space between items */
    text-align: right;
    /*border: 1px solid #fd7e14;*/
}

.ft-content-box .ft-content-box-wrapper {
    /* Ensure these items are flex items */
    flex: 1 1 auto;
    /* Widths already defined by the classes or adjust as needed */
}

.footer-content-wrapper {
    display: flex;
    justify-content: flex-end; /* Aligns all child flex items to the end of the row */
    flex-wrap: wrap; /* Ensures items wrap to the next line if necessary */
    gap: 16px; /* Optional: add spacing between flex items */
}

.ft-content-box-wrapper {
    flex: 0 0 auto; /* Prevent the column from stretching, maintains its size */
    width: auto; /* Ensure the column retains its default behavior */
}

/* SECTION FOOTER */
.footer-top {
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-top .ft-logo {
    margin-bottom: 0;
    height: 150px;
    width: auto;
}

.ft-content-box {
    flex: 1; /* Allow the ft-content-box to take the remaining space */
    max-width: 75%; /* Optional: to prevent it from becoming too large */
    align-self: flex-end; /* Align this specific item to the end of the flex container */
}

.footer-bottom {
    background-color: var(--bg-section-1);
    color: var(--c-brand-light);
}

.footer-bottom p {
    color: var(--c-brand-light);
    font-size: 9px;
    font-weight: 100;
    margin-bottom: 0;
}

footer li,
footer a,
footer p {
    list-style: none;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 300;
    color: var(--c-brand-light);
    transition: var(--transition);
}

footer li:hover,
footer a:hover,
footer p:hover {
    color: var(--c-brand);
    transition: var(--transition);
    font-size: 14px;
    font-weight: 300;
    text-decoration: none;
}

footer ul {
    padding: 0;
    margin-bottom: 0;
    list-style: none;
    font-size: 14px;
    font-weight: 90;
    color: var(--c-brand-light);
    transition: var(--transition);
}
/* END OF SECTION FOOTER*/

/*ARROW SCROLL*/
/* Scroll-to-Top Button Styling */
.icon-arrow-frame {
    position: fixed; /* Fix the button to the viewport */
    bottom: 20px; /* Spacing from the bottom */
    right: 20px; /* Spacing from the right */
    width: 50px; /* Circular size of the button */
    height: 50px;
    background-color: var(--c-brand); /* Background color */
    border-radius: 50%; /* Make it circular */
    display: flex; /* Flexbox for center alignment */
    align-items: center; /* Center the icon vertically */
    justify-content: center; /* Center the icon horizontally */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
    cursor: pointer; /* Pointer cursor for interactivity */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; /* Smooth visibility change */
    opacity: 0; /* Hidden by default */
    visibility: hidden; /* Fully hidden initially */
    z-index: 1000; /* Ensure it's above other items */
    padding: 0;
}

/* Hover effect for the button */
.icon-arrow-frame:hover {
    background-color: var(--c-brand-grn); /* Lighter background on hover */
    transform: scale(1.1); /* Slight zoom effect on hover */
}

/* Styling the arrow icon */
.ri-arrow-up-circle-fill {
    font-size: 45px; /* Adjust icon size */
    color: white; /* Color of the arrow icon */
}

/* Button becomes visible when the 'show' class is added */
.icon-arrow-frame.show {
    opacity: 1; /* Fully visible */
    visibility: visible; /* Change visibility */
}

#scrollToTop {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

#scrollToTop.show {
    opacity: 1;
    visibility: visible;
}

/*TORTILLAS COLOUR LIST*/
/* Remove bullets and apply styles only to the specific ul in #tortillas-color */
#tortillas-color ul {
    list-style-type: none; /* Removes default bullets */
    padding: 0; /* Removes padding around the list */
    margin: 20px 0 0 0; /* Removes margin around the list */
}

#tortillas-color ul li {
    display: flex; /* Ensures icons and text align horizontally */
    align-items: center; /* Vertically centers the icon and text */
}

#tortillas-color ul li i {
    margin-right: 8px; /* Adds spacing between icons and text */
}

#tortillas-color ul li p {
    font-size: 18px; /* Change text size */
    line-height: 1.5; /* Adjust line spacing */
    color: var(--c-txt-1); /* Change text color if needed */
    padding-left: 10px; /* Space to the left of text */
}

#tortillas-color ul li p b {
    margin-right: 9px; /* Adds 10px space after <b> */
}

/* Individual icon colors */
#tortillas-color ul li:nth-child(1) i {
    color: #5390B2; /* Blue for the first icon */
    font-size: 30px;
}

#tortillas-color ul li:nth-child(2) i {
    color: #C01C8A; /* Red for the second icon */
    font-size: 30px;
}

#tortillas-color ul li:nth-child(3) i {
    color: #984B7D; /* Purple for the third icon */
    font-size: 30px;
}

#tortillas-color ul li:nth-child(4) i {
    color: #FFD393; /* Gray (or white equivalent) for the fourth icon */
    font-size: 30px;
}

#tortillas-color ul li:nth-child(5) i {
    color: #DA9D41; /* Yellow for the fifth icon */
    font-size: 30px;
}

#tortillas-color ul li:nth-child(6) i {
    color: black; /* Black for the sixth icon */
    font-size: 30px;
}

/*SPICE LEVEL ICONS*/
/* Ensure the parent .taco-box is properly styled */
#salsas .spice-box {
    display: flex; /* Use flex for horizontal layout */
    justify-content: space-evenly; /* Distribute boxes evenly within the space */
    align-items: center; /* Align items vertically to the middle, if needed */
    flex-wrap: nowrap; /* Keep all boxes in a single row */
    margin: 20px 0 30px 0; /* Add spacing above taco-box */
    width: 100%; /* Ensure the parent container takes full width */
}

#salsas .spice-box .icon-frame-1 {
    width: 30%; /* Each box will take 20% of the container width */
    max-width: 30%; /* Prevent the box from exceeding its allocated width */
    background-color: var(--c-bg-3); /* Optional background color */
    border-radius: 8px; /* Optional rounded corners */
    box-shadow: var(--s-box-shadow); /* Optional subtle shadow */
    text-align: center; /* Center the content inside the box */
    padding: 15px; /* Add padding inside the box */
    box-sizing: border-box; /* Include padding and border in the element's width/height */
}

/* Styling for icons inside the boxes */
#salsas .spice-box .icon-wrapper-1 {
    color: var(--c-brand); /* Icon color */
    margin-bottom: 10px; /* Add spacing below the icon */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Heading inside each box */
#salsas .spice-box .icon-frame-1 h2 {
    font-size: 16px; /* Font size for the heading */
    margin: 10px 0 5px; /* Create space around the heading */
}

/* Paragraph inside each box */
#salsas .spice-box .icon-frame-1 p {
    font-size: 14px; /* Font size for box descriptions */
    line-height: 1.5; /* Improve readability */
    margin: 0; /* Remove default margins */
}

/* Individual icon colors */
/* First icon in spice-box */
#salsas .spice-box .icon-frame-1:nth-child(1) .icon-wrapper-1 i {
    color: var(--c-level-1); /* Blue for the first icon */
    font-size: 30px;
}

/* Second icon in spice-box */
#salsas .spice-box .icon-frame-1:nth-child(2) .icon-wrapper-1 i {
    color: var(--c-level-2); /* Red for the second icon */
    font-size: 30px;
}

/* Third icon in spice-box */
#salsas .spice-box .icon-frame-1:nth-child(3) .icon-wrapper-1 i {
    color: var(--c-level-3); /* Purple for the third icon */
    font-size: 30px;
}

/*TACO CHOOSSE ICONS*/
/* Ensure the parent .taco-box is properly styled */
#taco .taco-box {
    display: flex; /* Use flex for horizontal layout */
    justify-content: space-evenly; /* Distribute boxes evenly within the space */
    align-items: center; /* Align items vertically to the middle, if needed */
    flex-wrap: nowrap; /* Keep all boxes in a single row */
    margin: 20px 0 30px 0; /* Add spacing above taco-box */
    width: 100%; /* Ensure the parent container takes full width */
}

#taco .taco-box .icon-frame-2 {
    width: 40%; /* Each box will take 20% of the container width */
    max-width: 40%; /* Prevent the box from exceeding its allocated width */
    background-color: var(--c-bg-3); /* Optional background color */
    border-radius: 8px; /* Optional rounded corners */
    box-shadow: var(--s-box-shadow); /* Optional subtle shadow */
    text-align: center; /* Center the content inside the box */
    padding: 15px; /* Add padding inside the box */
    box-sizing: border-box; /* Include padding and border in the element's width/height */
}

/* Styling for icons inside the boxes */
#taco .taco-box .icon-wrapper-2 {
    color: var(--c-brand); /* Icon color */
    margin-bottom: 10px; /* Add spacing below the icon */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Heading inside each box */
#taco .taco-box .icon-frame-2 h2 {
    font-size: 16px; /* Font size for the heading */
    margin: 10px 0 5px; /* Create space around the heading */
}

/* Paragraph inside each box */
#taco .taco-box .icon-frame-2 p {
    font-size: 14px; /* Font size for box descriptions */
    line-height: 1.5; /* Improve readability */
    margin: 0; /* Remove default margins */
}

/* Second icon in spice-box */
#taco .taco-box .icon-frame-2:nth-child(1) .icon-wrapper-2 i {
    color: var(--c-brand); /* Red for the second icon */
    font-size: 30px;
}

/* Third icon in spice-box */
#taco .taco-box .icon-frame-2:nth-child(2) .icon-wrapper-2 i {
    color: var(--c-brand-grn); /* Purple for the third icon */
    font-size: 30px;
}
/*TACO CHOOSSE ICONS END*/


/* Ensure the parent .taco-box is properly styled */
#loyalty .loyalty-box {
    display: flex; /* Use flex for horizontal layout */
    justify-content: space-evenly; /* Distribute boxes evenly within the space */
    align-items: center; /* Align items vertically to the middle, if needed */
    flex-wrap: nowrap; /* Keep all boxes in a single row */
    margin: 20px 0 30px 0; /* Add spacing above taco-box */
    width: 100%; /* Ensure the parent container takes full width */
}

#loyalty .loyalty-box .icon-frame-3 {
    width: 40%; /* Each box will take 20% of the container width */
    max-width: 40%; /* Prevent the box from exceeding its allocated width */
    background-color: var(--c-bg-3); /* Optional background color */
    border-radius: 8px; /* Optional rounded corners */
    box-shadow: var(--s-box-shadow); /* Optional subtle shadow */
    text-align: center; /* Center the content inside the box */
    padding: 15px; /* Add padding inside the box */
    box-sizing: border-box; /* Include padding and border in the element's width/height */
}

/* Styling for icons inside the boxes */
#loyalty .loyalty-box .icon-wrapper-3 {
    color: var(--c-brand); /* Icon color */
    margin-bottom: 10px; /* Add spacing below the icon */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Heading inside each box */
#loyalty .loyalty-box .icon-frame-3 h2 {
    font-size: 16px; /* Font size for the heading */
    margin: 10px 0 5px; /* Create space around the heading */
}

/* Paragraph inside each box */
#loyalty .loyalty-box .icon-frame-3 p {
    font-size: 14px; /* Font size for box descriptions */
    line-height: 1.5; /* Improve readability */
    margin: 0; /* Remove default margins */
}

/* Second icon in spice-box */
#loyalty .loyalty-box .icon-frame-3:nth-child(1) .icon-wrapper-3 i {
    color: var(--c-brand-dark); /* Red for the second icon */
    font-size: 30px;
}

/* Third icon in spice-box */
#loyalty .loyalty-box .icon-frame-3:nth-child(2) .icon-wrapper-3 i {
    color: var(--c-brand-dark); /* Purple for the third icon */
    font-size: 30px;
}

/***** MENU SECTION *****/
/* Menu section container styles */
#menu {
    background-color: var(--c-brand-light); /* Optional section background */
    position: relative; /* Makes #menu the reference point for child elements */
    overflow: visible; /* Ensures the child elements are not cut off */
}

/* Menu section titles */
#menu .menu-section-title {
    width: 100%;
    height: 100%;
    display: flex; /* Center alignment using Flexbox */
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Stack heading elements */
    text-align: center;
    padding: 20px 0; /* Vertical padding */
}

#menu .menu-section-title-2 {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    text-align: left; /* Left-align content */
    padding: 20px 0;
}

/* Menu content styling */
.col-menu {
    padding: 0;
    margin: 0;
    display: flex; /* Flexbox layout for rows */
    flex-wrap: wrap; /* Allow wrapping to the next row */
    justify-content: space-between; /* Distribute items equally */
    gap: 15px; /* Space between items */
    width: 100%;
    box-sizing: border-box;
}

.menu-row, .menu-row-2 {
    margin: 0 0 30px 0;
    padding: 0;
}

/* Individual menu boxes */
.menu-box {
    margin: 0;
    padding: 10px; /* Inner padding for items */
    display: flex; /* Flex layout */
    flex-direction: row; /* Side-by-side layout */
    gap: 15px; /* Space between items */
    align-items: center; /* Center align content */
    flex: 0 1 calc(50% - 15px); /* Two boxes per row */
    box-sizing: border-box;
}

/* Text and image wrappers */
#menu .menu-text-wrapper {
    flex: 1; /* Take up remaining space */
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: flex-start;
    box-sizing: border-box;
}

/* Wrapper for each menu image */
#menu .menu-img-wrapper {
    border: 1px solid var(--c-brand-light); /* Optional border styling */
    height: 150px; /* Fixed height for consistency */
    flex: 0 0 40%; /* Flexible width, responsive to parent */
    max-width: 150px; /* Ensure max size of the container */
    box-sizing: border-box; /* Include padding in dimensions */
    overflow: hidden; /* Hide any content that overflows */
    position: relative; /* Required for positioning pseudo-element */
    cursor: pointer; /* Changes the cursor to a hand icon */
}

/* Dark overlay effect using ::before */
#menu .menu-img-wrapper::before {
    content: ''; /* Adds an empty pseudo-element for the overlay */
    position: absolute; /* Positioned relative to wrapper */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Apply a semi-transparent black overlay */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease; /* Smooth fade-in effect on hover */
    z-index: 1; /* Ensures the overlay is above the image */
    pointer-events: none; /* Ensures the overlay doesn't block pointer events */
}

/* Hover state - Dark overlay becomes visible */
#menu .menu-img-wrapper:hover::before {
    opacity: 1; /* Fully visible overlay on hover */
}

/* Menu item details */
#menu .menu-item-price {
    display: flex; /* Horizontal layout for name and price */
    justify-content: space-between; /* Space out the two items */
    align-items: center;
    margin-bottom: 10px;
    overflow: hidden;
    box-sizing: border-box;
}

#menu .menu-item-price .item {
    flex: 0 0 70%; /* Take up 70% of the container */
    text-align: left;
}

#menu .menu-item-price .price {
    flex: 0 0 30%; /* Take up 30% of the container */
    text-align: right;
}

/* Headings for prices and items */
#menu .menu-item-price h1,
#menu .menu-item-price h2 {
    margin: 0; /* Remove spacing */
    padding: 0;
    line-height: 1; /* Compact content */
}

/* Font sizes for menu item names and prices */
#menu .menu-item-price .item h1 {
    font-size: 1.5em;
}

#menu .menu-item-price .price h2 {
    font-size: 1.0em;
}

/* Menu item description styling */
#menu .menu-item-description p {
    font-size: 14px;
    display: flex;
    align-items: center; /* Align content vertically */
    gap: 10px; /* Space between icon and text */
    margin: 0;
    padding: 0;
    line-height: 1; /* Compact spacing */
}

#menu .menu-item-description-line {
    margin: 10px 0;
    height: 1px; /* Thin line for visual separation */
    background-color: #ccc; /* Neutral color for the line */
}


/*OPENING SECTION*/
/*CUSTOM MODAL*/
/* Custom modal styling */
.custom-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stays on top of the page */
    z-index: 1050; /* High z-index for proper layering */
    top: 0;
    left: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
}

/* Make modal visible */
.custom-modal.show {
    display: flex; /* Flexbox for centering the content */
}

/* Content inside the modal (the expanded image) */
.custom-modal .modal-content-image {
    background: inherit; /* Inherit the same background image */
    width: 100%; /* Adjust as needed */
    height: 100%; /* Adjust modal size */
    background-size: contain; /* Ensure the image fits without cropping */
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth animations */
}

/* Close button for modal */
.custom-modal .close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    z-index: 1; /* Ensure it’s above the modal content */
}


/* OPENINGS  */
/* The row containing everything */
.openings-row {
    /*border: 1px solid red;*/
    width: 100%;
    margin: 0; /* No unwanted margins */
    padding: 0;
    overflow: hidden; /* Prevent unintended overflows outside the row */
    position: relative; /* Needed so blur bars in .openings-row are properly positioned */
}

/* Bootstrap column container */
.openings-col {
    /*border: 1px solid orange; !* For illustration *!*/
    width: max-content; /* Allow dynamic width based on content */
    padding: 30px; /* Preserve original padding */
    margin: 0; /* No additional margin needed */
    position: relative; /* Important for ::before and ::after positioning */
    box-sizing: border-box; /* Ensure sizing includes padding and border */
    border-radius: 15px;
    background: var(--bg-section-8);
    box-shadow: var(--s-box-shadow);
    display: flex; /* Turn into a Flex container */
    justify-content: space-between; /* Equal space between the boxes */
    align-items: center; /* Vertically center align the boxes */
    gap: 3%; /* Add a 3% gap between openings-img-box elements */
    overflow-x: auto; /* Enable horizontal scrolling */
    overflow-y: hidden; /* Prevent vertical scroll */
    scrollbar-width: thin; /* For Firefox - thin scrollbar */
    scrollbar-color: var(--c-brand-dark) var(--c-brand-light); /* For Firefox - custom scrollbar color */
}

/* Scrollbar styles for WebKit (Chrome, Safari, Edge) */
.openings-col::-webkit-scrollbar {
    height: 10px; /* Height of horizontal scrollbar */
}

.openings-col::-webkit-scrollbar-thumb {
    background: var(--c-brand); /* Scrollbar thumb color */
    border-radius: 5px; /* Round scrollbar thumb */
}

.openings-col::-webkit-scrollbar-track {
    background: var(--c-brand-light); /* Scrollbar background (track) color */
}

/* Add blur effect using pseudo-elements */
.openings-row::before,
.openings-row::after {
    content: ''; /* Creates an empty pseudo-element */
    position: absolute; /* Positioned relative to .openings-row */
    top: 0; /* Covers the entire height of the container */
    height: 100%; /* Initially spans the full height */
    width: 50px; /* Fixed width for blur bars */
    z-index: 3; /* Ensures the blur appears above the scrolling content */
    pointer-events: none; /* Makes this layer non-interactive */
    background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)); /* Default fade effect */
    filter: blur(8px); /* Smooth blur */
    clip-path: inset(0px 0px 10px 0px); /* Cut off only the bottom by 5px */
}

/* Left edge blur */
.openings-row::before {
    left: 0; /* Fixed to the left side */
    background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* Fade from solid white */
}

/* Right edge blur */
.openings-row::after {
    right: 0; /* Fixed to the right side */
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* Fade from solid white */
}

/* Individual openings image box */
.openings-img-box {
    /*border: 1px solid orangered;*/
    border-radius: 9px;
    background: var(--c-brand-light);
    width: calc((100% - 6%) / 3); /* Default: 3 boxes per row with 3% gap */
    height: auto;
    margin: 0;
    padding: 30px 30px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    box-shadow: var(--bs-box-shadow);
    transition: width 0.3s ease-in-out; /* Smooth resizing as the screen shrinks */
}

/* Image wrapper for the openings */
.openings-img-wrapper {
    /*border: 1px solid deepskyblue; !* Your original border *!*/
    border-radius: 9px;
    height: 200px; /* Fixed height for consistency */
    width: 300px; /* Dynamic width to fit the parent container */
    position: relative; /* For layering control and proper alignment */
    align-items: center; /* Centers `.image-featured-1` vertically */
    justify-content: center; /* Centers `.image-featured-1` horizontally */
    overflow: hidden; /* Hide any content that overflows */
    cursor: pointer; /* Changes the cursor to a hand icon */
    display: flex; /* Enables flexbox */
    transition: transform 0.3s ease; /* Ensure smooth scaling on hover */
}

.openings-img-wrapper:hover {
    transform: scale(1.05); /* Scale up the wrapper slightly on hover */
}

/* Dark overlay effect using ::before */
#openings .openings-img-wrapper::before {
    content: ''; /* Adds an empty pseudo-element for the overlay */
    position: absolute; /* Positioned relative to wrapper */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Apply a semi-transparent black overlay */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease; /* Smooth fade-in effect on hover */
    z-index: 1; /* Ensures the overlay is above the image */
    pointer-events: none; /* Ensures the overlay doesn't block pointer events */
}

/* Hover state - Dark overlay becomes visible */
#openings .openings-img-wrapper:hover::before {
    opacity: 1; /* Fully visible overlay on hover */
}

/* First icon in featured-box */
/* Target the first .openings-img-box and its <i> element in h1 */
/* First icon */
#openings .openings-img-box:nth-child(1) h1 i {
    color: var(--c-brand); /* Color for the first icon */
    font-size: 30px;
    margin-right: 6px;
}

/* Second icon */
#openings .openings-img-box:nth-child(2) h1 i {
    color: var(--c-brand); /* Color for the second icon */
    font-size: 28px;
    margin-right: 6px;
}

/* Third icon */
#openings .openings-img-box:nth-child(3) h1 i {
    color: var(--c-brand); /* Color for the third icon */
    font-size: 26px;
    margin-right: 6px;
}

#openings .openings-img-box:nth-child(4) h1 i {
    color: var(--c-brand); /* Color for the third icon */
    font-size: 26px;
    margin-right: 6px;
}

.openings-title {
    /*border: 1px solid violet;*/
    text-align: left;
    margin: 9px 0 0;
    padding: 0;
    font-size: 1.5em;
    font-weight: 600;
    color: var(--c-brand-dark);
}

.openings-subtitle {
    /*border: 1px solid blueviolet;*/
    text-align: left;
    margin: 6px 0 0;
    padding: 0;
    font-size: 1.0em;
    font-weight: 400;
    color: var(--c-brand-dark);
}

/* Modal Styling */
.modal-body {
    background-color: black; /* Adds a dark background for the modal */
}

.modal-image {
    width: 100%; /* Ensures modal background spans the entire width */
    height: 100%; /* Ensures modal background spans the entire height */
    background-size: contain; /* Ensures the image always completely fills the modal */
    background-position: center; /* Centers the image in the modal view */
    background-repeat: no-repeat; /* Prevent repetition of the background image */
}


/*******************************
    COVER PAGES STYLES (loyalty.php)
*******************************/
/*******************************
    MAIN STRUCTURE
*******************************/
.cover-text-block {
    /*border: 1px solid deepskyblue; !* Your original border *!*/
    margin: 0; /* Reset margins */
    padding: 0; /* Reset padding */
    background: transparent; /* Transparent background */
    position: relative; /* Allows custom positioning if needed */
    width: 100%; /* Default full width */
    height: auto; /* Adjust height based on content */
    box-sizing: border-box; /* Includes padding and border in dimensions */
}

/* Child element default typography and alignment */
.cover-text-block h1 {
    /*border: 1px solid green; !* Just for illustration purposes *!*/
    text-align: left; /* Aligns H1 content to the left */
    margin: 0; /* Reset margin for consistency */
    padding: 0; /* Reset padding */
}

.cover-text-block h5 {
    /*border: 1px solid red; !* For illustration purposes *!*/
    text-align: left; /* Aligns H5 content to the right */
    margin: 0; /* Reset margin for consistency */
    padding: 0; /* Reset padding */
}

.cover-text-block p {
    /*border: 1px solid #b6d4fe; !* Just for illustration *!*/
    text-align: center; /* Aligns paragraph text to the center */
    margin: 0; /* Reset margin for consistency */
    padding: 0; /* Reset padding */
}

/*******************************
    COL-COVER (Parent to Cover Text Block)
*******************************/
.col-cover {
    /*border: 1px solid yellow; !* For illustration *!*/
    width: 100%; /* Make the container half the width */
    padding: 15px; /* Add padding inside for spacing */
    margin: 0; /* Reset margin */
    position: relative; /* Positions this container in relation to other elements (if needed) */
    box-sizing: border-box; /* Ensures padding/border are included in dimensions */
}

/*******************************
    ROW-COVER (Wrapper for Flex Behavior)
*******************************/
.row-cover {
    /*border: 1px solid orangered; !* Just for illustration *!*/
    display: flex; /* Enable Flexbox for multi-column layout */
    justify-content: left; /* Center columns horizontally */
    align-items: center; /* Center columns vertically */
    flex-wrap: wrap; /* Allow wrapping for responsive designs */
}

/*******************************
    LINES
*******************************/
.line-frame {
    /*border: 1px solid darkred;*/
    display: flex;
    justify-content: flex-start;/*use flex-start or end*/
    padding: 0;
}

.cover-line {
    width: 360px; /* Control line width */
    height: 3px; /* Line thickness */
    background-color: var(--c-brand); /* Brand color */
    margin: 0 0 9px 0; /*Horizontal line*/
}
/*******************************
    COVER PAGES STYLES
*******************************/

/* The parent section styles */
#cover {
    position: relative; /* Allows child elements like the image wrapper to use absolute positioning */
    overflow: hidden; /* Prevents any overflowing content outside the section */
    width: 100%; /* Full page width */
    height: 30vh; /* Full viewport height */
}

/* Image wrapper */
.cover-img-wrapper {
    width: 100%; /* Takes full width of the parent container */
    height: 100%; /* Ensures full-height coverage */
    position: absolute; /* Allows placement inside the section to cover the area */
    top: 0;
    left: 0;
    z-index: -1; /* Push the image wrapper behind the text content */
    overflow: hidden; /* Prevents image overflow outside the wrapper */
}

.cover-text-block h1 {
    font-size: 2.5rem; /* Adjust the header size for readability */
    margin: 0.5rem 0;
    color: var(--c-brand-light); /* Slightly faded for a softer look */
}

.cover-text-block h5 {
    font-size: 1.25rem;
    margin: 0.5rem 0;
    color: var(--c-brand-light); /* Slightly faded for a softer look */
}

/*******************************
    SECOND NAVBAR background
*******************************/
/* Default state - no scroll */
#second-navbar {
    background-color: rgba(var(--c-brand-2-rgb), 1.0); /* FIRST bg by default */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}
/* Scrolled state - darker background */
#second-navbar.navbar-scrolled {
    background-color: rgba(var(--c-brand-3-rgb), 1.0); /* SECOND background */
    box-shadow: var(--s-box-shadow); /* Optional shadow for visibility */
}

/*******************************
    DEFAULT PAGE
*******************************/
.section-text-block {
    /*border: 1px solid deepskyblue; !* Your original border *!*/
    margin: 0 0 9px 0; /* Reset margins */
    padding: 0; /* Reset padding */
    background: transparent; /* Transparent background */
    position: relative; /* Allows custom positioning if needed */
    width: 100%; /* Default full width */
    height: auto; /* Adjust height based on content */
    box-sizing: border-box; /* Includes padding and border in dimensions */
}

.section-text-block-1 {
    /*border: 1px solid greenyellow; !* Your original border *!*/
    margin: 0 0 9px 0; /* Reset margins */
    padding: 0; /* Reset padding */
    background: transparent; /* Transparent background */
    position: relative; /* Allows custom positioning if needed */
    width: 100%; /* Default full width */
    height: auto; /* Adjust height based on content */
    box-sizing: border-box; /* Includes padding and border in dimensions */
}

.col-section {
    /*border: 1px solid yellow; !* For illustration *!*/
    width: calc(100% - 15px); /* Adjust width to account for gap spacing */
    padding: 30px; /* Preserve original padding */
    margin: 0; /* No additional margin needed */
    position: relative; /* Preserve relative positioning */
    box-sizing: border-box; /* Ensure sizing includes padding and border */
    border-radius: 15px;
    background: var(--bg-section-4);
    box-shadow: var(--s-box-shadow);
}

.col-section-1 {
    /*border: 1px solid yellow; !* For illustration *!*/
    width: calc(50% - 15px); /* Adjust width to account for gap spacing */
    padding: 30px; /* Preserve original padding */
    margin: 0; /* No additional margin needed */
    position: relative; /* Preserve relative positioning */
    box-sizing: border-box; /* Ensure sizing includes padding and border */
    border-radius: 15px;
    background: var(--bg-section-8);
    box-shadow: var(--s-box-shadow);
}

.col-section-2 {
    /*border: 1px solid yellow; !* For illustration *!*/
    width: calc(100% - 15px); /* Adjust width to account for gap spacing */
    padding: 30px; /* Preserve original padding */
    margin: 0; /* No additional margin needed */
    position: relative; /* Preserve relative positioning */
    box-sizing: border-box; /* Ensure sizing includes padding and border */
    border-radius: 15px;
    background: var(--bg-section-8);
    box-shadow: var(--s-box-shadow);
}

.col-section-3 {
    /*border: 1px solid yellow; !* For illustration *!*/
    width: calc(100% - 15px); /* Adjust width to account for gap spacing */
    padding: 30px; /* Preserve original padding */
    margin: 0; /* No additional margin needed */
    position: relative; /* Preserve relative positioning */
    box-sizing: border-box; /* Ensure sizing includes padding and border */
    border-radius: 15px;
    background: var(--txt-trans);
    box-shadow: var(--txt-trans);

}

.section-text-block h1 {
    /*border: 1px solid palevioletred; !* For illustration *!*/
    text-align: left; /* Aligns paragraph text Horizontally */
    color: var(--c-brand-dark);
    font-size: 2.0rem;
    font-weight: 600;
    margin: 0;
    padding: 0;
    text-transform: capitalize;
}

.section-text-block-1 h1 {
    /*border: 1px solid palevioletred; !* For illustration *!*/
    text-align: left; /* Aligns paragraph text Horizontally */
    color: var(--c-brand-dark);
    font-size: 3.0rem;
    font-weight: 600;
    margin: 0;
    padding: 0;
    text-transform: capitalize;
}

.section-text-block h2 {
    text-align: left;
    font-size: 2rem;
    color: var(--c-brand-dark);
    font-weight: 400;
    font-style: normal;
    padding: 0;
    margin: 0 0 18px 0;
    text-shadow: var(--c-font-shadow);
}

.section-text-block-1 h2 {
    text-align: left;
    font-size: 2rem;
    color: var(--c-brand-dark);
    font-weight: 400;
    font-style: normal;
    padding: 0;
    margin: 0 0 18px 0;
    text-shadow: var(--c-font-shadow);
}

.section-text-block h5 {
    /*border: 1px solid blueviolet; !* For illustration *!*/
    text-align: left; /* Aligns paragraph text Horizontally */
    color: var(--c-brand-dark);
    font-size: 1.5rem;
    font-weight: 360;
    margin: 0 0 9px 0;
    padding: 0;
    text-transform: capitalize;
}

.section-text-block-1 h5 {
    /*border: 1px solid blueviolet; !* For illustration *!*/
    text-align: left; /* Aligns paragraph text Horizontally */
    color: var(--c-brand-dark);
    font-size: 1.5rem;
    font-weight: 360;
    margin: 0 0 9px 0;
    padding: 0;
    text-transform: capitalize;
}

.section-text-block p {
    /*border: 1px solid orange; !* For illustration *!*/
    text-align: left; /* Aligns paragraph text Horizontally */
    color: var(--c-brand-dark);
    font-size: 1.5rem;
    font-weight: 260;
    margin: 0 0 9px 0; /* Reset margin for consistency */
    padding: 0; /* Reset padding */
}

.section-text-block-1 p {
    /*border: 1px solid orange; !* For illustration *!*/
    text-align: left; /* Aligns paragraph text Horizontally */
    color: var(--c-brand-dark);
    font-size: 1.5rem;
    font-weight: 260;
    margin: 0 0 9px 0; /* Reset margin for consistency */
    padding: 0; /* Reset padding */
}

.row-section {
    /*border: 1px solid orangered; !* Just for illustration *!*/
    display: flex; /* Activate Flexbox for alignment */
    justify-content: space-between; /* Distribute equal space between .col-section */
    align-items: flex-start; /* Align items to the top */
    flex-wrap: wrap; /* Ensure responsiveness by wrapping elements */
    gap: 15px; /* Adds space between columns uniformly */
    margin: 0 0 30px 0;
}

.section-line {
    width: 360px;
    height: 3px;
    background-color: var(--c-brand);
    margin: 0;
}
.section-line-frame {
    /*border: 1px solid darkred;*/
    display: flex;
    justify-content: flex-start;/*use flex-start or end*/
    padding: 0;
    margin: 0 0 18px 0;
}

/*******************************
    FOR TESTING
*******************************/
.space-scroll {
    height: 600px;
    background-color: #FFFFFF;
}

/*******************************
    SECTION BACKGROUNDS loyalty.php
*******************************/

#description-loyalty {
    background: var(--c-brand-light);
}

/*TACO CHOOSSE ICONS*/
/* Ensure the parent .taco-box is properly styled */
#box-1 .taco-box,
#box-2 .loyalty-box,
#box-3 .taco-box {
    display: flex; /* Use flex for horizontal layout */
    justify-content: space-evenly; /* Distribute boxes evenly within the space */
    align-items: center; /* Align items vertically to the middle, if needed */
    flex-wrap: nowrap; /* Keep all boxes in a single row */
    margin: 20px 0 30px 0; /* Add spacing above taco-box */
    width: 100%; /* Ensure the parent container takes full width */
}

#box-1 .taco-box .icon-frame-2,
#box-2 .loyalty-box .icon-frame-3,
#box-3 .taco-box .icon-frame-2 {
    width: 40%; /* Each box will take 20% of the container width */
    max-width: 40%; /* Prevent the box from exceeding its allocated width */
    background-color: var(--c-bg-3); /* Optional background color */
    border-radius: 8px; /* Optional rounded corners */
    box-shadow: var(--s-box-shadow); /* Optional subtle shadow */
    text-align: center; /* Center the content inside the box */
    padding: 15px; /* Add padding inside the box */
    box-sizing: border-box; /* Include padding and border in the element's width/height */
}

/* Styling for icons inside the boxes */
#box-1 .taco-box .icon-wrapper-2,
#box-2 .loyalty-box .icon-wrapper-3,
#box-3 .taco-box .icon-wrapper-2 {
    color: var(--c-brand); /* Icon color */
    margin-bottom: 10px; /* Add spacing below the icon */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Heading inside each box */
#box-1 .taco-box .icon-frame-2 h2,
#box-2 .loyalty-box .icon-frame-3 h2,
#box-3 .taco-box .icon-frame-2 h2 {
    font-size: 16px; /* Font size for the heading */
    margin: 10px 0 5px; /* Create space around the heading */
}

/* Paragraph inside each box */
#box-1 .taco-box .icon-frame-2 p,
#box-2 .loyalty-box .icon-frame-3 p,
#box-3 .taco-box .icon-frame-2 p {
    font-size: 14px; /* Font size for box descriptions */
    line-height: 1.5; /* Improve readability */
    margin: 0; /* Remove default margins */
}

/* Second icon in spice-box */
#box-1 .taco-box .icon-frame-2:nth-child(1) .icon-wrapper-2 i,
#box-2 .loyalty-box .icon-frame-3:nth-child(1) .icon-wrapper-3 i,
#box-3 .taco-box .icon-frame-2:nth-child(1) .icon-wrapper-2 i{
    color: var(--c-brand); /* Red for the second icon */
    font-size: 30px;
}

/* Third icon in spice-box */
#box-1 .taco-box .icon-frame-2:nth-child(2) .icon-wrapper-2 i,
#box-2 .loyalty-box .icon-frame-3:nth-child(2) .icon-wrapper-3 i,
#box-3 .taco-box .icon-frame-2:nth-child(2) .icon-wrapper-2 i {
    color: var(--c-brand-grn); /* Purple for the third icon */
    font-size: 30px;
}