/* Hero Section Styles - Fixed values from original inline styles */
.hero .ha-hero-section {
    position: relative !important;
    height: 330px;
    flex: 1 0 0;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1A1A1A;
    text-align: center;
    overflow: visible;
    font-family: Almarai, Arial, sans-serif;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: none !important;
    margin-top: 96px !important; /* To offset the fixed header height */
}
@media (max-width: 768px) {
    .hero .ha-hero-section {
       
        margin-top: 80px !important; /* Adjust for smaller screens */
    }
}

/* Hero Title Content Styles */
.hero-title-content {
    position: relative;
    z-index: 10;
    text-align: right;
    color: #1A1A1A;
    max-width: 90%;
    padding: 0 20px;
}

.hero-title {
    font-size: 40px !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
    line-height: normal !important;
    color: #1A1A1A !important;
    text-align: right !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-family: Almarai, Arial, sans-serif !important;
    font-style: normal !important;
}

/* Hero Search Wrapper */
.hero .hero-search-wrapper {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: -36px !important;
    z-index: 20 !important;
}

.hero .hero-search-wrapper .search-bar-hero {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
}