.elementor-738 .elementor-element.elementor-element-46baad7{--display:flex;}.elementor-738 .elementor-element.elementor-element-3babc3f{--display:flex;}.elementor-738 .elementor-element.elementor-element-e5b733d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-738 .elementor-element.elementor-element-2a810b7{--display:flex;}.elementor-738 .elementor-element.elementor-element-225be9d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-738 .elementor-element.elementor-element-05c4cab{--display:flex;}.elementor-738 .elementor-element.elementor-element-a12a7df{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-738 .elementor-element.elementor-element-4151eaa{--display:flex;}.elementor-738 .elementor-element.elementor-element-646378c{--display:flex;}.elementor-738 .elementor-element.elementor-element-55aaa1f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-738 .elementor-element.elementor-element-95c1761{--display:flex;}.elementor-738 .elementor-element.elementor-element-8cf7bff{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-a075600 *//* Premium Hero Section */
.premium-hero {
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-images {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; left: 0;
}

.hero-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity 2s ease;
}

.hero-image.active {
  opacity: 1;
  transform: scale(1);
}

.hero-gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; left: 0;
  background: linear-gradient(to bottom, rgba(10,30,60,0.5), rgba(10,30,60,0.2));
  z-index: 1;
}

.hero-text {
  position: relative;
  z-index: 2;
  max-width: 800px;
  text-align: center;
  color: #ffffff;
  padding: 0 20px;
}

.hero-text h1 {
  font-size: 5rem;
  font-weight: 700;
  margin-bottom: 15px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.hero-text p {
  font-size: 1.rem;
  color: #f0f0f0;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .premium-hero {
    height: 60vh;
  }
  .hero-text h1 {
    font-size: 2rem;
  }
  .hero-text p {
    font-size: 1rem;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b5a3190 *//* === WHY LITERACY MATTERS === */
.why-literacy {
  position: relative;
  background: linear-gradient(to bottom right, #eaf3ff, #ffffff);
  color: #0b2d5b;
  overflow: hidden;
  padding: 100px 0;
}

.why-literacy .container {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 1100px;
  margin: auto;
  padding: 0 20px;
}

.why-literacy h2 {
  font-size: 3rem;
  font-weight: 700;
  color: #0b2d5b;
  margin-bottom: 15px;
}

.why-literacy p {
  max-width: 750px;
  margin: 0 auto 50px;
  color: #333;
  line-height: 1.7;
}

/* === ICON CARDS === */
.literacy-icons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  position: relative;
  z-index: 2;
}

.icon-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  padding: 30px 20px;
  transition: all 0.4s ease;
  border: 2px solid transparent;
}

.icon-card i {
  font-size: 40px;
  color: #d4af37; /* gold */
  margin-bottom: 12px;
  transition: 0.4s ease;
}

.icon-card h4 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #0b2d5b;
}

.icon-card p {
  color: #555;
  line-height: 1.5;
}

/* Hover Effects */
.icon-card:hover {
  transform: translateY(-8px);
  border-color: #007bff; /* blue outline */
  box-shadow: 0 8px 22px rgba(0, 123, 255, 0.15);
}

.icon-card:hover i {
  color: #007bff;
}

/* === FLOATING BACKGROUND ICONS === */
.floating-icons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.floating-icons i {
  position: absolute;
  color: rgba(212, 175, 55, 0.25);
  font-size: calc(20px + 2vw);
  animation: floatIcons 12s infinite ease-in-out;
}

@keyframes floatIcons {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
  50% { transform: translateY(-40px) rotate(15deg); opacity: 0.6; }
  100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
}

/* Random placements */
.floating-icons i:nth-child(1) { top: 10%; left: 15%; animation-delay: 0s; }
.floating-icons i:nth-child(2) { top: 30%; left: 70%; animation-delay: 2s; }
.floating-icons i:nth-child(3) { top: 60%; left: 25%; animation-delay: 4s; }
.floating-icons i:nth-child(4) { top: 80%; left: 80%; animation-delay: 6s; }
.floating-icons i:nth-child(5) { top: 50%; left: 10%; animation-delay: 8s; }
.floating-icons i:nth-child(6) { top: 20%; left: 85%; animation-delay: 10s; }

/* Responsive */
@media (max-width: 768px) {
  .why-literacy h2 { font-size: 2rem; }
  .icon-card { padding: 25px 15px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3945fc4 */.fieldwork-section {
  position: relative;
  padding: 100px 8%;
  background: linear-gradient(180deg, #fdfdfd 0%, #f7fbff 100%);
  overflow: hidden;
  z-index: 1;
}

/* Header */
.fieldwork-header {
  text-align: center;
  margin-bottom: 60px;
}
.fieldwork-header h2 {
  font-size: 3rem;
  color: #004aad;
  margin-bottom: 15px;
  font-weight: 700;
}
.fieldwork-header p {
  color: #333;
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.rem;
}

/* Grid Layout */
.fieldwork-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
}
.field-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  border: 1px solid #e8ecf5;
}
.field-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  border-color: #004aad;
}
.field-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.field-text {
  padding: 25px;
}
.field-text h3 {
  font-size: 1.rem;
  color: #004aad;
  margin-bottom: 10px;
}
.field-text p {
  font-size: 2rem;
  color: #555;
  line-height: 1.6;
}

/* Styled text box effect */
.styled-text {
  border-left: 4px solid #004aad;
  padding-left: 20px;
  box-shadow: 0 2px 10px rgba(0, 74, 173, 0.1);
  background: #f9fbff;
  border-radius: 10px;
  transition: all 0.3s ease;
}
.styled-text:hover {
  background: #eef4ff;
  border-left-color: #ffb703;
  box-shadow: 0 4px 15px rgba(0, 74, 173, 0.15);
}

/* Floating Icons */
.floating-icons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.floating-icons i {
  position: absolute;
  color: rgba(255, 191, 0, 0.3);
  font-size: 40px;
  animation: float 12s infinite ease-in-out;
}
.floating-icons i:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.floating-icons i:nth-child(2) { top: 60%; left: 80%; animation-delay: 2s; }
.floating-icons i:nth-child(3) { top: 40%; left: 50%; animation-delay: 4s; }
.floating-icons i:nth-child(4) { top: 80%; left: 20%; animation-delay: 6s; }

@keyframes float {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-20px); opacity: 0.7; }
}

