@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Roboto.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Apply font 

  font-family: 'Raleway', sans-serif;

*/
/* Tab container */
    .tabs {
      display: flex;
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 15px;

    }

    .tab {
      padding: 10px 20px;
     color:#bbb;
      background: #2d3257;
      cursor: pointer;
      border-radius: 5px;
      text-align: center;
      flex: 1;
      transition: background 0.3s;
    }

    .tab.active {
      background: #ffa600;
      color: white;
    }

    /* Content area */
    .tab-content {
      display: none;
      font-family: 'Roboto', sans-serif;
     
     
    }

    .tab-content.active {
      display: block;
    }

    /* Mobile: stack vertically */
    @media (max-width: 768px) {
      .tabs {
        flex-direction: column;
        align-items: stretch;
      }
    }

    /*6 column*/
    .grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr); /* 6 columns */
      gap: 16px;
    }

    .col {
      border: 1px solid #ccc;
      border-radius: 6px;
      overflow: hidden;
      text-align: center;
    }

    .heading {
      background: #2b5937;
      color: #fff;
      padding: 10px;
      font-weight: bold;
    }

    .data {
      background: #f9f9f9;
      padding: 12px;
    }

    /* Responsive breakpoints */
    @media (max-width: 1000px) {
      .grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
      }
    }

    @media (max-width: 600px) {
      .grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
      }
    }

    @media (max-width: 400px) {
      .grid {
        grid-template-columns: 1fr; /* 1 column */
      }
    }
    .notice_box {
 background: #8a7458;
 background: linear-gradient(92deg, rgba(138, 116, 88, 1) 0%, rgba(110, 83, 66, 1) 24%, rgba(125, 97, 66, 1) 69%, rgba(77, 77, 77, 1) 100%);
  box-shadow: 0px 0px 5px #ccc;
  margin: 5px 0;
  border: solid 2px #fff;
  border-radius: 10px;
  padding: 10px; /* optional: adds nice spacing inside */
}

.notice_box p {
  margin: 0; /* remove extra space from <p> */
}

  .notice,
  .notice *{color: white !important;}


/******Gallery*********/
 .main_frame {
  display: inline-block;
  padding: 20px;
  border: 8px solid #222;
 
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
  background: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.main_frame:hover {
  transform: scale(1.03);
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3);
}

.bright {
  transition: filter 0.3s ease;
 
  width: 300px;
  display: block;
  border: solid 5px #222;
}

.bright:hover {
  filter: brightness(1.2);