* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: sans-serif;
   text-decoration: none;
   list-style: none;
 }
 
 .header {
   position: sticky;
   top: 0;
   width: 100%;
   box-shadow: 0 4px 20px hsla(207, 24%, 35%, 0.1);
   background-color: #000;
   z-index: 1;
 }
 
 nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 30px;
 }
 
 .logo a {
   font-size: 24px;
   font-weight: bold;
   color: #fff;
 }
 
 .logo a span {
   color: #8739fa;
 }
 
 .menu {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .menu a {
   display: block;
   padding: 7px 15px;
   font-size: 17px;
   font-weight: 500;
   transition: 0.2s all ease-in-out;
   color: #fff;
 }
 
 .menu:hover a {
   opacity: 0.4;
 }
 
 .menu a:hover {
   opacity: 1;
   color: #fff;
 }
 
 .menu-icon {
   display: none;
 }
 
 #menu-toggle {
   display: none;
 }
 
 #menu-toggle:checked ~ .menu {
   transform: scale(1, 1);
 }
 
 @media only screen and (max-width: 950px) {
   .menu {
     flex-direction: column;
     background-color: #000;
     align-items: start;
     position: absolute;
     top: 70px;
     left: 0;
     width: 100%;
     z-index: 1;
     transform: scale(1, 0);
     transform-origin: top;
     transition: transform 0.3s ease-in-out;
     box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
   }
 
   .menu a {
     margin-left: 12px;
   }
 
   .menu li {
     margin-bottom: 10px;
     position: relative;
   }
 
   .menu-icon {
     display: block;
     color: #fff;
     font-size: 28px;
     cursor: pointer;
   }
 }
 @media (max-width: 600px) {
   .menu {
     display: none; /* Hide menu by default on small screens */
   }
   #menu-toggle:checked + .menu {
     display: block; /* Show menu when checkbox is checked */
   }
   .menu-icon {
     display: block; /* Show hamburger icon on small screens */
   }
 }
 .dropdown {
   display: none; /* Hide dropdown by default */
   position: absolute; /* Position it relative to the parent li */
   background-color: #333; /* Match the header background */
   list-style: none;
   padding: 0;
   margin: 0;
   z-index: 1; /* Ensure it appears above other content */
 }
 
 .menu li:hover .dropdown {
   display: block; /* Show dropdown on hover */
 }
 
 .dropdown li a {
   padding: 10px 15px; /* Padding for dropdown items */
 }
 
 .dropdown li a:hover {
   background-color: #444; /* Change background on hover for dropdown items */
 }

.page-hero {
   position: relative;
   overflow: hidden;
}

.background-video-content {
   position: relative;
   z-index: 1;
}

video[poster] {
   object-fit: cover;
   width: 100%;
   height: 100%;
}

.hero-content {
   position: relative;
   z-index: 2; /* Ensure text is above the background */
}

.cta-button {
   display: inline-block;
   padding: 10px 20px;
   margin-top: 20px;
   background-color: rgba(255, 0, 0, 0.7); /* Semi-transparent red */
   color: white;
   text-decoration: none;
   border-radius: 5px;
   transition: background-color 0.3s;
}

.cta-button:hover {
   background-color: rgba(255, 0, 0, 1); /* Solid red on hover */
}

@media (max-width: 768px) {
   .hero {
       height: 60vh; /* Reduce height on smaller screens */
   }

   .hero-content h1 {
       font-size: 2em; /* Adjust font size for mobile */
   }

   .hero-content p {
       font-size: 1.2em; /* Adjust font size for mobile */
   }
}
.hero1 {
   background: url('') no-repeat center center/cover; /* Add your background image */
   height: 30vh;
   justify-content: center;
   align-items: center;
   text-align: center;
   color: white;
}

.hero-content1 {
   background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for better text visibility */
   padding: 20px;
   border-radius: 10px;
}

.company-name1 {
   font-size: 3em;
   margin-bottom: 10px;
}



.cta-button1 {
   background-color: #ff5722; /* Change to your preferred color */
   color: white;
   padding: 10px 20px;
   text-decoration: none;
   border-radius: 5px;
   transition: background-color 0.3s ease;
}

