body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}
h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #333;
}
h4, h5, h6, .subheading {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    color: #555;
}
p, .important-text {
    font-family: 'Merriweather', serif;
    font-size: 20px;
    color: #000;
}
.baskervville-sc-regular {
    font-family: "Baskervville SC", serif;
    font-weight: 400;
    font-style: normal;
  }
  
               /* Achievements */
  .achievements {
    text-align: center;
    color: white;
    background-color: #343148;
    background-image: url("../img/pic18.jpg");
    opacity: 0.8;
  
    padding: 10px;
   
    line-height: 1.8em;
    margin-left: 40px;
    margin-right: 40px;
  }
  
  #whiteline {
    border-top: 5px solid white;
    margin: 0px auto;
    margin-top: 25px;
    margin-bottom: 40px;
    width: 10%;
  }
  body {
              background-image: url('img/bg-3.jpg');
              background-repeat: no-repeat;
              background-attachment: fixed;
           
          }
          .img_hero{
            
            background-size: cover; /* Ensures the image covers the entire area */
            background-position: center center; /* Keeps the image centered */
            background-repeat: no-repeat; 
            width: 100%; /* Ensures the image will always be responsive */
            height: auto; 
           
              
                transition: opacity 0.5s ease-in-out; /* Optional: smooth transition on hover or other interaction */
            }
            .chooseimg{
                width:100%;
                 height: 250px; 
                 border-radius:20px;
            }
            
            .fading-image:hover {
                opacity: 1; /* Optional: Image fades back to full opacity when hovered */
            }
            
          
          
          @media screen and (max-width: 768px) {
              .achievements {
    opacity: 0.8;
    margin-left: 10px;
    margin-right: 10px;
  }
      }
      @media screen and (max-width: 480px) {
              .achievements {
    opacity: 0.8;
    line-height: 1.8em;
    margin-left: 5px;
    margin-right: 5px;
  }
      }