/* CSS Variables */
        :root {
            --primary-blue: #1a4b8c;
            --primary-red: #e74c3c;
            --black: #2c3e50;
            --white: #ffffff;
            --light-gray: #f5f5f5;
            --dark-blue: #0d2b52;
            --container-width: 1200px;
            --section-padding: 80px 0;
            --border-radius: 8px;
            --transition: all 0.3s ease;
        }
        
        /* Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html {
            scroll-behavior: smooth;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--black);
            background-color: var(--white);
            overflow-x: hidden;
        }
        
        /* Fixed Background */
        .fixed-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://images.unsplash.com/photo-1758988765049-8fa5f6e7d593?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1965');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: -1;
  opacity: 0.1;
}

        
        /* Container */
        .container {
            width: 90%;
            max-width: var(--container-width);
            margin: 0 auto;
        }
        
        /* Header */
        header {
            background-color: var(--primary-blue);
            color: var(--white);
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .header-content {
            display: flex;
            justify-content:center;
            align-items: center;
        }
        
        .logo-container {
            display: flex;
            align-items: flex-start;
            margin-right: 20px;
        
        }
        
        .logo {
            width: 50px;
            height: 50px;
            background: var(--primary-red);
            display: flex;
            align-items: center;  
            justify-content: center;
            color: white;
            font-weight: bold;
            border-radius: 50%;
            margin-right: 20px;
        }
        
        .logo-text {
            font-size: 1.5rem;
            font-weight: 700;
            white-space: nowrap;
            
        }
        
        .logo-text span {
            color: var(--primary-red);
        }
        
        nav {
            flex: 1;
            display: flex;
            justify-content: center;
        }
        
        nav ul {
            display: flex;
            list-style: none;
        }
        
        nav li {
            position: relative;
        }
        
        nav a {
            color: var(--white);
            text-decoration: none;
            padding: 10px 12px;
            display: block;
            transition: var(--transition);
            white-space: nowrap;
            font-size: 0.95rem;
        }
        
        nav a:hover {
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: var(--border-radius);
        }
        
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: var(--white);
            min-width: 200px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
            z-index: 1;
            border-radius: var(--border-radius);
            overflow: hidden;
        }
        
        .dropdown-content a {
            color: var(--black);
            padding: 12px 16px;
            border-bottom: 1px solid #eee;
            font-size: 0.9rem;
        }
        
        .dropdown-content a:hover {
            background-color: var(--light-gray);
        }
        
        .dropdown:hover .dropdown-content {
            display: block;
        }
        
        .donate-btn-container {
            margin-left: 5px;
        }
        
        .menu-toggle {
            display: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--white);
        }
        
        /* Hero Carousel */
        .carousel {
            margin: 0 auto;
            max-width: 100%;
            position: relative;
            overflow: hidden;
            height: 550px;
        }
        
        .carousel-inner {
            display: flex;
            transition: transform 0.5s ease;
            height: 100%;
        }
        
        .carousel-item {
            min-width: 100%;
            height: 100%;
        }
        
        .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .carousel-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
            color: var(--white);
            padding: 20px;
        }
        
        .carousel-caption h3 {
            font-size: 2rem;
            margin-bottom: 10px;
        }
        
        .carousel-caption p {
            font-size: 1.1rem;
            max-width: 600px;
        }
        
        .carousel-controls {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
            padding: 0 20px;
        }
        
        .carousel-control {
            background-color: rgba(255, 255, 255, 0.7);
            color: var(--black);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .carousel-control:hover {
            background-color: var(--white);
        }
        
        .carousel-dots {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }
        
        .carousel-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: var(--transition);
        }
        
        .carousel-dot.active {
            background-color: var(--white);
        }
        
        /* Page Titles */
        .page-title {
            background: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 100%);
            color: var(--white);
            padding: 60px 0;
            text-align: center;
            margin-bottom: 40px;
        }
        
        .page-title h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
        }
        
        .page-title p {
            font-size: 1.2rem;
            max-width: 700px;
            margin: 0 auto;
        }
        
        /* Sections */
        section {
            padding: var(--section-padding);
            position: relative;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 50px;

        
        }
        
        .section-title h2 {
            font-size: 2.5rem;
            color: var(--primary-blue);
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }
        
        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background-color: var(--primary-red);
        }
        
        .section-content {
            background-color: var(--white);
            padding: 40px;
            border-radius: var(--border-radius);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            margin-bottom: 30px;
        }

        .section-service{
            margin-top: -120px;
        }
        .section-service h2 {
            font-size: 2.5rem;
            color: var(--primary-blue);
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
            
        }
        .section-service{
            text-align: center;
            margin-bottom: 50px;

        }
        /* Reveal Animation */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }
        
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Video Section */
        .video-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
            height: 0;
            overflow: hidden;
            border-radius: var(--border-radius);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
        }
        
        .video-container iframe,
        .video-container video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
        .video1-section {
  text-align: center;
  padding: 50px 20px;
  background-color: #f8f9fa;
}

