.tab-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
  background-color: #F6DECD;
  padding: 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 100vw;        /* Ensure container does not overflow viewport */
  box-sizing: border-box;  /* Include padding in width */
}

.tab-container::-webkit-scrollbar {
  display: none;
}

.tab {
  flex: 0 0 auto;
  padding: 10px 20px;
  background-color: #FF3C00;
  margin-right: 5px;
  border-radius: 5px 5px 0 0;
  text-decoration: none;
  color: white;
  text-align: center;
  font-size: 16px;
  white-space: nowrap;
}

.tab:hover {
  background-color: #FF9103;
}
@media (max-width: 768px) {
  .tab-container {
    flex-wrap: wrap;       /* Allow wrapping if you haven’t already */
    row-gap: 5px;         /* Adds vertical space between tab rows */
  }

  .tab {
    font-size: 14px;
    padding: 8px 16px;
  }
}

    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    p{
        font-size: 18px; 
        font-family: Arial, sans-serif; 
        color:black; 
        text-align: center;
    }
    .video-row {
        display: flex;
        justify-content: center; /* centers the row itself */
        gap: 20px;               /* space between the videos */
        margin-top: 10px;        /* optional */
      }
    
      .video-frame {
        border: 2px solid #444;
        border-radius: 10px;
        padding: 5px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
      }
    
      video {
        display: block;
       /* transform: scale(0.9);*/
      }
      .scaled-image {
        display: block;
        margin: 0 auto;               /* center horizontally */
        width: 60%;                   /* scale image */
        transform-origin: center top; /* scale from top center */
        max-width: 90%;              /* prevent overflow */
      }
  
      .image-container {
        overflow: auto; /* ensure layout flows properly */
      }
   
    .center-image {
        display: block;
        margin: 0 auto;
        height: 300px;
      }
      .center-image-large {
        display: block;
        margin: 0 auto;
        height: 600px;
      }
    .section1 {
      background-color: black; /* light red */
      height: 105px;
    }
    .section2 {
      background-color: #F6DECD; /* light blue */
      height: 200px;
    }
    .section3 {
      background-color: #F4F0E6; /* light green */
      height: 100px;
    }
    .section4 {
      background-color: black; /* light green */
      height: 300px;
      margin-left: 50px;
      margin-right: 50px;
      margin-bottom: 90px;
      border-radius: 15px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      color: white;
    }
    .head {
      display: flex;
      align-items: center;
      margin: 0px auto;
    }
    .htext {
      flex: 1;
      padding-right: 20px;
      color: #FF3C00;
    }
    .himage {
      width: 100px;
    }
    .container {
      display: flex;
      align-items: center;
      max-width: 800px;
      margin: 20px auto;
    }
    .text {
      flex: 1;
      padding-right: 20px;
    }
    .image {
      width: 200px;
    }
    body {
      background-color: #F6DECD;
      color: #FF3C00;
    /*  margin-bottom: 60px;  or the height of your footer */
    }
    .register {
  display: inline-block;
  padding: 12px 24px;
  margin-left: 40px;
  
  color: white;
  background: linear-gradient(to bottom, #1a73e8, #1558b0);
  border: none;
  border-radius: 8px;
  box-shadow: 0 6px #0a47a1;
  text-decoration: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  
  
  cursor: pointer;
  transition: all 0.2s ease;
}
.register:active {
  box-shadow: 0 2px #0b5ed7;
  transform: translateY(4px);
}
    footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: fixed;
      bottom: 0;
      height: 60px;
      width: 100%;
      background-color: #F4F0E6;
      color: #FF3C00;
    }
    .footer-left {
      display: flex;
      align-items: center;
    }

    .footer-left img {
      height: 40px;
      margin-right: 10px;
    }

    .footer-right a {
      /*margin-left: 10px;*/
      margin-right: 10px;
      color:#314EA6;
      text-decoration: none;
    }

    .footer-right img {
      height: 24px;
      vertical-align: middle;
    }

    /* Slider*/
    .slider {
  width: 600px;
  height: 300px;
  overflow: hidden;
  margin: auto;
  position: relative;
}

.slides {
  display: flex;
  width: 100%;
  animation: slide 9s infinite;
}
.slider {
      position: relative;
      width: 600px;
      height: 350px;
      margin: auto;
      overflow: hidden;
    }
