@charset "UTF-8";

/* font import */
@import url('https://fonts.googleapis.com/css2?family=Battambang&family=Moulpali&family=Raleway:wght@500&display=swap');

/* banner */
.container-fluid .row{
    padding: 20px;
}
.container-fluid .row h1{
    font-family: 'Battambang',system-ui; 
    font-size: 36px;
}
.container-fluid .row h2{
    font-family: 'Raleway',sans-serif;
    font-size: 24px;    
}
@media screen and (max-width: 1024px){
    .container-fluid .row h1{
        font-size: 30px;
    }
    .container-fluid .row h2{
        font-size: 20px;
    }
}
    
@media only screen and (max-width: 767px){
    .container-fluid .row h1{
        font-size: 20px;
    }
    .container-fluid .row h2{
        font-size: 14px;
    }
}
/* banner animation */
@keyframes slideInRight {
    0% {opacity: 0;}
    100% {opacity: 1;}
    0% {transform: translateX(100%);}
    100% {transform: translateX(0);}
  }
@keyframes slideInLeft {
    0% {opacity: 0;}
    100% {opacity: 1;}
    0% {transform: translateX(-100%);}
    100% {transform: translateX(0);}
}
  
  .slide-in-right {
    animation: slideInRight 2s ease-in-out;
  }
  
    .slide-in-left {
        animation: slideInLeft 2s ease-in-out;
    }

/* @media (min-width: 768px) {
    .container-fluid .row h2 {
        padding-left: 45px; 
    }
}

@media (max-width: 600px) {
    .container-fluid .row h2 { 
        padding-left: 10px; 
    }
}
@media (max-width: 450px) {
    .container-fluid .row h2 {
        padding-left: 0px; 
    }
} */

/* blogs */

#blogs-container{
    margin-top: 5%;
}
#blogs-container .row .card{
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.19);
    border-radius: 15px;
    margin-bottom: 4rem !important;
    transition: transform 0.3s ease-out;
}
#blogs-container .row .card:hover{
    transform: scale(1.03);
}
#blogs-container .row .card img{
    border-radius: 15px 15px 0px 0px ;
}
#blogs-container .row .card img:hover{
    cursor: pointer;
}
#blogs-container .row .card .card-body{
    font-family: 'Battambang',system-ui;
}
#blogs-container .row .card .card-body .btn{
    background-color: #0A509B;
}
#blogs-container .row .card .card-body .btn:hover{
    color: #0A509B;
    background-color: white;
    
}
.fixed-card {
    height: 400px; /* Set the desired height for your cards */
    width: 100%; /* Set the desired width for your cards */
}
.description-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Number of lines to show */
    -webkit-box-orient: vertical;
}
#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 30px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #1F6DE0; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
  }
  
  #myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
  }