:root {
        --primary: #6e87a6;
        --dark: #2f3e50;
        --light: #f4f6f9;
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: 'Oswald', sans-serif;
        background: var(--light);
        color: var(--dark);
      }

      .container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
      }

      /* NAVBAR */
      nav {
        background: white;
        padding: 15px 0;
        position: sticky;
        top: 0;
        z-index: 1000;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      }

      .nav-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .logo-img {
        height: 60px;
        width: auto;
        transition: 0.3s;
      }

      .logo-img:hover {
        transform: scale(1.05);
      }

      .nav-links {
        display: flex;
        gap: 25px;
      }

      .nav-links a {
        text-decoration: none;
        color: var(--dark);
        font-weight: 600;
        transition: 0.3s;
      }

      .nav-links a:hover {
        color: var(--primary);
      }

      .btn {
        background: var(--primary);
        color: white;
        padding: 10px 18px;
        text-decoration: none;
        border-radius: 4px;
        font-weight: 600;
        display: inline-block;
        transition: 0.3s;
      }

      .btn:hover {
        background: var(--dark);
        color: #fff;
      }

      /* HERO */
      .hero {
        background: var(--primary);
        color: white;
        padding: 100px 0;
        text-align: center;
        max-height: 80vh;
      }

      .hero h1 {
        font-family: 'Anton', sans-serif;
        font-size: 60px;
        margin-bottom: 20px;
      }

      .hero p {
        font-size: 20px;
        margin-bottom: 30px;
      }

      .hero h5 {
        color: var(--primary);
        font-weight: 800;
      }

      /* SECTIONS */
      section {
        padding: 80px 0;
      }

      .section-title {
        text-align: center;
        font-size: 36px;
        margin-bottom: 50px;
        font-family: 'Anton', sans-serif;
        color: var(--primary);
      }


      #about img {
        max-height: 400px;
      }

      /* MENU */
      .menu-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 30px;
      }

      .menu-item {
        background: white;
        padding: 25px;
        border-radius: 6px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        text-align: center;
      }

      .menu-item h3 {
        margin-bottom: 10px;
      }

      .menu-item p {
        margin-bottom: 15px;
      }

      /* LOCATION */
      .location {
        text-align: center;
      }

      /* -------------Timetable area end here------------- */
      .timetable-area {
        text-align: center;
        background: var(--tertiary_color);
        padding: 3rem;
      }

      .timetable-area .sub-heading {
        color: var(--secondary_color)
      }

      .timetable-area .heading {
        color: var(--primary);
      }

      .timetable-table {
        display: block;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
        margin-top: 50px;
        border-radius: 2%;
      }

      table.amrt-timetable-table-tbody-tr-td {
        text-align: center;
      }

      table.amrt-timetable-table th.amrt-timetable-table-thead-tr-th {
        font-size: 20px;
        border-bottom: 5px double var(--quaternary_color);
        border-bottom-style: double;
        background: var(--primary);
      }

      table.amrt-timetable-table td.amrt-label-td {
        font-size: 16px !important;
      }

      table.amrt-timetable-table td.amrt-label-td {
        font-size: 13px;
        color: var(--tertiary-color);
      }

      table.amrt-timetable-table td.amrt-value-td span.amrt-time-slot {
        display: inline-block;
        white-space: nowrap;
        padding: 0.1em 0.5em;
        margin: 0.1em 0.2em;
        color: var(--primary);
        box-shadow: 0 3px 7px var(--quaternary_color);
      }

      table.amrt-timetable-table td {
        padding: 0.3rem 0rem;
      }

      table.amrt-timetable-table td.amrt-value-td span.amrt-time-slot {

        text-align: center;
        font-size: 15px;
      }

      thead th {
        color: var(--text-color)
      }

      /* -------------Timetable area end here------------- */


      /* FOOTER */
      footer {
        background: var(--dark);
        color: white;
        padding: 40px 0;
        text-align: center;
      }

      footer a {
        color: white;
        text-decoration: none;
      }

       footer a:hover{
        color: white;
        text-decoration: underline;
       }

      /* RESPONSIVE */
      @media(max-width:768px) {
        .nav-links {
          display: none;
        }

        .hero h1 {
          font-size: 40px;
        }
      }