@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Michroma&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

 :root {
     --background-light: #ffffff;
     --background-dark: #000000;
     --text-primary-light: #000000;
     --text-primary-dark: #ffffff;
     --text-secondary-light: #4a4a4a;
     --text-secondary-dark: #cccccc;
     --border-color: #e0e0e0;
     --gray-50: #f9fafb;
     --gray-100: #f3f4f6;
     --gray-200: #e5e7eb;
     --gray-300: #d1d5db;
     --gray-600: #4b5563;
     --gray-700: #374151;
     --gray-800: #1f2937;
     --gray-900: #111827;
 }

 .dark {
     --background-light: #000000;
     --background-dark: #ffffff;
     --text-primary-light: #ffffff;
     --text-primary-dark: #000000;
     --text-secondary-light: #cccccc;
     --text-secondary-dark: #4a4a4a;
     --border-color: #333333;
     --gray-50: #111827;
     --gray-100: #1f2937;
     --gray-200: #374151;
     --gray-300: #4b5563;
     --gray-600: #d1d5db;
     --gray-700: #e5e7eb;
     --gray-800: #f3f4f6;
     --gray-900: #f9fafb;
 }

 .logo {
     width: 180px;
 }

 body {
     font-family: "Montserrat", sans-serif;
     font-optical-sizing: auto;
     font-weight: 5px;
     font-style: normal;
     line-height: 1.6;

     background-color: var(--background-light);
     color: var(--text-primary-light);
     overflow-x: hidden;
 }

 .dark body {
     background-color: var(--background-dark);
     color: var(--text-primary-dark);
 }

 .gsap-reveal {
     opacity: 0;
     transform: translateY(50px);
 }

 /* Custom Navbar */
 .custom-navbar {
     background-color: black;
     color: white;
 }

 .navbar-brand {
     font-size: 1.5rem;
     color: var(--secondary-color) !important;
 }

 .navbar-nav .nav-link {
     color: var(--secondary-color) !important;
     font-weight: 500;
     margin: 0 0.5rem;
     transition: color 0.3s ease;
 }

 .navbar-nav .nav-link:hover {
     color: var(--secondary-color) !important;
 }

 .btn-get-started {
     background-color: #000;
     color: #fff;
     font-weight: bold;
     font-size: 0.875rem;
     padding: 0.5rem 1rem;
     border-radius: 0.5rem;
     transition: background-color 0.2s;
 }

 .btn-get-started:hover {
     background-color: #333;
 }

 .dark .btn-get-started {
     background-color: #fff;
     color: #000;
 }

 .dark .btn-get-started:hover {
     background-color: #e5e5e5;
 }

 .navbar-toggler-icon {
     color: #000;
 }

 .dark .navbar-toggler-icon {
     color: #fff;
 }

 .navbar-toggler {
     width: fit-content;
 }

 .hero-section {
     min-height: 80vh;
     display: flex;
     align-items: center;
     position: relative;
     padding: 3rem 0;
     background-color: var(--background-light);
     color: var(--text-primary-light);
 }


 .hero-section .bg-image {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-size: cover;
     background-position: center;
     opacity: 0.1;
 }

 .hero-section h1 {
     font-size: 3.5rem;
     font-weight: 800;
 }

 .hero-section::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #f9fafb;
     background-image:
         linear-gradient(to right, #d1d5db 1px, transparent 1px),
         linear-gradient(to bottom, #d1d5db 1px, transparent 1px);
     background-size: 32px 32px;
     z-index: -1;

     /* Mask setup */
     -webkit-mask-image: radial-gradient(ellipse 80% 80% at 0% 0%, #000 50%, transparent 90%);
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-position: 0 0;
     -webkit-mask-size: 200% 200%;
     mask-image: radial-gradient(ellipse 80% 80% at 0% 0%, #000 50%, transparent 90%);
     mask-repeat: no-repeat;
     mask-position: 0 0;
     mask-size: 200% 200%;

     /* Animate mask position */
     animation: moveMask 15s linear infinite;
 }


 @keyframes moveMask {
     0% {
         -webkit-mask-position: 0% 0%;
         mask-position: 0% 0%;
     }

     50% {
         -webkit-mask-position: 100% 100%;
         mask-position: 100% 100%;
     }

     100% {
         -webkit-mask-position: 0% 0%;
         mask-position: 0% 0%;
     }
 }


 .dark .hero-section p {
     color: var(--text-secondary-dark);
 }

 .btn-hero-primary {
     background-color: #000;
     color: #fff;
     font-weight: bold;
     padding: 0.75rem 1.5rem;
     border-radius: 0.5rem;
     transition: transform 0.2s;
 }

 .btn-hero-primary:hover {
     transform: scale(1.05);
 }

 .dark .btn-hero-primary {
     background-color: #fff;
     color: #000;
 }

 .btn-hero-secondary {
     border: 1px solid #000;
     color: #000;
     font-weight: bold;
     padding: 0.75rem 1.5rem;
     border-radius: 0.5rem;
     backdrop-filter: blur(4px);
     transition: background-color 0.2s;
 }

 .btn-hero-secondary:hover {
     background-color: rgba(0, 0, 0, 0.1);
 }

 .dark .btn-hero-secondary {
     border-color: #fff;
     color: #fff;
 }

 .dark .btn-hero-secondary:hover {
     background-color: rgba(255, 255, 255, 0.1);
 }

 /* About Section */
 .about-content {
     font-size: 1.1rem;
     line-height: 1.8;
     text-align: justify;
 }

 .about-content p {
     margin-bottom: 1.5rem;
 }

 .mission-card {
     background: var(--text-secondary-light);
     color: white;
     border-radius: 15px;
     transition: transform 0.3s ease;
     padding: 20px;
 }

 .mission-card:hover {
     transform: translateY(-10px);
     cursor: pointer;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
 }

 .section {
     padding: 6rem 0;
 }

 .section-bg {
     background-color: var(--gray-100);
 }

 .section-title {
     font-size: 2.5rem;
     font-weight: 700;
     letter-spacing: -0.025em;
     color: var(--text-primary-light);
 }

 .dark .section-title {
     color: var(--text-primary-dark);
 }

 .section-subtitle {
     font-size: 1.125rem;
     line-height: 1.75;
     color: var(--text-secondary-light);
 }

 .dark .section-subtitle {
     color: var(--text-secondary-dark);
 }

 .brand-card {
     border: 1px solid var(--gray-200);
     border-radius: 0.75rem;
     overflow: hidden;
     background-color: var(--background-light);
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
 }

 .dark .brand-card {
     border-color: var(--gray-700);
     background-color: var(--background-dark);
 }

 .brand-card:hover {
     transform: translateY(-0.5rem);
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
 }

 .brand-card .card-img-top {
     height: 14rem;
     filter: grayscale(100%);
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
 }

 .brand-card:hover .card-img-top {
     filter: grayscale(0%);
 }

 .brand-card .card-body {
     padding: 1.5rem;
 }

 .brand-card .card-title {
     font-size: 1.25rem;
     font-weight: 700;
     color: var(--text-primary-light);
 }

 .dark .brand-card .card-title {
     color: var(--text-primary-dark);
 }

 .brand-card .card-text {
     font-size: 1rem;
     color: var(--text-secondary-light);
 }


 .dark .brand-card .card-text {
     color: var(--text-secondary-dark);
 }

 .hover-bg-white {
     background-color: #333333b2;
     transition: background-color 0.3s ease, color 0.3s ease;
 }

 .hover-bg-white:hover {
     background-color: #fff !important;
     color: #000 !important;
     cursor: pointer;
     border-bottom: 1px solid rgb(223, 223, 223);
 }


 .client-logo-wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 8rem;
     height: 8rem;
     background-color: white;
     border: 2px solid var(--gray-100);
     border-radius: 0.5rem;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     /* wrapper animation */
 }

 .client-logo {
     width: 80%;
     height: 80%;
     object-fit: contain;
     filter: grayscale(100%);
     transition: filter 0.3s ease, transform 0.3s ease;
     /* logo animation */
 }

 .client-logo-wrapper:hover {
     cursor: pointer;
     transform: scale(1.05);
     /* slight zoom */
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
     /* soft shadow */
     transform: scale(1.1);
     transform: translateY(-10px);
 }

 .client-logo-wrapper:hover .client-logo {
     filter: grayscale(0%);
 }



 .country-badge {
     cursor: pointer;
     font-size: 0.95rem;
     transition: all 0.2s ease;
     border-radius: 25px;
     color: #000;
     display: flex;
     justify-content: center;
     padding-top: 18px !important;
 }

 .country-badge:hover {
     background-color: #f8f9fa;
     transform: translateY(-2px);
 }

 .country-badge.active {
     background-color: #000 !important;
     /* black */
     color: #fff;
     /* white text */
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
     transform: translateY(-3px);
 }

 #map {
     margin-top: 20px;
     width: 100%;
 }



 .form-control {
     background-color: var(--background-light);
     border: 1px solid var(--gray-300);
     padding: 0.75rem 1rem;
     border-radius: 0.5rem;
     color: var(--text-primary-light);
 }

 .form-control:focus {
     border-color: #000;
     box-shadow: none;
     background-color: var(--background-light);
     color: var(--text-primary-light);
 }

 .dark .form-control {
     background-color: var(--background-dark);
     border-color: var(--gray-600);
     color: var(--text-primary-dark);
 }

 .dark .form-control:focus {
     border-color: #fff;
     background-color: var(--background-dark);
     color: var(--text-primary-dark);
 }

 .form-label {
     font-weight: 500;
     color: var(--text-secondary-light);
 }

 .dark .form-label {
     color: var(--text-secondary-dark);
 }

 .btn-submit {
     width: 100%;
     padding: 0.75rem 1.5rem;
     font-weight: bold;
     background-color: #000;
     color: #fff;
     border-radius: 0.5rem;
     transition: background-color 0.2s;
 }

 .btn-submit:hover {
     background-color: #333;
 }

 .dark .btn-submit {
     background-color: #fff;
     color: #000;
 }

 .dark .btn-submit:hover {
     background-color: #e5e5e5;
 }

 .footer {
     background-color: var(--gray-50);
     padding: 3rem 0;
     color: var(--text-secondary-light);
 }

 .dark .footer {
     background-color: var(--gray-900);
     color: var(--text-secondary-dark);
 }

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

 .dark .footer a {
     color: var(--text-secondary-dark);
 }

 .footer a:hover {
     color: #000;
 }

 .dark .footer a:hover {
     color: #fff;
 }

 .social-icon {
     color: #9ca3af;
 }

 .social-icon:hover {
     color: #000;
 }

 .dark .social-icon:hover {
     color: #fff;
 }

 @media (max-width: 991.98px) {
     .navbar-nav {
         margin-top: 1rem;
     }
 }

 @media (max-width: 767.98px) {
     .hero-section h1 {
         font-size: 2.5rem;
     }

     .section {
         padding: 4rem 0;
     }

     .footer .d-flex {
         flex-direction: column;
         align-items: center;
         gap: 1rem;
     }
 }




 /* From Uiverse.io by Web-Potato */
 button {
     padding: 0.1em 0.25em;
     width: 13em;
     height: 4.2em;
     background-color: #212121;
     border: 0.08em solid #fff;
     border-radius: 0.3em;
     font-size: 12px;
     cursor: pointer;
 }

 button span {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     bottom: 0.4em;
     width: 8.25em;
     height: 2.5em;
     background-color: #212121;
     border-radius: 0.2em;
     font-size: 1.5em;
     color: #fff;
     border: 0.08em solid #fff;
     box-shadow: 0 0.4em 0.1em 0.019em #fff;
 }

 button span:hover {
     transition: all 0.5s;
     transform: translate(0, 0.4em);
     box-shadow: 0 0 0 0 #fff;
 }

 button span:not(hover) {
     transition: all 1s;
 }

 .hero-image {
     background-image: url(assets/Youthdevelopment.jpeg);
     height: 65vh;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     position: relative;
     filter: grayscale(100%);
     overflow: hidden;
     transition: filter 1s ease;
     border-radius: 12px;
 }

 .hero-image .img-overlay {
     background-color: #3f3f3fda;
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     transition: opacity 1s ease;
 }


 .hero-image:hover {
     filter: grayscale(0%);
     cursor: pointer;
 }

 .hero-image:hover .img-overlay {
     opacity: 0;
 }