.cta-button:hover {
   background-color: #e64a19; /* Darker shade for hover effect */
}
article {
   --img-scale: 1.001;
   --title-color: black;
   --link-icon-translate: -20px;
   --link-icon-opacity: 0;
   position: relative;
   border-radius: 16px;
   box-shadow: none;
   background: beige;
   transform-origin: center;
   transition: all 0.4s ease-in-out;
   overflow: hidden;
 }
 
 article a::after {
   position: absolute;
   inset-block: 0;
   inset-inline: 0;
   cursor: pointer;
   content: "";
 }
 
 /* basic article elements styling */
 article h2 {
   margin: 0 0 18px 0;
   font-family: "Bebas Neue", cursive;
   font-size: 1.9rem;
   letter-spacing: 0.06em;
   color: var(--title-color);
   transition: color 0.3s ease-out;
 }
 
 figure {
   margin: 0;
   padding: 0;
   aspect-ratio: 16 / 9;
   overflow: hidden;
 }
 
 article img {
   max-width: 100%;
   transform-origin: center;
   transform: scale(var(--img-scale));
   transition: transform 0.4s ease-in-out;
 }
 
 .article-body {
   padding: 24px;
 }
 
 article a {
   display: inline-flex;
   align-items: center;
   text-decoration: none;
   color: #28666e;
 }
 
 article a:focus {
   outline: 1px dotted #28666e;
 }
 
 article a .icon {
   min-width: 24px;
   width: 24px;
   height: 24px;
   margin-left: 5px;
   transform: translateX(var(--link-icon-translate));
   opacity: var(--link-icon-opacity);
   transition: all 0.3s;
 }
 
 /* using the has() relational pseudo selector to update our custom properties */
 article:has(:hover, :focus) {
   --img-scale: 1.1;
   --title-color: #28666e;
   --link-icon-translate: 0;
   --link-icon-opacity: 1;
   box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
 }
 
 
 /************************ 
 Generic layout (demo looks)
 **************************/
 

 
 .articles {
   display: grid;
   max-width: 1200px;
   margin-inline: auto;
   padding-inline: 24px;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   gap: 24px;
 }
 
 @media screen and (max-width: 960px) {
   article {
     container: card/inline-size;
   }
   .article-body p {
     display: none;
   }
 }
 
 @container card (min-width: 380px) {
   .article-wrapper {
     display: grid;
     grid-template-columns: 100px 1fr;
     gap: 16px;
   }
   .article-body {
     padding-left: 0;
   }
   figure {
     width: 100%;
     height: 100%;
     overflow: hidden;
   }
   figure img {
     height: 100%;
     aspect-ratio: 1;
     object-fit: cover;
   }
 }
 
 .sr-only:not(:focus):not(:active) {
   clip: rect(0 0 0 0); 
   clip-path: inset(50%);
   height: 1px;
   overflow: hidden;
   position: absolute;
   white-space: nowrap; 
   width: 1px;
 }
 .images-container {
   display: flex; /* Use flexbox for layout */
   justify-content: center; /* Center the images */
   flex-wrap: wrap; /* Allow wrapping to the next row */
   gap: 20px; /* Space between images */
   padding: 20px;
}

.image-wrapper {
   width: 200px; /* Set a fixed width for the circular images */
   height: 200px; /* Set a fixed height for the circular images */
   overflow: hidden; /* Hide overflow */
   border-radius: 50%; /* Make the images circular */
   border: 2px solid #ccc; /* Optional: add a border */
   display: flex; /* Center the image inside the wrapper */
   justify-content: center; /* Center the image horizontally */
   align-items: center; /* Center the image vertically */
}

.image-wrapper img {
   width: 100%; /* Make the image fill the wrapper */
   height: auto; /* Maintain aspect ratio */
   object-fit: cover; /* Cover the entire area of the wrapper */
}
.footer {
   background-color: beige; /* Background color for the footer */
   color: #06781b; /* Text color */
   padding: 40px 20px; /* Padding for the footer */
   font-family: Arial, sans-serif; /* Font family */
   border-top-left-radius: 25px; /* Rounded corners */
   border-top-right-radius: 25px; /* Rounded corners */
   text-align: center; /* Center the text in the footer */
}

.footer-container {
   display: flex; /* Use flexbox for layout */
   flex-direction: column; /* Stack items vertically */
   align-items: center; /* Center items horizontally */
}

.footer-section {
   margin: 10px 0; /* Add some margin between sections */
}

