:root {
  --color-phthalo-blue: rgb(0, 13, 129);
  --color-lavender: rgb(210, 218, 239);
  --color-night: rgb(18, 19, 15);
  --color-powder-blue: rgb(164, 194, 223);
  --color-white: rgba(255, 255, 255, 0.969);
  --color-aqua-blue: #5bc5d2;
  --color-black: #000000;
  --color-dark-gray: #333333;
  --color-orange: #f28e1a;
  --color-bright-green: #a3ed29;
  --color-neon-yellow: #fbff2e;
  --color-hot-pink: #ff1d9c;
  --color-midnight-blue: #3a3e4e;
  --color-peach: #ffab48;
  --color-slate-gray: #575b70;
  --color-dark-teal: #003e58;
  --color-cave-water-blue: #002637;
  font-size: clamp(14px, 1.5vw, 16px); /* Responsive base font-size */
}

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

body {
  margin-top: 100px;
  font-family: "Arial", sans-serif;
}

.pdf-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center content horizontally */
  justify-content: center; /* Center content vertically, if needed */
  width: 100%;
  margin: 0 auto; /* Centers the wrapper itself if it doesn't already span full width */
  padding-top: 80px;
}

.about-us {
  position: flex;
  width: 100%;
  margin: clamp(40px, 5vw, 80px) auto;
  padding: clamp(20px, 2vw, 30px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(233, 233, 218);
  transition: transform 0.3s ease;
  box-shadow: rgba(0, 0, 0, 0.5) 1.95px 1.95px 2.6px;
}

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

.program-image {
  width: clamp(20%, 5vw, 40%); /* Responsive width */
  padding: clamp(10px, 2vw, 25px);
  margin-left: clamp(20px, 3vw, 50px);
  height: auto;
}

.about-us-des {
  text-align: left;
  margin-left: clamp(20px, 3vw, 50px);
  padding: clamp(20px, 5vw, 50px);
  line-height: 1.5;
}

.header {
  top: 0;
  left: 0;
  position: fixed;
  z-index: 1000;
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  padding: clamp(10px, 3vw, 20px) clamp(20px, 5vw, 50px);
  background-color: var(--color-white);
  display: flex;
  justify-content: space-between; /* Space logo and hamburger apart */
  align-items: center; /* Ensures both logo and hamburger are vertically aligned */
}

.hamburger {
  display: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 20px; /* Margin to the right */
  margin-left: auto; /* Push the hamburger to the far right */
  margin-top: -32.5px;
}

.bar {
  display: block;
  width: 28px;
  height: 4px;
  margin: 4px auto;
  border-radius: 2px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: #046bbf;
}

.header .logo {
  width: clamp(200px, 20vw, 250px); /* Adjusted logo size */
  height: auto;
}

.image-container {
  position: relative;
  width: 100%;
  overflow: visible;
}

.thumbnail-image {
  height: clamp(15%, 5vw, 25%);
  width: 100%;
  object-fit: fill;
  filter: brightness(50%);
}

.description-image {
  position: relative;
  width: 100%;
  height: 650px;
}

.description-image img,
video {
  display: block;
  max-width: 100%;
  height: 650px;
  object-fit: cover;
  filter: brightness(30%);
  width: 100%;
}

.content-overlay {
  position: absolute;
  top: 4%;
  left: 0%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  color: white;
  padding-left: clamp(20px, 5vw, 50px); /* Adds 50% gap from the left */
}

.hero-section {
  font-size: clamp(30px, 6vw, 80px); /* Responsive hero text */
  position: absolute;
  text-align: left;
  top: 35%;
  left: 11.5%;
  color: var(--color-white);
}

.hero-section p {
  font-size: clamp(10px, 2vw, 27px); /* Responsive text */
  padding-top: 20px;
  font-style: italic;
  text-align: left;
}

.hero-section h6 {
  font-size: clamp(19.5px, 4vw, 52px); /* Responsive subheading */
  color: var(--color-aqua-blue);
  font-weight: 1000;
}
.our-programs {
  display: flex; /* Use flexbox for layout */
  justify-content: left; /* Center items horizontally */
  flex-wrap: wrap; /* Allow items to wrap in smaller screens */
  position: relative;
  width: 100%; /* Full width of the container */
  max-width: 1200px; /* Set a maximum width for desktop viewing */
  margin: 0 auto; /* Center the container */
  color: var(--color-white);
  transition: transform 0.3s ease;
  padding: clamp(20px, 4vw, 20px); /* Responsive padding for top and bottom */
}

.our-programs h3 {
  z-index: 1;
}

.our-programs p {
  text-align: justify; /* Justify text for paragraph */
  padding: clamp(20px, 3vw, 50px); /* Responsive padding for paragraphs */
  font-size: clamp(14px, 2vw, 20px); /* Responsive text size */
  max-width: 800px; /* Set a max width for paragraph text */
  margin: 0 auto; /* Center the paragraph text */
}

.description-card {
  justify-content: center;
  position: relative;
  width: 100%;
  display: flex;
  /* justify-content: space-between; */
  padding: 20px;
  gap: 20px;
  align-items: center;
  color: var(--color-white);
  transition: transform 0.3s ease;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.description-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}

.our-vision-mission {
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
  margin-left: 6.5%;
  gap: 20px;
}

.vision-container p {
  margin-left: 1%;
}

.vision-container,
.mission-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
}

