/* 
    *********************************************************************
    * This file is created and developed by Badr Eddine Rachadi.         *
    * Unauthorized edits are prohibited. Please do not modify this file  *
    * without prior consent. If you need to make any changes, please     *
    * contact me at badr@kreaforma.de to ensure consistency         *
    * with the original version, as it is essential that both versions   *
    * remain identical. Thank you for your cooperation.                  *
    *********************************************************************
*/


.mis-hover-containers-bg h2 {
 font-family: 'Din bold' !important;
}

.mis-hover-containers-bg span {
 font-family: 'Din light' !important;
}
.mis-hover-containers-bg {
  margin-bottom: 10px;
  
  min-height: 500px;
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;

  

}



.mis-hover-containers-bg img{
  
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 right: 0;
 object-fit: cover;
 
}


.mis-hover-containers-bg:hover .main-title {h2
    opacity: 0;
}

.main-title{
  font-family: 'Din bold';
    color: white;
    font-size: 28px;
    text-align: center;
    margin-bottom: 0px;
    padding: 20px 20px; 
    background-color: #003D63;
    opacity: 1;
    transition-duration: 0.4s;
    letter-spacing: 0.3px;
    z-index: 10;
  width:100%
}



.mis-hover-containers-bg-content{
background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7));
backdrop-filter: blur(5px);
width: auto !important;
height: 100%;
padding: 0px 40px;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: white;
  border-bottom: 10px solid #00ABE5;
  opacity: 0;
  transition-duration: 0.5s;
  cursor: pointer;
  z-index: 999;
}

.card-title {
    font-size: 28px;
    text-align: center;
    transform: translateY(50px);
    transition-duration: 0.3s ;
    color:white !important;
  
}

.card-text {
    text-align: center;
    font-size: 16px;
    line-height: 25px;
    margin-top: 10px;
    margin-bottom: 30px;
    transform: translateY(50px);
    transition-duration: 0.4s;
    opacity: 0;
  cursor: pointer;
  
}

.card-btn {
  color: white;
  font-size: 16px;
  padding: 15px 30px;
  border: 1px solid white;
  background-color: rgba(255, 255, 255, 0);
  cursor: pointer;
  transition-duration: 0.5s ; 
  margin-top: 0px;
  
  transform: translateY(50px);
}
span.main-title:hover.card-btn {
    opacity: 1;
    transform: translateY(0px);
}

span.main-title:hover .card-text {
    opacity: 1;
    transform: translateY(0px);
}

span.main-title:hover .card-title {
    opacity: 1;
    transform: translateY(0px);
}

.card-btn:hover {
 color: black;
 background-color:white;  
 
}

.mis-hover-containers-bg-content:hover {
    opacity: 1;
}

.mis-hover-containers-bg-content:hover  .card-btn {
    opacity: 1;
    transform: translateY(0px);
}

.mis-hover-containers-bg-content:hover  .card-text {
    opacity: 1;
    transform: translateY(0px);
}

.mis-hover-containers-bg-content:hover  .card-title {
    opacity: 1;
    transform: translateY(0px);
}


@media only screen and (max-width: 767px) {
   .mis-hover-containers-bg {
        height:70vh;
        width: 100%;
        
        
    }
    .mis-hover-containers-bg-content{
        padding: 20px 20px;
    }

    .card-btn {
        margin-top: 0px;
    }
}