:root {
       --primary-green: #6B8E23;
       --deep-maroon: #800000;
       /* Muted green for borders, text, buttons */
       /* Muted maroon for hover states */
       --light-beige: #f5f5dc;
       /* Main background */
       --soft-cream: #5C2526;
       /* Section backgrounds */
       --pale-taupe: #D2B48C;
       /* Borders, card backgrounds */
       --muted-beige: #E8DAB2;
       /* Card backgrounds when not selected */
       --light-gray: #EDEDED;
       /* Call-to-action section background */
       --dark-text: #333333;
       /* Primary text color */
       --light-text: #666666;
       /* Secondary text color */
   }

   * {

       font-family: 'Noto Sans Tamil', 'Poppins', sans-serif;

   }

   a {
       text-decoration: none;
       transition: color 0.15s ease;
   }

   a:hover,
   a:focus,
   a:active {
       text-decoration: none !important;
       /* underline removed */
   }

   p {
       text-align: justify !important;
   }

   /* Main Banner */
   .banner-section {
       position: relative;
      
       display: flex;
       flex-direction: column;
       align-items: center;


   }

   .banner-section h1 {
       font-size: 2.8rem;
       font-weight: 900;
       color: var(--dark-maroon);
       text-align: center;
       margin-bottom: 1rem;
   }

   .banner-section .fst-italic {
       font-size: 20px;
       color: #5c2526;
       text-align: center;
       margin-bottom: 3rem;
   }

   /* THREE CARD SECTION */
   .three-card-section {
       width: 100%;

       display: flex;
       justify-content: center;
   }

   .three-card-wrapper {
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 0;
   }

   /* CARD BASE STYLE */
   .card-box {
       position: relative;
       overflow: hidden;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
       transition: all 0.4s ease;
       text-decoration: none;
       height: 480px;
   }

   .card-img {
       width: 100%;
       height: 100%;
       background-size: cover;
       background-position: center;
       transition: transform 0.8s ease;
   }

   .card-box:hover .card-img {
       transform: scale(1.15);
   }

   /* GRADIENT OVERLAY */
   .card-box::after {
       content: "";
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       height: 60%;
       background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
       pointer-events: none;
   }

   .card-box .bottom-bar {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       height: 110px;
       /* overall bar height */
       background: rgba(136, 136, 136, 0.6);

       /* MAIN MAGIC: Slanted shape */
       clip-path: polygon(0 0, 100% 40%, 100% 100%, 0% 100%);
       z-index: 3;
   }



   .card-label {
       position: absolute;
       bottom: 20px;
       left: 50px;
       color: #fff;
       font-size: 1.6rem;
       font-weight: bold;
       z-index: 3;
       pointer-events: none;
       transition: all 0.3s ease;

       /* NEW BACKGROUND */
       padding: 10px 18px;
       border-radius: 8px;
   }


   /* LABEL ARROW ANIMATION */
   .card-label span {
       margin-left: 8px;
       font-size: 2rem;
       transition: margin-left 0.3s ease;
   }

   /* Hover: arrow movement only */
   .card-box:hover .card-label span {
       margin-left: 15px;
   }

   /* Card Sizes */
   .card-box.small-card {
       width: 350px;
       height: 520px;
       margin-bottom: 60px;
   }

   .card-box.center-card {
       width: 400px;
       height: 580px;
       margin: 0 -40px;
       z-index: 5;
   }

   /* RESPONSIVE */
   @media (max-width: 768px) {

       .three-card-wrapper {
           flex-wrap: wrap;
           gap: 20px;
       }

       .card-box {
           width: 90%;
           height: 420px;
       }

       /* On mobile, labels already always visible */
       .card-label {
           opacity: 1 !important;
           visibility: visible !important;
       }
   }


   /* Program Card and Other Sections */
   .program-card {
       transition: all 0.3s ease;
       border: 1px solid var(--pale-taupe);
       border-radius: 10px;
       overflow: hidden;
       background-color: var(--muted-beige);
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
   }

   .program-card:hover {
       transform: translateY(-10px);
       box-shadow: 0 15px 30px rgba(107, 142, 35, 0.15);
   }

   .program-card img {
       height: 200px;
       object-fit: cover;
       transition: transform 0.5s ease;
   }

   .program-card:hover img {
       transform: scale(1.05);
   }



   /* Wisdom Quote Section */
   /* .wisdom-quote {
      background: linear-gradient(to bottom, 
              #e3e8e1, 
              #e3e8e1),
           url('https://source.unsplash.com/random/1200x600?ancient,scripture');
       background-size: cover;
       background-position: center;
       background-attachment: fixed;
       padding: 5rem 0;
       color: #005450;
       text-align: center;
       position: relative;
   }

   .wisdom-quote::before {
       content: "\201C";
       font-family: Georgia, serif;
       font-size: 8rem;
       color: rgba(255, 255, 255, 0.2);
       position: absolute;
       top: 2rem;
       left: 2rem;
   }

   .wisdom-quote::after {
       content: "\201D";
       font-family: Georgia, serif;
       font-size: 8rem;
       color: rgba(255, 255, 255, 0.2);
       position: absolute;
       bottom: 2rem;
       right: 2rem;
   }

   .wisdom-quote blockquote {
       font-family: 'Merriweather', serif;
       font-size: 1.8rem;
       font-weight: 300;
       line-height: 1.6;
       margin: 0 auto;
       max-width: 800px;
       position: relative;
       z-index: 1;
   }

   .wisdom-quote .quote-author {
       font-style: italic;
       margin-top: 1.5rem;
       font-size: 1.2rem;
   } */

   /* Icon Boxes */
   .icon-box {
       text-align: center;
       padding: 2rem;
       border-radius: 10px;
       transition: all 0.3s ease;
       background-color: white;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
       height: 100%;
   }

   .icon-box:hover {
       transform: translateY(-10px);
       box-shadow: 0 15px 30px rgba(107, 142, 35, 0.15);
   }

   .icon-box i {
       font-size: 3rem;
       color: var(--primary-green);
       margin-bottom: 1.5rem;
       transition: all 0.3s ease;
   }

   .icon-box:hover i {
       transform: scale(1.2);
   }

   .icon-box h3 {
       color: var(--primary-green);
       margin-bottom: 1rem;
   }

   /* Section Headings */
   .section-heading {
       position: relative;
       display: inline-block;
       margin-bottom: 2rem;
   }

   .section-heading::after {
       content: '';
       position: absolute;
       bottom: -10px;
       left: 0;
       width: 50px;
       height: 3px;
       background-color: var(--primary-green);
   }

   /* Animation Classes */
   .animate-up {
       animation: fadeInUp 1s ease;
   }

   .animate-down {
       animation: fadeInDown 1s ease;
   }

   .animate-left {
       animation: fadeInLeft 1s ease;
   }

   .animate-right {
       animation: fadeInRight 1s ease;
   }

   /* Keyframes */
   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(20px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @keyframes fadeInDown {
       from {
           opacity: 0;
           transform: translateY(-20px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @keyframes fadeInLeft {
       from {
           opacity: 0;
           transform: translateX(-20px);
       }

       to {
           opacity: 1;
           transform: translateX(0);
       }
   }

   @keyframes fadeInRight {
       from {
           opacity: 0;
           transform: translateX(20px);
       }

       to {
           opacity: 1;
           transform: translateX(0);
       }
   }

   /* About Section */
   .about-section {
       position: relative;
       overflow: hidden;
   }

   .about-section::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: url('https://www.transparenttextures.com/patterns/rice-paper.png');
       opacity: 0.1;
       z-index: -1;
   }


   /* Testimonial Section */
   .testimonial-card {
       background-color: var(--muted-beige);
       border: 1px solid var(--pale-taupe);
       border-radius: 10px;
       padding: 2rem;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
       transition: all 0.3s ease;
   }

   .testimonial-card:hover {
       transform: translateY(-10px);
       box-shadow: 0 15px 30px rgba(107, 142, 35, 0.15);
   }

   .testimonial-card .user-img {
       width: 60px;
       height: 60px;
       border-radius: 50%;
       margin-right: 1rem;
   }

   .testimonial-card .rating i {
       color: #f4c430;
   }










   /* XL Media Query (1200px - 1440px) */
   @media screen and (min-width: 75rem) and (max-width: 90rem) {
       .section-heading {
           font-size: 2.8rem;
       }

       .event-card-img img {
           height: 220px;
       }

       .card-title {
           font-size: 1.6rem;
       }

       .card-text {
           font-size: 1rem;
       }
   }

   /* XXL Media Query (1440px and above) */
   @media screen and (min-width: 90rem) {
       .section-heading {
           font-size: 3rem;
       }

       .event-card-img img {
           height: 240px;
       }

       .card-title {
           font-size: 1.7rem;
       }

       .card-text {
           font-size: 1.1rem;
       }
   }

   /* Mobile Media Query (max-width: 768px) */
   @media screen and (max-width: 48rem) {
       .section-heading {
           font-size: 2rem;
       }

       .text-muted {
           font-size: 0.9rem;
       }

       .event-card-img img {
           height: 180px;
       }

       .card-title {
           font-size: 1.3rem;
       }

       .card-text {
           font-size: 0.85rem;
       }

       .btn-green,
       .btn-outline-green {
           font-size: 0.85rem;
           padding: 0.4rem 1.2rem;
       }
   }





   .contribution-section {
       padding: 5rem 0;
       background-color: var(--light-beige);
   }

   .section-heading {
       font-size: 2.5rem;
       margin-bottom: 1rem;
       opacity: 0;
       transform: translateY(-20px);
       animation: fadeInDown 0.8s ease forwards;
   }

   .text-muted {
       font-size: 1.1rem;
       opacity: 0;
       animation: fadeIn 1s ease forwards 0.2s;
   }

   .contribution-card {
       background: #fff;
       border: none;
       border-radius: 15px;
       overflow: hidden;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
       transition: transform 0.3s ease, box-shadow 0.3s ease;
   }

   .contribution-card:hover {
       transform: translateY(-10px);
       box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
   }

   .contribution-card-img {
       position: relative;
       overflow: hidden;
   }

   .contribution-card-img img {
       width: 100%;
       height: 200px;
       object-fit: cover;
       transition: transform 0.3s ease;
   }

   .contribution-card:hover .contribution-card-img img {
       transform: scale(1.05);
   }

   .contribution-card-img .overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
       opacity: 0;
       transition: opacity 0.3s ease;
   }

   .contribution-card:hover .contribution-card-img .overlay {
       opacity: 1;
   }

   .card-body {
       padding: 1.5rem;
   }

   .card-title {
       font-size: 1.5rem;
       font-weight: 700;
       margin-bottom: 0.75rem;
   }

   .card-text {
       font-size: 0.95rem;
       line-height: 1.6;
       color: var(--light-text);
   }

   .btn-green {
       background-color: var(--primary-green);
       color: #fff;
       padding: 0.5rem 1.5rem;
       font-size: 0.9rem;
       transition: background-color 0.3s ease, transform 0.3s ease;
   }

   .btn-green:hover {
       background-color: var(--deep-maroon);
       transform: translateX(5px);
   }

   .btn-outline-green {
       border: 2px solid var(--primary-green);
       color: var(--primary-green);
       padding: 0.5rem 1.5rem;
       font-size: 0.9rem;
       transition: background-color 0.3s ease, color 0.3s ease;
   }

   .btn-outline-green:hover {
       background-color: var(--primary-green);
       color: #fff;
   }

   @keyframes fadeInDown {
       from {
           opacity: 0;
           transform: translateY(-20px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
       }

       to {
           opacity: 1;
       }
   }

   /* XL Media Query (1200px - 1440px) */
   @media screen and (min-width: 75rem) and (max-width: 90rem) {
       .section-heading {
           font-size: 2.8rem;
       }

       .contribution-card-img img {
           height: 220px;
       }

       .card-title {
           font-size: 1.6rem;
       }

       .card-text {
           font-size: 1rem;
       }
   }

   /* XXL Media Query (1440px and above) */
   @media screen and (min-width: 90rem) {
       .section-heading {
           font-size: 3rem;
       }

       .contribution-card-img img {
           height: 240px;
       }

       .card-title {
           font-size: 1.7rem;
       }

       .card-text {
           font-size: 1.1rem;
       }
   }

   /* Mobile Media Query (max-width: 768px) */
   @media screen and (max-width: 48rem) {
       .section-heading {
           font-size: 2rem;
       }

       .text-muted {
           font-size: 0.9rem;
       }

       .contribution-card-img img {
           height: 180px;
       }

       .card-title {
           font-size: 1.3rem;
       }

       .card-text {
           font-size: 0.85rem;
       }

       .btn-green,
       .btn-outline-green {
           font-size: 0.85rem;
           padding: 0.4rem 1.2rem;
       }
   }