.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    margin-bottom: 20px;
}

/* IMAGE */
.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* DARK OVERLAY */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.55);
}

/* CONTENT CENTER */
.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    text-align: center;
    color: #fff;
}

/* SMALL TEXT */
.hero-content h3 {
    font-size: 28px;
    color: #ff6a00;
    margin-bottom: 10px;
}

/* MAIN TITLE */
.hero-content h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 25px;
}

/* FEATURES LINE */
.hero-features {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    font-size: 24px;
}

/* DOT BETWEEN FEATURES */
.hero-features .dot {
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 50%;
    font-size: 20px;
}
/* SECTION */
.usp2 {
    background: #0b0b0b;
    color: #fff;
    padding: 40px 20px;
}

/* CONTAINER */
.usp2-container {
    max-width: 1200px;
    margin: auto;
}

/* INTRO TEXT */
.usp2-intro {
    font-size: 15px;
    opacity: 0.8;
    margin-bottom: 15px;
    line-height: 1.6;
}

/* TITLE */
.usp2-title {
    font-size: 38px;
    font-weight: 800;
    margin: 40px 0;
}

/* GRID */
.usp2-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* CARD */
.usp2-card {
    background: #141414;
    padding: 30px;
    border-radius: 8px;
    transition: 0.3s ease;
}

/* HOVER (you didn’t think about this) */
.usp2-card:hover {
    transform: translateY(-6px);
    background: #1a1a1a;
}

/* HEADING */
.usp2-card h3 {
    font-size: 20px;
    margin-bottom: 20px;
    line-height: 1.4;
}

/* NUMBER */
.usp2-card h3 span {
    color: #ff6a00;
    font-weight: 800;
    margin-right: 10px;
    font-size: 24px;
}

/* LIST */
.usp2-card ul {
    list-style: none;
    padding: 0;
}

/* LIST ITEM */
.usp2-card li {
    font-size: 14px;
    margin-bottom: 12px;
    opacity: 0.85;
    padding-left: 20px;
    position: relative;
}

/* CUSTOM DOT */
.usp2-card li::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #ff6a00;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 7px;
}
/* SECTION */
.deliverables2 {
    background: #0b0b0b;
    color: #fff;
    padding: 40px 20px;
    text-align: center;
}

/* CONTAINER */
.deliverables2-container {
    max-width: 1200px;
    margin: auto;
}

/* TITLE */
.deliverables2-title {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 60px;
}

/* GRID */
.deliverables2-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 30px;
}

/* ITEM */
.deliverables2-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* NUMBER */
.deliverables2-item span {
    font-size: 80px;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 2px #ff6a00;
    margin-bottom: 10px;
}

/* TEXT */
.deliverables2-item p {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}
/* SECTION */
.benefits3 {
    background: #0b0b0b;
    color: #fff;
    padding: 40px 20px;
}

/* CONTAINER */
.benefits3-container {
    max-width: 1200px;
    margin: auto;
}

/* TITLE */
.benefits3-title {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 40px;
}

/* LIST */
.benefits3-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ITEM */
.benefits3-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 20px 60px;
    border-radius: 6px;

    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* TEXT */
.benefits3-item p {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
    font-size: 18px;
    font-weight: 500;
}
.benefits3-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65); /* adjust this */
}
/* SECTION */
.adfilms2 {
    background: #0b0b0b;
    color: #fff;
    padding: 40px 20px;
}

/* CONTAINER */
.adfilms2-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 50px;
    align-items: start;
}

/* LEFT CONTENT */
.adfilms2-content h2 {
    font-size: 36px;
    font-weight: 800;
}

.adfilms2-content .line {
    width: 120px;
    height: 3px;
    background: #ff6a00;
    margin: 15px 0 20px;
}

.adfilms2-content .intro {
    font-size: 15px;
    opacity: 0.8;
    margin-bottom: 30px;
}

/* HEADINGS */
.adfilms2-content h3 {
    font-size: 22px;
    margin-bottom: 15px;
}

.adfilms2-content h4 {
    font-size: 18px;
    margin: 25px 0 10px;
}

/* LISTS */
.adfilms2-content ul {
    list-style: none;
    padding: 0;
}

.adfilms2-content li {
    font-size: 14px;
    margin-bottom: 12px;
    padding-left: 22px;
    position: relative;
    opacity: 0.9;
}

/* CUSTOM BULLET */
.adfilms2-content li::before {
    content: "";
    width: 7px;
    height: 7px;
    background: #ff6a00;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 6px;
}

/* IMAGE */
.adfilms2-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}
/* SECTION */
.reels2 {
    background: #0b0b0b;
    color: #fff;
    padding: 40px 20px;
}

/* CONTAINER */
.reels2-container {
    max-width: 1200px;
    margin: auto;
}

