/*============================================           HOME PAGE          ========================================*/


 :root {
     --saffron: #ff7b00;
     --dark: #230b02;
     --gold: #ffcc4d;
     --light: #fff7ed;
     --white: #ffffff;
     --red: #7a0000;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Noto Sans Devanagari', sans-serif;
     background: var(--light);
     overflow-x: hidden;
     color: #222;
 }



 /* home-hero */

 /* .home-hero {
     min-height: 93vh;
     width: 100%;
     background-size:cover;
     background-position: cover;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 140px 7% 100px;
     position: relative;
     margin-top: 70px;
     background-repeat: no-repeat;

 } */

 .home-hero-banner img {
     margin-top: 2%;
     object-fit: cover;
     object-fit: top;
 }

 @media (min-width:1400px) {

     .home-hero-banner img {
         margin-top: 4.7%;
     }
 }

 @media (max-width:1400px) {

     .home-hero-banner img {
         margin-top: 6.5%;
     }
 }

 @media (max-width:1200px) {

     .home-hero-banner img {
         margin-top: 5.3%;
     }
 }

 @media (max-width:991px) {

     .home-hero-banner img {
         margin-top: 7%;
     }
 }

 @media (max-width:768px) {

     .home-hero-banner img {
         margin-top: 9%;
     }
 }

 @media (max-width:650px) {

     .home-hero-banner img {
         margin-top: 13%;
     }
 }

 @media (max-width:576px) {

     .home-hero-banner img {
         margin-top: 30%;
     }
 }



 .home-hero-content {
     padding-top: 10%;
     max-width: 1000px;
     position: relative;
     z-index: 2;
     animation: fadeUp 1s ease;
 }

 .home-hero-content h1 {
     color: #fff;
     font-size: 72px;
     line-height: 1.2;
     margin-bottom: 25px;
     font-weight: 800;
 }

 .home-hero-content h1 span {
     color: var(--gold);
 }

 .home-hero-content p {
     color: #f0f0f0;
     font-size: 22px;
     line-height: 1.9;
     margin-bottom: 40px;
 }

 .home-hero-btns {
     display: flex;
     justify-content: center;
     gap: 20px;
     flex-wrap: wrap;
 }

 .btn {
     padding: 17px 38px;
     border-radius: 60px;
     text-decoration: none;
     font-weight: 700;
     transition: .4s;
     display: inline-block;
 }

 .btn-primary {
     background: linear-gradient(45deg, var(--saffron), #ffbf00);
     color: #000;
 }

 .btn-secondary {
     border: 2px solid #fff;
     color: #fff;
 }

 .btn:hover {
     transform: translateY(-6px);
 }

 /* SECTION */

 .section {
     padding: 60px 7%;
     /* border-bottom: 2px solid #ff8929;
            border-top: 2px solid #ff8929; */
 }

 .section-title {
     text-align: center;
     margin-bottom: 30px;
 }

 .section-title h2 {
     font-size: 48px;
     color: var(--dark);
     margin-bottom: 15px;
 }

 .section-title p {
     max-width: 850px;
     margin: auto;
     color: #555;
     line-height: 1.9;
 }

 /* ABOUT */

 .about-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 60px;
     align-items: center;
 }

 .about-img {
     position: relative;
 }

 .about-img img {
     max-height: 400px;
     width: 80%;
     border-radius: 25px;
     box-shadow: 0 15px 40px rgba(0, 0, 0, .2);
     margin-left: 20%;
 }

 @media (max-width:992px) {

     .about-img img {
         margin-left: 0px;
         width: 100%;
     }
 }

 .about-content h3 {
     font-size: 42px;
     color: var(--red);
     margin-bottom: 25px;
 }

 .about-content p {
     line-height: 2;
     color: #444;
     margin-bottom: 20px;
     font-size: 17px;
 }

 /* VALUES */

 .values {
     background: #fff;
 }

 .values-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 30px;
 }

 .value-card {
     background: linear-gradient(180deg, #fff, #fff3de);
     border-radius: 25px;
     padding: 40px 25px;
     text-align: center;
     transition: .4s;
     border: 1px solid rgba(0, 0, 0, .08);
 }

 .value-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, .1);
 }

 .value-card i {
     width: 90px;
     height: 90px;
     line-height: 90px;
     border-radius: 50%;
     background: linear-gradient(45deg, var(--saffron), #ffcb47);
     color: #fff;
     font-size: 38px;
     margin-bottom: 25px;
 }

 .value-card h4 {
     font-size: 26px;
     margin-bottom: 15px;
     color: var(--dark);
 }

 .value-card p {
     color: #555;
     line-height: 1.8;
 }

 /* QUOTE */

 .quote {
     background:
         linear-gradient(rgba(35, 11, 2, .9), rgba(35, 11, 2, .9)),
         url('kkkkkk.png');
     background-size: cover;
     background-position: center;
     padding: 120px 7%;
     text-align: center;
     color: #fff;
 }

 .quote h2 {
     font-size: 54px;
     margin-bottom: 25px;
     color: var(--gold);
 }

 .quote p {
     font-size: 28px;
     line-height: 1.8;
 }

 /* ACTIVITIES */

 .activities-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 20px;
 }

 .activity-card {
     position: relative;
     overflow: hidden;
     border-radius: 25px;
 }

 .activity-card img {
     width: 100%;
     height: 350px;
     object-fit: cover;
     transition: .5s;
 }

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

 .activity-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     padding: 30px;
     background: linear-gradient(transparent, rgba(0, 0, 0, .9));
     color: #fff;
 }

 .activity-overlay h3 {
     font-size: 22form-grouppx;
     margin-bottom: 10px;
 }

 /* CTA */

 .cta {
     background: linear-gradient(45deg, var(--saffron), #ffbf00);
     text-align: center;
     padding: 30px 7%;
 }

 .cta h2 {
     font-size: 50px;
     margin-bottom: 20px;
     color: #7b1e12;
 }

 .cta p {
     font-size: 22px;
     margin-bottom: 35px;
     color: #2a1300;
 }

 .cta a {
     padding: 16px 40px;

     border: none;

     border-radius: 50px;

     background:
         linear-gradient(45deg,
             var(--primary),
             var(--saffron));

     color: #fff;

     font-size: 18px;

     font-weight: 700;

     cursor: pointer;

     transition: .4s;

     box-shadow:
         0 12px 25px rgba(166, 47, 16, .18);
     text-decoration: none;

 }



 /* ANIMATION */

 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(40px);
     }

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

 /* MOBILE */

 @media(max-width:992px) {

     .home-hero-content h1 {
         font-size: 50px;
     }

     .about-grid,
     .values-grid,
     .activities-grid,
     .footer-grid {
         grid-template-columns: 1fr;
     }


 }

 @media(max-width:600px) {
     .navbar {
         padding-left: 0%;
     }

     .logo-box {
         padding-left: 0%;
     }

     .logo-box img {
         padding-left: 0%;
     }

     .home-hero-content h1 {
         font-size: 38px;
     }

     .home-hero-content p {
         font-size: 17px;
     }

     .section-title h2 {
         font-size: 5px;
     }

     .quote h2 {
         font-size: 34px;
     }

     .quote p {
         font-size: 18px;
     }

     .cta h2 {
         font-size: 34px;
     }

     .cta p {
         font-size: 18px;
     }

     .logo-text h2 {
         font-size: 22px;
     }

     .logo-box img {
         width: 60px;
         height: 60px;
     }

     .about-content h3 {
         font-size: 25px;
     }

     .home-hero {
         background:
             /* linear-gradient(rgba(15, 5, 2, .78),
                    rgba(40, 10, 5, .84)), */
             url('kkkkkk.png');
         background-size: cover;
     }


     .socials a {
         margin: auto;
     }

     #footer-logo-img {
         margin-left: 0%;
     }
 }



 /* =========================================
PREMIUM DIVIDER
========================================= */

 .premium-divider {

     width: 100%;

     display: flex;
     justify-content: center;
     align-items: center;

     position: relative;

 }

 .premium-divider::before {

     content: '';

     width: 38%;
     height: 2px;

     position: absolute;

     left: 8%;

     background:
         linear-gradient(to right,
             transparent,
             var(--gold));

 }

 .premium-divider::after {

     content: '';

     width: 38%;
     height: 2px;

     position: absolute;

     right: 8%;

     background:
         linear-gradient(to left,
             transparent,
             var(--gold));

 }

 .premium-divider span {

     width: 85px;
     height: 85px;

     border-radius: 50%;

     background:
         linear-gradient(45deg,
             var(--primary),
             var(--light-saffron));

     color: #492323;

     display: flex;
     align-items: center;
     justify-content: center;

     font-size: 35px;

     box-shadow:
         0 12px 30px rgba(123, 30, 18, .18);

     animation: floatOm 4s infinite ease-in-out;

 }


 .nav-toggle {
     display: none;
     font-size: 28px;
     color: #fff;
     cursor: pointer;
 }

 @media (max-width: 992px) {
     .nav-toggle {
         display: block;
     }

     .nav-links {
         position: fixed;
         top: 0;
         right: -100%;
         height: 100vh;
         width: 200px;
         background: rgba(20, 8, 2, .96);
         flex-direction: column;
         gap: 30px;
         padding: 100px 35px;
         transition: 0.4s;
         display: flex;
     }

     .nav-links button {
         position: fixed;
         top: 0;
         right: -100%;
         height: 100vh;
         width: 200px;
         background: rgba(20, 8, 2, .96);
         flex-direction: column;
         gap: 30px;
         padding: 100px 35px;
         transition: 0.4s;
         display: none;
     }

     .nav-links.active {
         right: 0;
     }
 }


























 /**============================================================
                                    ABOUT PAGE
                    =============================================================**/
 /* =========================================
GLOBAL
========================================= */

 :root {

     --primary: #7b1e12;
     --secondary: #a62f10;

     --saffron: #ff8f1f;
     --light-saffron: #ffb347;

     --gold: #ffd166;

     --bg: #fffaf5;
     --card: #ffffff;

     --text: #2d2d2d;
     --light-text: #666;

     --footer: #1b0703;

 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
 }

 body {

     font-family: 'Noto Sans Devanagari', sans-serif;

     background:
         linear-gradient(180deg,
             #fff9f4 0%,
             #fffdfc 50%,
             #fff7ef 100%);

     color: var(--text);

     overflow-x: hidden;

 }

 /* =========================================
SCROLLBAR
========================================= */

 ::-webkit-scrollbar {
     width: 8px;
 }

 ::-webkit-scrollbar-thumb {

     background:
         linear-gradient(var(--primary),
             var(--gold));

     border-radius: 20px;

 }

 /* =========================================
NAVBAR
========================================= */

 .navbar {

     width: 100%;

     padding: 0px 2%;

     position: fixed;

     top: 0;
     left: 0;

     z-index: 999;

     background:
         linear-gradient(to right,
             rgba(20, 5, 2, .92),
             rgba(65, 15, 8, .92));

     backdrop-filter: blur(15px);

     display: flex;
     justify-content: space-between;
     align-items: center;

     transition: .4s;

 }

 .navbar.sticky {

     padding: 12px 7%;

     background:
         linear-gradient(to right,
             rgba(15, 4, 2, .98),
             rgba(45, 10, 5, .98));

     box-shadow: 0 10px 25px rgba(0, 0, 0, .25);

 }

 .logo-box {

     display: flex;
     align-items: center;

     gap: 15px;

 }

 .logo-box img {

     width: 75px;
     height: 75px;

     border-radius: 50%;

     border: 3px solid var(--gold);

     object-fit: cover;

     box-shadow:
         0 0 25px rgba(255, 209, 102, .22);

     animation: floatLogo 4s infinite ease-in-out;

 }

 .logo-text h2 {

     color: #fff;

     font-size: 28px;

 }

 .logo-text p {

     color: var(--gold);

     margin-top: 4px;

 }

 .nav-links {

     display: flex;
     gap: 35px;

 }

 .nav-links a {

     color: #fff;

     text-decoration: none;

     font-weight: 600;

     position: relative;

     transition: .4s;

 }

 .nav-links a::after {

     content: '';

     width: 0%;
     height: 2px;

     background: var(--gold);

     position: absolute;

     left: 0;
     bottom: -6px;

     transition: .4s;

 }

 .nav-links a:hover::after {
     width: 100%;
 }

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

 /* =========================================
HERO
========================================= */

 .hero {

     width: 100%;
     max-height: 55vh;

     background:
         linear-gradient(rgba(15, 5, 2, .78),
             rgba(40, 10, 5, .84));

     background-size: cover;
     background-position: center;
     background-attachment: fixed;

     display: flex;
     align-items: center;
     justify-content: center;

     text-align: center;

     padding: 25px 7%;

     position: relative;

     overflow: hidden;

     padding-top: 6%;


 }

 .hero::before {

     content: '🚩';

     position: absolute;

     font-size: 250px;

     color: rgba(255, 209, 102, .05);

     animation: pulse 5s infinite;

 }

 .hero::after {

     content: '';

     position: absolute;

     width: 100%;
     height: 100%;

     top: 0;
     left: 0;

     background:
         radial-gradient(rgba(255, 209, 102, .18) 1px,
             transparent 1px);

     background-size: 35px 35px;

     animation: particlesMove 18s linear infinite;

 }

 .hero-content {

     max-width: 950px;

     position: relative;

     z-index: 2;

     animation: zoomIn 1.5s ease;

 }

 .hero-content h1 {

     font-size: 50px;

     color: #fff;

     line-height: 1.1;

     margin-bottom: 25px;

     text-shadow:
         0 0 35px rgba(255, 209, 102, .18);

 }

 .hero-content h1 span {

     background:
         linear-gradient(45deg,
             #ffb347,
             #ffd166);

     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;

 }

 .hero-content p {

     color: #f3f3f3;

     font-size: 22px;

     line-height: 2;

 }



 /* =========================================
SECTION
========================================= */

 .section {

     padding: 60px 7%;

     position: relative;

 }

 .section-title {

     text-align: center;

     margin-bottom: 70px;

 }

 .section-title h2 {

     font-size: 52px;

     color: var(--primary);

     margin-bottom: 20px;

     position: relative;

     display: inline-block;

 }

 .section-title h2::after {

     content: '';

     width: 70%;
     height: 4px;

     background:
         linear-gradient(to right,
             var(--saffron),
             var(--gold));

     position: absolute;

     left: 15%;
     bottom: -10px;

     border-radius: 20px;

 }



 .section-title p {

     color: #666;

     max-width: 850px;

     margin: auto;

     line-height: 1.9;

 }

 /* =========================================
PREMIUM DIVIDER
========================================= */

 .premium-divider {

     width: 100%;

     display: flex;
     justify-content: center;
     align-items: center;

     position: relative;

     margin: 20px 0;

 }

 .premium-divider::before {

     content: '';

     width: 38%;
     height: 2px;

     position: absolute;

     left: 8%;

     background:
         linear-gradient(to right,
             transparent,
             var(--gold));

 }

 .premium-divider::after {

     content: '';

     width: 38%;
     height: 2px;

     position: absolute;

     right: 8%;

     background:
         linear-gradient(to left,
             transparent,
             var(--gold));

 }

 .premium-divider span {

     width: 85px;
     height: 85px;

     border-radius: 50%;

     background:
         linear-gradient(45deg,
             var(--primary),
             var(--light-saffron));

     color: #fff;

     display: flex;
     align-items: center;
     justify-content: center;

     font-size: 35px;

     box-shadow:
         0 12px 30px rgba(123, 30, 18, .18);

     animation: floatOm 4s infinite ease-in-out;

 }

 /* =========================================
FOUNDER
========================================= */

 .founder-wrapper {

     display: grid;

     grid-template-columns: 380px 1fr;

     gap: 60px;

     align-items: center;
     margin-left: 15%;

 }

 .founder-img {

     position: relative;

 }

 .founder-img::before {

     content: '';

     position: absolute;

     inset: -10px;

     border-radius: 40px;

     background:
         linear-gradient(45deg,
             rgba(166, 47, 16, .22),
             rgba(255, 209, 102, .20));

     z-index: -1;

     animation: borderGlow 4s linear infinite;

 }

 .founder-img img {

     width: 100%;

     border-radius: 35px;

     box-shadow: 0 20px 40px rgba(0, 0, 0, .12);

     transition: .5s;

 }

 .founder-img:hover img {

     transform: scale(1.04);

 }

 .founder-badge {

     position: absolute;

     bottom: -20px;
     right: -20px;

     background:
         linear-gradient(45deg,
             #7b1e12,
             #d86b1f);

     color: #fff;

     padding: 18px 30px;

     border-radius: 20px;

     font-weight: 700;

     box-shadow:
         0 12px 28px rgba(123, 30, 18, .18);

 }

 .founder-content h3 {

     color: var(--primary);

     font-size: 48px;

     margin-bottom: 25px;

 }

 .founder-content p {

     color: #555;

     line-height: 2;

     margin-bottom: 18px;

     font-size: 18px;

 }

 /* =========================================
VISION BLOCKS
========================================= */

 .vision-wrapper {

     display: grid;

     grid-template-columns: repeat(2, 1fr);

     gap: 35px;

 }

 .vision-block {

     background:
         rgba(255, 255, 255, .86);

     border:
         1px solid rgba(255, 179, 71, .18);

     border-radius: 35px;

     padding: 45px;

     transition: .5s;

     /* position: relative; */

     overflow: hidden;

     box-shadow:
         0 12px 30px rgba(0, 0, 0, .04);

     display: flex;

 }

 .vision-block:hover {

     transform:
         translateY(-12px) scale(1.02);

     box-shadow:
         0 22px 45px rgba(166, 47, 16, .12);

 }

 .vision-block::before {

     content: '';

     position: absolute;

     width: 120px;
     height: 120px;

     border-radius: 50%;

     background:
         rgba(255, 179, 71, .10);

     top: -40px;
     right: -40px;

 }

 .vision-icon {

     width: 90px;
     height: 90px;

     border-radius: 50%;

     background:
         linear-gradient(45deg,
             #7b1e12,
             #ff9d2f);

     color: #fff;

     display: flex;
     align-items: center;
     justify-content: center;

     font-size: 38px;

     margin-bottom: 25px;

     box-shadow:
         0 10px 25px rgba(255, 140, 31, .22);

     animation: floatLogo 4s infinite ease-in-out;

 }

 .vision-block h3 {

     color: var(--primary);

     font-size: 32px;

     margin-bottom: 18px;

 }

 .vision-block p {

     color: #666;

     line-height: 1.9;

 }

 /* =========================================
TIMELINE
========================================= */

 .journey {

     position: relative;

     max-width: 1100px;

     margin: auto;

 }

 .journey::after {

     content: '';

     position: absolute;

     width: 4px;

     background:
         linear-gradient(var(--primary),
             var(--gold));

     top: 0;
     bottom: 0;
     left: 50%;

     margin-left: -2px;

 }

 .journey-box {

     width: 50%;

     padding: 20px 40px;

     position: relative;

 }

 .journey-box.left {
     left: 0;
 }

 .journey-box.right {
     left: 50%;
 }

 .journey-content {

     background: #fffdf9;

     border:
         1px solid rgba(255, 179, 71, .12);

     padding: 35px;

     border-radius: 25px;

     transition: .5s;

     box-shadow:
         0 10px 30px rgba(0, 0, 0, .06);

 }

 .journey-content:hover {

     transform: translateY(-10px);

     box-shadow:
         0 20px 40px rgba(166, 47, 16, .10);

 }

 .journey-content h3 {

     color: var(--primary);

     margin-bottom: 15px;

     font-size: 30px;

 }

 .journey-content p {

     color: #666;

     line-height: 1.9;

 }

 .journey-box::before {

     content: '🕉';

     position: absolute;

     width: 45px;
     height: 45px;

     border-radius: 50%;

     background:
         linear-gradient(45deg,
             var(--primary),
             var(--light-saffron));

     display: flex;
     align-items: center;
     justify-content: center;

     color: #fff;

     top: 30px;
     right: -22px;

     z-index: 10;

 }

 .journey-box.right::before {
     left: -22px;
 }

 /* =========================================
QUOTE
========================================= */

 .quote {

     background:
         linear-gradient(rgba(20, 5, 2, .86),
             rgba(35, 10, 5, .88)),
         url('kkkkkk.png');

     background-size: cover;
     background-position: center;
     background-attachment: fixed;

     text-align: center;

     padding: 80px 7%;

     position: relative;

     overflow: hidden;

 }

 .quote::before {

     content: '';

     position: absolute;

     inset: 0;

     background:
         radial-gradient(rgba(255, 209, 102, .14) 1px,
             transparent 1px);

     background-size: 30px 30px;

     animation: particlesMove 20s linear infinite;

 }

 .quote h2 {

     color: var(--gold);

     font-size: 60px;

     margin-bottom: 25px;

     position: relative;

     z-index: 2;

 }

 .quote p {

     color: #f3f3f3;

     font-size: 30px;

     line-height: 2;

     position: relative;

     z-index: 2;

 }

 /* =========================================
FOOTER
========================================= */

 .footer {

     background:
         linear-gradient(to right,
             #170502,
             #2b0904);

     color: #fff;

     padding: 90px 7% 30px;

 }

 .footer-grid {

     display: grid;

     grid-template-columns: repeat(4, 1fr);

     gap: 40px;

 }


 #footer-logo-img {
     margin-left: 20%;
 }

 .footer h3 {

     color: var(--gold);

     margin-bottom: 20px;

     font-size: 28px;

 }

 .footer p,
 .footer a {

     color: #ddd;

     line-height: 2;

     text-decoration: none;

 }

 .socials {

     display: flex;

     gap: 15px;

     margin-top: 20px;

 }

 .socials a {

     width: 65px;
     height: 65px;

     border-radius: 50%;

     background:
         rgba(255, 150, 150, 0.08);

     display: flex;
     align-items: center;
     justify-content: center;

     transition: .4s;

 }

 .socials a:hover {

     background:
         linear-gradient(45deg,
             var(--saffron));

     transform: translateY(-5px);

 }

 .copy {

     text-align: center;

     margin-top: 50px;

     padding-top: 25px;

     border-top:
         1px solid rgba(255, 255, 255, .1);

     color: #bbb;

 }

 .vision-block-description {
     margin-left: 15%;
 }


 /* =========================================
ANIMATIONS
========================================= */

 @keyframes floatLogo {

     0% {
         transform: translateY(0px);
     }

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

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

 }

 @keyframes floatOm {

     0% {
         transform: translateY(0px);
     }

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

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

 }

 @keyframes pulse {

     0% {
         opacity: .03;
     }

     50% {
         opacity: .08;
     }

     100% {
         opacity: .03;
     }

 }

 @keyframes particlesMove {

     from {
         transform: translateY(0);
     }

     to {
         transform: translateY(-120px);
     }

 }

 @keyframes borderGlow {

     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }

 }

 @keyframes zoomIn {

     from {
         opacity: 0;
         transform: scale(.8);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }

 }

 /* =========================================
RESPONSIVE
========================================= */

 @media(max-width:992px) {

     .founder-wrapper,
     .vision-wrapper,
     .footer-grid {

         grid-template-columns: 1fr;

     }

     .journey::after {
         left: 30px;
     }

     .journey-box {

         width: 100%;

         padding-left: 80px;
         padding-right: 20px;

     }

     .journey-box.right {
         left: 0;
     }

     .journey-box.left::before,
     .journey-box.right::before {
         left: 8px;
     }

     .nav-links {
         display: none;
     }

     .hero-content h1 {
         font-size: 52px;
     }

     .footer-grid {
         grid-template-columns: 1fr;
     }

 }

 @media(max-width:600px) {

     .hero-content h1 {
         font-size: 38px;
         padding-top: 25%;
     }

     .hero-content p {
         font-size: 17px;
     }

     .section-title h2 {
         font-size: 36px;
     }

     .quote h2 {
         font-size: 38px;
     }

     .quote p {
         font-size: 18px;
     }

     .logo-box img {
         width: 60px;
         height: 60px;
     }

     .logo-text h2 {
         font-size: 22px;
     }


     .footer {
         text-align: center;
     }

     .socials a {
         margin: auto;
     }

     #footer-logo-img {
         margin-left: 0%;
     }

     .vision-block {
         flex-direction: column;
     }

     .vision-block-description {
         margin-left: 0;
         margin-top: 10px;
         text-align: center;
     }

     .vision-icon {
         margin: auto;
     }

 }




 .nav-toggle {
     display: none;
     font-size: 28px;
     color: #fff;
     cursor: pointer;
 }

 @media (max-width: 992px) {
     .nav-toggle {
         display: block;
     }

     .nav-links {
         position: fixed;
         top: 0;
         right: -100%;
         height: 100vh;
         width: 250px;
         background: rgba(20, 8, 2, .96);
         flex-direction: column;
         gap: 30px;
         padding: 100px 20px;
         transition: 0.4s;
         display: flex;
     }

     /* .nav-links button{
                position: fixed;
                top: 0;
                right: -100%;
                height: 100vh;
                width: 200px;
                background: rgba(20, 8, 2, .96);
                flex-direction: column;
                gap: 30px;
                padding: 100px 35px;
                transition: 0.4s;
                display:none;
            } */


     .nav-links.active {
         right: 0;
     }
 }



































 /**============================================================
                                    GALLERY PAGE
                    =============================================================**/
 :root {
     --primary: #7b1e12;
     --saffron: #ff8f1f;
     --gold: #ffd166;
     --bg: #fffaf5;
     --white: #fff;
 }

 body {
     margin: 0;
     font-family: 'Noto Sans Devanagari', sans-serif;
     background: var(--bg);
 }

 .section {
     padding: 5px 1%;
     position: relative;
 }

 .section-title {
     text-align: center;
     margin-bottom: 70px;

 }

 .section-title h2 {
     font-size: 50px;
     color: var(--primary);
     margin-bottom: 20px;
     font-size: 50px;



     margin-bottom: 15px;

     line-height: 1.2;
 }


 .section-title h2 span {

     background:
         linear-gradient(45deg,
             #ffb347,
             #ffd166);

     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;

 }

 .section-title p {
     color: #666;

     font-size: 22px;

     line-height: 2;
 }

 .theme-btn {
     padding: 18px 40px;
     border-radius: 60px;
     background: linear-gradient(45deg, var(--primary), var(--saffron));
     color: #fff;
     text-decoration: none;
     font-weight: 700;
     display: inline-block;
     transition: .4s;
 }

 .theme-btn:hover {
     transform: translateY(-6px);
     box-shadow: 0 25px 50px rgba(123, 30, 18, .35);
 }

 .glass-card {
     background: rgba(255, 255, 255, .9);
     backdrop-filter: blur(12px);
     border-radius: 25px;
     padding: 30px;
     margin-bottom: 25px;
     box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
     transition: .4s;
 }

 .glass-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 35px 60px rgba(123, 30, 18, .15);
 }

 /* Print Media Gallery Grid */
 .print-gallery {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 40px;
     margin-bottom: 30px;
     margin-left: 2%;
 }

 .print-item {
     width: 90%;
     position: relative;
     /* overflow: hidden; */
     border-radius: 5px;
     /* border: 1px solid red; */
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 2px 2px 5px var(--primary);
 }

 .print-item:hover {
     box-shadow: none;
 }

 .print-item img {
     width: 100%;
     border-radius: 5px;
     /* height: 600px; */
     display: block;
     transition: .5s;
 }

 .print-item:hover img {
     transform: scale(1.05);
     filter: brightness(1.1);
     border: 3px solid red;
     margin-bottom: 40px;
     border-radius: 15px;
     box-shadow: none;
 }

 /* Divider */
 .premium-divider {
     display: flex;
     justify-content: center;
     margin: 30px 0;
 }

 .premium-divider span {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background: linear-gradient(45deg, var(--primary), var(--saffron));
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 35px;
     color: white;
     box-shadow: 0 20px 45px rgba(123, 30, 18, .25);
     animation: floatIcon 4s infinite ease-in-out;
 }

 @keyframes floatIcon {
     50% {
         transform: translateY(-12px);
     }
 }

 /* CTA */
 .gallery-cta {
     text-align: center;
     padding: 20px 2%;
     background: linear-gradient(135deg, var(--primary), var(--saffron));
     color: white;
 }

 .gallery-cta h2 {
     font-size: 50px;
     margin-bottom: 20px;
 }

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





 .premium-divider::before {

     content: '';

     width: 38%;
     height: 2px;

     position: absolute;

     left: 8%;

     background:
         linear-gradient(to right,
             transparent,
             var(--gold));

 }

 .premium-divider::after {

     content: '';

     width: 38%;
     height: 2px;

     position: absolute;

     right: 8%;

     background:
         linear-gradient(to left,
             transparent,
             var(--gold));

 }












 /*==================================PHOTOS========================================*/


 /* Hero */
 .gallery-hero {
     height: 25vh;
     background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5));
     color: white;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
 }

 .gallery-hero h1 {
     font-size: 70px;
     margin-bottom: 15px;
 }

 .gallery-hero p {
     font-size: 22px;
     margin-bottom: 25px;
 }

 /* Filter Tabs */
 .filter-tabs {
     display: flex;
     justify-content: center;
     gap: 15px;
     margin-bottom: 50px;
     flex-wrap: wrap;
 }

 .filter-tabs button {
     padding: 22px 150px;
     border-radius: 50px;
     border: none;
     background: linear-gradient(45deg, var(--primary), var(--saffron));
     color: white;
     font-weight: 700;
     cursor: pointer;
     transition: .3s;
 }

 .filter-tabs button.active {
     box-shadow: 0 15px 40px rgba(123, 30, 18, .25);
 }

 .filter-tabs button:hover {
     transform: translateY(-4px);
 }

 /* Masonry Gallery */
 .masonry-gallery {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 25px;
 }

 .gallery-item {
     position: relative;
     overflow: hidden;
     border-radius: 25px;
     transition: .5s;
 }

 .gallery-item img {
     width: 100%;
     display: block;
     transition: .5s;
 }

 .gallery-item:hover img {
     transform: scale(1.08);
     filter: brightness(1.1);
     box-shadow: 0 20px 50px rgba(123, 30, 18, .2);
 }

 .gallery-item .overlay {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, .25);
     opacity: 0;
     transition: .4s;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-weight: 700;
 }

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




 /*==========================VIDEO PAGE=================================*/
 /* Video Grid */
 .video-gallery {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 25px;
 }

 .video-item {
     position: relative;
     border-radius: 20px;
     overflow: hidden;
     transition: .4s;
 }

 .video-item iframe {
     width: 100%;
     height: 200px;
     border: none;
     border-radius: 15px;
     transition: .5s;
 }

 .video-item:hover iframe {
     transform: scale(1.03);
     box-shadow: 0 20px 50px rgba(123, 30, 18, .2);
 }


 /* Video Grid */
 .video-gallery {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 25px;
 }

 .video-item {
     position: relative;
     border-radius: 20px;
     overflow: hidden;
     transition: .4s;
 }

 .video-item iframe {
     width: 100%;
     height: 200px;
     border: none;
     border-radius: 15px;
     transition: .5s;
 }

 .video-item:hover iframe {
     transform: scale(1.03);
     box-shadow: 0 20px 50px rgba(123, 30, 18, .2);
 }

 .premium-divider {
     display: flex;
     justify-content: center;
     margin: 80px 0;
 }

 .premium-divider span {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background: linear-gradient(45deg, var(--primary), var(--saffron));
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 35px;
     color: white;
     box-shadow: 0 20px 45px rgba(123, 30, 18, .25);
     animation: floatIcon 4s infinite ease-in-out;
 }

















 /**============================================================
                                    SERVICE PAGE
                    =============================================================**/

 :root {
     --primary: #7b1e12;
     --secondary: #a62f10;
     --saffron: #ff8f1f;
     --gold: #ffd166;
     --bg: #fffaf5;
 }






 body {
     font-family: 'Noto Sans Devanagari', sans-serif;
     background: #fffaf5;
     overflow-x: hidden;
     margin: 0;
 }






 .section {
     padding: 30px 7%;
 }

 .section-title {
     text-align: center;
     margin-bottom: 30px;
 }

 .section-title h2 {
     font-size: 55px;
     color: #7b1e12;
     margin-bottom: 20px;
 }

 .section-title p {
     max-width: 800px;
     margin: auto;
     color: #666;
     line-height: 1.8;
 }









 /* NAVBAR */

 .navbar {
     width: 100%;
     padding-right: 15px;
     background: rgba(20, 8, 2, 0.96);
     position: fixed;
     top: 0;
     left: 0;
     z-index: 999;
     display: flex;
     justify-content: space-between;
     align-items: center;
     backdrop-filter: blur(10px);
 }

 .logo-box {
     display: flex;
     align-items: center;
     gap: 15px;

 }

 .logo-box img {
     width: 60px;
     height: 60px;
     object-fit: contain;
     border-radius: 50%;
     background: #fff;
     padding: 4px;
     border: 2px solid var(--gold);
 }

 .logo-text h2 {
     color: #fff;
     font-size: 28px;
     font-weight: 800;
 }

 .logo-text p {
     color: #ffcf63;
     font-size: 14px;
 }

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

 .nav-links a {
     color: #fff;
     text-decoration: none;
     font-weight: 600;
     position: relative;
     transition: .3s;
     font-size: medium;
 }

 .nav-links a::after {
     content: '';
     width: 0;
     height: 2px;
     background: var(--gold);
     position: absolute;
     left: 0;
     bottom: -5px;
     transition: .3s;
 }

 .nav-links a:hover::after {
     width: 100%;
 }

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











 /* =====================================
SERVICES HERO
===================================== */

 .services-hero {

     max-height: 55vh;

     position: relative;

     overflow: hidden;

     display: flex;
     align-items: center;
     justify-content: center;

     text-align: center;

     padding: 0px 7%;

     background:
         linear-gradient(rgba(20, 5, 2, .82),
             rgba(40, 10, 5, .88)),
         url('images/services-banner.jpg');

     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     padding-top: 2%;

 }

 /* Overlay */

 .hero-overlay {

     position: absolute;

     inset: 0;

     background:
         radial-gradient(rgba(255, 209, 102, .08) 1px,
             transparent 1px);

     background-size: 35px 35px;

 }

 /* Floating Icons */

 .floating-icon {

     position: absolute;

     font-size: 100px;

     color:
         rgba(255, 209, 102, .08);

 }

 .icon1 {

     left: 5%;
     top: 20%;

     animation: floatY 10s infinite;

 }

 .icon2 {

     right: 6%;
     top: 30%;

     animation: floatY 12s infinite;

 }

 .icon3 {

     bottom: 10%;
     left: 40%;

     animation: floatY 15s infinite;

 }

 @keyframes floatY {

     50% {

         transform:
             translateY(-25px);

     }

 }

 /* Content */

 .hero-content {

     position: relative;

     z-index: 10;

     max-width: 1000px;

     animation: zoomIn 1.5s ease;

 }

 .hero-badge {

     display: inline-block;

     padding: 12px 28px;

     border-radius: 50px;

     background:
         rgba(255, 255, 255, .12);

     backdrop-filter: blur(10px);

     color: #ffd166;

     margin-bottom: 30px;

 }

 .hero-content h1 {

     color: white;

     font-size: 50px;

     line-height: 1.1;

     margin: 5%;

     margin-bottom: 25px;
     font-weight: 700;


 }

 .hero-content h1 span {

     color: #ffd166;

 }

 .hero-content p {

     color: #f3f3f3;

     font-size: 22px;

     line-height: 2;



 }

 /* Buttons */

 .hero-buttons {

     display: flex;

     justify-content: center;

     gap: 20px;

     flex-wrap: wrap;

 }

 .hero-btn {

     background:
         linear-gradient(45deg,
             #7b1e12,
             #ff8f1f);

     color: white;

     padding: 18px 40px;

     border-radius: 50px;

     text-decoration: none;

     font-weight: 700;

     transition: .4s;

 }

 .hero-btn:hover {

     transform:
         translateY(-5px);

 }

 .hero-btn-outline {

     border: 2px solid #ffd166;

     color: #ffd166;

     padding: 18px 40px;

     border-radius: 50px;

     text-decoration: none;

 }

 .hero-btn-outline:hover {

     background: #ffd166;

     color: #7b1e12;

 }

 /* Stats */

 .hero-stats {

     margin-top: 60px;

     display: grid;

     grid-template-columns:
         repeat(4, 1fr);

     gap: 25px;

 }

 .stat-card {

     background:
         rgba(255, 255, 255, .12);

     backdrop-filter: blur(12px);

     border:
         1px solid rgba(255, 255, 255, .1);

     padding: 25px;

     border-radius: 25px;

 }

 .stat-card h3 {

     color: #ffd166;

     font-size: 40px;

     margin-bottom: 10px;

 }

 .stat-card p {

     color: white;

     margin: 0;

 }

 /* Mobile */

 @media(max-width:992px) {

     .hero-content h1 {

         font-size: 55px;

     }

     .hero-stats {

         grid-template-columns:
             repeat(2, 1fr);

     }

 }

 @media(max-width:576px) {

     .hero-content h1 {

         font-size: 40px;

     }

     .hero-stats {

         grid-template-columns: 1fr;

     }

 }














 /* =========================================
DIVIDER
========================================= */

 .premium-divider {

     display: flex;

     justify-content: center;

     margin: 90px 0;

 }

 .premium-divider span {

     width: 90px;
     height: 90px;

     border-radius: 50%;

     background:
         linear-gradient(45deg,
             #7b1e12,
             #ff8f1f);

     display: flex;
     align-items: center;
     justify-content: center;

     color: white;

     font-size: 35px;

     box-shadow:
         0 20px 45px rgba(123, 30, 18, .2);

     animation:
         dividerFloat 5s infinite;

 }

 @keyframes dividerFloat {

     50% {

         transform:
             translateY(-10px);

     }

 }

 /* =========================================
OVERVIEW
========================================= */

 .overview-wrapper {

     display: grid;

     grid-template-columns:
         1fr 1fr;

     gap: 60px;

     align-items: center;

 }

 .overview-image {

     position: relative;

 }

 .overview-image img {

     width: 100%;

     border-radius: 35px;

     box-shadow:
         0 20px 50px rgba(0, 0, 0, .08);

 }

 .experience-badge {

     position: absolute;

     right: -20px;
     bottom: -20px;

     background:
         linear-gradient(45deg,
             #7b1e12,
             #ff8f1f);

     color: white;

     padding: 20px 50px;

     border-radius: 20px;

 }

 .experience-badge h3 {

     font-size: 70px;

 }

 .experience-badge span {

     font-size: 30px;

 }

 .mini-title {

     color: #ff8f1f;

     font-weight: 700;

 }

 .overview-content h3 {

     margin-top: 15px;

     font-size: 50px;

     color: #7b1e12;

     line-height: 1.3;

 }

 .overview-content p {

     margin: 25px 0;

     color: #666;

     line-height: 2;

 }

 .overview-points {

     display: grid;

     grid-template-columns:
         repeat(2, 1fr);

     gap: 20px;

 }

 .point {

     background: #fff;

     padding: 18px;

     border-radius: 15px;

     box-shadow:
         0 10px 20px rgba(0, 0, 0, .05);

 }

 .point i {

     color: #ff8f1f;

     margin-right: 10px;

 }

 /* =========================================
SERVICE CARDS
========================================= */

 .services-grid {

     display: grid;

     grid-template-columns:
         repeat(4, 1fr);

     gap: 30px;

 }

 .service-card {

     background:
         rgba(255, 255, 255, .85);

     backdrop-filter:
         blur(12px);

     border-radius: 30px;

     padding: 40px 25px;

     text-align: center;

     position: relative;

     overflow: hidden;

     transition: .5s;

     border:
         1px solid rgba(255, 255, 255, .5);

 }

 .service-card::before {

     content: '';

     position: absolute;

     width: 140px;
     height: 140px;

     background:
         rgba(255, 209, 102, .08);

     border-radius: 50%;

     top: -70px;
     right: -70px;

 }

 .service-card::after {

     content: '';

     position: absolute;

     top: 0;
     left: -100%;

     width: 100%;
     height: 100%;

     background:
         linear-gradient(90deg,
             transparent,
             rgba(255, 255, 255, .5),
             transparent);

     transition: 1s;

 }

 .service-card:hover::after {

     left: 100%;

 }

 .service-card:hover {

     transform:
         translateY(-15px);

     box-shadow:
         0 25px 60px rgba(123, 30, 18, .15);

 }

 .service-icon {

     width: 90px;
     height: 90px;

     margin: auto;

     border-radius: 50%;

     background:
         linear-gradient(45deg,
             #7b1e12,
             #ff8f1f);

     display: flex;
     align-items: center;
     justify-content: center;

     color: white;

     font-size: 35px;

     margin-bottom: 25px;

     transition: .8s;

 }

 .service-card:hover .service-icon {

     transform:
         rotateY(360deg);

 }

 .service-card h3 {

     color: #7b1e12;

     margin-bottom: 15px;

     font-size: 26px;

 }

 .service-card p {

     color: #666;

     line-height: 1.8;

 }

 /* Responsive */

 @media(max-width:1200px) {

     .services-grid {

         grid-template-columns:
             repeat(2, 1fr);

     }

 }

 @media(max-width:992px) {

     .overview-wrapper {

         grid-template-columns: 1fr;

     }

 }

 @media(max-width:768px) {

     .services-grid {

         grid-template-columns: 1fr;

     }

     .overview-points {

         grid-template-columns: 1fr;

     }

 }















 /* =====================================
CAMPAIGNS
===================================== */

 .campaign-row {

     display: grid;

     grid-template-columns: 1fr 1fr;

     gap: 60px;

     align-items: center;

     margin-bottom: 50px;
     width: 50%;

     border: 2px solid var(--gold);

 }

 .reverse {

     direction: rtl;

     border: 2px solid var(--gold);

 }

 .reverse .campaign-content {

     direction: ltr;

 }

 .campaign-image img {

     width: 80%;

     height: 250px;

     border-radius: 35px;

     transition: .5s;
     border: 5px solid #7b1e12;

 }

 .campaign-image img:hover {

     transform: scale(1.03);

 }

 .campaign-content span {

     color: #ff8f1f;

     font-weight: 700;

 }

 .campaign-content h3 {

     font-size: 50px;

     color: #7b1e12;

     margin: 20px 0;

 }

 .campaign-content p {

     line-height: 2;

     color: #666;

 }

 /* =====================================
TIMELINE
===================================== */

 .timeline {

     max-width: 900px;

     margin: auto;

     position: relative;

 }

 .timeline::before {

     content: '';

     position: absolute;

     left: 40px;

     top: 0;

     width: 4px;

     height: 100%;

     background:
         linear-gradient(#7b1e12,
             #ff8f1f);

 }

 .timeline-item {

     display: flex;

     gap: 30px;

     margin-bottom: 60px;

 }

 .timeline-icon {

     width: 80px;
     height: 80px;

     border-radius: 50%;

     background:
         linear-gradient(45deg,
             #7b1e12,
             #ff8f1f);

     color: white;

     display: flex;
     align-items: center;
     justify-content: center;

     font-size: 24px;

     font-weight: 700;

     position: relative;

     z-index: 2;

 }

 .timeline-content {

     background: white;

     padding: 30px;

     border-radius: 25px;

     flex: 1;

     box-shadow:
         0 15px 35px rgba(0, 0, 0, .08);

 }

 .timeline-content h3 {

     color: #7b1e12;

     margin-bottom: 15px;

 }

 /* =====================================
COUNTERS
===================================== */

 .counter-section {

     background:
         linear-gradient(rgba(20, 5, 2, .82),
             rgba(40, 10, 5, .88));

     padding: 50px 15%;

     display: grid;

     grid-template-columns:
         repeat(4, 1fr);

     gap: 50px;

 }

 .counter-card {

     background:
         rgba(255, 255, 255, .12);

     backdrop-filter: blur(10px);

     border-radius: 25px;

     text-align: center;

     padding: 20px;

 }

 .counter-card h2 {

     color: #ffd166;

     font-size: 60px;

 }

 .counter-card p {

     color: white;

 }

 /* =====================================
RESPONSIVE
===================================== */

 @media(max-width:992px) {

     .campaign-row {

         grid-template-columns: 1fr;

     }

     .counter-section {

         grid-template-columns:
             repeat(2, 1fr);

     }

 }

 @media(max-width:768px) {

     .counter-section {

         grid-template-columns: 1fr;

     }

 }





















 /* =====================================
MASONRY GALLERY
===================================== */

 .masonry-gallery {

     columns: 6;

     column-gap: 20px;

 }

 .gallery-item {

     margin-bottom: 20px;

     overflow: hidden;

     border-radius: 25px;
     border: 2px solid var(--saffron);


 }

 .gallery-item:hover {

     border: 5px solid var(--saffron);
     box-shadow:
         0 25px 60px var(--saffron);

 }

 .gallery-item img {

     width: 100%;

     display: block;

     transition: .6s;


 }

 .gallery-item img:hover {

     transform: scale(1.08);

 }

 .gallery-item:hover img {
     transform: scale(1.5);
     /* zoom 150% on hover */
 }

 /* =====================================
VOLUNTEER CTA
===================================== */

 .volunteer-section {

     position: relative;

     padding: 30px 2%;

     text-align: center;

     overflow: hidden;

     background:
         linear-gradient(rgba(20, 5, 2, .85),
             rgba(40, 10, 5, .88)),
         url('herobannerimg.png');

     background-size: cover;
     background-position: center;

 }

 .volunteer-overlay {

     position: absolute;

     inset: 0;

     background:
         radial-gradient(rgba(255, 209, 102, .08) 1px,
             transparent 1px);

     background-size: 30px 30px;


 }

 .volunteer-content {

     position: relative;

     z-index: 5;

 }

 .volunteer-content span {

     color: #ffd166;

     font-weight: 700;

 }

 .volunteer-content h2 {

     color: white;

     font-size: 50px;

     margin: 15px 0;

 }

 .volunteer-content p {

     color: #f3f3f3;

     font-size: 17px;

     max-width: 700px;

     margin: auto auto 15px;

 }

 .volunteer-btn {

     display: inline-block;

     background:
         linear-gradient(45deg,
             #7b1e12,
             #ff8f1f);

     padding: 10px 45px;

     border-radius: 50px;

     color: white;

     text-decoration: none;

     font-weight: 600;

 }

 /* =====================================
CONTACT STRIP
===================================== */

 .contact-strip {

     display: grid;

     grid-template-columns:
         repeat(3, 1fr);

     gap: 30px;

     padding: 0 7% 120px;

 }

 .contact-box {

     text-align: center;

     background: white;

     border-radius: 30px;

     padding: 40px;

     transition: .4s;

 }

 .contact-box:hover {

     transform:
         translateY(-10px);

 }

 .contact-icon {

     width: 90px;
     height: 90px;

     margin: auto auto 20px;

     border-radius: 50%;

     background:
         linear-gradient(45deg,
             #7b1e12,
             #ff8f1f);

     display: flex;
     align-items: center;
     justify-content: center;

     color: white;

     font-size: 30px;

 }

 /* =====================================
FOOTER
===================================== */

 /* FOOTER */
 .footer {

     background:
         linear-gradient(to right,
             #170502,
             #2b0904);

     color: #fff;

     padding: 40px 7% 10px;

 }

 .footer-grid {

     display: grid;

     grid-template-columns: repeat(4, 1fr);

     gap: 40px;

 }

 #footer-logo-img {
     margin-left: 20%;
 }

 .footer h3 {

     color: var(--gold);

     margin-bottom: 20px;

     font-size: 28px;

 }

 .footer p,
 .footer a {

     color: #ddd;

     line-height: 2;

     text-decoration: none;

 }

 .socials {

     display: flex;

     gap: 15px;

     margin-top: 20px;

 }

 .socials a {

     width: 65px;
     height: 65px;

     border-radius: 50%;

     background:
         rgba(255, 150, 150, 0.08);

     display: flex;
     align-items: center;
     justify-content: center;

     transition: .4s;

 }

 .socials a:hover {

     background:
         linear-gradient(45deg,
             var(--saffron));

     transform: translateY(-5px);

 }

 .copy {

     text-align: center;

     margin-top: 50px;

     padding-top: 25px;

     border-top:
         1px solid rgba(255, 255, 255, .1);

     color: #bbb;

 }

 /* ANIMATION */
 /*
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

 /* MOBILE */

 @media(max-width:992px) {

     .footer-grid {
         grid-template-columns: 1fr;
     }


     .footer {
         text-align: center;
     }

     .socials a {
         margin: auto;
     }

     #footer-logo-img {
         margin-left: 0%;
     }


 }





 /*=========================EXTRA CSS=====================================*/



 /* =====================================
PREMIUM PAGE ENHANCEMENT
===================================== */

 body {

     background:
         linear-gradient(180deg,
             #fffaf5 0%,
             #fffdf9 50%,
             #fffaf5 100%);

 }

 /* =====================================
SECTION BACKGROUND EFFECT
===================================== */

 .section {

     position: relative;

     overflow: hidden;

 }

 .section::before {

     content: '';

     position: absolute;

     width: 250px;
     height: 250px;

     border-radius: 50%;

     background:
         radial-gradient(rgba(255, 209, 102, .10),
             transparent);

     top: -100px;
     left: -100px;

 }

 .section::after {

     content: '';

     position: absolute;

     width: 220px;
     height: 220px;

     border-radius: 50%;

     background:
         radial-gradient(rgba(255, 143, 31, .08),
             transparent);

     right: -100px;
     bottom: -100px;

 }

 /* =====================================
SECTION TITLE PREMIUM
===================================== */

 .section-title h2 {

     text-transform: uppercase;

     letter-spacing: 1px;

 }

 .section-title h2::after {

     width: 160px;

     height: 5px;

 }

 /* =====================================
OVERVIEW SECTION
===================================== */

 .overview-wrapper {

     background: white;

     border-radius: 40px;

     padding: 50px;

     box-shadow:
         0 25px 60px rgba(0, 0, 0, .06);

 }

 .overview-image img {

     transition: .6s;

 }

 .overview-image:hover img {

     transform: scale(1.04);

 }

 .experience-badge {

     box-shadow:
         0 20px 40px rgba(123, 30, 18, .25);

 }

 /* =====================================
POINTS
===================================== */

 .point {

     transition: .4s;

     border-left: 4px solid transparent;

 }

 .point:hover {

     border-left: 4px solid var(--saffron);

     transform: translateX(8px);

 }

 /* =====================================
SERVICE CARD PREMIUM
===================================== */

 .service-card {

     box-shadow:
         0 15px 35px rgba(0, 0, 0, .05);

 }

 .service-card:hover {

     transform:
         translateY(-15px) scale(1.03);

     box-shadow:
         0 30px 70px rgba(123, 30, 18, .18);

 }

 .service-card h3 {

     transition: .3s;

 }

 .service-card:hover h3 {

     color: var(--saffron);

 }

 /* =====================================
CAMPAIGN SECTION
===================================== */

 .campaign-row {

     background: white;

     padding: 40px;

     border-radius: 35px;

     box-shadow:
         0 20px 50px rgba(0, 0, 0, .06);

     transition: .4s;

 }

 .campaign-row:hover {

     transform: translateY(-8px);

 }

 .campaign-image {

     overflow: hidden;

     border-radius: 30px;

 }

 /* =====================================
TIMELINE
===================================== */

 .timeline-content {

     transition: .4s;

 }

 .timeline-content:hover {

     transform: translateX(10px);

     box-shadow:
         0 20px 50px rgba(0, 0, 0, .08);

 }

 .timeline-icon {

     box-shadow:
         0 15px 35px rgba(123, 30, 18, .25);

 }

 /* =====================================
COUNTERS
===================================== */

 .counter-card {

     position: relative;

     overflow: hidden;

 }

 .counter-card::before {

     content: '';

     position: absolute;

     inset: 0;

     background:
         linear-gradient(90deg,
             transparent,
             rgba(255, 255, 255, .10),
             transparent);

     animation:
         shine 5s infinite;

 }

 @keyframes shine {

     from {

         transform:
             translateX(-100%);

     }

     to {

         transform:
             translateX(100%);

     }

 }

 /* =====================================
GALLERY
===================================== */

 .gallery-item {

     position: relative;

 }

 .gallery-item::before {

     content: '';

     position: absolute;

     inset: 0;

     background:
         linear-gradient(transparent,
             rgba(0, 0, 0, .45));

     opacity: 0;

     transition: .4s;

 }

 .gallery-item:hover::before {

     opacity: 1;

 }

 .gallery-item img {

     border-radius: 25px;

 }

 /* =====================================
CTA
===================================== */

 .volunteer-btn {

     transition: .4s;

 }

 .volunteer-btn:hover {

     transform:
         translateY(-6px);

     box-shadow:
         0 20px 40px rgba(255, 143, 31, .35);

 }

 /* =====================================
CONTACT BOX
===================================== */

 .contact-box {

     box-shadow:
         0 15px 35px rgba(0, 0, 0, .05);

 }

 .contact-box:hover {

     transform:
         translateY(-10px);

     box-shadow:
         0 25px 60px rgba(123, 30, 18, .15);

 }

 /* =====================================
FOOTER
===================================== */

 .footer {

     background:
         linear-gradient(180deg,
             #220804,
             #120301);

 }

 .social-links a {

     transition: .4s;

 }

 .social-links a:hover {

     background:
         linear-gradient(45deg,
             var(--primary),
             var(--saffron));

     transform:
         translateY(-5px);

 }

 /* =====================================
DIVIDER
===================================== */

 .premium-divider {

     margin: 15px 0;

 }

 .premium-divider span {

     width: 80px;
     height: 80px;

 }




 @media(max-width:600px) {

     .hero-content h1 {
         font-size: 38px;
         padding-top: 10%;
     }

     .hero-content p {
         font-size: 17px;
     }

     .section-title h2 {
         font-size: 36px;
     }

     .overview-content h3 {
         font-size: 25px;

     }

     .quote h2 {
         font-size: 38px;
     }

     .quote p {
         font-size: 18px;
     }

     .logo-box img {
         width: 60px;
         height: 60px;
     }

     .logo-text h2 {
         font-size: 12px;
     }


     .footer {
         text-align: center;
     }

     .socials a {
         margin: auto;
     }

     #footer-logo-img {
         margin-left: 0%;
     }

     .gallery-item img {
         width: 100%;

         display: block;

         transition: .6s;
         border: 2px solid var(--saffron);
     }

     .volunteer-content h2 {

         color: white;

         font-size: 35px;

         margin: 20px 0;

     }


     .masonry-gallery {

         columns: 1;

         column-gap: 1px;

     }


     .experience-badge {

         position: absolute;

         right: -20px;
         bottom: -20px;

         background:
             linear-gradient(45deg,
                 #7b1e12,
                 #ff8f1f);

         color: white;

         padding: 10px 20px;

         border-radius: 20px;

     }

     .experience-badge h3 {

         font-size: 30px;

     }

     .experience-badge span {

         font-size: 15px;

     }

 }







 .premium-divider::before {

     content: '';

     width: 38%;
     height: 2px;

     position: absolute;

     left: 8%;

     background:
         linear-gradient(to right,
             transparent,
             var(--gold));

 }

 .premium-divider::after {

     content: '';

     width: 38%;
     height: 2px;

     position: absolute;

     right: 8%;

     background:
         linear-gradient(to left,
             transparent,
             var(--gold));

 }




 .nav-toggle {
     display: none;
     font-size: 28px;
     color: #fff;
     cursor: pointer;
 }

 @media (max-width: 992px) {
     .nav-toggle {
         display: block;
     }

     .nav-links {
         position: fixed;
         top: 0;
         right: -100%;
         height: 100vh;
         width: 200px;
         background: rgba(20, 8, 2, .96);
         flex-direction: column;
         gap: 30px;
         padding: 100px 20px;
         transition: 0.4s;
         display: flex;
     }

     /* .nav-links button {
                position: fixed;
                top: 0;
                right: -100%;
                height: 100vh;
                width: 200px;
                background: rgba(20, 8, 2, .96);
                flex-direction: column;
                gap: 30px;
                padding: 100px 35px;
                transition: 0.4s;
                display: none;
            } */


     .nav-links.active {
         right: 0;
     }
 }





























 /**============================================================
                                    CONTACT PAGE
                    =============================================================**/

 /* =========================================
GLOBAL
========================================= */

 :root {

     --primary: #7b1e12;
     --secondary: #a62f10;

     --saffron: #ff8f1f;
     --light-saffron: #ffb347;

     --gold: #ffd166;

     --bg: #fffaf5;
     --card: #ffffff;

     --text: #2d2d2d;
     --light-text: #666;

     --footer: #1b0703;

 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {

     font-family: 'Noto Sans Devanagari', sans-serif;

     background:
         linear-gradient(180deg,
             #fff9f4 0%,
             #fffdfc 50%,
             #fff7ef 100%);

     overflow-x: hidden;

     color: var(--text);

 }

 /* =========================================
NAVBAR
========================================= */

 .navbar {

     width: 100%;

     padding: 15px 7%;

     position: fixed;

     top: 0;
     left: 0;

     z-index: 999;

     background:
         linear-gradient(to right,
             rgba(20, 5, 2, .92),
             rgba(65, 15, 8, .92));

     backdrop-filter: blur(15px);

     display: flex;
     justify-content: space-between;
     align-items: center;

 }

 .logo-box {

     display: flex;
     align-items: center;

     gap: 15px;

 }

 .logo-box img {

     width: 72px;
     height: 72px;

     border-radius: 50%;

     border: 3px solid var(--gold);

     object-fit: cover;

     animation: floatLogo 4s infinite ease-in-out;

 }

 .logo-text h2 {

     color: #fff;

     font-size: 28px;

 }

 .logo-text p {

     color: var(--gold);

 }

 .nav-links {

     display: flex;

     gap: 35px;

 }

 .nav-links a {

     color: #fff;

     text-decoration: none;

     font-weight: 600;

     transition: .4s;

     position: relative;

 }

 .nav-links a::after {

     content: '';

     width: 0%;
     height: 2px;

     background: var(--gold);

     position: absolute;

     left: 0;
     bottom: -6px;

     transition: .4s;

 }

 .nav-links a:hover::after {
     width: 100%;
 }

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

 /* =========================================
HERO
========================================= */

 .contact-hero {

     width: 100%;
     max-height: 55vh;

     background:
         linear-gradient(rgba(15, 5, 2, .82),
             rgba(35, 10, 5, .86));

     background-size: cover;
     background-position: center;
     background-attachment: fixed;

     display: flex;
     justify-content: center;
     align-items: center;

     text-align: center;

     padding: 10px 7%;

     position: relative;

     overflow: hidden;

     padding-top: 7%;
     padding-bottom: 1%;

 }

 .contact-hero::before {

     content: '📞';

     position: absolute;

     font-size: 230px;

     color: rgba(255, 209, 102, .05);

     animation: pulse 5s infinite;

 }

 .contact-hero::after {

     content: '';

     position: absolute;

     inset: 0;

     background:
         radial-gradient(rgba(255, 209, 102, .14) 1px,
             transparent 1px);

     background-size: 35px 35px;

     animation: particlesMove 20s linear infinite;

 }

 .contact-hero-content {

     position: relative;

     z-index: 2;



 }

 .contact-hero-content h1 {

     font-size: 50px;

     color: #fff;

     margin-bottom: 15px;

     line-height: 1.2;

 }

 .contact-hero-content h1 span {

     background:
         linear-gradient(45deg,
             #ffb347,
             #ffd166);

     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;

 }

 .contact-hero-content p {

     color: #f2f2f2;

     font-size: 22px;

     line-height: 2;


 }

 /* =========================================
WAVE
========================================= */

 .wave-divider svg {
     width: 100%;
     display: block;
 }

 /* =========================================
SECTION
========================================= */

 .section {

     padding: 110px 7%;

 }

 .section-title {

     text-align: center;

     margin-bottom: 70px;

 }

 .section-title h2 {

     font-size: 52px;

     color: var(--primary);

     margin-bottom: 20px;

     position: relative;

     display: inline-block;

 }

 .section-title h2::after {

     content: '';

     width: 70%;
     height: 4px;

     background:
         linear-gradient(to right,
             var(--saffron),
             var(--gold));

     position: absolute;

     left: 15%;
     bottom: -10px;

     border-radius: 20px;

 }

 .section-title p {

     max-width: 850px;

     margin: auto;

     line-height: 1.9;

     color: #666;

 }

 /* =========================================
CONTACT WRAPPER
========================================= */

 .contact-wrapper {

     display: grid;

     grid-template-columns: 1fr 1fr;

     gap: 50px;

 }

 /* =========================================
CONTACT INFO
========================================= */

 .contact-info {

     display: flex;

     flex-direction: column;

     gap: 30px;

 }

 .info-card {

     background: rgba(255, 255, 255, .9);

     border-radius: 30px;

     padding: 35px;

     display: flex;

     gap: 25px;

     align-items: flex-start;

     transition: .5s;

     border:
         1px solid rgba(255, 179, 71, .15);

     box-shadow:
         0 12px 30px rgba(0, 0, 0, .04);

 }

 .info-card:hover {

     transform: translateY(-10px);

     box-shadow:
         0 20px 40px rgba(166, 47, 16, .12);

 }

 .info-icon {

     min-width: 75px;
     height: 75px;

     border-radius: 50%;

     background:
         linear-gradient(45deg,
             var(--primary),
             var(--saffron));

     display: flex;
     align-items: center;
     justify-content: center;

     color: #fff;

     font-size: 28px;

     box-shadow:
         0 10px 25px rgba(166, 47, 16, .18);

 }

 .info-content h3 {

     color: var(--primary);

     font-size: 28px;

     margin-bottom: 12px;

 }

 .info-content p {

     color: #666;

     line-height: 1.9;

 }

 /* =========================================
FORM
========================================= */

 .contact-form {

     background: rgba(255, 255, 255, .9);

     padding: 50px;

     border-radius: 35px;

     border:
         1px solid rgba(255, 179, 71, .15);

     box-shadow:
         0 15px 35px rgba(0, 0, 0, .05);

 }

 .contact-form h3 {

     color: var(--primary);

     font-size: 38px;

     margin-bottom: 30px;

 }

 .form-group {

     margin-bottom: 25px;
     display: flex;
     width: auto;

 }

 .form-group input,
 .form-group textarea {

     width: 100%;

     padding: 18px 22px;

     border-radius: 15px;

     border:
         1px solid rgba(255, 179, 71, .25);

     background: #fff;

     font-size: 16px;

     font-family: 'Noto Sans Devanagari', sans-serif;

     outline: none;

     transition: .4s;

 }

 .form-group input:focus,
 .form-group textarea:focus {

     border-color: var(--saffron);

     box-shadow:
         0 0 0 4px rgba(255, 179, 71, .12);

 }

 .form-group textarea {

     min-height: 70px;

     resize: none;

 }

 .submit-btn {

     padding: 16px 40px;

     border: none;

     border-radius: 50px;

     background:
         linear-gradient(45deg,
             var(--primary),
             var(--saffron));

     color: #fff;

     font-size: 18px;

     font-weight: 700;

     cursor: pointer;

     transition: .4s;

     box-shadow:
         0 12px 25px rgba(166, 47, 16, .18);

 }

 .submit-btn:hover {

     transform: translateY(-5px);

     box-shadow:
         0 20px 35px rgba(166, 47, 16, .22);

 }

 /* =========================================
MAP SECTION
========================================= */

 .map-section {

     padding: 0 7% 110px;

 }

 .map-box {

     width: 100%;

     height: 500px;

     border-radius: 35px;

     overflow: hidden;

     box-shadow:
         0 20px 40px rgba(0, 0, 0, .08);

 }

 .map-box iframe {

     width: 100%;
     height: 100%;

     border: none;

 }

 /* =========================================
FOOTER
========================================= */

 .footer {

     background:
         linear-gradient(to right,
             #170502,
             #2b0904);

     color: #fff;

     padding: 90px 7% 30px;

 }

 .footer-grid {

     display: grid;

     grid-template-columns: repeat(4, 1fr);

     gap: 40px;

 }

 #footer-logo-img {
     margin-left: 20%;
 }

 .footer h3 {

     color: var(--gold);

     margin-bottom: 20px;

     font-size: 28px;

 }

 .footer p,
 .footer a {

     color: #ddd;

     line-height: 2;

     text-decoration: none;

 }

 .socials {

     display: flex;

     gap: 15px;

     margin-top: 20px;

 }

 .socials a {

     width: 65px;
     height: 65px;

     border-radius: 50%;

     background:
         rgba(255, 150, 150, 0.08);

     display: flex;
     align-items: center;
     justify-content: center;

     transition: .4s;

 }

 .socials a:hover {

     background:
         linear-gradient(45deg,
             var(--saffron));

     transform: translateY(-5px);

 }

 .copy {

     text-align: center;

     margin-top: 50px;

     padding-top: 25px;

     border-top:
         1px solid rgba(255, 255, 255, .1);

     color: #bbb;

 }

 /* =========================================
ANIMATION
========================================= */

 @keyframes floatLogo {

     0% {
         transform: translateY(0px);
     }

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

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

 }

 @keyframes pulse {

     0% {
         opacity: .03;
     }

     50% {
         opacity: .08;
     }

     100% {
         opacity: .03;
     }

 }

 @keyframes particlesMove {

     from {
         transform: translateY(0);
     }

     to {
         transform: translateY(-120px);
     }

 }

 /* =========================================
RESPONSIVE
========================================= */

 @media(max-width:992px) {

     .contact-wrapper,
     .footer-grid {

         grid-template-columns: 1fr;

     }

     .nav-links {
         display: none;
     }

     .contact-hero-content h1 {
         font-size: 50px;
     }

     .footer-grid {
         grid-template-columns: 1fr;
     }

 }

 @media(max-width:600px) {

     .contact-hero-content h1 {
         font-size: 38px;
         padding-top: 25%;
     }

     .contact-hero-content p {
         font-size: 17px;
     }

     .section-title h2 {
         font-size: 36px;
     }

     .contact-form {
         padding: 35px 25px;
     }

     .logo-box img {
         width: 60px;
         height: 60px;
     }

     .logo-text h2 {
         font-size: 22px;
     }



     .footer {
         text-align: center;
     }

     .socials a {
         margin: auto;
     }

     #footer-logo-img {
         margin-left: 0%;
     }

 }



 .nav-toggle {
     display: none;
     font-size: 28px;
     color: #fff;
     cursor: pointer;
 }

 @media (max-width: 992px) {
     .nav-toggle {
         display: block;
     }

     .nav-links {
         position: fixed;
         top: 0;
         right: -100%;
         height: 100vh;
         width: 250px;
         background: rgba(20, 8, 2, .96);
         flex-direction: column;
         gap: 30px;
         padding: 100px 20px;
         transition: 0.4s;
         display: flex;
     }

     .nav-links button {
         position: fixed;
         top: 0;
         right: -100%;
         height: 100vh;
         width: 200px;
         background: rgba(20, 8, 2, .96);
         flex-direction: column;
         gap: 30px;
         padding: 100px 35px;
         transition: 0.4s;
         display: none;
     }

     .nav-links.active {
         right: 0;
     }
 }



 /* Dropdown styling */
 .nav-links .dropdown {
     position: relative;
 }

 .nav-links .dropbtn {
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .nav-links .dropdown-content {
     display: none;
     position: absolute;
     top: 40px;
     left: 0;
     background: rgba(20, 8, 2, .96);
     flex-direction: column;
     min-width: 160px;
     z-index: 1000;
     border-radius: 8px;
     overflow: hidden;
 }

 .nav-links .dropdown-content a {
     color: #fff;
     padding: 12px 20px;
     text-decoration: none;
     display: block;
     transition: 0.3s;
 }

 .nav-links .dropdown-content a:hover {
     background: var(--saffron);
     color: #2b0904;
 }

 .nav-links .dropdown:hover .dropdown-content {
     display: flex;
 }























 /**============================================================
                                    DONATE PAGE
                    =============================================================**/

 :root {
     --saffron: #ff7b00;
     --dark: #230b02;
     --gold: #ffcc4d;
     --light: #fff7ed;
     --white: #ffffff;
     --red: #7a0000;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Noto Sans Devanagari', sans-serif;
     background: var(--light);
     overflow-x: hidden;
     color: #222;
 }

 /* NAVBAR */

 .navbar {
     width: 100%;
     padding: 14px 7%;
     background: rgba(20, 8, 2, 0.96);
     position: fixed;
     top: 0;
     left: 0;
     z-index: 999;
     display: flex;
     justify-content: space-between;
     align-items: center;
     backdrop-filter: blur(10px);
 }

 .logo-box {
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .logo-box img {
     width: 78px;
     height: 78px;
     object-fit: contain;
     border-radius: 50%;
     background: #fff;
     padding: 4px;
     border: 2px solid var(--gold);
 }

 .logo-text h2 {
     color: #fff;
     font-size: 28px;
     font-weight: 800;
 }

 .logo-text p {
     color: #ffcf63;
     font-size: 14px;
 }

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

 .nav-links button {
     margin-top: 0%;
 }

 .nav-links a {
     color: #fff;
     text-decoration: none;
     font-weight: 600;
     position: relative;
     transition: .3s;
 }

 .nav-links a::after {
     content: '';
     width: 0;
     height: 2px;
     background: var(--gold);
     position: absolute;
     left: 0;
     bottom: -5px;
     transition: .3s;
 }

 .nav-links a:hover::after {
     width: 100%;
 }

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

 /* DONATE HERO */

 .donate-hero {
     height: 30vh;
     background:
         linear-gradient(rgba(15, 5, 2, .82),
             rgba(35, 10, 5, .86)),
         url(images/donation-bg.jpg) center/cover;
     display: flex;
     align-items: center;
     text-align: center;
     margin-top: 3%;
     padding-top: 2%;
 }

 .donate-content {
     max-width: 850px;
     margin: auto;
 }

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

 .donate-content h1 {
     color: #fff;
     font-size: 50px;
     margin-bottom: 15px;
 }

 .donate-content p {
     color: #fff;
     font-size: 22px;
     margin-bottom: 15px;
 }

 .donate-content p {
     color: #fff;
     font-size: 22px;
     margin-bottom: 15px;
 }

 /* Donation Grid */

 .donation-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 30px;
 }

 .donation-card {
     padding: 40px;
     text-align: center;
 }

 .donation-card .icon {
     font-size: 60px;
     margin-bottom: 20px;
 }























 /* =====================================
DONATION FORM
===================================== */

 .donation-form-section {

     /* padding: 120px 7%; */
     position: relative;
     overflow: hidden;

 }

 .donation-form-wrapper {

     max-width: 1000px;
     margin: auto;

     background:
         rgba(255, 255, 255, .85);

     backdrop-filter: blur(18px);

     border-radius: 35px;

     padding: 60px;

     box-shadow:
         0 25px 60px rgba(0, 0, 0, .08);

     border:
         1px solid rgba(255, 255, 255, .5);

 }

 .form-grid {

     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 25px;

 }

 .form-group {

     margin-bottom: 25px;

 }

 .form-group label {

     display: block;

     margin-bottom: 10px;

     color: #7b1e12;

     font-weight: 700;

 }

 .form-group input,
 .form-group select,
 .form-group textarea {

     width: 100%;

     padding: 18px 22px;

     border-radius: 15px;

     border:
         2px solid #f1e1d4;

     background: #fff;

     font-size: 16px;

     transition: .3s;

 }

 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {

     outline: none;

     border-color: #ff8f1f;

     box-shadow:
         0 0 0 5px rgba(255, 143, 31, .15);

 }

 .quick-amounts {

     display: flex;
     gap: 15px;
     flex-wrap: wrap;

     margin-bottom: 25px;

 }

 .quick-amounts button {

     border: none;

     background:
         linear-gradient(45deg,
             #7b1e12,
             #ff8f1f);

     color: #fff;

     padding: 10px 55px;

     border-radius: 50px;

     cursor: pointer;

     font-weight: 700;

     transition: .3s;
     font-size: 16px;

 }

 .quick-amounts button:hover {

     transform:
         translateY(-5px);

 }

 .donate-btn {

     width: 100%;

     border: none;

     padding: 20px;

     border-radius: 60px;

     background:
         linear-gradient(45deg,
             #7b1e12,
             #ff8f1f);

     color: #fff;

     font-size: 20px;

     font-weight: 700;

     cursor: pointer;

     transition: .4s;

     box-shadow:
         0 20px 40px rgba(123, 30, 18, .25);

 }

 .donate-btn:hover {

     transform:
         translateY(-5px);

 }

 @media(max-width:768px) {

     .donation-form-wrapper {

         padding: 35px 25px;

     }

     .form-grid {

         grid-template-columns: 1fr;

     }

 }

 /* BANK */

 .bank-section {
     padding: 0px 7%;
 }

 .bank-section .container {
     display: grid;
     grid-template-columns: 2fr 1fr;
     gap: 40px;
 }

 .bank-box,
 .qr-box {
     padding: 50px;
 }

 .qr-box {
     text-align: center;
 }

 .qr-box img {
     width: 220px;
     margin: auto;
 }

 /* WHY */

 .why-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 25px;
 }

 .why-box {
     padding: 35px;
     text-align: center;
     font-size: 22px;
     font-weight: 700;
 }

 /* CTA */

 .donation-cta {
     background:
         linear-gradient(135deg, #7b1e12, #ff8f1f);
     padding: 40px 7%;
     text-align: center;
     color: #fff;
 }

 .donation-cta h2 {
     font-size: 55px;
     margin-bottom: 20px;
 }

 .donation-cta p {
     font-size: 20px;
     margin-bottom: 30px;
 }

 /* Responsive */

 @media(max-width:992px) {

     .donation-grid,
     .why-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .bank-section .container {
         grid-template-columns: 1fr;
     }

 }

 @media(max-width:768px) {

     .donation-grid,
     .why-grid {
         grid-template-columns: 1fr;
     }

     .donate-content h1 {
         font-size: 32px;
     }

     .donate-content p {
         font-size: 15px;
     }

 }

 /* FOOTER */
 .footer {

     background:
         linear-gradient(to right,
             #170502,
             #2b0904);

     color: #fff;

     padding: 90px 7% 30px;

 }

 .footer-grid {

     display: grid;

     grid-template-columns: repeat(4, 1fr);

     gap: 40px;

 }

 #footer-logo-img {
     margin-left: 20%;
 }

 .footer h3 {

     color: var(--gold);

     margin-bottom: 20px;

     font-size: 28px;

 }

 .footer p,
 .footer a {

     color: #ddd;

     line-height: 2;

     text-decoration: none;

 }

 .socials {

     display: flex;

     gap: 15px;

     margin-top: 20px;

 }

 .socials a {

     width: 65px;
     height: 65px;

     border-radius: 50%;

     background:
         rgba(255, 150, 150, 0.08);

     display: flex;
     align-items: center;
     justify-content: center;

     transition: .4s;

 }

 .socials a:hover {

     background:
         linear-gradient(45deg,
             var(--saffron));

     transform: translateY(-5px);

 }

 .copy {

     text-align: center;

     margin-top: 50px;

     padding-top: 25px;

     border-top:
         1px solid rgba(255, 255, 255, .1);

     color: #bbb;

 }

 /* ANIMATION */

 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(40px);
     }

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

 /* MOBILE */

 @media(max-width:992px) {

     .hero-content h1 {
         font-size: 50px;
     }

     .about-grid,
     .values-grid,
     .activities-grid,
     .footer-grid {
         grid-template-columns: 1fr;
     }

     .nav-links {
         display: none;
     }
 }

 @media(max-width:600px) {

     .hero-content h1 {
         font-size: 38px;
     }

     .hero-content p {
         font-size: 17px;
     }

     .section-title h2 {
         font-size: 15px;
     }

     .quote h2 {
         font-size: 34px;
     }

     .quote p {
         font-size: 18px;
     }

     .cta h2 {
         font-size: 34px;
     }

     .cta p {
         font-size: 18px;
     }

     .logo-text h2 {
         font-size: 20px;
     }

     .logo-box img {
         width: 60px;
         height: 60px;
     }



     .footer {
         text-align: center;
     }

     .socials a {
         margin: auto;
     }

     #footer-logo-img {
         margin-left: 0%;
     }

     .section-title h2 {
         font-size: 10px;
     }


 }



















 /*EXTRA CSS*/


 /* ===========================
GLOBAL SECTION
=========================== */

 .section {
     padding: 20px 7%;
     position: relative;
     border-bottom: none;
 }

 .container {
     width: 100%;
     max-width: 1400px;
     margin: auto;
 }

 .section-title {
     text-align: center;
     margin-bottom: 20px;
 }

 .section-title h2 {
     font-size: 55px;
     color: #7b1e12;
     margin-bottom: 15px;
     font-weight: 800;
 }

 .section-title p {
     max-width: 800px;
     margin: auto;
     color: #666;
     font-size: 18px;
 }

 /* ===========================
PREMIUM BUTTON
=========================== */

 .theme-btn {
     display: inline-block;
     padding: 10px 40px;
     border-radius: 60px;
     text-decoration: none;
     color: #fff;
     font-weight: 600;
     background: linear-gradient(45deg, #7b1e12, #ff8f1f);
     box-shadow: 0 15px 35px rgba(123, 30, 18, .25);
     transition: .4s;

 }

 .theme-btn:hover {
     transform: translateY(-6px);
     box-shadow: 0 25px 45px rgba(123, 30, 18, .35);
 }

 /* ===========================
GLASS CARD
=========================== */

 .glass-card {
     background: rgba(255, 255, 255, .9);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, .5);
     border-radius: 25px;
     box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
 }

 /* ===========================
PREMIUM DIVIDER
=========================== */

 .premium-divider {
     display: flex;
     justify-content: center;
     margin: 0px 0;
 }

 .premium-divider span {
     width: 90px;
     height: 90px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 40px;
     color: #fff;
     background: linear-gradient(45deg, #7b1e12, #ff8f1f);
     box-shadow: 0 15px 40px rgba(123, 30, 18, .25);
     animation: floatIcon 4s infinite ease-in-out;
 }

 @keyframes floatIcon {
     50% {
         transform: translateY(-12px);
     }
 }

 /* ===========================
DONATION CARDS
=========================== */

 .donation-card {
     padding: 40px 25px;
     text-align: center;
     transition: .4s;
 }

 .donation-card:hover {
     transform: translateY(-15px);
 }

 .donation-card .icon {
     width: 90px;
     height: 90px;
     margin: auto;
     margin-bottom: 20px;
     border-radius: 50%;
     background: linear-gradient(45deg, #7b1e12, #ff8f1f);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 42px;
     color: white;
 }

 .donation-card h3 {
     color: #7b1e12;
     margin-bottom: 10px;
 }

 /* ===========================
BANK SECTION
=========================== */

 .bank-box {
     background: white;
 }

 .bank-box h2 {
     color: #7b1e12;
     margin-bottom: 25px;
 }

 .bank-box ul {
     list-style: none;
 }

 .bank-box li {
     padding: 15px 0;
     border-bottom: 1px solid #eee;
 }

 .qr-box {
     text-align: center;
 }

 .qr-box img {
     border-radius: 25px;
     border: 5px solid #ffd166;
 }

 /* ===========================
COUNTER SECTION
=========================== */

 .counter-section {
     padding: 100px 7%;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 30px;
     /* background-image: url(finalbannerimg.png); */
     background: linear-gradient(rgba(0, 0, 0, 0.7),
             rgba(0, 0, 0, 0.7)),
         url('finalbannerimg.png') center/cover no-repeat;
     border-top: 3px solid var(--secondary);
 }

 .counter-card {
     background: rgba(173, 149, 12, 0.1);
     backdrop-filter: blur(10px);
     border-radius: 25px;
     text-align: center;
     color: white;
     border: 2px solid var(--light-saffron);
 }

 .counter-card h2 {
     font-size: 60px;
     color: #ffd166;
     margin-bottom: 10px;
 }

 .counter-card p {
     font-size: 18px;
 }

 /* ===========================
WHY BOX
=========================== */

 .why-box {
     transition: .4s;
 }

 .why-box:hover {
     transform: translateY(-10px);
     background: linear-gradient(45deg, #7b1e12, #ff8f1f);
     color: white;
 }

 /* ===========================
CTA SECTION
=========================== */

 .donation-cta {
     position: relative;
     overflow: hidden;
 }

 .donation-cta::before {
     content: "";
     position: absolute;
     width: 400px;
     height: 400px;
     border-radius: 50%;
     background: rgba(255, 255, 255, .08);
     top: -200px;
     left: -100px;
 }

 .donation-cta::after {
     content: "";
     position: absolute;
     width: 350px;
     height: 350px;
     border-radius: 50%;
     background: rgba(255, 255, 255, .08);
     bottom: -180px;
     right: -120px;
 }



 /* =========================================
PREMIUM DIVIDER
========================================= */

 .premium-divider {

     width: 100%;

     display: flex;
     justify-content: center;
     align-items: center;

     position: relative;

     margin: auto;
     margin: 30px 0px;

 }

 .premium-divider::before {

     content: '';

     width: 38%;
     height: 2px;

     position: absolute;

     left: 8%;

     background:
         linear-gradient(to right,
             transparent,
             var(--gold));

 }

 .premium-divider::after {

     content: '';

     width: 38%;
     height: 2px;

     position: absolute;

     right: 8%;

     background:
         linear-gradient(to left,
             transparent,
             var(--gold));

 }

 .premium-divider span {

     width: 85px;
     height: 85px;

     border-radius: 50%;

     background:
         linear-gradient(45deg,
             var(--primary),
             var(--light-saffron));

     color: #492323;

     display: flex;
     align-items: center;
     justify-content: center;

     font-size: 35px;

     box-shadow:
         0 12px 30px rgba(123, 30, 18, .18);

     animation: floatOm 4s infinite ease-in-out;

 }


 .nav-toggle {
     display: none;
     font-size: 28px;
     color: #fff;
     cursor: pointer;
 }

 @media (max-width: 992px) {
     .nav-toggle {
         display: block;
     }

     .nav-links {
         position: fixed;
         top: 0;
         right: -100%;
         height: 100vh;
         width: 250px;
         background: rgba(20, 8, 2, .96);
         flex-direction: column;
         gap: 30px;
         padding: 100px 20px;
         transition: 0.4s;
         display: flex;
     }

     .nav-links button {
         position: fixed;
         top: 0;
         right: -100%;
         height: 100vh;
         width: 200px;
         background: rgba(20, 8, 2, .96);
         flex-direction: column;
         gap: 30px;
         padding: 100px 35px;
         transition: 0.4s;
         display: none;
     }


     .nav-links.active {
         right: 0;
     }
 }
















 /*============================================           HOME PAGE          ========================================*/


 :root {
     --saffron: #ff7b00;
     --dark: #230b02;
     --gold: #ffcc4d;
     --light: #fff7ed;
     --white: #ffffff;
     --red: #7a0000;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Noto Sans Devanagari', sans-serif;
     background: var(--light);
     overflow-x: hidden;
     color: #222;
 }


 /* =========================================
NAVBAR
========================================= */

 .navbar {

     width: 100%;

     padding: 9px 7%;

     position: fixed;

     top: 0;
     left: 0;

     z-index: 999;

     background:
         linear-gradient(to right,
             rgba(20, 5, 2, .92),
             rgba(65, 15, 8, .92));

     backdrop-filter: blur(15px);

     display: flex;
     justify-content: space-between;
     align-items: center;

 }

 .logo-box {

     display: flex;
     align-items: center;

     gap: 15px;

 }

 .logo-box img {

     width: 72px;
     height: 72px;

     border-radius: 50%;

     border: 3px solid var(--gold);

     object-fit: cover;

     animation: floatLogo 4s infinite ease-in-out;

 }

 .logo-text h2 {

     color: #fff;

     font-size: 25px;

 }

 .logo-text p {

     color: var(--gold);

 }

 .nav-links {

     display: flex;

     gap: 35px;

 }

 .nav-links a {

     color: #fff;

     text-decoration: none;

     font-weight: 600;

     transition: .4s;

     position: relative;

 }

 .nav-links a::after {

     content: '';

     width: 0%;
     height: 2px;

     background: var(--gold);

     position: absolute;

     left: 0;
     bottom: -6px;

     transition: .4s;

 }

 .nav-links a:hover::after {
     width: 100%;
 }

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




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

 }






 .nav-toggle {
     display: none;
     font-size: 28px;
     color: #fff;
     cursor: pointer;
 }

 @media (max-width: 992px) {
     .nav-toggle {
         display: block;
     }

     .nav-links {
         position: fixed;
         top: 0;
         right: -100%;
         height: 100vh;
         width: 150px;
         background: rgba(20, 8, 2, .96);
         flex-direction: column;
         gap: 30px;
         padding: 100px 20px;
         transition: 0.4s;
         display: flex;
     }

     .nav-links button {
         position: fixed;
         top: 0;
         right: -100%;
         height: 100vh;
         width: 200px;
         background: rgba(20, 8, 2, .96);
         flex-direction: column;
         gap: 30px;
         padding: 100px 35px;
         transition: 0.4s;
         display: none;
     }

     .nav-links.active {
         right: 3;
     }
 }



 /* Dropdown styling */
 .nav-links .dropdown {
     position: relative;
 }

 .nav-links .dropbtn {
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .nav-links .dropdown-content {
     display: none;
     position: absolute;
     top: 40px;
     left: 0;
     background: rgba(20, 8, 2, .96);
     flex-direction: column;
     min-width: 160px;
     z-index: 1000;
     border-radius: 8px;
     overflow: hidden;
 }

 .nav-links .dropdown-content a {
     color: #fff;
     padding: 12px 20px;
     text-decoration: none;
     display: block;
     transition: 0.3s;
 }

 .nav-links .dropdown-content a:hover {
     background: var(--saffron);
     color: #2b0904;
 }

 .nav-links .dropdown:hover .dropdown-content {
     display: flex;
 }


 .footer-hyper-link a::after {
     content: '';

     width: 0%;
     height: 2px;

     background: var(--gold);

     position: absolute;

     left: 0;
     bottom: -6px;

     transition: .4s;
 }





 .footer-hyper-link a {

     color: #fff;

     text-decoration: none;

     font-weight: 600;

     transition: .4s;

     position: relative;

 }

 .footer-hyper-link a::after {

     content: '';

     width: 0%;
     height: 2px;

     background: var(--gold);

     position: absolute;

     left: 0;
     bottom: -6px;

     transition: .2s;

 }

 .footer-hyper-link a:hover::after {
     width: 100%;
 }

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




 @media (min-width:1400px) {

     .home-hero-banner img {
         margin-top: 4.7%;
     }
 }

 @media (max-width:1400px) {

     .home-hero-banner img {
         margin-top: 6.5%;
     }
 }

 @media (max-width:1200px) {

     .home-hero-banner img {
         margin-top: 5.3%;
     }
 }

 @media (max-width:991px) {

     .home-hero-banner img {
         margin-top: 7%;
     }
 }





 @media (max-width:768px) {

     .home-hero-banner img {
         margin-top: 9%;
     }
 }





 @media (max-width:650px) {

     .home-hero-banner img {
         margin-top: 13%;
     }
 }




 @media (max-width:576px) {

     .home-hero-banner img {
         margin-top: 26%;
     }


     .founder-content h3 {

         color: var(--primary);

         font-size: 28px;
     }

     .founder-content p {
         line-height: 2;

         margin-bottom: 18px;

         font-size: 18px;

     }

     .founder-wrapper {
         margin-left: 0%;
     }

     .premium-dividerm span {
         width: 25px;
         height: 25px;

         border-radius: 50%;
         font-size: 5px;
     }

     #about-section-title h2 {
         font-size: 2;
     }

     .services-hero {

         max-height: 50vh;
         margin-top: 0%;

     }

     .hero {
         margin-top: 20%;
     }

     .contact-hero {
         margin-top: 10%;
     }

     .contact-hero-content {
         margin-top: 10%;
     }

     .contact-hero-content h1 {
         margin-top: 0%;
     }



 }

 @media(max-width:600px) {

     .counter-section {

         grid-template-columns: 1fr;
         padding: 50px 1%;

     }

     .counter-card {
         padding: 0%;
     }

     .counter-card h2 {
         font-size: 40px;
         padding: 3% 0%;
     }

     .counter-card p {
         font-size: 15px;
     }

     .form-group {
         flex-direction: column;
         gap: 20px;
     }

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

     .gallery-hero {
         height: 25%;
         background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5));
         color: white;
         text-align: center;
         display: flex;
         align-items: center;
         justify-content: center;
         position: relative;
     }

     .donate-hero {

         margin-top: 25%;
         padding-top: 2%;
     }

 }



















 /*=====================  KATHA-FORM  ========================*/


 :root {
     --primary: #7b1e12;
     --saffron: #ff8f1f;
     --gold: #ffd166;
     --bg: #fffaf5;
 }

 body {
     margin: 0;
     font-family: 'Noto Sans Devanagari', sans-serif;
     background: var(--bg);
 }

 /* katha-form-wrapper */
 .katha-form-wrapper {
     width: 92%;
     max-width: 1800px;
     margin: 40px auto;
     background: #fff;
     border-radius: 20px;
     box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
     border-top: 6px solid var(--saffron);
     overflow: hidden;
 }

 /* katha-form-header */
 .katha-form-header {
     text-align: center;
     padding: 25px;
 }

 .katha-form-header h2 {
     margin: 0;
     color: var(--primary);
     font-size: 28px;
 }

 .katha-form-header p {
     color: #666;
 }

 /* FORM GRID */
 .grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 15px;
     padding: 20px;
 }

 .katha-form-full {
     grid-column: span 2;
 }

 /* INPUTS */
 input, select, textarea {
     width: 100%;
     padding: 12px;
     border-radius: 10px;
     border: 1px solid #ddd;
     outline: none;
     font-size: 14px;
 }

 input:focus,
 select:focus,
 textarea:focus {
     border-color: var(--saffron);
     box-shadow: 0 0 10px rgba(255, 143, 31, 0.2);
 }

 /* BUTTON */
 .btn {
     width: 90%;
     margin: 20px auto 40px;
     display: block;
     padding: 14px;
     border: none;
     border-radius: 50px;
     font-weight: 700;
     color: #fff;
     background: linear-gradient(45deg, var(--primary), var(--saffron));
     cursor: pointer;
     transition: .3s;
 }

 .btn:hover {
     transform: translateY(-4px);
     box-shadow: 0 10px 25px rgba(123, 30, 18, 0.3);
 }

 /* RESPONSIVE */
 @media(max-width:768px) {
     .grid {
         grid-template-columns: 1fr;
         padding: 15px;
     }

     .katha-form-full {
         grid-column: span 1;
     }
 }














 /* =========================================================
   PADADHIKARI / OFFICIALS SECTION
   HOME PAGE THEME
   MAROON + SAFFRON + GOLD
========================================================= */

 .officials-section {
     position: relative;
     padding: 60px 7%;
     background:
         radial-gradient(circle at 10% 15%,
             rgba(255, 209, 102, 0.12),
             transparent 28%),
         radial-gradient(circle at 90% 85%,
             rgba(255, 143, 31, 0.10),
             transparent 30%),
         linear-gradient(180deg,
             #fffaf5 0%,
             #fffdf9 50%,
             #fff7ef 100%);

     overflow: hidden;
 }


 /* Decorative Om */

 .officials-section::before {
     content: "ॐ";

     position: absolute;

     top: 20px;
     right: 5%;

     font-family: serif;
     font-size: 170px;

     color: rgba(123, 30, 18, 0.045);

     pointer-events: none;

     animation: officialsOmFloat 5s ease-in-out infinite;
 }


 .officials-section::after {
     content: "";

     position: absolute;

     width: 280px;
     height: 280px;

     left: -150px;
     bottom: -140px;

     border-radius: 50%;

     background:
         radial-gradient(circle,
             rgba(255, 143, 31, 0.12),
             transparent 70%);

     pointer-events: none;
 }


 /* =========================================================
   CONTAINER
========================================================= */

 .officials-container {
     width: 100%;
     max-width: 1800px;

     margin: auto;

     position: relative;
     z-index: 2;
 }


 /* =========================================================
   HEADING
========================================================= */

 .officials-heading {
     text-align: center;

     margin-bottom: 20px;
 }


 /* Small Badge */

 .officials-subtitle {
     display: inline-flex;

     align-items: center;
     justify-content: center;

     gap: 9px;

     padding: 9px 20px;

     border-radius: 50px;

     color: #7b1e12;

     background:
         linear-gradient(135deg,
             rgba(255, 143, 31, 0.10),
             rgba(255, 209, 102, 0.20));

     border: 1px solid rgba(255, 143, 31, 0.25);

     font-size: 14px;

     font-weight: 700;

     margin-bottom: 18px;

     box-shadow:
         0 8px 20px rgba(123, 30, 18, 0.06);
 }


 .officials-subtitle i {
     color: #ff8f1f;

     font-size: 16px;
 }


 /* Main Heading */

 .officials-heading h2 {
     margin: 0;

     color: #7b1e12;

     font-size: 50px;

     line-height: 1.2;

     font-weight: 800;

     letter-spacing: .3px;

     position: relative;

     display: inline-block;
 }


 /* Heading Underline */

 .officials-heading h2::after {
     content: "";

     position: absolute;

     width: 150px;
     height: 4px;

     left: 50%;
     bottom: -14px;

     transform: translateX(-50%);

     border-radius: 20px;

     background:
         linear-gradient(90deg,
             #7b1e12,
             #ff8f1f,
             #ffd166);

     box-shadow:
         0 4px 15px rgba(255, 143, 31, 0.25);
 }


 .officials-heading>p {
     max-width: 750px;

     margin: 30px auto 0;

     color: #666;

     font-size: 17px;

     line-height: 1.9;
 }


 /* =========================================================
   DIVIDER
========================================================= */

 .officials-divider {
     display: flex;

     align-items: center;
     justify-content: center;

     gap: 14px;

     margin-top: 25px;
 }


 .officials-divider span {
     width: 100px;
     height: 2px;

     border-radius: 10px;

     background:
         linear-gradient(90deg,
             transparent,
             #ff8f1f,
             #ffd166);
 }


 .officials-divider span:last-child {
     background:
         linear-gradient(90deg,
             #ffd166,
             #ff8f1f,
             transparent);
 }


 .officials-divider i {
     color: #7b1e12;

     font-size: 17px;

     animation:
         officialsStarPulse 2s ease-in-out infinite;
 }


 /* =========================================================
   OFFICIALS GRID
========================================================= */

 .officials-grid {
     display: grid;

     grid-template-columns:
         repeat(6, 1fr);

     gap: 32px;
 }


 /* =========================================================
   OFFICIAL CARD
========================================================= */

 .official-card {
     position: relative;

     background:
         rgba(255, 255, 255, 0.92);

     border-radius: 30px;

     padding: 38px 28px;

     text-align: center;

     border:
         1px solid rgba(123, 30, 18, 0.08);

     box-shadow:
         0 15px 40px rgba(123, 30, 18, 0.07);

     overflow: hidden;

     transition:
         transform .5s ease,
         box-shadow .5s ease,
         border-color .5s ease;
 }


 /* Top Gradient Line */

 .official-card::before {
     content: "";

     position: absolute;

     top: 0;
     left: 0;

     width: 100%;
     height: 5px;

     background:
         linear-gradient(90deg,
             #7b1e12,
             #ff8f1f,
             #ffd166);

     transform:
         scaleX(0);

     transform-origin: center;

     transition: .5s ease;
 }


 /* Decorative Circle */

 .official-card::after {
     content: "";

     position: absolute;

     width: 150px;
     height: 150px;

     right: -80px;
     top: -80px;

     border-radius: 50%;

     background:
         radial-gradient(circle,
             rgba(255, 209, 102, 0.15),
             transparent 70%);

     transition: .5s ease;

     pointer-events: none;
 }


 /* Hover */

 .official-card:hover {
     transform:
         translateY(-12px);

     border-color:
         rgba(255, 143, 31, 0.35);

     box-shadow:
         0 28px 65px rgba(123, 30, 18, 0.14);
 }


 .official-card:hover::before {
     transform: scaleX(1);
 }


 .official-card:hover::after {
     transform: scale(1.5);
 }


 /* =========================================================
   IMAGE AREA
========================================================= */

 .official-image-wrapper {
     position: relative;

     width: 185px;
     height: 185px;

     margin:
         0 auto 28px;

     display: flex;

     align-items: center;
     justify-content: center;
 }


 /* Rotating Gold Ring */

 .official-ring {
     position: absolute;

     width: 200px;
     height: 200px;

     border-radius: 50%;

     border:
         2px dashed #ffd166;

     animation:
         officialsRotate 18s linear infinite;
 }


 /* Second Ring */

 .official-image-wrapper::before {
     content: "";

     position: absolute;

     width: 165px;
     height: 165px;

     border-radius: 50%;

     border:
         2px solid rgba(255, 143, 31, 0.22);
 }


 /* Profile Image */

 .official-image-wrapper img {
     width: 165px;
     height: 190px;

     object-fit: cover;

     border-radius: 50%;

     border:
         5px solid #fff;

     position: relative;

     z-index: 2;

     box-shadow:
         0 12px 35px rgba(123, 30, 18, 0.18);

     transition:
         transform .5s ease,
         box-shadow .5s ease;
 }


 .official-card:hover .official-image-wrapper img {
     transform:
         scale(1.07);

     box-shadow:
         0 18px 45px rgba(123, 30, 18, 0.25);
 }


 /* =========================================================
   OM BADGE
========================================================= */

 .official-badge {
     position: absolute;

     right: 4px;
     bottom: 7px;

     width: 45px;
     height: 45px;

     border-radius: 50%;

     background:
         linear-gradient(135deg,
             #7b1e12,
             #ff8f1f);

     color: #ffd166;

     display: flex;

     align-items: center;
     justify-content: center;

     border:
         3px solid #fff;

     z-index: 5;

     box-shadow:
         0 8px 20px rgba(123, 30, 18, 0.25);

     transition: .4s;
 }


 .official-card:hover .official-badge {
     transform:
         rotate(360deg) scale(1.08);
 }


 /* =========================================================
   POSITION BADGE
========================================================= */

 .official-position {
     display: inline-block;

     padding: 8px 17px;

     border-radius: 50px;

     color: #7b1e12;

     background:
         linear-gradient(135deg,
             rgba(255, 143, 31, 0.10),
             rgba(255, 209, 102, 0.22));

     border:
         1px solid rgba(255, 143, 31, 0.25);

     font-size: 13px;

     font-weight: 700;

     margin-bottom: 14px;
 }


 /* =========================================================
   NAME
========================================================= */

 .official-content h3 {
     color: #7b1e12;

     font-size: 22px;

     line-height: 1.5;

     margin-bottom: 12px;

     font-weight: 800;

     transition: .3s;
 }


 .official-card:hover .official-content h3 {
     color: #a62f10;
 }


 /* Description */

 .official-content p {
     max-width: 320px;

     margin: auto;

     color: #666;

     font-size: 15px;

     line-height: 1.9;
 }


 /* =========================================================
   SCROLL REVEAL
========================================================= */

 .reveal-official {
     opacity: 0;

     transform:
         translateY(50px);

     transition:
         opacity .8s ease,
         transform .8s ease;
 }


 .reveal-official.show-official {
     opacity: 1;

     transform:
         translateY(0);
 }


 /* =========================================================
   ANIMATIONS
========================================================= */

 @keyframes officialsRotate {

     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }

 }


 @keyframes officialsOmFloat {

     0% {
         transform: translateY(0);
     }

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

     100% {
         transform: translateY(0);
     }

 }


 @keyframes officialsStarPulse {

     0%,
     100% {
         transform: scale(1);

         opacity: .7;
     }

     50% {
         transform: scale(1.25);

         opacity: 1;
     }

 }


 /* =========================================================
   TABLET
========================================================= */

 @media (max-width: 1100px) {

     .officials-section {
         padding: 80px 5%;
     }

     .officials-grid {
         grid-template-columns:
             repeat(2, 1fr);

         gap: 25px;
     }

     .officials-heading h2 {
         font-size: 44px;
     }

 }


 /* =========================================================
   MOBILE
========================================================= */

 @media (max-width: 650px) {

     .officials-section {
         padding: 65px 18px;
     }

     .officials-section::before {
         font-size: 100px;

         top: 15px;
         right: 2%;
     }

     .officials-heading {
         margin-bottom: 45px;
     }

     .officials-heading h2 {
         font-size: 34px;
     }

     .officials-heading>p {
         font-size: 15px;
         line-height: 1.8;
     }

     .officials-heading h2::after {
         width: 110px;
     }

     .officials-divider span {
         width: 60px;
     }

     .officials-grid {
         grid-template-columns: 1fr;

         gap: 22px;
     }

     .official-card {
         padding: 32px 20px;
     }

     .official-image-wrapper {
         width: 170px;
         height: 170px;
     }

     .official-ring {
         width: 165px;
         height: 165px;
     }

     .official-image-wrapper img {
         width: 135px;
         height: 135px;
     }

     .official-content h3 {
         font-size: 21px;
     }

     .official-content p {
         font-size: 14px;
     }

 }


 /* =========================================================
   SMALL MOBILE
========================================================= */

 @media (max-width: 400px) {

     .officials-section {
         padding-left: 12px;
         padding-right: 12px;
     }

     .officials-heading h2 {
         font-size: 30px;
     }

     .officials-subtitle {
         font-size: 12px;
         padding: 8px 15px;
     }

     .official-card {
         padding: 28px 16px;
     }

 }

























 /* =========================================================
   SANATAN DHARMA RAKSHA PEETH
   MEMBERS SECTION
   THEME:
   MAROON + SAFFRON + GOLD
========================================================= */

 .sdrp-members-section {

     position: relative;

     padding: 30px 6%;

     background:
         radial-gradient(circle at 10% 15%,
             rgba(255, 143, 31, .08),
             transparent 28%),
         radial-gradient(circle at 90% 80%,
             rgba(255, 209, 102, .12),
             transparent 30%),
         linear-gradient(180deg,
             #fffaf5 0%,
             #fffdf9 50%,
             #fff7ef 100%);

     overflow: hidden;
 }


 /* Decorative OM */

 .sdrp-members-section::before {

     content: "ॐ";

     position: absolute;

     top: 20px;
     right: 4%;

     font-family: serif;

     font-size: 170px;

     color:
         rgba(123, 30, 18, .035);

     pointer-events: none;

     animation:
         sdrpMemberOmFloat 5s ease-in-out infinite;
 }


 .sdrp-members-section::after {

     content: "";

     position: absolute;

     width: 350px;
     height: 350px;

     left: -180px;
     bottom: -180px;

     border-radius: 50%;

     background:
         radial-gradient(circle,
             rgba(255, 143, 31, .10),
             transparent 70%);

     pointer-events: none;
 }


 /* =========================================================
   CONTAINER
========================================================= */

 .sdrp-members-container {

     width: 100%;

     max-width: 1450px;

     margin: auto;

     position: relative;

     z-index: 2;
 }


 /* =========================================================
   HEADING
========================================================= */

 .sdrp-members-heading {

     text-align: center;

     margin-bottom: 55px;
 }


 /* Eyebrow */

 .sdrp-members-eyebrow {

     display: inline-flex;

     align-items: center;

     justify-content: center;

     gap: 9px;

     padding: 9px 20px;

     border-radius: 50px;

     color: #7b1e12;

     background:
         linear-gradient(135deg,
             rgba(255, 143, 31, .10),
             rgba(255, 209, 102, .22));

     border:
         1px solid rgba(255, 143, 31, .25);

     font-size: 14px;

     font-weight: 700;

     margin-bottom: 18px;
 }


 .sdrp-members-eyebrow i {

     color: #ff8f1f;

     font-size: 15px;
 }


 /* Heading */

 .sdrp-members-heading h2 {

     margin: 0;

     color: #7b1e12;

     font-family:
         'Tiro Devanagari Hindi',
         serif;

     font-size: 52px;

     line-height: 1.2;

     font-weight: 800;
 }


 /* Description */

 .sdrp-members-heading>p {

     margin: 25px auto 0;

     max-width: 700px;

     color: #666;

     font-size: 16px;

     line-height: 1.8;
 }


 /* Heading Divider */

 .sdrp-members-heading-divider {

     display: flex;

     align-items: center;

     justify-content: center;

     gap: 14px;

     margin-top: 25px;
 }


 .sdrp-members-heading-divider span {

     width: 90px;

     height: 2px;

     border-radius: 10px;

     background:
         linear-gradient(90deg,
             transparent,
             #ff8f1f,
             #ffd166);
 }


 .sdrp-members-heading-divider span:last-child {

     background:
         linear-gradient(90deg,
             #ffd166,
             #ff8f1f,
             transparent);
 }


 .sdrp-members-heading-divider i {

     color: #7b1e12;

     font-size: 18px;

     animation:
         sdrpMemberOmPulse 2s infinite;
 }


 /* =========================================================
   TOOLBAR
========================================================= */

 .sdrp-members-toolbar {

     display: grid;

     grid-template-columns:
         1fr 1.2fr 1fr;

     gap: 18px;

     align-items: center;

     margin-bottom: 35px;
 }


 /* Total */

 .sdrp-members-total {

     min-height: 56px;

     display: flex;

     align-items: center;

     gap: 12px;

     padding: 0 20px;

     border-radius: 15px;

     background: #fff;

     border:
         1px solid rgba(123, 30, 18, .10);

     box-shadow:
         0 8px 25px rgba(123, 30, 18, .06);

     color: #7b1e12;

     font-size: 15px;

     font-weight: 600;
 }


 .sdrp-members-total i {

     width: 36px;
     height: 36px;

     display: flex;

     align-items: center;
     justify-content: center;

     border-radius: 50%;

     color: #fff;

     background:
         linear-gradient(135deg,
             #7b1e12,
             #ff8f1f);
 }


 .sdrp-members-total strong {

     color: #a62f10;

     font-size: 18px;
 }


 /* Search */

 .sdrp-members-search {

     height: 56px;

     display: flex;

     align-items: center;

     gap: 10px;

     padding: 0 18px;

     background: #fff;

     border:
         1px solid rgba(123, 30, 18, .10);

     border-radius: 15px;

     box-shadow:
         0 8px 25px rgba(123, 30, 18, .06);

     transition: .3s;
 }


 .sdrp-members-search:focus-within {

     border-color: #ff8f1f;

     box-shadow:
         0 10px 30px rgba(255, 143, 31, .12);
 }


 .sdrp-members-search i {

     color: #ff8f1f;

     font-size: 15px;
 }


 .sdrp-members-search input {

     width: 100%;

     border: 0;

     outline: none;

     background: transparent;

     color: #7b1e12;

     font-size: 14px;
 }


 .sdrp-members-search input::placeholder {

     color: #999;
 }


 /* Sort */

 .sdrp-members-sort {

     height: 56px;

     display: flex;

     align-items: center;

     gap: 10px;

     padding: 0 15px;

     background: #fff;

     border:
         1px solid rgba(123, 30, 18, .10);

     border-radius: 15px;

     box-shadow:
         0 8px 25px rgba(123, 30, 18, .06);
 }


 .sdrp-members-sort>i {

     color: #ff8f1f;
 }


 .sdrp-members-sort select {

     width: 100%;

     border: 0;

     outline: none;

     background: transparent;

     color: #7b1e12;

     font-size: 14px;

     font-weight: 600;

     cursor: pointer;
 }


 /* =========================================================
   MEMBERS GRID
========================================================= */

 .sdrp-members-grid {

     display: grid;

     grid-template-columns:
         repeat(5, 1fr);

     gap: 22px;
 }


 /* =========================================================
   MEMBER CARD
========================================================= */

 .sdrp-member-card {

     position: relative;

     padding: 26px 18px 22px;

     text-align: center;

     background:
         rgba(255, 255, 255, .95);

     border-radius: 22px;

     border:
         1px solid rgba(123, 30, 18, .08);

     box-shadow:
         0 12px 35px rgba(123, 30, 18, .07);

     overflow: hidden;

     opacity: 0;

     transform:
         translateY(30px);

     animation:
         sdrpMemberCardShow .7s ease forwards;

     transition:
         transform .4s ease,
         box-shadow .4s ease,
         border-color .4s ease;
 }


 /* Top Line */

 .sdrp-member-card::before {

     content: "";

     position: absolute;

     top: 0;
     left: 0;

     width: 100%;

     height: 4px;

     background:
         linear-gradient(90deg,
             #7b1e12,
             #ff8f1f,
             #ffd166);

     transform:
         scaleX(0);

     transform-origin: center;

     transition: .4s;
 }


 .sdrp-member-card:hover {

     transform:
         translateY(-10px);

     border-color:
         rgba(255, 143, 31, .35);

     box-shadow:
         0 22px 50px rgba(123, 30, 18, .13);
 }


 .sdrp-member-card:hover::before {

     transform:
         scaleX(1);
 }


 /* =========================================================
   MEMBER IMAGE
========================================================= */

 .sdrp-member-image {

     position: relative;

     width: 145px;
     height: 145px;

     margin: 0 auto 20px;
 }


 /* Gold Ring */

 .sdrp-member-image::before {

     content: "";

     position: absolute;

     inset: -5px;

     border-radius: 50%;

     border:
         2px solid #ffd166;

     box-shadow:
         0 0 0 5px rgba(255, 209, 102, .10);

     transition: .4s;
 }


 .sdrp-member-image img {

     width: 145px;
     height: 145px;

     object-fit: cover;

     border-radius: 50%;

     border:
         5px solid #fff;

     box-shadow:
         0 10px 25px rgba(123, 30, 18, .15);

     transition: .5s;

     position: relative;

     z-index: 2;
 }


 .sdrp-member-card:hover .sdrp-member-image img {

     transform:
         scale(1.06);

     box-shadow:
         0 15px 35px rgba(123, 30, 18, .25);
 }


 .sdrp-member-card:hover .sdrp-member-image::before {

     transform:
         rotate(15deg) scale(1.05);
 }


 /* =========================================================
   OM BADGE
========================================================= */

 .sdrp-member-om {

     position: absolute;

     right: -5px;
     bottom: -2px;

     width: 40px;
     height: 40px;

     display: flex;

     align-items: center;
     justify-content: center;

     border-radius: 50%;

     background:
         linear-gradient(135deg,
             #7b1e12,
             #a62f10);

     color: #ffd166;

     border:
         3px solid #fff;

     z-index: 4;

     box-shadow:
         0 6px 18px rgba(123, 30, 18, .25);

     font-family: serif;

     font-size: 20px;

     transition: .4s;
 }


 .sdrp-member-card:hover .sdrp-member-om {

     transform:
         rotate(360deg);
 }


 /* =========================================================
   MEMBER NAME
========================================================= */

 .sdrp-member-name {

     margin: 0 0 10px;

     color: #7b1e12;

     font-family:
         'Tiro Devanagari Hindi',
         serif;

     font-size: 20px;

     font-weight: 700;

     line-height: 1.5;
 }


 /* =========================================================
   REGISTRATION DATE
========================================================= */

 .sdrp-member-date {

     display: inline-flex;

     align-items: center;

     gap: 7px;

     padding: 7px 12px;

     border-radius: 50px;

     color: #7b1e12;

     background:
         rgba(255, 143, 31, .08);

     border:
         1px solid rgba(255, 143, 31, .18);

     font-size: 12px;

     font-weight: 600;
 }


 .sdrp-member-date i {

     color: #ff8f1f;
 }


 /* =========================================================
   EMPTY STATE
========================================================= */

 .sdrp-members-empty {

     display: none;

     text-align: center;

     padding: 70px 20px;
 }


 .sdrp-members-empty.show {

     display: block;
 }


 .sdrp-members-empty-icon {

     width: 75px;
     height: 75px;

     display: flex;

     align-items: center;
     justify-content: center;

     margin: 0 auto 20px;

     border-radius: 50%;

     background:
         rgba(123, 30, 18, .07);

     color: #7b1e12;

     font-size: 28px;
 }


 .sdrp-members-empty h3 {

     margin-bottom: 8px;

     color: #7b1e12;
 }


 .sdrp-members-empty p {

     margin: 0;

     color: #777;
 }


 /* =========================================================
   PAGINATION
========================================================= */

 .sdrp-members-pagination {

     display: flex;

     align-items: center;

     justify-content: center;

     gap: 8px;

     margin-top: 45px;

     flex-wrap: wrap;
 }


 .sdrp-page-btn {

     width: 42px;
     height: 42px;

     border-radius: 12px;

     border:
         1px solid rgba(255, 143, 31, .35);

     background: #fff;

     color: #7b1e12;

     font-weight: 700;

     cursor: pointer;

     transition: .3s;
 }


 .sdrp-page-btn:hover {

     color: #fff;

     border-color: #7b1e12;

     background:
         linear-gradient(135deg,
             #7b1e12,
             #ff8f1f);

     transform:
         translateY(-2px);
 }


 .sdrp-page-btn.active {

     color: #fff;

     border-color: #7b1e12;

     background:
         linear-gradient(135deg,
             #7b1e12,
             #a62f10);

     box-shadow:
         0 8px 18px rgba(123, 30, 18, .20);
 }


 .sdrp-page-btn:disabled {

     opacity: .4;

     cursor: not-allowed;

     transform: none;
 }


 .sdrp-page-dots {

     color: #7b1e12;

     font-weight: 700;

     padding: 0 4px;
 }


 /* =========================================================
   ANIMATIONS
========================================================= */

 @keyframes sdrpMemberCardShow {

     from {

         opacity: 0;

         transform:
             translateY(30px);

     }

     to {

         opacity: 1;

         transform:
             translateY(0);

     }

 }


 @keyframes sdrpMemberOmFloat {

     0%,
     100% {

         transform:
             translateY(0);

     }

     50% {

         transform:
             translateY(-12px);

     }

 }


 @keyframes sdrpMemberOmPulse {

     0%,
     100% {

         transform:
             scale(1);

     }

     50% {

         transform:
             scale(1.2);

     }

 }


 /* =========================================================
   TABLET
========================================================= */

 @media (max-width: 1200px) {

     .sdrp-members-grid {

         grid-template-columns:
             repeat(4, 1fr);

     }

 }


 @media (max-width: 992px) {

     .sdrp-members-section {

         padding: 80px 4%;
     }

     .sdrp-members-grid {

         grid-template-columns:
             repeat(3, 1fr);

     }

     .sdrp-members-toolbar {

         grid-template-columns:
             1fr 1fr;

     }

     .sdrp-members-search {

         grid-column:
             span 2;

         order: -1;

     }

 }


 /* =========================================================
   MOBILE
========================================================= */

 @media (max-width: 650px) {

     .sdrp-members-section {

         padding: 65px 15px;

     }

     .sdrp-members-section::before {

         font-size: 100px;

     }

     .sdrp-members-heading h2 {

         font-size: 36px;

     }

     .sdrp-members-heading>p {

         font-size: 14px;

     }

     .sdrp-members-heading-divider span {

         width: 55px;

     }

     .sdrp-members-toolbar {

         grid-template-columns: 1fr;

         gap: 12px;

     }

     .sdrp-members-search {

         grid-column: auto;

         order: 0;

     }

     .sdrp-members-grid {

         grid-template-columns: 1fr;

         gap: 18px;

     }

     .sdrp-member-card {

         padding: 28px 20px;

     }

 }


 /* Small Mobile */

 @media (max-width: 400px) {

     .sdrp-members-heading h2 {

         font-size: 31px;

     }

     .sdrp-members-eyebrow {

         font-size: 12px;

         padding:
             8px 14px;

     }

 }

 @media (max-width: 1200px) {
     .values-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 @media (max-width: 992px) {
     .values-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 600px) {
     .values-grid {
         grid-template-columns: 1fr;
     }

 }

 /* =========================================
   OFFICIALS VIEW ALL BUTTON
========================================= */

 .officials-view-all {
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 40px;
 }

 .officials-view-all-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;

     padding: 13px 30px;

     border-radius: 50px;

     background:
         linear-gradient(135deg,
             #7b1e12,
             #a62f10);

     color: #fff;

     text-decoration: none;

     font-size: 15px;
     font-weight: 700;

     border:
         1px solid rgba(255, 209, 102, .35);

     box-shadow:
         0 10px 25px rgba(123, 30, 18, .15);

     transition: .4s;
 }

 .officials-view-all-btn i {
     font-size: 13px;
     transition: .4s;
 }

 .officials-view-all-btn:hover {
     color: #fff;

     transform: translateY(-5px);

     background:
         linear-gradient(135deg,
             #a62f10,
             #7b1e12);

     box-shadow:
         0 18px 35px rgba(123, 30, 18, .22);
 }

 .officials-view-all-btn:hover i {
     transform: translateX(5px);
 }


 @media (max-width: 650px) {

     .officials-view-all {
         margin-top: 30px;
     }

     .officials-view-all-btn {
         padding: 12px 26px;
         font-size: 14px;
     }

 }