.About-Ywbo {
    padding: 0 !important;
}

.about,
.vesion,
.values,
.message {
    /* padding: 5% 3rem; */
    padding-left:  3rem;
    padding-right: 3rem;
    margin-top: 1.5%;
    margin-bottom: 1.5%;
}

.block-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 32px;
    transition: 250ms;
    perspective: 500px;
}

.block-container .btn-back {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: inherit;
    height: inherit;
    border-radius: 32px;
    transition: 250ms;
    transform-style: preserve-3d;
    transform-origin: bottom right;
    transform: rotateZ(15deg);
    will-change: transform;
    box-shadow: 16px 0 40px #e4e4e4;
}

.block-container .btn-back-1 {
    background: linear-gradient(135deg, #4682eb -20%, #01beff 120%);
}

.block-container .btn-back-2 {
    background: linear-gradient(135deg, #5c46eb -20%, #013fff 120%);
}

.block-container .btn-back-3 {
    background: linear-gradient(135deg, #ebe046 -20%, #ffac01 120%);
}

.block-container .btn-front {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: inherit;
    height: inherit;
    border-radius: 32px;
    background-color: #ffffff33;
    backdrop-filter: blur(20px);
    transition: 250ms;
    transform-style: preserve-3d;
    transform-origin: top left;
    overflow: hidden;
}

.block-container .btn-front svg.frame {
    width: inherit;
    height: inherit;
}

.block-container .btn-front svg.frame rect {
    width: inherit;
    height: inherit;
    fill: none;
    stroke-width: 4;
}

.block-container .btn-front svg.icon {
    position: absolute;
    inset: 50% 0 0 50%;
    transform: translate(-50%, -50%);
}

.block-container:hover>.btn-back {
    transform: translateZ(20px) rotateZ(15deg) rotateX(-20deg) rotateY(-20deg);
}

.block-container:hover>.btn-front {
    transform: translateZ(80px) translateY(-5px) rotateX(15deg) rotateY(15deg);
}


/* @media (max-width: 600px) {
     body{
       flex-direction: column;
   }
}
  */



@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

/* .container-fluid {
    max-width: 1400px;
} */
.container-fluid {
    max-width: 1400px;
}

.card-our-team {
    background: #fff;
    box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
    border: 1;
    border-radius: var(--redius);
    /*border-radius: 1rem;
    */
    -webkit-border-radius: var(--redius);
    -moz-border-radius: var(--redius);
    -ms-border-radius: var(--redius);
    -o-border-radius: var(--redius);
    -webkit-border-radius: var(--redius);
}
.swiper .mySwiper{
    width: 20%;
    height: auto !important;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
}

/* .card-our-team {
    background: #fff;
    box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
    border: 1;
    border-radius: var(--redius);
    -webkit-border-radius: var(--redius);
    -moz-border-radius: var(--redius);
    -ms-border-radius: var(--redius);
    -o-border-radius: var(--redius);
    -webkit-border-radius: var(--redius);
} */

.strategies-container{
    height: auto !important;
}

.img-strategy{
    height: 150px;
    background: red;
}

/* .title-strategy{
    height: 50%;
} */

.img-strategy img {
    width: 50%;
    height: auto !important;
    margin-top: 20px;
    padding: 1px;
    margin-bottom: 10px;
}


/*  */
.img-hover-zoom--colorize img {
    width: 200px;
    height: auto;
    margin-top: 20px;
    padding: 1px;
    transition: transform .5s;
    filter: grayscale(100%);
}

.img-hover-zoom--colorize:hover img {
    filter: grayscale(0);
    transform: scale(1.05);
}

.card-our-team h5 {
    overflow: hidden;
    height: 80px;
    font-weight: 300;
    font-size: 1rem;
}

.card-our-team h5 a {
    color: black;
    text-decoration: none;
}

.role-ourteam {
    color: #7a7a7a;
}

.About-Ywbo .box,
.our-team .box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fab {
    font-size: 1.5rem;
    transition: transform .5s;
}

.fab:hover {
    color: var(--main-hover);
    transform: scale(1.1);
}

/*  */
.programs{
    height: 200px;
    /* background: gray; */
}

@media only screen and (max-width: 600px) {
     .programs{
        height: 380px;
        /* background: gray; */
    }
}
.program-about-img img {
    /* height: 7.5rem; */
    /* height: auto; */
    max-height: 100%;
    width: 100%;
}

.program-about-span {
    /* color: var(--secondary-color); */
    font-size: 15px;
    font-family: Cairo;
}



/* MEDIA */


/*
@media only screen and (min-width: 1200px) {
    .img-hover-zoom--colorize img {
        width: 200px;
    }
}

@media only screen and (min-width: 1200px) {
    .h1,
    h1 {
        font-size: 2rem;
    }
} */


/*  */

.our-team .swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    margin-bottom: 200px;
}

.our-team .swiper-slide {
    background-position: center;
    background-size: cover;
    /* width: 300px; */
    /* height: 300px; */
}

.our-team .swiper-slide-blur {
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
    filter: blur(4px);
    -webkit-filter: blur(4px);
    width: 300px;
}

.our-team .swiper-slide-active {
    filter: blur(0px);
    -webkit-filter: blur(0px);
}

.our-team .swiper-slide img {
    /* display: block; */
    /* width: 100%; */
}

.about-icons {
    font-size: 150px;
    text-align: center;
}

.about-icons-right {
    color: var(--main-color);
}

.about-icons-left {
    color: var(--secondary-color);
}
.strategies{
    height: auto !important; */
    /* height: 1000px !important;

}
.strategies .swiper-container .swiper-slide {
    color: black;
    /* padding: 2rem; */
    text-align: center;
    font-size: 1rem;
    /* width: 100%; */
    /* background: gray; */
    /* height: 20rem !important;  */

}


.pagination-hero-about .swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer;
    margin-left:.7vw !important;
}







/* 

.swiper-slide .card-body{
    display: none;
  
  }
  .swiper-slide .hide-content{
    display: block;
    margin-top: 30%;
    border-bottom:1px solid #ffffff;
    
  }
  .swiper-slide.swiper-slide-active {
    --NewsCardGradint : linear-gradient(0deg, rgba(0, 120, 175, 0.8) 10%, rgba(80, 155, 190, 0.8) 31%, rgba(123, 168, 189, 0.8) 46%, rgba(212, 220, 224, 0.116) 67%);
    transform: scale(1);
    background: rgb(122, 118, 134);
    background:var(--NewsCardGradint) no-repeat ;
    background-size: 100% 100%;
  }
  .swiper-slide.swiper-slide-active  .card-body {
   display: block;
  }
  .swiper-slide.swiper-slide-active  .hide-content {
    display: none;
   
   }
  .swiper-slide__content {
    height: 300px;
  } */

/* @media only screen and (min-width: 700px) {
    
    .swiper-container #hero-slide{
        padding: 0 0 0 0;
        height: 60vh;
        background: red;
    }
}
#hero-slide{
    padding: 0 0 0 0;
    height: 100vh;
    background: red;
    
    } */


    /* Styles for small screens */
    @media (max-width: 767px) {
        .swiper-container.singleSwiper {
            height: 250px; /* Set the desired height for small screens */
        }
    }

    /* Styles for large screens */
    @media (min-width: 768px) {
        .swiper-container.singleSwiper {
            height: 80vh;
        }
    }

    .swiper-container .swiper-slide {
        padding: 0;
    }