/* General Body Styles */
body {
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #333;
    line-height: 1.6;
}
.about-body {
    margin: 3dvw;
}
.section-header {
    font-size: 3.4rem;
    font-weight: 700;
    color: #008acf;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 3dvw;   
    margin-top: 0.2dvw;    
    letter-spacing: 0.05dvw;
}


.bitsware-difference-section .section-header-container {
    margin-bottom: 3dvw;  
}

.hero-background-container {
    position: sticky;
    clip-path: ellipse(150% 100% at top);
    background-color: #038cd0;
    padding: 0 2dvw 4.5dvw 3dvw; /* 0px 10px 60px 40px → responsive */
    color: #ffffff;
    overflow: hidden;
}

/* --- UPDATED FOR NEW HTML STRUCTURE --- */
.content-within-hero {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 4dvw; /* 50px → 4dvw */
}

.section-title-holder, .section-content-holder {
    flex-basis: 55%;
    min-width: 25dvw; /* 300px → 25dvw */
}
.section-title-holder {
    order: 1;
}
.section-content-holder {
    order: 2;
    text-align: center;
}
.image-holder-right {
    flex-basis: 40%;
    min-width: 25dvw; /* 300px → 25dvw */
    order: 3;
    align-self: center;
}

.section-title-holder h3 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 0.4dvw; /* 5px → 0.4dvw */
    line-height: 1.3;
}

.section-title-holder h3 span {
    font-weight: bold;
    font-size: 3.7rem;
    background: #fff;
    color: #008acf;
    padding: 0.2dvw 0.5dvw; /* 2px 6px → responsive */
    border-radius: 0;
}

.section-content-holder p {
    font-size: 1.9rem;
    margin-top: 1px;
    text-align: justify;
    width: 100%;
}

.bitsware-difference-section .image-holder-right img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.6dvw; 
}


/* === Section: Why We Do What We Do? === */
.why-we-do-section {
    padding: 2dvw 0; 
    background-color: #ffffff;
    text-transform: lowercase;
    text-align: justify;
}
.icon-text-item {
    display: flex;
    align-items: center;
    gap: 3dvw; 
    margin-bottom: 2dvw; /* 30px → responsive */
}
.icon-text-item .icon-placeholder {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 7dvw; 
    height: 7dvw;
}
.icon-text-item .icon-placeholder iframe {
    max-width: 140%;
    max-height: 140%;
    object-fit: contain;
    border: 0;
}
.icon-text-item p {
    font-size: 1.6rem;
    color: #333;
    margin: 0;
    line-height: 1.7;
}


