* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #212529;
    background-color: #f8f9fa;
  }
  
  /* HEADER STYLING */
  header {
    background-color: #fff;
    height: 100px;
    position: fixed;
    z-index: 1000;
    width: 100%;
  }
  
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;

   
  }
  
  .logo-img {
    height: 160px;
    width: 160px;
  }
  .nav-wrapper{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-right: 150px;
  }
  .nav-links {
    display: flex;
    list-style: none;
    gap: 20px;
  }
  
  .nav-links li a {
    /* color: rgb(24, 23, 23); */
    color: #004085;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
    font-size: 20px;
    line-height: 20px;
  }
  
  .nav-links li a:hover {
    color:#17a2b8;
  }
  
  .nav-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 80px;
  }
  
  .btn {
    background-color: #fff;
    color:#17a2b8 ;
    padding: 12px 20px;
    border-radius: 4px;
    border: 1px solid #17a2b8;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
  }
  .btn1 {
    background-color: #17a2b8;
    color: #fff;
    padding: 12px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
  }
  .btn:hover {
    background-color: #138496;
    color: #fff;
  }
  .btn1:hover {
    background-color: #138496;
   
  }
  
  .menu-toggle {
    display: none;
    font-size: 26px;
    color: #fff;
    cursor: pointer;
  }
  
  /* RESPONSIVE  */
 /* Header */
@media (max-width: 1000px) {
    .navbar{
        position: relative;
        bottom: 40px;
    }
    .nav-wrapper {
      display: none;
      flex-direction: column;
      align-items: center;
      background-color: #f8f9fa;
      width: 100vw;
      padding: 20px;
      position: relative;
      bottom: 20px;
      left: 50px;
    }
  
    .nav-wrapper.show {
      display: flex;
    }
  
    .nav-links {
      flex-direction: column;
      gap: 15px;
      width: 100%;
      align-items: center;
    }
  
    .nav-cta {
      flex-direction: column;
      gap: 10px;
      width: 100%;
      margin-right: 80px;
      margin-top: 10px;
    }
  
    .menu-toggle {
      display: block;
      font-size: 26px;
      color: #17a2b8;
      cursor: pointer;
      margin-right: 20px;
    }
  
    .navbar {
      flex-wrap: wrap;
    }
  }
  
  
 /* HERO SLIDER */
.hero-slider {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }
  
  .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .slide.active {
    opacity: 1;
    z-index: 2;
  }
  
  .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
  }
  
  .slide-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    max-width: 800px;
    padding: 0 20px;
  }
  
  .slide-content h1 {
    font-size: 3.5rem;
    margin-bottom: 45px;
  }
  
  .slide-content p {
    font-size: 1.8rem;
    margin-bottom: 25px;
  }
  
  .slide-content .buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
  }

  /* ABOUT US */
.about-us {
    padding: 60px 30px;
    background-color: #fff;
  }
  
  .about-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    align-items: center;
  }
  
  .about-text h2 {
    color: #004085;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 30px;
    margin-bottom: 20px;
    font-family: 'Times New Roman', Times, serif;
  }
  
  .about-text p {
    color: #6c757d;
    margin-bottom: 15px;
    line-height: 1.6;
    font-size: 18px;
  }
  
  .about-text .btn1 {
    margin-top: 10px;
    display: inline-block;
    font-size: 1rem;
  }
  
  .about-image img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .about-grid {
      grid-template-columns: 1fr;
      text-align: center;
    }
    .about-text h2 {
      font-size: 1.6rem;
    }
  }

  /* GOALS SECTION */

.goals {
    background:#fff; 
    padding:60px 40px;
    color: #004085;
     }
.goals-grid {
  display:grid; gap:32px; 
  align-items:center;
  grid-template-columns: 1.1fr .9fr;
}
.goals-lead { 
    color:#6c757d; 
    margin:10px 0 24px; 
    line-height:1.65;
 }

.goal-item {
  display:grid; grid-template-columns:56px 1fr; 
  gap:14px;
  background:#fff; 
  border:1px solid #e9ecef; 
  border-radius:12px;
  padding:16px 18px; 
  margin-bottom:14px;
  box-shadow:0 8px 18px rgba(0,0,0,.04);
}
.goal-item h3 { 
    margin-bottom:6px; 
    font-size:1.05rem; 
    color:#004085;
 }
.goal-item p {
     color:#6c757d; 
    }

.goal-icon {
  width:56px; 
  height:56px; 
  border-radius:12px;
  display:grid; 
  place-items:center;
  background:#e8f6f9;
  border:1px solid #bfe8ef;
}
.goal-icon svg { 
    width:26px; 
    height:26px; 
    fill:#17a2b8; 
}
.goal-icon.alt { 
    background:#eef2ff; 
    border-color:#cfd8ff; 
}
.goal-icon.alt svg {
     fill:#004085; 
    }

