/* ---------- hero ---------- */
#hero-section {
    min-height: 681px;
    padding: 40px 24px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background:
        url("/Files/Images/hero-section-img.png") center bottom / cover no-repeat,
        radial-gradient(circle at center, #9aa09c 0%, #4b504d 100%);
}
 
.hero-text, .brand-description {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
 
.hero-text h1 {
    color: var(--background);
    font-size: 60px;
    line-height: 1.15;
    font-weight: 600;
    margin: 0;
}
 
.hero-text h1 span {
    color: var(--primary);
}
 
.hero-text p {
    color: var(--background);
    font-size: 16px;
    font-weight: 200;
    margin: 24px 0 28px;
}

/* ---------- brands ---------- */
#brands-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 449px;
    margin: 70px 0;
    background:
        url("/Files/Images/map-bg.png") center no-repeat,
        var(--background);
}

.brand-description {
    width: 1152px;
    min-height: 269px;
}

.brand-description h1 {
    color: var(--primary);
    font-size: 60px;
    font-weight: 600;
    margin: 0;
}

.brand-description p {
    color: var(--primary);
    font-weight: 600;
    font-size: 16px;
}

.logo-list {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1152px;
    height: 98px;
}

/* ---------- Offer section ---------- */
#offer-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
}
 
.offer-column {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 64px;
    width: 1140px;
    min-height: 590px;
}
 
/* rows 1 and 3: same HTML order (image first), but the image shows on the right */
.offer-column-reverse {
    flex-direction: row-reverse;
}
 
.offer-image {
    width: 560px;
    height: 570px;
    flex-shrink: 0;
    display: block;
    object-fit: cover;
}
 
.offer-description {
    width: 516px;
}
 
.offer-description h2 {
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    color: var(--primary);
}
 
.offer-description > * {
    margin: 0;
}
 
.offer-description > * + * {
    margin-top: 16px;
}
 
.offer-description p,
.offer-description li {
    font-size: 16px;
    line-height: 24px;
    color: var(--text);
}
 
.offer-description ul {
    padding-left: 20px;
}

/* ---------- Story section ---------- */
#our-story-section{
    min-height: 449px;
    margin: 70px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url("/Files/Images/About-Us-Bg.png") center bottom / cover no-repeat,
        var(--background);
}
.story-description{
    width: 955px;
    height: 244px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.story-description h1 {
    font-size: 48px;
    margin: 16px 0;
    font-weight: 800;
    text-align: center;
    width: 962px;
    color: var(--background);
}
.story-text {
    width: 793px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 16px 0;
}
.story-text p {
    text-align: center;
    text-wrap: balance;
}
.story-description p {
    margin: 0;
    font-size: 16px;
    color: var(--background);
}
.story-button {
    background-color: var(--primary2);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 314px;
    height: 56px;
    border: 2px solid var(--primary);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.story-button:hover {
    background: #C4C4C4;
    color: var(--primary2) !important;
    border: 3px solid var(--primary2);
}

/* ---------- Why Us section ---------- */
#why-us-section {
    height: 434px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px; 
}
 
/* title + divider + subtitle = 422 x 128 */
.why-us-header {
    width: 422px;
    height: 128px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; 
    text-align: center;
}
.why-us-header h2 {
    margin: 0;
    font-size: 57px;
    line-height: 64px;
    font-weight: 700;
    color: var(--primary);
}
.why-us-divider {
    width: 100px;
    height: 2px;
}
 
.why-us-header p {
    margin: 0;
    height: 42px;
    font-size: 16px;
    line-height: 21px;
    font-weight: 500;
    color: var(--text);
}
 
/* 4 cards: 4 x 250 + 3 x 60 = 1180 (130px free each side at 1440) */
.why-us-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 1180px;
    display: flex;
    gap: 60px;
}
.why-card {
    width: 250px;
    height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.why-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.why-icon img {
    max-width: 100%;
    max-height: 100%;
}
 
.why-card h3 {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: var(--text);
}
 
.why-card p {
    margin: 0;
    max-width: 210px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--text);
    text-wrap: balance;  
}

.why-us-carousel {
    display: contents; 
}
 
.why-us-arrow {
    display: none;
}

@media screen and (min-width: 1024px) and (max-width: 1232px) {
    .brand-description {
        width: 100%;
        max-width: 1152px;
        padding: 0 40px;
    }
    
    .logo-list {
        width: 100%;
        max-width: 1152px;
        height: auto;
        margin: 0;
        padding: 0;
        gap: 24px;
    }
    
    .logo-list li {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        justify-content: center;
    }
    
    .logo-list img {
        max-width: 100%;
        height: auto;
    }
    
    /* ---------- Offer ---------- */
    #offer-section {
        padding: 0 40px;
    }
    
    .offer-column {
        width: 100%;
        max-width: 1140px;
        min-height: 0;
        gap: 40px;
    }
    
    .offer-image {
        flex: 1 1 0;
        min-width: 0;
        max-width: 560px;
        width: auto;
        height: auto;
        aspect-ratio: 560 / 570;
    }
    
    .offer-description {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: 516px;
    }
    
    /* ---------- Why Us: 4 cards in a row, shrinking ---------- */
    #why-us-section {
        height: auto;
    }
    
    .why-us-list {
        width: 100%;
        padding: 0 40px;
        justify-content: center;
        gap: 24px;
    }
    
    .why-card {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: 250px;
        height: auto;
    }

}