@media (min-width: 0px) {
    #firstDiv{
        background:url("../image/0-home/home-bg-m.webp") no-repeat;
        background-size: cover;
    }
    #slogan{
       font-size: 30px;
        margin-top: 100px;
        color:grey;
    }
    .sloganColor{
        color:white;
    }
    #pDelta{
        font-size: 30px;
        font-weight: bolder;
    }
    #pWith{
        color:white;
        font-size: 32px;
    }
    /*.shine {*/
    /*    display: inline-block;*/
    /*    background: radial-gradient(#43a3fd, #ffffff, #d0d0c4, #bbb2dc, #43d7fd);*/
    /*    background: radial-gradient(#43a3fd, #ffffff, #d0d0c4, #bbb2dc, #43d7fd);*/
    /*    background: -moz-radial-gradient(#43a3fd, #ffffff, #d0d0c4, #bbb2dc, #43d7fd);*/
    /*    background: -o-radial-gradient(#43a3fd, #ffffff, #d0d0c4, #bbb2dc, #43d7fd);*/
    /*    background: webkit-radial-gradient(#43a3fd, #ffffff, #d0d0c4, #bbb2dc, #43d7fd);*/
    /*    background: -ms-radial-gradient(#43a3fd, #ffffff, #d0d0c4, #bbb2dc, #43d7fd);*/
    /*    background-size: 400%;*/
    /*    -webkit-background-clip: text;*/
    /*    -webkit-text-fill-color: transparent;*/
    /*    animation: shine 60s linear infinite;*/
    /*}*/
    #second-Container{
        font-size: 20px;
    }
}
/*=================================================================================================*/
@media (min-width: 992px) {
    #firstDiv {
        background: url("../image/0-home/home-bg-l.webp") no-repeat;
        background-size: cover;
    }
    #slogan {
        font-size: 60px;
        margin-top: 50px;
        color: #c5c4c4;
        animation: textShadow 1s forwards 2700ms;
    }
    @keyframes textShadow {
        0% {
            text-shadow: 0 0 0 black;
        }
        100%{
            text-shadow: 4px 4px 7px black;
        }
    }

    .sloganColor{
        color: #060123;
    }
    #pDelta{
        font-size: 45px;
        font-weight: bold;
        text-align: center;
    }
    #pWith{
        color:black;
        font-size: 45px;
    }
    /*.shine {*/
    /*    !*display: inline-block;*!*/
    /*    background: radial-gradient(#1f1f4b, #050021, #727fcd, #575353, #379fd5, #c51717);*/
    /*    background: radial-gradient(#1f1f4b, #050021, #727fcd, #575353, #379fd5, #c51717);*/
    /*    background: -moz-radial-gradient(#1f1f4b, #050021, #727fcd, #575353, #379fd5, #c51717);*/
    /*    background: -o-radial-gradient(#1f1f4b, #050021, #727fcd, #575353, #379fd5, #c51717);*/
    /*    background: webkit-radial-gradient(#1f1f4b, #050021, #727fcd, #575353, #379fd5, #c51717);*/
    /*    background: -ms-radial-gradient(#1f1f4b, #050021, #727fcd, #575353, #379fd5, #c51717);*/
    /*    background-size: 300%;*/
    /*    -webkit-background-clip: text;*/
    /*    -webkit-text-fill-color: transparent;*/
    /*    animation: shine 60s linear infinite;*/
    /*}*/

    #second-Container{
        font-size: 18px;
    }
}
/*====================================================================================*/
.vh-80{
    height: 80vh!important;
}

#menuBackground {
    display: none;
}

#homeBut {
    display: none !important;
}

html {
    overflow-y: scroll;
}






/*Hero section*/
/* In css/home.css */

/*.hero-section, .hero-section .carousel, .hero-section .carousel-item {*/
/*    height: 100vh; !* Full viewport height *!*/
/*    min-height: 600px;*/
/*    width: 100%;*/
/*}*/

/*.hero-section .carousel-item {*/
/*    background-size: cover;*/
/*    background-position: center center;*/
/*    transition: opacity 1s ease-in-out; !* Smooth fade transition instead of slide *!*/
/*}*/

/*!* Optional: Add a subtle overlay for better text contrast *!*/
/*.hero-section .carousel-item::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: 0; left: 0; right: 0; bottom: 0;*/
/*    background: rgba(0, 0, 0, 0.2);*/
/*}*/