.vision-container h1,
.mission-container h1 {
  min-width: 150px;
  margin-right: 40px;
  white-space: nowrap;
}

.vision-container p,
.mission-container p {
  flex: 1;
}

.first-image img {
  max-width: 300px;
  height: auto;
  border: 3px solid #138b91;
}

.second-image img {
  max-width: 300px;
  height: auto;
  border: 3px solid #138b91;
}

.description-card-paragraph {
  flex: 1;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.description-card-heading {
  flex: 1; /* Flex-grow to fill available space */
  max-width: 500px; /* Set a maximum width for the heading */
  display: flex; /* Use flexbox for layout */
  justify-content: center; /* Centers content horizontally */
  align-items: center; /* Centers content vertically */
  margin-top: 10%; /* Margin from the top */
  margin-left: 10%;
  padding: clamp(20px, 3vw, 50px) 20px; /* Add left padding */
  font-size: clamp(1.5rem, 5vw, 2.5rem); /* Responsive font size */
  text-align: center; /* Centers the text itself */
}

.description-card-paragraph p {
  text-align: justify; /* Justifies paragraph text */
  padding: clamp(20px, 3vw, 50px);
  font-size: clamp(14px, 2vw, 20px); /* Responsive text */
  margin: 0; /* Optional: reset margin for paragraphs */
}

.description-card-paragraph h1 {
  padding: clamp(20px, 3vw, 50px);
  /* margin-left: 50%; */
}

.blue-line {
  width: 100%;
  background-color: #138b91;
  height: clamp(5px, 1vw, 10px); /* Responsive height */
}

.addresses {
  padding-left: clamp(10px, 2vw, 20px);
  gap: 15px;
  flex-direction: column;
  display: flex;
  padding: clamp(10px, 2vw, 20px);
  font-size: clamp(12px, 2vw, 15px); /* Responsive font */
}

.icon-text {
  display: flex;
  align-items: center;
}

.icon-text img {
  margin-right: 10px;
  width: 21px;
  height: 21px;
}

.addresses span {
  font-size: clamp(14px, 2vw, 18px); /* Responsive font */
}

.useful-links {
  display: flex;
  flex-direction: column;
  /* flex-direction: row;*/
  margin-right: 50%;
}

.contact-us-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.social-media-container {
  margin-top: 5px;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.social-media-icons {
  margin: 0 10px;
  width: 40px;
  height: 40px;
}

.image-paragraph {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.dancing-image-container {
  display: flex;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0px;
  filter: brightness(70%);
}

.dancing-image-container img {
  max-width: 150px;
  height: auto;
}

.hamburger {
  display: none;
}

/*CUSTOM COLOURS*/

.blue {
  color: #5bc5d2;
  font-style: italic;
  font-weight: bold;
}

.orange {
  color: #f28e1a;
  font-style: italic;
  font-weight: bold;
}

.green {
  color: #a3ed29;
  font-style: italic;
}

.yellow {
  color: #fbff2e;
  font-weight: bold;
}

.pink {
  color: #ff1d9c;
  font-style: italic;
  font-weight: bold;
}

@media (max-width: 480px) {
  .our-programs {
    padding: 10px; /* Adjust padding for very small screens */
  }
  .program-image {
    width: 100%; /* Image takes full width on mobile screens */
    margin-left: 0; /* Center the image */
    padding: 5px; /* Further reduce padding */
  }

  .first-image img {
    max-width: 100%; /* Full width for mobile screens */
    margin-left: 0; /* Ensure image is centered */
    padding: 5px; /* Optional: add some padding for spacing */
  }
}

@media (max-width: 768px) {
  .description-content {
    flex-direction: column;
    align-items: center;
  }

  .naviheader {
    position: fixed;
    width: 100%;
    bottom: 0;
  }

  .our-programs {
    flex-direction: column; /* Stack items vertically on smaller screens */
    align-items: center; /* Center items horizontally */
  }

  .first-image img,
  .second-image img {
    display: block;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
  }

  .image-paragraph {
    flex-direction: column;
    align-items: center;
  }

  .description-card-paragraph {
    max-width: 100%;
    text-align: center;
  }

  .dancing-image-container {
    justify-content: center;
  }

  .dancing-image-container img {
    max-width: 100%;
  }

  .vision-container,
  .mission-container {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .program-image {
    width: clamp(70%, 10vw, 80%); /* Make the image wider for smaller screens */
    padding: 10px; /* Reduce padding for smaller screens */
  }

  .about-us-des {
    width: 100%; /* Text area takes full width on small screens */
  }

  .program-image,
  .about-us-des {
    margin-left: 0;
  }

  .navbar {
    display: none;
    flex-direction: column;
  }

  .navbar.active {
    display: block;
  }

  .nav-links {
    display: relative; /* Hide the links */
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    width: 100%;
    text-align: center;
  }

  .nav-links.active {
    display: flex;
    flex-direction: column;
  }

  .nav-links,
  .navbar a {
    display: none; /* Hides the navigation links */
  }

  .hamburger {
    display: block;
    cursor: pointer;
  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-menu {
    display: block;
    position: absolute;
    left: -100%;
    top: 100%;
    padding-top: 10px;
    gap: 20px;
    flex-direction: column;
    background-color: #138b91;
    width: 100%;
    text-align: center;
    transition: 0.7s ease;
  }

  .nav-item {
    margin: 2px 0;
  }

  .nav-menu.active {
    display: flex;
    flex-direction: column;
    left: 0;
  }

  .header {
    display: fixed;
    top: 0;
    justify-content: space-between;
    width: 100%;
    z-index: 1000;
    flex-direction: column;
    align-items: flex-start;
  }

  .description-card-paragraph,
  .about-us-des {
    margin: 0;
    padding: 20px;
  }

  .pdf-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    justify-content: center; /* Center content vertically, if needed */
    width: 100%;
    margin: 0 auto; /* Centers the wrapper itself if it doesn't already span full width */
    padding-top: 10px;
  }

  .card-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 20px;
    margin: 0 auto;
  }

  .pdf-page {
    display: block;
    margin: 20px auto; /* Center each page and add spacing between pages */
  }

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

  .program-image,
  .about-us-des {
    margin-left: 0;
  }

  .footer-links {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-left,
  .footer-right {
    margin-bottom: 10px; /* Add some spacing between sections */
  }

  .useful-links {
    margin-left: 0;
  }

  .useful-links h2 {
    text-align: center;
  }

  .useful-links li {
    font-size: clamp(14px, 3vw, 16px); /* Make the links text responsive */
    margin-bottom: 10px;
  }

  .links ul {
    padding-left: 0; /* Remove extra padding */
    text-align: center; /* Center the list items */
  }

  .links li {
    padding: 10px 0; /* Ensure padding is consistent for smaller screens */
  }

  .description-card-heading {
    padding: clamp(10px, 2vw, 20px); /* Reduced padding for mobile */
    font-size: clamp(1.2rem, 4vw, 2rem); /* Smaller font size for mobile */
    margin-top: 5%; /* Optional: adjust the top margin */
    flex: 1; /* Flex-grow to fill available space */
    max-width: 500px; /* Set a maximum width for the heading */
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    margin-right: 10%;
    text-align: center; /* Centers the text itself */
  }

  .contact-us-box {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .footer span {
    display: block;
    max-width: 100%;
    text-align: left; /* Centers the text horizontally */
    margin-left: auto; /* Centers the text */
    margin-right: auto; /* Centers the text */
    padding-top: 10px; /* Optional: Add some space above the text */
  }

  .icon-text {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Vertically center the icon and text */
    justify-content: flex-start; /* Left-align items within this block */
  }

  .bottom-logo {
    display: block;
    max-width: 50%;
    margin: 0 auto;
  }

  .useful-links {
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
  }

  .useful-links h2,
  .useful-links span {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    white-space: nowrap;
  }

  .addresses {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Align items to the left */
    justify-content: center; /* Center items vertically within the container */
    padding: clamp(5px, 2vw, 10px); /* Optional: Add padding for spacing */
    max-width: 800px; /* Optional: Set a max width for better centering */
    margin: 0 auto; /* Center the container horizontally on the page */
  }

  .social-media-icons {
    margin-top: 10px; /* Adjust this value to pull icons down */
  }

  .social-media-container {
    display: flex;
    max-width: 10%;
    gap: 15px;
    margin-left: 0 auto;
    margin-right: 0 auto;
  }
}

/* Larger screens maintain the original layout */
@media (min-width: 769px) {
  .footer-links {
    flex-direction: row; /* Keep links side-by-side for larger screens */
    justify-content: space-between;
  }

  .useful-links {
    flex-direction: column;
    text-align: left; /* Left align on larger screens */
    padding-left: 0;
  }

  .program-image {
    width: 25%; /* Slightly reduce width for larger screens */
    padding: 15px; /* Add some padding for balance */
  }

  .nav-menu {
    display: none;
  }
}