:root {
            --primary-dark: #00043a;
            --primary-blue: #000f7f;
            --light-indigo: #d8d9fe;
            --soft-white: #f1f1ff;
            --burnt-orange: #9b4d00;
            --bright-orange: #cc7311;
            --peach: #f8d6b1;
            --cream: #fcefe0;
            --deep-navy: #02066f;
        }

        body {
            /*
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            
            /* display: flex; 
            justify-content: center;
            align-items: center;
            min-height: 100vh; */
             background-color: var(--primary-dark);
         }  
          
        /*.timetable-container {*/
        /*    position: relative;*/
        /*    width: 95%;*/
        /*    max-width: 1100px;*/
        /*    margin: 0 auto;*/
        /*}*/
        
        /*.timetable-bg {*/
        /*    width: 100%;*/
        /*    height: auto;*/
        /*    padding-bottom: 20px;*/
        /*    padding-top: 20px;*/
        /*    min-height: 650px;*/
        /*    border-radius: 12px;*/
            /*box-shadow: 0 2px 20px rgba(0,0,0,0.2);*/
        /*    object-fit: cover;*/
        /*    margin-top: 20px;*/
        /*}*/
        
        /*.cards-container-tt {*/
        /*    margin-top: 40px;*/
        /*    position: absolute;*/
        /*    top: 0;*/
        /*    left: 0;*/
        /*    width: 100%;*/
        /*    height: 100%;*/
        /*    display: flex;*/
        /*    flex-direction: column;*/
        /*    justify-content: center;*/
        /*    padding: 60px 40px 40px 40px;*/
        /*    box-sizing: border-box;*/
        /*}*/
        
        /*.textheader {*/
        /*    margin-top: 95px;*/
        /*    position: absolute;*/
        /*    top: 20px;*/
        /*    left: 0;*/
        /*    width: 100%;*/
        /*    text-align: center;*/
        /*     font-size: 36px;*/
        /*     font-weight: 500;*/
        /*    color: var(--deep-navy);*/
        /*    z-index: 3;*/
        /*}*/
        
        /*.card-row-tt {*/
        /*    display: flex;*/
        /*    justify-content: space-between;*/
        /*    width: 100%;*/
        /*    margin-bottom: 25px;*/
            
        /*}*/
        
        /*.card-tt {*/
        /*    background: #fff;*/
        /*    border-radius: 10px;*/
        /*    box-shadow: 0 3px 10px rgba(79, 79, 79, 0.3);*/
        /*    height: 190px;*/
        /*    width: 210px;*/
        /*    min-width: 150px;*/
        /*    padding-left: 15px;*/
        /*    padding-top: 20px;*/
        /*    display: flex;*/
        /*    flex-direction: column;*/
        /*    align-items: flex-start;*/
        /*    justify-content: flex-start;*/
        /*    text-align: left;*/
        /*    transition: all 0.3s ease;*/
        /*}*/
        
        /*.card-tt:hover {*/
        /*    box-shadow: 0 8px 20px rgba(0,0,0,0.15);*/
        /*    transform: translateY(-3px);*/
        /*}*/
        
        /*.card-tt h2 {*/
        /*    margin: 0 0 8px 0;*/
        /*    font-size: 20px;*/
        /*    color: var(--primary-blue);*/
        /*    font-weight: bold;*/
        /*}*/
        
        /*.card-tt p {*/
        /*    margin: 0 0 8px 0;*/
        /*    font-size: 14px;*/
        /*    color: #333;*/
        /*    font-weight: normal;*/
        /*    line-height: 1.5;*/
        /*}*/
        
        /*.card-tt p.card-title-tt {*/
        /*    color: var(--bright-orange);*/
        /*    font-weight: bold;*/
        /*    font-size: 20px;*/
        /*    margin-bottom: 8px;*/
        /*}*/
        
        /*.card-tt p:last-child {*/
        /*    color: #222121;*/
        /*    font-weight:525;*/
        /*    font-size: 18px;*/
        /*    margin-bottom: 0;*/
        /*}*/
        
 
 .timetable-container {
  position: relative;
  width: 95%;
  max-width: 1100px;
  margin: 0 auto;
  min-height: 650px;
  overflow: hidden;
}

