.our-approach h1{
   color: #0F7792;
   font-weight: bold;
}
.shah-profil{
    background-color: #045468;
    color: white;
}
.shah-profil-text{
    color: #E46C25;
        border-bottom:2px solid white;
        text-align: center; 
        
}

.profil-skil-text { 
    color: rgb(4, 84, 104);
    border-bottom:2px solid #E46C25;
    font-weight: bold;


}
.profil-skil-text1{
    text-align: center;
}
.bg-images{
    background:linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../../images/about-img1.jpg');
    background-position: center;
    background-repeat: no-repeat;
    /* opacity: 0.5; */
    background-size: cover;
}

.card-main{ 

 height: 50vh;
text-align: center;
  text-align: center !important;
border: 1px solid rgba(117, 117, 117, 0.301);

}
.card-main:hover{
    background-color: rgba(15, 119, 146,0.8);
}
.slide-card{
   display: flex;
  align-items: center;
  vertical-align: middle;    
  justify-content: space-between;
    /* line-height: 13px; */
    color: white;
    text-align: center;
}
.card-text{
    width: 100%;
    text-align: center;
}
.list-slide{
    opacity: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    color: white;
    font-size: 14px;
    text-align: center;
    line-height: normal;
    vertical-align: middle !important;

}
.list-slide-1{
    opacity: 0;
    position: absolute;
    bottom: 40%;
    left: 0;
    color: white;
    font-size: 14px;
    text-align: center;
    line-height: normal;
    vertical-align: middle !important;

}

.card-main:hover .list-slide-1{
    position: absolute;
    text-align: center;
    top: 40px;
    left: 0;
    position: relative;
    transition-duration: 2s;
    transition-delay: 0s;
    opacity: 1 !important;
    animation-fill-mode: both;
    vertical-align: middle !important;
}
.list-slide-2{
    opacity: 0;
    position: absolute;
    bottom: 90%;
    left: 0;
    color: white;
    font-size: 14px;
    text-align: center;
    line-height: normal;
    vertical-align: middle !important;

}
.card-main:hover .list-slide-2{
    position: absolute;
    text-align: center;
    top: 80px;
    left: 0;
    position: relative;
    transition-duration: 2s;
    transition-delay: 0s;
    opacity: 1 !important;
    animation-fill-mode: both;
    vertical-align: middle !important;
}
.card-main:hover .list-slide{
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    position: relative;
    transition-duration: 2s;
    transition-delay: 0s;
    opacity: 1 !important;
    animation-fill-mode: both;
    vertical-align: middle !important;
}
.text-heading{
    position:relative;
    top: 80px;
    left: 0px;
    font-size:35px;
    font-weight: bolder;
    color: white;
    
}
.card-main:hover .text-heading{
    position: relative;
    color: white;
    text-align: center;
    animation: text-top 1s;
    animation-fill-mode: both;
}
@keyframes text-top {
    0%   {
     
         left: 0px;  
         top: 50px;
        }
    100%  {   
        position: relative;
         top: -5px;
    }
    
  }


  @keyframes example {
    from {
        left: 0px;
    }

    to {
        left: 30px;
    }

    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
.versios-head{
    font-size: 18px;
}

.var-heading{
    /* color: var(--heading-color); */
    color:  #C0942C ;
    font-weight: bolder;
}
@media screen and (max-width:492px){
    .master-plan {
        font-size: 21px !important;
    }
}