@media (max-width: 1024px) {
    .about-body { margin: 3%; }
    .section-header { font-size: 2.8em; margin-bottom: 30px; padding: 0 3%; }
    .hero-background-container { padding: 50px 3%; }
    .content-within-hero { flex-direction: column; align-items: center; text-align: center; }

@media (max-width: 992px) {
    .section-header {
        font-size: 2.8em;
        margin-bottom: 30px;
    }
    .bitsware-difference-section {
        padding-top: 0px;
        padding-bottom: 10px;
    }
    .hero-background-container {
        padding: 60px 0;
        
    }

    /* --- KEY CHANGE FOR MOBILE LAYOUT --- */
    .content-within-hero {
        flex-direction: column; /* Stack all items vertically */
    }

    /* Reset order and width for all items */
    .section-title-holder, .section-content-holder, .image-holder-right {
        order: 0 !important;
        flex-basis: 100% !important;
        max-width: 90%; /* Keep max-width for content */
        width: 100%; /* Take full available width of parent */
        margin: 0 auto; /* Center individual stacked items */
    }

    /* Title styling for this range (1024px down to 993px) */
    .section-title-holder h3 {
        font-size: 3.1em; 
        text-align: center; /* Center title when layout stacks vertically */
        margin-bottom: 20px; /* Ensure space below title */
    }
    .section-title-holder h3 span {
        font-size: 2.5em; 
    }
    .section-content-holder p { font-size: 1.9em; } 
    .image-holder-right { max-width: 80%; margin-top: 20px; margin-bottom: 20px; } 
    .why-we-do-section { padding: 40px 5%; } 
    .icon-text-item { gap: 25px; } 
    .icon-text-item .icon-placeholder { width: 80px; height: 80px; } 
    .icon-text-item p { font-size: 1.9em; }
}

/* --- Responsive Adjustments: Medium Tablets / Laptops (max-width: 992px) --- */
@media (max-width: 992px) {
    /* Your existing rules for this breakpoint */
    .section-header { font-size: 2.8em; margin-bottom: 30px; }
    .bitsware-difference-section { padding-top: 0px; padding-bottom: 10px; }
    .hero-background-container { padding: 0px 0 60px 0; }
    /* content-within-hero items already handled in 1024px, but ensure max-width: 90% applies */
    .section-title-holder,
    .section-content-holder,
    .image-holder-right {
        max-width: 90%; /* This ensures content is not too wide in this range */
    }

    .section-title-holder h3 {
        font-size: 3.1em; 
        margin-bottom: 15px; 
        text-align: center;
    }
    .section-title-holder h3 span {
        font-size: 1.9em; 
        padding: 1px 4px;
    }
    .section-content-holder p { font-size: 1.6em; } 
    /* Rest of the rules */
    .why-we-do-section { padding: 0px 0; }
    .icon-text-item { gap: 18px; margin-bottom: 25px; align-items: center; }
    .icon-text-item .icon-placeholder { width: 40px; height: 40px; }
    .icon-text-item p { font-size: 1.2em; } 
}

/* --- Responsive Adjustments: Mobiles (max-width: 768px) --- */
@media (max-width: 768px) {
    .section-header { font-size: 2.8em; padding: 0 4%; }

    .section-title-holder h3 {
        font-size: 2.5em; 
        margin-bottom: 10px;
    }
    .section-title-holder h3 span {
        font-size: 1.9em; 
        padding: 2px 6px;
    }
    .section-content-holder p { font-size: 1.2em; } 
    .image-holder-right { max-width: 90%; margin: 20px auto; } 
    .icon-text-item { flex-direction: row; align-items: center; gap: 15px; margin-bottom: 20px; }
    .icon-text-item .icon-placeholder { width: 50px; height: 50px; }
    .icon-text-item p { font-size: 1.2em; } 
}

/* --- Optional: Very Small Mobiles (Example) --- */
@media (max-width: 480px) {
    .section-title-holder h3 {
        font-size: 1.9em; 
    }}
@media (max-width: 1024px) {
   

    .section-header {
        font-size: 2.8em;
        margin-bottom: 30px;
        padding: 0 3%;
    }

    .hero-background-container {
        padding: 40px 3%;
    }

    .content-within-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .section-title-holder h3 {
        font-size: 2.8em; 
    }

    .section-title-holder h3 span {
        font-size: 1em;
    }

    .section-content-holder p {
        font-size: 1.6em; 
    }

    .image-holder-right {
        max-width: 80%;
        margin-top: 20px;
    }

    .why-we-do-section {
        padding: 40px 5%;
    }

    .icon-text-item {
        gap: 20px;
    }

    .icon-text-item .icon-placeholder {
        width: 70px;
        height: 70px;
    }

    .icon-text-item p {
        font-size: 1.6em; 
    }
}
@media (max-width: 768px) {
    .section-header {
        font-size: 2.4em;
        padding: 0 4%;
    }

    .section-title-holder h3 {
        font-size: 2.1em; 
        margin-top: 4px;
    }

    .section-title-holder h3 span {
        font-size: 0.9em; 
        padding: 2px 6px;
    }

    .section-content-holder p {
        font-size: 1.2em; 
    }

    .image-holder-right {
        max-width: 90%;
        margin: 20px auto;
    }

    .icon-text-item {
        flex-direction: row;
        align-items: center;
        gap: 15px;
        margin-bottom: 20px;
    }

    .icon-text-item .icon-placeholder {
        width: 50px;
        height: 50px;
    }

    .icon-text-item p {
        font-size: 1.0em; 
    }
}
}