body {
            font-family: 'Source Sans Pro', sans-serif;
        }
        .header-gradient {
            background: linear-gradient(90deg, #003049, #003087);
        }
         .hero-bg {
            background-color:#0559f5;
            background: linear-gradient(135deg, #003087, #0077B6, #00A7E1); 
         }
        
        
        .text-yakp-blue { color: #0077B6; }
        .bg-yakp-blue { background-color: #0077B6; }
        .hover-bg-yakp-blue:hover { background-color: #005f91; }
        #map {
            height: 200px;
            width: 100%;
        }
        .navbar-brand h1 {
            font-family: 'Lora', serif;
            font-weight: 700;
            font-size: 2rem;
        }
        .navbar-brand small {
            font-family: 'Source Sans Pro', sans-serif;
            font-weight: 600;
            font-size: 0.7rem;
        }

        p.bannerText{
            color:white;
            text-shadow:2px 2px black; 
            height:140px; 
            font-size:x-large; 
            transition: opacity 0.5s ease-in-out;
            font-weight: bold; 
            margin: 40px;
        }

        .programs-wrapper { display: flex; gap: 1rem; flex-wrap: wrap; margin:10px;}
        .program-card { flex: 1; min-width: 250px; background: #f8f9fa; padding: 1rem; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: transform 0.3s ease; }
        .program-card:hover { transform: translateY(-5px); }
        
        .program-card1 { background-color: #022647; color:white}
        .program-card2 { background-color: #804c04; color:white}
        .program-card3 { background-color: #0c5228; color:white}

        .program-card1 { background: linear-gradient(135deg, #0056b3 40%, #00b4d8 100%); color: white; }
        /*.program-card2 { background: linear-gradient(135deg, #ff9800 60%, #ffd700 100%); color: #222; }
        .program-card3 { background: linear-gradient(135deg, #43cea2 60%, #185a9d 100%); color: white; }
        */
        .program-card2 { background: linear-gradient(135deg, #893e01 30%, #f1c345 100%); color: white; }
        .program-card3 { background: linear-gradient(135deg, #2d8a6c 30%, rgb(91, 218, 218) 100%); color: white; }


        
        .section {
      padding: 30px 30px;
      margin: auto;
    }
    .section h2 {
      font-family: 'Lora', serif;
      font-size: 2.5rem;
      margin-bottom: 20px;
      color: #003049;
    }
    .section p {
      font-size: 1.1rem;
      margin-bottom: 20px;
    }
    .horizontal-container {
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
    }
    .horizontal-section {
      flex: 1;
      min-width: 300px;
    }

     .what-we-do1 {padding:5px; background: linear-gradient(45deg, #e6f3ff, white)}
     .what-we-do2 {padding:5px;  background: linear-gradient(45deg, #faf8ff, white)} 
     .what-we-do3 {padding:5px;  background: linear-gradient(45deg, #e6f3ff, white)}
     .what-we-do4 {padding:5px;  background: linear-gradient(45deg, #faf8ff, white)}
        
    
    .navbar-nav .nav-link {
      font-weight: 600;
      font-size: 1rem;
      transition: color 0.2s;
    }
    .navbar-nav .nav-link:hover {
      color: #ffd700 !important;
    }

    .about-card {
  background: none;
  border-radius: 0;
  box-shadow: none;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.about-subcard {
  background: linear-gradient(120deg, #e6f3ff 80%, #faf8ff 100%);
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}
.vision-card {
  border-left: 4px solid #0077B6;
}
.whatwedo-card {
  border-left: 4px solid #f1c345;
}
.about-subcard h4 {
  font-family: 'Lora', serif;
}
.about-subcard ul {
  padding-left: 1.2em;
}



.vision-card {
  background: linear-gradient(120deg, #e6f3ff 80%, #f8f9fa 100%);
  color: #003049;
  border-left: 4px solid #0077B6;
}
.whatwedo-card {
  background: linear-gradient(120deg, #fffbe6 80%, #faf8ff 100%);
  color: #804c04;
  border-left: 4px solid #f1c345;
}
.vision-card h4,
.whatwedo-card h4 {
  color: inherit;
}
.about-subcard ul,
.about-subcard p {
  color: inherit;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: #0056b3;   /* or #222 for dark, #ffd700 for gold */
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  padding: 8px;
}

.carousel-control-prev,
.carousel-control-next {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.carousel-inner {
  height: 430px; /* or whatever suits your design */
}
.carousel-item {
  height: 100%;
}

@media (min-width: 768px) {
  .carousel-vertical-controls {
    display: none !important;
  }
}

.footer-link {
  color: #fff;
  text-decoration: none;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1rem;
  transition: color 0.2s;
}
.footer-link:hover {
  color: #ffd700;
  text-decoration: underline;
}

p.contactSuccess {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 420px;
  background: linear-gradient(120deg, #faf8ff 2%, #fffbe6 100%);
  font-weight: bolder;
  font-size: xx-large;
}