/*.hero-content-overlay {*/
/*    position: absolute;*/
/*    top: 0; left: 0; right: 0; bottom: 0;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    padding: 2rem;*/
/*    color: white;*/
/*}*/

/*!* Discover Now Button *!*/
/*.hero-cta-container {*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 5rem;*/
/*    transform: translateY(-50%);*/
/*}*/

/*.btn-discover {*/
/*    background-color: #4a458b; !* Example color from screenshot *!*/
/*    color: white;*/
/*    padding: 10px 25px;*/
/*    border-radius: 20px;*/
/*    text-decoration: none;*/
/*    font-weight: bold;*/
/*    box-shadow: 0 4px 10px rgba(0,0,0,0.3);*/
/*    transition: all 0.2s ease;*/
/*}*/
/*.btn-discover:hover {*/
/*    background-color: #6a65ae;*/
/*    transform: scale(1.05);*/
/*}*/

/*!* Slogan Styling *!*/
/*.hero-slogan-container {*/
/*    text-align: center;*/
/*    max-width: 800px; !* Adjust as needed *!*/
/*    margin: 0 auto; !* Center it for the main flex container *!*/
/*}*/

/*#heroSlogan {*/
/*    font-size: 3rem;*/
/*    font-weight: 300;*/
/*    text-shadow: 0 2px 5px rgba(0,0,0,0.5);*/
/*    line-height: 1.4;*/
/*    transition: opacity 0.5s ease-in-out;*/
/*}*/

/*!* Custom Indicators Styling *!*/
/*.carousel-custom-indicators {*/
/*    position: absolute;*/
/*    bottom: 5%;*/
/*    left: 50%;*/
/*    transform: translateX(-50%);*/
/*    display: flex;*/
/*    gap: 2rem;*/
/*}*/

/*.carousel-custom-indicators button {*/
/*    background: none;*/
/*    border: none;*/
/*    padding: 0;*/
/*    color: white;*/
/*    opacity: 0.8;*/
/*    transition: opacity 0.3s ease;*/
/*    text-align: left;*/
/*}*/
/*.carousel-custom-indicators button.active {*/
/*    opacity: 1;*/
/*}*/
/*.carousel-custom-indicators button.active .indicator-link {*/
/*    color: #ff4d4d; !* Red color for active link *!*/
/*}*/

/*.carousel-custom-indicators .indicator-link {*/
/*    color: white;*/
/*    text-decoration: none;*/
/*    font-size: 0.9rem;*/
/*    font-weight: bold;*/
/*    letter-spacing: 1px;*/
/*    display: block;*/
/*    padding-bottom: 8px; !* Space for the progress bar *!*/
/*}*/

/*.progress-bar-container {*/
/*    width: 100%;*/
/*    height: 3px;*/
/*    background-color: rgba(255, 255, 255, 0.3);*/
/*}*/

/*.progress-bar-inner {*/
/*    height: 100%;*/
/*    width: 0; !* Starts at 0 *!*/
/*    background-color: white;*/
/*}*/
/*.carousel-custom-indicators button.active .progress-bar-inner {*/
/*    background-color: #ff4d4d; !* Red for active progress bar *!*/
/*    !* The animation will be triggered by adding a class with JS *!*/
/*    animation-name: fill-progress;*/
/*    animation-duration: 5s; !* MUST match carousel interval *!*/
/*    animation-timing-function: linear;*/
/*    animation-fill-mode: forwards;*/
/*}*/

/*@keyframes fill-progress {*/
/*    from { width: 0%; }*/
/*    to { width: 100%; }*/
/*}*/

/*!* Responsive adjustments *!*/
/*@media (max-width: 992px) {*/
/*    #heroSlogan { font-size: 2.2rem; }*/
/*    .hero-cta-container { left: 2rem; }*/
/*    .carousel-custom-indicators { flex-direction: column; left: 2rem; bottom: 2rem; transform: none; gap: 1rem; align-items: flex-start; }*/
/*}*/

/*@media (max-width: 768px) {*/
/*    .hero-content-overlay { justify-content: flex-end; padding-bottom: 25%; }*/
/*    .hero-slogan-container { margin-bottom: 1rem; }*/
/*    .hero-cta-container { top: 10%; left: 50%; transform: translateX(-50%); }*/
/*    .carousel-custom-indicators { position: relative; bottom: auto; left: auto; transform: none; width: 100%; padding: 0 1rem; }*/
/*}*/


