@import url('https://fonts.googleapis.com/css2?family=Ancizar+Serif:ital,wght@0,300..900;1,300..900&family=Bayon&family=Moul&display=swap');
*{
    font-family: "Ancizar Serif", serif;
    padding:0;
    margin:0;
    box-sizing: border-box;
}

.slider-board{
    top:14%;
    width:100%;
    height:86%;
    overflow: auto;
    position: relative;
    background-image: url('/skmh.org/images/bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    
}

.single-slide {
    width: 100%;
    height: 100%;
    display: none;
    background-color: rgba(255, 255, 255, 0.9);
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity 1s ease;
    color:black;
}
  
.single-slide.active {
    opacity: 1;
    display:flex;
}
.left-slide{
   
    width:40%;
    height:100%;
}
.left-slide .top{
    width:100%;
    height:100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:20px;
}
.left-slide .top span{
    font-size:60px;
    font-weight: 600;
}
/*-------*/
.left-slide .top .first-slide-home1 span{
    font-family: "Ancizar Serif", serif;
    color:black ;
    font-size:22px;
}
.left-slide .top .first-slide-home2 span,
.left-slide .top .first-slide-home3 span,
.left-slide .top .first-slide-home4 span{
    font-family: "Ancizar Serif", serif;
    font-size:18px;
    color: black;
}
.left-slide .top .first-slide-home5{
    display:block;
}


/*-------*/
.left-slide .top .first-slide-dept1 span{
    margin: 20px 0 0 0;
    color:rgb(0, 77, 139) ;
    font-size:22px;
    font-family: "Moul", serif;
    line-height: 0.2;
}
.left-slide .top .first-slide-dept2 span{
    font-weight: normal;
    font-size:16px;
}
.left-slide .top .first-slide-dept2 span,
.left-slide .top .first-slide-dept3 span{
   font-family: "Ancizar Serif", serif;
   font-size:14px;
}
/*-------*/
.left-slide .top div{
    padding: 10px 0;
    text-align: center;
}
.left-slide .dept-desc-phone{
    display:none;
}
/*=========*/
.bio-years1  {
      
    margin: -20px 0 0 0;
    font-size:14px;
    color: black;
    
    font-family: "Ancizar Serif", serif;
   
}
.bio-years1 p {
  
  list-style-position: inside;
  text-align: left;
  
  font-family: "Ancizar Serif", serif;
}

/*=========*/
.right-slide{
    width:60%;
    height:100%;
    position: relative;
    border-radius: 10px;
    padding:10px;
    position: relative;
    display: flex;
    perspective: 1000px; 
    justify-content: center;
    align-items: center;

}
.right-slide img{
   position: relative;
    display: block;
    height: 70%;
    width: 80%;
    padding: 2px;
    border: 1px solid gray;
    box-shadow: 1px 1px 1px 2px rgb(0, 77, 139);
    border-radius: 20px;
    /* 3D Shadow effect */
    box-shadow:
        5px 5px 15px rgba(0, 0, 0, 0.6),
        -5px -5px 10px rgba(255, 255, 255, 0.1);
    
    transform: rotateX(2deg) rotateY(-6deg); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Optional: Add hover effect for interactivity */
.right-slide img:hover {
    transform: rotateX(0deg) rotateY(0deg) scale(1.08);
    box-shadow:
        8px 8px 20px rgba(0, 0, 0, 0.4),
        -4px -4px 10px rgba(255, 255, 255, 0.05);
}
.right-slide img.active {
    transform: rotateX(0deg) rotateY(0deg) scale(1.08);
    box-shadow:
        8px 8px 20px rgba(0, 0, 0, 0.4),
        -4px -4px 10px rgba(255, 255, 255, 0.05);
}

/* HD screen */
@media (max-width: 1366px) {
    .left-slide .top span{
        font-size:30px;
        font-weight: 600;
    }

}


/* PHone */
@media (max-width: 767px) {
    .slider-board{
        margin: 10% 0 0 0;
        top:2%;
        height:50%;
        overflow: hidden;
    }
    .single-slide{
        display:block;
        background-color: rgba(255, 255, 255, 0.9);
        color:rgb(0, 0, 0);
    }
    .single-slide.active {
        opacity: 1;
        display:block;
    }
    .left-slide{
        margin: 30px 0 0 0;
        width:100%;
        height:20%;
    }
    .left-slide .top{
        padding:5px;
    }
    .left-slide .top span{
        display:block;
    }  
    .left-slide .top div{
        padding: 2px 0;
        text-align: center;
    }
 
    .left-slide .top .first-slide-home1 span{
        color:black ;
        font-size:18px;
       margin: -20% 0 0 0;

    }
    .left-slide .top .first-slide-home2 {
        margin: -15% 0 0 0;
    }
    .left-slide .top .first-slide-home2 span,
    .left-slide .top .first-slide-home3 span,
    .left-slide .top .first-slide-home4 span{
        font-size:14px;
        color: black;
      
       
    }
    .left-slide .text-container{
        display:block;
        width:100%;
    }
    
    .left-slide .top .first-slide-dept1{
        color:black ;
        font-size:18px;
        padding:2px;
    }
    .left-slide .dept-desc-phone{
        display:block;
        position: relative;

    }
    
    .left-slide .dept-desc-phone::before{
        content: "";
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 70px;
        height: 3px;
        background: black;
    }
    .left-slide .dept-desc-phone::after {
        content: "";
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        height: 2px;
        background: black;
    }
    .left-slide .dept-desc-phone span{
        font-size:13px;
    }
    .left-slide .top .first-slide-dept2 {
        font-size:16px;
          display:none;
    }
    .left-slide .top .first-slide-dept3{
        font-size:14px;
          display:none;
    }
    .left-home{
        height:100%;
        width:100%;
    }
    .left-home .top div{
        display:block;
    }

    .right-slide{
        width:100%;
        height: 80%;
        display:flex;
        justify-content: center;
        align-items: center;
    }
    .right-slide img{
        display:block;
        width:100%;
        height:60%;
       
         transform: rotateX(0deg) rotateY(0deg);
    }
    .right-slide .first-slide-dept5{
        display:none;
    }
    
       .left-slide .top .first-slide-dept1 span{
        line-height: 1.6;
         margin: 3px 0 0 0;
        color:rgb(0, 77, 139) ;
        font-size:22px;
        font-family: "Moul", sans-serif;
    
    
    }
}