/* HEADER */
.reels2-header h2 {
    font-size: 36px;
    font-weight: 800;
}

.reels2-header .line {
    width: 120px;
    height: 3px;
    background: #ff6a00;
    margin: 15px 0 15px;
}

.reels2-header p {
    font-size: 15px;
    opacity: 0.8;
    margin-bottom: 40px;
}

/* GRID */
.reels2-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
    align-items: start;
}

/* IMAGE */
.reels2-image img {
    width: 100%;
    border-radius: 8px;
}

/* CONTENT */
.reels2-content h3 {
    font-size: 22px;
    margin-bottom: 15px;
}

.reels2-content h4 {
    font-size: 18px;
    margin: 25px 0 10px;
}

/* LIST */
.reels2-content ul {
    list-style: none;
    padding: 0;
}

.reels2-content li {
    font-size: 14px;
    margin-bottom: 12px;
    padding-left: 22px;
    position: relative;
    opacity: 0.9;
}

/* CUSTOM BULLET */
.reels2-content li::before {
    content: "";
    width: 7px;
    height: 7px;
    background: #ff6a00;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 6px;
}
/* SECTION */
.faq2 {
    background: #0b0b0b;
    color: #fff;
    padding: 80px 20px;
}

/* CONTAINER */
.faq2-container {
    max-width: 1000px;
    margin: auto;
}

/* TITLE */
.faq2 h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 40px;
}

/* ITEM */
.faq2-item {
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* QUESTION */
.faq2-question {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 0;
    cursor: pointer;
}

.faq2-question span {
    font-size: 18px;
    font-weight: 600;
}

/* ICON */
.faq2-question i {
    width: 20px;
    height: 20px;
    color: #ff6a00;
    flex-shrink: 0;
}

/* ANSWER */
.faq2-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq2-answer p {
    font-size: 14px;
    opacity: 0.8;
    padding-bottom: 20px;
}

/* ACTIVE */
.faq2-item.active .faq2-answer {
    max-height: 200px;
}
/* SECTION */
.cta2 {
    background: #0b0b0b;
    color: #fff;
    text-align: center;
    padding: 80px 20px;
}

/* CONTAINER */
.cta2-container {
    max-width: 900px;
    margin: auto;
}

/* TOP TEXT */
.cta2-top {
    font-size: 14px;
    opacity: 0.7;
    margin-bottom: 20px;
}

/* MAIN HEADING */
.cta2 h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 30px;
}

/* BUTTON */
.cta2-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 12px 26px;
    border: 2px solid #ff6a00;
    border-radius: 30px;

    color: #fff;
    text-decoration: none;
    font-weight: 600;

    transition: 0.3s ease;
}

/* ICON */
.cta2-btn i {
    width: 18px;
    height: 18px;
}

