/* Heading styles with gradient borders */
.about_heading {
    display: inline-block;
    padding-bottom: 16px;
    position: relative;
}

/* Main gradient border (bottom) */
.about_heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 7%;
    width: 100%;
    height: 10px;
    background: var(--ccig2, linear-gradient(270deg, #000 0%, #220561 33.17%, #AC2020 65.87%, #F3710E 100%));
}

/* Second segmented border (above the main one) */
.about_heading::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2%;
    width: 100%;
    height: 10px;
    background: linear-gradient(90deg,
            #F3710E 0%, #F3710E 25%,
            #AC2020 25%, #AC2020 50%,
            #220561 50%, #220561 75%,
            #000 75%, #000 100%);
}

:root {
    --ccig1: linear-gradient(109deg, #F3710E 0.66%, #AC2020 50.55%, #220561 99.48%);
    --ccig2: linear-gradient(270deg, #000 0%, #220561 33.17%, #AC2020 65.87%, #F3710E 100%);
}

.about-background {
    opacity: 0.1;
    background: var(--ccig1);
    mix-blend-mode: hard-light;
    border-radius: 16px;
    pointer-events: none;
}

.about-text {
    color: black;
}

/* Desktop images positioning (preserved) */
.about_1 {
    width: 269.187px;
    height: 315.835px;
    position: absolute;
    top: -15%;
    left: 15%;
    z-index: 1;
}

.about_2 {
    width: 192.949px;
    height: 208.858px;
    position: absolute;
    top: -25%;
    left: 68%;
    z-index: 2;
}

.about_3 {
    width: 338px;
    height: 231px;
    z-index: 3;
    position: absolute;
    top: 21%;
    right: -17%;
}

/* Animation bars */
.animation_row_col {
    position: absolute;
    bottom: -20%;
    right: 0.5%;
}

.animation_1 {
    width: 15px;
    height: 225px;
}

.animation_2 {
    background-color: #F3710E;
}

.animation_3 {
    background-color: #AC2020;
}

.animation_4 {
    background-color: #220561;
}

.animation_5 {
    background-color: #000;
}


.animation_11 {
    width: 15px;
    height: 79px;
}

.animation_row_col_our_mission {
    position: absolute;
    top: -6%;
    left: 2%;
}

.animation_row_col_our_mission_2 {
    position: absolute;

    bottom: -6%;
    right: 2%;
    width: 110px;
}


.our_mission_container {
    margin-bottom: 50px;
}

.our_mission {
    margin-bottom: 36px;
}

.our_mission_heading {
    margin-bottom: 24px;
}

.bg_about_img {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: contain;
    height: 208px;
    border-radius: 10px;
}

.leadership_conatiner {
    margin-bottom: 50px;
    margin-top: 100px;
}

.meet_team {
    margin-top: 100px;
    margin-bottom: 100px;
}

.leadership {
    background-image: url(../images/cci_home_img/leadership.png);
}

.excellence {
    background-image: url(../images/cci_home_img/excellence.png);
}

.integrity {
    background-image: url(../images/cci_home_img/integrity.png);
}

.result {
    background-image: url(../images/cci_home_img/result.png);
}

.trust {
    background-image: url(../images/cci_home_img/trust.png);
}

.our_values {
    align-self: stretch;
}

.team_member {
    border-radius: 12px !important;
}

.member_name {
    color: var(--FlexUI-Gray-950, #19191B);
    font-family: "DM Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
}

.member_role {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    background: var(--ccig1, linear-gradient(109deg, #F3710E 0.66%, #AC2020 50.55%, #220561 99.48%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.member_description {
    color: var(--FlexUI-Gray-600, #787A82);
    font-size: 16px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.member_discription {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    flex-grow: 1;
    transition: all 0.3s ease;
}

.member_discription.expanded {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}

.initials-avatar {
    width: 170px;
    height: 252px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: bold;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .initials-avatar {
        width: 120px;
        height: 180px;
        font-size: 36px;
        margin: 0 auto 20px;
    }
}

.team_member {
    height: 249px;
    width: 320px;
    object-fit: fill;
}

/* Mobile: up to 767.98px */
@media (max-width: 767.98px) {
    .about_heading_container {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }

    .about_2_container {
        margin-bottom: 40px !important;
    }

    /* Stack images vertically on mobile */
    .about_1,
    .about_2,
    .about_3 {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        max-width: 280px;
        margin: 10px auto;
        display: block;
    }

    .about_3 {
        height: 152px !important;
    }

    .about_heading::before {
        height: 6px !important;
    }

    .about_heading::after {
        height: 5px !important;
    }

    /* Hide animation bars on mobile */
    .animation_row_col {
        display: none !important;
    }

    /* Reduce padding on mobile */
    .mobile-padding {
        padding: 20px 15px !important;
    }

    .team_member {
        height: 249px !important;
        width: 320px !important;
        object-fit: fill !important;
    }
}

/* Tablet: 768px to 991.98px - Desktop-like layout with adjusted sizes */
@media (min-width: 768px) and (max-width: 991.98px) {
    .about_heading_container {
        margin-top: 35px !important;
        margin-bottom: 35px !important;
    }

    .about_2_container {
        margin-bottom: 80px !important;
    }

    /* Hide animation bars on mobile */
    .animation_row_col {
        display: none !important;
    }

    /* Scale down images proportionally for tablet */
    .about_1 {
        width: 414px !important;
        height: 335px !important;
        top: 0% !important;
        left: 1% !important;
    }

    .about_2 {
        width: 248px !important;
        height: 166px !important;
        top: 0% !important;
        left: 65% !important;
    }

    .about_3 {
        width: 247px !important;
        height: 164px !important;
        top: 50% !important;
        right: -0.4% !important;
    }

    /* Scale down animation bars */
    .animation_1 {
        width: 12px !important;
        height: 170px !important;
    }

    .animation_row_col {
        bottom: -12% !important;
        right: 1% !important;
    }

    /* Slightly reduce text size for better balance */
    .about-text {

        line-height: 1.6 !important;
    }

    /* Adjust container min-height for better proportion */
    .tablet-container {
        min-height: 350px !important;
    }
}

/* Large Desktop: 992px to 1199.98px */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .about_heading_container {
        margin-top: 40px !important;
        margin-bottom: 30px !important;
    }

    .about_2_container {
        margin-bottom: 80px !important;
    }
}

/* Extra Large Desktop: 1200px and up (your original design preserved) */
@media (min-width: 1200px) {
    .about_heading_container {
        margin-top: 75px !important;
        margin-bottom: 55px !important;
    }

    .about_2_container {
        margin-bottom: 150px !important;
    }
}