
body {
  background-color: #eaeaea;
}
.breadcrumb-item a {
  color: black;
  text-decoration: none;
  font-weight: 600;
}
.active {
  color: #009aff !important;
  font-weight: 600;
}
.bg {
  position: relative;
}
.bg img {
  width: 100%;
  height: 664px;
  object-fit: cover;
}

.bg_title {
  position: absolute;
  z-index: 5;
  color: rgb(255, 255, 255);
  top: 60%;
  font-size: var(--h);
  left: 20%;
  font-weight: 900;
}
.content {
  position: relative;
  height: 100%;  
}
.bg_right {
  right: 0;
  bottom: 100;
  width: 500px;
  position: absolute;
}

.content_more {
  width: 70%;
  margin:  auto;
  margin-bottom: 180px;
}
.card-title2{
  font-size: var(--h2);
  font-weight: 700;
  color: #525252;
}
.card-text2{
  font-size: var(--h3);
  position: relative;
  width: 50%;
}
.card-body2{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  justify-content: center;
  margin-left: 150px;
}

.card-img2 {
  border-top-left-radius: 20px !important;
  border-bottom-left-radius:  20px !important;
}

.card{
  border-radius: 20px !important;
  overflow: hidden;
}
.icon{
  width: 35px;
  height: 35px;
}
.card-body2 a{
  text-decoration: none !important;
  color: #525252 !important;

}
.col-md-4:hover .card-img2 {
  transform: scale(1.1); /* You can adjust the scaling factor as needed */
}
.col-md-4 .card-img2 {
  transition: transform 0.3s ease;
}
.col-md-4 {
  position: relative;
  overflow: hidden;
}
.card-text2:hover,.card-title2:hover{
  color: #004600;
}
@media (min-width:1500px){
  .icon{
    width: 35px;
    height: 35px;
    position: absolute;
    right: 200px;
    top: 50%;

  } 
  
}
@media (max-width:1688px){
  .icon{
    width: 35px;
    height: 35px;
    position: relative;
    right: 0px;
    top: 0%;

  } 
  .card-title2{
    font-size: var(--h3);
  }
  .card-text2{
    font-size: var(--h4);
  }
}


@media (max-width: 768px) {
  .card_point a > img {
    height: 100px;
    width: 10rem;
  }

  .bg {
    position: relative;
  }
  .bg img {
    width: 100%;
    height: 400px;
    object-fit: cover;
  }
  .bg_right {
    position: absolute;
    top: 100px;
    right: 0;
    width: 70%;
  }
 
  .bg_title {
    position: absolute;
    z-index: 5;
    color: rgb(255, 255, 255);
    top: 50%;
    font-size: var(--h0);
    left: 20%;
    font-weight: 900;
  }
  .content {
    position: relative;
  }
  .content_more {
    width: 80%;
    margin: auto;
    position: relative;
    z-index: 5;
  }

  .card-body2{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    justify-content: center;
    margin-left: 150px;
  }
  
  .card-img2 {
    border-top-left-radius: 20px !important;
    border-bottom-left-radius:  20px !important;
  }
  
  .card{
    border-radius: 20px !important;
    width: 100% !important;
  }
  .card-title2{
    font-size: var(--m-h2);
    font-weight: 700;
    color: #525252;
  }
  .card-text2{
    font-size: var(--m-h3);
    position: relative;
  }
  .card-body2{
    align-items: center;
    justify-content: center;
    margin-left: 0px;
    margin: 10px;
  }
  
  .card-img2 {
    border-top-left-radius: 20px !important;
    border-bottom-left-radius:  0px !important;
    border-top-right-radius: 20px;
  }
  
  .card{
    border-radius: 20px !important;
    margin-top: 50px;
   
  }
  .icon{
    display: none;
  }
  .card-text2 {
    width: 100%;
}
}
