/* general styling starts */
/* * {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
} */

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

a{
  text-decoration: none;
  color: inherit;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  min-height: 100%;
  font-family: Aloevera-Regular;
}

@font-face {
  font-family: Aloevera-SemiBold;
  src: url(../font/aloevera-sans-font/Aloevera-SemiBold.otf);
  font-display: swap;
}

@font-face {
  font-family: Aloevera-Regular;
  src: url(../font/aloevera-sans-font/Aloevera-Regular.otf);
  font-display: swap;
}

input[type=submit]{
  cursor: pointer;
}

button{
  cursor: pointer;
  outline: none;
  border: none;
}

.imgp{
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.imgc{
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.fd{
  display: flex;
  flex-direction: column;
}

.cta{
  border-radius: 4px;
  border: 1px solid var(--IECDI-Green, #07C8AF);
  display: flex;
  padding: 16px 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: var(--IECDI-Green, #07C8AF);
  font-family: Aloevera-Regular;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: max-content;
  height: max-content;
  transition: 0.8s;
}

a.cta{
  font-size: 14px;
  color: #1E1E1E;
  border-radius: 10px;
}

section h1{
  color: var(--IECDI-Dark-Grey, #1E1E1E);
  font-family: Aloevera-SemiBold;
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

section p{
  color: var(--IECDI-Grey, #888);
  font-family: Aloevera-Regular;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.flex{
  display: flex;
}
/* general styling ends */

/* animation starts */
@keyframes slide {
  from{
    transform: translateX(0%);
  }

  to{
  transform: translateX(-50%);
  }

  to{
  transform: translateX(-100%);
  }
}
/* animation ends */

/* header starts */
header{
  position: fixed;
  backdrop-filter: blur(10px);
  z-index: 999999999;
  width: 100vw;
  padding-left: 1.5vw;
  padding-right: 3.5vw;
  top: 0;
}

.mobile-header{
  display: none ;
}

header .box{
  width: 95vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #B4B4B4;
}

header .logo{
  width: 107.17px;
  flex-shrink: 0;
}

header .links{
  display: flex;
  gap: 32px;
}

header .links .link{
  color: var(--IECDI-Fade-Grey, #444);
  font-family: Aloevera-Regular;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

header .links .link:hover{
  color: #826BEF;
}

header .links .active{
  color: #826BEF;
}

header .buttons{
  display: flex;
}

header .buttons a{
  color: var(--IECDI-Fade-Grey, #444);
  font-family: Aloevera-Regular;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding: 16px 24px;
}

header .buttons a:hover{
  color: #826BEF;
}

header .buttons .border{
  border-radius: 10px;
  border: 1px solid var(--IECDI-Purple, #826BEF);
}

header .buttons .border:hover{
  color: #fff;
  background: #826BEF;
}
/* header ends */

/* banner starts */
.banner{
  display: flex;
  gap: 9%;
  padding-top: 120px;
  padding-left: 2.5vw;
  padding-right: 5.5vw;
  padding-bottom: 30px;
  background: var(--P-Bg-White, #F7F7F7);
}

.banner .left{
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.banner .left h1{
  color: var(--IECDI-Dark-Grey, #1E1E1E);
  font-family: Aloevera-SemiBold;
  font-size: 64px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.banner .left p{
  color: var(--IECDI-Grey, #888);
  font-family: Aloevera-Regular;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.banner .left .btns{
  display: flex;
  gap: 20px;
}

#menu{
  display: none;
}

.banner .left .btns a{
  color: var(--IECDI-Dark-Grey, #1E1E1E);
  font-family: Aloevera-Regular;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding: 16px 24px;
  border-radius: 10px;
  border: 1px solid var(--IECDI-Green, #07C8AF);
  background: var(--P-Bg-White, #F7F7F7);
}

.banner .left .btns a.cta{
  color: #fff;
  background: var(--IECDI-Purple, #826BEF);
  border: none;
  transition: 0.8s;
}

.banner .left .btns a:hover{
  color: #fff;
  box-shadow: inset 300px 0 0 0 #07C8AF;
}

.banner .left .btns a.cta:hover{
  border: 1px solid #826BEF;
  color: #826BEF;
  box-shadow: inset 300px 0 0 0 #fff;
}

.banner .left .btns a.ini-cta{
  text-align: center;
  border: 1px solid var(--IECDI-Yellow, #FCC433);
  background: var(--P-Bg-White, #F7F7F7);
  width: 70%;
  transition: 0.8s;
  display: none;
}

.banner .left .btns a.ini-cta:hover{
  box-shadow: inset 300px 0 0 0 #FCC433;
  color: #fff;
}

.banner .right{
  width: 40%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.banner .right .top{
  display: flex;
  gap: 20px;
}

.banner .right .top img{
  width: 18.89vw;
  max-width: 272px;
}

.banner .right .down{
  display: flex;
  position: relative;
}

.banner .right .down img{
  width: 39vw;
  max-width: 560px;
}

.banner .right .down img.union{
  position: absolute;
  left: 0;
  top: 0;
  width: 18.89vw;
  max-width: 272px;
}

.banner .other-right{
  display: flex;
  gap: 31px;
}

.banner .other-right img{
  width: 220px;
  height: 200px;
  border-radius: 20px;
}

.banner .other-right .left{
  margin-top: 70px;
  gap: 20px;
}

.banner .other-right{
  gap: 20px;
}
/* banner ends */

/* about starts */
.about-us{
  background: var(--IECDI-F-Green, #DFF2F0);
}

.about-us .box{
  display: flex;
  padding: 7vw 4.9vw;
  padding-bottom: 200px;
  gap: 8%;
}

.about-us .box .left{
  width: 45%;
  height: max-content;
  position: relative;
}

.about-us .box .left img{
  width: 39.9vw;
  border-radius: 10px;
}

.about-us .box .left .union{
  position: absolute;
  bottom: -2vw;
  right: -2vw;
  width: 20.8vw;
}

.about-us .box .right{
  width: 47%;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.about-us .box .right .items{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.about-us .box .right .items span{
  display: flex;
  gap: 7px;
  color: var(--IECDI-Grey, #888);
  font-family: Aloevera-Regular;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.about-us .box .right .items span i{
  font-size: 20px;
  color: #07C8AF;
}

.about-us .box .right a.cta{
  border: 1px solid var(--IECDI-Green, #07C8AF);
}
/* about ends */

/* focus starts */
.focus{
  position: relative;
  min-height: 550px;
}

.focus .box{
  position: absolute;
  width: 87vw;
  top: -100px;
  left: 6.5vw;
  display: flex;
  padding: 3.6vw;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 20px;
  background: var(--P-Bg-White, #F7F7F7);
  box-shadow: 0px 4px 4px 0px rgba(22, 22, 22, 0.20);
  justify-content: space-between;
}

.focus .box .left{
  width: 53%;
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: max-content;
}

.focus .box .left p.cta{
  color: #E92169;
  border: 1px solid #E92169;
}

.focus .box .left a.cta{
  margin-top: 6vw;
  border: 1px solid var(--IECDI-Pink, #E92169);
  background: var(--P-Bg-White, #F7F7F7);
}

.focus .box .right{
  width: 44%;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.focus .box .right .item{
  display: flex;
  width: 16vw;
  padding: 16px 8px;
  gap: 1.1vw;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 10px;
}

.focus .box .right .item h3{
  color: var(--IECDI-Dark-Grey, #1E1E1E);
  font-family: Aloevera-Regular;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.focus .box .right .item p{
  color: var(--IECDI-Grey, #888);
  font-family: Aloevera-Regular;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.focus .box .right .item i{
  margin-bottom: 1.4vw;
}

.focus .box .right .item{
  background: rgba(130, 107, 239, 0.10);
  color: #826BEF;
}

.focus .box .right .item:nth-child(2){
  background: rgba(233, 33, 105, 0.10);
  color: #E92169;
}

.focus .box .right .item:nth-child(3){
  background: rgba(252, 196, 51, 0.10);
  color: #FCC433;
}

.focus .box .right .item:nth-child(4){
  background: var(--IECDI-F-Green, #DFF2F0);
  color: #07C8AF;
}

/* focus ends */

/* initiatives starts */
.our-initiatives{
  background-attachment: fixed;
}

.overlay{
  background-color: rgba(53, 24, 92, 0.80);
}

.our-initiatives .overlay{
  padding: 74px 40px;
}

.our-initiatives p.cta{
  color: #F7F7F7;
  border: 1px solid #F7F7F7;
}

.our-initiatives .texts{
  display: flex;
  justify-content: space-between;
}

.our-initiatives .texts .cont{
  width: 70vw;
  gap: 16px;
}

.our-initiatives .texts h1{
  color: #F7F7F7 ;
}

.our-initiatives .texts p{
  color: #F7F7F7 ;
}

.our-initiatives a.cta{
  color: #F7F7F7 ;
  border: 1px solid #826BEF;
  margin-top: auto;
}

.our-initiatives .initiatives-items{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 72px;
  justify-content: center;
}

.our-initiatives .initiatives-items:nth-child(2){
  display: none;
}

.our-initiatives .initiatives-items .item{
  display: flex;
  height: 100%;
  width: 21.5vw;
  padding: 8px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1 0 0;
  border-radius: 10px;
  background: var(--P-Bg-White, #F7F7F7);
}

.our-initiatives .initiatives-items .item img{
  width: 20.2vw;
}

.our-initiatives .initiatives-items .item .text{
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.our-initiatives .initiatives-items .item .text h3{
  color: var(--IECDI-Dark-Grey, #1E1E1E);
  font-family: Aloevera-Regular;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.our-initiatives .initiatives-items .item .text p{
  color: var(--IECDI-Grey, #888);
  font-family: Aloevera-Regular;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
/* initiatives ends */
/* partners starts */
.our-partners{
  display: flex;
  padding: 57px 43px 56px 40px;
  background: var(--IECDI-F-Green, #DFF2F0);
  flex-direction: column;
  gap: 30px;
}

.our-partners .texts{
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.our-partners .texts .cont{
  width: 52vw;
  gap: 24px;
}

.our-partners a.cta{
  margin-top: auto;
}

.our-partners a.cta:hover{
  color: #fff;
  background: #07C8AF;
}

.our-partners .flex{
  width:100%;
  overflow: hidden;
}

.our-partners .slide{
  width: max-content;
  display: flex;
}

.our-partners .partners{
  display: flex;
  gap: 64px;
  overflow: hidden;
  animation: 35s slide infinite linear;
  margin-right: 64px;
}

.our-partners:hover .partners{
  animation-play-state: paused;
}

.our-partners .partners img{
  width: 100px;
}
/* partners ends */

/* involved starts */
.involved{
  display: flex;
  justify-content: space-between;
  padding: 87.701px 9vw 87.299px 9vw;
}

.involved .left{
  width: max-content;
}

.involved .left img{
  width: 40vw
}

.involved .right{
  gap: 24px;
  width: 37%;
  justify-content: center;
}

.involved .right .btns{
  display: flex;
  gap: 24px;
  margin-top: 30px;
}

.involved .right .btns a.cta{
  border: 1px solid var(--IECDI-Green, #E92169);
  background: var(--P-Bg-White, #F7F7F7);
}

.involved .right .btns a.cta.fill{
  background: #E92169;
  border: none;
  color: #fff;
  transition: 0.5s;
}

.involved .right .btns a.cta.fill:hover{
  color: #E92169;
  border: 1px solid #E92169;
  box-shadow: inset 300px 0 0 0 #fff;
}

/* involved ends */

/* impact starts */
.impact{
  display: flex;
  justify-content: space-between;
  padding: 38.701px 40px 38.299px 40px;
  gap: 10%;
  background: var(--P-Bg-White, #F7F7F7);
}

.impact .left{
  width: 100%;
  gap: 24px;
}

.impact .left p.cta{
  color: #E92169;
  border: 1px solid #E92169;
}

.impact .left .cntrl{
  display: flex;
  gap: 58px;
}

.impact .left .cntrl button{
  display: flex;
  padding: 6px 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  border: 1px solid var(--IECDI-Fade-Grey, #444);
  font-size: 16px;
  color: #444444;
  background: #fff;
  height: max-content;
}

.impact .left .cntrl button.active{
  border: 1px solid var(--IECDI-Fade-Grey, #E92169);
  background: #E92169;
  color: #fff;
}

.impact .right{
  width: ;
  overflow: hidden;
}

.impact .testimonials{
  display: flex;
  gap: 24px;
  width: max-content;
  transition: 0.5s;
}

.impact .testimonials .box{
  display: flex;
  width: 429px;
  min-height: 330px;
  padding: 32px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 64px;
  flex-shrink: 0;
  border-radius: 20px;
  border: 1px solid var(--IECDI-Low-Grey, #B4B4B4);
  background: var(--P-Bg-White, #F7F7F7);
  gap: 64px;
}

.impact audio{
  margin-top: 20px;
}

.impact .testimonials .box .top{
  display: flex;
  gap: 16px;
}

.impact .testimonials .box .top img{
  border-radius: 50%;
  width: 60px;
  height: 60px;
}

.impact .testimonials .box .text{
  gap: 12px;
}

.impact .testimonials .box{

}
/* impact ends */

/* newsletter starts */
.newsletter{
  display: flex;
  padding: 28.701px 9vw 28.299px 9vw;
  justify-content: center;
  align-items: center;
  gap: 64px;
  background: #E7E7E7;
}

.newsletter .left{
  gap: 24px;
}

.newsletter .left .inputs{
  margin-top: 32px;
  display: flex;
  gap:10px;

}

.newsletter .left .inputs input{
  border-radius: 10px;
  border: 1px solid var(--IECDI-Grey, #888);
  background: var(--P-Bg-White, #F7F7F7);
  width: 30.3vw;
  padding: 16px;
}

.newsletter .left .inputs .button{
  border-radius: 10px;
  background: var(--IECDI-Pink, #E92169);
  padding: 16px 24px;
  color: var(--IECDI-White, var(--P-Bg-White, #F7F7F7));
  font-family: Aloevera-Regular;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.newsletter .img img{
  width: 21.32vw;
}
/* newsletter ends */

/* footer starts */
footer{

}

footer .overlay{
  display: flex;
  flex-direction: column;
  padding: 69.701px 40px 65.299px 40px;
}

footer .overlay .top{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

footer .overlay .top .left{
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 5px;
}

footer .overlay .top  .logo{
  width: 107.17px;
  flex-shrink: 0;
  margin-bottom: 64px;
}

footer .overlay .top p{
  color: var(--IECDI-White, var(--P-Bg-White, #F7F7F7));
  font-family: Aloevera-Regular;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

footer .overlay .top a{
  color: var(--IECDI-White, var(--P-Bg-White, #F7F7F7));
  font-family: Aloevera-Regular;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

footer .overlay .top .right{
 width: 100%;
 display: flex;
 justify-content: space-between;
}

footer .overlay .top .right .txt{
  width: 340px;
  gap: 5px;
}

footer .overlay .links{
  display: flex;
  gap: 32px;
  justify-content: flex-end;
}

footer .overlay .links .link{
  color: var(--IECDI-White, var(--P-Bg-White, #F7F7F7));
  font-family: Aloevera-Regular;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

footer .overlay .socials{
  color: #fff;
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

footer .overlay .down{
  margin-top: 64px;;
  border-top: 1px solid #F7F7F7;
  display: flex;
  justify-content: space-between;
  padding-top: 5px;
}

footer .overlay .down p{
  color: var(--IECDI-White, var(--P-Bg-White, #F7F7F7));
  font-family: Aloevera-Regular;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

footer .overlay .down a{
  font-weight: 600;
}
/* footer ends */

/* other banner starts */
.other-banner{
  display: flex;
  flex-direction: column;
  padding: 40px 40px 86px 40px;
  padding-top: 150px;
  padding-bottom: 30px;
  background: var(--IECDI-F-Green, #DFF2F0);
  justify-content: center;
  align-items: center;
  gap: 96px;
}

.other-banner .texts{
  gap: 16px;
  width: 70vw;
  align-items: center;
}

.other-banner .texts h1{
  color: var(--IECDI-Dark-Grey, #1E1E1E);
  text-align: center;
  font-family: Aloevera-SemiBold;
  font-size: 64px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.other-banner .texts p{
  width: 62vw;
  color: var(--IECDI-Grey, #888);
  text-align: center;
  font-family: Aloevera-Regular;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.other-banner .images{
  overflow: hidden;
  width: 100%;
}

.other-banner .images .flex{
  width: max-content;
  gap: 20px;
}

.other-banner .images .scroll{
  display: flex;
  gap: 20px;
  width: max-content;
  animation: linear slide 20s infinite;
  /* margin-right: 20px; */
}

.other-banner .images img{
  width: 41.6vw;
  border-radius: 20px;
}

.other-banner .images .big-img{
  width: 100%;
  height: 36vw;
  border-radius: 20px;
}
/* other banner ends */

/* overview starts */
.overview{
  display: flex;
  flex-direction: column;
  padding: 87px 10vw 86px 10vw;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  gap: 42px;
}

.overview .top{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.overview .top b{
  color: var(--IECDI-Dark-Grey, #1E1E1E);
  font-family: Aloevera-Regular;
  font-size: 23px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 100%;
}

.overview .top .cont{
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.overview .top .btns{
  display: flex;
  gap: 24px;
}

.overview a.cta{
  border: 1px solid #07C8AF;
}

.overview a.cta.fill{
  border: 1px solid #826BEF;
  background: #826BEF;
  color: #fff;
  transition: 0.5s;
}

.overview a.cta.fill:hover{
  box-shadow: inset 300px 0 0 0 #fff;
  color: #826BEF;
}

.overview .down{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 4%;
}

.overview .down p{
  color: var(--IECDI-Grey, #888);
  font-family: Aloevera-Regular;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 48%;
}


/* overview ends */

/* vision starts */
.vision{
  display: flex;
  padding: 53px 9vw 52px 9vw;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  background: var(--IECDI-F-Green, #DFF2F0);
  gap: 5%;
}

.vision .left{
  width: 45%;
  gap: 16px;
}

.vision .left .statement{
  margin-top: 25px;
  gap: 32px;
}

.vision .left .statement .item{
  display: flex;
  padding: 8px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  border-radius: 10px;
  background: var(--IECDI-Green, #07C8AF);
}

.vision .left .statement .item i{
  font-size: 24px;
  color: #fff;
}

.vision .left .statement .item h3{
  color: var(--IECDI-White, var(--P-Bg-White, #F7F7F7));
  font-family: Aloevera-SemiBold;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.vision .left .statement .item p{
  color: var(--IECDI-White, var(--P-Bg-White, #F7F7F7));
  font-family: Aloevera-Regular;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.vision .left h2{
  color: var(--IECDI-Dark-Grey, #1E1E1E);
  font-family: Aloevera-SemiBold;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-top: 30px;
}

.vision .left .vis-items{
  display: flex;
  gap: 10px;
}

.vision .left .vis-items span{
  color: var(--IECDI-Grey, #888);
  font-family: Aloevera-Regular;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  display: flex;
  gap: 3px;
}

.vision .left .vis-items i{
  color: #07C8AF;
}

.vision .right{
  position: relative;

}

.vision .right img{
  border-radius: 20px;
  width: 29.9vw;
  margin-left: 30px;
  border-radius: 20px;
}

.vision .right .top{
  position: absolute;
  left: -20px;
  top: -50px;
  z-index: 999;
  width: 20.21vw;
  height: 12.3vw;
  border-radius: 20px;
}

.vision .right .down{
  position: absolute;
  right: -40px;
  bottom: -50px;
  z-index: 999;
  width: 14.7vw;
  height: 14.7vw;
  border-radius: 20px;
}
/* vision ends */

/* init page styling starts */
.main.init .other-banner{
  background: var(--IECDI-F-Yellow, #F7F2E3);
}

/* ongoing starts */
.ongoing{
  display: flex;
  flex-direction: column;
  padding: 63px 131px;
  justify-content: center;
  align-items: center;
  gap: 40px;
  background: var(--P-Bg-White, #F7F7F7);
}

.ongoing .top{
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.ongoing .top .fd{
  width: 42vw;
}

.ongoing .top a.cta{
  width: 25vw;
  border-radius: 10px;
  border: 1px solid var(--IECDI-Yellow, #FCC433);
  background: var(--P-Bg-White, #F7F7F7);
  margin-top: auto;
}

.ongoing .down{
  display: flex;
  gap: 56px;
}

.ongoing .down .box{
  gap: 16px;
}

.ongoing .down .box img{
  width: 39vw;
  border-radius: 20px;
}

.ongoing .down .box h3{
  color: var(--IECDI-Dark-Grey, #1E1E1E);
  font-family: Aloevera-SemiBold;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  width: 30vw;
}

.ongoing .down .box p{
  color: var(--IECDI-Grey, #888);
  font-family: Aloevera-Regular;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
/* ongoing ends */

/* key initiatives starts */
.key-initiatives{
  display: flex;
  padding: 92.5px 9vw 91.5px 9vw;
  flex-direction: column;
  background: var(--IECDI-F-Yellow, #F7F2E3);
}

.key-initiatives .texts{
  width: 42vw;
  gap: 16px;
}

.key-main{
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.key-main .item{
  display: flex;
  gap: 40px;
}

.key-main .item:nth-child(even) .text{
  order: 1;
}

.key-main .item:nth-child(even) .img{
  order: 2;
}

.key-main .item .img{
  width: 40vw;
  height: 21vw;
  border-radius: 20px;
}

.key-main .item .text{
  gap: 30px;
  width: 37.4vw;
}

.key-main .item .text h3{
  color: var(--IECDI-Dark-Grey, #1E1E1E);
  font-family: Aloevera-SemiBold;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  width: 313pxs;
}

.key-main .item .text p{
  color: var(--IECDI-Grey, #888);
  font-family: Aloevera-Regular;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.key-main .item .text a{
  border-radius: 10px;
  background: var(--IECDI-Yellow, #FCC433);
  border: 1px solid var(--IECDI-Yellow, #FCC433);
  padding: 16px 24px;
  gap: 10px;
  color: var(--IECDI-White, var(--P-Bg-White, #F7F7F7));
  font-family: Aloevera-Regular;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: max-content;
  transition: 0.5s;
}

.key-main .item .text a:hover{
  box-shadow: inset 300px 0 0 0 #fff;
  color: #FCC433;
}

/* key initiatives ends */

/* init page styling ends */

/* news page styling starts */
.main.news .other-banner{
  align-items: start;
  justify-content: start;
  background: var(--IECDI-F-Pink, #F9EEF2);
}

.main.news .other-banner .texts *{
  text-align: left;
  width: 600px;
}

.main.news .other-banner .texts{
  align-items: flex-start;
  justify-content: flex-start;
}

.main.news .other-banner .ongoing .down{
  gap: 20px;
}

.main.news .other-banner .ongoing .down .flex{
  justify-content: space-between;
}

.main.news .span{
  color: var(--IECDI-Fade-Grey, #444);
  font-family: Aloevera-Regular;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid var(--IECDI-Fade-Grey, #444);
  height: max-content;
}

.main.news .other-banner .ongoing .box{
  width: 46.4vw;
}

.main.news .other-banner .ongoing .box img{
  width: 46vw;
}

/* updates starts */
.updates{
  display: flex;
  padding: 22px 42px 21px 42px;
  flex-direction: column;
  gap: 54px;
  width: 100%;
}

.updates .texts{
  width: 52vw;
}

.blogs{
  display: flex;
  gap: 1.9vw;
  flex-wrap: wrap;
}

.blogs .blog{
  width: 29vw;
  gap: 15px;
}

.blogs .blog img{
  width: 100%;
}

.blogs .blog .span{
  font-size: 10px;
  padding: 6px 4px;
  width: 134px;
  border-radius: 4px;
  border: 1px solid var(--IECDI-Fade-Grey, #444);
  height: max-content;
  margin-top: auto;
  text-align: center;
}

.blogs .blog .flex{
  justify-content: space-between;
  gap: 10px;
}

.blogs .blog h3{
  color: var(--IECDI-Dark-Grey, #1E1E1E);
  font-family: Aloevera-SemiBold;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.blogs .blog p{
  color: var(--IECDI-Grey, #888);
  font-family: Aloevera-Regular;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
/* updates ends */

/* news page styling ends */

/* contact page styling starts */
.main.contact .other-banner{
  display: flex;
  background: var(--P-Bg-White, #F7F7F7);
}
/* contact/volunteer starts */
.contact-volunteer{
  display: flex;
  flex-direction: column;
  width: 100%;
}

.contact-volunteer .header{
  display: flex;
  gap: 2%;
}

.contact-volunteer .header button{
  border-radius: 10px;
  border: 1px solid var(--IECDI-Low-Grey, #B4B4B4);
  background: var(--P-Bg-White, #F7F7F7);
  padding: 16px;
  width: 49%;
  color: var(--IECDI-Dark-Grey, #1E1E1E);
  font-family: Aloevera-Regular;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.contact-volunteer .header .active{
  background: var(--IECDI-Purple, #826BEF);
  color: #F7F7F7
}

.contact-volunteer .tabcontent{
  display: flex;
  gap: 4%;
  width: 100%;
  margin-top: 40px;
}

.contact-volunteer .tabcontent .form{
  width: 48%;
  gap: 16px;
}

.contact-volunteer .tabcontent .form .text{
  gap: 16px;
}

.contact-volunteer .tabcontent .form .text h3{
  color: var(--IECDI-Dark-Grey, #1E1E1E);
  font-family: Aloevera-SemiBold;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.contact-volunteer .tabcontent .form .text p{
  color: var(--IECDI-Grey, #888);
  font-family: Aloevera-Regular;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.contact-volunteer .tabcontent .form .two-input{
  display: flex;
  gap: 24px;
  width: 100%;
}

.contact-volunteer .tabcontent .form .input{
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.contact-volunteer .tabcontent .form .input p{
  color: var(--IECDI-Dark-Grey, #1E1E1E);
  font-family: Aloevera-SemiBold;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.contact-volunteer .tabcontent .form .input input{
  padding: 16px;
  border-radius: 10px;
  border: 1px solid var(--IECDI-Low-Grey, #B4B4B4);
  background: var(--P-Bg-White, #F7F7F7);
  color: var(--IECDI-Low-Grey, #B4B4B4);
  font-family: Aloevera-Regular;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.contact-volunteer .input .amount{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.contact-volunteer .input .amount input{
  color: var(--IECDI-Fade-Grey, #444);
  font-family: Aloevera-Regular;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.contact-volunteer .input .btn{
  color: var(--IECDI-Fade-Grey, #444);
  font-family: Aloevera-Regular;
  font-size: 12px 20px;;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid var(--IECDI-Low-Grey, #B4B4B4);
  background: var(--P-Bg-White, #F7F7F7);
}

.contact-volunteer .input .active{
  background: var(--IECDI-Purple, #826BEF);
  color: #fff;
}


.contact-volunteer .tabcontent .form .input select{
  padding: 16px;
  border-radius: 10px;
  border: 1px solid var(--IECDI-Low-Grey, #B4B4B4);
  background: var(--P-Bg-White, #F7F7F7);
  color: var(--IECDI-Low-Grey, #B4B4B4);
  font-family: Aloevera-Regular;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.contact-volunteer .tabcontent .form .input textarea{
  display: flex;
  height: 198px;
  padding: 16px;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  border-radius: 10px;
  border: 1px solid var(--IECDI-Low-Grey, #B4B4B4);
  background: var(--P-Bg-White, #F7F7F7);
  color: var(--IECDI-Low-Grey, #B4B4B4);
  font-family: Aloevera-Regular;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.contact-volunteer .tabcontent .form .submit{
  border-radius: 10px;
  background: var(--IECDI-Purple, #826BEF);
  padding: 16px 24px;
  color: var(--IECDI-White, var(--P-Bg-White, #F7F7F7));
  font-family: Aloevera-Regular;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 8px;
}

.contact-volunteer .tabcontent .information{
  width: 48%;
  gap:16px
}

.contact-volunteer .tabcontent .information .info{
  gap: 8px;
}

.contact-volunteer .tabcontent .information .info h3{
  color: var(--IECDI-Dark-Grey, #1E1E1E);
  font-family: Aloevera-SemiBold;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.contact-volunteer .tabcontent .information .info p{
  color: var(--IECDI-Grey, #888);
  font-family: Aloevera-Regular;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.contact-volunteer .tabcontent .information .volun {
  height: 100%;
  display: flex;
  padding: 47px 30px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 20px;
}

.contact-volunteer .tabcontent .information .volun .texts{
  display: flex;
  width: 100%;
  min-height: 260px;
  padding: 16px 24px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 10px;
  background: var(--P-Bg-White, #F7F7F7);
  gap: 10px;
  margin-top: auto;
}

.contact-volunteer .tabcontent .information .volun img{
  width: 108px;
}

.contact-volunteer .tabcontent .information .volun p{
  color: var(--IECDI-Fade-Grey, #444);
  font-family: Aloevera-Regular;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 100%;
}
/* contact/volunteer ends */

/* partner-with /donate starts */
.partner-with{
  background: var(--P-Bg-White, #F7F7F7);
}

.partner-with .contact-volunteer .tabcontent .form .text{
  margin-bottom: 30px;
}

.partner-with .contact-volunteer .tabcontent .form .submit{
  margin-top: 30px;
}

.donate{

}

.contact-volunteer .tabcontent .donate .input textarea{
  height: 89px;
}

/* partner-with /donate ends */

/* contact page styling ends */

/* read-blog starts */
.read-blog{
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 150px 90px 50px 90px;
  background: var(--P-Bg-White, #F7F7F7);
}

.read-blog img{

}

.read-blog .body{
  gap: 3%;
  width: 100%;
}

.read-blog .body h2{
  color: var(--IECDI-Dark-Grey, #1E1E1E);
  font-family: Aloevera-SemiBold;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.read-blog .body .top{
  justify-content: space-between;
  width: 100%;
}

.read-blog .body .top p{
  color: var(--IECDI-Grey, #888);
  font-family: Aloevera-Regular;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 52vw;
}

.read-blog .body .top .span{
  color: var(--IECDI-Fade-Grey, #444);
  font-family: Aloevera-Regular;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  border-radius: 4px;
  border: 1px solid var(--IECDI-Fade-Grey, #444);
  padding: 6px 8px;
  margin-top: auto;
  height: max-content;
}

.read-blog .body .down{
  display: flex;
  gap: 40px;
  margin-top: 40px;
}

.read-blog .body .left {
  gap: 40px;
  width: 62%;
  color: var(--IECDI-Grey, #888);
  font-family: Aloevera-Regular;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.read-blog .body .left p{
  color: var(--IECDI-Grey, #888);
  font-family: Aloevera-Regular;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.read-blog .body .right {
  gap: 32px;
  width: 38%;
}

.read-blog .body .right h3{
  color: var(--IECDI-Dark-Grey, #1E1E1E);
  font-family: Aloevera-SemiBold;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.read-blog .body .right .images{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.read-blog .body .right .img{
    width: 9.3vw;
    height: 10.4vw;
    border-radius: 15px;
}

/* recent-blogs starts */
.recent-blogs{
  padding: 0 50px;
  gap: 56px;
  background: var(--P-Bg-White, #F7F7F7);
  padding-bottom: 40px;
}

.recent-blogs .texts{
  gap: 10px;
}

.recent-blogs .texts h3{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 56px;
  align-self: stretch;
}

.recent-blogs .texts p{
  color: var(--IECDI-Grey, #888);
  font-family: Aloevera-Regular;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.recent-blogs .blogs{

}

.pagination{
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.pagination button{
  color: var(--IECDI-Fade-Grey, #444);
  font-family: Aloevera-Regular;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  display: flex;
  width: 97.468px;
  padding: 10px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  border: 1px solid var(--IECDI-Fade-Grey, #444);
  background: #fff;
}

.pagination .num{
  color: var(--IECDI-Fade-Grey, #444);
  font-family: Aloevera-Regular;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  display: flex;
  gap: 5px;
}

.pagination a{
  height: 20px;
  display: flex;
  align-items: center;
}

.pagination .active{
  border-radius: 50%;
  height: 20px;
  width: 20px;
  color: #fff;
  background: var(--IECDI-Fade-Grey, #444);
  text-align: center;
  display: flex;
  justify-content: center;
}
/* recent-blogs ends */

/* read-blog ends */

/* read-initiatives starts */
.text-area{
  display: flex;
  padding: 56px 131px 55px 131px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  background: var(--IECDI-F-Purple, #EBE9F6);
}

.text-area h2{
  color: var(--IECDI-Grey, #888);
  text-align: center;
  font-family: Aloevera-Regular;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.text-area h2 p{
  text-align: left;
  font-size: inherit;
}

.text-area h2 ul{
  text-align: left;
}
/* purpose starts */
.purpose{
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 60px 40px;
  justify-content: center;
  align-items: center;
  background: var(--P-Bg-White, #F7F7F7);
}

.purpose .items{
  display: flex;
  flex-wrap: wrap;
  gap: 2vw;
  justify-content: center;
}

.purpose .items .item{
  width: 45%;
  display: flex;
  padding: 16px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  align-self: stretch;
  border-radius: 20px;
  border: 1px solid var(--IECDI-Low-Grey, #B4B4B4);
  background: var(--P-Bg-White, #F7F7F7);
}

.purpose .items .item i{
  color: #07C8AF;
  font-size: 16px;
}

.purpose .items .item h3{
  color: var(--IECDI-Dark-Grey, #1E1E1E);
  font-family: Aloevera-SemiBold;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.purpose .items .item p{
  color: var(--IECDI-Grey, #888);
  font-family: Aloevera-Regular;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
/* purpose ends */

/* gallery starts */
.gallery{
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 51.701px 40px 51.299px 40px;
  justify-content: center;
  align-items: center;
}

.gallery-images{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  column-gap: 10px;
  align-items: center;
  justify-content: center;
}

.gallery-images .img{
  width: 331px;
  height: 235px;
  border-radius: 10px;
}

.gallery{

}
/* gallery ends */

/* statistics starts */
.statistics{
  gap: 20px;
  display: flex;
  background: var(--IECDI-F-Purple, #EBE9F6);
  padding: 44px 155px 43px 155px;
  justify-content: center;
  align-items: center;
}

.statistics .flex{
  gap: 32px;
}

.statistics .stats{
  width: 25vw;
  gap: 30px;
  justify-content: center;
  align-items: center;
}

.statistics .stats h2{
  color: var(--IECDI-Dark-Grey, #1E1E1E);
  font-family: Aloevera-SemiBold;
  font-size: 64px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.statistics .stats p{
  color: var(--IECDI-Grey, #888);
  text-align: center;
  font-family: Aloevera-Regular;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.statistics .btns{
  display: flex;
  gap: 20px;
}

.statistics .btns a.cta{
  border: 1px solid #FCC433;
}

.statistics .btns a.cta.fill{
  background: var(--IECDI-Pink, #E92169);
  border: 1px solid #E92169;
  color: #fff;
  transition: 0.5s;
}

.statistics .btns a.cta.fill:hover{
  box-shadow: inset 300px 0 0 0 #fff;
  color: #E92169;
}

.statistics{

}
/* statistics ends */

/* read-initiatives ends */

/* calendar-box starts */
.calendar-box{
  display: flex;
  gap: 52px;
  margin: 0 auto;
}

.calendar-box #calendar{
  width: 48%;
}

.calendar-box .events{
  width: 48%;
  gap: 16px;
}

.calendar-box .events h3{
  color: var(--IECDI-Dark-Grey, #1E1E1E);
  font-family: Aloevera-SemiBold;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.calendar-box .events-items{
  gap: 16px;
}

.calendar-box .events-items .item{
  display: flex;
  padding: 8px 24px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: 10px;
  border: 1px solid var(--IECDI-Low-Grey, #B4B4B4);
  background: var(--P-Bg-White, #F7F7F7);
}

.calendar-box .events-items .item .header{
  display: flex;
  flex-direction: column;
  border-right: 1px solid #B4B4B4;
  padding-right: 5px;
  height: 100%;
  justify-content: space-between;
}

.calendar-box .events-items .item .header h3{
  color: var(--IECDI-Dark-Grey, #1E1E1E);
  font-family: Aloevera-SemiBold;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.calendar-box .events-items .item .header h4{
  color: var(--IECDI-Grey, #888);
  font-family: Aloevera-Regular;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.calendar-box .events-items .item .header p{
  color: var(--IECDI-Purple, #826BEF);
  font-family: Aloevera-Regular;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.calendar-box .events-items .item .text{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.calendar-box .events-items .item .text h3{
  color: var(--IECDI-Dark-Grey, #1E1E1E);
  font-family: Aloevera-SemiBold;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.calendar-box .events-items .item .text p{
  color: var(--IECDI-Grey, #888);
  font-family: Aloevera-Regular;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* calendar styling starts */
.fc-today-button{
  display: none !important;
}

.fc-theme-standard td, .fc-theme-standard th{
  border: none;
}

.fc .fc-scrollgrid-liquid{
  border-radius: 10px;
  border: 1px solid var(--IECDI-Low-Grey, #B4B4B4);
  padding: 16px;
}

.fc .fc-daygrid-day-top{
  justify-content: center;
}

.fc-button-group{
  display: flex;
  gap: 20px;
}

.fc-direction-ltr .fc-button-group > .fc-button:not(:last-child){
  border-radius: 4px;
  border: 1px solid var(--IECDI-Low-Grey, #B4B4B4);
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #B4B4B4;
}

.fc-direction-ltr .fc-button-group > .fc-button:not(:first-child){
  border: none;
  border-radius: 4px;
  background: var(--IECDI-Purple, #826BEF);
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc .fc-daygrid-day-frame {
  display: flex;
  flex-direction: column;

}

.fc .fc-daygrid-day.fc-day-today{
  display: flex;
  flex-direction: column;
  background: #826BEF;
  color: #fff;
  border-radius: 5px;
}

.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events{
  display: none;
}

.fc .fc-daygrid-day-top{
  order: 1;
  padding: 20px;
}

.fc-day-sat{
  color: #826BEF;
}

.fc-day-sun{
  color: #826BEF;
}
/* calendar styling ends */

/* calendar-box ends */

/* gallery popup starts */

#gallery-image-popup{
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  z-index: 99999999999999999;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
}

#gallery-image-popup .controls{
  display: flex;
  width: 100%;
  padding: 20px;
  top: 39%;
  justify-content: space-between;
  font-size: 30px;
  color: #fff;
  position: absolute;
}

#gallery-image-popup .fa-x{
  position: absolute;
  top: 20px;
  right: 40px;
  color: red;
  cursor: pointer;
  font-size: 25px;
}

.slider_container .img{
  height: 400px;
  width: 600px;
  border-radius: 20px;
}
.read-blog .body .slider_container .img{
  height: 400px;
  width: 600px;
  border-radius: 20px;
}

.mck_slider{
  display: none;
}

.fade{
  animation: fade 1.5s;
}

@keyframes fade {
  from {
	opacity: .4
	}

  to {
	opacity: 1
      }
}

/* gallery popup ends */

/* team starts */
.team-box{
  display: flex;
  flex-direction: column;
  padding: 6vw 10vw;
  background: var(--IECDI-F-Yellow, #F7F2E3);
}

.team-box .category-items{
  display: flex;
  flex-wrap: wrap;
  gap: 2vw;
}

.team-box .team{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 80px;
}

.team-box .category-wrapper .category-header{
  margin-bottom: 10px;
  position: relative;
  display: flex;
}

.team-box .category-wrapper .category-header p{
  color: var(--IECDI-Grey, #888);
  font-family: Aloevera-Regular;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  background: #F7F2E3;
  padding-right: 5px;
  position: relative;
  z-index: 99999;
}

.team-box .category-wrapper .category-header hr{
  width: 100%;
  /* content: ''; */
  height: 1px;
  background: #B4B4B4;
  position: absolute;
  bottom: 9px;
  right: 0;
  display: flex;
}

.team-box .team .item{
  width: 25vw;
}

.team-box .team .item img{
  width: 100%;
}

.team-box .team .item .text{
  display: flex;
  flex-direction: column;
  padding: 4px 8px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  background: var(--IECDI-Purple, #826BEF);
}

.team-box .team .item .text h3{
  color: var(--IECDI-White, #F7F7F7);
  font-family: Aloevera-Bold;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.team-box .team .item .text p{
  color: var(--IECDI-White, #F7F7F7);
  font-family: Aloevera-Regular;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* team ends */