:root {
   --blue-deep: #1a3a5c;
   --blue-mid: #2563a8;
   --blue-light: #4a90d9;
   --blue-pale: #dbeafe;
   --grey-dark: #374151;
   --grey-mid: #6b7280;
   --grey-light: #f3f4f6;
   --grey-border: #e5e7eb;
   --white: #ffffff;
   --gold: #c8922a;
 }

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

 body {
   font-family: 'system-ui', sans-serif;
   color: var(--grey-dark);
   background: var(--white);
   overflow-x: hidden;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: 'Nunito', sans-serif;
 }
.navbar-brand img{
  height: 60px;

}
 /* ── TOPBAR ── */
 .topbar {
   background: var(--blue-deep);
   color: #a8c4e0;
   font-size: 0.78rem;
   padding: 6px 0;
   letter-spacing: 0.02em;
 }

 .topbar a {
   color: #a8c4e0;
   text-decoration: none;
 }

 .topbar a:hover {
   color: var(--white);
 }

 /* ── NAVBAR ── */
 .navbar {
   background: var(--white);
   box-shadow: 0 2px 16px rgba(26, 58, 92, 0.09);
   padding: 0;
   position: sticky;
   top: 0;
   z-index: 1000;
 }

 .navbar-brand-wrap {
   padding: 5px 0;
   display: flex;
   align-items: center;
   gap: 14px;
 }

 .brand-icon {
   width: 48px;
   height: 48px;
   background: linear-gradient(135deg, var(--blue-mid), var(--blue-deep));
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--white);
   font-size: 1.4rem;
   flex-shrink: 0;
 }

 .brand-name {
   font-family: 'Nunito', sans-serif;
   font-size: 1.2rem;
   font-weight: 800;
   color: var(--blue-deep);
   line-height: 1.1;
 }

 .brand-sub {
   font-size: 0.68rem;
   color: var(--grey-mid);
   letter-spacing: 0.05em;
   text-transform: uppercase;
 }

 .navbar-nav .nav-link {
   font-size: 0.88rem;
   font-weight: 500;
   color: var(--grey-dark);
   padding: 10px 20px !important;
   border-bottom: 3px solid transparent;
   transition: all .2s;
 }

 .navbar-nav .nav-link:hover,
 .navbar-nav .nav-link.active {
   color: var(--blue-mid);
   border-bottom-color: var(--blue-mid);
 }

 .btn-join {
   background: var(--blue-mid);
   color: var(--white) !important;
   /* border-radius: 8px; */
   padding: 9px 22px !important;
   border-bottom: none !important;
   font-weight: 600 !important;
   transition: background .2s !important;
 }