.slider img {
      position: absolute;
      top: 50%;
      left: 50%;
      max-width: 100%;
      max-height: 100%;
      transform: translate(-50%, -50%);
      object-fit: cover; /* or use 'cover' if you prefer filling the box */
      opacity: 0;
      transition: opacity 1s ease-in-out;
      border-radius: 10px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
    }
.slider img.active {
      opacity: 1;
      z-index: 1;
    }

@keyframes slide {
  0%   {margin-left: 0;}
  33%  {margin-left: -100%;}
  66%  {margin-left: -200%;}
  100% {margin-left: 0;}
}
.columns {
      display: flex;
      gap: 80px; /* space between columns */
      padding: 20px;
      margin-left: 70px;
      margin-right: 70px;
      font-family: Arial, sans-serif;
      font-size: 18px;
      color:black;
    }

    .column {
      width: 50%;
    }
  /* Responsive Enhancements */

@media (max-width: 768px) {
  .columns {
    flex-direction: column;
    gap: 20px;
    margin: 0 20px;
  }

  .column {
    width: 100%;
  }

  .slider {
    width: 100%;
    height: auto;
  }

  .slider img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  .section1,
  .section2,
  .section3,
  .section4 {
    height: auto;
    padding: 20px 10px;
    margin-left: 10px;
    margin-right: 10px;
  }

  .center-image,
  .center-image-large,
  .image {
    width: 100%;
    height: auto;
  }

  .container {
    flex-direction: column;
    padding: 10px;
  }

  .head {
    flex-direction: column;
    text-align: center;
  }

  .tab-container {
    flex-wrap: wrap;
    justify-content: center;
  }

  .register {
    margin-left: 0;
    margin-top: 10px;
  }

  footer {
    flex-direction: column;
    height: auto;
    padding: 10px 0;
    text-align: center;
    position: static;
  }

  .footer-left,
  .footer-right {
    justify-content: center;
  }

  .video-row {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}
@media (max-width: 768px) {
  /* Reduce side margins */
  body,
  .section1,
  .section2,
  .section3,
  .section4,
  .main,
  .container {
    margin-left: 5vw;
    margin-right: 5vw;
  }

  /* Responsive font scaling */
  h1 {
    font-size: 6vw; /* Scales with screen width */
  }

  h2 {
    font-size: 5vw;
  }

  h3,
  p,
  li,
  a,
  span {
    font-size: 4vw;
  }

  /* Optional: reduce padding too */
  .section1,
  .section2,
  .section3,
  .section4 {
    padding-left: 3vw;
    padding-right: 3vw;
  }
}
@media (max-width: 768px) {
  /* Reduce side margins */
  body,
  .section1,
  .section2,
  .section3,
  .section4,
  .main,
  .container {
    margin-left: 5vw;
    margin-right: 5vw;
  }

  /* Responsive font scaling */
  h1 {
    font-size: 6vw; /* Scales with screen width */
  }

  h2 {
    font-size: 5vw;
  }

  h3,
  p,
  li,
  a,
  span {
    font-size: 4vw;
  }

  /* Optional: reduce padding too */
  .section1,
  .section2,
  .section3,
  .section4 {
    padding-left: 3vw;
    padding-right: 3vw;
  }
}
.responsive-paragraph {
  font-size: 18px;
  margin: 0 auto;
  padding: 0 5vw;
  max-width: 1000px;
  text-align: left;
}

.responsive-link {
  display: block;
  margin: 20px auto;
  padding: 0 5vw;
  text-align: left;
  max-width: 1000px;
}

@media (min-width: 1200px) {
  .responsive-paragraph,
  .responsive-link {
    padding-left: 80px;
    padding-right: 80px;
  }
}

@media (max-width: 768px) {
  .responsive-paragraph {
    font-size: 4.5vw;
  }

  .responsive-link h4 {
    font-size: 5vw;
  }
}.responsive-link.register {
  display: block;               /* Makes it take a full line */
  width: fit-content;           /* Shrinks to fit the text */
  margin: 20px auto;            /* Horizontally center */
  background-color: #0055aa;
  color: white;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.5px;
  transition: background-color 0.2s ease;
  text-align: center;
}

.responsive-link.register:hover {
  background-color: #003f7d;
  cursor: pointer;
}

@media (max-width: 768px) {
  .responsive-link.register {
    font-size: 4vw;
    padding: 10px 20px;
  }
}