.goals-actions { 
    display:flex; 
    gap:12px; 
    align-items:center;
     margin-top:14px; }

.goals-right img{
  width:100%; 
  border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}

/* responsive */
@media (max-width: 991px){
  .goals-grid { 
    grid-template-columns: 1fr;
 }
  .goals-right { 
    order: -1;
 }
}
@media (max-width: 575px){
  .goal-item { 
    grid-template-columns:48px 1fr; 
    padding:14px; 
}
  .goal-icon{ 
    width:48px; 
    height:48px; }
  .goals-actions{ 
    flex-direction:column;
    align-items:flex-start; }
}
/* WHAT WE DO */
.what-we-do {
    padding: 60px 20px;
    text-align: center;
    background-color: #f8f9fa;
  }
  
  .what-we-do h2 {
    color: #004085;
    font-size: 2rem;
    margin-bottom: 10px;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 30px;
    margin-bottom: 20px;
    font-family: 'Times New Roman', Times, serif;
  }
  
  
  .what-we-do p {
    color: #555;
    margin-bottom: 40px;
    margin-bottom: 15px;
    line-height: 1.6;
    font-size: 20px;
    line-height: 30px;
  }
  
  .services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
  }
  
  .service-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    text-align: left;
  }
  
  .service-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 8px;
  }
  
  .service-card h3 {
    margin-top: 15px;
    font-size: 1.5rem;
    color: #004085;
  }
  
  .service-card p {
    font-size: 1.1rem;
    line-height: 30px;
    color: #444;
    margin-top: 10px;
  }

  /* WHY CHOOSE US */
.why-us {
     background: #f8f9fa; 
     padding: 60px 0; 
    }
.why-us .section-title {
     text-align: center;
      margin-bottom: 26px; 
      color:#004085; 
      color: #004085;
      font-size: 2rem;
      margin-bottom: 10px;
      font-size: 2.2rem;
      font-weight: 700;
      line-height: 30px;
      margin-bottom: 20px;
      font-family: 'Times New Roman', Times, serif;
    }


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

.why-card {
  background:#fff;
  border:1px solid #e9ecef;
  border-radius: 12px;
  padding: 22px 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,.04);
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
  overflow: hidden;
  height: 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 28px rgba(0,0,0,.08);
  background-color: #17a2b8;
  color: #fff;
}
.why-card:hover h3,
.why-card:hover p{
    color: #fff;
}

.why-icon {
  width: 56px;
   height: 56px; 
   border-radius: 12px;
  display: grid;
   place-items: center;
  background:#e8f6f9; 
  border:1px solid #bfe8ef; 
  margin-bottom: 12px;
}
.why-icon svg { 
    width: 28px; 
    height: 28px; 
    fill:none; 
    stroke:#17a2b8; 
    stroke-width:1.7; 
    stroke-linecap:round; 
    stroke-linejoin:round; 
}
.why-icon.alt { 
    background:#eef2ff; 
    border-color:#cfd8ff;
 }
.why-icon.alt svg { 
    stroke:#004085; 
}

.why-card h3 { 
    font-size:1.5rem; 
    color:#004085; 
    margin-bottom:8px;
 }
.why-card p { 
    color:#6c757d; 
    font-size: 18px;
    line-height: 30px;
 }
/* responsive */
@media (max-width: 1200px)
    {
  .why-grid { 
    grid-template-columns: repeat(3, 1fr);
 }
}
@media (max-width: 768px){
  .why-grid { 
    grid-template-columns: repeat(2, 1fr); 
}
}
@media (max-width: 520px){
  .why-grid {
     grid-template-columns: 1fr;
     }
  .why-us { 
    padding: 48px 0; 
}
}

/* HOW IT WORKS */
.how { 
    background:#fff; 
    padding:60px 0; 
}
.how .section-title { 
    text-align:center; 
    /* margin-bottom:28px;  */
    color:#004085;
    font-size: 2rem;
    margin-bottom: 10px;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 30px;
 }
.how .eyebrow { 
    text-align:center; 
    color:#17a2b8; 
    font-weight:700; 
    letter-spacing:.04em; 
    text-transform:uppercase; 
    font-size:1.1rem; 
    margin-bottom:6px; }

.how-grid{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 40px 30px;
  height: 300px;
}



