/* ===========================
   HERO
=========================== */

.hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

    background: #fafafa;

}

.hero-container {

    width: min(1200px, 90%);

    margin: auto;

    display: grid;

    grid-template-columns: 1.1fr 1fr;

    gap: 60px;

    align-items: center;

}

.hero-left h1 {

    font-size: clamp(54px, 6vw, 78px);

    line-height: 1.1;

    margin: 20px 0;

}

.hero-left p {

    font-size: 20px;

    color: #666;

    line-height: 1.8;

    max-width: 520px;

}

.hero-tag {

    color: #f26a21;

    font-weight: 700;

    letter-spacing: 2px;

}

.hero-features {

    display: flex;

    gap: 35px;

    margin-top: 45px;

    flex-wrap: wrap;

}

.hero-features div {

    display: flex;

    align-items: center;

    gap: 10px;

    font-weight: 600;

}

.hero-features i {

    color: #f26a21;

}

.hero-right {

    text-align: center;

}

.hero-right img {

    width: 100%;

    max-width: 520px;

    transition: .5s;

}

.hero-right img:hover {

    transform: translateY(-10px);

}

.hero {

    position: relative;

    overflow: hidden;

}

.hero::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    background: rgba(242, 106, 33, .08);

    border-radius: 50%;

    top: -250px;

    right: -200px;

}

/* ===========================
   Trusted By
=========================== */

.trusted {

    padding: 45px 0;

    background: white;

    border-top: 1px solid #eee;

    border-bottom: 1px solid #eee;

}

.trusted-list {

    display: flex;

    justify-content: center;

    gap: 60px;

    flex-wrap: wrap;

    margin-top: 25px;

    font-weight: 600;

    color: #666;

}

/* ===========================
   WHY CHOOSE SENA
=========================== */

.why-sena {

    padding: 110px 0;

    background: #fafafa;

}

.section-title {

    width: 700px;

    margin: 0 auto 70px;

    text-align: center;

}

.section-title span {

    color: #f26a21;

    letter-spacing: 3px;

    font-weight: 700;

    font-size: 14px;

}

.section-title h2 {

    font-size: 46px;

    margin: 18px 0;

}

.section-title p {

    color: #666;

    font-size: 18px;

    line-height: 1.8;

}

.feature-grid {

    width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

}

.feature-card {

    background: white;

    border-radius: 18px;

    padding: 45px 35px;

    text-align: center;

    transition: .35s;

    box-shadow: 0 5px 20px rgba(0, 0, 0, .05);

}

.feature-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 50px rgba(0, 0, 0, .12);

}

.feature-card i {

    font-size: 42px;

    color: #f26a21;

    margin-bottom: 25px;

}

.section-title {

    width: 700px;

    margin: 0 auto 70px;

    text-align: center;

}


/* ===========================
   FEATURES
=========================== */

.features {
    background: white;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.feature-card {
    text-align: center;
    padding: 35px;
    border-radius: 18px;
    background: #fafafa;
    transition: .3s;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
}


.icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.feature-card h3 {
    margin-bottom: 10px;
}

.feature-card p {
    color: #666;
}

.feature-card p {

    color: #777;

    line-height: 1.7;

}
/* ===========================
   SECTION
=========================== */

section {
    padding: 90px 0;
}

section h2 {
    font-size: 38px;
    text-align: center;
    margin-bottom: 60px;
    color: #222;
}



/* ===========================
   PRODUCTS
=========================== */

.product-rating {

    color: #ffb400;

    margin: 12px 0;

    letter-spacing: 3px;

    font-size: 18px;

}

.featured-products {

    padding: 120px 0;

    background: white;

}

.product-grid {

    width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns: 2fr 1fr 1fr;

    grid-template-rows: 320px 320px;

    gap: 25px;

}

.product-large {

    grid-row: span 2;

    position: relative;

    overflow: hidden;

    border-radius: 24px;

}

.product-small {

    position: relative;

    overflow: hidden;

    border-radius: 24px;

}

.product-large img,
.product-small img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .5s;

}

.product-large:hover img,
.product-small:hover img {

    transform: scale(1.08);

}

.product-info {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    padding: 35px;

    color: white;

    background: linear-gradient(transparent,
            rgba(0, 0, 0, .85));

}

.product-info span {

    color: #ff7a00;

    font-weight: 700;

    font-size: 14px;

    letter-spacing: 2px;

}

.product-info h3 {

    font-size: 34px;

    margin: 10px 0;

}

.product-info p {

    color: #ddd;

    line-height: 1.7;

    margin-bottom: 20px;

}

.product-info a {

    color: white;

    text-decoration: none;

    font-weight: 700;

}

.product-info a:hover {

    color: #ff7a00;

}

.badge {

    display: inline-block;

    padding: 6px 14px;

    border-radius: 999px;

    background: #fff3ea;

    color: var(--primary);

    font-size: 12px;

    font-weight: 700;

    margin-bottom: 15px;

}

/* ===========================
   BRAND Story 
=========================== */

.brand-story {

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    min-height: 700px;

}

.story-image {

    height: 700px;

}

.story-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.story-content {

    padding: 80px;

}

.story-content span {

    color: #f26a21;

    font-weight: 700;

    letter-spacing: 3px;

}

.story-content h2 {

    font-size: 56px;

    margin: 20px 0;

    line-height: 1.1;

}

.story-content p {

    color: #666;

    line-height: 1.9;

    font-size: 18px;

    margin-bottom: 40px;

}

.story-content ul {

    list-style: none;

}

.story-content li {

    margin-bottom: 18px;

    font-size: 18px;

    display: flex;

    align-items: center;

}

.story-content i {

    color: #f26a21;

    margin-right: 15px;

    font-size: 20px;

}

/* ===========================
   CTA
=========================== */


.reseller-cta {

    padding: 120px 20px;

    background: #111;

    color: #fff;

    text-align: center;

}

.reseller-cta h2 {

    color: #fff;

    font-size: 48px;

    margin: 20px 0;

}

.reseller-cta p {

    max-width: 720px;

    margin: 0 auto 50px;

    color: #bbb;

    line-height: 1.8;

}

.reseller-benefits {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    margin-bottom: 50px;

}

.benefit {

    background: #1d1d1d;

    padding: 35px;

    border-radius: 20px;

    transition: .3s;

}

.benefit:hover {

    transform: translateY(-8px);

    background: #252525;

}

.benefit i {

    font-size: 38px;

    color: #f26a21;

    margin-bottom: 20px;

}

.benefit h3 {

    color: #fff;

    margin-bottom: 12px;

}

.benefit p {

    color: #bbb;

    margin: 0;

}