.footer-section h3 {
   border-bottom: 1px solid #fff; /* Underline for section headings */
   padding-bottom: 10px; /* Padding below heading */
}

.footer-section ul {
   list-style: none; /* Remove bullet points */
   padding: 0; /* Remove padding */
}

.footer-section ul li {
   margin: 10px 0; /* Margin for list items */
}

.footer-section a {
   color: #06781b; /* Link color */
   text-decoration: none; /* Remove underline from links */
}

.footer-section a:hover {
   text-decoration: underline; /* Underline on hover */
}

.footer-bottom {
   text-align: center; /* Center the copyright text */
   margin-top: 20px; /* Margin above copyright text */
   font-size: 0.9em; /* Smaller font size for copyright */
}
.about-us {
   padding: 40px 20px; /* Padding for the section */
   background-color: black; /* Light background color */
}

.about-container {
   display: flex; /* Use flexbox for layout */
   align-items: center; /* Center items vertically */
   max-width: 1200px; /* Maximum width of the container */
   margin: 0 auto; /* Center the container */
}

.about-image {
   flex: 1; /* Allow image section to take equal space */
   margin-right: 20px; /* Space between image and text */
}

.about-image img {
   width: 100%; /* Make the image responsive */
   height: auto; /* Maintain aspect ratio */
   border-radius: 8px; /* Optional: rounded corners for the image */
}

.about-text {
   flex: 2; /* Allow text section to take more space */
   text-align: justify;
   padding-right: 50px;
   color: white;
}

.about-text h2 {
   margin-bottom: 20px; /* Space below the heading */
}

.about-text p {
   margin-bottom: 15px; /* Space between paragraphs */
   line-height: 1.6; /* Improved readability */
}
body {
   margin: 0;
   font-family: Arial, sans-serif;
}



.facilities {
   background-color: #f9f9f9; /* Light background for contrast */
   padding: 20px; /* Padding around the section */
   text-align: center; /* Center align text */
   border: 1px solid #ddd; /* Light border */
   border-radius: 100px; /* Rounded corners */
   max-width: 600px; /* Limit width */
   margin: 20px auto; /* Center the section */
}

.facilities h2 {
   color: #333; /* Dark text color */
   margin-bottom: 20px; /* Spacing below the heading */
}

.facilities ul {
   list-style: none; /* Remove default list styling */
   padding: 0; /* Remove padding */
   margin: 0; /* Remove margin */
}

.facilities li {
   font-size: 18px; /* Font size for list items */
   color: #555; /* Medium text color */
   margin: 10px 0; /* Spacing between list items */
}

.tick {
   color: #4CAF50; /* Green color for tick marks */
   font-size: 20px; /* Size of tick marks */
   margin-right: 10px; /* Space between tick and text */
}
.button-container {
   text-align: center; /* Center text within the button container */
}

.enquire-button {
   display: inline-block; /* Inline block for padding and margin */
   padding: 15px 30px; /* Padding for top/bottom and left/right */
   font-size: 18px; /* Font size */
   color: #fff; /* White text color */
   background-color: #4CAF50; /* Green background color */
   border: none; /* Remove default border */
   border-radius: 5px; /* Rounded corners */
   text-decoration: none; /* Remove underline */
   transition: background-color 0.3s, transform 0.3s; /* Smooth transition for hover effect */
}

.enquire-button:hover {
   background-color: #45a049; /* Darker green on hover */
   transform: translateY(-2px); /* Slight lift effect on hover */
}

@media (max-width: 600px) {
   .enquire-button {
       padding: 12px 20px; /* Adjust padding for smaller screens */
       font-size: 16px; /* Smaller font size for smaller screens */
   }
}
.accreditation-container {
   text-align: center;
   background-color: #000; /* White background for the container */
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

h1 {
   font-size: 24px;
   color: #FFF;
   margin-bottom: 20px;
}

.logos {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 20px;
}

.logo-item {
   margin: 0 15px; /* Space between logos */
}

.logo-item img {
   width: 100px; /* Adjust logo size */
   height: 100px; /* Set height to match width for a perfect circle */
   border-radius: 50%; /* This makes the logo circular */
   object-fit: cover; /* Ensures the image covers the circle without distortion */
}

.star {
   font-size: 36px; /* Bigger star size */
   color: gold;
   margin: 0 10px; /* Space around the stars */
}