/* General Body Styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fff; /* Light grey background, adjust if needed */
    color: #333;
    line-height: 1.6;
}
.about-body{
    margin: 2%;
}
.container {
    /* width: 95%; /* Keeps some padding from the edges */
    /* margin: 0 auto; */ 
    /* padding: 0 15px; */
}

/* Typography & Common Section Styles */
.section-header {
    font-size: 55px;
    font-weight: 700;
    color: #008acf;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 40px;
    margin-top: 2px;
    letter-spacing: 0.5px;
}

.bitsware-difference-section {
    padding-top: 0px;
    padding-bottom: 0px;
}

.bitsware-difference-section .section-header-container {
    margin-bottom: 40px;
}

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

/* --- UPDATED FOR NEW HTML STRUCTURE --- */
.content-within-hero {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap */
    align-items: center;
    gap: 0 50px; /* Gap for columns only */
}

.section-title-holder, .section-content-holder {
    flex-basis: 55%; /* Takes up left side */
    min-width: 300px;
}
.section-title-holder {
    order: 1; /* First item on the left */
}
.section-content-holder {
    order: 2;
    text-align: center; /* Second item on the left */
}
.image-holder-right {
    flex-basis: 40%; /* Takes up the right side */
    min-width: 300px;
    order: 3; /* Third item, appears as second column */
    align-self: center /* Vertically centers the image with the text */
}

.section-title-holder h3 {
    font-size: 70px;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.3;
}

.section-title-holder h3 span {
    font-weight: bold;
    font-size: 55px;
    background: #fff;
    color: #008acf;
    padding: 2px 6px;
    border-radius: 0px;
}

.section-content-holder p {
    font-size: 30px;
    margin-bottom: 0;
    text-align: justify;
    width: 100%;
}

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


/* === Section: Why We Do What We Do? (No changes here) === */
.why-we-do-section {
    padding: 70px 0;
    background-color: #ffffff;
    text-transform: lowercase;
    text-align: justify;
}
/* ... all .why-we-do-section styles remain the same ... */
.icon-text-item {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 30px;
}
.icon-text-item .icon-placeholder {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 90px;
}
.icon-text-item .icon-placeholder iframe {
    max-width: 140%;
    max-height: 140%;
    object-fit: contain;
    border: 0px solid;
}
.icon-text-item p {
    font-size: 25px;
    color: #333;
    margin: 0;
    line-height: 1.7;
}

@media (max-width: 1024px) {
    .about-body { margin: 3%; }
    .section-header { font-size: 45px; 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: 45px;
        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: 50px; /* Scale down for smaller screens/tablets */
        text-align: center; /* Center title when layout stacks vertically */
        margin-bottom: 20px; /* Ensure space below title */
    }
    .section-title-holder h3 span {
        font-size: 40px; /* Scale down span font size */
    }
    .section-content-holder p { font-size: 30px; } /* Keep existing */
    .image-holder-right { max-width: 80%; margin-top: 20px; margin-bottom: 20px; } /* Keep existing */
    .why-we-do-section { padding: 40px 5%; } /* Keep existing */
    .icon-text-item { gap: 25px; } /* Keep existing */
    .icon-text-item .icon-placeholder { width: 80px; height: 80px; } /* Keep existing */
    .icon-text-item p { font-size: 30px; } /* Keep existing */
}

/* --- Responsive Adjustments: Medium Tablets / Laptops (max-width: 992px) --- */
@media (max-width: 992px) {
    /* Your existing rules for this breakpoint */
    .section-header { font-size: 45px; 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 */
    }

    /* Title styling for this range (992px down to 769px) */
    .section-title-holder h3 {
        font-size: 50px; /* Further scale down for this breakpoint */
        margin-bottom: 15px; /* Adjust margin */
        text-align: center;
    }
    .section-title-holder h3 span {
        font-size: 30px; /* Adjust span font size */
        padding: 1px 4px;
    }
    .section-content-holder p { font-size: 25px; } /* Keep existing */
    /* 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: 20px; }
}

/* --- Responsive Adjustments: Mobiles (max-width: 768px) --- */
@media (max-width: 768px) {
    /* Your existing rules for this breakpoint */
    .section-header { font-size: 45px; padding: 0 4%; }

    /* Title styling for mobile (768px and below) */
    .section-title-holder h3 {
        font-size: 40px; /* Adjust for mobile, now smaller than 992px range */
        margin-bottom: 10px;
    }
    .section-title-holder h3 span {
        font-size: 30px; /* Adjust span font size for mobile */
        padding: 2px 6px;
    }
    .section-content-holder p { font-size: 18px; } /* Keep existing */
    .image-holder-right { max-width: 90%; margin: 20px auto; } /* Keep existing */
    .icon-text-item { flex-direction: row; align-items: center; gap: 15px; margin-bottom: 20px; } /* Keep existing */
    .icon-text-item .icon-placeholder { width: 50px; height: 50px; } /* Keep existing */
    .icon-text-item p { font-size: 18px; } /* Keep existing */
}

/* --- Optional: Very Small Mobiles (Example) --- */
@media (max-width: 480px) {
    .section-title-holder h3 {
        font-size: 30px; /* Even smaller for very small screens */
    }}
@media (max-width: 1024px) {
    .about-body {
        margin: 3%;
    }

    .section-header {
        font-size: 45px;
        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: 45px;

    }

    .section-title-holder h3 span {
        font-size: 28px;
    }

    .section-content-holder p {
        font-size: 25px;
      
    }

    .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: 25px;
    }
}
@media (max-width: 768px) {
    .section-header {
        font-size: 45px;
        padding: 0 4%;
    }

    .section-title-holder h3 {
        font-size: 45px;
        margin-bottom: 10px;
    }

    .section-title-holder h3 span {
        font-size: 30px;

        padding: 2px 6px;
    }

    .section-content-holder p {
        font-size: 18px;
        /* padding: 0 5%; */
    }

    .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: 18px;
    }
}
}