/*!* public/css/hero.css *!*/

/*!* --- Main Container --- *!*/
/*.hero-carousel-container {*/
/*    position: relative;*/
/*    width: 100%;*/
/*    height: 100vh; !* Full viewport height *!*/
/*    overflow: hidden;*/
/*    background-color: #333; !* Fallback color *!*/
/*}*/

/*!* --- Slides --- *!*/
/*.hero-slides {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*}*/

/*.hero-slide {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background-size: cover;*/
/*    background-position: center;*/
/*    opacity: 0;*/
/*    transition: opacity 1.5s ease-in-out; !* Slow fade transition *!*/
/*    z-index: 1;*/
/*}*/

/*.hero-slide.active {*/
/*    opacity: 1;*/
/*    z-index: 2; !* Active slide on top *!*/
/*}*/

/*!* --- Overlay Content (Button & Slogan) --- *!*/
/*.hero-overlay {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    z-index: 3;*/
/*    display: flex;*/
/*    justify-content: flex-end;*/
/*    flex-direction: column;*/
/*    align-items: flex-start;   !* Aligns horizontally to the left *!*/

/*    padding: 5vw; !* Use viewport width for responsive padding *!;*/
/*}*/

/*.btn-discover {*/
/*    order: 2; !* Ensure button comes after the slogan *!*/

/*    !* Keep existing appearance styles *!*/
/*    background-color: #3a2c6b;*/
/*    color: white;*/
/*    border-radius: 50px;*/
/*    padding: 12px 30px;*/
/*    font-weight: bold;*/
/*    text-decoration: none;*/
/*    box-shadow: 0 4px 15px rgba(0,0,0,0.3);*/
/*    transition: transform 0.2s ease;*/
/*    margin: 2rem 0;*/

/*}*/

/*.btn-discover:hover {*/
/*    !*transform: translateY(-200%) scale(1.05);*!*/
/*    transform: scale(1.05);*/
/*    background-color: #2E388D; !* Dark blue from screenshot *!*/
/*    color:floralwhite;*/
/*}*/

/*.hero-slogan {*/
/*    color: white;*/
/*    font-size: 2.5rem;*/
/*    font-weight: bold;*/
/*    text-shadow: 0 2px 10px rgba(0,0,0,0.7);*/

/*    text-align: left; !* Align text to the left *!*/
/*    max-width: 500px; !* Constrain the width of the slogan *!*/
/*    order: 1; !* Ensure slogan comes first *!*/
/*}*/

/*!* --- Bottom Indicators --- *!*/
/*.hero-indicators {*/
/*    position: absolute;*/
/*    bottom: 5%;*/
/*    left: 50%;*/
/*    transform: translateX(-50%);*/
/*    z-index: 4;*/
/*    display: flex;*/
/*    gap: 2rem;*/
/*    color: white;*/
/*}*/

/*.hero-indicator-item {*/
/*    cursor: pointer;*/
/*    text-align: center;*/
/*    color: rgba(255,255,255,0.7);*/
/*    font-weight: bolder;*/
/*    font-size: 1.2rem;*/
/*    padding-bottom: 10px;*/
/*    position: relative;*/
/*    transition: color 0.3s ease;*/
/*    white-space: nowrap; !* ADD THIS LINE *!*/
/*}*/

/*.hero-indicator-item.active {*/
/*    color: #ff0000; !* Red for active *!*/
/*}*/

/*.hero-indicator-item:hover {*/
/*    color: white;*/
/*}*/

/*.progress-bar {*/
/*    position: absolute;*/
/*    bottom: 0;*/
/*    left: 0;*/
/*    height: 3px;*/
/*    background-color: white;*/
/*    width: 0; !* Initially empty *!*/
/*}*/

/*.hero-indicator-item.active .progress-bar {*/
/*    background-color: #ff0000; !* Red progress bar for active item *!*/
/*}*/

/*!* Forcing the nav to be transparent on this page *!*/
/*body.hero-page nav {*/
/*    background: transparent !important;*/
/*}*/
/*body.hero-page #menuBackground {*/
/*    display: none !important;*/
/*}*/

/*!* In hero.css or home.css *!*/

