/* 1. LAPTOP / DESKTOP (Large Screens) */
@media (min-width: 1025px) {
    .b-col-image img {
        height: 50vh;
        width: auto;
        object-fit: cover;
        display: block;
        margin: 0 auto;
    }
}

/* 2. TABLETS & MOBILE (Everything under 1024px) */
@media (max-width: 1024px) {
    .b-container {
        width: 92%;
        padding: 15px 5px;
    }

    /* THE FIX: Force vertical stacking for all flex sections */
    .b-flex-container, 
    .b-intro-flex {
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important;
        gap: 25px !important;
    }

    /* Make columns take full width */
    .b-col-image, 
    .b-col-content, 
    .b-intro-video,
    .b-intro-text {
        width: 100% !important;
        flex: none !important;
    }

    /* Image scaling for mobile */
    .b-col-image img {
        height: auto !important;
        width: 100% !important;
        max-width: 500px; 
        border-radius: 12px;
        display: block;
        margin: 0 auto;
    }

    /* Typography Boost */
    p {
        font-size: 20px !important; 
        line-height: 1.8 !important;
        margin-bottom: 15px;
        color: #443c3c;
    }

    .b-main-title {
        font-size: 28px !important;
        text-align: center;
        line-height: 1.3;
    }

    .b-sub-heading {
        font-size: 22px !important;
        padding-left: 10px;
        line-height: 1.4;
    }

    .b-inner-title {
        font-size: 19px !important;
        margin: 20px 0 10px 0;
    }
    .b-lang-container {
        justify-content: center !important;
        margin: 15px 0;
        gap: 10px;
    }
    .b-specialized-tools {
        margin-top: 35px;
    }
    .b-specialized-tools p {
        padding: 0 !important;
        margin: 0 0 15px 0 !important;
        font-size: 16px !important;
        color: #443c3c !important;
        line-height: 1.7 !important;
    }
    /* 1. Accordion Header Adjustments */
    .b-accordion-header {
        padding: 12px 15px !important;
    }

    .b-accordion-title {
        font-size: 16px !important; /* Smaller title to fit mobile screens */
        line-height: 1.4;
        padding-right: 10px;
    }

    /* 2. Content Inside the Accordion */
    .b-accordion-content {
        padding: 15px 10px !important;
    }

    /* 3. Re-using our Flex-Stacking logic for inside the accordion */
    .b-accordion-content .b-flex-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
    }

    /* 4. Image sizing inside accordion for mobile */
    .b-accordion-content .b-col-image img {
        height: auto !important;
        width: 100% !important;
        max-width: 350px; /* Slightly smaller for the dropdown view */
        margin-bottom: 10px;
    }

    /* 5. Padding fix for text inside accordion */
    .b-accordion-content .b-col-content {
        padding: 0 !important;
    }
    .b-closed-preview {
        gap: 10px !important;
    }

    .b-small-thumb {
        width: 50px !important;
        height: 50px !important;
    }

    .b-preview-text {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    /* Stack the content inside the opened accordion */
    .b-accordion-content .b-flex-container {
        flex-direction: column !important;
    }
}
@media only screen and (max-width: 768px) {
    .b-intro-video{
        margin-bottom: 20px;
    }
    .b-title-section{
        margin-bottom: 30px !important;
    }
}
/* 3. SMALL MOBILE (Under 480px) */
@media (max-width: 480px) {
    .b-main-title {
        font-size: 20px !important;
    }

    .b-sub-heading {
        font-size: 20px !important;
    }

    .b-col-image img {
        max-width: 100%; 
    }

    .b-meta-info {
        font-size: 12px;
        justify-content: center;
    }
    p {
        font-size: 16px !important;  
        line-height: 1.6 !important;
    }
    .b-accordion-title {
        font-size: 15px !important;
    }
    
    .b-icon::after {
        font-size: 12px;
    }
}