body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

header {
  background-color: #0a4d44;
  color: #fff;
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}




img {
    max-width: 100%;
    height: auto;
}


.article-image {
    max-width: 100%;
    height: auto;
}




/*    end of style for both image and video wrapping    ----------------- */



/* General container for articles */
.article-content {
    max-width: 100%;
    margin: 0 auto;
}

/* Style for images */
.article-content img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

/* Style for videos (iframe or video elements) */
.article-content iframe,
.article-content video,
.article-content embed {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

/* Optional: Add a responsive video wrapper to preserve aspect ratio (16:9) */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Aspect ratio 16:9 */
    height: 0;
    overflow: hidden;
    margin-bottom: 20px;
}

.video-wrapper iframe,
.video-wrapper video,
.video-wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*    end of style for both image and video wrapping    ----------------- */



























/* style for menu start here --------------------------------------------------------------*/

/* Menu toggle button */
.menu-toggle {
  display: none; /* Hidden by default */
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}

.menu-toggle span {
  background-color: #fff;
  width: 30px;
  height: 3px;
  display: block;
}

/* Show the menu toggle button on mobile */
@media (max-width: 768px) {
  .menu-toggle {
    display: flex;
    margin-right: 20px;
  }

  .menu {
    display: none; /* Hide the menu by default on mobile */
    flex-direction: column;
    width: 100%;
    background-color: #333;
    position: absolute;
    top: 60px; /* Adjust based on header height */
    left: 0;
    z-index: 1000;
  }

  .menu li {
    width: 100%;
    text-align: center;
  }

  .menu li a {
    display: block;
    padding: 10px;
    color: #fff;
    text-decoration: none;
  }

  .menu li a:hover {
    background-color: #555;
  }
}

/* Show the menu when the toggle is active */
.menu.active {
  display: flex;
}


/* style for menu end here ------------------------------------------------------*/






















.banner {
  background-image: url('banner.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
  padding: 100px 0;
}

.banner h1 {
  font-size: 36px;
  margin-bottom: 20px;
}

.banner p {
  font-size: 18px;
  margin-bottom: 30px;
}

.button {
  display: inline-block;
  background-color: #fff;
  color: #333;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
}

iframe{
    width: 100%;
}
.content {
  padding: 50px 20px;
  text-align: center;
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px 0;
}

footer p {
  margin: 0;
}



@media (max-width: 768px) {
  .menu {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    margin-top: 10px;
  }
  
  .menu li {
    margin: 0;
  }
  
  .menu-toggle {
    display: flex;
  }
  
  .banner h1 {
    font-size: 24px;
  }
}




/*================================ slide show start=================================*/

/* Style for slideshow container and images */

/*

.slideshow-container {
	max-width: 100%;
	position: relative;
	margin: auto;
}

.mySlides {
	display: none;
	width: 100%;
}

*/

/*================================ slide show end =================================*/



/*================================ social media =================================*/


       /* Add your CSS styles for icons */
        .social-icons {
            display: flex;
            justify-content: right;
            align-items: right;
            margin: 3px;
        }

        .social-icons a {
            display: inline-block;
            margin: 0 3px;
            text-decoration: none;
            color: #fff;
        }

        .social-icons a img {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            border: 1px solid #333;
            transition: transform 0.3s ease-in-out;
        }

        .social-icons a:hover img {
            transform: scale(1.1);
        }


/*================================ social media end =================================*/




/*================================ category listing style start =================================*/


       /* Add your CSS styles for category listing */
       
       /*
        .category-list {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 3px;
        }

        .category-list a {
            display: inline-block;
            margin: 0 3px;
            text-decoration: none;
            color: #fff;
        }

        .category-list a img {
            width: 100px;
            height: 100px;
            border-radius: 10%;
            border: 1px solid #333;
            transition: transform 0.3s ease-in-out;
        }

        .category-list a:hover img {
            transform: scale(1.01);
        }
    */

/*================================ category listing style end =================================*/



/*================================ course details style start =================================*/
        .course-title {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }

        .course-description {
            font-size: 16px;
            line-height: 1.6;
            color: #666;
        }

        .back-link {
            margin-top: 20px;
        }

        .back-link a {
            text-decoration: none;
            color: #007bff;
        }

/*================================ course details style end =================================*/






/*------------------------------- new slide show style start ---------------------------------- */

        /* Your CSS styles for slideshow */
        .slideshow-container {
            /*max-width: 800px;*/
			max-width: 100%;
            position: relative;
            margin: auto;
        }

        .mySlides {
            display: none;
            width: 100%;
        }

        /* Styles for enabling and disabling images */
		/*
        .disabled {
            display: none;
        }
		*/

/*------------------------------- new slide show style end ---------------------------------- */



/*------------------------------- start style for video  ---------------------------------- */

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100) */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/*------------------------------- end style for vidoe ---------------------------------- */








