/* ABOUT INTRO */
.about-hero {
    position: relative;

    overflow: hidden;

    isolation: isolate;

    background-image: url("../../images/about-hero.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top:6rem;
    padding-bottom:6rem;

}

.hero-aid {
    position: relative;

    overflow: hidden;

    isolation: isolate;

    background-image: url("../../images/aid-hero.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top:6rem;
    padding-bottom:6rem;

}
.about-intro {
    /* max-width: 850px; */
    margin: 0;
    text-align:center;
    justify-content: center;
    
}

.about-intro p{
    text-align:justify;
}

.about-intro-section {
    background: #faf7ff;
}
.about-intro p + p {
    margin-top: 1.5rem;
}

/* IMAGES */
.about-image img {
    width: 100%;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    display: block;
}

/* PHILOSOPHY CARDS */
.philosophy-card {
    text-align: center;
}

.philosophy-card .icon-circle {
    margin: 0 auto 1rem;
}

/* ICON CIRCLE */
.icon-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(50,0,100,.08);
    color: rgb(50,0,100);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    margin-bottom: 1rem;
}

/* LIGHT PURPLE SECTION */
.section-light {
    background: var(--color-gray-50);
}

/* PURPLE SECTION */
.section-purple {
    background: rgb(50,0,100);
}

/* LIGHT CARDS ON DARK */
.card-light {
    background: #fff;
    height: 100%;
}

/* RESPONSIVE */
@media (max-width: 768px) {

    .about-image {
        order: -1;
        margin-bottom: 2rem;
    }

    .philosophy-grid {
        grid-template-columns: 1fr;
    }

    .icon-circle {
        width: 60px;
        height: 60px;
        font-size: 1.6rem;
    }
}
/* ==========================================
   OUR STORY RESPONSIVE
========================================== */

@media (max-width: 950px){

    #our-story .grid-2{
        display:flex;
        flex-direction:column;
    }

    #our-story .about-image{
        order:2;
        margin-top:2rem;
    }

    #our-story .grid-2 > div:last-child{
        order:1;
    }

     #our-story .about-image{

        width:100%;
        max-width:650px;

        margin:2.5rem auto 0;

    }

    #our-story .about-image img{

        height:260px;

    }


}
/* ==========================================
   LIGHT BADGE (for dark sections)
========================================== */

.badge-light {

    display: inline-flex;
    align-items: center;

    background: rgba(255,255,255,0.15);

    color: #fff;

    border: 1px solid rgba(255,255,255,0.35);

    backdrop-filter: blur(10px);

}

.section-purple .card-light{

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}

.section-purple .card-light:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 40px rgba(0,0,0,.18);

}
/* Desktop */
.founder-image-mobile{
    display:none;
}

/* Mobile */
@media (max-width:950px){

    .founder-image-desktop{
        display:none;
    }

    .founder-image-mobile{
        display:block;
        max-width:320px;
        margin:1.5rem auto 2rem;
    }
}

/* ==========================================
   FOUNDER SECTION - MOBILE
========================================== */

@media (max-width: 950px) {

    /* Centre the badge */
    .founder-content .badge {
        display: table;
        margin: 0 auto 1rem;
    }

    /* Centre the main heading */
    .founder-content .section-title {
        text-align: center;
    }

    /* Centre the subtitle */
    .founder-content .text-primary {
        text-align: center;
        margin-bottom: 1.5rem;
    }

    /* Keep the biography paragraphs left aligned */
    .founder-content p {
        text-align: left;
    }

    /* Centre the consultation button */
    .founder-content .btn {
        display: table;
        margin: 2rem auto 0;
    }

    /* Make the founder photo slightly smaller */
    .founder-image {
        max-width: 280px;
        margin: 1.5rem auto 2rem;
    }

}

/* ==========================================
   OUR TEAM
========================================== */

.team-card h3{

    text-align:center;

    margin-bottom:1rem;

}
.team-card{

    height:100%;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

         position:relative;

    overflow:hidden;
}

.team-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-xl);

}

.team-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:rgb(50,0,100);

    transition:height .3s ease;

}

.team-card:hover::before{

    height:8px;

}