/* Wave Animation */
.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 140px;
  background: url('https://svgshare.com/i/14Rk.svg') repeat-x;
  background-size: cover;
  animation: waveMove 12s linear infinite;
  opacity: 0.3;
  z-index: 0;
}

@keyframes waveMove {
  from { background-position-x: 0; }
  to { background-position-x: 1000px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-edbae90 *//* === OUR FOCUS AREAS === */
.focus-section {
  position: relative;
  background: url('https://images.unsplash.com/photo-1509062522246-3755977927d7?auto=format&fit=crop&w=1500&q=80') center/cover no-repeat;
  color: #fff;
  padding: 100px 0;
  overflow: hidden;
}

.focus-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, rgba(5, 90, 200, 0.8), rgba(0, 150, 136, 0.8));
  z-index: 1;
}

.focus-section .container {
  position: relative;
  z-index: 2;
}

.focus-header {
  text-align: center;
  margin-bottom: 60px;
}

.focus-header h2 {
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

.focus-header p {
  color: #e0f7fa;
  max-width: 700px;
  margin: 10px auto 0;
  font-size: 1.rem;
}

.focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.focus-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 40px 25px;
  text-align: center;
  transition: all 0.4s ease;
  border: 1px solid rgba(255,255,255,0.2);
}

.focus-card i {
  font-size: 3rem;
  color: gold;
  margin-bottom: 15px;
}

.focus-card h3 {
  font-size: 2rem;
  color: #fff;
  margin-bottom: 10px;
}

.focus-card p {
  color: #d1eaff;
  font-size: 2rem;
}

