* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     /* font-family: 'Arial', sans-serif; */
     font-family: 'Inter', sans-serif;
     scroll-behavior: smooth;
 }

 @media (max-width: 767px) {

     #donation-button {
         bottom: 6rem !important;
         left: 50% !important;
         transform: translateX(-50%) !important;
     }

     #donation-button button {
         font-size: 0.875rem !important;
         padding-left: 1.5rem !important;
         padding-right: 1.5rem !important;
     }
 }

 .hamburger-line {
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     height: 4px;
 }

 /* Animation to a clean X - Stays visible when menu is open */
 .active .line-1 {
     transform: translateY(11px) rotate(45deg);
     width: 100% !important;
     background-color: var(--text-brand-gold);
 }

 .active .line-2 {
     opacity: 0;
     transform: translateX(20px);
 }

 .active .line-3 {
     transform: translateY(-11px) rotate(-45deg);
     width: 100% !important;
     background-color: var(--text-brand-gold);
 }

 /* Branding Colors */
 .bg-brand-red {
     background-color: #660802;
 }

 .text-brand-red {
     color: #660802;
 }

 .text-brand-gold {
     color: #f1c141;
 }

 .border-brand-gold {
     border-color: #f1c141;
 }

 /* Prevent scroll when menu is open */
 .no-scroll {
     overflow: hidden;
 }

 /* Drawer Overlay */
 #drawer-overlay {
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease;
 }

 #drawer-overlay.open {
     opacity: 1;
     pointer-events: auto;
 }

 /* Donation button pulse animation */
 @keyframes pulse-donation {
     0% {
         box-shadow: 0 0 0 0 var(--dark);
     }

     70% {
         box-shadow: 0 0 0 10px rgba(139, 92, 246, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
     }
 }

 .pulse-donation {
     animation: pulse-donation 2s infinite;
 }

 :root {
     --primary: #8d6e63;
     --secondary: #5d4037;
     --accent: #d7ccc8;
     --light: #efebe9;
     --dark: #4e342e;
     --text: #3e2723;
     --white: #ffffff;
     --gold: #f1c141;
     --gold-light: #faef8f;
     --gold-dark: #c68023;
     --red: #aa0e02;
     --maroon: #660802;
     --green: #1c3812;
     --black: #020103;
     --gold-90: rgba(255, 179, 0, 0.9);
     /* 90% opacity */
     --gold-75: rgba(255, 179, 0, 0.75);
     /* 75% opacity */
     --gold-50: rgba(255, 179, 0, 0.5);
     /* 50% opacity */
     --gold-25: rgba(255, 179, 0, 0.25);
     /* 25% opacity */
     --gold-10: rgba(255, 179, 0, 0.1);
     /* 10% opacity */
     --matte-olive: #6b8e23;
     /* Olive Drab */
     --matte-sage: #77815c;
     /* Muted Sage */
     --matte-forest: #4a5d23;
     /* Deep Forest */
     --matte-moss: #5a7247;
     /* Moss Green */
     --matte-jade: #3a7d44;
     --matte-teal: #5f9ea0;
     /* Cadet Blue */
     --matte-mint: #98bfa9;
     /* Dusty Mint */
     --matte-pine: #3a5f50;
     /* Dark Pine */
     --matte-emerald: #2e6149;
     /* Deep Emerald */
     --matte-army: #4b5320;
     /* Army Green */
     --matte-feldgrau: #4d5d53;
     /* German Feldgrau */
     --matte-drab: #828e6e;
     /* Light Drab */
     --matte-thyme: #6c7e5e;
     --bg-brand-red: #660802;
     --text-brand-red: #660802;
     --text-brand-gold: #f1c141;
     --border-brand-gold: #f1c141;
     --matte-feldgrau: #4d5d53;
     --matte-drab: #828e6e;
     --matte-thyme: #6c7e5e;
     --bg-brand-red: #660802;
     --text-brand-red: #660802;
     --text-brand-gold: #f1c141;
     --border-brand-gold: #f1c141;
     --brand-red: #B91C1C;
     --brand-gold: #D97706;

     /* Dried Thyme */
     background: radial-gradient(circle at 33% 100%,
             #fed373 0%,
             /* Golden yellow */
             #f15245 30%,
             /* Orange */
             #d92e7f 60%,
             /* Pink */
             #9b36b7 85%,
             /* Purple */
             #515ecf 100%
             /* Blue */
         );
 }

 body {
     font-family: 'Inter', sans-serif;
     scroll-behavior: smooth;
     color: var(--text);
     background-color: var(--light);
     line-height: 1.6;
 }

 h1,
 h2,
 h3,
 h4 {
     font-family: 'Inter', sans-serif;
     scroll-behavior: smooth;
     font-weight: 700;
     /* color: var(--secondary); */
 }

 .container {
     width: 100%;
     max-width: 2000px;
     margin: 0;
     padding: 0;
 }




 /* Header Styles - FIXED */
 header {
     background-color: var(--white);
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     position: fixed;
     width: 100%;
     top: 0;
     padding: 0;
     margin: 0;
     z-index: 1000;
 }


 /* Header Flex for logo and nav alignment */
 .header-flex {
     display: flex;
     align-items: center;
     height: 70px;
     /* set a fixed smaller height if desired */
     justify-content: space-between;
     width: 100%;
     padding: 0 20px;
     box-sizing: border-box;
 }

 .header-flex .logo {
     display: flex;
     align-items: center;
     flex: 0 0 auto;
 }

 .header-flex nav {
     flex: 1 1 auto;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     margin-left: 300px;
 }

 .nav-links {
     display: flex;
     gap: 20px;
 }

 nav ul.nav-links {
     justify-content: flex-end;
     flex: 1 1 auto;
 }

 .header-flex .menu-toggle {
     margin-left: 9px;
 }


 .main-title {
     font-size: 32px;
     font-weight: 700;
     margin-bottom: 4px;
 }

 .sub-title {
     font-size: 14px;
     color: #666;
     letter-spacing: 1px;
 }

 nav ul {
     display: flex;
     gap: 1rem;
     list-style: none;
     padding: 0;
     margin: 0;
     align-items: center;
 }

 nav ul li {
     margin-left: 0;
 }

 nav ul li a {
     text-decoration: none;
     color: var(--text);
     font-weight: 500;
     font-size: 1.2rem;
     transition: color 0.3s;

     /* padding: 0.2rem 1rem;  */
 }

 nav ul li a:hover {
     color: var(--primary);
 }

 .donate-btn {
     background-color: var(--gold);
     color: var(--white);
     padding: 10px 20px;
     border-radius: 30px;
     font-weight: 600;
     transition: background 0.3s;
 }

 .donate-btn:hover {
     background-color: var(--dark);
     color: var(--white);
 }

 .hero-slide.active {
     opacity: 1;
     z-index: 10;
 }

 /* Progress bar animation reset */
 .progress-reset {
     transition: none !important;
     width: 0 !important;
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-5px);
     }
 }

 .animate-badge {
     animation: float 4s ease-in-out infinite;
 }

 /* Hero Section */
 .hero {
     position: relative;
     height: 100vh;
     min-height: 600px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: white;
 }

 .hero h3 {
     color: #ffb300;
     font-size: 1.6rem;
     margin-top: 40px;
     margin-bottom: 15px;
     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
     z-index: 2;
 }

 /* Hero Slide Transitions */
 .hero-slide {
     transition: opacity 1s ease-in-out;
     opacity: 0;
     z-index: 1;

 }

 /* Prevent scroll when menu is open */
 .no-scroll {
     overflow: hidden;
 }



 .cta-buttons {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-top: 30px;
 }

 .btn {
     padding: 12px 30px;
     border-radius: 30px;
     text-decoration: none;
     font-weight: 600;
     font-size: 1.1rem;
     transition: all 0.3s ease;
 }

 .btn-primary {
     background-color: var(--gold);
     color: var(--white);
 }

 .btn-primary:hover {
     background-color: var(--dark);
 }

 .btn-secondary {
     background-color: transparent;
     border: 2px solid var(--white);
     color: var(--white);
 }

 .btn-secondary:hover {
     background-color: var(--white);
     color: var(--dark);
 }

 /* Services Section */
 .services {

     background-color: var(--white);
 }

 .services-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
     padding: 10px 20px 50px 20px;
     gap: 30px;

 }

 .service-card {

     background: var(--light);
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     transition: transform 0.3s ease;
 }

 .service-card:hover {
     transform: translateY(-10px);
 }

 .service-img {
     height: 200px;
     overflow: hidden;
 }

 .service-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
 }

 .service-card:hover .service-img img {
     transform: scale(1.1);
 }

 .service-content {
     padding: 25px;
 }

 .service-content h3 {
     font-size: 1.5rem;
     margin-bottom: 15px;
     color: var(--secondary);
 }

 .service-icon {
     font-size: 2.5rem;
     color: var(--gold);
     margin-bottom: 15px;
 }

 /* Gallery Section */
 .gallery-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     gap: 20px;
 }

 .gallery-item {
     border-radius: 10px;
     overflow: hidden;
     height: 250px;
     position: relative;
 }

 .gallery-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
 }

 .gallery-item:hover img {
     transform: scale(1.1);
 }

 .gallery-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(141, 110, 99, 0.7);
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

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

 .gallery-overlay i {
     color: var(--white);
     font-size: 2rem;
 }


 /* Donation Section */
 .donation {
     background: linear-gradient(rgba(93, 64, 55, 0.9), rgba(93, 64, 55, 0.9)),
         url('image/g4.png') center/100% 100% no-repeat;

     color: var(--white);
     text-align: center;
     margin-bottom: 10px;
 }

 .donation h2 {
     padding: auto;
     color: var(--white);
 }

 .donation p {
     max-width: 700px;
     margin: 0 auto 30px;
     font-size: 1.1rem;
 }

 .donation-options {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 20px;
     margin-top: 40px;
 }

 .donation-option {
     background: rgba(255, 255, 255, 0.1);
     border-radius: 10px;
     padding: 30px;
     width: 500px;
     backdrop-filter: blur(5px);
     border: 1px solid rgba(255, 255, 255, 0.2);
 }

 .donation-option h3 {
     color: var(--gold);
     margin-bottom: 15px;
 }

 .donation-btn {
     background-color: var(--gold);
     color: var(--white);
     padding: 12px 24px;
     /* flexible padding */
     border-radius: 30px;
     font-size: 1.2rem;
     /* base font size */
     font-weight: 600;
     border-color: var(--gold);
     text-decoration: none;
     transition: background 0.3s, transform 0.2s;
     display: inline-block;
     /* works well in responsive layouts */
     text-align: center;
     cursor: pointer;
     box-shadow: var(--gold-25) 0px 4px 15px;
     /* subtle shadow */
 }

 /* Hover/active states */
 .donation-btn:hover {
     background-color: var(--dark);
     /* slightly darker gold */
     transform: translateY(-2px);
 }

 .donation-btn:active {
     transform: translateY(0);
 }

 /* Responsiveness with media queries */
 @media (max-width: 992px) {

     /* tablets */
     .donation-btn {
         font-size: 1.1rem;
         padding: 10px 20px;
     }
 }

 @media (max-width: 1024px) {
     .nav-links {
         display: none;
     }

     .menu-toggle {
         display: block;
     }

     .menu-items {
         position: fixed;
         top: 0;
         right: -100%;
         width: 80%;
         height: 100vh;
         background: #660802;
         display: flex;
         flex-direction: column;
         padding: 80px 20px;
         transition: right 0.3s ease;
         z-index: 999;
     }

     .menu-items.active {
         right: 0;
     }
 }

 /* Fixed Mobile Nav Link Hover - Solid Yellow Gold Only */
 .mobile-nav-link-custom {
     transition: all 0.2s ease-in-out !important;
 }

 .mobile-nav-link-custom:hover {
     background-color: var(--text-brand-gold) !important;
     color: var(--text-brand-red) !important;
     transform: translateX(5px);
 }

 /* Custom styling for touch target size and transition effects */
 .social-icon-wrapper {
     transition: all 300ms ease;
 }

 /* Desktop hide hamburger */
 @media (min-width: 1025px) {
     .menu-toggle {
         display: none;
     }

     .menu-items {
         display: none !important;
     }
 }

 @media (max-width: 600px) {

     /* small mobiles */
     .donation-btn {
         font-size: 1rem;
         padding: 8px 18px;
         width: 100%;
         /* full width button for small screens */
         border-radius: 25px;
     }
 }

 /* Contact Section */
 .contact-container {
     display: flex;
     gap: 50px;
     padding: 20px 30px 10px 35px;
 }

 .contact-info {
     flex: 1;
 }

 .contact-info h3 {
     font-size: 1.8rem;
     margin-bottom: 20px;
 }

 .contact-details {
     margin-top: 30px;
 }

 .contact-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 25px;
 }

 .contact-icon {
     background: var(--primary);
     color: var(--white);
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 15px;
     flex-shrink: 0;
 }

 .contact-text h4 {
     font-size: 1.2rem;
     margin-bottom: 5px;
 }

 .contact-form {

     flex: 1;
     background: var(--white);
     padding: 30px;
     border-radius: 10px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
 }

 .form-group {
     margin-bottom: 20px;

 }

 .form-group label {
     display: block;
     margin-bottom: 8px;
     font-weight: 500;
 }

 .form-group input,
 .form-group textarea {
     width: 100%;
     padding: 12px 15px;
     border: 1px solid #ddd;
     border-radius: 5px;
     font-family: 'Inter', sans-serif;
     scroll-behavior: smooth;
     font-size: 1rem;
 }

 .form-group textarea {
     height: 150px;
     resize: vertical;
 }

 /* Footer */
 footer {
     background: var(--dark);
     color: var(--light);
     padding: 40px;
 }

 .footer-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 40px;
     margin-bottom: 40px;
 }

 .footer-col h3 {
     color: var(--gold);
     font-size: 1.5rem;
     margin-bottom: 25px;
     position: relative;
 }

 .footer-col h3:after {
     content: '';
     position: absolute;
     bottom: -10px;
     left: 0;
     width: 50px;
     height: 2px;
     background: var(--gold);
 }

 .footer-links {
     list-style: none;
 }

 .footer-links li {
     margin-bottom: 12px;
 }

 .footer-links a {
     color: var(--light);
     text-decoration: none;
     transition: color 0.3s;
 }

 .footer-links a:hover {
     color: var(--gold);
 }

 .social-links {
     display: flex;
     gap: 15px;
     margin-top: 20px;
 }

 .social-links a {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.1);
     color: var(--white);
     transition: all 0.3s ease;
 }

 .social-links a:hover {
     background: var(--gold);
     transform: translateY(-3px);
 }

 .copyright {
     text-align: center;
     padding-top: 20px;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     font-size: 0.9rem;
 }

 /* Responsive Design */
 @media (max-width: 992px) {


     .contact-container {
         flex-direction: column;
     }
 }

 @media (max-width: 768px) {
     .hero h2 {
         font-size: 2.5rem;
     }

     .cta-buttons {
         flex-direction: column;
         gap: 10px;
     }

     .btn {
         width: 100%;
     }

     nav ul {
         display: none;
     }

     .mobile-menu-btn {
         display: block;
     }

     .logo h1 {
         font-size: 1.5rem;
         /* Smaller text on mobile */
     }
 }

 .logo {
     display: flex;
     align-items: center;
 }

 .logo h1 {
     font-size: 1.9rem;
     margin-left: 10px;
     color: var(--primary);
     white-space: nowrap;
 }

 .logo span {
     color: var(--gold);
 }

 .logo img {
     max-width: 60px;
     height: 60px;
     margin-left: 0;
     margin-right: 10px;
     filter: drop-shadow(0 8px 16px rgba(41, 41, 41, 0.1));
     transition: transform 0.3s ease;
     transform: translateZ(0);
     will-change: transform;
 }

 .logo img:hover {
     transform: scale(1.15);
 }

 /* Responsive */
 @media (max-width: 768px) {
     .cta-buttons {
         flex-direction: column;
         gap: 10px;
     }

     .btn {
         width: 100%;
     }
 }

 .hamburger {
     display: none;
     flex-direction: column;
     cursor: pointer;
 }

 .hamburger span {
     height: 3px;
     width: 25px;
     background: var(--primary);
     margin: 4px 0;
     border-radius: 5px;
 }

 @media (max-width: 768px) {
     .hero h2 {
         font-size: 2.5rem;
     }

     .cta-buttons {
         flex-direction: column;
         gap: 10px;
     }

     .btn {
         width: 100%;
     }

     nav ul.nav-links {
         display: none !important;
     }

     .mobile-menu-btn {
         display: block;
     }

     .logo h1 {
         font-size: 1.5rem;
     }

     .header-flex {
         flex-direction: row;
         align-items: center;
         padding: 10px 10px;
     }
 }

 .menu-toggle {
     display: none;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 30px;
     background: transparent;
     border: none;
     cursor: pointer;
     padding: 0;
     z-index: 10;
 }

 .menu-toggle:focus {
     outline: none;
 }

 .menu-toggle span {
     display: block;
     width: 28px;
     height: 3px;
     background: var(--text);
     border-radius: 2px;
     margin: 4px 0;
     transition: all 0.3s ease;
 }

 .menu-items {
     display: flex;
     gap: 25px;
     align-items: center;
 }

 .menu-items a {
     color: var(--gold);
     text-decoration: none;
     font-size: 1.1rem;
     font-weight: 500;
     padding: 8px 15px;
     border-radius: 6px;
     transition: all 0.3s ease;
 }

 .menu-items a:hover {
     background: rgba(255, 255, 255, 0.15);
 }

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

     .menu-items {
         position: fixed;
         top: 0;
         right: -100%;
         height: 100vh;
         width: 250px;
         background: rgba(62, 39, 35, 0.65);
         flex-direction: column;
         justify-content: center;
         align-items: center;
         gap: 0px;
         transition: right 0.4s ease-in-out;
         z-index: 5;
         padding: 10px;
         box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
     }

     .menu-items.active {
         right: 0;
     }

     .menu-items a {
         font-size: 1.3rem;
         width: 100%;
         text-align: center;
         padding: 15px;
     }

     .hero h1 {
         font-size: 2.2rem;
     }

     .logo-text {
         font-size: 1.5rem;
     }
 }

 .menu-items .donate-btn {
     margin-top: auto;
     text-align: center;
     background: #f4a300;
     color: #000;
     padding: 12px;
     border-radius: 6px;
 }

 @media (max-width: 480px) {
     header {
         padding: 1rem;
     }

     .hero h1 {
         font-size: 1.8rem;
     }

     .hero p {
         font-size: 1rem;
     }
 }

 /* Hamburger animation */
 .menu-toggle.active span:nth-child(1) {
     transform: rotate(45deg) translate(5px, 6px);
 }

 .menu-toggle.active span:nth-child(2) {
     opacity: 0;
 }

 .menu-toggle.active span:nth-child(3) {
     transform: rotate(-45deg) translate(5px, -6px);
 }

 /* Overlay for mobile menu */
 .overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(3px);
     z-index: 998;
     /* menu से नीचे */
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease, visibility 0.3s ease;
 }

 .overlay.active {
     opacity: 1;
     visibility: visible;
 }


 .slides-container {
     position: relative;
     width: 100%;
     height: 100%;
     margin-top: -10px;
 }



 .controls {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 15px;
     flex-wrap: wrap;
     /* allow wrap on small screens */
     margin-top: 20px;
 }

 .btn {
     background: #2c7744;
     color: white;
     border: none;
     padding: 12px 25px;
     font-size: 1rem;
     border-radius: 30px;
     cursor: pointer;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     gap: 8px;
     text-align: center;
 }

 .btn:hover {
     background: #2a6e3c;
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(218, 27, 96, 0.6);
 }

 .btn i {
     font-size: 1rem;
 }

 .btn:active {
     transform: translateY(1px);
 }

 .indicators {
     display: flex;
     gap: 12px;
     margin-top: 20px;
 }

 .indicator {
     width: 14px;
     height: 14px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.3);
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .indicator.active {
     background: #ff8a00;
     transform: scale(1.3);
 }

 @media (max-width: 768px) {
     h1 {
         font-size: 2.5rem;
     }

 }

 @media (max-width: 768px) {
     .btn {
         width: 100%;
         justify-content: center;
         font-size: 1.1rem;
         padding: 14px 0;
     }
 }

 @media (max-width: 480px) {
     .btn {
         font-size: 1rem;
         padding: 12px 0;
     }
 }

 .logos {
     display: flex;
     align-items: center;
 }

 .logos img {
     max-width: 90px;
     height: 90px;
     margin-left: 0;
     filter: drop-shadow(0 8px 16px rgba(41, 41, 41, 0.1));
     transition: transform 0.3s ease;
     transform: translateZ(0);
     will-change: transform;
 }

 .logos img:hover {
     transform: scale(1.15);
 }

 /* Responsive, modern slider nav arrows */
 .slide-nav {
     background: none;
     border: none;
     font-size: 1.5rem;
     cursor: pointer;
     color: var(--gold);
     padding: 0 8px;
     border-radius: 0;
     z-index: 10;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     box-shadow: none;
     transition: color 0.2s;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .slide-nav:hover {
     background: rgba(255, 255, 255, 0.35);
     color: #da1b60;
     box-shadow: 0 4px 16px rgba(218, 27, 96, 0.18);
 }

 .slide-nav.prev {
     left: 10px;
 }

 .slide-nav.next {
     right: 10px;
 }

 @media (max-width: 768px) {
     .slide-nav {
         font-size: 1.6rem;
         padding: 10px 12px;
     }

     .slide-nav.prev {
         left: 4px;
     }

     .slide-nav.next {
         right: 4px;
     }
 }

 @media (max-width: 480px) {
     .slide-nav {
         font-size: 1.2rem;
         padding: 8px 8px;
     }

     .slide-nav.prev {
         left: 2px;
     }

     .slide-nav.next {
         right: 2px;
     }
 }

 .gaushala-info {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
 }

 .column {
     flex: 1 1 45%;
     min-width: 300px;
 }

 .column h3 {
     text-align: center;
     color: #4b4b4b;
 }

 .column p {
     font-size: 16px;
     line-height: 1.6;
 }

 /* About Section Styling */
 .about {
     padding: 60px 20px;
     background-color: #f9f9f9;
     font-family: 'Inter', sans-serif;
     scroll-behavior: smooth;
     max-width: 100%;
     margin: 0 auto;
 }

 .section-title h2 {
     text-align: center;
     font-size: 2.3rem;
     color: var(--text);
     margin-bottom: 30px;
     position: relative;
 }

 .section-title h2:after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 50%;
     transform: translateX(-50%);
     width: 10%;
     height: 3px;
     background: var(--gold);
 }

 .about-img {
     width: 100%;
     max-width: 800px;
     margin: 0 auto 30px;
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }

 .about-img img {
     width: 100%;
     height: auto;
     display: block;
     transition: transform 0.4s ease;
 }

 .about-img:hover img {
     transform: scale(1.03);
 }

 .language-section {
     margin-bottom: 40px;
     padding: 0 10px;
 }

 .language-section h3 {
     color: #5a8f3d;
     font-size: 1.5rem;
     margin-bottom: 20px;
     padding-bottom: 8px;
     border-bottom: 2px solid #e0e0e0;
 }

 .language-section p {
     color: #555;
     line-height: 1.7;
     margin-bottom: 15px;
     font-size: 1.05rem;
 }

 .instagram-link {
     /* Layout */
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 12px 28px;
     margin: 20px 0;
     position: relative;
     overflow: hidden;
     border-radius: 12px;

     /* Glass Effect */
     background: rgba(255, 255, 255, 0.12);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.25);

     /* Text */
     color: white;
     font-size: 1rem;
     font-weight: 600;
     text-decoration: none;
     z-index: 1;

     /* Shadow */
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 
 .insta-container {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 20px;
     position: relative;
 }

 .insta-badge {
     position: relative;
     display: inline-flex;
     align-items: center;
     padding: 8px 16px 8px 30px;
     /* Extra left padding for icon */
     border-radius: 50px;
     font-family: 'Inter', sans-serif;
     scroll-behavior: smooth;
     font-weight: bold;
     color: white;
     background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
     text-decoration: none;
     transition: all 0.2s ease-in-out;
     margin-left: 20px;
     /* Space for overlapping icon */
     overflow: visible;
     /* Allow icon to overflow */
 }

 .insta-badge:hover {
     transform: scale(1.05);
     box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
 }

 .insta-badge img {
     position: absolute;
     left: -12px;
     /* Half outside the box */
     height: 40px;
     /* Larger than box */
     width: 40px;
     border: 3px solid white;
     border-radius: 10px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     background: white;
     transition: all 0.2s ease-in-out;
 }

 .insta-badge:hover img {
     transform: rotate(10deg);
 }

 .badge-text {
     margin-left: 20px;
     /* Space after icon */
 }

 .btn-primary {
     display: block;
     width: 220px;
     margin: 40px auto 0;
     padding: 12px 25px;
     background-color: #5a8f3d;
     color: white;
     text-align: center;
     text-decoration: none;
     border-radius: 30px;
     font-weight: 600;
     transition: all 0.3s ease;
     border: 2px solid #5a8f3d;
     font-size: 1.05rem;
 }

 .btn-primary:hover {
     background-color: transparent;
     color: #5a8f3d;
 }

 /* Responsive Adjustments */
 @media (max-width: 768px) {
     .section-title h2 {
         font-size: 2rem;
     }

     .language-section h3 {
         font-size: 1.3rem;
     }

     .btn-primary {
         width: 200px;
     }
 }

 @media (max-width: 480px) {
     .about {
         padding: 50px 15px;
     }

     .section-title h2 {
         font-size: 1.8rem;
     }

     .language-section h3 {
         font-size: 1.2rem;
     }

     .language-section p {
         font-size: 1rem;
     }

     .btn-primary {
         width: 180px;
         padding: 10px 20px;
     }
 }

 .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     opacity: 0;
     transition: opacity 1s ease-in-out;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .slide::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.4);
 }

 .slide.active {
     opacity: 1;
 }

 .slide-content {
     position: relative;
     z-index: 1;
     max-width: 800px;
     padding: 0 20px;
 }

 .slide-title {
     font-size: 2.5rem;
     margin-bottom: 20px;
     color: var(--gold);
     /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); */
 }

 .slide-text {
     font-size: 1.2rem;
     margin-bottom: 30px;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
     line-height: 1.6;
 }

 .slide-number {
     position: absolute;
     bottom: 20px;
     right: 20px;
     background: rgba(0, 0, 0, 0.5);
     padding: 5px 10px;
     border-radius: 20px;
     font-size: 0.9rem;
 }

 .slide-nav {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     /* background: rgba(255, 255, 255, 0.2); */
     color: var(--gold);
     border: none;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     font-size: 1.2rem;
     cursor: pointer;
     z-index: 10;
     transition: all 0.3s ease;
 }

 .slide-nav:hover {
     background: rgba(255, 255, 255, 0.4);
 }

 .slide-nav.prev {
     left: 20px;
 }

 .slide-nav.next {
     right: 20px;
 }

 .slider-indicators {
     position: absolute;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 10px;
     z-index: 10;
 }

 .slider-indicators span {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.5);
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .slider-indicators span.active {
     background: white;
     transform: scale(1.2);
 }


 .btn-donate-big {
     position: absolute;
     bottom: 80px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 10;
     background: #ffb300;
     color: var(--white);
     border: none;
     padding: 15px 30px;
     font-size: 1.2rem;
     font-weight: bold;
     border-radius: 30px;
     cursor: pointer;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
 }

 .btn-donate-big:hover {
     background: #ffc233;
     transform: translateX(-50%) scale(1.05);
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
 }

 .btn-donate-link {
     color: inherit;
     text-decoration: none;
 }

 .btn-primary {
     display: block;
     width: 220px;
     margin: 40px auto 0;
     padding: 12px 25px;
     background-color: #5a8f3d;
     color: white;
     text-align: center;
     text-decoration: none;
     border-radius: 30px;
     font-weight: 600;
     transition: all 0.3s ease;
     border: 2px solid #5a8f3d;
     font-size: 1.05rem;
 }

 .btn-primary:hover {
     background-color: transparent;
     color: #5a8f3d;
 }

 /* Responsive Adjustments */
 @media (max-width: 768px) {
     .section-title h2 {
         font-size: 2rem;
     }

     .slide-title {
         font-size: 2rem;
     }

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

     .slide-nav {
         width: 40px;
         height: 40px;
         font-size: 1rem;
     }

     .btn-donate-big {
         padding: 12px 25px;
         font-size: 1rem;
     }

     .language-section h3 {
         font-size: 1.3rem;
     }

     .btn-primary {
         width: 200px;
     }
 }

 @media (max-width: 480px) {
     .hero {
         min-height: 500px;
     }

     .hero h3 {
         font-size: 1.3rem;
     }

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

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

     .slide-nav {
         width: 35px;
         height: 35px;
     }

     .about {
         padding: 50px 15px;
     }

     .section-title h2 {
         font-size: 1.8rem;
     }

     .language-section h3 {
         font-size: 1.2rem;
     }

     .language-section p {
         font-size: 1rem;
     }

     .btn-primary {
         width: 180px;
         padding: 10px 20px;
     }
 }

 /* YouTube Video Embed Styling */
 .youtube-embed {
     margin: 2rem 0;
     text-align: center;
 }

 .video-wrapper {
     max-width: 900px;
     /* Optional: Set maximum width */
     margin: 0 auto;
     /* Center the video */
 }

 .video-container {
     position: relative;
     padding-bottom: 56.25%;
     /* 16:9 Aspect Ratio */
     height: 0;
     overflow: hidden;
     background: #000;
     /* Black background while loading */
     border-radius: 12px;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }

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

 .video-caption {
     margin-top: 1rem;
     color: #666;
     font-size: 0.9rem;
 }

 /* Responsive Adjustments */
 @media (max-width: 768px) {
     .video-wrapper {
         margin: 0 1rem;
         /* Add side margins on mobile */
     }

     .video-container {
         border-radius: 8px;
         /* Slightly smaller radius on mobile */
     }
 }

 /* Base Styles */
 .language-boxes {
     display: flex;
     gap: 2rem;
     margin: 2rem 0;
 }

 .language-box {
     flex: 1;
     background: white;
     gap: 2rem;
     /* This creates space between boxes */
     border-radius: 12px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     min-width: 250px;
     /* Minimum width before stacking */
 }

 .language-box h3 {
     /* font-size: 1.5rem; */
     color: var(--secondary);
     /* margin: 0;
  padding: 1rem;
  text-align: center; */
 }

 .box-header {
     padding: 1.2rem;
     background: var(--gold);
     border-bottom: 1px solid var(--text);
     text-align: center;
 }

 .hindi .box-header {
     background: var(--gold);
     /* text-align: left; */
 }

 .english .box-header {
     background: var(--gold);
     /* text-align: right; */
 }

 .box-content {
     padding: 1.5rem;
     line-height: 1.7;

 }

 .hindi .box-content {
     /* text-align: left; */
 }

 .english .box-content {
     /* text-align: right; */
 }

 /* Responsive Breakpoints */
 @media (max-width: 992px) {
     .language-boxes {
         gap: 1.5rem;
     }
 }

 @media (max-width: 768px) {
     .language-boxes {
         flex-direction: column;
         gap: 1.2rem;
     }

     .language-box {
         width: 100%;
     }

     .box-header,
     .box-content {
         padding: 1rem;
     }
 }

 @media (max-width: 480px) {
     .box-content {
         font-size: 0.95rem;
     }
 }

 .btns {
     /* Basic Button Styles */
     display: inline-block;
     padding: 0.8rem 2rem;
     font-size: 1rem;
     font-weight: 600;
     text-align: center;
     text-decoration: none;
     border-radius: 50px;
     cursor: pointer;
     transition: all 0.3s ease;

     /* Default Colors (Primary Style) */
     background-color: var(--gold);
     /* Green */
     color: white;
     border: 2px solid var(--gold);

     /* Shadow and Hover Effects */
     box-shadow: 0 4px 8px rgba(62, 39, 35, 0.2);

     /* Mobile-first approach */
     width: auto;
     /* margin-bottom: -109px; */
     margin: 0.7rem 0.2rem;
 }

 /* Hover State */
 .btns:hover {
     background-color: var(--text);
     border-color: var(--text);
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(62, 39, 35, 0.2);
 }

 /* Active/Focus State */
 .btns:active,
 .btns:focus {
     transform: translateY(0);
     box-shadow: 0 2px 4px rgba(62, 39, 35, 0.3);
     outline: none;
 }

 /* Responsive Adjustments */
 @media (max-width: 768px) {
     .btns {
         padding: 0.7rem 1.8rem;
         font-size: 0.95rem;
     }
 }

 @media (max-width: 480px) {
     .btns {
         display: block;
         /* Full width on very small screens */
         width: 100%;
         padding: 0.8rem;
     }
 }

 /* Optional Secondary Style */
 .btns-secondary {
     background-color: transparent;
     color: var(--gold);
 }

 .btns-secondary:hover {
     background-color: var(--text);
     color: white;
 }

 .Buttoncontainer {
     display: flex;
     justify-content: center;
     /* Centers horizontally */
     align-items: center;
     /* Centers vertically if needed */
 }

 .more-images {
     width: 100%;
     /* take full width */
     text-align: center;
     /* center text inside */
     margin: 15px 0;
 }

 .more-images a {
     display: inline-block;
     /* make it act like a button */
     /* background-color: var(--gold); */
     color: var(--text);
     padding: 12px 24px;
     border-radius: 25px;
     font-size: 1.2rem;
     font-weight: 600;
     text-decoration: none;
     transition: background 0.3s, transform 0.2s;
 }

 .social-icon-wrapper {
     transition: all 300ms ease;
 }

 /* Donation button pulse animation */
 @keyframes pulse-donation {
     0% {
         box-shadow: 0 0 0 0 var(--primary);
     }

     70% {
         box-shadow: 0 0 0 10px rgba(139, 92, 246, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
     }
 }

 .pulse-donation {
     animation: pulse-donation 2s infinite;
 }

 /* Ensure proper mobile visibility */
 @media (max-width: 767px) {
     #social-sidebar {
         height: 4rem !important;
         background-color: white !important;
         border-top: 1px solid #d1d5db !important;
         box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06) !important;
         border-radius: 0.5rem 0.5rem 0 0 !important;
     }

     #donation-button {
         bottom: 6rem !important;
         left: 50% !important;
         transform: translateX(-50%) !important;
     }

     #donation-button button {
         font-size: 0.875rem !important;
         padding-left: 1.5rem !important;
         padding-right: 1.5rem !important;
     }
 }

 .shorts-row {
     display: flex;
     gap: 16px;
     overflow-x: auto;
     /* mobile scroll */
     padding-bottom: 10px;
 }

 .short-box {
     flex: 0 0 380px;
     /* small fixed size */
     position: relative;
     padding-top: 580px;
     /* 9:16 ratio */
     border-radius: 12px;
     overflow: hidden;
     background: #000;
 }

 .short-box iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: none;
 }

 /* hide scrollbar (optional) */
 .shorts-row::-webkit-scrollbar {
     display: none;
 }

 #shorts-track {
     transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
     align-items: center;
 }

 /* The "Raised" / Highlight Effect */
 .reel-item {
     transition: all 0.5s ease;
     transform: scale(0.85);
     opacity: 0.4;
     filter: blur(1px);
 }

 .reel-item.active-reel {
     transform: scale(1.1) translateY(-20px);
     /* Raised up */
     z-index: 50;
     opacity: 1;
     filter: blur(0);
     box-shadow: 0 25px 50px -12px rgba(102, 8, 2, 0.5);
     border-color: #f1c141 !important;
 }

 .nav-btn {
     @apply flex items-center justify-center transition-all duration-300 shadow-xl disabled:opacity-30 active:scale-90;
     background: #660802;
     color: #f1c141;
     border: 1px solid rgba(241, 193, 65, 0.3);
 }

 .nav-btn:hover:not(:disabled) {
     background: #f1c141;
     color: #660802;
     transform: scale(1.1);
 }

 #video-modal {
     transition: opacity 0.3s ease;
 }

 #video-modal.hidden {
     opacity: 0;
     display: none;
 }

 #video-modal.flex {
     opacity: 1;
     display: flex;
 }

 @keyframes spin-slow {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 .animate-spin-slow {
     animation: spin-slow 12s linear infinite;
 }

 .mobile-nav-link-custom:hover {
     background-color: #f1c141 !important;
     color: #660802 !important;
     transform: translateX(5px);
 }


 /* Donation Card Styles */
        .donation-card-inline {
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 1.5rem;
            overflow: hidden;
            padding: 20px;
        }

        .acc-item-inline {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.06);
            padding: 8px 12px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .acc-item-inline:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: var(--brand-gold);
        }

        /* Icon-based feedback */
        .copy-hint-inline {
            font-size: 12px;
            color: var(--brand-gold);
            opacity: 0;
            transition: 0.3s;
            pointer-events: none;
        }
        .copy-active .copy-hint-inline { opacity: 1; }
        .copy-active .initial-copy-icon { display: none; }

        @keyframes scan {
            0%, 100% { top: 5%; }
            50% { top: 95%; }
        }
        .animate-scan { animation: scan 4s infinite linear; }


        
        /* --- Compact Crystal UI --- */
        .crystal-card {
            background: var(--glass-white);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            box-shadow: 0 4px 20px rgba(62, 39, 35, 0.04);
            border-radius: 1.25rem;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .crystal-card:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.95);
            border-color: var(--gold);
            box-shadow: 0 12px 30px rgba(62, 39, 35, 0.08);
        }

        .icon-box {
            width: 44px;
            height: 44px;
            background: var(--light);
            border-radius: 0.85rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--maroon);
            font-size: 1.1rem;
            transition: all 0.3s ease;
        }
        .crystal-card:hover .icon-box {
            background: var(--maroon);
            color: var(--gold);
        }
         /* --- Crystal Account Styling --- */
        .acc-item-crystal {
            background: rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            padding: 8px 14px;
            border-radius: 0.85rem;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
        }
        .acc-item-crystal:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--gold); }

        .copy-status { font-size: 12px; color: var(--gold); opacity: 0; transition: 0.2s; position: absolute; right: 14px; }
        .copy-active .copy-status { opacity: 1; }
        .copy-active .initial-copy-icon { opacity: 0; }

        .insta-crystal { background: var(--insta-gradient); padding: 1px; border-radius: 50px; display: inline-block; }
        .insta-inner { background: rgba(0,0,0,0.15); backdrop-filter: blur(8px); padding: 6px 16px; border-radius: 50px; display: flex; align-items: center; gap: 8px; color: white; font-size: 0.7rem; font-weight: 700; }

        @keyframes scanning {
            0% { transform: translateY(-100%); opacity: 0; }
            50% { opacity: 0.8; }
            100% { transform: translateY(100%); opacity: 0; }
        }
        .qr-scanner-line { position: absolute; width: 100%; height: 2px; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: scanning 4s infinite linear; }


            /* Swiper custom styles to ensure perfect 3D centering */
        .swiper {
            width: 100%;
            padding-top: 40px;
            padding-bottom: 70px; /* Increased slightly for pagination dots */
        }
        .swiper-slide {
            background-position: center;
            background-size: cover;
            width: 320px; /* Mobile width */
            height: 480px;
        }
 
        @media (min-width: 768px) {
            .swiper-slide {
                width: 380px; /* Desktop width */
            }
        }
        /* Style for the active (center) slide to pop out more */
        .swiper-slide-active {
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }
        /* Custom colors for pagination dots */
        .swiper-pagination-bullet {
            background-color: #5C0A0A; /* Maroon inactive dots */
            opacity: 0.4;
        }
        .swiper-pagination-bullet-active {
            background-color: #DCA015 !important; /* Gold active dot */
            opacity: 1;
            transform: scale(1.2);
        }