@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&display=swap');

/* font-family: "Manrope", sans-serif; */
/* font-family: "Inter", sans-serif; */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* primary color #261fb3 */

html,
body {
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
}

#maincontainer {
    width: 100%;
    height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Manrope", sans-serif;
}

a,
p,
span, small , ul, ul li{
    font-family: "Inter", sans-serif;
    color: #222;
}

a {
    text-decoration: none;
    color: #222;
}

::-webkit-scrollbar {
    display: none;
}


.Hero-5-Container{
    position: relative;
}

.floating-image{
    position: absolute;
}

.icon1, .icon2, .icon3, .icon4{
    font-size: 2.5rem;
    background: linear-gradient(125deg, #1e37af, #25228d);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    background-color: #fff;
    border-radius: 50%;
    padding: 8px;
}

.icon1{
    top: 80px;
    left: 30px;
}

.icon2{
    top: 50px;
    right: 160px;
}

.icon3{
    bottom: 40px;
    left: 80px;
}

.icon4{
    right: 90px;
    bottom: 50px;
}

.AboutSection{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.AboutContainer{
    width: 100%;
    max-width: 1400px;
    height: auto;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 25px;
    /* border: 1px solid #25228d; */
}

.AboutContainer{
    background-image: url(https://img.freepik.com/free-vector/watercolor-world-mental-health-day-background_23-2149637237.jpg?ga=GA1.1.1141759884.1744690493&semt=ais_hybrid&w=740);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* .overlaybg{
    background-color: #00000090;
} */

.AboutContainer h1{
    font-size: 6rem;
    line-height: 6.5rem;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* background: linear-gradient(125deg, ); */
    background: linear-gradient(125deg, #25228d, #372ffc);
    -webkit-background-clip: text;
    background-clip: text;
    margin-bottom: 20px;
    text-align: center;
}

.AboutContainer p{
    width: 100%;
    max-width: 850px;
    text-align: center;
    margin-bottom: 25px;
}

.aboutcta a, .intro-Right button{
    padding: 10px 25px;
    color: #f9f9f9;
    border: none;
    border-radius: 15px;
    background: linear-gradient(125deg, #25228d, #372ffc);
    font-size: 1rem;
    font-weight: 500;
}




/* hero 1 */
.hero1Intro-Container, .ourVision-Container{
    width: 100%;
    max-width: 1400px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* gap: 30px; */
    padding: 15px 20px;
}


.intro-Left, .intro-Right, .vision-Left, .vision-Right{
    width: 50%;
    height: auto;
    overflow: hidden;
}

.intro-Left,.vision-Right{
    display: flex;
    align-items: center;
    justify-content: center;
}

.intro-Left img, .vision-Right img{
    width: auto;
    height: 600px;
}

.intro-Right h4, .vision-Left>h4{
    font-size: 1.1rem;
    text-transform: uppercase;
    color: #444;
}

.intro-Right h2, .vision-Left h2{
    font-size: 3.3rem;
    line-height: 3.5rem;
    margin-bottom: 25px;
    margin-top: 6px;
    color: #111;
    transition: all .3s ease-in-out;
}

.intro-Right:hover>h2, .vision-Left:hover>h2{
    /* background: linear-gradient(125deg, #714612, #ca9904); */
    background: linear-gradient(125deg, #25228d, #372ffc);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

.intro-Right p{
    color: #222;
    margin-bottom: 40px;
}

.intro-Right ul{
    margin-bottom: 30px;
}

.intro-Right ul li{
    list-style: circle !important;
    margin-left: 20px;
    color: #222;
    font-size: 1rem;
    /* margin-bottom: 30px; */
}

.intro-Right button{
    /* padding: 8px 20px; */
    /* background: linear-gradient(45deg, #1d42d8, #316ff6); */
    /* background: linear-gradient(125deg, #25228d, #372ffc); */
    /* background: linear-gradient(45deg, #714612, #ca9904); */
    color: #fff;
    /* border-radius: 25px; */
    border: 1px solid #316ff6;
    /* border: 1px solid #ca9904; */
    font-size: 1rem;
    /* font-weight: 500; */
    transition: all .3s ease-in-out;
}

.intro-Right button:hover{
    transform: translateX(10px);
    /* border: 1px solid #eac408; */
    border: 1px solid #1e37af;
    background: none;
    color: #25228d;
}
/* hero 1 */


/* hero 2 */
.vision-Left p{
    font-size: 1rem;
    color: #222;
    margin-bottom: 30px;
}

.vision-Left ul li{
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 10px;
}

.vision-Left ul li i{
    font-size: 2rem;
    /* color: #714612; */
    color: #1e37af;
    /* background: #1d42d8;
    background-clip: text; */
}

.vision-Left h4{
    font-size: 1.2rem;
    text-transform: capitalize;
    margin-bottom: 10px;
    border-radius: 50px;
    /* border: 1px solid #98adff; */
    /* padding: 8px 20px; */
    display: inline;
}

.vision-Left .div-list h4{
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.div-list p{
    color: #222;
}
/* hero 2 */




/* section - what we do */
.hero2-whatwedo, .hero1-intro, .ourVision, .hero4-HowWork, .getInvolved{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.hero2-whatwedo-Container, .getInvolved-container{
    width: 100%;
    height: auto;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    max-width: 1400px;
    margin-top: 60px;
    /* background-image: url(./hero2-bg.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; */
}

.hero2-whatwedo-Container h4{
    color: #fff;
    font-size: 1.2rem;
    text-transform: uppercase;
    padding: 8px 20px;
    /* background-color: #1d42d8; */
    /* background: linear-gradient(90deg, #1d42d8, #316ff6); */
    background: linear-gradient(125deg, #25228d, #372ffc);
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
    font-weight: 500;
}

.hero2-whatwedo-Container h2{
    font-size: 3.5rem;
    line-height: 4rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 10px;
    text-align: center;
    max-width: 75%;
}


.hero2-whatwedo-Container p{
    max-width: 900px;
    text-align: center;
    font-size: 1rem;
    margin-bottom: 30px;
}

.whatweCards{
    display: flex;
    align-items: start;
    /* justify-content: space-between; */
    width: 100%;
    padding: 10px 25px;
    gap: 30px 30px;
    height: auto;
}

.whatCard{
    width: 300px;
    height: auto;
    max-height: 350px;
    background-color: #fdfdfd;
    border-radius: 15px;
    border: 1px solid #15151520;
    transition: all .3s ease-in-out;
    box-shadow: 5px 5px 15px #15151510;
    padding: 10px 10px;
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    text-align: left;
}

.whatCard:hover{
    background: #f9f9f9;
box-shadow:  10px 10px 100px #d4d4d4,
             -10px -10px 100px #ffffff;
             transform: translateY(-10px);
             /* transform: rotateY(2deg); */
             /* rotate: -2deg; */
             /* scale: 1.1; */
             /* border: 1px solid #609bfa; */
             border: 1px solid #1d42d8;
}

.whatCard i{
    font-size: 5rem;
    margin-bottom: 6px;
    /* color: #1e37af; */
    color: transparent;
    background: linear-gradient(15deg, #1e37af, #609bfa);
    background-clip: text;
    -webkit-background-clip: text;
    transition: all .3s ease-in-out;
}

.whatCard:hover i{
    /* color: #1d42d8; */
    /* background: linear-gradient(15deg, #ca9904, #eac408); */
    background: linear-gradient(125deg, #25228d, #372ffc);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.whatCard h3{
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 8px;
    color: #111;
    line-height: 2.5rem;
    margin-bottom: 10px;
    transition: all .3s ease-in-out;
}


.whatCard:hover h3{
    /* color: #1e37af; */
    /* color: #ca9904; */
    color: #25228d;
}


.whatCard p{
    text-align: left;
}

/* section - what we do */


/* hero 4 */
.howWork-Container{
    margin-top: 40px;
    width: 100%;
    max-width: 1400px;
    height: auto;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 30px;
}

.HowCard{
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 15px;
    background-color: #fefefe;
    border: 1px solid #15151510;
    width: 45%;
    /* height: 100px; */
    height: auto;
    padding: 20px 15px;
    transition: all .3s ease-in-out;
    /* flex-wrap: wrap; */
    border-radius: 12px;
    box-shadow: 5px 5px 15px #15151510;
}

.HowCard:hover{
    transform: translateY(-5px);
    /* border: 1px solid #ca9904; */
    border: 1px solid #316ff6;
    box-shadow: 10px 10px 60px #15151520;
}

.howCard-Left i{
    font-size: 2rem;
    /* color: #714612; */
    color: #1d42d8;
    /* background: #fbf294; */
    background: #bfceff;
    /* padding: 10px 15px; */
    padding: 10px;
    border-radius: 50%;
    /* margin: 20px; */
}

.howCard-Right h4{
    font-size: 1.2rem;
    margin-top: 5px;
    margin-bottom: 6px;
}

/* hero 4 */

/* hero 5 */
.hero5-Section{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.Hero-5-Container{
    width: 100%;
    height: auto;
    max-width: 1400px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.direct-Left{
    width: 50%;
    height: 100%;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.direct-Right{
    width: 50%;
    height: 100%;
    padding: 8px;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
}

.direct-Right h1{
    font-size: 2.5rem;
    line-height: 3rem;
    margin-bottom: 10px;
}

.direct-Right small{
    font-size: 1rem;
    color: #222;
    margin-bottom: 20px;
}

.direct-Right p{
    font-size: 1rem;
    color: #333;
    max-width: 70%;
}

.direct-Left img{
    width: 400px;
    height: 350px;
    /* width: 80%;
    height: 100%; */
    /* border-radius: 50%; */
    object-fit: cover;
    border-radius: 25px;
    /* border: 2px solid #1d42d8; */
    z-index: 11;
    box-shadow: 5px 5px 60px #1d42d825;
    transition: all .3s ease-in-out;
}

.direct-Left img:hover{
   transform: rotate(3deg);
}

.direct-Right h4{
    font-size: 1.1rem;
    border: 1px solid #1d42d8;
    padding: 10px 25px;
    display: inline;
    border-radius: 50px;
    margin-bottom: 10px;
}
/* hero 5 */


/* board of directos */
.boardDirectors, .AdvisoryBoard{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.boardDirectContainer{
    width: 100%;
    max-width: 1400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}

.BoardofdirectorsCards{
    width: 100%;
    height: auto;
    display: flex;
    margin-top: 20px;
    align-items: start;
    justify-content: center;
    gap: 60px;
}

.boardDirectContainer h1, .ExecutiveBoard h1, .AdvisoryBoard h1{
    font-size: 3.5rem;
    line-height: 4.5rem;
    color: #111;
    text-transform: capitalize;
    font-weight: 650;
    /* text-transform: capitalize; */
}

.directhori{
    width: 350px;
    height: 3px;
    background: linear-gradient(125deg, #1e37af, #1d42d8);
    border-radius: 25px;
    border: none;
    margin-bottom: 30px;
}

.DirectCard{
    width: 30%;
    height: auto;
    padding: 5px;
    overflow: hidden;
    border: 1px solid #1d42d8;
    border-radius: 10px;
}

.DirectCard img{
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 15px;
    transition: all .3s ease-in-out;
}

/* .DirectCard img:hover{
    transform: rotate(2deg);
} */

.DirectCard h3{
    font-size: 1.5rem;
    margin-top: 20px;
    margin-bottom: 5px;
    color: #121212;
}

.DirectCard small{
    /* margin-bottom: 1px; */
    font-size: 1.1rem;
    font-weight: 500;
    color: #1d42d8;
}

.DirectCard p{
    margin-top: 15px;
    font-size: 15px;
    text-align: justify;
    color: #444;
}
/* board of directos */

/* executive board */
.ExecutiveBoard{
    width: 100%;
    display: flex;
    height: auto;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    margin-top: 40px;
}

.ExecutiveBoard h1, .AdvisoryBoard h1{
    margin-top: 50px;
}

.directhori {
    margin-top: 20px;
}

.executiveBoardMembers, .AdvisoryMemCards{
    width: 100%;
    max-width: 1400px;
    height: auto;
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 30px 30px;
    /* margin: 50px 0; */
    margin-bottom: 50px;
}

.MemberCard, .AdvisorCard{
    width: auto;
    min-width: 25%;
    height: auto;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 15px;
    overflow: hidden;
    border: 1px solid #1d42d8;
    border-radius: 15px;
}

.MemberCard h3, .AdvisorCard h3{
    font-size: 1.3rem;
    color: #121212;
    margin-bottom: 10px;
    font-weight: 600;
}

.MemberCard img, .AdvisorCard img{
    width: 100%;
    height: 380px;
    border-radius: 15px;
    object-fit: cover;
    /* object-fit: contain; */
    margin-bottom: 20px;
}

.MemberCard p, .AdvisorCard p{
    color: #333;
    text-align: justify;
}
/* executive board */

/* advisory board */
.AdvisoryBoard{
    overflow: hidden;
  position: relative;
  width: 100%;
}
  
  .AdvisoryMemCards {
    display: flex;
    width: max-content;
    animation: scrollAdvisors 30s linear infinite;
  }
  

  
  /* .AdvisorCard img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 10px;
  } */
  
  
  /* Animation keyframes */
  @keyframes scrollAdvisors {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  
/* advisory board */


@keyframes SlideAdvisor {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-1115px);
    }
  }
  
/* advisory board */



/* responsive code */
@media only screen and (max-width:768px){
    #mainContainer{
        width: 100%;
        height: 100%;
        padding: 10px;
    }

    .AboutSection, .howWork-Container, .boardDirectors, .ExecutiveBoard, #heroContainer, .hero2-whatwedo, #OurVision , .hero5-Section, .AdvisoryBoard{
        width: 100%;
        height: auto;
        padding: 10px;
    }

    .AboutContainer{
        width: 100%;
        height: auto;
        padding: 10px;
        min-height: 500px;
    }

    .AboutContainer h1{
        font-size: 3rem;
        line-height: 3.3rem;
    }

    .aboutcta{
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .aboutcta a{
        width: 100% !important;
        max-width: 80%;
        min-width: auto;
        padding: 10px 20px;
        text-align: center;
    }

    .hero2-whatwedo, .hero1-intro,.hero1Intro-Container, .intro-Left, .intro-Right, .ourVision, .ourVision-Container, .vision-Left, .vision-Right, .hero4-HowWork, .howWork-Container, .getInvolved, .getInvolved-container, .hero5-Section, .Hero-5-Container, .direct-Left, .direct-Right, .boardDirectors, .boardDirectContainer, .BoardofdirectorsCards, .DirectCard, .executiveBoardMembers, .MemberCard{
        width: 100%;
        height: auto;
        min-height: auto;
        max-height: auto;
    }

    .direct-Left img{
        width: 100%;
    }

    .executiveBoardMembers{
        width: 100%;
        flex-wrap: wrap;
    }

    .MemberCard{
        min-width: 100%;
        max-width: 100%;
    }

    .direct-Right h4{
        font-size: 14px;
    }

    .direct-Right h1, .boardDirectContainer h1, .ExecutiveBoard h1, .AdvisoryBoard h1{
        font-size: 2.5rem;
        line-height: 3rem;
    }

    .Hero-5-Container{
        height: auto;
    }

    .icon1{
        top: 400px;
        left: 30px;
        display: none;
    }

    .icon2{
        top: 400px;
        right: 25px;
        display: none;
    }

    .icon3{
        bottom: -30px;
        left: 40px;
        display: none;
    }

    .icon4{
        bottom: -30px;
        right: 30px;
        display: none;
    }

    .direct-Right p{
        width: 100%;
        max-width: 100%;
        text-align: justify;
    }

    .intro-Left{
        display: flex;
        align-items: start;
        justify-content: start;
    }

    .intro-Right h4, .vision-Left h4, .getInvolved-container h4{
        font-size: 1rem;
    }

    .intro-Right h2, .vision-Left h2{
        font-size: 2.5rem;
        line-height: 2.6rem;
    }

    .getInvolved-container{
        width: 100%;
        height: 30vh;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .getInvolved-container h2{
        font-size: 2rem;
        line-height: 2.3rem;
    }

    .howWork-Container{
        gap: 20px;
    }
    .HowCard{
        width: 100%;
        /* max-width: 300px; */
    }

    .intro-Left img, .vision-Right img{
        height: 300px;
        margin-bottom: 20px;
    }

    .hero2-whatwedo-Container h4{
        font-size: 1.1rem;
    }

    .hero2-whatwedo-Container h2{
        font-size: 2rem;
        line-height: 2.5rem;
        text-align: center;
    }

    .whatweCards{
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero1Intro-Container, .ourVision-Container, .howWork-Container, .Hero-5-Container, .BoardofdirectorsCards{
        flex-wrap: wrap;
    }


}
/* responsive code */