body {
   font-family: Arial, sans-serif;
   background: #f0f2f1;
 }

 .icon {
   color: #3b5d4f;
 }

 /* Sticky Navbar */
 .navbar {
   font-weight: bold;
   position: sticky;
   top: 0;
   z-index: 1000;
   background: #3b5d4f;
   box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
 }

 .nav-link {
   color: white !important;
 }

 .nav-link.active {
   color: #3b5d4f !important;
 }

 .nav-link:hover {
   color: #f9bf29 !important;
 }

 .navbar ul li a {
   text-decoration: none;
   color: #ccc;
   padding: 10px;
   position: relative;
 }

 .navbar ul li a::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 0%;
   height: 3px;
   background: #f4c542;
   transition: 0.3s;
 }

 .navbar ul li a.active::after {
   width: 100%;
   /* Full underline for active item */
 }

 .navbar ul li a:hover::after {
   width: 100%;
   /* Full underline on hover */
 }

 .navbar-logo {
   height: 50px;
   margin-right: 15px;
   border-radius: 8px;
 }

 /* Carousel wrapper with preview */
 .carousel-container {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 15px;
   overflow: hidden;
   padding: 20px 0;
 }

 .carousel {
   flex: 0 0 60%;
 }

 .carousel-item img {
   width: 100%;
   height: 400px;
   object-fit: cover;
   border-radius: 16px;
   box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
 }

 /* Side previews */
 .preview {
   flex: 0 0 20%;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .preview img {
   width: 100%;
   height: 250px;
   object-fit: cover;
   border-radius: 12px;
   opacity: 0.6;
   transition: 0.3s;
 }

 .preview img:hover {
   opacity: 1;
   transform: scale(1.05);
 }

 .preview h6 {
   margin-top: 10px;
   font-weight: bold;
 }

 .preview p {
   margin: 0;
   font-size: 14px;
   color: #555;
 }


 /* Custom 3-column section */
 .custom-section {
   padding: 30px 0;
 }

 .custom-card {
   /* background: #a6f5a678; */
   border-radius: 12px;
   padding: 40px 20px;
   text-align: center;
   font-weight: bold;
 }

 .custom-card-h1,
 .custom-card-h2,
 .custom-card-h3 {
   margin: 0;
   font-size: 24px;
   color: #fff;
 }

 .custom-card.left {
   background: #3b5d4f;
 }

 .custom-card.right {
   background: #3b5d4f;
 }

 .custom-card-title {
   background: #3b5d4f;
 }

 .custom-img-card {
   width: 100%;
   /* full width of parent */
   max-width: 400px;
   /* optional: limit card size */
   height: auto;
   border-radius: 12px;
   overflow: hidden;
   /* ensures image doesn’t spill out */
   box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
 }

 .custom-card img {
   width: 100%;
   height: 100%;
   border-radius: 12px;
   object-fit: cover;
   /* cover container without gaps */
   display: block;
   /* remove extra space below image */
 }

 .vertical-accordion {
   background: #28a745;
   color: white;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   border-radius: 0 15px 15px 0;
   transition: width 0.3s ease;
   overflow: hidden;
 }

 .vertical-accordion.collapsed {
   width: 50px;
   /* collapsed width */
 }

 .vertical-accordion.expanded {
   width: 200px;
   /* expanded width */
 }

 .vertical-accordion .accordion-toggle {
   writing-mode: vertical-rl;
   transform: rotate(180deg);
   border: none;
   background: transparent;
   color: white;
   font-weight: bold;
   padding: 10px;
   cursor: pointer;
 }

 .accordion-content {
   display: none;
   width: 100%;
 }

 .vertical-accordion.expanded .accordion-content {
   display: block;
 }

 .transition-all {
   transition: all 0.3s ease;
 }

 /* Heading Background */
 .h_background {
   background: linear-gradient(90deg, #3b5d4f 0%, #7bc47f 100%);
   color: #fff;
   padding: 18px 0;
   border-radius: 10px;
   box-shadow: 0 2px 12px rgba(59, 93, 79, 0.10);
   letter-spacing: 1px;
 }

 .mission-section {
   background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
 }

 .mission-card {
   background: #ffffff;
   border-left: 6px solid #388e3c;
   /* Ayurveda green accent */
   transition: transform 0.3s ease;
 }

 .mission-card:hover {
   transform: translateY(-5px);
 }

 .mission-title {
   font-size: 1.8rem;
   font-weight: 700;
   color: #2e7d32;
 }

 .mission-text {
   font-size: 1rem;
   line-height: 1.7;
   text-align: justify;
   color: #444;
 }

 .mission-icon-wrapper {
   background: #c8e6c9;
   border-radius: 50%;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   padding: 20px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

 .mission-icon {
   width: 120px;
   height: auto;
 }

 .vision-section {
   background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
 }

 .vision-card {
   background: #ffffff;
   border-left: 6px solid #f4c542;
   /* purple accent */
   transition: transform 0.3s ease;
 }

 .vision-card:hover {
   transform: translateY(-5px);
 }

 .vision-title {
   font-size: 1.8rem;
   font-weight: 700;
   color: #f4c542;
 }

 .vision-text {
   font-size: 1rem;
   line-height: 1.7;
   text-align: justify;
   color: #444;
 }

 .vision-img {
   max-width: 250px;
   border: 5px solid #ede7f6;
   border-radius: 50%;
   padding: 10px;
   background: #fff;
 }

 .gallery-item {
   cursor: pointer;
   transition: transform 0.3s;
 }

 .gallery-item:hover {
   transform: scale(1.04) rotate(-1deg);
   z-index: 2;
 }

 .gallery-img {
   transition: filter 0.3s;
   display: block;
   width: 100%;
   height: 220px;
   object-fit: cover;
 }

 .gallery-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.45);
   opacity: 0;
   transition: opacity 0.3s;
 }

 .gallery-item:hover .gallery-overlay {
   opacity: 1;
 }

 .gallery-icon {
   color: #000;
   font-size: 2rem;
   transition: transform 0.3s;
 }

 .gallery-item:hover .gallery-icon {
   transform: scale(1.2);
 }