.timetable-bg {
  width: 100%;
  height: auto;
  min-height: 600px;
  border-radius: 12px;
  object-fit: cover;
  margin-top: 20px;
  display: block;
  /* Make sure it's below the overlay */
  z-index: 1;
  position: relative;
}

.textheader,
.cards-container-tt {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 2;
}

.textheader {
  top: 102px;
  text-align: center;
  font-size: 36px;
  font-weight: 500;
  color: var(--deep-navy);
  margin: 0;
}

.cards-container-tt {
  top: 188px; /* Adjust as needed to move cards below heading */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 40px 40px 40px;
  box-sizing: border-box;
}

.card-row-tt {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20px;
  margin-top: 10px;
}

.card-tt {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(79, 79, 79, 0.3);
  height: 190px;
  width: 210px;
  min-width: 150px;
  padding-left: 15px;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  transition: all 0.3s ease;
}

.card-tt:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transform: translateY(-3px);
}

.card-tt h2 {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: var(--primary-blue);
  font-weight: bold;
}

.card-tt p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #333;
  font-weight: normal;
  line-height: 1.5;
}

.card-tt p.card-title-tt {
  color: var(--bright-orange);
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 8px;
}

.card-tt p:last-child {
  color: #222121;
  font-weight:525;
  font-size: 18px;
  margin-bottom: 0;
}

/* Responsive for tablet and mobile */
/*@media (max-width: 900px) {*/
/*  .timetable-container {*/
/*    min-height: 400px;*/
/*  }*/
/*  .timetable-bg {*/
/*    min-height: 300px;*/
/*  }*/
/*  .textheader {*/
/*    font-size: 22px;*/
/*    top: 20px;*/
/*  }*/
/*  .cards-container-tt {*/
/*    top: 70px;*/
/*    padding: 0 10px 10px 10px;*/
/*  }*/
/*  .card-row-tt {*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    gap: 14px;*/
/*    margin-bottom: 14px;*/
/*    width: 100%;*/
/*  }*/
/*  .card-tt {*/
/*    width: 90vw;*/
/*    max-width: 350px;*/
/*    min-width: 0;*/
/*    height: auto;*/
/*    margin-bottom: 10px;*/
/*    padding: 12px 8px 10px 12px;*/
/*    font-size: 15px;*/
/*  }*/
/*  .card-tt h2 {*/
/*    font-size: 16px;*/
/*  }*/
/*  .card-tt p,*/
/*  .card-tt p.card-title-tt {*/
/*    font-size: 13px;*/
/*  }*/
/*  .card-tt p:last-child {*/
/*    font-size: 15px;*/
/*  }*/
/*}*/


@media (max-width: 700px) {
  .timetable-container {
    min-height: 880px;
    padding-bottom: 40px;
  }

  .timetable-bg {
    min-height: auto;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    object-fit: cover;
  }

  .textheader {
    font-size: 20px;
    top: 20px;
    margin-top: 65px;
    padding: 0 10px;
    z-index: 2;
  }

  .cards-container-tt {
    top: 70px;
    padding: 10px 15px;
    display: flex;
    margin-top: 25px;
    flex-direction: column;
    gap: 0px;
    z-index: 3;
  }

  .card-row-tt {
    display: grid;
    margin-top: 30px;
    grid-template-columns: repeat(2, 1fr); /* 2 boxes in each row */
    gap: 15px;
    width: 100%;
  }

  .card-tt {
    width: 100%;
    max-width: none;
    height: auto;
    padding: 15px 12px;
    font-size: 15px;
    text-align: left;
  }

  .card-tt h2 {
    font-size: 18px;
    margin-bottom: 6px;
  }

  .card-tt p.card-title-tt {
    font-size: 16px;
    margin-bottom: 4px;
    color: var(--bright-orange);
    font-weight: 600;
  }

  .card-tt p:last-child {
    font-size: 15px;
  }
}