body {
      font-family: 'Ropa Sans', sans-serif;
      background-color: #f9f9f9;
      margin: 0;
      padding: 0;
    }
.header {
      background-color: #ffffff;
      border-bottom: 2px solid #0d6efd;
      padding: 15px 0;
    }

    .logo img {
      width: 200px;
      height: auto;
    }

    .top-nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 15px;
      justify-content: flex-end;
      align-items: center;
    }

    .top-nav ul li a {
      color: #0d6efd;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.3s;
    }

    .top-nav ul li a:hover {
      color: #0056b3;
    }

    /* IMAGE SLIDER */
    .image-slider {
      width: 100%;
      background: #000;
    }

    .image-slider img {
          width: 100%;
          height: 500px; /* default height for desktop */
          object-fit: cover; /* fill the container, maintain aspect ratio, crop if needed */
          display: block;
          margin: 0 auto;
        }
        
        @media (max-width: 1366px) {
          .image-slider img {
            height: 400px;
          }
        }
        
        @media (max-width: 991px) {
          .image-slider img {
            height: 300px;
          }
        }
        
        @media (max-width: 600px) {
          .image-slider img {
            height: auto; /* let image resize naturally for small screens */
          }
        }


    /* CONTENT BOXES */
    .content-grids {
      padding: 40px 0;
    }

    .listview_1_of_3 {
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s;
      text-align: center;
      padding: 20px;
    }

    .listview_1_of_3:hover {
      transform: translateY(-5px);
    }

    .listimg img {
      width: 80px;
      height: 80px;
      margin-bottom: 15px;
    }

    .list_1_of_2 h3 {
      color: #14316a;
      font-weight: bold;
    }

    .button a {
      display: inline-block;
      background-color: #14316a;
      color: #fff;
      padding: 8px 20px;
      border-radius: 25px;
      text-decoration: none;
      transition: background-color 0.3s;
    }

    .button a:hover {
      background-color: #0056b3;
    }
    

    /* MARQUEE */
    marquee {
      background: #14316a;
      color: white;
      padding: 10px;
      font-size: 1rem;
      margin-top: 10px;
    }