section {
  background: var(--primary);   /* dark background */
  position: relative;
  width: 100vw;
  overflow-x: clip;
}

/* .hero-section{
    background: url('/assets/images/homepage/hero-background.webp');
    background-size: 2971px 902px;
    background-repeat: no-repeat;
    background-position: center;
    } */
    
.hero-background{
    pointer-events: none;
    position: absolute;
    z-index: 0;
    width: 2971px;
    /* width: 100vw; */
    /* height: 902px; */
    height: 100vh;
    max-width: unset; 
    left: 55%;
    transform: translateX(-50%);
}
 @media(min-width: 1919px){
    .hero-background{
        min-width: 2971px;
        width: 100vw;
    }
     }
.hero-background:lang(ar){
    left: 36%;
}
.hero {
    direction: ltr;
  position: relative;
}
.hero-section{
    padding-top: 100px;
}
.hero.container {
    /* margin-top: 50px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    height: 902px;
    align-items: flex-end;

}
.hero.container:lang(ar){
    align-items: flex-start;
}
.hero-btn:hover{
    cursor: pointer;
}
.hero-btn-fill {
    fill-opacity: 0;         /* fade only the fill */
    transition: fill-opacity .4s ease;
}

.hero-btn:hover .hero-btn-fill {
    fill-opacity: 1;
}

.hero-btn .hero-btn-arrow {
    stroke: var(--yellow-accent);
    fill: var(--yellow-accent);
}
.hero-btn:hover .hero-btn-arrow {
    stroke: #ffffff;
    fill: #ffffff;
}

.hero-arrow {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 10px;
}
.hero-title,
.hero-subtitle {
    text-align: right;
    
}
.hero-title:lang(ar){
    direction: rtl;
    text-align: left;
}
.hero-subtitle{
    width: 100%;
    max-width: 515px;
}

/* Ensure smooth text animation */
.hero-word {
  display: inline-block;
}

/* Prevent flash of unstyled content */
.hero-section .hero-subtitle {
  opacity: 0;
}

/* Smooth transitions for interactive elements */
.hero-arrow svg {
  will-change: transform;
}
@media(max-width:768px){
    .hero-section{
        height: 20vh;
        padding-top: 0;
    }
    .hero-section .container{
        padding-top: 150px;
    }
    .hero-background{
        width: 100%;
        left: 0;
        top: 0;
        transform: none;
    }
    .hero-background:lang(ar){
        left: 0;
    }
    .hero.container{
        justify-content: start;
        height: fit-content;
    }
    .hero-arrow{
        width: 64px;
        height: 34px;
    }
    .hero-arrow svg{
        height: 34px;
    }
}