/* Hero Banner - Ensure it always shows */
.hero-banner {
    position: relative;
    width: 100%;
    height: 80vh; /* Full viewport height */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align hero content */
    background-size: cover;
    background-position: center;
    overflow: hidden;
    z-index: 1; /* Ensure it's above other elements */
}

/* Hero content styles */
.hero-content {
    position: relative;
    z-index: 2; /* Ensure it appears above the background */
    text-align: left;
    color: #fff; /* Adjust for contrast */
      padding-right: calc(50% - 20vw);
    padding-left: calc(50% - 40vw);
    margin: auto;
    max-width: 100vw;
}

.banner .hero-content {
    position: relative;
    z-index: 2;
    text-align: left;
    color: #fff;
    padding-right: calc(50% - 40vw);
    padding-left: calc(50% - 40vw);
    margin-left: 0px;
    max-width: 100vw;
}

.scroll-arrow {
 transition: opacity 1.5s ease;
 opacity: 1;
}

.scroll-arrow.scrolled {
 opacity: 0;
}

.hero-banner.banner .scroll-arrow {
display:none;
}


/* Mobile-specific styles */
@media screen and (max-width: 768px) {
    .hero-content {
    position: relative;
    z-index: 2; /* Ensure it appears above the background */
    text-align: left;
      padding-right: 10px;
    padding-left: 10px;
    margin: auto;
        max-width: 100vw;
}
}

.hero-content h1 {
    margin: 1rem 0;
    font-size: 3vmin;
        line-height: 1.2em;
}

.hero-caption {
    margin: 1rem 0;
     font-size: 3vmin;
        line-height: 1.2em;
}

.hero-caption2 {
    margin: 1rem 0;
     font-size: 3vmin;
        line-height: 1.2em;
}


.hero-button {
        --cut: 6px;
   background-color: var(--brand-1);
   color: #fff;
    display: flex;
    margin: 1px !important;
    border: 1px solid var(--brand-1);;
    border-radius: 0px;
    margin: 0 auto;
    line-height: 1;
    padding: 0.6em 1em .6em 1em;
    font-size: 1.2rem;
    display: inline-block;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hero-button:hover {
    letter-spacing: 1px;
       background-color: var(--brand-1);
   color: #fff;
}

.hero-content a:visited {
    color: #fff;
}

.hero-button a:visited {
    letter-spacing: 1px;
       background-color: var(--brand-1);
   color: #fff !important;
}

.hero-button:after {
    content: " > ";

   color: #fff;
    visibility: hidden;
    display: inline-block;
    width: 0;
    transition: width 0.3s ease, visibility 0.3s ease;
}

.hero-button:hover:after {
    visibility: visible;
    width: 1em;
}

/* Hero accordions */
.hero-accordions.desktop-only {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 3;
}

.hero-accordions.mobile-only {
    display: none;
}

/* Scroll arrow */
.scroll-arrow {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    color: #fff;
    z-index: 4;
    animation: bounce 2s infinite; /* Apply bounce animation */
}

/* Hide arrow on desktop */
@media screen and (min-width: 769px) {
    .scroll-arrow {
        display: none;
    }
}

/* Mobile adjustments */
@media screen and (max-width: 768px) {
    .scroll-arrow {
        bottom: 10vh;
        font-size: 1.5rem;
    }
}

/* Bounce animation */
@keyframes bounce {
    0%, 100% {
        transform: translate(-50%, 0); /* Start and end at original position */
    }
    50% {
        transform: translate(-50%, -10px); /* Move up slightly */
    }
}
/* Mobile-specific styles */
@media screen and (max-width: 768px) {
    .hero-banner {
        height: 100vh; /* Still full height on mobile */
        flex-direction: column; /* Ensure everything stacks */
    }

    .hero-accordions.desktop-only {
        display: none;
    }

    .hero-accordions.mobile-only {
        display: block;
        position: relative;
}

}

.accordion-item {
 margin-bottom: 10px;
}

.accordion-item p {
 margin: 0 0 10px;
}

.accordion-container {
  color: #fff;
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 gap: 0rem;
 position: relative;
 overflow: visible;
}

.accordion {
    color: #fff !important;
 flex: 1;
 position: relative;
 overflow: visible;
 border: 0px solid #ccc;
 border-radius: 0px;
 background: none;
 z-index: 0;
 transition: z-index 0.9s ease;
}

.accordion-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 1rem;
 cursor: pointer;
 background: #000;
 z-index: 2;
    height: 12vh;
    --cut: 25px;
}

.accordion-content {
    color: #fff !important;
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 max-height: 0;
 overflow: hidden;
 background: none;
 transition: max-height 0.9s ease, box-shadow 0.3s ease;
    opacity: 0;
        --cut: 25px;
}

.accordion.open {
 z-index: 3;
}