.focus-card:hover {
  transform: translateY(-10px);
  border-color: #2196f3;
  box-shadow: 0 0 25px rgba(33, 150, 243, 0.4);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ddd7b87 *//* === ANIMATED WAVE BACKGROUND === */
.animated-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(120deg, #0f4c81, #1b6fc2, #f1c40f, #0f4c81);
  background-size: 400% 400%;
  animation: moveWave 25s ease-in-out infinite, floatWave 10s ease-in-out infinite;
  clip-path: polygon(0 68%, 25% 73%, 50% 65%, 75% 72%, 100% 67%, 100% 100%, 0 100%);
  z-index: 0;
  opacity: 0.35;
  filter: blur(2px);
  transform-origin: center;
}

@keyframes moveWave {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes floatWave {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(12px); }
}

/* === SWING HEADER === */
.swing-header-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 70px;
  z-index: 2;
}

.swing-box {
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #f1c40f;
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  padding: 30px 60px;
  text-align: center;
  animation: swingBox 4s ease-in-out infinite;
  backdrop-filter: blur(10px);
  transform-origin: top center;
}

@keyframes swingBox {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(2.5deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-2.5deg); }
  100% { transform: rotate(0deg); }
}

.swing-box h2 {
  font-size: 2.8rem;
  color: #0f4c81;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.swing-box p {
  font-size: 1.rem;
  color: #444;
  max-width: 650px;
  margin: 10px auto 0;
  font-weight: 500;
}

/* === COMMUNITY SECTION === */
.community-section {
  position: relative;
  background: linear-gradient(to bottom, #f7faff 0%, #eaf2fb 100%);
  padding: 130px 0;
  overflow: hidden;
  z-index: 1;
}

.community-header {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
  z-index: 2;
}

.community-header h2 {
  font-size: 3rem;
  font-weight: 900;
  color: #0f4c81;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.community-header p {
  color: #333;
  font-size: 1.2rem;
  max-width: 720px;
  margin: 18px auto;
  line-height: 1.7;
}

/* === FLOATING ICONS === */
.floating-icons i {
  position: absolute;
  font-size: 2.5rem;
  color: rgba(15, 76, 129, 0.5);
  animation: floatIcons 15s infinite ease-in-out;
  z-index: 1;
}

.floating-icons i:nth-child(1) { top: 15%; left: 12%; animation-delay: 0s; color: #3498db; }
.floating-icons i:nth-child(2) { top: 35%; right: 18%; animation-delay: 3s; color: #1e90ff; }
.floating-icons i:nth-child(3) { bottom: 25%; left: 22%; animation-delay: 6s; color: #4aa3ff; }
.floating-icons i:nth-child(4) { bottom: 10%; right: 10%; animation-delay: 9s; color: #2980b9; }

@keyframes floatIcons {
  0%,100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(-18px); opacity: 1; }
}

/* === COMMUNITY GRID === */
.community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 35px;
  position: relative;
  z-index: 2;
}

/* === COMMUNITY CARD (2 Images + Middle Text) === */
.community-card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: all 0.5s ease;
  border: 2px solid transparent;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.community-card .top-img,
.community-card .bottom-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.community-card .top-img { border-bottom: 3px solid #0f4c81; }
.community-card .bottom-img { border-top: 3px solid #f1c40f; }

.community-text {
  padding: 30px 20px;
}

.community-text h3 {
  font-size: 3rem;
  color: #0f4c81;
  margin-bottom: 12px;
  font-weight: 700;
}

.community-text p {
  font-size: 2rem;
  color: #444;
  line-height: 1.7;
}

/* === HOVER EFFECT === */
.community-card:hover {
  transform: translateY(-10px);
  border-color: #f1c40f;
  box-shadow: 0 10px 28px rgba(241,196,15,0.3);
}

.community-card:hover .top-img,
.community-card:hover .bottom-img {
  transform: scale(1.05);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .swing-box h2 { font-size: 2rem; }
  .community-header h2 { font-size: 2.2rem; }
  .community-text h3 { font-size: 1.25rem; }
  .community-text p { font-size: 0.95rem; }
  .community-card .top-img, .community-card .bottom-img { height: 150px; }
}/* End custom CSS */