/* Mobile and Tablet Responsive Fixes for VOD Platform */

/* Mobile View Fixes (max-width: 767px) */
@media (max-width: 767px) {

    /* Global Typography for Mobile */
    h2,
    .Benefits h2,
    .case-study-sec h3,
    .content_sec h2,
    .monetization-sec h2,
    .own_Platform_Services h2,
    .own_Platform_Services h2 span,
    .sec_vod_app h2,
    .sec_vod_marketting_tool h2,
    .streaming_experience h2 {
        font-size: 22px !important;
        font-weight: 100 !important;
        line-height: 30px !important;
        text-align: center !important;
    }

    h3:not(.case-study-sec h3) {
        font-size: 20px !important;
        line-height: 28px !important;
    }

    /* Banner Section */
    .sec-banner .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .sec-banner h1 {
        font-size: 28px !important;
        line-height: 36px !important;
        text-align: center;
    }

    .sec-banner p {
        font-size: 16px !important;
        text-align: center;
        padding: 15px 0;
    }

    .sec-banner ul {
        padding-left: 0;
        text-align: center;
    }

    .sec-banner ul li {
        justify-content: center;
    }

    /* Fix banner image overflow */
    .banner-img1 {
        width: 100%;
        overflow: hidden;
    }

    .banner-img1 img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Logo section */
    .banner-img .logo-box {
        width: 100px !important;
        height: 60px !important;
        margin: 5px;
    }

    .banner-img .logo-box img {
        max-width: 85%;
    }

    /* Content sections */
    .content_sec .row {
        flex-direction: column;
    }

    .content_sec img {
        margin-bottom: 20px;
    }

    /* Streaming Experience */
    .streaming_experience .row {
        padding: 0 10px;
    }

    .streaming_experience_box {
        margin-bottom: 20px;
        padding: 30px 20px !important;
    }

    .sec_vod_app .row {
        margin: 0;
    }

    .sec_vod_app .col-lg-6 {
        padding: 15px;
        margin-top: 0 !important;
    }

    .sec_vod_app img {
        width: 100%;
        height: auto;
    }

    /* Premium VOD App Features section - Fix image alignment  */
    .sec_vod_app .col-lg-8 .col-lg-6 {
        text-align: center;
        margin-bottom: 20px;
        /* Reduced from 30px */
    }

    .sec_vod_app .col-lg-8 .col-lg-6 img {
        display: block;
        margin: 0 auto 10px;
        /* Reduced from 15px */
        max-width: 40px;
        height: auto;
    }

    .sec_vod_app .col-lg-8 .col-lg-6 h3 {
        font-size: 20px !important;
        margin-bottom: 5px !important;
        text-align: center;
    }

    .sec_vod_app .col-lg-8 .col-lg-6 p {
        font-size: 16px !important;
        line-height: 24px !important;
        text-align: center;
        padding: 0 10px;
    }

    .sec_vod_app .app_link_btn {
        display: block;
        text-align: center;
        margin: 20px auto 0;
        width: 80%;
        max-width: 300px;
    }

    /* Marketing tools */
    .sec_vod_marketting_tool .box {
        margin: 50px 5px 10px;
        padding: 30px 10px 10px;
        height: auto !important;
        min-height: auto !important;
    }

    .sec_vod_marketting_tool .hole-box {
        margin-top: 20px !important;
    }

    .sec_vod_marketting_tool .box-img {
        left: 50% !important;
        transform: translateX(-50%);
        top: -60px !important;
        margin: 0 auto;
        width: 80px !important;
        height: 80px !important;
        padding: 0 10px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sec_vod_marketting_tool .box-img img {
        width: 40px !important;
        height: 40px !important;
    }

    .sec_vod_marketting_tool h3 {
        text-align: center;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }

    .sec_vod_marketting_tool p {
        text-align: center;
        margin-bottom: 0 !important;
    }

    /* Benefits section */
    .Benefits img {
        width: 100%;
        height: auto;
        margin-bottom: 20px;
    }

    /* Own Platform Services */
    .own_Platform_Services .number_box {
        margin: 20px 0;
        max-width: 100%;
        text-align: left !important;
        justify-content: flex-start !important;
    }

    .own_Platform_Services .learn_more_btn {
        display: inline-block;
        margin: 0 auto;
    }

    .own_Platform_Services .full-box {
        height: auto !important;
        min-height: auto !important;
    }

    .own_Platform_Services .full-box p {
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 19px !important;
        text-align: left !important;
    }

    /* Remove 400px font-size override and keep global style */
    .own_Platform_Services h2,
    .own_Platform_Services h2 span {
        font-size: 22px !important;
        font-weight: 100 !important;
        line-height: 30px !important;
    }

    /* Monetization section */
    .monetization-sec .row {
        margin-left: 0;
        margin-right: 0;
    }

    .monetization-sec img {
        margin: 20px 0;
    }

    .monetization-sec h3,
    .monetization-sec p {
        padding: 0 15px;
    }

    /* Case study section */
    .case-study-sec .row {
        margin: 0;
    }

    .case-study-sec img {
        width: 100%;
        height: auto;
    }

    /* Footer banner */
    .footer-baner-sec .row {
        flex-direction: column-reverse;
    }

    .footer-baner-sec img {
        margin-bottom: 20px;
    }

    /* Add Section (Marvel Image) Readability Fix */
    .add_sec h2 {
        background: rgba(0, 0, 0, 0.6);
        padding: 20px;
        border-radius: 10px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        margin-bottom: 20px;
        /* Space for the button */
    }

    /* Buttons */
    .orange-button {
        font-size: 16px !important;
        padding: 14px 28px !important;
        display: inline-block;
        width: auto;
        line-height: normal;
    }

    /* Fix Banner Button Alignment */
    .sec-banner .text_sm_center {
        text-align: center !important;
        display: block;
        width: 100%;
    }



    /* Fix tab navigation on mobile */
    .sec-future-of-scal .accordion-button {
        font-size: 18px !important;
        padding: 15px !important;
    }

    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }

    .container,
    .container-fluid {
        max-width: 100%;
        overflow-x: hidden;
    }

    .row {
        margin-left: -10px;
        margin-right: -10px;
    }

    .row>* {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Tablet View Fixes (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {

    /* Global sizing adjustments for tablet */
    h1 {
        font-size: 32px !important;
        line-height: 42px !important;
    }

    h2 {
        font-size: 28px !important;
        line-height: 38px !important;
    }

    h3 {
        font-size: 22px !important;
        line-height: 30px !important;
    }

    p {
        font-size: 16px !important;
        line-height: 24px !important;
    }

    section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* Banner adjustments */
    .sec-banner h1 {
        font-size: 32px !important;
        line-height: 40px !important;
    }

    .sec-banner p {
        font-size: 16px !important;
        max-width: 90%;
    }

    .banner-img1 img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Logo boxes */
    .logo-box {
        width: 120px !important;
        height: 55px !important;
        padding: 5px !important;
    }

    .logo-box img {
        max-height: 40px;
        width: auto;
    }

    /* Content sections - Side by side layout */
    .content_sec .row,
    .benefits-img .row {
        align-items: center;
    }

    .content_sec img {
        max-width: 90%;
        margin: 0 auto;
        display: block;
    }

    /* Fix Benefits Image Cutoff */
    .benefits-img {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .benefits-img img {
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }

    /* Streaming experience */
    .streaming_experience .col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 20px;
        padding: 0 10px;
    }

    .streaming_experience_box {
        padding: 20px !important;
        height: 100%;
    }

    /* Features Section */
    .sec_vod_app .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .sec_vod_app img {
        max-width: 90%;
        margin: 0 auto;
    }

    .sec_vod_app .col-lg-8 .col-lg-6 {
        margin-bottom: 20px;
    }

    /* Marketing tools */
    .sec_vod_marketting_tool .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 40px;
    }

    .sec_vod_marketting_tool .box {
        margin: 30px 5px 10px;
        padding: 50px 15px 15px;
    }

    .sec_vod_marketting_tool .box-img {
        width: 80px !important;
        height: 80px !important;
        top: -40px !important;
    }

    /* Monetization section */
    .monetization-sec .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .monetization-sec img {
        max-width: 90%;
    }

    /* Own Platform Services */
    .own_Platform_Services .col-lg-4 {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 20px;
    }

    .own_Platform_Services .full-box {
        padding: 20px;
        min-height: auto;
    }

    .own_Platform_Services .row.justify-content-center {
        flex-direction: column;
        align-items: center;
    }

    .own_Platform_Services .learn_more_box {
        margin-top: 20px;
        text-align: center;
        width: 100%;
        justify-content: center !important;
    }

    .own_Platform_Services .learn_more_btn {
        text-align: center;
        display: inline-block;
    }

    /* Case study */
    .case-study-sec .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 20px;
    }

    /* Add Section (Marvel Image) Readability Fix */
    .add_sec h2 {
        background: rgba(0, 0, 0, 0.6);
        padding: 30px;
        border-radius: 12px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        display: inline-block;
        max-width: 90%;
        margin: 0 auto;
    }

    .add_sec .container {
        display: flex !important;
        justify-content: center !important;
        text-align: center;
    }

    .add_sec .container>div {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .add_sec .text-center {
        width: 100%;
        margin: 0 auto;
    }

    /* Footer banner */
    .footer-baner-sec .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .footer-baner-sec img {
        max-width: 100%;
    }

    .footer-baner-sec h2 {
        font-size: 26px !important;
        line-height: 36px !important;
    }

    /* Button adjustments */
    .orange-button,
    .app_link_btn {
        font-size: 16px !important;
        padding: 10px 20px !important;
    }
}

/* Fix for very small screens (max-width: 375px) */
@media (max-width: 375px) {
    .sec-banner h1 {
        font-size: 24px !important;
        line-height: 32px !important;
    }

    .sec-banner p {
        font-size: 14px !important;
    }

    .orange-button {
        font-size: 14px !important;
        padding: 10px 20px !important;
    }

    .banner-img .logo-box {
        width: 80px !important;
        height: 50px !important;
    }
}