/* HOVER */
.cta2-btn:hover {
    background: #ff6a00;
    color: #000;
}
@media (max-width: 1024px) {

    /* ===== GLOBAL TIGHTEN ===== */
    section {
        padding: 50px 20px !important;
    }

    h1 { font-size: 40px !important; }
    h2 { font-size: 30px !important; }
    h3 { font-size: 20px !important; }
    h4 { font-size: 16px !important; }

    p, li {
        font-size: 13px !important;
    }

    /* ===== HERO ===== */
    .hero-content h1 {
        font-size: 40px;
    }

    .hero-content h3 {
        font-size: 22px;
    }

    .hero-features {
        font-size: 18px;
        gap: 8px;
    }

    /* ===== USP ===== */
    .usp2-title {
        margin: 30px 0;
    }

    .usp2-card {
        padding: 20px;
    }

    .usp2-grid {
        gap: 20px;
    }

    /* ===== DELIVERABLES ===== */
    .deliverables2-title {
        margin-bottom: 40px;
    }

    .deliverables2-grid {
        gap: 35px 20px;
    }

    .deliverables2-item span {
        font-size: 60px;
    }

    /* ===== BENEFITS ===== */
    .benefits3-item {
        padding: 15px 40px;
    }

    .benefits3-item p {
        font-size: 16px;
    }

    /* ===== AD FILMS ===== */
    .adfilms2-container {
        gap: 30px;
    }

    .adfilms2-content .intro {
        margin-bottom: 20px;
    }

    .adfilms2-content li {
        margin-bottom: 10px;
    }

    /* ===== REELS ===== */
    .reels2-grid {
        gap: 30px;
    }

    .reels2-header p {
        margin-bottom: 25px;
    }

    .reels2-content li {
        margin-bottom: 10px;
    }

    /* ===== FAQ ===== */
    .faq2 {
        padding: 60px 20px;
    }

    .faq2-question {
        padding: 15px 0;
    }

    .faq2-question span {
        font-size: 16px;
    }

    /* ===== CTA ===== */
    .cta2 {
        padding: 60px 20px;
    }

    .cta2 h2 {
        margin-bottom: 20px;
    }

    .cta2-btn {
        padding: 10px 20px;
        font-size: 14px;
    }

}
@media (max-width: 768px) {

    /* ===== GLOBAL ===== */
    section {
        padding: 40px 15px !important;
    }

    h1 { font-size: 32px !important; }
    h2 { font-size: 26px !important; }
    h3 { font-size: 18px !important; }
    h4 { font-size: 15px !important; }

    p, li {
        font-size: 13px !important;
    }

    /* ===== HERO ===== */
    .hero {
        height: 80vh;
    }

    .hero-content h1 {
        font-size: 32px;
    }

    .hero-content h3 {
        font-size: 18px;
    }

    .hero-features {
        flex-wrap: wrap;
        gap: 6px;
        font-size: 14px;
    }

    /* ===== USP (3 → 2) ===== */
    .usp2-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .usp2-card {
        padding: 18px;
    }

    /* ===== DELIVERABLES (3 → 2) ===== */
    .deliverables2-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .deliverables2-item span {
        font-size: 50px;
    }

    .deliverables2-item p {
        font-size: 14px;
    }

    /* ===== BENEFITS ===== */
    .benefits3-item {
        padding: 14px 30px;
    }

    .benefits3-item p {
        font-size: 15px;
    }

    /* ===== AD FILMS (STACK) ===== */
    .adfilms2-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .adfilms2-image {
        order: -1; /* image on top (better UX) */
        width: 50%;
        margin: 0 auto 20px;
    }

    /* ===== REELS (STACK) ===== */
    .reels2-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .reels2-image {
        order: -1;
        width: 50%;
        margin: 0 auto 20px;
    }

    .reels2-header p {
        margin-bottom: 20px;
    }

    /* ===== FAQ ===== */
    .faq2 h2 {
        margin-bottom: 25px;
    }

    .faq2-question {
        padding: 14px 0;
    }

    .faq2-question span {
        font-size: 15px;
    }

    /* ===== CTA ===== */
    .cta2 h2 {
        font-size: 24px;
    }

    .cta2-top {
        font-size: 13px;
    }

    .cta2-btn {
        padding: 10px 18px;
        font-size: 13px;
    }

}
@media (max-width: 480px) {

    /* ===== GLOBAL ===== */
    section {
        padding: 30px 12px !important;
    }

    h1 { font-size: 26px !important; }
    h2 { font-size: 22px !important; }
    h3 { font-size: 16px !important; }
    h4 { font-size: 14px !important; }

    p, li {
        font-size: 13px !important;
        line-height: 1.5;
    }

    /* ===== HERO ===== */
    .hero {
        height: 70vh;
    }

    .hero-content {
        width: 90%;
    }

    .hero-content h1 {
        font-size: 26px;
    }

    .hero-content h3 {
        font-size: 16px;
    }

    .hero-features {
        flex-direction: column;
        gap: 6px;
        font-size: 13px;
    }

    /* ===== USP (2 → 1) ===== */
    .usp2-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .usp2-card {
        padding: 16px;
    }

    /* ===== DELIVERABLES (2 → 1) ===== */
    .deliverables2-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .deliverables2-item span {
        font-size: 40px;
    }

    .deliverables2-item p {
        font-size: 13px;
    }

    /* ===== BENEFITS ===== */
    .benefits3-item {
        padding: 12px 20px;
    }

    .benefits3-item p {
        font-size: 14px;
    }

    .benefits3-item .icon {
        display: none; /* remove side icons for space */
    }

    /* ===== AD FILMS ===== */
    .adfilms2-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .adfilms2-content h2 {
        font-size: 22px;
    }

    .adfilms2-content .intro {
        margin-bottom: 15px;
    }

    .adfilms2-content li {
        margin-bottom: 8px;
        padding-left: 18px;
    }

    /* ===== REELS ===== */
    .reels2-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .reels2-header p {
        margin-bottom: 15px;
    }

    .reels2-content li {
        margin-bottom: 8px;
        padding-left: 18px;
    }

    /* ===== FAQ ===== */
    .faq2 h2 {
        margin-bottom: 20px;
    }

    .faq2-question {
        gap: 10px;
        padding: 12px 0;
    }

    .faq2-question span {
        font-size: 14px;
    }

    .faq2-answer p {
        font-size: 13px;
    }

    /* ===== CTA ===== */
    .cta2 h2 {
        font-size: 20px;
        line-height: 1.3;
    }

    .cta2-top {
        font-size: 12px;
        margin-bottom: 15px;
    }

    .cta2-btn {
        padding: 8px 14px;
        font-size: 9px;
        gap: 6px;
    }

    .cta2-btn i {
        width: 14px;
        height: 14px;
    }

}