.accordion.open .accordion-content {
    color: #fff !important;
 max-height: 500px;
 overflow: visible;
     --cut: 25px;
}



@media (max-width: 768px){
.accordion-content p {
      font-size: 1em;
    color: #fff !important;
 margin: 1rem;
 opacity: 0;
 transition: opacity 0.3s ease 0.9s;
    }
    
    .accordiontitle {
    display:none;
    }
    
    .accordionlead{
    display:none;
    }

}

.accordion.open .accordion-content p {
 opacity: 1;
}

.accordion-content button {
 margin: 1rem;
 opacity: 0;
 transition: opacity 0.3s ease 0.9s;
    background-color: #fff;
}

.accordion.open .accordion-content button {
 opacity: 1;

}

.accordion:hover .accordion-content button {
 opacity: 1;
     transition: opacity 1.3s ease;
        background-color: #fff;
}

.accordion:hover {
 z-index: 3;
}

.accordion:hover .accordion-content {
 max-height: 500px;
 opacity: 1;
}

.accordion-content p {
 margin: 1rem;
 opacity: 0;
 transition: opacity 1.3s ease;
}

.accordion:hover .accordion-content p {
 opacity: 1;
     transition: opacity 1.3s ease;
}

@media (max-width: 768px) {
 .accordion:hover .accordion-content {
 max-height: 0;
 }
}

#accordion1 .accordion-content{
     background: #31b2de !important;
}
#accordion2 .accordion-content{
     background: #5a57a5 !important;
}
#accordion3 .accordion-content{
     background: #00a157 !important;
}

#accordion1 .accordion-header{
     background: #31b2de !important;
}
#accordion2 .accordion-header{
     background: #5a57a5 !important;
}
#accordion3 .accordion-header{
     background: #00a157 !important;
}

#accordion1 .accordlinkbut {
    color: #31b2de !important;
}

#accordion2 .accordlinkbut {
    color: #5a57a5 !important;
}

#accordion3 .accordlinkbut {
    color: #00a157 !important;
}


#accordion1 .accordionlink:after {
    color: #31b2de !important;
}

#accordion2 .accordionlink:after {
    color: #5a57a5 !important;
}

#accordion3 .accordionlink:after {
    color: #00a157 !important;
}


@media (max-width: 768px) {
 .accordion-container {
 flex-direction: column;
    align-items: stretch;
 }

 .accordion-content {
    margin: 0px;
 position: static;
 box-shadow: none;
 }

 .accordion.open .accordion-content {
 max-height: 1000px;
 }
    
    .accordion-content p {
 margin-left: 1rem;
    margin-right: 1rem;
    margin-top: 0rem;
    margin-bottom: 0rem;
 opacity: 0;
 transition: opacity 0.3s ease 0.9s;
}
}   
    

    .accordlinkdiv {
text-align: right;
}

.accordlinkdiv a {
    text-decoration: none;
       background-color: #fff;
}

.accordlinkdiv a:hover {
    text-decoration: none;
   background-color: #fff;
}


.accordlinkdiv a:hover {
   background-color: #fff;
}

.accordionlink:hover
{   right: 0;
       background-color: #fff;
    margin: 20px !important;
    border: 2px solid #fff;
    border-radius: 0px;
    background: none;
    line-height: 1;
 padding: 0.6em 1em 0.4em;
  font-size: 1rem;
    letter-spacing: 2px;
    }

.accordionlink {
 right: 0;
    background-color: #fff;
 margin: 20px !important;
 border: 2px solid #fff;
 border-radius: 0px;
 background: none;
 line-height: 1;
 padding: 0.6em 1em 0.4em;
 font-size: 1rem;
 position: relative;
 display: inline-block;
}

.accordionlink:after {
 content: "";
 display: inline-block;
 visibility: hidden;
 width: 0;
 transition: width 0.3s ease;
}

.accordionlink:hover:after {
 content: " > ";
 visibility: visible;
 width: 1em;
 display: inline-block;
    color: #fff;
}


.accordiontitle p {
 
    font-size: 1.3em;
    font-weight: 600;
}

.accordion-header-text .title {
    font-size: 1.3em;
    font-weight: 600;
}

.accordion-content .accordiontitle p{
    font-size: 1.3em;
    color: #fff !important;
 opacity: 0;
 transition: opacity 0.3s ease 0.9s;
}

.accordion-content p {
    font-size: 1em;
    color: #fff !important;
 opacity: 0;
 transition: opacity 0.3s ease 0.9s;
}

/* Larger fonts for desktop */
@media screen and (min-width: 1024px) {
    .hero-content h1 {
        font-size: 1.8rem; /* Increase heading size */
        line-height: 1.3;  /* Adjust line height for readability */
    }

    .hero-content .hero-caption p {
        font-size: 1.5rem; /* Slightly larger caption */
    }
    
}