/*!* This ensures the content starts right after the 100vh hero section *!*/
/*.below-hero-content {*/
/*    position: relative; !* Important for z-index stacking if needed *!*/
/*    background-color: white; !* Assuming content has a white background *!*/
/*}*/

/*!**/
/* * Navbar behavior on scroll for the new homepage*/
/* *!*/
/*body.hero-page nav {*/
/*    !* Default state is transparent *!*/
/*    background: #ffffff69 !important;*/
/*    transition: background-color 0.4s ease;*/
/*}*/
/*body.hero-page #menuBackground {*/
/*    display: none !important;*/
/*}*/

/*!* State when the user has scrolled down *!*/
/*body.hero-page.scrolled nav {*/
/*    background-color: black !important;*/
/*}*/
/*body.hero-page.scrolled nav #logo {*/
/*    content: url('../image/logo.svg'); !* Dark background logo *!*/
/*}*/
/*body.hero-page.scrolled nav a {*/
/*    color: white !important;*/
/*}*/
/*!* ... other styles for the scrolled state ... *!*//* public/css/hero.css */

/* --- Main Container --- */
.hero-carousel-container {
    position: relative;
    width: 100%;
    height: 100vh; /* Full viewport height */
    overflow: hidden;
    background-color: #333; /* Fallback color */
}

/* --- Slides --- */
.hero-slides {
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* Slow fade transition */
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    z-index: 2; /* Active slide on top */
}

/* --- Overlay Content (Button & Slogan) --- */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: flex-start;   /* Aligns horizontally to the left */
    padding: 0 10vw 30vh 0 ; /* Use viewport width for responsive padding */;
    opacity: 0;
    transition: opacity 0.1s ease-in;
}

.btn-discover {
    order: 2; /* Ensure button comes after the slogan */
    background-color: var(--delta-red-transparent, #e9262ac4);
    color: white;
    border-radius: 15px;
    padding: 12px 30px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: transform 0.2s ease;
}

.btn-discover:hover {
    /*transform: translateY(-200%) scale(1.05);*/
    transform: scale(1.05);
    background-color: rgba(255, 0, 0, 0.9); /* Dark blue from screenshot */
    color:floralwhite;
}

.hero-slogan {
    color: white;
    font-size: 1.6rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
    max-width: 400px;
    order: 1;
    background: var(--delta-blue-dark, #2E388D);
    text-align: center;
    border-radius: 15px;
    padding: 10px 20px;
}

/* --- Bottom Indicators --- */
.hero-indicators {
    position: absolute;
    bottom: 5%;
    z-index: 4;
    display: flex;
    color: white;
    opacity: 0;
    transition: opacity 0.1s ease;
    /* Left, width, and justify-content will be set by JavaScript */
}

.hero-indicator-item {
    cursor: pointer;
    text-align: center;
    color: rgba(255,255,255,0.7);
    font-weight: bolder;
    font-size: 1.2rem;
    padding-bottom: 10px;
    position: relative;
    transition: color 0.3s ease;
    white-space: nowrap; /* ADD THIS LINE */
}

.hero-indicator-item.active {
    color: var(--delta-blue-dark, #2E388D);
}

.hero-indicator-item:hover {
    color: white;
}

.progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: white;
    width: 0; /* Initially empty */
}

.hero-indicator-item.active .progress-bar {
    background-color: var(--delta-blue-dark, #2E388D);
}

/* Forcing the nav to be transparent on this page */
body.hero-page nav {
    background: transparent !important;
}
body.hero-page #menuBackground {
    display: none !important;
}

/* In hero.css or home.css */

/* This ensures the content starts right after the 100vh hero section */
.below-hero-content {
    position: relative; /* Important for z-index stacking if needed */
    background-color: white; /* Assuming content has a white background */
}

/*
 * Navbar behavior on scroll for the new homepage
 */
body.hero-page nav {
    /* Default state is transparent */
    background: #ffffff69 !important;
    transition: background-color 0.4s ease;
}
body.hero-page #menuBackground {
    display: none !important;
}

/* State when the user has scrolled down */
body.hero-page.scrolled nav {
    background-color: black !important;
}
body.hero-page.scrolled nav #logo {
    content: url('../image/logo.svg'); /* Dark background logo */
}
body.hero-page.scrolled nav a {
    color: white !important;
}
/* ... other styles for the scrolled state ... */