@font-face {
    font-family: 'Eurostile';
    src: url('Assets/Fonts/eurostile.TTF') format('truetype');
    font-family: 'Lexend Exa';
    src: url('Assets/Fonts/Lexend-VariableFont_wght.ttf') format('truetype');
}
.row {
    margin: auto !important;
}
body {
    font-family: 'Lexend Exa', sans-serif !important;
    text-align: center !important;
    
}

#subheading {
    font-family: 'Eurostile';
}

.header {
    background-color: #f8d7da;
    text-align: center;
   
}

.footer {
    background-color: #f8d7da;
    text-align: center;
    padding: 10px;
}

.navbar {
    overflow: hidden;
    background-color: white;
    border-bottom: #3a7bad 1.5ex solid;
}

.nav-item a{
    color: #63656a;
    text-decoration: none;
}

.navbar-nav{
    justify-items: right;
}

.navbar-image {
    width: 275px;
    margin-left: 0.5rem;
}
:root {
    --vortex-blend: linear-gradient(90deg, rgba(0,255,255,1) 0%, rgba(58,123,173,1) 70%);
}
.VortexBlend{
    background: rgb(0,255,255);
    background: linear-gradient(90deg, rgba(0,255,255,1) 0%, rgba(58,123,173,1) 70%);
}

.hero-section {
    position: relative;
    z-index: 1;
    background-color: #3a7bad;
    background-image: url(Assets/Img/jason-ryan-g2dQSsjjzpc-unsplash.jpg);
    background-position: center bottom;
    background-size: cover;
    align-items: center;
    height: 650px;
    width: 100%;
}

.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30%; /* Adjust this to control the height of the blurred area */
    backdrop-filter: blur(10px); /* Adjust this to control the intensity of the blur */
}

.hero-section::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%; /* Adjust this to control the height of the fade */
    background: linear-gradient(white, transparent);
}

.hero-section::before, .hero-section::after {
    z-index: -1; /* This will put the pseudo-elements behind the content of .hero-section */
}

.hero-image {
    width: 50%;
    padding-top: 0.5rem;
}   

.btn-primary-custom {
    color: white !important;
    background-color: #fb4d00 !important;
}

.accordion-button.collapsed {
    background-color: #ffffff; /* Change to your desired color for non-selected headers */
    color: #000000; /* Change to your desired text color for non-selected headers */
}

.accordion-button {
    background-color: #53b1f9; /* Change to your desired color for selected header */
    color: #ffffff; /* Change to your desired text color for selected header */
}
.accordion-header {
    padding: 0 0.5rem;
}
.accordion-body {
    text-align: center;
}

.container-fluid {
    padding: 0 !important;
}

.EarthSpa {
    padding-top: 3rem;
    position: relative;
    z-index: 1;
    background-image: url(Assets/Img/Earth-Spas-scaled.jpg);
    background-position: center bottom;
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 8rem;
}

.EarthSpa::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Adjust this to control the height of the blurred area */
    backdrop-filter: blur(10px); /* Adjust this to control the intensity of the blur */
}

.EarthSpa::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Adjust this to control the height of the fade */
    background: linear-gradient(white, transparent);
}

.EarthSpa::before, .EarthSpa::after {
    z-index: -1; /* This will put the pseudo-elements behind the content of .hero-section */
}

.EarthSpaImage {
    padding: 2rem 0;
    width: 35%;
    z-index: 1;
}
.accordion {
    padding: 0 10rem;
}
#About, #Welcome {
    margin-top: 1rem;
    padding: 0 8rem;
}

#Contact {
    background: var(--vortex-blend);
    background-color: #3a7bad;
    color: white;
    padding-top: 2rem;
    
}

.footer {
    background: var(--vortex-blend);
    background-color: #3a7bad;
    padding-top: 2rem;
}
.earthspas-btn{
    margin-top: 1rem;
    margin-bottom: 1.5rem;

}

/* For tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
    button.navbar-toggler {
        margin: 0 0.5rem;
    }
    .EarthSpa {
        height: auto;
    }
    .hero-section {
        height: 500px;
    }
    .hero-image, .EarthSpaImage {
        width: 60%;
    }
    #About, #Welcome, .EarthSpa {
        padding: 0 4rem;
    }
    .accordion {
        padding: 0 0;    
    }
}

/* For mobile devices */
@media (max-width: 767px) {
    button.navbar-toggler {
        margin: 0 0.5rem;
    }
    .hero-section, .EarthSpa {
        height: 350px;
    }
    .hero-image{
        width: 80%;
    }
    .EarthSpaImage {
        width: 60%;
    }
    #About, #Welcome, .EarthSpa {
        padding: 0 2rem;
    }
    .EarthSpa {
       /* height: 28rem;*/
       height: auto;
    }
    .accordion {
        padding: 0 0;    
    }
    .earthspas-btn{
        margin-top: 0.25rem;
        margin-bottom: 1rem;
    }
}
@media (max-width: 490px) {
    .EarthSpa {
        /*height: 30rem;*/
        height: auto;
    }  
}
@media (max-width: 435px) {
    .EarthSpa {
        font-size: small;
       /* height: 25rem;*/
       height: auto;    
    }
}
@media (max-width: 380px) {
    button.navbar-toggler {
        margin: 0 0.5rem;
    }
    .hero-section, .EarthSpa {
        font-size: small;
        height: 350px;
    }
    .hero-image{
        width: 70%;

    }
    .EarthSpaImage {
        width: 55%;
    }
    #About, #Welcome, .EarthSpa {
        font-size: small;
        padding: 0 1rem;
    }
    .accordion {
        font-size: small;
        padding: 0 0;    
    }
    .earthspas-btn{
        margin-top: 0.15rem;
        margin-bottom: 0.9rem;
    }
    .EarthSpa {
        /*height: 27rem;*/
        height: auto;
    
    }  
}
@media (max-width: 300px) {
    .EarthSpa {
        font-size: small;
        /*height: 30rem;*/
        height: auto;
    
    }
}