.how-step{
  position: relative;
  background:#fff;
  border:1px solid #e9ecef;
  border-radius:12px;
  padding:22px 18px 18px;
  box-shadow:0 10px 22px rgba(0,0,0,.04);
  transition: transform .2s ease, box-shadow .2s ease;
  text-align: left;
  z-index: 1;
}
.how-step:hover{ 
    transform: translateY(-4px); 
    box-shadow:0 16px 28px rgba(0,0,0,.08);
     border-color:#bfe8ef; }

.how-num{
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background: linear-gradient(135deg, #17a2b8, #004085);
  color:#fff; font-weight:800; font-size:1.1rem;
  box-shadow:0 8px 18px rgba(0,0,0,.10);
  margin-bottom:12px;
}
.how-title{ 
    font-size:1.2rem; 
    color:#004085; 
    margin-bottom:6px; 
    line-height: 30px;
    font-weight: 500;
}
.how-text{ 
    color:#6c757d;
     line-height:30px;
     font-size: 18px;
     }

 /* CTA under How It Works */
.how-cta {
    text-align: center;
    margin-top: 32px;
  }
  
  .btn-invest {
    display: inline-block;
    padding: 14px 34px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #17a2b8, #004085);
    border: none;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.2s ease;
  }
  
  .btn-invest:hover {
    background: linear-gradient(135deg, #138496, #002b57);
    transform: translateY(-2px);
  }    

/* tablet */
@media (max-width: 991px){
  .how-grid{ grid-template-columns: repeat(2, 1fr); }
  .how-grid::before{
    left: 40px; right: 40px;
  }
}

/* mobile: stack + vertical connector */
@media screen and (min-width:300px) and (max-width: 575px){
  .how{ 
    padding:48px 0;
 }
  .how-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .how-grid::before{
    content:"";
    left: 28px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 4px;
    height: auto;
    background: linear-gradient(#17a2b8, #004085);
  }
  .how-step{
    padding-left: 72px; /* room for the vertical line + number */
  }
  .how-num{
    position:absolute;
    left: 5px;
    top: 18px;
  }
  .how-cta{
    /* position: relative;
    top: 26rem; */
    margin-top: 17rem;
  }
}
@media  (max-width:950px){
    .how-cta{
        position: relative;
        top: 200px;
      }
}

/* ===========================
   TESTIMONIALS (REVIEWS) CSS
   =========================== */

/* Section background + panel */
.reviews{
    background: radial-gradient(1200px 600px at 50% 100%, #17a2b8 0%, #0f7e95 40%, #004085 100%);
    padding: 70px 0;
  }
  
  .reviews-panel{
    background: #eef7f8;
    border-radius: 28px;
    box-shadow: 0 20px 50px rgba(0,0,0,.15);
    padding: 34px 20px 56px;
  }
  
  /* Upper texts (use your requested dimensions) */
  .reviews .eyebrow{
    color: #6c757d;
    line-height: 30px;
    font-size: 18px;
    text-align: center;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: 600;
  }
  
  .reviews .section-title{
    text-align:center; 
    /* margin-bottom:28px;  */
    color:#004085;
    font-size: 2rem;
    margin-bottom: 10px;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 30px;
  }
  
  /* Viewport + track (carousel rail) */
  .reviews-viewport{
    position: relative;
    overflow: hidden;
    padding: 0 52px;           
    margin-top: 16px;
  }
  
  .reviews-track{
    display: flex;
    gap: 18px;
    transition: transform .6s ease;
    will-change: transform;
    padding: 30px;
  }
  
  /* Review card (large, tall, tidy text) */
  .review-card{
    flex: 0 0 calc(33.333% - 12px);  /* 3 cards per view on desktop */
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    box-shadow: 0 10px 22px rgba(0,0,0,.05);
    padding: 28px 24px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
  }
  
  .review-card p{
    order: 1;
    margin: 8px 0 0;
    font-size: 1rem;
    line-height: 1.7;
    color: #343a40;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;    /* keep within fixed height */
    overflow: hidden;
  }
  
  /* Author block */
  .r-head{
    order: 2;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .r-head img{
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e9ecef;
  }
  
  .r-head h4{
    margin: 0;
    font-size: 1.02rem;
    color: #212529;
    line-height: 1.2;
    font-weight: 700;
  }
  
  .r-head span{
    font-size: .9rem;
    color: #6c757d;
  }
  
  /* Arrows */
  .rv-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    display: grid;
    place-items: center;
    background: #17a2b8;
    color: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.15);
  }
  
  .rv-prev{ 
    left: 8px;
 }
  .rv-next{ 
    right: 8px;
 }
  .rv-btn:hover{ 
    background: #138496;
 }
  
  /* Hover polish on cards */
  .review-card:hover{
    box-shadow: 0 16px 28px rgba(0,0,0,.08);
    transform: translateY(-2px);
  }
  
  /* Responsiveness */
  @media (max-width: 1024px){
    .review-card{ 
        flex: 0 0 calc(50% - 9px); 
    }   /* 2 per view */
    .review-card{
         min-height: 300px; 
        }
    .review-card p{ 
        -webkit-line-clamp: 6;
     }
  }
  
  @media (max-width: 600px){
    .reviews-viewport{ 
        padding: 0 40px;
     }
    .review-card{
      flex: 0 0 85%;                            
      min-height: 280px;
      padding: 22px;
    }
    .review-card p{ 
        -webkit-line-clamp: 7;
     }
  }
  @media screen and (min-width:300px)and (max-width: 575px){
    .reviews{
        position: relative;
        top: 230px;
    }
    
  }

  @media screen and (min-width:580px)and (max-width: 950px){
    .reviews{
        position: relative;
        top: 200px;
    }
    
  }
  
/* OUR TEAM */
.team { 
    background:#fff;
     padding:60px 30px; 
    }
.team .section-title { 
    text-align:center; 
    margin-bottom:26px; 
    color:#004085; 
}
.team .eyebrow {
  text-align:center;
   color:#17a2b8; 
   font-weight:700;
    letter-spacing:.04em;
  text-transform:uppercase; 
  font-size:.9rem; 
  margin-bottom:6px;
}

/* grid */
.team-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(4, 1fr);
}

/* card */
.team-card{
  background:#fff;
  border:1px solid #e9ecef;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(0,0,0,.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display:flex; flex-direction:column;
}
.team-card:hover{
  transform: translateY(-4px);
  box-shadow:0 16px 28px rgba(0,0,0,.08);
  border-color:#bfe8ef;
}

/* media (image + overlay) */
.team-media{ 
    position:relative; aspect-ratio: 4/3; 
    background:#f1f3f5; 
}
.team-media img{ 
    width:100%; height:100%; 
    object-fit:cover; 
    display:block;
 }

.team-overlay{
  position:absolute; 
  inset:0; 
  display:flex;
   flex-direction:column;
  justify-content:flex-end;
   gap:10px; 
   padding:16px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55));
  opacity:0; 
  transform: translateY(10px);
  transition: opacity .35s ease, 
  transform .35s ease;
}
.team-card:hover 
.team-overlay{ 
    opacity:1; 
    transform: translateY(0);
 }

.team-overlay p{
  color:#fff;
   margin:0;
    font-size:.95rem;
     line-height:1.5;
}

/* social */
.team-social{ 
    display:flex; 
    gap:10px; 
}
.soc{
  width:36px; 
  height:36px; 
  display:grid; 
  place-items:center;
  border-radius:8px; 
  background: rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(3px);
  transition: background .25s ease;
}
.soc:hover{ 
    
    background: rgba(255,255,255,.28); }
.soc svg{ 
    width:18px;
     height:18px;
      fill:#fff; }

/* body */
.team-body{ 
    padding:16px; 
}
.team-body h3{
     margin:0 0 6px; 
     color:#212529; font-size:1.08rem;
     }
.team-body span{ 
    display:block;
     color:#17a2b8;
      font-weight:600; margin-bottom:8px; 
    }
.team-body p{
     color:#6c757d; 
     line-height:1.6; 
    }

/* responsive */
@media (max-width: 1200px){
  .team-grid{
     grid-template-columns: repeat(3, 1fr); 
    }
}
@media (max-width: 820px){
  .team-grid{
     grid-template-columns: repeat(2, 1fr);
     }
}
@media (max-width: 520px){
  .team-grid{ 
    grid-template-columns: 1fr;
 }
  .team { 
    padding:48px 20px; 
    margin-top: 280px;
}
}

  /* Call to Action Section */
.cta-section {
    background: linear-gradient(-45deg, #004085, #17a2b8, #004085, #138496);
    background-size: 400% 400%;
    animation: gradientFlow 8s ease infinite;
    padding: 80px 20px;
    text-align: center;
    color: #fff;
  }
  
  @keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  .cta-container {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .cta-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px;
  }
  
  .cta-text {
    font-size: 1.2rem;
    margin-bottom: 30px;
    line-height: 1.6;
  }
  
  .cta-btn {
    background-color: #fff;
    color: #17a2b8;
    padding: 14px 30px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  .cta-btn:hover {
    background-color: #138496;
    color: #fff;
  }

  @media screen and (min-width:300px)and (max-width: 575px){
    .cta-section{
        position: relative;
        top: 70px;
    }
   
    
  }
  @media screen and (min-width:580px)and (max-width: 950px){
    .cta-section{
        position: relative;
        top: 200px;
    }
   
    
  }

 /* FAQ – plain white background */
.faq { 
  background:#fff; 
  padding:60px 0; 
}
.faq-title {
   text-align:center; 
   color:#004085; 
   font-size:2rem;
    margin-bottom:6px;
   }
.faq-sub { 
  text-align:center; 
  color:#6c757d; 
  margin-bottom:24px;
 }

.faq-list { 
  max-width:900px;
   margin:0 auto; 
   display:grid; 
   gap:12px; }

/* item container */
.faq-item {
  border:1px solid #e9ecef;
  border-radius:12px;
  background:#fff;
  overflow: visible;    /* never clip content */
}

/* question row */
.faq-q {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  cursor:pointer;
  font-size:1rem;
  font-weight:600;
  color:#212529;
}

/* remove default marker and add our own */
.faq-q::-webkit-details-marker {
     display:none;
     }
.faq-q::after{
  content:"▾";
  font-size:18px;
  color:#17a2b8;
  transition: transform .25s ease;
}

/* opened state arrow rotation */
.faq-item[open] .faq-q::after { 
    transform: rotate(180deg); 
}

/* answer */
.faq-a{
  padding: 0 18px 16px;
  color:#343a40;
  line-height:1.7;
  border-top:1px solid #e9ecef;
}

/* hover + focus styles */
.faq-q:hover { 
    background:#f8f9fa;
 }
.faq-item:focus-within {
     outline:3px solid rgba(23,162,184,.25); 
     outline-offset:2px; 
    }

/* responsive */
@media (max-width:575px){
  .faq { 
    padding:48px 0;
    margin-top: 120px;
 }
  .faq-title{ 
    font-size:1.6rem; }

}
/* CONTACT */
.contact{
     padding:60px  20px; 
    }
.contact-grid{
  display:grid;
   gap:28px; 
   align-items:start;
  grid-template-columns: 1.1fr 0.9fr;
}

/* left */
.contact-lead{ 
    color:#6c757d; 
    margin:10px 0 18px; 
    line-height:1.7; 
}
.contact-list{ 
    list-style:none; 
    padding:0; margin:0; 
    display:grid; 
    gap:12px;
 }
.contact-list li{
  display:grid; 
  grid-template-columns:44px 1fr; 
  gap:12px;
  padding:12px; 
  border:1px solid #e9ecef; 
  border-radius:12px; 
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.03);
}
.ci-icon{
  width:44px;
   height:44px; 
   border-radius:10px; 
   display:grid; 
   place-items:center;
  background:#e8f6f9; 
  border:1px solid #bfe8ef;
}
.ci-icon svg{ 
    width:22px; 
    height:22px; 
    fill:#17a2b8;
 }
.contact-list strong{ 
    display:block; 
    color:#212529; 
    margin-bottom:2px;
 }
.contact-list a, .contact-list span{ 
    color:#6c757d; 
    text-decoration:none;
 }
.contact-list a:hover{ 
    text-decoration:underline;
 }

/* right: form */
.contact-form{
  background:#fff; 
  border:1px solid #e9ecef; 
  border-radius:12px;
  padding:22px; 
  box-shadow:0 10px 22px rgba(0,0,0,.04);
}
.cf-row{ 
    display:grid; 
    grid-template-columns:1fr 1fr; 
    gap:12px; 
}

.cf-field label{
     display:block; 
     font-weight:600; 
     margin:10px 0 6px; 
     color:#212529; }
.cf-field input, .cf-field textarea{
  width:100%; 
  padding:12px 14px; 
  border:1px solid #ced4da; 
  border-radius:8px;
  font-size:15px;
   outline:none;
    background:#fff;
  transition:border-color .2s, 
  box-shadow .2s;
}
.cf-field input:focus, .cf-field textarea:focus{
  border-color:#17a2b8; 
  box-shadow:0 0 0 3px rgba(23,162,184,.15);
}
.cf-submit{ 
    margin-top:10px; 
    border: none;
}
.cf-msg{
     margin-top:10px; 
     font-size:.95rem;
     }

/* map */
.map-wrap{ 
    margin-top:26px; 
    border-top:1px solid #e9ecef;
     padding-top:20px; 
    }
.map-wrap iframe{
  width:100%; 
  height:380px; 
  border:0; 
  border-radius:12px;
  box-shadow:0 10px 22px rgba(0,0,0,.04);
}

/* responsive */
@media (max-width: 991px){
  .contact-grid{ 
    grid-template-columns:1fr; 
}
}
@media (max-width: 575px){
  .contact{ 
    padding:48px 0 16px;
 }
  .cf-row{ 
    grid-template-columns:1fr;
 }
}

/* =======================
   FOOTER
   ======================= */
.site-footer{
  background:  #000000 ;
  color: #f8f9fa;
  padding-top: 50px;
}

/* grid */
.footer-grid{
  display: grid;
  gap: 28px;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  align-items: start;

}

/* brand block */
.f-logo img{
  width: 160px;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
}
.f-tag{ 
  margin: 10px 0 16px; 
  color: #dbe2ea; 
  line-height: 1.6; 
}

/* newsletter */
.f-news label{ 
  display:block; 
  font-weight:600; 
  margin-bottom:8px;
 }
.f-news-row{ 
  display:flex; 
  gap:10px; 
}
.f-news-row input{
  flex: 1 1 auto;
  padding: 12px 14px;
  border: 1px solid #2e5d93;
  background: #0e3a6a;
  color: #fff;
  border-radius: 8px;
  outline: none;
}
.f-news-row input::placeholder{
   color: #c8d6e5; 
  }
.f-news .btn1{ 
  padding: 12px 18px; 
  border-radius: 8px; 
}
.f-news-note{
   display:block; 
   color:#c8d6e5;
    margin-top:8px; 
  }
.f-news-msg{ 
  margin-top:8px; 
  color:#2ecc71; 
}

/* social icons */
.f-social{ 
  display:flex; 
  gap:10px; 
  margin-top:14px; 
}
.soc{
  width:38px; 
  height:38px; 
  display:grid; 
  place-items:center;
  border-radius:10px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  transition: 
  background .25s ease, 
  transform .2s ease;
}
.soc:hover{ 
  background: rgba(255,255,255,.22); 
  transform: translateY(-2px); 
}
.soc svg{ 
  width:18px; 
  height:18px; 
  fill:#fff; }

/* columns */
.f-col h4{
  color:#9bd7e3;
  margin-bottom:10px;
  font-size: 1rem;
  letter-spacing:.02em;
}
.f-links{ 
  list-style:none;
   margin:0; 
   padding:0; 
   display:grid; 
   gap:8px; 
  }
.f-links a, .f-contact span{
  color:#e5edf5; 
  text-decoration:none;
   font-size:.98rem;
}
.f-links a:hover{ 
  color:#17a2b8; 
  text-decoration:underline; 
}

/* subfooter */
.subfooter{
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 28px;
  padding: 14px 0;
  background: rgba(0,0,0,.06);
}
.subfooter-row{
  display:flex; 
  align-items:center; 
  justify-content:space-between;
  gap: 16px;
}
.subfooter p{
   margin:0; 
   color:#dbe2ea; 
  }
.sub-links{ 
  list-style:none; 
  display:flex; 
  gap:14px;
   margin:0; 
   padding:0;
   }
.sub-links a{ 
  color:#cfe5ef; 
  text-decoration:none;
 }
.sub-links a:hover{
   color:#17a2b8; 
}

/* responsive */
/* Medium devices (tablets) */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    text-align: center;
  }

  .f-news-row {
    flex-direction: column;
    align-items: center;
  }

  .f-news-row input,
  .f-news .btn1 {
    width: 90%;
    max-width: 300px;
  }

  .f-social {
    justify-content: center;
  }
}

/* Small devices (phones) */
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 20px;
  }

  .f-news-row {
    flex-direction: column;
    gap: 8px;
  }

  .f-news-row input,
  .f-news .btn1 {
    width: 100%;
    font-size: 14px;
    padding: 10px;
  }

  .subfooter-row {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .f-logo img {
    margin: 0 auto;
    width: 120px;
  }

  .f-col h4 {
    font-size: 0.95rem;
  }

  .f-links a {
    font-size: 0.9rem;
  }
}
/* General Reset */

/* sign up page */
.back-btn {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 500;
  color: #0077cc;
  text-decoration: none;
  transition: color 0.3s ease;
}

.back-btn:hover {
  color: #005999;
  text-decoration: underline;
}
.container-sign{
  background: #102630; 
  display: flex;
  justify-content: center;
  align-items: center;
 height: 100vh;
}

/* Signup Container */
.signup-container {
  display: flex;
  width: 80%;
  max-width: 1000px;
  background: #1a3445;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 5px 25px rgba(0,0,0,0.3);
}

/* Left Panel */
.signup-left {
  flex: 1;
  background: url(../images/nature.jpg);
  color: #fff;
  padding: 40px 30px;
  text-align: center;
}

.signup-left .logo {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.signup-left .tagline {
  font-size: 16px;
  margin-bottom: 30px;
}

/* 
/* Right Panel */
.signup-right {
  flex: 1;
  background: #ffffff;
  padding: 40px 30px;
}

.signup-right h2 {
  color: #102630;
  margin-bottom: 10px;
}

.signin-text {
  margin-bottom: 20px;
  font-size: 14px;
}

.signin-text a {
  color: #0077cc;
  text-decoration: none;
}

.signup-form .form-group {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.signup-form input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  outline: none;
}

.signup-form input:focus {
  border-color: #0077cc;
}

.checkbox {
  align-items: center; 
  margin: 15px 0;
  font-size: 13px;
}

.checkbox input {
  position: relative;
  right: 13rem;
  top: 1.2rem;
}
.checkbox label{
  margin-left: 25px;
}

.checkbox a {
  color: #0077cc;
  text-decoration: none;
}

.btn-primary {
  width: 100%;
  padding: 12px;
  background: #102630;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}

.btn-primary:hover {
  background: #0b1c25;
}

.or {
  text-align: center;
  margin: 15px 0;
  font-size: 14px;
  color: #666;
}

/* Social Buttons */
.social-login {
  display: flex;
  gap: 10px;
}

.social-login button {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}

.google {
  background: #db4437;
  color: #fff;
}

.apple {
  background: #000;
  color: #fff;
}
.form-error{
  position: fixed; 
  left: 50%; 
  transform: translateX(-50%);
  bottom: 24px; 
  background: #dc3545; 
  color: #fff;
  padding: 10px 16px; 
  border-radius: 8px; 
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2); 
  z-index: 9999;
   display:none;
}

/* login paage */
/* Full-page container */
.container-login{
  background: #102630; 
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Login Container (same size as signup) */
.login-container {
  display: flex;
  width: 80%;
  max-width: 1000px;
  background: #1a3445;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 5px 25px rgba(0,0,0,0.3);
}

/* LEFT Panel (form) — mirrors signup-right */
.login-left {
  flex: 1;
  background: #ffffff;
  padding: 40px 30px;
}

.login-left h2 {
  color: #102630;
  margin-bottom: 10px;
}

.signin-text {
  margin-bottom: 20px;
  font-size: 14px;
}

.signin-text a {
  color: #0077cc;
  text-decoration: none;
}

/* Form groups/inputs (same sizing) */
.login-form .form-group {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.login-form input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  outline: none;
}

.login-form input:focus {
  border-color: #0077cc;
}

/* Checkbox row (kept same class name you used) */
.checkbox {
  align-items: center; 
  margin: 15px 0;
  font-size: 13px;
}

.checkbox input {
  position: relative;
  right: 13rem;
  top: 1.2rem;
}
.checkbox label{
  margin-left: 25px;
}

.checkbox a {
  color: #0077cc;
  text-decoration: none;
}

/* Primary button (same name) */
.btn-primary {
  width: 100%;
  padding: 12px;
  background: #102630;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}

.btn-primary:hover {
  background: #0b1c25;
}

/* OR divider */
.or {
  text-align: center;
  margin: 15px 0;
  font-size: 14px;
  color: #666;
}

/* Social Buttons (same size) */
.social-login {
  display: flex;
  gap: 10px;
}

.social-login button {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}

.google {
  background: #db4437;
  color: #fff;
}

.apple {
  background: #000;
  color: #fff;
}

/* Error toast (same) */
.form-error{
  position: fixed; 
  left: 50%; 
  transform: translateX(-50%);
  bottom: 24px; 
  background: #dc3545; 
  color: #fff;
  padding: 10px 16px; 
  border-radius: 8px; 
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2); 
  z-index: 9999;
  display:none;
}

/* RIGHT Panel (image/branding) — mirrors signup-left */
.login-right {
  flex: 1;
  background: url(../images/nature.jpg) no-repeat center/cover; /* your image on the RIGHT */
  color: #fff;
  padding: 40px 30px;
  text-align: center;
}

.login-right .logo {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.login-right .tagline {
  font-size: 16px;
  margin-bottom: 30px;
}
/* password icon */
.password-field { position: relative; }
.password-field input { padding-right: 40px; }
.password-field .toggle-pass{
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; font-size: 16px; cursor: pointer; line-height: 1;
}
/* Responsiveness for both login and sign up */
/* Tablet: narrow the cards a bit */
@media (max-width: 992px){
  .signup-container,
  .login-container{
    width: 90%;
    max-width: 900px;
    gap: 20px;
  }
  .signup-right,
  .login-left{ padding: 32px 24px; }
  .signup-left,
  .login-right{ padding: 32px 24px; }
}

/* Phone: stack panels, avoid vertical clipping */
@media (max-width: 575px){

  /* let page scroll naturally instead of forcing 100vh */
  .container-sign,
  .container-login{
    min-height: 100vh;
    height: auto;
    padding: 18px 0;
  }
  @media (max-width: 600px) {
  .back-btn {
    font-size: 13px;
    margin-bottom: 15px;
  }
}

  /* stack the two panels */
  .signup-container,
  .login-container{
    flex-direction: column;      /* stack */
    width: 94%;
    max-width: 520px;
    background: transparent;     /* keep outer bg clean */
    box-shadow: none;
    gap: 14px;
  }

  /* cards become full width with their own radius/shadow */
  .signup-left,
  .signup-right,
  .login-left,
  .login-right{
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    padding: 22px 18px;
  }

  /* put the form first for LOGIN (so users see it immediately) */
  .login-container{ flex-direction: column; } /* form (left) then image (right) */

  /* shrink headings & spacing */
  .signup-right h2,
  .login-left h2{ font-size: 22px; margin-bottom: 8px; }
  .signin-text{ font-size: 13px; margin-bottom: 14px; }

  /* inputs/buttons fit smaller screens */
  .signup-form .form-group,
  .login-form .form-group{ gap: 8px; margin-bottom: 12px; }
  .signup-form input,
  .login-form input{ padding: 11px; font-size: 15px; }
  .btn,
  .btn-primary{ padding: 11px 12px; font-size: 15px; }

  /* social buttons stack on tiny screens */
  .social-login{ flex-direction: column; gap: 10px; }

  /* image panels get a fixed min-height so image isn’t cropped awkwardly */
  .signup-left,
  .login-right{
    min-height: 220px;             /* adjust if you want taller image */
    background-size: cover;
    background-position: center;
    text-align: center;
  }
  .signup-left .logo,
  .login-right .logo{ font-size: 24px; }
  .signup-left .tagline,
  .login-right .tagline{ font-size: 14px; margin-bottom: 8px; }

  
    .checkbox {
  align-items: center; 
  margin: 15px 0;
  font-size: 13px;
}

.checkbox input {
  position: relative;
  right: 10rem;
  top: 1.2rem;
}
.checkbox label{
  margin-left: 25px;
}
}

/* Very small phones */
@media (max-width: 360px){
  .signup-right h2,
  .login-left h2{ font-size: 20px; }
  .btn, .btn-primary{ font-size: 14px; padding: 10px; }
  .signup-form input, .login-form input{ font-size: 14px; }


.checkbox a {
  color: #0077cc;
  text-decoration: none;
}
}

/* =======================
   VERIFY PAGE
   ======================= */

/* Wrapper (re-use your .container-sign if you want)
   Keeping here for safety – will not conflict */
.verify-wrap,
.container-sign.verify {
  background: #102630;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Card container (same dimensions as signup) */
.verify-container,
.signup-container.verify {
  display: flex;
  width: 80%;
  max-width: 1000px;
  background: #1a3445;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 25px rgba(0,0,0,.3);
}

/* Left – image/branding (reuse your signup-left styles) */
.verify-left {
  flex: 1;
  background: url("../images/nature.jpg") center/cover no-repeat;
  color: #fff;
  padding: 40px 30px;
}
.verify-left .logo { font-size: 28px; font-weight: 700; margin-bottom: 10px; }
.verify-left .tagline { font-size: 16px; opacity: .95; }

/* Right – form panel (reuse fonts/buttons from signup) */
.verify-right {
  flex: 1;
  background: #fff;
  padding: 40px 30px;
}
.verify-right h2 { color: #102630; margin-bottom: 8px; }
.verify-right p { color: #6c757d; margin: 8px 0 18px; }

/* Back button (same style you used) */
.back-btn{
  display:inline-block;
  margin-bottom:12px;
  color:#0077cc;
  text-decoration:none;
  font-weight:600;
}
.back-btn:hover{ text-decoration:underline; }

/* Code input (single field) */
.verify-form .form-group{
  display:block;
  margin-bottom:16px;
}
.verify-form input[type="text"]{
  width:100%;
  padding:12px;
  border:1px solid #ced4da;
  border-radius:6px;
  outline:none;
  font-size:16px;
}
.verify-form input[type="text"]:focus{
  border-color:#0077cc;
}

/* Primary/secondary buttons (match your theme) */
.btn-primary{
  width:100%;
  padding:12px;
  background:#102630;
  color:#fff;
  font-size:16px;
  font-weight:700;
  border:none;
  border-radius:6px;
  cursor:pointer;
  transition:background .25s ease;
}
.btn-primary:hover{ background:#0b1c25; }

.btn{
  display:inline-block;
  padding:10px 14px;
  border:1px solid #17a2b8;
  color:#17a2b8;
  background:#fff;
  border-radius:6px;
  cursor:pointer;
  font-weight:600;
}
.btn:hover{ background:#17a2b8; color:#fff; }

/* Resend / OR line */
.verify-actions{
  margin-top:14px;
  display:flex;
  gap:10px;
  align-items:center;
}

/* Small success/error toast (optional) */
.verify-msg{
  margin-top:10px;
  font-size:.95rem;
}
.verify-msg.ok{ color:#28a745; }
.verify-msg.err{ color:#dc3545; }

/* Responsive */
@media (max-width: 900px){
  .verify-container,
  .signup-container.verify{ width: 92%; }
}
@media (max-width: 720px){
  .verify-container,
  .signup-container.verify{ flex-direction: column; }
  .verify-left{ min-height: 220px; }
}

/* Shared container styling */
.auth-box {
  max-width: 400px;
  margin: 80px auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  padding: 30px;
  text-align: center;
}

/* Title */
.auth-box h2 {
  margin-bottom: 10px;
  font-size: 1.6rem;
  color: #222;
}

/* Subtitle */
.auth-box p {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 20px;
}

/* Input fields */
.auth-box input {
  width: 90%;
  padding: 12px 15px;
  margin: 10px auto;
  border: 1px solid #ccc;
  border-radius: 6px;
  display: block;
  font-size: 0.95rem;
  transition: border 0.2s;
}

.auth-box input:focus {
  border-color: #007bff;
  outline: none;
}

/* Buttons */
.auth-box button {
  width: 90%;
  padding: 12px;
  margin-top: 15px;
  background: #007bff;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s;
}

.auth-box button:hover {
  background: #0056b3;
}

/* Back link */
.auth-box .back-btn {
  display: block;
  margin-bottom: 15px;
  font-size: 0.85rem;
  color: #007bff;
  text-decoration: none;
}

.auth-box .back-btn:hover {
  text-decoration: underline;
}