/*------------------------------- NEW  style for category listing  ---------------------------------- */

.category-wrapper {
  width: 100%;
}

.category-list {
  display: flex;
  flex-wrap: wrap; /* Ensures items wrap on smaller screens */
  justify-content: space-around; /* Spreads items evenly */
  gap: 15px; /* Adds spacing between the items */
}

.category-item {
  flex: 1 1 calc(25% - 10px); /* Four items per row, minus the gap spacing */
  max-width: 220px;
  text-align: center;
}

.category-item img {
  width: 100%;
  height: auto;
  max-width: 175px;
  max-height: 175px;
  border-radius: 10%;
  border: 1px solid #333;
  transition: transform 0.3s ease-in-out;
}

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

/* Responsive Category List for Tablet */
@media (max-width: 768px) {
  .category-item {
    flex: 1 1 calc(33.33% - 10px); /* Three items per row */
  }
}

/* Responsive Category List for Mobile */
@media (max-width: 480px) {
  .category-item {
    flex: 1 1 calc(50% - 10px); /* Two items per row */
  }
}



/*------------------------------- END  NEW  style for category listing  ---------------------------------- */


/* --- fixed Navbar Layout custom code start here--- */


.navbar {
  background-color: #0a4d44;
  padding: 10px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
}

/* Scoped specifically to navbar so it doesn't break page content */
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Menu Items --- */
.menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px; /* This creates the gap between menu items */
  align-items: center; /* Aligns items vertically */
}

.menu li {
  position: relative; /* Needed for dropdown positioning */
}

.menu li a {
  text-decoration: none;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  padding: 8px 4px;
  transition: color 0.3s;
  display: block;
}

.menu li a:hover {
  color: #007bff; /* Highlight color on hover */
}

/* --- Dropdown Styles (Desktop) --- */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #0a4d44; /* Matches navbar color */
  min-width: 220px; /* Width of the dropdown box */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 999;
  top: 100%; /* Positions it directly below the "Programs" link */
  left: 0;
  border-top: 2px solid #007bff; /* Optional accent line */
}

.dropdown-content a {
  color: #ffffff;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 14px; /* Slightly smaller for sub-items */
  font-weight: normal;
  border-bottom: 1px solid rgba(255,255,255,0.1); /* Separator line */
}

.dropdown-content a:hover {
  background-color: #083d36; /* Darker green on hover */
  color: #007bff;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* --- Mobile Toggle Button --- */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.menu-toggle span {
  height: 3px;
  width: 25px;
  background-color: #ffffff; /* Changed to white to be visible on green bg */
  border-radius: 2px;
}

/* --- Content Section (Prevents layout breaking) --- */
.content .container {
  display: block; /* Ensures vertical stacking for headings/images */
  max-width: 1200px;
  margin: 30px auto;
  padding: 0 20px;
}

.post-content img {
  max-width: 100%;
  height: auto;
  margin-top: 15px;
}

/* --- Responsive Behavior --- */
@media (max-width: 992px) {
  .menu-toggle {
    display: flex;
  }

  .menu {
    display: none; /* Hidden on mobile by default */
    flex-direction: column;
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    background: #0a4d44;
    padding: 20px 0; /* Padding top/bottom */
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    gap: 0; /* Remove gap for vertical stacking */
  }

  .menu.active {
    display: flex; /* Shown when toggled */
  }

  .menu li {
    width: 100%;
    text-align: center;
  }

  .menu li a {
    padding: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  /* --- Mobile Dropdown Tweaks --- */
  .dropdown-content {
    position: static; /* Makes it flow naturally in the list, pushing items down */
    box-shadow: none; /* Remove shadow to look flat */
    background-color: #083d36; /* Slightly different shade to distinguish submenu */
    width: 100%;
    display: none; /* Keeps it hidden until hover/click */
  }

  /* Indent submenu items on mobile */
  .dropdown-content a {
    padding-left: 30px;
    font-size: 14px;
  }

  /* Ensure hover works on mobile (or tap) */
  .dropdown:hover .dropdown-content {
    display: block;
  }
}

/* --- fixed Navbar Layout custom code ends here--- */