.b-card-container{
    width:100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    gap: 70px;
    align-items: center;
    background-color: white;
}
.b-card-container .b-card{
    width: 35vh;
    height: 50vh;
    /* background-color: red; */
    border-radius: 5vh;
    overflow: hidden;
    transition: all .3s;
}
.b-card-container .b-card:nth-child(1){
    background-image: url(/images/Gallary/1.jpg);
    background-size: cover;
}
.b-card-container .b-card:nth-child(2){
    background-image: url(/images/Gallary/3.jpg);
    background-size: cover;
}
.b-card-container .b-card:nth-child(3){
    background-image: url(/images/Gallary/2.jpg);
    background-size: cover;
}
.b-card-container .b-content{
    display: flex;
    flex-direction: column;
    color: white;
    justify-content: space-between;
    margin-left: 2vh;
    margin-top: 25vh;
    width: 25vh;
    height: 23vh;
    font-size: 1.7vh;
    /* background-color: aqua; */
}


.b-card-container .b-content h2 {
    transform: translateY(18vh);
    transition: all .3s;
}

.b-card-container .b-content > .b-des,
.b-card-container .b-content > button {
    visibility: hidden;
    transform: translateY(25vh);
    transition: all .3s;
}

.b-card-container .b-card:hover > .b-content h2 {
    margin-bottom: -1vh;  
    transform: translateY(0vh);
}

.b-card-container .b-card:hover > .b-content > .b-des,
.b-card-container .b-card:hover > .b-content > button {
    visibility: visible;
    transform: translateY(0vh);
}
.b-card-container .b-card:hover{
    transform: scale(1.1);
}



.b-card-container .b-card button{
    width: 12vh;
    height: 5vh;
    border:0px;
    border-radius: 10vh;
}
.swiper-container{
    display: none;
}



@media (min-width: 320px) and (max-width: 480px) {

    .b-card-container{
        display: none;
    }
    .swiper-container {
        display: block;
        width: 100%;
        height: 100vh;
        padding-top: 15vh;
        padding-left: 5vh;
        padding-right: 5vh;
        overflow: hidden;
        background-color: white;
      }
  
      .card {
        border: 1px solid #ccc;
        border-radius: 10px;
        text-align: center;
        color: white;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s;
        height: 400px;
        display: flex;
        flex-direction: column;
        padding-top: 275px;
      }
      .card p{
        color: white;
      }

      .card button{
        width: 80px;
        height: 35px;
        border: solid 0px;
        border-radius: 10px;
      }

      .swiper-slide:nth-child(1) .card{
        background-image: url(../images/Gallary/1.jpg);
        background-size: cover;
      }
      .swiper-slide:nth-child(2) .card{
        background-image: url(../images/Gallary/2.jpg);
        background-size: cover;

      }
      .swiper-slide:nth-child(3) .card{
        background-image: url(../images/Gallary/3.jpg);
        background-size: cover;

      }
  
      .card h2 {
        font-size: 20px;
        margin: 0 0 10px;
      }
  
      .card p {
        font-size: 16px;
        margin: 10px;
        color: white;
      }
  
      .swiper-slide-active .card {
        transform: scale(1.05);
      }


      .swiper-button-next {
        background-color: white; /* Background color */
        color: black; /* Text color */
        border: none;
        padding: 10px 20px;
        border-radius: 45px;
        cursor: pointer;
      }
      
      /* Style the previous button */
      .swiper-button-prev {
        background-color: white; /* Background color */
        color: black; /* Text color */
        border: none;
        padding: 10px 20px;
        border-radius: 45px;
        cursor: pointer;
      }


      .swiper-button-next:after, .swiper-button-prev:after {
        font-size: 15px !important;
      }
      

}



@media (min-width: 481px) and (max-width: 768px) {



}
@media (min-width: 769px) and (max-width: 1024px){

}





@media (min-width: 1025px)  {

}