.video1-section h2 {
  color: #004aad;
  font-size: 28px;
  margin-bottom: 10px;
}

.video1-section p {
  color: #555;
  margin-bottom: 30px;
}

.video1-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  justify-content: center;
}

.video1-container {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.video1-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 12px;
}

        
        /* Services Grid */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 10px;
            
        }
        
        .service-card {
            background-color: var(--white);
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
        }
        
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .service-icon {
            background-color: var(--primary-blue);
            color: var(--white);
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
        }
        
        .service-content {
            padding: 20px;
        }
        
        .service-content h3 {
            color: var(--primary-blue);
            margin-bottom: 10px;
        }
        
        /* Content with Image */
        .content-with-image {
            display: flex;
            align-items: center;
            gap: 40px;
            margin-bottom: 40px;
        }
        
        
        
        .content-with-image .text-content {
            flex: 1;
        }
        
        .content-with-image .image-content {
            flex: 1;
        }
        
        .content-with-image img {
            width: 100%;
            border-radius: var(--border-radius);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        /* FAQ Styles */
        .faq-item {
            margin-bottom: 20px;
            border: 1px solid #eee;
            border-radius: var(--border-radius);
            overflow: hidden;
        }
        
        .faq-question {
            background-color: var(--light-gray);
            padding: 15px 20px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
        }
        
        .faq-answer {
            padding: 0 20px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, padding 0.3s ease;
        }
        
        .faq-item.active .faq-answer {
            padding: 20px;
            max-height: 500px;
        }
        
        /* Contact Form */
        .contact-form {
            background-color: var(--white);
            padding: 40px;
            border-radius: var(--border-radius);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
        }
        
        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            font-size: 1rem;
        }
        
        .form-group textarea {
            height: 150px;
            resize: vertical;
        }
        
        /* Resources Grid */
        .resources-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        
        .resource-card {
            background-color: var(--white);
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
        }
        
        .resource-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .resource-icon {
            background-color: var(--primary-blue);
            color: var(--white);
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
        }
        
        .resource-content {
            padding: 20px;
        }
        
        .resource-content h3 {
            color: var(--primary-blue);
            margin-bottom: 10px;
        }
        
        .resource-link {
            display: inline-block;
            margin-top: 15px;
            color: var(--primary-red);
            font-weight: 600;
            text-decoration: none;
        }
        
        /* Events Grid */
        .events-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        
        .event-card {
            background-color: var(--white);
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
        }
        
        .event-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .event-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .event-content {
            padding: 20px;
        }
        
        .event-content h3 {
            color: var(--primary-blue);
            margin-bottom: 10px;
        }
        
        .event-date {
            color: var(--primary-red);
            font-weight: 600;
            margin-bottom: 10px;
        }
        
        /* Team Grid */
        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        
        .team-member {
            background-color: var(--white);
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            text-align: center;
            transition: var(--transition);
        }
        
        .team-member:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .team-member img {
            width: 100%;
            height: 250px;
            object-fit: cover;
        }
        
        .team-info {
            padding: 20px;
        }
        
        .team-info h3 {
            color: var(--primary-blue);
            margin-bottom: 5px;
        }
        
        .team-info p {
            color: var(--black);
            font-style: italic;
        }
        
        /* Partner Logos */
        .partner-logos {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        
        .partner-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background-color: var(--white);
            border-radius: var(--border-radius);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
            filter: grayscale(100%);
        }
        
        .partner-logo:hover {
            filter: grayscale(0%);
            transform: translateY(-5px);
        }
        
        .partner-logo img {
            max-width: 100%;
            max-height: 80px;
        }
        
        /* Gallery Grid */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 40px;
        }
        
        .gallery-item {
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
        }
        
        .gallery-item:hover {
            transform: scale(1.03);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .gallery-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        /* CTA Section */
        .cta-section {
            background: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 100%);
            color: var(--white);
            text-align: center;
            padding: 10px 0;
        }
        
        .cta-section h2 {
            font-size: 14;
            margin-bottom: 20px;
            
        }
        
        .cta-section p {
            font-size: 12;
            max-width: 700px;
            margin: 0 auto 30px;
            margin-bottom: 15px;
        }
        
        .btn {
            display: inline-block;
            background-color: var(--primary-red);
            color: var(--white);
            padding: 12px 30px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
            border: none;
            cursor: pointer;
        }
        
        .btn:hover {
            background-color: #c0392b;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .cta-btn {
            background-color: var(--primary-red);
            font-size: 1.1rem;
            padding: 5px 5px;
        }
        
        .donation-options {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
            flex-wrap: wrap;
        }
        
        .donation-option {
            background-color: var(--white);
            padding: 30px;
            border-radius: var(--border-radius);
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            flex: 1;
            min-width: 250px;
            max-width: 300px;
        }
        
        .donation-option h3 {
            color: var(--primary-blue);
            margin-bottom: 15px;
        }
        
        /* Page Content */
        .page {
            display: none;
        }
        
        .page.active {
            display: block;
        }
        
   .map-container {
  position: relative;
  width: 100%;
  padding-bottom: 20%; /* 16:2 ratio = 16/2 = 8, so 12.5% gives 16:2 */
  height: 0;
  overflow: hidden;
  border-radius: 12px; 
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

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

        /* Footer */
        footer {
            background-color: var(--black);
            color: var(--white);
            padding: 10px 0 10px;
            margin-top: 5%;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 60px;
            margin-bottom: 20px;
        }
        
        .footer-column h3 {
            font-size: 12;
            margin-bottom: 20px;
            color: var(--primary-red);
        }
        
        .footer-column ul {
            list-style: none;
        }
        
        .footer-column ul li {
            margin-bottom: 5px;
        }
        
        .footer-column a {
            color: #ddd;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .footer-column a:hover {
            color: var(--primary-red);
        }
        
        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            transition: var(--transition);
        }
        
        .social-links a:hover {
            background-color: var(--primary-red);
            transform: translateY(-3px);
        }
        
        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
            color: #aaa;
        }
        
        /* Responsive Styles */
        @media (max-width: 1200px) {
            nav a {
                padding: 10px 10px;
                font-size: 0.9rem;
            }
        }
        
        @media (max-width: 992px) {
            nav ul {
                display: none;
                flex-direction: column;
                position: absolute;
                top: 100%;
                left: 0;
                width: 50%;
                background-color: var(--primary-blue);
                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
            }
            
            nav ul.show {
                display: flex;
            }
            
            .menu-toggle {
                display: block;
            }
            
            .dropdown-content {
                position: static;
                box-shadow: none;
                background-color: rgb(253, 252, 252);
            }
            
            .carousel-caption h3 {
                font-size: 1.8rem;
            }
            
            .carousel {
                height: 400px;
            }
            
            .content-with-image {
                flex-direction: column;
            }
            
            .header-content {
                flex-wrap: wrap;
            }
            
            .logo-container {
                flex: 1;
            }
            
            nav {
                order: 3;
                flex: 100%;
                margin-top: 10px;
            }
            
            .donate-btn-container {
                order: 5;
            }
        }
        
        @media (max-width: 768px) {
            .section-title h2 {
                font-size: 2rem;
            }
            
            .section-content {
                padding: 30px 20px;
            }
            
            .carousel-caption h3 {
                font-size: 1.5rem;
            }
            
            .carousel-caption p {
                font-size: 1rem;
            }
            
            .page-title h1 {
                font-size: 2.2rem;
            }
            
            .carousel {
                height: 350px;
            }
        }
        
        @media (max-width: 576px) {
            .logo-text {
                font-size: 1.3rem;
            }
            
            .btn {
                padding: 10px 20px;
                margin-top: 10%;
               
            }
            
            .carousel {
                height: 300px;
            }
            
            .carousel-caption {
                padding: 15px;
            }
            /* Mobile optimization */
@media (max-width: 768px) {
  .map-container {
    padding-bottom: 56.25%; /* 16:9 ratio for mobile */
  }
}
        }
    