.btn-submit{
  background: var(--blue-mid);
   color: var(--white) !important;
   /* border-radius: 8px; */
   padding: 9px 22px !important;
   border-bottom: none !important;
   font-weight: 600 !important;
       border: 1px solid #ffff;
   transition: background .2s !important;
}
 .apply-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(255, 255, 255, 0.15);
   color: #fff;
   padding: 12px 24px;
   /* border-radius: 10px; */
   font-size: .88rem;
   font-weight: 600;
   text-decoration: none;
   margin-top: 10px;
   transition: background .2s;
 }

 .btn-join:hover {
   background: var(--blue-deep) !important;
 }

 /* ── HERO ── */
 .hero {
   background: linear-gradient(120deg, var(--blue-deep) 0%, #1e4a80 55%, #2563a8 100%);
   position: relative;
   overflow: hidden;
   padding: 90px 0 80px;
   color: var(--white);
 }

 .hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2l-2 2V0zm0 4l4-4h2l-6 6V4zm0 4l8-8h2L40 10V8zm0 4L52 0h2L40 14v-2zm0 4L56 0h2L40 18v-2zm0 4L60 0h2L40 22v-2zm0 4L64 0h2L40 26v-2zm0 4L68 0h2L40 30v-2zm0 4L72 0h2L40 34v-2zm0 4L76 0h2L40 38v-2zm0 4L80 0v2L42 40h-2zm4 0L80 4v2L46 40h-2zm4 0L80 8v2L50 40h-2zm4 0L80 12v2L54 40h-2zm4 0L80 16v2L58 40h-2zm4 0L80 20v2L62 40h-2zm4 0L80 24v2L66 40h-2zm4 0L80 28v2L70 40h-2zm4 0L80 32v2L74 40h-2zm4 0L80 36v2L78 40h-2zm4 0L80 40v0h-2zm-56 0L0 40v0h2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 }

 .hero-circle {
   position: absolute;
   right: -80px;
   top: -80px;
   width: 480px;
   height: 480px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.07);
 }

 .hero-circle2 {
   position: absolute;
   right: 60px;
   top: 60px;
   width: 300px;
   height: 300px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.08);
 }

 .hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(255, 255, 255, 0.12);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 30px;
   padding: 6px 16px;
   font-size: 0.78rem;
   font-weight: 500;
   letter-spacing: 0.04em;
   margin-bottom: 24px;
   color: #c0d8f0;
 }

 .hero h1 {
   font-size: clamp(2rem, 5vw, 3.2rem);
   font-weight: 700;
   line-height: 1.15;
   margin-bottom: 20px;
 }

 .hero h1 span {
   color: #7ec8f0;
 }

 .hero p.lead {
   font-size: 1.05rem;
   color: #a8c8e8;
   line-height: 1.75;
   max-width: 520px;
   font-weight: 300;
 }

 .hero-actions {
   margin-top: 36px;
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
 }

 .btn-hero-primary {
   background: var(--white);
   color: var(--blue-deep);
   font-weight: 700;
   padding: 13px 30px;
   /* border-radius: 10px; */
   border: none;
   font-size: 0.92rem;
   text-decoration: none;
   transition: transform .2s, box-shadow .2s;
 }

 .btn-hero-primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
   color: var(--blue-deep);
 }

 .btn-hero-outline {
   background: transparent;
   color: var(--white);
   font-weight: 600;
   padding: 13px 30px;
   /* border-radius: 10px; */
   border: 1.5px solid rgba(255, 255, 255, 0.4);
   font-size: 0.92rem;
   text-decoration: none;
   transition: all .2s;
 }

 .btn-hero-outline:hover {
   background: rgba(255, 255, 255, 0.1);
   color: var(--white);
 }

 .hero-stats {
   margin-top: 20px;
   display: flex;
   gap: 36px;
   flex-wrap: wrap;
 }

 /* .stat-item {} */

 .stat-num {
   font-family: 'Nunito', sans-serif;
   font-size: 1.9rem;
   font-weight: 800;
   color: var(--white);
 }

 .stat-label {
   font-size: 0.78rem;
   color: #90b8d8;
   letter-spacing: 0.04em;
 }

 /* hero-card removed */

 /* ── SECTION COMMONS ── */
 section {
   padding: 40px 0;
 }

 .section-label {
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: #d28b27;
   font-weight: 700;
 }

 .section-title {
   font-size: clamp(1.6rem, 3vw, 2.2rem);
   font-weight: 700;
   color: var(--blue-deep);
 }

 .section-sub {
   font-size: 0.95rem;
   color: var(--grey-mid);
   line-height: 1.75;
   max-width: 540px;
 }

 /* ── TRUST BAR ── */
 .trust-bar {
   background: var(--grey-light);
   padding: 28px 0;
   
 }

 .trust-item {
   display: flex;
   align-items: center;
   gap: 10px;
   color: var(--grey-dark);
   font-size: 1rem;
   font-weight: 500;
 }

 .trust-item i {
   color: var(--blue-mid);
   font-size: 1.2rem;
 }

 /* ── SERVICES ── */
 .services-section {
   background: var(--white);
 }

 .service-card {
   background: #67aefe36;
   border: 1px solid var(--grey-border);
   /* border-radius: 16px; */
   padding: 28px 24px;
   height: 100%;
   transition: all .25s;
   position: relative;
   overflow: hidden;
 }

 .service-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--blue-mid), var(--blue-light));
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .3s;
 }

 .service-card:hover {
   box-shadow: 0 12px 40px rgba(37, 99, 168, 0.12);
   transform: translateY(-4px);
   border-color: transparent;
 }

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

 .service-icon {
   width: 40px;
   height: 40px;
   /* border-radius: 12px; */
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.4rem;
   margin-bottom: 18px;
 }

 .service-icon.blue {
   background: var(--blue-pale);
   color: var(--blue-mid);
 }

 .service-icon.green {
   background: #dcfce7;
   color: #16a34a;
 }

 .service-icon.amber {
   background: #fef3c7;
   color: #d97706;
 }

 .service-icon.purple {
   background: #ede9fe;
   color: #7c3aed;
 }

 .service-icon.rose {
   background: #ffe4e6;
   color: #e11d48;
 }

 .service-card h5 {
   font-family: 'system-ui', serif;
   font-size: 1.05rem;
   font-weight: 700;
   color: var(--blue-deep);
   margin-bottom: 10px;
 }

 .service-card p {
   font-size: 0.87rem;
   color: var(--grey-mid);
   line-height: 1.7;
   margin-bottom: 0;
 }

 .contact-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: #e6a74e;
   color: #fff;
   padding: 13px 28px;
   font-weight: 600;
   font-size: .9rem;
   text-decoration: none;
 }

 /* ── LOANS ── */
 .loans-section {
   background: var(--grey-light);
 }

 .loan-item {
   display: flex;
   align-items: center;
   gap: 16px;
   background: var(--white);
   /* border-radius: 12px; */
   padding: 10px 22px;
   margin-bottom: 14px;
   border: 1px solid var(--grey-border);
   transition: all .2s;
 }

 .loan-item:hover {
   box-shadow: 0 6px 24px rgba(37, 99, 168, 0.1);
   transform: translateX(4px);
 }

 .loan-dot {
   width: 35px;
   height: 35px;
   /* border-radius: 10px; */
   background: var(--blue-pale);
   color: var(--blue-mid);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.1rem;
   flex-shrink: 0;
 }

 .loan-text h6 {
   font-family: system-ui;
   font-size: 0.95rem;
   font-weight: 700;
   color: var(--blue-deep);
   margin-bottom: 3px;
 }

 .loan-text p {
   font-size: 0.8rem;
   color: var(--grey-mid);
   margin: 0;
 }

 .loan-arrow {
   margin-left: auto;
   color: var(--blue-light);
 }

 .feature-box {
   background: linear-gradient(135deg, var(--blue-deep), #2563a8);
   /* border-radius: 20px; */
   padding: 40px;
   color: var(--white);
   height: 100%;
 }

 .feature-box h3 {
   font-size: 1.5rem;
   margin-bottom: 16px;
   color: var(--white);
 }

 .feature-box p {
   color: #a8c8e8;
   font-size: 0.9rem;
   line-height: 1.8;
   margin-bottom: 24px;
 }

 .feature-list {
   list-style: none;
   padding: 0;
 }

 .feature-list li {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 0.87rem;
   color: #c0d8f0;
   margin-bottom: 12px;
 }

 .feature-list li i {
   color: #7ec8f0;
   font-size: 1rem;
 }

 /* ── WHY CHOOSE ── */
 .why-section {
   background: var(--white);
 }

 .why-card {
   text-align: center;
   padding: 20px 20px;
   /* border-radius: 16px; */
   transition: all .25s;
   background: #1a3a5cbd;
   height: 100%;
 }

 .why-card:hover {
   background: var(--blue-deep);
 }

 .why-icon {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--blue-pale);
   color: var(--blue-mid);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
   margin: 0 auto 18px;

 }

 .why-card h5 {
   font-family: 'system-ui', serif;
   font-size: 1rem;
   font-weight: 700;
   color: #ffff;
   margin-bottom: 10px;
 }

 .why-card p {
   font-size: 0.85rem;
   color: #ffff;
   line-height: 1.7;
 }

 /* ── MEMBERSHIP ── */
 .membership-section {
   background: var(--blue-deep);
   color: var(--white);
 }

 .membership-section .section-label {
   color: #e6a74e;
 }

 .membership-section .section-title {
   color: var(--white);
 }

 .step-card {
   background: rgba(255, 255, 255, 0.07);
   border: 1px solid rgba(255, 255, 255, 0.12);
   /* border-radius: 14px; */
   padding: 26px 22px;
   height: 100%;
 }

 .step-num {
   font-family: 'Nunito', sans-serif;
   font-size: 2rem;
   font-weight: 800;
   color: #4a90d9;
   margin-bottom: 12px;
 }

 .step-card h5 {
   font-size: 1rem;
   font-weight: 600;
   color: var(--white);
   margin-bottom: 8px;
 }

 .step-card p {
   font-size: 0.85rem;
   color: #90b8d8;
   line-height: 1.7;
   margin: 0;
 }

 /* ── CONTACT ── */
 .contact-section {
   background: var(--grey-light);
 }

 .contact-card {
   background: var(--white);
   /* border-radius: 16px; */
   padding: 20px;
   border: 1px solid var(--grey-border);
 }

 .contact-icon-box {
   width: 40px;
   height: 40px;
   /* border-radius: 12px; */
   background: var(--grey-light);
   color: var(--blue-mid);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.3rem;
   margin-bottom: 6px;
 }

 .contact-card h5 {
   font-family: system-ui;
   font-size: 1.05rem;
   font-weight: 700;
   color: var(--blue-deep);
   margin-bottom: 10px;
 }

 .contact-card p,
 .contact-card a {
   font-size: 0.88rem;
   color: var(--grey-mid);
   text-decoration: none;
   line-height: 1.8;
 }

 .contact-card a:hover {
   color: var(--blue-mid);
 }

 /* ── FOOTER ── */
 footer {
   background: var(--blue-deep);
   color: #90b8d8;
   padding: 0px 40px;
 }

 .footer-logo-name {
   font-family: 'Nunito', sans-serif;
   font-size: 1.2rem;
   font-weight: 800;
   color: var(--white);
 }

 .footer-logo-sub {
   font-size: 0.7rem;
   color: #7ec8f0;
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }

 footer p {
   font-size: 0.85rem;
   line-height: 1.8;
 }

 footer h6 {
   font-family: 'Playfair Display', serif;
   color: var(--white);
   font-size: 0.95rem;
   margin-bottom: 16px;
 }

 footer ul {
   list-style: none;
   padding: 0;
 }

 footer ul li {
   margin-bottom: 9px;
 }

 footer ul li a {
   color: #90b8d8;
   text-decoration: none;
   font-size: 0.85rem;
   transition: color .2s;
 }

 footer ul li a:hover {
   color: var(--white);
 }

 .footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   /*margin-top: 40px;*/
   padding: 10px 0;
   text-align: center;
   font-size: 0.8rem;
   color: #fff;
 }

 .tagline-ticker {
   background: rgba(255, 255, 255, 0.06);
   padding: 10px 18px;
   font-size: 0.82rem;
   color: #7ec8f0;
   font-style: italic;
   margin-top: 14px;
 }

 /* ── ANIMATIONS ── */
 @keyframes fadeUp {
   from {
     opacity: 0;
     transform: translateY(24px);
   }

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

 .fade-up {
   animation: fadeUp .6s ease both;
 }

 .delay-1 {
   animation-delay: .1s;
 }

 .delay-2 {
   animation-delay: .2s;
 }

 .delay-3 {
   animation-delay: .3s;
 }

 @media (max-width: 768px) {
   .hero {
     padding: 60px 0 50px;
   }

   .hero-stats {
     gap: 24px;
   }

   section {
     padding: 56px 0;
   }
 }

 /* ── GALLERY ── */
 .gallery-section {
   background: #ffff;
 }

 .gf-btn {
   background: var(--white);
   border: 1.5px solid var(--grey-border);
   border-radius: 30px;
   padding: 8px 22px;
   font-size: 0.83rem;
   font-weight: 600;
   color: var(--grey-dark);
   cursor: pointer;
   transition: all .2s;
 }

 .gf-btn:hover,
 .gf-btn.active {
   background: var(--blue-mid);
   border-color: var(--blue-mid);
   color: var(--white);
 }

 .gallery-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
   gap: 10px;
 }

 .gallery-item {
   position: relative;
   /* border-radius: 14px; */
   overflow: hidden;
   aspect-ratio: 4/3;
   cursor: pointer;
   background: #e5e7eb;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
   transition: transform .25s, box-shadow .25s;
 }

 .gallery-item:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 32px rgba(37, 99, 168, 0.18);
 }

 .gallery-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .35s;
 }

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

 .gallery-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(26, 58, 92, 0.85) 0%, rgba(26, 58, 92, 0.1) 60%, transparent 100%);
   opacity: 0;
   transition: opacity .25s;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-end;
   padding: 18px;
 }

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

 .overlay-icon {
   color: var(--white);
   font-size: 1.6rem;
   margin-bottom: 8px;
 }

 .overlay-caption {
   color: var(--white);
   font-size: 0.82rem;
   font-weight: 600;
   text-align: center;
   line-height: 1.4;
 }

 .gallery-item.hidden {
   display: none;
 }

 /* ── LIGHTBOX ── */
 .lightbox {
   position: fixed;
   inset: 0;
   z-index: 9999;
   display: none;
   align-items: center;
   justify-content: center;
 }

 .lightbox.open {
   display: flex;
 }

 .lightbox-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(10, 20, 40, 0.92);
   cursor: pointer;
 }

 .lightbox-content {
   position: relative;
   z-index: 2;
   max-width: 90vw;
   max-height: 90vh;
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .lightbox-content img {
   max-width: 88vw;
   max-height: 78vh;
   border-radius: 12px;
   object-fit: contain;
   box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
 }

 .lb-caption {
   color: #c0d8f0;
   font-size: 0.85rem;
   margin-top: 14px;
   text-align: center;
   max-width: 600px;
   line-height: 1.6;
 }

 .lb-counter {
   color: #7ea8c8;
   font-size: 0.75rem;
   margin-top: 6px;
 }

 .lb-close,
 .lb-prev,
 .lb-next {
   position: absolute;
   background: rgba(255, 255, 255, 0.12);
   border: none;
   color: var(--white);
   border-radius: 50%;
   width: 44px;
   height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 1rem;
   transition: background .2s;
 }

 .lb-close:hover,
 .lb-prev:hover,
 .lb-next:hover {
   background: rgba(255, 255, 255, 0.25);
 }

 .lb-close {
   top: -52px;
   right: 0;
 }

 .lb-prev {
   left: -60px;
   top: 50%;
   transform: translateY(-50%);
 }

 .lb-next {
   right: -60px;
   top: 50%;
   transform: translateY(-50%);
 }

 @media (max-width: 600px) {
   .lb-prev {
     left: 4px;
   }

   .lb-next {
     right: 4px;
   }

   .gallery-grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 10px;
   }
 }
 .form-control{
  line-height: 2.5rem;
  border-radius: 0px !important;
 }
 .form-select{
  line-height:2.5rem;
  border-radius: 0px !important;
 }
 .sub-btn{
  border-radius: 0px !important ;
 }