:root{--primary-blue:#1a4b8c;--navy:#0b2545;--red:#e74c3c;--sun:#f6b73c;--bg:#fff;--surface:#fff;--soft:#f1f6fb;--text:#14304f;--muted:#4a5568;--line:#dde6ef;--r:14px}
[data-theme=dark]{color-scheme:dark;--bg:#0b1626;--surface:#112238;--soft:#14253b;--text:#e7eef8;--muted:#b4c3d6;--line:#2a4163;--black:#e7eef8;--light-gray:#1d2f4a}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text)}
.fixed-bg{display:none}.page{display:block!important}
.wrap{width:92%;max-width:1240px;margin:0 auto}
.tb{background:var(--navy);color:#dbe7f5;font-size:.85rem}.tb .wrap{display:flex;gap:22px;justify-content:flex-end;flex-wrap:wrap;padding:7px 0}.tb a{color:inherit;text-decoration:none}.tb a:hover{text-decoration:underline}
.sh{position:sticky;top:0;z-index:100;background:var(--surface);box-shadow:0 1px 0 var(--line),0 6px 18px rgba(11,37,69,.06)}
.sh-in{display:flex;align-items:center;gap:12px;min-height:74px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--primary-blue);font-weight:800;font-size:1.15rem;line-height:1.1}
.bl,.bl-img,.theme-toggle,.burger{flex:none}
.bl{width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.95rem}
.bl-img{width:62px;height:58px;object-fit:contain}[data-theme=dark] .bl-img{background:#fff;border-radius:12px;padding:3px}
.mn{flex:1}.mn>ul{list-style:none;display:flex;justify-content:center;gap:2px;margin:0;padding:0}
.mn-i{position:relative}
.mn-l{display:flex;align-items:center;padding:10px 12px;border:0;background:none;color:var(--text);font-family:inherit;font-size:.95rem;font-weight:600;text-decoration:none;cursor:pointer;border-radius:8px;white-space:nowrap}
.mn-l:hover,.mn-l[aria-current]{background:var(--soft);color:var(--primary-blue)}
.has-sub>.mn-l::after{content:"";border:4px solid transparent;border-top-color:currentColor;margin:4px 0 0 7px}
.mn-sub{display:none;position:absolute;top:100%;left:0;min-width:230px;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 30px rgba(11,37,69,.14)}
.has-sub:hover>.mn-sub,.has-sub:focus-within>.mn-sub{display:block}
.has-sub.open>.mn-sub{display:block}
.mn-sub a{display:block;padding:9px 12px;border-radius:8px;color:var(--text);text-decoration:none;font-size:.92rem}.mn-sub a:hover,.mn-sub a[aria-current]{background:var(--soft);color:var(--primary-blue)}
.theme-toggle{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:none;color:var(--text);cursor:pointer;font-size:1.1rem}
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative}
.burger span,.burger span::before,.burger span::after{position:absolute;display:block;width:22px;height:2px;background:var(--text);content:""}
.burger span{top:21px;left:11px}.burger span::before{top:-7px;left:0}.burger span::after{top:7px;left:0}
.btn{display:inline-block;background:var(--red);color:#fff;border:2px solid var(--red);border-radius:999px;padding:.7rem 1.5rem;font-weight:700;text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:#c0392b;border-color:#c0392b;color:#fff}
.btn-ghost{background:transparent;color:var(--primary-blue);border-color:var(--primary-blue)}.btn-ghost:hover{background:var(--primary-blue);border-color:var(--primary-blue)}
.btn-light{background:#fff;color:var(--navy);border-color:#fff}.btn-light:hover{background:var(--sun);border-color:var(--sun);color:var(--navy)}
.hs{position:relative;height:clamp(460px,78vh,680px);background:var(--navy);overflow:hidden}
.hs-s{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s,visibility .9s}.hs-s.on{opacity:1;visibility:visible}
.hs-s>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hs-s::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,37,69,.88),rgba(11,37,69,.55) 48%,rgba(11,37,69,.1))}
.hs-c{position:relative;z-index:2;height:100%;display:flex;align-items:center}
.hs-t{max-width:640px;color:#fff}.hs-t h1,.hs-t h2{font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.08;margin-bottom:16px;color:#fff}
.hs-t p{font-size:1.15rem;margin-bottom:26px;max-width:34rem;color:#e7eef8}
.hs-btns{display:flex;gap:12px;flex-wrap:wrap}.hs .btn-ghost{color:#fff;border-color:#fff}.hs .btn-ghost:hover{background:#fff;color:var(--navy)}
.hs-a{position:absolute;top:50%;z-index:4;width:46px;height:46px;margin-top:-23px;border-radius:50%;border:0;background:rgba(255,255,255,.88);color:var(--navy);font-size:1.6rem;line-height:1;cursor:pointer}.hs-a.p{left:16px}.hs-a.n{right:16px}
.hs-d{position:absolute;z-index:4;bottom:18px;left:0;right:0;display:flex;justify-content:center;gap:8px}
.hs-d button{width:11px;height:11px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer}.hs-d button.on{background:#fff;width:30px;border-radius:6px}
.sec{padding:72px 0}.sec-soft{background:var(--soft)}
.kick{display:inline-block;color:var(--red);font-weight:700;margin-bottom:8px}
.sec h2{font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.15;color:var(--primary-blue);margin-bottom:12px}
.sec p{color:var(--muted);margin-bottom:16px;max-width:38rem}.sec-h{max-width:640px;margin-bottom:34px}
.gl{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.gl-img{position:relative;min-height:400px}.gl-img img{position:absolute;object-fit:cover;border-radius:var(--r);box-shadow:0 18px 40px rgba(11,37,69,.18)}
.gl-img img:first-child{left:0;top:0;width:68%;height:76%}.gl-img img:last-child{right:0;bottom:0;width:58%;height:62%;border:6px solid var(--bg)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.card{display:flex;flex-direction:column;gap:10px;padding:26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--text);transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-3px);border-color:var(--primary-blue)}
.card i{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:var(--soft);color:var(--primary-blue);font-size:1.3rem}
.card h3{font-size:1.15rem;color:var(--primary-blue)}.card p{flex:1;margin:0;color:var(--muted)}.card b{color:var(--red)}
.band{background:linear-gradient(120deg,var(--navy),var(--primary-blue));color:#fff;padding:56px 0}
.band .wrap{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap}.band h2{color:#fff;margin-bottom:8px;font-size:clamp(1.6rem,3vw,2.2rem)}.band p{color:#dbe7f5;max-width:36rem;margin:0}
.sf{background:var(--navy);color:#cfdcec;padding-top:56px}
.sf-g{display:grid;grid-template-columns:1.3fr .8fr 1.1fr 1.2fr;gap:36px}.sf h3{color:#fff;font-size:1.05rem;margin-bottom:14px}
.sf ul{list-style:none;margin:0;padding:0}.sf li{margin-bottom:8px}.sf a{color:#cfdcec;text-decoration:none}.sf a:hover{color:#fff;text-decoration:underline}
.sf-soc{display:flex;gap:10px;margin-top:14px}.sf-soc a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center}
.sf-map iframe{width:100%;height:180px;border:0;border-radius:10px}.sf-c{border-top:1px solid rgba(255,255,255,.15);margin-top:36px;padding:18px 0;font-size:.9rem}
.service-card,.content-with-image img,.gallery-item{border-radius:var(--r)}
img:not(.ok){background:linear-gradient(100deg,#e6edf3 30%,#f6f9fc 50%,#e6edf3 70%) 0 0/200% 100%;animation:sk 1.3s linear infinite;min-height:120px}
@keyframes sk{to{background-position:-200% 0}}
.video-container .yt{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;background-size:cover;background-position:center}
.yt span{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px;border-radius:50%;background:#e74c3c}
.yt span::after{content:"";position:absolute;left:27px;top:20px;border:14px solid transparent;border-left:22px solid #fff}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
[data-theme=dark] .section-content,[data-theme=dark] .video1-section,[data-theme=dark] .service-card,[data-theme=dark] .contact-form,[data-theme=dark] .resource-card,[data-theme=dark] .event-card,[data-theme=dark] .team-member,[data-theme=dark] .partner-logo,[data-theme=dark] .donation-option,[data-theme=dark] .faq-question{background:#14253b;color:#e7eef8;border-color:#2a4163}
[data-theme=dark] main h2,[data-theme=dark] main h3{color:#8fc2ff}[data-theme=dark] .page-title h1,[data-theme=dark] .page-title p,[data-theme=dark] .hs-t h1,[data-theme=dark] .hs-t h2,[data-theme=dark] .band h2{color:#fff}
[data-theme=dark] input,[data-theme=dark] textarea,[data-theme=dark] select{background:#0f1c2e;color:#e7eef8;border:1px solid #2a4163}
[data-theme=dark] img:not(.ok){background-color:#1d2f4a;background-image:linear-gradient(100deg,#1d2f4a 30%,#27405f 50%,#1d2f4a 70%)}
[data-theme=dark] .brand,[data-theme=dark] .mn-l:hover,[data-theme=dark] .mn-l[aria-current],[data-theme=dark] .mn-sub a:hover{color:#8fc2ff}[data-theme=dark] .btn-ghost{color:#8fc2ff;border-color:#8fc2ff}[data-theme=dark] .btn-ghost:hover{background:#8fc2ff;color:#0b1626}[data-theme=dark] .sec h2,[data-theme=dark] .card h3{color:#8fc2ff}
@media(max-width:1180px){.burger{display:block}.theme-toggle{margin-left:auto}
.mn{display:none;position:absolute;left:0;right:0;top:100%;flex:none;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 18px 30px rgba(11,37,69,.15);max-height:calc(100vh - 74px);overflow:auto}.mn.show{display:block}
.mn>ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 4%}.mn-l{width:100%;justify-content:space-between;padding:13px 10px}
.mn-sub{position:static;min-width:0;margin:0 0 6px;border:0;box-shadow:none;background:var(--soft)}.has-sub:hover>.mn-sub,.has-sub:focus-within>.mn-sub{display:none}.has-sub.open>.mn-sub{display:block}}
@media(max-width:900px){.gl{grid-template-columns:1fr}.gl-img{min-height:320px}.sf-g{grid-template-columns:1fr 1fr}.tb .wrap{justify-content:center}}
@media(max-width:560px){.sf-g{grid-template-columns:1fr}.brand span{font-size:.95rem}.don{padding:.5rem .9rem;font-size:.85rem}.tb{display:none}.hs-a{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}