:root {
  --blue: #0a5df0;
  --deep-blue: #0050d6;
  --muted: #6b7280;
  --card-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  --container: 1200px;
  --radius: 10px;
  --header-height: 64px;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
html,
body {
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  height: 100%;
  margin: 0;
  color: #111;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
::selection {
  background: #3ddc97;  /* highlight color */
  color: #000;         /* text color when selected */
}

/* .wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}

header {
 
  position: relative;
  z-index: 100;
  padding: 15px 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-height);
}

.brand {
  padding-top: 7px;
}

.left-buttons {
  display: flex;
  align-items: center;
  padding-top: 10px;
}

.left-buttons a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0px 27px;
  border-radius: 6px;
  color: #fff;
  font-weight: 500;
  font-size: 15px;
}

.logo {
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
 
  background: #183191;
  color: #fff;
  font-weight: 700;
  padding: 15px 30px 15px 30px;
  border-radius: 8px;
  font-size: 35px;
 
  border-radius: 33px;
  width: 160px;
  height: 45px;
}

.icon img {
  width: 18px;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  padding-top: 27px;
}


.menu-toggle {
  display: block; 
}


@media (min-width: 1024px) {
  .menu-toggle {
    display: none;
  }
}

nav {
  display: flex;
  gap: 50px; 
  align-items: center;
  padding-top: 40px;
}

.nav-item {
  position: relative; 
}

.nav-item > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 0;
  color: #fff;
  font-size: 17px;
  text-decoration: none;
  padding-right: 20px; 
}


.nav-item.has-dropdown > a::after {
  content: "\2335";
  font-size: 14px;
  color: #fff;
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s ease;
  pointer-events: none;
}

.nav-item.has-dropdown:hover > a::after {
  transform: translateY(-50%) rotate(180deg);
}


.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 10px 0px 10px 10px;
  min-width: 235px;
  z-index: 1000;
}


.nav-item.has-dropdown:hover > .submenu,
.nav-item.has-dropdown .submenu:hover {
  display: block;
}


.submenu li {
  list-style: none;
}

.submenu li a {
  display: block;
  padding: 8px 16px;
  color: #333;
  text-decoration: none;
}

.submenu li a:hover {
  background-color: #f0f0f0;
} */

/* --- CSS VARIABLES & GLOBAL STYLES --- */
:root {
  --header-height: 10px; /* Reduced height for centered alignment */
}

body {
  font-family: "Inter", sans-serif;
  background-color: #f4f7fa;
  padding-top: var(--header-height); /* Space for fixed header */
}
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* --- HEADER STRUCTURE (FIXED & TRANSPARENT) --- */
.site-header {
  position: fixed;
  top: 30px;
  left: 0;
  width: 100%;
  /* Semi-transparent white background */
  background-color: transparent;
  z-index: 40;
}

/* --- TOPBAR STYLES (ALIGNMENT FIX) --- */
.topbar {
  display: flex;
  align-items: center; /* Ensures vertical centering */
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-height);
  min-width: 1300px; 
}

/* ALIGNMENT FIX: Removed padding-top from these elements */
.brand {
  padding-top: 0;
}

.left-buttons {
  display: flex;
  align-items: center;
  padding-top: 0;
}

/* .icon{
          height: 70px;
          color: #38a169;
          stroke: #38a169;
        }

        .icon img{
          width: 18px;
          height: auto;
          display: inline-block;
          vertical-align: middle;
          padding-top: 27px;
        } */
/* CONTACT BUTTON (NO YELLOW) */
.left-buttons a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 6px;
  color: #ffffffff; /* Dark text for light header */
  background-color: transparent; /* Transparent background */
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.2s;
}
.left-buttons a:hover {
  color: white;
  border-color: #fff;
}

/* Icon styling cleanup */
.left-buttons .icon {
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px; /* Give the container a defined size */
  height: 18px;
}

/* SVG specific styles */
.left-buttons a svg {
  fill: #213ca5; /* Blue color for the icon, matching your image */
  transition: fill 0.2s;
}

.left-buttons a:hover svg {
  fill: white; /* Icon color on hover (when background becomes dark) */
}
/* Logo Styles */
.logo {
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* background: #183191;  */
  color: #fff; /* Keeps white text for contrast against blue box */
  font-weight: 700;
  /* padding: 15px 30px; */
  border-radius: 33px;
  font-size: 35px;
  width: 160px;
  height: 45px;
  line-height: 1;
}
.logo a {
  color: inherit;
  text-decoration: none;
}

/* Icon styling cleanup */
.left-buttons .icon {
  margin-right: 0;
  font-size: 18px;
  line-height: 1;
}
.left-buttons img {
  display: none;
}

/* --- DESKTOP NAVIGATION (>= 1024px) --- */
.site-header nav {
  display: flex;
  gap: 38px;
  align-items: center;
  margin-top: 25px;
}

.nav-item {
  position: relative;
}

.nav-item > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 0;
  color: #fff; /* DARK TEXT for light/transparent header */
  font-size: 17px;
  text-decoration: none;
  padding-right: 14px;
  transition: opacity 0.2s;
}
.nav-item > a:hover {
  opacity: 0.8;
}

/* Arrow styling (Now dark for contrast) */
.nav-item.has-dropdown > a::after {
  content: "\2335";
  font-size: 14px;
  color: #fff; /* DARK ICON for light/transparent header */
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s ease;
  pointer-events: none;
}

.nav-item.has-dropdown:hover > a::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Submenu styling (White background is fine) */
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 10px 0px 10px 10px;
  min-width: 235px;
  z-index: 1000;
  list-style: none;
  border-radius: 8px;
}

.nav-item.has-dropdown:hover > .submenu {
  display: block;
}

.submenu li a {
  display: block;
  padding: 8px 16px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s;
  border-radius: 4px;
}

.submenu li a:hover {
  background-color: #f0f0f0;
}

/* Hamburger Menu Toggle Display Logic (Now dark for contrast) */
.menu-toggle {
  display: block;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10000;	
  background: none;
  border: none;
  color: #fefefe;
  font-size: 40px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: transform 0.3s;
}

@media (min-width: 1024px) {
  .menu-toggle {
    display: none;
  }
  .site-header nav {
    display: flex;
   padding-top:30px !important;
  }
}

/* --- MOBILE SIDEBAR STYLES (Max Width 1023px) --- */
@media (max-width: 1023px) {
 .site-header nav {
/*     display: none; */
	  display: flex;
    gap: 38px;
    margin-top: 25px;
  }
  .menu-toggle.is-open {
    font-size: 32px;
    transform: rotate(45deg);
  }

  /* Sidebar container is BLUE */
/*   #mainNav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 80%;
    max-width: 300px;
    background-color: #000; /* Keep blue for sidebar contrast */
/*     box-shadow: -5px 0 15px rgba(0, 0, 0, 0.4);
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
    z-index: 30;
    padding-top: var(--header-height);
    display: block;
    overflow-y: auto;
  }

  #mainNav.is-open {
    transform: translateX(0);
  } */ 
	.menu-toggle {
  position: absolute;
  top: 44px;
  right: 20px;
  z-index: 100000;   /* higher than Google Translate */
  background: none;
  border: none;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}
.top-right-translator {
  position: absolute;
  top: 20px;
  right: 80px;  /* not overlapping menu toggle */
  z-index: 9999;
}

/* ================= MOBILE SIDEBAR (FINAL FIX) ================= */
@media (max-width: 1023px) {

  /* Desktop nav must NOT affect mobile */
  .site-header nav {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

/*   #mainNav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    max-width: 85vw;
    height: 100vh;
    background: #000;
    z-index: 99999;
    transition: right 0.35s ease;
  }

  #mainNav.is-open {
    right: 0;
  } */

  #mainNav .nav-item {
    display: block;
    border-bottom: 1px solid rgba(255,255,255,0.15);
  }

  #mainNav a {
    color: #fff;
    padding: 15px 20px;
    display: block;
  }

  .submenu {
    position: static;
    display: none;
    background: #111;
    box-shadow: none;
  }

  .nav-item.open > .submenu {
    display: block;
  }
}



@media (max-width: 1023px) {
  #mainNav {
    position: fixed;
    top: 0;
    left: -100vw;
    width: 80vw;
    max-width: 320px;
    height: 100vh;
    background: #000;
    z-index: 99999;
    transition: left 0.35s ease;
  }
  #mainNav.is-open { left: 0; }
  html, body { overflow-x: hidden; }
}


/*   /* Links are WHITE inside the blue sidebar */
/*   #mainNav .nav-item {
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  } */

/*   #mainNav a {
    color: white; 
    padding: 15px 20px;
    width: 100%;
    font-size: 17px;
  } */

  /* Mobile Dropdown Toggle Icon (White icon inside blue sidebar) */
/*   .has-dropdown > a::after {
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    transition: transform 0.3s;
    padding-right: 0;
    color: white; /* WHITE ICON for contrast against blue sidebar */
/*   } */

/*   .nav-item.open > a::after {
    content: "−";
  }
  .nav-item.has-dropdown:hover > a::after {
    transform: translateY(-50%);
  } */ 
  /* Mobile Dropdown Content */
/*   .submenu {
    position: static;
    display: none;
    background-color: #0045c4;
    box-shadow: none;
    padding: 0;
    min-width: unset;
  }

  .nav-item.open > .submenu {
    display: block;
  } */

  .submenu li a {
    padding: 10px 30px;
    font-size: 14px;
    color: #fff;
  }
  .submenu li a:hover {
    background-color: #003080;
  }

  #mainNav > div {
    width: 100%;
  }
}

/* --- Overlay for Mobile --- */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 20;
  display: none;
  cursor: pointer;
}

.menu-overlay.is-open {
  display: block;
}

/* Sample Content for Scroll Demonstration */
.content-area {
  padding: 20px;
}
/* ------------------hero section------------------ */

.hero {
  width: 100%;
  min-height: 60vh;
  /* min-height: -webkit-fill-available; */
  height: 98vh;
  overflow: hidden;
  position: relative; /* restore this for layering if needed */
}

.hero .container {
  width: 100%;
  height: 100%;
  position: relative;
}

.hero .container img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}

.hero .wrap {
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  position: relative;
  z-index: 1;
  max-width: 90%;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  /* Center vertically (roughly) */
  top: 50%;
  transform: translateY(-50%);
  padding: 0 16px;
}

/* Responsive font sizing */
.hero h1 {
  font-size: clamp(1.5rem, 6vw, 3rem);
  margin-bottom: 0.5em;
  font-size: 43px;
}

.hero p {
  /* font-size: clamp(1rem, 3vw, 1.25rem); */
  font-size: 20px;
  margin-bottom: 1em;
  letter-spacing: 1px;
}

/* Search box / form inside hero */
.hero .searchbox {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 18px 25px 18px 25px;
  background-color: #fff;
  width: fit-content;
  margin: 0 auto;
  border-radius: 5px;
}

.hero .searchbox .zip {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
  justify-content: center;
  /* background-color: #fff; */
  border-radius: 6px;
  /* padding: 24px 100px; */
  /* border-radius: 10px;
  padding: 20px 24px; */
}

.hero .searchbox .zip h4 {
  margin: 0;
  font-size: 17px;
  color: #363636;
  font-weight: 300;
}

.hero .searchbox select,
.hero .searchbox input {
  min-width: 120px;
  flex: 1 1 auto;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #d2d0d0;
  color: #363636;
  /* font-size: 14px; */
  font-size: 17px;
  font-weight: 400;
  color: #737273;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.hero-txt h2 {
  font-size: 20px;
  font-weight: 400;
}

.hero .searchbox button {
  flex: 0 0 auto;
  padding: 15px 34px;
  background: var(--blue);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  font-size: 15px;
}

@media (max-width: 768px) {
  .hero {
    height: auto;
    min-height: 80vh; /* safer than 95vh */
    padding: 60px 0; /* more breathing room top & bottom */
  }

  .hero .wrap {
    position: relative;
    top: 74px;
    transform: none;
    margin-top: 0;
    max-width: 95%;
    padding: 0 16px 40px; /* top-bottom padding, e.g. 40px bottom */
  }

  .hero h1 {
    font-size: clamp(1.25rem, 5vw, 2rem);
  }

  .hero p {
    font-size: clamp(0.9rem, 3vw, 1.1rem);
  }

  .hero .searchbox {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    width: 100%;
  }

  .hero .searchbox .zip {
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 8px;
    width: 100%;
  }

  .hero .searchbox select,
  .hero .searchbox input,
  .hero .searchbox button {
    width: 100%;
  }
}

/* Assuming your header is something like <header class="site-header"> */
.site-header {
  background-color: transparent; /* make it transparent */
  position: absolute; /* so it floats over the hero */
  width: 100%;
  top: 30px;
  left: 0;
  z-index: 999; /* ensure it's above the hero image/text */
  border: none; /* remove any border if present */
  box-shadow: none; /* remove any shadow if present */
}

/* If you want it sticky (fixed after scroll) */
.site-header.sticky {
  background-color: rgba(
    0,
    0,
    0,
    0.8
  ); /* or any semi-transparent color you like after scroll */
  position: fixed;
  /* other styles like transition for smoothness */
  transition: background-color 0.3s ease;
}

/*---------------------------------- Cards---------------------------------------- */

/* .section {
  padding: 62px 0;
  background-color: rgb #fcfcfc (252 252 252);
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.card {
  background: #fff;
  border-radius: 10px;
  padding: 18px;
  box-shadow: var(--card-shadow);
  min-height: 220px;
}
.card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 12px;
} */
/* Global reset / useful baseline */
*,
*::before,
*::after {
  box-sizing: border-box;
}

.section {
  padding: 40px 0;
  /* background-color: #f9f9f9; */
}

.section h1 {
  font-weight: 500;
  font-size: 32px;
  color: rgb(45 47 61);
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  /* min card width 280px, will stretch to fill space */
  gap: 30px;
  justify-content: center;
  padding: 0 16px; /* some horizontal padding so cards don’t touch edges on mobile */
  max-width: 1300px; /* optional: limit full width on large screens */
  margin: 0 auto;
}

.card {
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* subtle shadow */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  transition: transform 1s ease, box-shadow 1s ease; /* smooth hover animation */
}

.card:hover {
  transform: translateY(-8px) scale(1.03); /* lift card slightly */
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2); /* stronger shadow on hover */
}

.card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  /* transition: transform 0.3s ease; */
  /* If you want a fixed height for the image portion, you can use a container or specify height and object-fit:cover */
}
/* .card:hover img {
  transform: scale(1.05);
} */

.card-txt {
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  padding: 24px; /* reduce padding for better mobile use */
  color: rgb(142, 142, 149);
  font-weight: 300;
  font-size: 15px;
  /* margin-bottom removed; use inside content spacing */
}

.card-txt h3 {
  font-size: 19px;
  font-weight: 500;
  color: rgb(45, 47, 61);
  margin: 12px 0 12px 0;
}

.card-txt p {
  margin: 35px 0 35px 0;
  font-size: 18px;
  color: #464545;
  line-height: 1.5;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.card-txt button {
  background-color: rgb(0, 79, 239);
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  margin-left: 0;
  font-size: 14px;
}

.card-txt button a.more {
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 6px 12px 6px 12px;
  font-size: 13px;
  font-weight: 600;
}

/* hover effect for button */
.card-txt button:hover {
  background-color: #0056b3;
}

/* Responsive tweaks */
@media (max-width: 1024px) {
  .card-txt {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .cards {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
  }
  .card-txt {
    padding: 16px;
    font-size: 14px;
  }
  .card-txt h3 {
    font-size: 17px;
  }
  .card-txt button {
    padding: 8px 16px;
  }
}

@media (max-width: 480px) {
  .cards {
    grid-template-columns: 1fr;
  }
  .card-txt {
    padding: 12px;
    font-size: 14px;
  }
  .card-txt h3 {
    font-size: 16px;
  }
  .card-txt button {
    width: 100%; /* full width button on very small screens */
    text-align: center;
  }
}

/* .callout {
  display: flex;
  gap: 18px;
  align-items: center;
  background: #fff;
  padding: 18px;
  border-radius: 8px;
  margin: 28px auto;
  max-width: 920px;
  box-shadow: var(--card-shadow);
}
.callout img {
 
  height: auto;
  border-radius: 8px;
  object-fit: cover;
} */

/* CSS */
.appointment-box {
  display: flex;
  flex-wrap: wrap; /* allow stacking on small screens */
  background: #fff; /* white bg or whatever suits your design */
  border: 1px solid #ddd; /* subtle border */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  /* width: 900px; */
}

.appointment-content {
  flex: 1 1 300px; /* grow, shrink, base width */
  padding: 2rem;
  /* padding: 50px 0px 50px 0px; */
  /* padding: 40px 50px 40px 50px; */
  margin-top: inherit;
}

.appointment-content h3 {
  margin-top: 0;
    font-size: 24px;
    color: #0066ff;
    padding-bottom: 18px;
    font-weight: 500;
}

.appointment-content p {
  line-height: 1.6;
  margin: 1rem 0;
  color: #393636;
  font-size: 18px;
  font-weight: 200;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
.appointment-content h2{
  color: #393636;
  font-size: 19px;
  font-weight: 200;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
.appointment-cta {
  margin-top: 1.5rem;
}

.btn-book {
  display: inline-block;
  background-color: #0066ff; /* blue or your brand color */
  color: white;
  text-decoration: none;
  padding: 15px 35px 15px 35px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 18px;
}

.btn-book:hover {
  background-color: #0052cc;
}

.appointment-image {
  flex: 0 0 200px; /* fixed width for image portion */
  overflow: hidden;
}

.appointment-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive tweak: on narrow screens, stack image below content */
@media (max-width: 600px) {
  .appointment-box {
    flex-direction: column;
  }
  .appointment-image {
    flex: none;
    width: 100%;
  }
}

.callout {
  display: flex;
  gap: 18px;
  align-items: center;
  background: #fff;
  padding: 30px 0px 30px 35px;
  border-radius: 8px;
  margin: 28px auto;
  max-width: 920px;
  box-shadow: var(--card-shadow);
  height: 190px; /* Fixed height */
}

.callout .text {
  flex: 1; /* Takes up remaining space */
}

.callout img {
  width: 35%;
  height: auto;
  object-fit: cover;
  /* border-radius: 8px; */
  margin-left: 100px;
}

.card-txt2 h3 {
  color: #0050d6;
  font-weight: 500;
  font-size: 34px;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
}

.card-txt2 p {
  padding: 2px;
}

.card-txt22 {
  padding: 0px 0px 20px 0px;
}
.card-txt22 button {
  background-color: rgb(0, 79, 239);
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  margin-left: 0;
  font-size: 14px;
}

.card-txt22 button a.more {
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 0px 8px 0px 8px;
  font-size: 20px;
  font-weight: bold;
  /* border-radius: 0px; */
}

/* ===============================
   Responsive Design
   =============================== */
@media (max-width: 768px) {
  .callout {
    flex-direction: column;
    padding: 20px;
    min-height: auto;
    text-align: center;
  }

  .callout img {
    width: 70%;
    margin: 0px 0 0 0;
  }

  .card-txt2 h3 {
    font-size: 24px;
  }

  .card-txt22 button {
    width: 100%;
  }
}

/*---------------------Why--------------------------------- */

.main {
  background-color: #fcfcfc;
}

/* ===============================
   Feature Section Container
   =============================== */
.feature-section {
  text-align: center;
  /* padding: 2rem 1rem; */
}

.feature-section h2 {
  font-size: 2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 3rem;
}

/* ===============================
   Feature Cards Container
   =============================== */

.feature-container {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  justify-content: center;
  /* gap: 136px; */
  gap: 25px;
  padding: 0px 0 70px 0;
  box-sizing: border-box;
  width: fit-content;
  margin: 0 auto;
  /* box-sizing: border-box; */
}

/* ===============================
   Individual Feature Card
   =============================== */
.feature-card {
  flex: 1 1 280px; /* Flex-grow, flex-shrink, base width */
  max-width: 300px; /* Prevent cards from growing too large */
  text-align: center;
  padding: 1rem;
  box-sizing: border-box;
}

/* ===============================
   Icon Styling
   =============================== */
.feature-icon-container {
  display: inline-block;
  font-size: 4.5rem;
  color: #0050d6;
  margin-bottom: 1rem;
}

.feature-card {
  width: 100%;
  max-width: 400px; /* increases allowed width */
  margin: 0 auto; /* center horizontally */
  padding: 1.5rem; /* optional: add some padding */
  box-sizing: border-box;
}

.feature-card h4 {
  font-size: 20px;
  font-weight: 400;
  color: #333;
  margin-bottom: 0.5rem;
}

.feature-card h4 .underline {
  display: block;
  width: 50%;
  height: 4px;
  background-color: #50dfa1;
  margin: 0.5rem auto 0;
}

.feature-card p {
  font-size: 18px;
  color: #666;
  line-height: 1.5;
  margin: 0 auto;
  width: 344px;
  font-weight: 300;
	padding: 0 140px;
}

/* ===============================
   Responsive Adjustments
   =============================== */
@media (max-width: 768px) {
  .feature-section h2 {
    font-size: 1.75rem;
    margin-bottom: 2rem;
  }

  .feature-card {
    flex: 1 1 100%; /* Stack cards vertically */
    max-width: 100%;
    margin: 0 auto;
  }

  .feature-icon-container {
    font-size: 3.5rem;
  }

  .feature-card h4 {
    font-size: 1.1rem;
  }

  .feature-card h4 .underline {
    width: 30%;
  }
}

@media (max-width: 480px) {
  .feature-section h2 {
    /* font-size: 1.5rem; */
    margin-top: 120px;
  }

  .feature-icon-container {
    font-size: 3rem;
  }

  .feature-card p {
    font-size: 0.95rem;
  }
}

/* ===============================
   Video Section Styling
=============================== */
.video-section {
  text-align: center;
  padding: 60px 20px;
  background-color: #f7f7f9;
}

.video-section .wrap h2 {
  font-size: 32px;
  margin-bottom: 40px;
}

.video-wrapper {
  display: flex;
  justify-content: center;
}

.video-wrapper iframe {
  width: 100%;
  /* Increased from 560px to 800px for more width */
  max-width: 800px;
  /* Increased from 315px to 450px for more length (height) */
  height: 450px;
  border: none;
}

@media (max-width: 600px) {
  .video-section {
    padding: 30px 10px; /* Reduce padding on mobile */
  }

  .video-wrapper iframe {
    /* Use 95% of the screen width to provide some margin */
    width: 95%;
    /* Remove max-width constraint for smaller screens */
    max-width: 100%;
    /* Calculate height to maintain a 16:9 aspect ratio (95% * 9 / 16 ≈ 53.4vw) */
    height: calc(95vw * 9 / 16);
    /* Set a minimum height to ensure it's not too small on very small screens */
    min-height: 200px;
  }
}
/*---------------------form--------------------------------- */

.form-txt {
  text-align: center;
}
.form-txt h2 {
  font-size: 32px;
  font-weight: 400;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
.form-txt p {
  font-size: 18px;
  font-weight: 300;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
/* .form-wrap {
  padding: 20px 70px;
} */
.contact {
  background: linear-gradient(180deg, var(--blue), var(--deep-blue));
  color: #fff;
  padding: 48px 0;
	margin-top: -17px;
}
.contact .wrap {
  /* display: grid; */
  grid-template-columns: 1fr 480px;
  gap: 28px;
  align-items: start;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
/* .form-control {
  display: flex;
  flex-direction: column;
}
input,
select,
textarea {
  padding: 10px;
  border-radius: 6px;
  border: 0;
}
textarea {
  min-height: 120px;
} */

.form-container {
  max-width: 1000px;
  line-height: 1.7;
  margin: 0 auto;
  /* background-color: #1565c0; */
  padding: 30px;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  /* border-radius: 10px; */
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.form-field {
  display: flex;
  flex-direction: column;
}

.form-field.full-width {
  grid-column: 1 / -1;
}

.form-field label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 5px;
	text-align: left;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 16px;
  background-color: #fff;
  color: #333;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.form-field textarea {
  min-height: 150px;
  resize: vertical;
}

.consent-checkbox {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

.consent-checkbox input[type="checkbox"] {
  margin-top: 4px;
  margin-right: 10px;
}

.consent-checkbox a {
  color: #32eb42;
  text-decoration: underline;
}

.submit-button {
  display: flex;
  justify-content: center;
  padding-top: 30px;
}

.submit-button button {
  background-color: #0050d6;
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: 5px;
  border: 1px solid #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-button button:hover {
  background-color: #003399;
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------4 card ------------------------- */

.content-section {
  text-align: center;
  padding: 0px 20px;
  border-radius: 10px;
  max-width: 1200px;
  margin: 0 auto;
}

.content-section h2 {
  font-size: 32px;
  font-weight: 500;
  color: #333;
  margin-bottom: 65px;
}

/* Cards container - now 3 cards per row */
.cards-container {
  /* CHANGED: From repeat(4, 1fr) to repeat(3, 1fr) for 3 columns */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Card styles (no changes needed here, keeping the original) */
.berlitz-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding-bottom: 20px;
  text-align: left;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.berlitz-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.berlitz-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-body h3 {
  font-size: 20px;
  font-weight: 500;
  color: #2c2a2a;
  margin: 10px 0 10px 0;
  text-align: left;
}

.card-body p {
  font-size: 18px;
  color: #6c6c6c;
  line-height: 1.5;
  flex-grow: 1;
  text-align: left;
  font-weight: 200;
  padding: 0 55px 0 0px;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.card-body button {
  background-color: #3a7eef;
  color: #fff;
  border: none;
  padding: 17px 28px;
  margin: 15px 0 1px 0;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
  align-self: flex-start;
}

.card-body button:hover {
  background-color: #003399;
}

/* ===============================
    Responsive Layout (No changes needed, 2-card and 1-card breakpoints still work)
=============================== */
@media (max-width: 992px) {
  .cards-container {
    /* 2 cards per row on tablets/small desktops */
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .cards-container {
    /* 1 card per row on mobile */
    grid-template-columns: 1fr;
  }

  .card-body button {
    width: 100%;
    text-align: center;
  }
}

/* ---------------------------black section--------------------- */
/* --- Berlitz "Why Learn" Section Styling --- */

.berlitz-why-learn-section {
  background-color: #292935;
  padding: 50px 20px; /* reduced from 80px */
  color: #f0f0f0;
  font-family: sans-serif;
}

.berlitz-why-learn-section .container {
  max-width: 1300px; /* wider container */
  margin: 0 auto;
  text-align: center;
}

.berlitz-why-learn-section .section-header {
  margin-bottom: 30px; /* reduced spacing */
}

.berlitz-why-learn-section h2 {
  font-size: 32px; /* smaller heading */
  margin-bottom: 8px;
  font-weight: 400;
}

.berlitz-why-learn-section .section-header p {
  font-size: 18px;
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 30px; /* vertical spacing */
  column-gap: 60px;
}

.feature-item {
  padding: 20px; /* reduced padding */
  text-align: center;
}

.feature-item h3 {
  font-size: 19px;
  font-weight: bold;
  color: #fff;
  margin-top: 10px;
  margin-bottom: 12px;
  display: inline-block; /* underline only as wide as text */
  border-bottom: 3px solid #7ffcff;
  padding-bottom: 4px;
}

.feature-item p {
  font-size: 18px;
  line-height: 1.5;
}

.icon-placeholder {
  font-size: 32px; /* smaller icon */
  margin-bottom: 8px;
}

/* ------------------------------------------- */
/* MEDIA QUERY for Mobile Devices (1-column layout) */
@media (max-width: 768px) {
  .features-grid {
    /* Switch to a single column on smaller screens */
    grid-template-columns: 1fr;
    gap: 30px; /* Reduce vertical gap */
  }

  .berlitz-why-learn-section h2 {
    font-size: 30px;
  }

  .berlitz-why-learn-section {
    padding: 50px 10px;
  }
}
/* ===============================
   Responsive Breakpoints
=============================== */
@media (max-width: 768px) {
  .berlitz-how-to-learn h2 {
    font-size: 24px;
    margin-bottom: 30px;
  }

  .features-container {
    gap: 20px;
  }

  .feature-card {
    flex: 1 1 100%; /* Cards take full width on tablets */
    max-width: 100%;
  }

  .feature-card h3 {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .berlitz-how-to-learn {
    padding: 30px 15px;
  }

  .berlitz-how-to-learn h2 {
    font-size: 22px;
  }

  .feature-card .icon {
    width: 60px;
    height: 60px;
  }

  .feature-card p {
    font-size: 13px;
    padding: 0 50px 0 50px;
  }
}
/* ---------------------------end of black section--------------------- */

/* ---------------------------FAQ--------------------- */
.berlitz-faq-section {
  padding: 50px 20px;
  max-width: 1000px;
  margin: auto;
  text-align: center;
  line-height: 1.7;
  /* background-color: #f9f9f9; */
}

.berlitz-faq-section h2 {
  font-size: 32px;
  color: #1a1a1a;
  margin-bottom: 50px;
  font-weight: 500;
}

.faq-list {
  list-style: none;
  padding: 0;
  text-align: left;
}

.faq-item {
  border-bottom: 1px solid #ccc;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  cursor: pointer;
  font-size: 20px;
  color: #121212;
  font-weight: 400;
}

.faq-icon {
  font-size: 13px;
  transition: transform 0.3s ease;
  color: #0c0c0d;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  font-size: 1rem;
  color: #777;
  line-height: 1.6;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-answer a {
  border-bottom: 2px solid #7ffcff;
}

.faq-answer .first-col {
  display: flex;
  gap: 140px;
  list-style: none;
}

.faq-answer .second-col {
  display: flex;
  gap: 475px;
  list-style: none;
  background: #e8eff5;
}

.faq-item.active .faq-answer {
  max-height: 560px;
  padding: 20px;
}

.faq-item.active .faq-icon {
  transform: rotate(-180deg);
}
/* ---------------------------END OF FAQ--------------------- */
/* Footer Base */
.berlitz-footer {
  background: #f9f9f9;
  padding: 60px 20px 20px;
  color: #333;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  border-top: 1px solid #eee;
}

/* Columns container */
.footer-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto 40px;
}

/* Each column */
.footer-column h4 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: #000;
}

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

.footer-column ul li {
  margin-bottom: 10px;
}

.footer-column ul li a {
  text-decoration: none;
  font-size: 15px;
  color: #666;
  transition: color 0.2s;
}

.footer-column ul li a:hover {
  color: #0050d6;
}

/* Bottom Section */
.footer-bottom {
  border-top: 1px solid #eee;
  padding-top: 20px;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

/* Social Icons */
.footer-content {
  max-width: 1200px; /* Adjust as needed for your main content width */
  margin: 0 auto; /* Center the content */
  display: flex;
  justify-content: space-between; /* Pushes the two main parts to the edges */
  align-items: center;
  padding: 0 20px; /* Small horizontal padding */
  min-height: 50px; /* Ensures a minimum height if content is sparse */
}

/* --- Social Media Icons Styling --- */
.social-links a {
  color: #a0a0a0; /* Light grey color for icons */
  font-size: 18px; /* Size of the icons */
  margin-right: 15px; /* Space between icons */
  text-decoration: none; /* Remove any underline */
  transition: color 0.3s;
}

.social-links a:hover {
  color: #777; /* Slightly darker grey on hover */
}

/* --- Copyright and Legal Links Styling --- */
.legal-info {
  color: #a0a0a0; /* Light grey text color */
  font-size: 14px; /* Text size */
  font-family: Arial, sans-serif; /* Common, clear font */
}

.legal-info a {
  color: #a0a0a0; /* Link color matches the text */
  text-decoration: none; /* No underline for the links */
  margin-left: 5px; /* Space out the links */
  transition: color 0.3s;
}

.legal-info a:hover {
  color: #777; /* Slightly darker grey on hover */
  text-decoration: underline; /* Add underline on hover */
}

/* Responsive */
@media (max-width: 992px) {
  .footer-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .footer-columns {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .footer-social-icons a {
    margin-right: 10px;
  }
}
/* |----------------------------------------------------
| MOBILE RESPONSIVENESS (Media Query)
|----------------------------------------------------
*/
@media (max-width: 768px) {
  /* 1. Change layout to stack vertically */
  .footer-content {
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center them on the vertical axis (which is now the screen height) */
  }

  /* 2. Add space between the stacked elements */
  .social-links {
    margin-bottom: 20px; /* Add space below the social icons */
  }

  /* 3. Center all text and icons */
  .social-links,
  .legal-info {
    width: 100%; /* Make them take full width */
    text-align: center; /* Center the text and icons */
  }

  /* 4. Adjust icon spacing for the centered layout */
  .social-links a {
    margin: 0 10px; /* Use smaller, equal margins on both sides of the icons */
  }

  /* 5. Adjust legal info for wrapping (if the text is long) */
  .legal-info {
    line-height: 1.6; /* Improve readability when text might wrap */
  }
}
/* ------------------footer------------------------------ */

/* Learn / How / FAQ / Footer */
.learn {
  background: #f7f7f9;
  padding: 36px 0;
}
.learn .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.how {
  /* background: #22252b; */
  color: #fff;
  /* padding: 36px 0; */
}
.how .items {
  display: flex;
  gap: 24px;
  justify-content: space-between;
}
.how .box {
  flex: 1;
  padding: 14px;
  text-align: center;
}
/* .faq {
  padding: 28px 0;
} */
/* footer {
  padding: 42px 0;
  background: #fbfbfb;
  color: var(--muted);
}
footer .cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
} */

/* Responsive tweaks */
@media (max-width: 1000px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .learn .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact .wrap {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .wrap {
    padding: 0 12px;
  }
  nav {
    display: none;
    position: absolute;
    right: 12px;
    top: var(--header-height);
    flex-direction: column;
    background: rgba(0, 0, 0, 0.9);
    padding: 12px;
    border-radius: 8px;
    min-width: 180px;
    /* padding-top: 40px; */
  }
  nav.show {
    display: flex;
  }
  .menu-toggle {
    display: inline-block;
  }
  .brand-left {
    gap: 12px;
  }
  .left-buttons {
    gap: 6px;
  }
  .hero {
    padding: 56px 0;
  }
  .hero h1 {
    font-size: clamp(18px, 6vw, 24px);
  }
  .cards {
    grid-template-columns: 1fr;
  }
  .why {
    grid-template-columns: 1fr;
  }
  .learn .grid {
    grid-template-columns: 1fr;
  }
  .how .items {
    flex-direction: column;
  }
  footer .cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* small visual fixes */
body {
  overflow-x: hidden;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.breadcumb-wrapper {
  background: url("images/cover.jpg") top center / cover no-repeat;
  position: absolute;
  /* opacity: 0.8; */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  left: 0px;
  top: 0px;
  right: 0;
  bottom: 0;
}

.breadcumb-wrapper::before {
  content: "";
  position: absolute;
  inset: 0; /* shorthand for top/right/bottom/left:0 */
  /* background: rgba(
    111,
    111,
    111,
    0.4
  ); */
  /* dark overlay for better text contrast */
}
.breadcumb-wrapper img {
  display: none; /* hide the inline img */
}

.breadcumb-menu {
  max-width: 100%;
  padding: 0;
  margin: 28px 0 -0.5em 0;
  list-style-type: none;
  position: relative;
}

.breadcumb-menu li {
  display: inline-block;
  margin-right: 3px;
  padding-right: 5px;
  list-style: none;
  position: relative;
}

.breadcumb-menu li:after {
  content: "\f30b";
  position: relative;
  margin-left: 10px;
  font-weight: 500;
  font-size: 20px;
  color: #dbd3d3;
  font-family: var(--icon-font);
}

.breadcumb-menu li:last-child {
  padding-right: 0;
  margin-right: 0;
  color: #dbd3d3;
}

.breadcumb-menu li:last-child:after {
  display: none;
}

.breadcumb-menu li,
.breadcumb-menu a,
.breadcumb-menu span {
  white-space: normal;
  color: inherit;
  word-break: break-word;
  font-weight: 400;
  font-size: 20px;
  color: #dbd3d3;
}

.breadcumb-title {
  color: var(--title-color);
  margin: -0.2em 0 -0.18em 0;
  line-height: 1.1;
  font-weight: 600;
}

.breadcumb-title-white {
  color: white;
  margin: -0.2em 0 -0.18em 0;
  line-height: 1.1;
  font-weight: 600;
  /* padding-top: 32px; */
}
@media screen and (max-width: 600px) {
  header {
    flex-direction: column;
    gap: 0.5rem;
  }
}

.wrap {
  /* background-color: #fff; */
}

/* Large devices */
@media (max-width: 1199px) {
  .breadcumb-wrapper {
    padding: 130px 0;
  }
  .breadcumb-menu {
    margin: 25px 0 -0.5em 0;
  }
  .breadcumb-menu li,
  .breadcumb-menu a,
  .breadcumb-menu span {
    font-size: 16px;
  }
}

/* Medium devices */
@media (max-width: 991px) {
  .breadcumb-wrapper {
    padding: 120px 0;
  }
}

/* Small devices */
@media (max-width: 767px) {
  .breadcumb-wrapper {
    padding: 100px 0;
  }
}

/* Extra small devices */
@media (max-width: 575px) {
  .breadcumb-title {
    font-size: 34px;
  }
}
/* .hero h4 {
  color: #000;
}
.searchbox .zip {
  display: flex;
  background-color: #fff;
  border-radius: 10px;
  padding: 15px 35px 15px 35px;
} */
/* ------------------book now----------------- */
.wrap .txt1 {
  font-size: 20px;
  padding-bottom: 50px;
  text-align: center;
  font-weight: 400;
  line-height: 1.5;
}

.wrap .txt1 a {
  /* text-decoration: underline; */
  border-bottom: 4px solid #7ffcff;
}

/* ----------------youtube-------------------- */
/* --- Two-Column Layout --- */
.two-column-layout {
  display: flex; /* Enable Flexbox */
  gap: 115px; /* Space between the card and the video */
  align-items: flex-start; /* Aligns items to the top (important for the video height) */
  margin-top: 30px; /* Space below the H2 */
}

/* --- Catalog Card Styles (Left Side) --- */
/* --- Catalog Card Container --- */
.catalog-card-exact {
  /* Dimensions and appearance of the card itself */
  max-width: 350px; /* A typical card width for single display */
  border: 1px solid #e0e0e0;
  border-radius: 8px; /* Slightly rounded corners */
  overflow: hidden; /* Important to keep the image corners rounded */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Subtle shadow */
  background-color: #ffffff; /* White background */
}

/* --- Card Image Area --- */
.card-image-exact {
  /* Ensures the image fills the top part */
  width: 100%;
  height: auto;
}

.card-image-exact img {
  /* Make sure the image is responsive within its container */
  width: 100%;
  display: block;
  /* Remove any space below the image */
  vertical-align: middle;
}

/* --- Card Text Content Area --- */
.card-content-exact {
  /* Padding to match the space inside the card (looks generous) */
  padding: 25px 30px;
  text-align: left;
}

/* --- Heading (H3) Style --- */
.card-content-exact h3 {
  /* Font size and weight matching the image */
  font-size: 22px;
  font-weight: 600; /* Semi-bold look */
  line-height: 1.3;
  color: #333333; /* Dark text color */
  margin-top: 0;
  margin-bottom: 15px; /* Space between title and paragraph */
  text-align: left;
  padding-bottom: 9px;
}

/* --- Paragraph (P) Style --- */
.card-content-exact p {
  font-size: 17px;
  line-height: 1.5;
  color: #666666;
  margin-top: 0;
  margin-bottom: 25px;
  text-align: left;
}

/* --- 'View Catalog' Button Style --- */
.btn-catalog-exact {
  /* The distinctive bright blue button */
  background-color: #0066ff; /* A strong, primary blue */
  color: white;
  padding: 12px 24px; /* Generous padding */
  text-decoration: none;
  border-radius: 4px; /* Slightly rounded corners */
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  /* Optional: for a smoother transition on hover */
  transition: background-color 0.3s ease;
}

.btn-catalog-exact:hover {
  background-color: #0056e0; /* Slightly darker blue on hover */
}
/* --- YouTube Video Styles (Right Side) --- */
.video-wrapper {
  flex: 1;
  position: relative;
  padding-bottom: 524px;
  /* padding-top: 0px; */
  height: 0;
  overflow: hidden;
  max-width: 70%;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px; /* Optional: adds rounded corners to the video */
}

/* --- Responsive Adjustments for Mobile --- */
@media (max-width: 768px) {
  .two-column-layout {
    flex-direction: column; /* Stack the card and video vertically */
    gap: 20px;
  }

  .catalog-card,
  .video-wrapper {
    max-width: 100%; /* Take up the full width */
  }

  .video-wrapper {
    /* The padding-bottom maintains the aspect ratio, no need to change it */
    padding-bottom: 56.25%;
  }
}

/* ---------------------find your course------------------- */

/* --- Section Container --- */
.find-course-section {
  padding: 60px 20px; /* Generous padding top/bottom */
  background-color: #ffffff; /* Assuming a white background */
}

.find-course-wrap {
  max-width: 1000px; /* Controls the overall width of the content */
  margin: 0 auto;
  text-align: center; /* Center-aligns the H2 and P elements */
}

/* --- Header and Description Styles --- */
.section-title {
  font-size: 32px; /* Adjust size to match the image's prominence */
  font-weight: 400;
  color: #333333;
  margin-top: 0;
  margin-bottom: 10px;
  padding-bottom: 20px;
}

.section-description {
  font-size: 18px;
  font-weight: 200;
  line-height: 1.5;
  color: #666666;
  max-width: 700px; /* Constrain description width for better readability */
  margin: 0 auto 40px; /* Center and add bottom margin */
}

/* --- Two-Column Grid (Flexbox) --- */
/* --- Grid Container (Two-Column Layout) --- */
.course-card-grid {
  display: flex;
  justify-content: center; /* Center the cards if the container is wide */
  gap: 220px; /* Space between the two cards */
  max-width: 1000px; /* Set a reasonable max width for the grid */
  margin: 40px auto; /* Center the entire section */
  padding: 0 20px; /* Add padding for smaller screens */
}

/* --- Individual Card Item --- */
.course-card-item {
  flex: 1 1 45%; /* Allows the card to grow/shrink, taking about 45% each */
  background-color: #ffffff;
  border: 1px solid #e0e0e0; /* Subtle border matching the image style */
  border-radius: 4px; /* Slight rounding */
  overflow: hidden; /* Ensures the image doesn't break the border-radius */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle shadow */
  max-width: 450px; /* Prevent cards from getting too wide on huge screens */
}

/* --- Image Wrapper --- */
.card-image-wrapper {
  /* Set a fixed aspect ratio or height for consistent card tops */
  width: 100%;
  /* 3:2 Aspect Ratio (e.g., 66.66% padding-bottom) for a consistent image height */
  padding-bottom: 66.66%;
  position: relative;
  overflow: hidden;
}

.card-image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* CRITICAL: Ensures the image covers the area without distortion, often cropping slightly */
  object-fit: cover;
  display: block;
  padding: 35px 25px 5px 25px;
}

/* --- Content Area (Title and Link) --- */
.card-content-area {
  padding: 25px 30px; /* Generous padding inside the card */
}

/* --- Heading Style --- */
.card-heading {
  font-size: 20px;
  font-weight: 500; /* Bold */
  line-height: 1.4;
  color: #333333;
  margin-top: 0;
  margin-bottom: 20px; /* Space above the read more link */
}
.card-heading a{
	border-bottom:4px solid #7ffcff ;
}
/* --- "Read More" Link Style --- */
.read-more-link {
  font-size: 14px;
  font-weight: 600;
  color: #008060; /* Teal/Green color from the image */
  text-decoration: none;
  border-bottom: 1px solid #008060; /* Underline effect */
  padding-bottom: 3px;
  display: inline-block;
  transition: color 0.2s, border-color 0.2s;
}

.read-more-link:hover {
  color: #005640;
  border-color: #005640;
}

/* --- Responsive Layout for Mobile --- */
@media (max-width: 768px) {
  .course-card-grid {
    flex-direction: column; /* Stack cards vertically */
    gap: 20px;
    padding: 0 15px;
  }

  .course-card-item {
    /* On mobile, cards take the full width */
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* ------------------------------------------------ */
/* adult page  */
/* ------------------------------------------------ */
span .icon .prev {
  position: absolute;
  top: 33px;
  /* right: 10px; */
  left: 190px;
}
.hero-section {
  position: relative;
  background: url("images/hero-cover.jpg") top center / cover no-repeat;
  height: 513px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-co {
  position: relative;
  background: url("https://emapp.co.in/WD/AT/berlitz/wp-content/uploads/2025/11/corporate.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-on {
  position: relative;
  background: url("images/online-cover.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-inner {
  position: relative;
  background: url("https://emapp.co.in/WD/AT/berlitz/wp-content/uploads/2025/12/blog-inner.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-cv {
  position: relative;
  background: url("https://emapp.co.in/WD/AT/berlitz/wp-content/uploads/2025/12/italian-cv.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-on-adult {
  position: relative;
  background: url("https://emapp.co.in/WD/AT/berlitz/wp-content/uploads/2025/11/on-adult.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-learn {
  position: relative;
  background: url("images/learn-cover.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-ins {
  position: relative;
  background: url("https://emapp.co.in/WD/AT/berlitz/wp-content/uploads/2025/12/ins.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-seminar {
  position: relative;
  background: url("https://emapp.co.in/WD/AT/berlitz/wp-content/uploads/2025/11/seminar.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-va {
  position: relative;
  background: url("images/va-cover.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-about {
  position: relative;
  background: url("https://emapp.co.in/WD/AT/berlitz/wp-content/uploads/2025/12/about.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-ex {
  position: relative;
  background: url("images/ex-cover.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-la {
  position: relative;
  background: url("images/language-cover.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-tr {
  position: relative;
  background: url("https://emapp.co.in/WD/AT/berlitz/wp-content/uploads/2025/11/training.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}

.hero-section-why-br {
  position: relative;
  background: url("https://emapp.co.in/WD/AT/berlitz/wp-content/uploads/2025/12/why-br.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}


.hero-section-pr {
  position: relative;
  background: url("images/professional-cover.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-inter {
  position: relative;
  background: url("images/inter-cover.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-bro {
  position: relative;
  background: url("https://emapp.co.in/WD/AT/berlitz/wp-content/uploads/2025/12/bro.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-service {
  position: relative;
  background: url("images/service-cover.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-on {
  position: relative;
  background: url("images/online-cover2.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-kid {
  position: relative;
  background: url("images/kid.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-trai1 {
  position: relative;
  background: url("images/training-1.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-grp {
  position: relative;
  background: url("https://emapp.co.in/WD/AT/berlitz/wp-content/uploads/2025/11/group-cover-1.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-prv {
  position: relative;
  background: url("https://emapp.co.in/WD/AT/berlitz/wp-content/uploads/2025/11/prv-cover.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}

.hero-section-sp {
  position: relative;
  background: url("http://localhost/berlitz/wp-content/uploads/2025/11/spanish-cover.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-method {
  position: relative;
  background: url("https://emapp.co.in/WD/AT/berlitz/wp-content/uploads/2025/12/method-cover.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-arab {
  position: relative;
  background: url("https://emapp.co.in/WD/AT/berlitz/wp-content/uploads/2025/11/arab-cover-1.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-en {
  position: relative;
  background: url("https://emapp.co.in/WD/AT/berlitz/wp-content/uploads/2025/11/en.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-spanish {
  position: relative;
  background: url("https://emapp.co.in/WD/AT/berlitz/wp-content/uploads/2025/11/spanish-1.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-section-shop-bg {
  position: relative;
  background: url("https://emapp.co.in/WD/AT/berlitz/wp-content/uploads/2025/12/shop-bg.jpg") top center / cover no-repeat;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-shop-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-on::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-co::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-va::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-learn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-about::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-ex::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-ins::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-la::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-tr::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-why-br::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-bro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-pr::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-inter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-cv::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-method::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-service::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-on::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-seminar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-kid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-trai1::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-grp::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-prv::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-sp::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-arab::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-on::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-co::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-va::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-learn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-ex::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-la::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-tr::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-pr::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-inter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-service::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-on::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-kid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-trai1::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-grp::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-prv::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-en::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-spanish::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-section-on-adult::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 57%);
}
.hero-content {
  position: relative;
  z-index: 1;
}

.hero-content h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 10px;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.hero-content p {
  font-size: 18px;
  font-weight: 500;
  color: #ddd;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.breadcrumb {
  background: #fff;
  text-align: left;
  padding: 1px 70px;
  font-size: 14px;
  color: #666;
  display: flex;
}

.breadcrumb a {
  color: #787676;
  text-decoration: none;
  font-size: 16px;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.breadcrumb a:hover {
  text-decoration: none;
  color: #2e8aec;
}
.breadcrumb p {
  color: #000000;
  font-size: 16px;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
/* ----------------------------------------------------
 * Responsive Breadcrumb Styles
 * ---------------------------------------------------- */

/* Tablets */
@media (max-width: 1024px) {
  .breadcrumb {
    padding: 6px 40px;
  }

  .breadcrumb a,
  .breadcrumb p {
    font-size: 15px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .breadcrumb {
    padding: 8px 20px;
    flex-wrap: wrap;           /* Allow wrapping */
    row-gap: 6px;
  }

  .breadcrumb a,
  .breadcrumb p {
    font-size: 14px;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .breadcrumb {
    padding: 8px 15px;
  }

  .breadcrumb a,
  .breadcrumb p {
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .hero-section {
    height: 60vh;
  }
  .hero-section-co {
    height: 60vh;
  }
  .hero-content h1 {
    font-size: 30px;
  }
}

/* ----------center text---------- */

/* Base Styles (for Desktop/Default) */
section.centered {
  /* Adjusted for better responsiveness on larger screens */
  width: 80%;
  max-width: 1000px; /* Setting a comfortable max-width */
  margin: 0 auto;

  /* Core styles */
  text-align: justify; /* Text alignment for desktop */
  font-size: 18px;
  color: #5c5959;
  background-color: #fff;
  font-weight: 300;
  line-height: 1.7;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  padding: 40px 0; /* Adding some vertical padding for separation */
}
section.centered-online {
  /* Adjusted for better responsiveness on larger screens */
  width: 80%;
  max-width: 918px; /* Setting a comfortable max-width */
  margin: 0 auto;

  /* Core styles */
  text-align: justify; /* Text alignment for desktop */
  font-size: 18px;
  color: #5c5959;
  background-color: #fff;
  font-weight: 300;
  line-height: 1.7;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  padding: 40px 0; /* Adding some vertical padding for separation */
}
/* Heading and Paragraph Styles */
.centered a {
  text-decoration: none; /* Ensure text decoration is removed before border-bottom */
  border-bottom: 4px solid rgb(80 223 161);
  /* padding-bottom: 10px; */
}
.centered-online a {
  text-decoration: none; /* Ensure text decoration is removed before border-bottom */
  border-bottom: 4px solid rgb(80 223 161);
  padding-bottom: 2px;
}
.centered h2 {
  color: #000;
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 1.2em;
}
.centered-online h2 {
  color: #000;
  font-size: 32px;
    font-weight: 400;
  margin-bottom: 1.2em;
  text-align: center;
}
.centered h3 {
  color: #000;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 1em;
}
.centered h1 {
  color: #424040;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 1em;
}
.centered p {
  font-size: 18px;
  margin-bottom: 1.5em; /* Ensure paragraphs have vertical space */
}
.centered-online p {
  font-size: 18px;
  margin-bottom: 1.5em;
  color: #4a4a4a;
  line-height: 1.8;
}
.center p {
  font-size: 18px;
  margin-bottom: 65px;
  margin-top: -30px;
  color: #7f8383;
}

/* --- Basic Reset and Container --- */
/*
|----------------------------------------------------------
| BASE STYLES (Mobile-First)
| Optimized for screens <= 767px
|----------------------------------------------------------
*/

.language-learning-section {
  /* Background color (light gray/off-white) */
  background-color: #fff;
  /* REDUCED PADDING for mobile screens */
  padding: 30px 20px;
  font-family: Arial, sans-serif;
  color: #333;
}

.content-container {
  max-width: 900px;
  margin: 0 auto;
}
.content-container-ad {
  max-width: 1300px;
  margin: 0 auto;
  text-align: left;
  font-family: "Source Sans Pro", sans-serif;
}

/* --- Heading Styling --- */
.language-learning-section h2 {
  /* Smaller font size for better fit on mobile */
  font-size: 24px;
  font-weight: 700;
  margin-top: 15px;
  margin-bottom: 8px;
  font-family: "Poppins", sans-serif;
  color: #1f1f1f;
  line-height: 1.2; /* Tighter line height for mobile */
}

/* --- Paragraph/List Styling --- */
.language-learning-section p,
.language-learning-section ul,
.language-learning-section li {
  /* Consistent, readable font size for mobile */
  font-size: 16px;

  font-family: "Source Sans Pro", sans-serif;
  color: #373333;
  font-weight: 400;
  max-width: 100%;
}

.language-learning-section p {
  margin-bottom: 18px;
  color: #484848;
  font-weight: 200;
  line-height: 1.8 !important;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

/* List details */
.language-learning-section ul {
  list-style: none;
  padding-left: 0;
  margin-top: 5px;
}

.language-learning-section li {
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
  color: #5a5757;
  line-height: 2.5 !important;
  font-weight: 200;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Custom bullet point remains the same */
.language-learning-section li::before {
  content: "•";
  /* color: #787878; */
  color: #388abf;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  /* margin-left: -1em; */
  position: absolute;
  left: 0;
}

/* --- Highlighted Element Styling --- */
.language-learning-section .highlighted-li {
  border-bottom: 2px solid #5cb85c;
  display: inline-block;
  line-height: 1.6;
}

/*
|----------------------------------------------------------
| MEDIA QUERY for Tablet and Desktop Screens (min-width: 768px)
| Restores original larger text sizes and more generous padding
|----------------------------------------------------------
*/

@media (min-width: 768px) {
  .language-learning-section {
    /* More comfortable padding for tablets/laptops */
    padding: 40px 60px;
  }

  .language-learning-section h2 {
    /* Restore original larger font size for desktop */
    font-size: 32px;
    margin-top: 20px;
    margin-bottom: 10px;
    line-height: 1.3;
    font-weight: 400;
  }

  .language-learning-section p,
  .language-learning-section ul,
  .language-learning-section li {
    /* Restore slightly larger font size for desktop readability */
    font-size: 18px;
    line-height: 1.65;
  }

  .language-learning-section p {
    margin-bottom: 20px;
  }
}

/*
|----------------------------------------------------------
| MEDIA QUERY for Very Large Desktop Screens (min-width: 1200px)
| Restores the very wide original padding
|----------------------------------------------------------
*/

@media (min-width: 1200px) {
  .language-learning-section {
    /* Restore the original very large padding for a wide look */
    padding: 30px 232px;
  }
}
/* ---------------------------------- */
/* Mobile Responsiveness (Media Query)*/
/* ---------------------------------- */

@media (max-width: 768px) {
  section.centered {
    /* Critical Change: Use nearly full width on mobile devices */
    width: 90%;

    /* Use left alignment for better readability on small screens */
    text-align: left;

    /* Add horizontal padding to prevent content touching the edges */
    padding: 30px 15px;

    /* Slightly reduce the base font size for mobile comfort */
    font-size: 16px;
  }

  /* Adjust Heading Sizes for Mobile */
  .centered h2 {
    font-size: 24px;
  }

  .centered h3 {
    font-size: 26px;
  }

  .centered p {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  /* Smaller screens may need slightly smaller fonts */
  .centered h2 {
    font-size: 20px;
  }

  .centered h3 {
    font-size: 22px;
  }
}

/* ======================
   LANGUAGE LEARNING SECTION
   ====================== */
.language-learning-section {
  background-color: #fff;
  padding: 30px 20px;
  font-family: Arial, sans-serif;
  color: #333;
}

.content-container,
.content-container-ad {
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
  font-family: "Source Sans Pro", sans-serif;
}

/* --- Heading Styling --- */
.language-learning-section h2 {
  font-size: 24px;
  font-weight: 700;
  margin-top: 15px;
  margin-bottom: 8px;
  font-family: "Poppins", sans-serif;
  color: #1f1f1f;
  line-height: 1.2;
}

/* --- Paragraph/List Styling --- */
.language-learning-section p,
.language-learning-section ul,
.language-learning-section li {
  font-size: 16px;
  font-family: "Source Sans Pro", sans-serif;
  color: #373333;
  font-weight: 400;
  max-width: 100%;
}

.language-learning-section p {
  margin-bottom: 18px;
  color: #484848;
  font-weight: 200;
  line-height: 1.8;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

/* List styling */
.language-learning-section ul {
  list-style: none;
  padding-left: 0;
  margin-top: 5px;
}

.language-learning-section li {
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
  color: #5a5757;
  line-height: 2.0;
  font-weight: 200;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Custom bullet */
.language-learning-section li::before {
  content: "•";
  color: #388abf;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  position: absolute;
  left: 0;
}

/* Highlighted element (underline) */
.language-learning-section .highlighted-li {
  border-bottom: 2px solid #5cb85c;
  display: inline-block;
  line-height: 1.6;
}

/* --- Tablet and Desktop Screens --- */
@media (min-width: 768px) {
  .language-learning-section {
    padding: 40px 60px;
  }

  .language-learning-section h2 {
    font-size: 32px;
    margin-top: 20px;
    margin-bottom: 10px;
    line-height: 1.3;
    font-weight: 400;
  }

  .language-learning-section p,
  .language-learning-section ul,
  .language-learning-section li {
    font-size: 18px;
    line-height: 1.65;
  }

  .language-learning-section p {
    margin-bottom: 20px;
  }
}

/* Very Large Screens */
@media (min-width: 1200px) {
  .language-learning-section {
    padding: 30px 232px;
  }
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
  .language-learning-section {
    padding: 20px 15px;
  }

  .language-learning-section h2 {
    font-size: 22px;
  }

  .language-learning-section p,
  .language-learning-section li {
    font-size: 16px;
    line-height: 1.6;
  }

  .language-learning-section li::before {
    left: 0;
  }

  .language-learning-section .highlighted-li {
    display: inline-block;
    border-bottom: 2px solid #5cb85c;
  }
}

/* Extra Small Screens (Phones <480px) */
@media (max-width: 480px) {
  .language-learning-section h2 {
    font-size: 20px;
  }

  .language-learning-section p,
  .language-learning-section li {
    font-size: 15px;
    line-height: 1.5;
  }

  .language-learning-section ul {
    padding-left: 15px;
  }
}

/* ---------card section------------ */

/* --- General Container/Reset --- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Section Styling --- */
.course-selection {
  padding: 60px 0;
  background-color: #f6f6f6;
  text-align: center;
}

.section-title{
	text-align: center;
    font-size: 32px;
    font-weight: 400;
   margin-bottom: 10px;
    color: #1d1d1f;
    margin-top: 28px;
	}
/* --- Cards Container --- */
/* Container: responsive grid */
.course-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* auto-adjust columns */
  gap: 150px;
  width: 100%;
  padding: 0px 140px;
  box-sizing: border-box;
  justify-content: center; /* center cards if fewer on a row */
}

/* Card */
.course-card {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease;
}

.course-card:hover {
  transform: translateY(-3px);
}

/* Image */
.card-image-box {
  width: 100%;
  height: 200px; /* desktop height */
  overflow: hidden;
}

.course-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content */
.card-content {
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #333;
}

.card-content p {
  font-size: 14px;
  color: #555;
  line-height: 1.4;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 900px) {
  .card-image-box {
    height: 180px; /* smaller images on tablet */
  }
  .card-title {
    font-size: 16px;
  }
  .card-content p {
    font-size: 13px;
  }
}

@media (max-width: 600px) {
  .course-cards-container {
    grid-template-columns: 1fr; /* 1 card per row */
    gap: 12px;
    padding: 10px;
  }

  .card-image-box {
    height: 150px; /* shrink image height on mobile */
  }

  .card-content {
    padding: 12px;
  }

  .card-title {
    font-size: 15px;
  }

  .card-content p {
    font-size: 12px;
  }
}

/* ------------online btn--------------- */

.custom-btn {
  display: inline-block;
  background-color: rgb(0 79 239); /* blue background */
  color: #fff; /* white text */
  width: fit-content;
  padding: 12px 18px; /* vertical / horizontal padding */
  margin:50px 0px 4px 20px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border: none;
  border-radius: 4px; /* rounded corners */
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.custom-btn:hover {
  background-color: #0969cf; /* darker blue on hover */
}
.btn-find-out-more {
  background-color: #006cff; /* bright blue, adjust as needed */
  color: #ffffff;
  border: none;
  padding: 12px 24px; /* vertical / horizontal padding */
  font-size: 1rem; /* adjust font size */
  font-weight: 500;
  border-radius: 4px; /* adjust corner roundness */
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: inline-block;
  text-decoration: none;
  text-align: left;
  width: 151px;
}

.btn-find-out-more:hover {
  background-color: #0053cc; /* darker shade on hover */
}

/* ------------------card animation--------------- */
.course-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.card-image-box img {
  transition: transform 0.3s ease;
}

.course-card:hover .card-image-box img {
  transform: scale(1.02);
}

.custom-btn {
  transition: transform 0.2s ease;
}

.custom-btn:hover {
  transform: translateY(-2px);
}

/* --- Media Query for Responsiveness --- */
@media (max-width: 1100px) {
  /* Two cards per row on mid-size screens */
  .course-card {
    flex: 1 1 calc(50% - 15px);
  }
}

@media (max-width: 650px) {
  /* One card per row on small screens */
  .course-cards-container {
    gap: 25px;
  }
  .course-card {
    flex: 1 1 100%; /* Full width */
  }
}

/* -----------------book now -------------------- */

/* General styling for the section */
section {
  padding: 40px 20px;
  background-color: #f9f9f9; /* Light background for the section */
}

.appointment-box1 {
  display: flex; /* Use flexbox for layout */
  justify-content: center; /* Center the box horizontally */
  align-items: center; /* Vertically align items in the center */
  max-width: 900px;
  height: 180px; /* Base height for desktop view */
  margin: 0 auto; /* Center the box on the page */
  background-color: #0a5bff; /* Primary blue background for the inner box */
  border-radius: 8px; /* Slightly rounded corners */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  overflow: hidden; /* Ensures image corners are also rounded */
}
.appointment-content1 {
  flex: 1; /* Allows content to take available space */
  text-align: left; /* Align text to the left */
  padding: 10px 0px 25px 30px; /* Desktop padding */
}
.appointment-content1 h3 {
  font-family: Arial, sans-serif; /* Example font */
  font-size: 28px;
  color: #fff;
  margin-bottom: 20px;
  line-height: 1.2;
}
.appointment-image1 {
  flex-shrink: 0; /* Prevents image from shrinking */
  width: 45%; /* Image takes 45% of the box width */
  max-height: 400px; /* Limit image height */
  overflow: hidden; /* Ensures image is clipped if taller */
}
.appointment-cta1 {
  margin-top: 15px; /* Space above the button */
}

.btn-book1 {
  display: inline-block;
  background-color: #004fef;
  color: #ffffff;
  padding: 8px 10px;
  border-radius: 0px;
  text-decoration: none;
  border: 2px solid white;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.btn-book1:hover {
  /* Updated from .btn-book:hover */
  background-color: #003aae; /* Darker blue on hover for btn-book1 */
}
.appointment-image1 img {
  width: 100%; /* Make image fill its container */
  height: 100%; /* Make image fill its container */
  object-fit: cover; /* Crop image to cover the area without distorting */
  display: block; /* Remove extra space below image */
  padding: 0px 0px 0px 100px; /* Excessive desktop padding - will be fixed for mobile */
}

.appointment-box2 {
  display: flex; /* Use flexbox for layout */
  justify-content: center; /* Center the box horizontally */
  align-items: center; /* Vertically align items in the center */
  max-width: 990px;
  height: 200px; /* Base height for desktop view */
  margin: 0 auto; /* Center the box on the page */
  background-color: #fff; /* Primary blue background for the inner box */
  border-radius: 8px; /* Slightly rounded corners */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  overflow: hidden; /* Ensures image corners are also rounded */
}
.appointment-content2 {
  flex: 1; /* Allows content to take available space */
  text-align: left; /* Align text to the left */
  padding: 10px 10px 25px 18px;
}
.appointment-content2 h3 {
  font-family: Arial, sans-serif; /* Example font */
  font-size: 28px;
  color: #004fef;
  margin-bottom: 20px;
  line-height: 1.2;
}
.appointment-image2 {
  flex-shrink: 0; /* Prevents image from shrinking */
  width: 47%; /* Image takes 45% of the box width */
  max-height: 400px; /* Limit image height */
  overflow: hidden; /* Ensures image is clipped if taller */
}
.appointment-image2 img {
  width: 100%; /* Make image fill its container */
  height: 100%; /* Make image fill its container */
  object-fit: cover; /* Crop image to cover the area without distorting */
  display: block; /* Remove extra space below image */
  padding: 0px 0px 0px 100px; /* Excessive desktop padding - will be fixed for mobile */
}
.btn-book2 {
  display: inline-block;
  background-color: #004fef;
  color: #ffffff;
  padding: 7px 10px;
  border-radius: 0px;
  text-decoration: none;
  border: 2px solid white;
  font-family: Arial, sans-serif;
  font-size: 17px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}
.btn-book2:hover {
  /* Updated from .btn-book:hover */
  background-color: #003aae; /* Darker blue on hover for btn-book1 */
}
/* -------- MOBILE FRIENDLY RESPONSIVE DESIGN -------- */
@media (max-width: 768px) {
  .appointment-box2 {
    flex-direction: column; /* Stack vertically */
    height: auto; /* Allow natural height */
    max-width: 95%;
    margin: 20px auto;
  }

  .appointment-image2 {
    width: 100%; /* Full width for image */
    height: 200px; /* Control height */
    order: -1; /* Move image above text */
  }

  .appointment-image2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0; /* Remove left padding */
  }

  .appointment-content2 {
    text-align: center; /* Center text for mobile */
    padding: 20px 15px;
  }

  .appointment-content2 h3 {
    font-size: 22px;
    margin-bottom: 15px;
  }

  .btn-book2 {
    font-size: 15px;
    padding: 8px 16px;
  }
}

@media (max-width: 480px) {
  .appointment-content2 h3 {
    font-size: 20px;
  }

  .btn-book2 {
    font-size: 14px;
    padding: 7px 14px;
  }

  .appointment-image2 {
    height: 180px;
  }
}

.btn-book1-co {
  display: inline-block;
  background-color: #004fef;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 0px;
  text-decoration: none;
  /* border: 2px solid white; */
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  transition: background-color 0.3s ease;
}
.btn-book1-co:hover {
  /* Updated from .btn-book:hover */
  background-color: #003aae; /* Darker blue on hover for btn-book1 */
}

.btn-book1 .arrow {
  display: inline-block;
  margin-left: 8px; /* Added margin-left for better separation */
  /* Animation Properties */
  transition: transform 0.3s ease-out; /* Smooth transition for the movement */

  /* Initial state (no transformation) */
  transform: translateX(0);
}
/* Arrow Movement on Hover */
.btn-book1:hover .arrow {
  transform: translateX(5px); /* Move the arrow 5 pixels to the right */
}

/* --- Mobile-Friendly Adjustments ---
*/

@media (max-width: 768px) {
  .appointment-box1 {
    flex-direction: column; /* Stack items vertically on smaller screens */
    height: auto; /* Allow height to adjust based on content */
    text-align: center; /* Center text on smaller screens */
  }

  .appointment-content1 {
    padding: 30px 20px; /* Adjusted horizontal padding for better fit */
    order: 2; /* Put content below the image on small screens */
    flex-basis: auto; /* Let content dictate height */
  }

  .appointment-content1 h3 {
    font-size: 24px;
    margin-bottom: 15px;
  }

  .appointment-cta1 {
    margin-top: 10px; /* Reduced margin */
    margin-bottom: 10px; /* Added bottom margin */
  }

  .appointment-image1 {
    width: 100%; /* Image takes full width on smaller screens */
    max-height: 250px; /* Slightly reduced image height for small devices */
    order: 1; /* Put image above content on small screens */
    border-radius: 8px 8px 0 0; /* Match outer box top radius, remove bottom radius */
  }

  .appointment-image1 img {
    /* KEY CHANGE: Removed excessive left padding for mobile view */
    padding: 0;
    border-radius: 0; /* Image itself shouldn't have radius if container does */
  }

  /* Adjust button properties for the stacked layout */
  .btn-book1 {
    /* Ensures the button doesn't look tiny in the center */
    padding: 8px 30px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .appointment-content1 {
    padding: 20px 15px; /* Further reduced padding for very small screens */
  }
  .appointment-content1 h3 {
    font-size: 20px; /* Slightly smaller heading */
    margin-bottom: 10px;
  }
  .btn-book1 {
    padding: 10px 15px;
    font-size: 15px;
    /* Consider making it a block element if it needs to take up more width */
    /* width: 80%;
    margin: 0 auto;
    display: block; */
  }
  .appointment-image1 {
    max-height: 200px; /* Smaller image on very small screens */
  }
}

/* -----------black section------------ */

/* --- Global Styling (Optional but recommended for consistency) --- */
body {
  margin: 0;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

/* --- Section Styling --- */
.berlitz-difference-section {
  background-color: #2d2f3d; /* Dark background color (similar to the image) */
  color: #ffffff; /* White text color */
  padding: 40px 0px;
  text-align: center; /* Center the heading and content */
}

.container {
  max-width: 1300px; /* Max width for content centering */
  margin: 0 auto;
  padding: 0 15px;
}

/* --- Heading Styling --- */
.berlitz-difference-section h2 {
  font-size: 29px;
  font-weight: 500;
  /* margin-bottom: 60px; */
}

/* --- Grid Layout for Features --- */
/* .features-grid {
  justify-content: center;
  gap: 30px; 
} */
.features-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 in each row */
  gap: 0px;
	height: 550px;
  justify-items: center;
}
@media (max-width: 768px) {
  .features-grid-2col {
    grid-template-columns: 1fr;
  }
}

/* --- Feature Card Styling --- */
.feature-card {
  flex: 1; /* Allows the cards to take up equal space */
  max-width: 300px; /* Max width for each card */
  display: flex;
  flex-direction: column;
  align-items: center; /* Center icon and text */
}

.feature-card p {
  font-size: 19px;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
  margin-bottom: 16px;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}


/* --- Icon Styling --- */
.icon-wrapper {
  margin-bottom: 20px; /* Space between icon and text */
}

.icon {
  /* width: 45px; */
  height: 70px;
  color: #38a169; /* Teal/Green color for the icon */
  stroke: #38a169; /* Ensures SVG outline has the color */
}

/* --- Responsive Adjustments for smaller screens --- */
@media (max-width: 768px) {
  .features-grid {
    flex-direction: column; /* Stack the cards vertically on small screens */
    gap: 40px;
  }

  .berlitz-difference-section h2 {
    margin-bottom: 40px;
  }

  .feature-card {
    max-width: 100%; /* Take full width on small screens */
  }
}



/* -----------cards in corporate--------- */

/* --- Global Reset/Base --- */
body {
  margin: 0;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

/* --- Layout Utilities --- */
.container-md {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.padding-25 {
  padding: 15px;
}

.margin-bottom-lg {
  margin-bottom: 50px;
}

.margin-bottom-md {
  margin-bottom: 25px;
}

/* --- Section Styling --- */
.section-padded {
  padding: 80px 20px;
}

.section-white {
  background-color: #f8f9fa; /* Light grey background color */
  color: #333;
}

.max-width-text {
  max-width: 700px;
}

/* --- Typography Utilities --- */
.text-xl {
  font-size: 27px;
}

.text-lg {
  font-size: 18px;
}

.text-base {
  font-size: 18px;
}

.text-sm {
  font-size: 15px;
}

.font-bold {
  font-weight: 500;
}

.font-semi-bold {
  font-weight: 600;
}

.text-gray-500 {
  color: #6c757d;
}

.text-gray-600 {
  color: #495057;
}

/* --- Grid Utilities --- */
.grid-cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.gap-30 {
  gap: 30px;
}

/* --- Card Component Styling --- */
.card {
  background-color: #ffffff;
  overflow: hidden;
}

.card-shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.radius-4 {
  border-radius: 4px;
}

/* --- Media/Image Styling --- */
.media-wrap {
  width: 100%;
  position: relative;
}

/* 3:2 Aspect Ratio */
.aspect-ratio-3-2 {
  padding-top: 66.66%;
}

.media-object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ensures card paragraph doesn't shrink/grow unevenly */
.card-body1 p {
  color: #413e3e;
  min-height: 70px;
  font-size: 18px;
  font-weight: 200;
  padding: 6px 12px 6px 9px;
  line-height: 1.5;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
.card-body2 h3 {
  font-size: 20px;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  padding-left: 8px;
}
.card-body2 p {
  color: #413e3e;
  min-height: 70px;
  font-size: 18px;

  text-align: justify;
  font-weight: 300;
  padding: 6px 9px 6px 9px;
  line-height: 1.7;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.card-body1 h3 {
  font-size: 20px;
  font-weight: 500;
  color: #080808;
  margin: 10px 5px 10px 10px;
  text-align: left;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
/* --- Button Styling --- */
.btn {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
  transition: background-color 0.3s;
}

.btn-solid-blue {
  background-color: #0056b3;
  color: #ffffff;
  font-size: 12px;
  margin: 0px 0px 0px 9px;
}

.btn-solid-blue:hover {
  background-color: #007bff;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
  /* Two columns on tablets */
  .grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 650px) {
  /* Single column on mobile phones */
  .grid-cols-3 {
    grid-template-columns: 1fr;
  }
}

/* -------------blue section------------- */

/* --- Global Reset/Base (Optional) --- */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

/* --- Section Styling --- */
.cta-banner {
  background-color: #004dff; /* Deep blue background color */
  padding: 60px 20px; /* Vertical padding */
  color: #ffffff; /* White text color */
  text-align: center; /* Center content horizontally */
}

.cta-container {
  max-width: 900px;
  margin: 0 auto;
}

/* --- Heading Styling --- */
.cta-heading {
  font-size: 28px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 30px; /* Space between title and buttons */
}

/* --- Button Group Layout --- */
.cta-button-group {
  display: flex;
  justify-content: center; /* Center the buttons */
  gap: 15px; /* Space between the two buttons */
}

/* --- General Button Styling --- */
.btn {
  display: inline-block;
  padding: 12px 25px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  border-radius: 4px;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
  white-space: nowrap; /* Prevents button text from wrapping */
}

/* --- White Outline Button (Left) --- */
.btn-white-outline {
  font-size: 15px;
  background-color: #ffffff;
  color: #141415;
  border: 2px solid #ffffff; /* Explicit border for consistency */
}

.btn-white-outline:hover {
  background-color: #f0f0f0; /* Slight off-white hover */
  color: #141415;
}

/* --- Blue Solid Button (Right) --- */
.btn-blue-solid {
  /* This button style is transparent inside with a white border and white text */
  background-color: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
  font-size: 15px;
}

.btn-blue-solid:hover {
  background-color: transparent;
  color: #fff; /* Blue text on hover */
}

/* --- Responsive Adjustments --- */
@media (max-width: 600px) {
  .cta-heading {
    font-size: 24px;
    margin-bottom: 25px;
  }

  .cta-button-group {
    flex-direction: column; /* Stack buttons vertically on small screens */
    gap: 10px;
  }

  .btn {
    width: 100%; /* Full width when stacked */
    box-sizing: border-box;
  }
}

/* -------slider section---------- */

/* --- Variables (Optional, but good practice) --- */
:root {
  --primary-blue: rgb(59, 130, 246); /* A common blue for the arrows/dots */
  --text-color: #333;
  --light-gray-dot: #ccc;
  --font-family: sans-serif; /* Use your site's main font if different */
}

/* --- Section Container --- */
.consultant-slider-section {
  max-width: 980px; /* Adjust as needed */
  margin: 40px auto;
  padding: 20px;
  text-align: center;
  font-family: var(--font-family);
}

/* --- Main Slider and Arrow Positioning --- */
.slider-container {
  display: flex;
  align-items: center; /* Vertically center content and arrows */
  justify-content: center;
  gap: 20px; /* Space between arrows and content */
}

/* --- Slider Content (Text & Image) --- */
.slider-content {
  max-width: 800px;
  padding: 20px;
}

.slider-content h2 {
  font-size: 2.2em;
  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 30px;
}

/* --- Image and Text Layout (Flexbox) --- */
.content-body {
  display: flex;
  align-items: flex-start; /* Align to the top */
  gap: 30px;
  text-align: left;
}

/* --- Image Styling --- */
.consultant-image-wrapper {
  flex-shrink: 0; /* Prevents the image from shrinking */
}

.consultant-image {
  width: 150px; /* Adjust image size as needed */
  height: 150px;
  border-radius: 50%; /* Makes the image perfectly round */
  object-fit: cover;
  box-shadow: 0 0 0 5px white, 0 0 0 6px rgba(0, 0, 0, 0.1); /* Optional slight border/shadow */
}

/* --- Text Block Styling --- */
.consultant-text-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.consultant-text-block p {
  font-size: 1.05em;
  line-height: 1.6;
  color: var(--text-color);
  margin-top: 0;
  margin-bottom: 20px;
}

.consultant-name-title {
  font-size: 0.95em;
  color: #555;
}

/* --- Navigation Arrows --- */
.slider-arrow {
  background: var(--primary-blue);
  color: white;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s;
  font-size: 1.2em;
}

.slider-arrow:hover {
  background: #3470cc; /* Slightly darker on hover */
}

/* --- Paginator Dots --- */
.slider-dots {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  gap: 10px;
}

.dot {
  height: 10px;
  width: 10px;
  background-color: var(--light-gray-dot);
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.3s;
}

.dot.active {
  background-color: var(--primary-blue);
}

/* --- Optional: Responsive adjustments for smaller screens --- */
@media (max-width: 768px) {
  .content-body {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .consultant-text-block {
    align-items: center;
  }
  .slider-container {
    gap: 10px;
  }
  .slider-arrow {
    width: 40px;
    height: 40px;
  }
}

/* ----------partners----------------- */

/* --- Partner Section Styles --- */
.partners-section {
  padding: 60px 20px;
  text-align: center;
  background-color: #ffffff; /* White background as seen in the image */
  font-family: sans-serif; /* Use your site's main font */
}

/* --- Content (Title and Subtitle) --- */
.partners-content {
  margin-bottom: 40px;
}

.partners-content h1 {
  font-size: 2em;
  font-weight: 500;
  color: #333333;
  margin-bottom: 8px;
}

.partners-content p {
  font-size: 1em;
  color: #666666;
  margin: 0;
}

/* --- Logo Container (Flexbox for alignment) --- */
.partners-logos-container {
  display: flex;
  justify-content: center; /* Centers the logos horizontally */
  align-items: center; /* Vertically aligns logos if they have different heights */
  gap: 40px; /* Space between the logos */
  max-width: 1100px; /* Constrains the width of the logo area */
  margin: 0 auto;
  padding-top: 20px;
}

/* --- Individual Logo Styling --- */
.partner-logo {
  display: flex; /* Ensures the image inside is centered/aligned */
  align-items: center;
  justify-content: center;
  max-width: 160px; /* Maximum width for each logo container */
  flex-grow: 1; /* Allows logos to grow slightly to fill space */
  flex-shrink: 1; /* Allows logos to shrink on smaller screens */
  height: 60px; /* Sets a consistent height for alignment */
}

.partner-logo img {
  max-width: 100%;
  max-height: 100%; /* Ensures the image scales down to fit the 60px height */
  height: auto;
  width: auto;
  /* Optional: Use a filter to make all logos grayscale if they are color,
       but the images in your example are already varied, so this isn't strictly needed: */
  /* filter: grayscale(100%); */
  /* transition: filter 0.3s; */
}

/* Optional: Add responsiveness for mobile */
@media (max-width: 768px) {
  .partners-logos-container {
    flex-wrap: wrap; /* Allows logos to wrap onto the next line */
    gap: 30px 20px; /* Smaller gap for mobile */
  }
  .partner-logo {
    max-width: 40%; /* Each logo takes up less than half the width */
    height: 50px;
  }
}

/* -------------------------------quote section in learn page -------------------------------------------- */
.testimonial-section {
  background-color: #f6f6f6; /* light grey background */
  text-align: center;
  padding: 80px 20px; /* space around content */
}

.section-title{
	text-align: center;
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 10px;
    color: #1d1d1f;
    margin-top: 28px;
	}

.testimonial-text {
  font-size: 18px;
  color: #424141;
  max-width: 800px;
  margin: 0 auto 24px;
  line-height: 1.6;
  text-align: justify;
  font-weight: 300;
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}

.testimonial-ptext {
  font-size: 18px;
  color: #424141;
  max-width: 1130px;
  margin: 0 auto;
  line-height: 1.6;
  padding-bottom: 38px;
  font-weight: 300;
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}

.testimonial-author {
  font-size: 16px;
  color: #676161;
  font-weight: 400;
  text-align: justify;
/*   padding-left: 235px; */
}
.testimonial-text-main {
    font-size: 17px; 
    font-weight: 200;
    line-height: 1.5;
    color: #2d2f3d;
    margin-bottom: 20px;
   width: 50%;
    margin: 0 auto;
    text-align: justify;
    font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
/* --------------learn-online slider-------------- */

/* .testimonial-section {
  background-color: #f8f8f8;
  text-align: center;
  padding: 20px 20px;
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 40px;
  padding-top: 14px;
}


.testimonial-slider {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
  min-height: 280px; 
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-container {
  width: 100%;
  position: relative;
}


.testimonial {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.testimonial.active {
  opacity: 1;
  position: relative;
}

.testimonial-text {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 20px;
  line-height: 1.6;
  
}

.testimonial-author {
  font-weight: 600;
  color: #000;
  padding-left: 170px;
}


.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  font-size: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease;
}

.slider-btn:hover {
  background-color: #2563eb;
}


.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

@media (max-width: 768px) {
  .prev-btn {
    left: 10px;
  }

  .next-btn {
    right: 10px;
  }

  .testimonial-slider {
    min-height: 320px; 
  }
}


.dots {
  margin-top: 25px;
}

.dot {
  height: 10px;
  width: 10px;
  background-color: #cbd5e1;
  border-radius: 50%;
  display: inline-block;
  margin: 0 6px;
  cursor: pointer;
}

.dot.active {
  background-color: #2563eb;
} */
.testimonial-section {
  background-color: #f8f8f8;
  text-align: center;
  padding: 20px;
}

.section-title {
 text-align: center;
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 10px;
    color: #1d1d1f;
    margin-top: 28px;
}

/* ---- FIXED HEIGHT SLIDER ---- */
.testimonial-slider {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-container {
  width: 100%;
  position: relative;
}

.testimonial {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
  padding: 0 20px; /* adds safe side padding */
}

.testimonial.active {
  opacity: 1;
  position: relative;
}

.testimonial-text {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 20px;
  line-height: 1.6;
}

.testimonial-author {
  font-weight: 600;
  color: #000;
  text-align: center;
  display: block;
  margin-top: 10px;
}

/* ---- ARROW BUTTONS ---- */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  font-size: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease;
}

.slider-btn:hover {
  background-color: #2563eb;
}

.prev-btn {
  left: 15px;
}

.next-btn {
  right: 15px;
}

/* ---- DOTS ---- */
.dots {
  margin-top: 25px;
}

.dot {
  height: 10px;
  width: 10px;
  background-color: #cbd5e1;
  border-radius: 50%;
  display: inline-block;
  margin: 0 6px;
  cursor: pointer;
}

.dot.active {
  background-color: #2563eb;
}

/* ---- RESPONSIVE STYLES ---- */
@media (max-width: 768px) {
  .section-title {
    font-size: 1.6rem;
    margin-bottom: 25px;
  }

  .testimonial-slider {
    min-height: 320px;
    padding: 0 10px;
  }

  .testimonial-text {
    font-size: 1rem;
    line-height: 1.5;
  }

  .slider-btn {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }

  .prev-btn {
    left: 8px;
  }

  .next-btn {
    right: 8px;
  }

  .dots {
    margin-top: 18px;
  }
}

@media (max-width: 480px) {
  .section-title {
    font-size: 1.4rem;
  }

  .testimonial-text {
    font-size: 0.95rem;
    /* width: 360px; */
    /* padding: 0 48px 0px 25px; */
  }
  .testimonial-author {
    font-size: 14px;
    margin-top: 6px;
    color: #222;
    text-align: left;
    max-width: 600px;
    margin: 6px auto 0;
    padding-left: 50px; /* small left offset */
  }

  .slider-btn {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }

  .prev-btn {
    left: 5px;
  }

  .next-btn {
    right: 5px;
  }
}

/* -------------------language tests css-------------------------- */

/* ---- Section Styling ---- */
.exam-section {
  background-color: #f8f8f8;
  padding: 60px 20px;
  text-align: center;
}

.exam-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  text-align: center;
    font-size: 32px;
    font-weight: 400;
   margin-bottom: 10px;
    color: #1d1d1f;
    margin-top: 28px;
}

.section-subtitle {
  font-size: 18px;
  font-weight: 300;
  color: #7e7e7e;
  line-height: 1.6;
  max-width: 900px;
  margin: 0 auto 40px;
}

/* ---- Cards Layout ---- */
.exam-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.exam-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.exam-card:hover {
  transform: translateY(-5px);
}

.exam-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.exam-card h3 {
  font-size: 1.25rem;
  margin: 20px 0;
  color: #1d1d1d;
  text-align: left;
  padding: 3px;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

/* ---- Button Styling ---- */
.exam-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: left; /* 👈 make content align left */
  transition: transform 0.3s ease;
}

.exam-card h3 {
  font-size: 21px;
  font-weight: 500;
  margin: 20px 0 10px 20px; /* 👈 add left margin */
  color: #1d1d1d;
}

.exam-btn {
  background-color: #0056ff;
  color: #fff;
  border: none;
/*   padding: 12px 30px; */
	padding: 0px 30px 16px 30px;
  margin: 0 0 35px 20px; /* 👈 move button to left side */
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.exam-btn:hover {
  background-color: #0043cc;
}

/* --------------language test FAQ---------------- */

.berlitz-faq-section {
  padding: 50px 20px;
  max-width: 1000px;
  margin: auto;
  text-align: center;
  line-height: 1.7;
  /* background-color: #f9f9f9; */
}

.berlitz-faq-section h2 {
  font-size: 32px;
  color: #1a1a1a;
  margin-bottom: 50px;
  font-weight: 500;
}

.faq-list {
  list-style: none;
  padding: 0;
  text-align: left;
}

.faq-item {
  border-bottom: 1px solid #ccc;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  cursor: pointer;
  font-size: 20px;
  color: #121212;
  font-weight: 400;
}

.faq-icon {
  /* font-size: 13px;
  transition: transform 0.3s ease;
  color: #0c0c0d; */
  font-size: 13px;
  border: 1px solid #c9c9d4;
  padding: 0px 4px 0px 4px;
  border-radius: 50%;
  background-color: #e5edfd;
  transition: transform 0.3s ease;
  color: #0056ff;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  font-size: 18px;
  color: #777;
  line-height: 1.6;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-answer a {
  border-bottom: 4px solid #50dfa1;
}

.faq-item.active .faq-answer {
  max-height: 560px;
  padding: 20px;
}

.faq-item.active .faq-icon {
  transform: rotate(-180deg);
}

/* Define a variable for the blue color of the bullets if needed */
:root {
  --bullet-blue: #0056ff; /* A common, bright blue for list bullets */
  --text-color: #1d1d1d; /* Dark text for contrast */
  --list-indent: 20px; /* Indent the list from the left */
}

.test-list-container {
  /* Set a container width/margin if necessary for the layout */
  max-width: 600px;
  margin: 20px 0;
  padding-left: var(--list-indent);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif; /* Matches your FAQ font */
  color: var(--text-color);
}

.test-list-container ul {
  /* Resetting default list styling */
  list-style: none; /* Remove default bullets */
  padding: 0;
  margin: 0;
}

.test-list-container li {
  /* Style for each list item */
  padding-left: 1.5em; /* Space for the custom bullet */
  margin-bottom: 0.8em; /* Vertical space between items */
  position: relative;
  line-height: 1.5;
}

.test-list-container li::before {
  content: "•"; /* The bullet character */
  color: var(--bullet-blue); /* The distinct blue color */
  font-weight: bold; /* Make the bullet stand out */
  display: inline-block;
  width: 1em; /* Space for the bullet */
  margin-left: -1em; /* Pull the bullet back into the padding */
  position: absolute;
  left: 0;
  top: 0;
}

/* -------------------language page css--------------------------- */

/* Basic Reset and Variables for a clean look */
:root {
  --primary-font: "Helvetica Neue", Arial, sans-serif; /* Adjust to your specific font */
  --light-gray: #f7f7f9;
  --border-color: #e0e0e0;
  --text-color: #333;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--primary-font);
  background-color: #ffffff; /* Assuming the rest of the body is white */
  color: var(--text-color);
}

/* 1. SECTION STYLING (The light gray background area) */
.interest-section {
  background-color: var(--light-gray);
  padding: 40px 20px; /* Top/bottom padding for vertical spacing */
  text-align: center;
}

/* 2. CONTAINER (To limit max width and center the content) */
.container-language {
  max-width: 1300px; /* Typical content width */
  margin: 0 auto;
}

/* 3. TITLE STYLING */
.section-title {
  font-size: 32px;
  font-weight: 400;
 
  color: #000000;
	margin-bottom: 10px;
    color: #1d1d1f;
    margin-top: 28px;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
.section-title-1 {
  font-size: 32px;
  font-weight: 400;
  /* margin-bottom: 50px; */
  color: #000;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
/* 4. GRID LAYOUT (Using Flexbox for a responsive 3-column layout) */
.interest-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 28px; /* Space between the cards */
  justify-content: center; /* Center the grid items */
}

/* Desktop – 4 cards */
.interest-item {
   flex-basis: calc(25% - 21px);
  min-width: 250px;
  height: 75px;
  background-color: white;
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 15px;
  color: rgb(45, 47, 61);
  font-size: 18px;
  font-weight: 500;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

/* Optional: Hover effect for interactivity */
.interest-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
/* Tablet – 2 cards */
@media (max-width: 1024px) {
  .interest-item {
    flex-basis: calc(50% - 20px);
  }
}

/* Mobile – 1 card */
@media (max-width: 480px) {
  .interest-item {
    flex-basis: 100%;
    height: 80px;
  }
}
.section-title-1 a{
	border-bottom:4px solid #7ffcff;
}

/* 6. MEDIA QUERY for responsiveness (e.g., on mobile) */
/* @media (max-width: 768px) {
  .interest-item {
    flex-basis: calc(50% - 20px); 
  }
}

@media (max-width: 480px) {
  .interest-item {
    flex-basis: 100%; 
    height: 80px;
  } */

  .section-title {
    font-size: 1.5em;
  }

  .interest-section {
    padding: 40px 10px;
  }
}

/* ------------------------img with content-------------------- */

/* 1. CONTAINER & LAYOUT */
.benefits-section {
  padding: 60px 20px;
  background-color: #ffffff; /* Assuming a white background */
  font-family: "Helvetica Neue", Arial, sans-serif; /* Adjust to your specific font */
  color: #333;
}

.benefits-container {
  max-width: 1000px; /* Adjust max width as needed */
  margin: 0 auto;
  display: flex;
  align-items: center; /* Vertically centers the content blocks */
  gap: 40px; /* Space between the image and the text */
}

/* 2. IMAGE STYLING */
.benefits-image {
  flex: 1 1 50%; /* Takes up roughly half the space */
  position: relative;
  /* Optional: creates a slight space around the image on the right */
  padding-right: 20px;
}

.benefits-image img {
  display: block;
  width: 100%;
  /* The image in the example is a fixed height, creating a visual break. */
  /* This uses a modern aspect-ratio property to mimic a fixed height without stretching. */
  object-fit: cover;
  border-radius: 4px; /* Slight rounding if desired, though the original is sharp */
}

/* 3. CONTENT STYLING */
.benefits-content {
  flex: 1 1 48%; /* Takes up roughly the other half */
  padding-left: 20px; /* Optional space for a clean look */
}

.benefits-title {
  font-size: 32px;
  font-weight: 500; /* Medium weight, not full bold */
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 30px;
}

/* 4. LIST STYLING */
.benefits-list {
  list-style-type: none; /* Remove default bullets */
  padding-left: 0;
  margin: 0;
}
.benefits-content .txt-lft{
/* 	text-align:left; */
	padding-right:140px;
	color:gray;
}
.benefits-list li {
  position: relative;
  padding-left: 20px; /* Space for the custom bullet */
  margin-bottom: 15px; /* Spacing between list items */
  font-size: 17px;
	text-align:left;
  /* color: rgb(45, 47, 61); */
  line-height: 1.6;
  color: rgb(160 153 153);
  font-weight: 400;
    font-family: 'Source Sans Pro', sans-serif;
}

/* Custom Bullet Point (Replicates the small, square-like bullet) */
.benefits-list li::before {
  content: "•"; /* A small, round unicode bullet */
  color: #3e98f1; /* Color of the bullet */
  font-size: 1.2em;
  position: absolute;
  left: 0;
  top: 0;
}

.container-language p {
  font-size: 18px;
  padding-bottom: 20px;
  color: rgb(103 98 98);
  line-height: 1.7;
  font-weight: 400;
  font-family: 'Source Sans Pro', sans-serif;
}
/* 5. RESPONSIVENESS */
/* @media (max-width: 900px) {
  .benefits-container {
    flex-direction: column; 
  }

  .benefits-image,
  .benefits-content {
    flex: 1 1 100%; 
    padding: 0;
    margin-bottom: 20px;
  }
} */
/* ----------------------------------------------------
 * Enhanced Mobile Responsiveness
 * ---------------------------------------------------- */

/* Tablets */
@media (max-width: 1024px) {
  .benefits-title {
    font-size: 28px;
  }

  .benefits-content .txt-lft {
    padding-right: 60px; /* Reduce excessive right padding */
  }

  .benefits-list li {
    font-size: 16px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .benefits-section {
    padding: 40px 15px;
  }

  .benefits-container {
    gap: 25px;
  }

  .benefits-image {
    padding-right: 0;
  }

  .benefits-image img {
    border-radius: 6px;
  }

  .benefits-content {
    padding-left: 0;
  }

  .benefits-title {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .benefits-content .txt-lft {
    padding-right: 0; /* CRITICAL: remove on mobile */
  }

  .benefits-list li {
    font-size: 15px;
    line-height: 1.5;
  }

  .benefits-list li::before {
    top: 2px;
  }

  .container-language p {
    font-size: 16px;
    padding-bottom: 15px;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .benefits-title {
    font-size: 22px;
  }

  .benefits-list li {
    font-size: 14px;
  }

  .container-language p {
    font-size: 15px;
  }
}
.benefits-list .b-text{
    color: gray;
    line-height: 2.5;
}
/* ----------------------------------------------------
 * Enhanced Mobile Responsiveness
 * ---------------------------------------------------- */

/* Tablets */
@media (max-width: 1024px) {
  .benefits-title {
    font-size: 28px;
  }

  .benefits-content .txt-lft {
    padding-right: 60px; /* Reduce excessive right padding */
  }

  .benefits-list li {
    font-size: 16px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .benefits-section {
    padding: 40px 15px;
  }

  .benefits-container {
    gap: 25px;
  }

  .benefits-image {
    padding-right: 0;
  }

  .benefits-image img {
    border-radius: 6px;
  }

  .benefits-content {
    padding-left: 0;
  }

  .benefits-title {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .benefits-content .txt-lft {
    padding-right: 0; /* CRITICAL: remove on mobile */
  }

  .benefits-list li {
    font-size: 15px;
    line-height: 1.5;
  }

  .benefits-list li::before {
    top: 2px;
  }

  .container-language p {
    font-size: 16px;
    padding-bottom: 15px;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .benefits-title {
    font-size: 22px;
  }

  .benefits-list li {
    font-size: 14px;
  }

  .container-language p {
    font-size: 15px;
  }
}
/* ----------------------------------------------------
 * Mobile Order: Image First, Content Second
 * ---------------------------------------------------- */

@media (max-width: 768px) {
  .benefits-container {
    flex-direction: column; /* Stack vertically */
  }

  .benefits-image {
    order: 1; /* Image first */
  }

  .benefits-content {
    order: 2; /* Content second */
  }
}


/* -----------------------dropdown---------------------- */

/* 1. SECTION AND CONTAINER STYLING */
.language-dropdown-section {
  padding: 20px;
  background-color: #f7f7f9; /* Light gray background */
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.language-container {
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 80px;
  position: relative; /* Important for positioning the content */
}

/* 2. CUSTOM DROPDOWN HEADER (The closed state) */
.dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #f7f7f9;

  cursor: pointer;
  font-size: 19px;
  color: #333;
  font-weight: 500;
  /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); */
  border-radius: 4px; /* Optional: subtle rounding */
  z-index: 10; /* Ensures it sits above other elements */
  position: relative;
}

/* Up Arrow Icon Styling */
.toggle-icon {
  width: 25px;
  height: 25px;
  transition: transform 0.3s ease;
  color: #609bf2;
  border: 1px solid #efebeb;
  border-radius: 50%;
  background-color: #efeff2;
}

.dropdown-header.active .toggle-icon {
  transform: rotate(
    180deg
  ); /* Flips the arrow when open (becomes a down arrow) */
}

/* 3. DROPDOWN CONTENT (The grid of languages) */
/* 3. DROPDOWN CONTENT (The grid of languages) */
.dropdown-content {
  /* KEY CHANGE: Removed 'position: absolute;' */

  /* Initially hidden below the header */
  max-height: 0;
  overflow: hidden;

  /* 1. Ensures no space is reserved when closed */
  border: none;
  padding: 0;

  /* 2. Uses visibility to hide content fully and remove interaction */
  visibility: hidden;

  /* Transition for max-height and visibility */
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out,
    border 0s linear 0.5s,
    /* Delay border removal until height is zero */ visibility 0s linear 0.5s; /* Delay visibility until height is zero */

  background-color: white;
  width: 100%;
  z-index: 5;
}

/* Class added by JavaScript when open */
.dropdown-content.open {
  /* Set a height large enough to show all content */
  max-height: 500px;

  /* Re-enables visibility and sets the borders for the open state */
  visibility: visible;

  /* 3. Re-add borders for the visual structure */
  /* border-left: 1px solid #c9c9c9;
  border-right: 1px solid #c9c9c9;
  border-bottom: 1px solid #c9c9c9; */

  /* 4. Add top padding to create space between header and grid content */
  padding-top: 10px;

  /* 5. Ensure border and visibility appear immediately on open */
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out,
    border 0s linear 0s, visibility 0s linear 0s;
}

/* 2. CUSTOM DROPDOWN HEADER (The closed state) */
.dropdown-header {
  /* ... (rest of the header styles remain the same) ... */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #f7f7f9; /* Changed back to white to match the image */
  cursor: pointer;
  font-size: 19px;
  color: #333;
  font-weight: 500;
  z-index: 10;
  position: relative;

  /* NEW: Removes bottom border when open to merge with content */
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.dropdown-header.active {
  /* When open, remove the bottom border and roundness to blend with the content */
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.dropdown-header.active .toggle-icon {
  transform: rotate(180deg);
}

/* Note: The HTML and JavaScript from the previous response remain correct for this functionality. */

/* 4. LANGUAGE GRID LAYOUT */
.language-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three equal columns */
}

.language-grid-1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Three equal columns */
}

.language-item {
  padding: 12px 20px;
  text-align: left;
  font-size: 1em;
  border-bottom: 1px solid #eee; /* Light separator line between rows */
  cursor: pointer;
  position: relative;
}

/* Underline/Highlight Style */
.language-item::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 20px;
  width: calc(100% - 40px);
  height: 2px;
/*   background-color: #79d391; */
  transform: scaleX(0); 
/*   transition: transform 0.3s ease; */
}

/* Show the highlight on hover for interactivity (optional) */
.language-item:hover::after {
  transform: scaleX(1);
}

/* Styling for the light blue background rows */
.blue-row {
  background-color: #eef3ff; /* The light blue color */
}

/* Cleanup for grid lines (optional) */
/* Remove bottom border on the last row */
.language-item:nth-last-child(-n + 3) {
  border-bottom: none;
}

/* Media Query for Mobile: single column */
@media (max-width: 600px) {
  .language-grid {
    grid-template-columns: 1fr; /* Single column on small screens */
  }

  /* Re-add border to items to separate them in single-column view */
  .language-item {
    border-bottom: 1px solid #eee;
  }
}

/* ----------------blue section------------------- */

/* 1. SECTION STYLING (The main blue block) */
.berlitz-benefits-section {
  background-color: #004fef;
  color: #ffffff;
  font-family: var(--font-family);
  padding: 80px 20px; /* Vertical spacing */
  text-align: center;
}

/* 2. CONTENT WRAPPER (To limit width and center text blocks) */
.benefits-content-wrapper {
  max-width: 930px; /* Controls the maximum width of the text blocks */
  margin: 0 auto;
}

/* 3. TITLE STYLING */
.benefits-title {
  font-size: 32px;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 50px;
  line-height: 1.1;
  text-align: left;
}

/* 4. PARAGRAPH STYLING */
.benefits-content-wrapper p {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.4;
  margin-bottom: 25px;
  text-align: left;
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}

/* 5. HIGHLIGHT/KEYWORD STYLING (The bolded benefit name) */
.highlight {
  font-weight: 700; /* Bold */
  /* The space after the colon in the image is created by the HTML structure */
}

/* 6. LINK STYLING (The blue, underlined links on white text) */
.inline-link {
  color: var(--link-color); /* White text color */
  font-weight: 700; /* Bold link text */
  text-decoration: underline; /* Standard underline */

  /* Replicates the specific blue underline color shown in the image */
  text-decoration-color: #fff; /* A distinct, lighter blue for the underline */
  text-decoration-thickness: 2px; /* Makes the underline more prominent */
  text-underline-offset: 3px; /* Moves the underline slightly down */
}

.inline-link:hover {
  opacity: 0.8;
}

/* 7. RESPONSIVENESS */
@media (max-width: 600px) {
  .berlitz-benefits-section {
    padding: 40px 15px;
  }

  .benefits-title {
    font-size: 1.8em;
    margin-bottom: 30px;
  }
}

/* -------------------------youtube video---------------------- */

.video-section {
  padding: 60px 0;
  background-color: #fff; /* Black background like YouTube player */
  text-align: center;
}
.section-title {
  color: #fff;
  font-size: 28px;
  margin-bottom: 20px;
}
.video-wrapper {
  position: relative;
  /* padding-bottom: 56.25%;  */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  max-width: 900px;
  margin: 0 auto;
  /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); */
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;
}

/*--------------***********blue section*************--------------- */

/* --- Main Section Container --- */
.blue-steps-section {
    background-color: #004fef; /* A dark, deep blue matching the image */
    color: white; /* White text for high contrast */
    padding: 60px 20px; /* Vertical padding for height */
    text-align: center; /* Center the entire section content */
}

/* --- Content Container for Max Width --- */
.content-container {
    max-width: 1025px; /* Limits the width of text for readability */
    margin: 0 auto; /* Centers the content block horizontally */
    text-align: left; /* Aligns text left, as seen in the image */
}

/* --- Main Heading Style --- */
.content-container h1 {
    font-size: 32px;
    font-weight: 700; /* Bold */
    color: white;
    margin-top: 0;
    margin-bottom: 50px; /* Space below the heading */
    text-align: left;
}

/* --- Steps List Styles --- */
.steps-list {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin: 0;
}

.steps-list li {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 25px; /* Space between each step */
}

/* --- "Step X:" Label Styling (The bold part) --- */
.steps-list .step-label {
    font-weight: bold;
    font-size: 18px;
    margin-right: 5px; /* Small space between the label and the rest of the text */
}

/* --- Optional: Responsiveness for very small screens --- */
@media (max-width: 600px) {
    .blue-steps-section {
        padding: 40px 15px;
    }
    .content-container h1 {
        font-size: 24px;
        margin-bottom: 30px;
    }
    .steps-list li {
        font-size: 16px;
    }
}
/* --- List Container Styling --- */
.highlighted-list {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin: 40px auto; /* Add some space above/below and center the block */
    max-width: 950px; /* Limit the width for readability */
    font-family: Arial, sans-serif;
    color: #333; /* Default text color */
}

/* --- Individual List Item Styling --- */
.highlighted-list li {
    font-size: 18px; /* Match the text size */
   font-weight: 200;
    line-height: 1.5;
    margin-bottom: 25px;
    font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

/* --- Highlighted Text Styling (The bold, underlined part) --- */
.highlighted-list .highlight-text {
    font-weight: 500; /* Make the key phrase bold */
    
    /* Create the green highlight/underline effect */
    text-decoration: underline; 
    text-decoration-color: #70e6a8; /* A light green color that matches the image */
    text-decoration-thickness: 3px; /* Thickness of the underline/highlight */
    text-underline-offset: 4px; /* Space between the text and the underline */
    
    /* Prevent the underline from being too close to the text */
    text-decoration-skip-ink: none; 
}

/* ------------*******image and content section css******------------ */

/* --- Wrapper for Shadow and White Background --- */
.two-column-card-wrapper {
    max-width: 1000px;
    background-color: #fff;
    border-radius: 4px;
    margin: 0 auto;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow around the card */
    overflow: hidden; /* Ensures image corners stay sharp within the card */
}

/* --- Flex Container for Two Columns --- */
.two-column-card {
    display: flex; /* Key to creating the horizontal columns */
    flex-wrap: wrap; /* Allows the columns to stack on small screens */
    width: 100%;
}

/* --- Image Column Style --- */
.image-column {
    flex: 1 1 50%; /* Takes up 50% width by default */
    min-width: 300px; /* Minimum width before stacking */
    overflow: hidden;
}

.image-column img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the area without distortion */
    display: block;
}

/* --- Content Column Style (Text) --- */
.content-column {
    flex: 1 1 50%; /* Takes up 50% width by default */
    padding: 110px 40px; /* Internal padding */
    box-sizing: border-box;
    min-width: 300px;
}

/* --- Heading Style --- */
.content-column h2 {
    font-size: 32px;
    font-weight: 500;
    color: #333;
    margin-top: 0;
    margin-bottom: 30px;
    text-align: left;
}

/* --- Ordered List (Reasons) Style --- */
.why-list {
    padding-left: 20px; /* Adds space for the numbers */
    margin: 0;
}

.why-list li {
   font-size: inherit;
    line-height: 1.8;
    margin-bottom: 25px;
    padding-left: 5px;
    color: #555;
    text-align: left;
}

/* --- Highlighted Text Styling (Reusing the green highlight effect) --- */
.why-list .highlight-text {
    font-weight: 400; /* Regular weight, as seen in the image */
    text-decoration: underline;
    text-decoration-color: #70e6a8; /* Light green highlight color */
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
    text-decoration-skip-ink: none;
   color: #464545;
    font-weight: 200;
    font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

/* --- Responsiveness: Stack columns on smaller screens --- */
@media (max-width: 768px) {
    .two-column-card-wrapper {
        margin: 20px;
    }
    .image-column, 
    .content-column {
        flex-basis: 100%; /* Columns stack to 100% width */
        min-width: unset;
    }
    .image-column {
        height: 250px; /* Give the image a fixed height when stacked */
    }
    .content-column {
        padding: 30px;
    }
}

/* ------------------*****************two card section****************************----------------- */

/* --- 2 Card Section Wrapper --- */
.two-card-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  justify-content: center; /* center alignment */
  margin: 0 auto;
  padding: 20px;
  max-width: 1200px;
}

/* --- Single Card --- */
.two-card-box {
  flex: 1 1 calc(50% - 20px); /* 2 cards per row */
  max-width: 500px; /* keeps cards centered & not stretched */
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover effect */
.two-card-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* --- Image --- */
.two-card-img-wrap {
  width: 100%;
  height: 240px;
  overflow: hidden;
}

.two-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.two-card-box:hover .two-card-img-wrap img {
  transform: scale(1.03);
}

/* --- Card Content --- */
.two-card-content {
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* --- Title --- */
.two-card-title {
  font-size: 21px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
  font-family: "IBM Plex Sans", "Noto Sans", Arial, sans-serif;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .two-card-box {
    flex: 1 1 100%; /* 1 card per row on mobile */
  }
}

/*-----------------------Language page other languages css-----------------------------  */
/* Main content container */
.language-container {
  max-width: 1000px;
  margin: 0 auto;
}

/* The grid is always visible now */
.dropdown-content {
  visibility: visible;
  max-height: none;
  overflow: visible;
  padding-top: 10px;
  background-color: white;
  border-radius: 4px;
}

/* Language grid layout */
.language-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.language-item {
  padding: 12px 20px;
  text-align: left;
  font-size: 1em;
  border-bottom: 1px solid #eee;
  position: relative;
}

/* Highlight line */
.language-item::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 20px;
  width: calc(100% - 40px);
  height: 2px;
  background-color: #79d391;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.language-item:hover::after {
  transform: scaleX(1);
}

.blue-row {
  background-color: #eef3ff;
}

/* Remove bottom border on the last row */
.language-item:nth-last-child(-n + 3) {
  border-bottom: none;
}

/* Mobile */
@media (max-width: 600px) {
  .language-grid {
    grid-template-columns: 1fr;
  }
}
/* 	----------black section------------------------  */
				 
	/* --- Section Styling --- */
				 

/* Container */
.container {
 max-width: 1400px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Heading */

.berlitz-difference-section {
  background-color: #2d2f3d;
  color: #ffffff;
  padding: 20px 0; /* reduced */
  text-align: center;
}

.berlitz-difference-section h1 {
  margin-bottom: 10px;
  margin-top: 25px;
}

.berlitz-difference-section p {
  margin-bottom: 20px; /* reduced */
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
 gap: 15px 30px;
  justify-items: center;
}
.features-grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px 30px;
  justify-items: center;
}

.icon {
  height: 45px !important; /* reduced */
}
				 
.feature-card{
/* 	max-width: 1400px; */
	display: flex;
    flex-direction: column;
    align-items: center;
}
				 
.feature-card h2 {
  margin-bottom: 16px; /* smaller spacing */
}

.feature-card p {
  margin-bottom: 10px; /* smaller spacing */
	width: 600px;
	font-size:16px;
	font-weight: 400;
}

@media (max-width: 768px) {
	.feature-card p {
	margin-bottom: 10px; /* smaller spacing */
	font-size:16px;
	font-weight: 400;
	padding: 0 140px 0px 140px;
  }
}




/* --- Icon Styling --- */
.icon-wrapper {
/*   margin-bottom: 20px; */
}

.icon {
  height: 70px;
  color: #38a169;
  stroke: #38a169;
}

/* --- Mobile View (1 card per row) --- */
@media (max-width: 768px) {

  .features-grid {
    grid-template-columns: 1fr; /* stack vertically */
    gap: 40px;
  }

  .feature-card {
    max-width: 100%;
  }
}
	
.content-container-ad a{
		border-bottom: 4px solid #50dfa1;			 
 }			 
				 
.appointment-cta1{
	
	margin-top: 20px;
    text-align: center;
    margin-bottom: 20px;
 }	

 .appointment-cta1 a{
	 font-size: 16px;
    font-weight: 600;
    padding: 16px 20px 16px 20px;
}
.content-container-ad h2{
	font-size: 32px;
    font-weight: 400;	 
 }				 
/* ----------------------green section------------------ */

/* 1. SECTION STYLING (The main green block) */
.advice-section {
  background-color: rgb(61, 220, 151);
  font-family: var(--font-family);
  padding: 80px 20px; /* Vertical spacing */
  text-align: center;
	margin-top: -17px;
}
.advice-section-eng {
  background-color: rgb(61, 220, 151);
  font-family: var(--font-family);
  text-align: center;
}

/* 2. CONTENT WRAPPER (To limit width and center text blocks) */
.advice-content-wrapper {
  max-width: 1000px; /* Controls the maximum width of the text */
  margin: 0 auto;
}
.advice-content-wrapper p {
  color: #4a4444;
  text-align: justify;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.6;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
/* 3. TITLE STYLING */
.advice-title {
  font-size: 32px; /* Large, prominent title */
  font-weight: 500; /* Medium weight, not full bold */
  color: var(--title-color);
  margin-top: 0;
  margin-bottom: 30px;
  line-height: 1.2;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

/* 4. PARAGRAPH STYLING */
.advice-text {
  font-size: 20px;
  line-height: 1.7;
  color: #3c3c3c;
  margin-bottom: 40px;
  font-weight: 300;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

/* 5. BUTTON CONTAINER */
.advice-buttons {
  display: flex;
  justify-content: center; /* Center the button group */
  gap: 15px; /* Space between buttons */
}

/* 6. BASE BUTTON STYLING */
.btn {
  padding: 14px 25px;
  font-size: 1em;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s, opacity 0.3s;
  cursor: pointer;
  min-width: 180px; /* Ensures buttons aren't too small */
  text-align: center;
  border: 1px solid transparent; /* Base border */
}

/* 7. WHITE BUTTON STYLE */
.btn-white {
  background-color: white;
  color: var(--text-color);
  border-color: white;
}

.btn-white:hover {
  opacity: 0.9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 8. GREEN BUTTON STYLE */
.btn-green {
  background-color: var(--button-green);
  color: white;
  border-color: var(--button-green);
}

.btn-green:hover {
  background-color: #31a868; /* Slightly darker green on hover */
}

/* 9. RESPONSIVENESS */
@media (max-width: 650px) {
  .advice-buttons {
    flex-direction: column; /* Stack buttons vertically on small screens */
    gap: 10px;
  }

  .btn {
    min-width: 80%; /* Buttons take up most of the screen width */
    margin: 0 auto;
  }

  .advice-title {
    font-size: 1.8em;
  }
}

.course-selection p {
  font-size: 18px;
  font-weight: 200;
  color: #4a4242;
  line-height: 1.6;
  padding-bottom: 22px;
  padding-left: 23px;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

/* ---------------additional section--------------- */

.additional-offerings-section {
  padding: 60px 20px;
  background-color: #f8f8f8;
}

.additional-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 15px;
}

.section-title {
  text-align: center;
  font-size: 32;
  font-weight: 400;
 margin-bottom: 10px;
    color: #1d1d1f;
    margin-top: 28px;
}

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

.offering-card {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.offering-title {
  font-size: 21;
  font-weight: 500;
  color: #000;
  margin-bottom: 20px;
  margin-left: -10px;
  display: inline-block;
  background: #3ddc97; /* green highlight – adjust if different */
  padding: 8px 18px;
  /* border-radius: 4px; */
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
.offering-card p {
  font-size: 18px;
  font-weight: 200;
  line-height: 1.7;
  text-align: justify;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.offering-list {
  list-style-type: disc; /* show solid bullet points */
  list-style-position: outside; /* the bullets appear outside the text block */
  padding-left: 6px; /* give space so bullets don’t overlap text */
  margin: 0; /* reset default margins if needed */
  padding-top: 14px;
  text-align: left;
}
.offering-list li {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 100;
  line-height: 1.7;
  color: #333;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
.offering-list {
  list-style-type: disc;
}
.offering-list li {
  color: #333; /* text colour */
}
.offering-list li::marker {
  color: #2563eb; /* bullet (disc) colour */
}

@media (max-width: 768px) {
  .section-title {
    font-size: 2rem;
  }
  .offering-card {
    padding: 20px;
  }
}

/* ------------------faq new section css---------------- */

.leadership-faq {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.leadership-faq h2 {
  margin-bottom: 10px;
  font-size: 2em;
}

.leadership-faq p {
  margin-bottom: 20px;
  color: #555;
}

.faq-item {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  background: #f0f4f8;
  border: none;
  padding: 15px 20px;
  font-size: 1.1em;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.faq-question:hover {
  background: #e8eff5;
}

.faq-question .icon {
  font-size: 1.2em;
  transition: transform 0.3s ease;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  background: #fff;
  padding: 0 20px;
}

.faq-answer p {
  margin: 15px 0;
  color: #464646;
  font-weight: 200;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.faq-item.active .faq-answer {
  max-height: 560px; /* adjust based on content size */
}

.faq-item.active .faq-question .icon {
  transform: rotate(45deg);
}

/* -------------------------video and content section------------------------- */

/* .seminar-section {
  background-color: #f6f6f6;
  padding: 60px 20px;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.seminar-section .container {

  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;

}

.video-column,
.text-column {

  flex: 1 1 50%;
  background-color: #fff;
  
}
.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 72.25%;
  height: 0;
  overflow: hidden; 
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.text-column {
  padding: 65px 25px;
  height: 385px;
}

.text-column h2 {
  font-size: 30px; 
  font-weight: 500;
  color: #222;
  text-align: left;
  margin-bottom: 20px;
}

.text-column p {
  font-size: 18px; 
  line-height: 1.6; 
  color: #555;
  padding: 0 12px 0 0;
  text-align: justify;
}


@media (max-width: 768px) {
  .seminar-section {
    padding: 40px 15px; 
  }

  .seminar-section .container {
    flex-direction: column;
    gap: 30px; 
  }

  .video-column,
  .text-column {
    flex: 1 1 100%; 
    padding: 0; 
    background-color: transparent; 
  }

  .text-column h2,
  .text-column p {
    text-align: center;
    padding: 0 5px; 
  }

  .video-column {
    margin-bottom: 15px; 
  }
} */

/* ===== Seminar Section ===== */
/* 
.seminar-section {
  background-color: #f6f6f6;
  padding: 60px 20px;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.seminar-section .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
 
}


.video-column,
.text-column {
  flex: 1 1 50%;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}


.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 62.25%; 
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.text-column {
  padding: 60px 30px;
}

.text-column h2 {
  font-size: 30px;
  font-weight: 500;
  color: #222;
  text-align: left;
  margin-bottom: 20px;
}

.text-column p {
  font-size: 18px;
  line-height: 1.6;
  color: #555;
  text-align: justify;
  margin: 0;
}





@media (max-width: 992px) {
  .seminar-section .container {
    flex-direction: column;
    align-items: center;
    gap: 50px;
  }

  .video-column,
  .text-column {
    flex: 1 1 100%;
    max-width: 700px;
    background-color: #fff;
  }

  .text-column {
    padding: 40px 20px;
  }

  .text-column h2 {
    font-size: 26px;
    text-align: center;
  }

  .text-column p {
    font-size: 17px;
    text-align: center;
  }
}



@media (max-width: 768px) {
  .seminar-section {
    padding: 40px 15px;
  }

  .seminar-section .container {
    gap: 30px;
  }

  .video-column,
  .text-column {
    background-color: transparent;
    box-shadow: none;
  }

  .text-column {
    padding: 20px 10px;
  }

  .text-column h2 {
    font-size: 24px;
    text-align: center;
    margin-bottom: 15px;
  }

  .text-column p {
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
  }
}



@media (max-width: 480px) {
  .text-column h2 {
    font-size: 22px;
  }

  .text-column p {
    font-size: 15px;
    padding: 0 5px;
  }

  .video-wrapper {
    padding-bottom: 60%; 
  }
} */

.seminar-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px 16px;
  background-color: #f8f8f8;
}

.seminar-section .container {
  display: flex;
  align-items: stretch; /* ✅ makes both columns equal height */
  justify-content: space-between;

  /* gap: 24px; */
  flex-wrap: wrap;
}

/* Columns */
.video-column,
.text-column {
  flex: 1 1 48%;
  min-width: 280px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: visible;
  display: flex; /* ✅ so inner content fills equal height */
  flex-direction: column;
}

/* Video wrapper */
.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
  flex-grow: 1; /* ✅ fills column height equally */
  display: flex;
}

.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Text column styling */
.text-column {
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertically centers text */
}

.text-column h2 {
  font-size: 26px;
  margin-bottom: 12px;
}

.text-column p {
  font-size: 16px;
  line-height: 1.6;
  color: #444;
}

/* Tablets and below */
@media (max-width: 992px) {
  .container {
    flex-direction: column;
    gap: 40px;
  }

  .video-column,
  .text-column {
    flex-basis: 100%;
    width: 100%;
  }
}

/* Mobile (<= 768px) */
@media (max-width: 768px) {
  .seminar-section {
    padding: 40px 15px;
  }

  .video-column,
  .text-column {
    box-shadow: none;
    border-radius: 6px;
  }

  .text-column {
    padding: 16px;
  }

  .text-column h2 {
    font-size: 22px;
  }

  .text-column p {
    font-size: 15px;
  }
}

/* Small Mobile (<= 480px) */
@media (max-width: 480px) {
  .video-wrapper {
    min-height: 180px;
  }
}
/* ------------------------------addon section---------------------------------- */

/* ================================== */
/* General Layout and Typography */
/* ================================== */

.training-feature-section {
  padding: 40px 150px;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  background-color: #f6f6f6;
}

.feature-container2 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.training-feature-heading {
  font-size: 32px;
  font-weight: 500;
  text-align: center;
  color: #333;
  margin-bottom: 10px;
}

.training-feature-subheading {
  text-align: center;
  color: #555;
  font-size: 18px;
  margin: 0 auto 40px;
  max-width: 800px;
  line-height: 1.6;
}

/* ================================== */
/* Grid Layout for Cards */
/* ================================== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  width: 100%;
}

/* ================================== */
/* Individual Feature Card Styling */
/* ================================== */
.feature-card-item {
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.feature-image-wrapper {
  height: 200px;
  overflow: hidden;
}

.feature-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.feature-card-item:hover .feature-card-image {
  transform: scale(1.05);
}

.feature-card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.feature-card-title {
  font-size: 17px;
  font-weight: 500;
  color: #333;
  margin-bottom: 15px;
  text-align: left;
}

/* ================================== */
/* List Styling */
/* ================================== */
.feature-list-group {
  list-style: none;
  padding-left: 0;
  margin-bottom: 25px;
  flex-grow: 1;
  text-align: justify;
}

.feature-list-group li {
  position: relative;
  padding: 0 22px 3px 18px;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  color: #2d2f3d;
  margin-bottom: 15px;
  text-align: left;
}

.feature-list-group li::before {
  content: "\2022";
  color: #007bff;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  font-size: 18px;
  line-height: 1;
}

/* ================================== */
/* Button Styling */
/* ================================== */
/* .feature-action-button {
  display: inline-block;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  transition: all 0.3s ease;
  margin-top: auto;
}

.feature-action-button.button-primary {
  background-color: #0056ff;
  color: #fff;
  border: 1px solid #0056ff;
}

.feature-action-button.button-primary:hover {
  background-color: #0045e0;
}

.feature-action-button.button-secondary {
  background-color: #fff;
  color: #0056ff;
  border: 1px solid #0056ff;
}

.feature-action-button.button-secondary:hover {
  background-color: #e6f0ff;
} */
.custom-btn {
  display: inline-block;
  background-color: rgb(0 79 239); /* blue background */
  color: #fff; /* white text */
  width: fit-content;
  padding: 12px 18px; /* vertical / horizontal padding */
  margin:50px 0px 4px 20px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border: none;
  border-radius: 4px; /* rounded corners */
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.custom-btn:hover {
  background-color: #0969cf; /* darker blue on hover */
}		
/* Force CTA to take full row in grid */




/* ================================== */
/* Responsive Design */
/* ================================== */

/* Tablets (≤ 992px): 2 cards per row */
@media (max-width: 992px) {
  .training-feature-section {
    padding: 40px 50px;
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .training-feature-heading {
    font-size: 28px;
  }

  .training-feature-subheading {
    font-size: 16px;
    margin-bottom: 30px;
  }
}

/* Mobile (≤ 600px): 1 card per row */
@media (max-width: 600px) {
  .training-feature-section {
    padding: 25px 20px;
  }

  .feature-grid {
    grid-template-columns: 1fr; /* ✅ One card per row */
    gap: 25px;
    justify-items: center;
  }

  .feature-card-item {
    width: 100%;
    max-width: 480px; /* Keeps cards nicely centered */
  }

  .training-feature-heading {
    font-size: 24px;
  }

  .training-feature-subheading {
    font-size: 15px;
    margin-bottom: 25px;
  }

  .feature-card-title {
    font-size: 16px;
  }

  .feature-list-group li {
    font-size: 15px;
  }

  .feature-action-button {
    width: 100%;
    font-size: 15px;
    padding: 10px 16px;
  }
}

/* -------------------addon section with 3 cards------------------ */
.training-feature-section-three {
  padding: 40px 150px;
  font-family: Arial, sans-serif;
  background-color: #f6f6f6;
}

.feature-container-three {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.training-feature-heading-three {
  font-size: 32px;
  font-weight: 500;
  text-align: center;
  color: #333;
  margin-bottom: 10px;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.training-feature-subheading-three {
  text-align: center;
  color: #555;
  font-size: 18px;
  margin: 0 auto 40px;
  max-width: 800px;
  line-height: 1.6;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Grid Layout for 3 Cards */
.feature-grid-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  width: 100%;
}

/* Card Styling */
.feature-card-item-three {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.feature-image-wrapper-three {
  height: 200px;
  overflow: hidden;
}

.feature-card-image-three {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-card-content-three {
  padding: 15px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.feature-card-title-three {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin-bottom: 15px;
  text-align: left;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

/* List Styling */
.feature-list-group-three {
  list-style: none;
  padding-left: 0;
  margin-bottom: 25px;
  flex-grow: 1;
  text-align: justify;
}

.feature-list-group-three li {
  position: relative;
  padding: 0 22px 3px 18px;
  font-size: 18px;
  font-weight: 200;
  line-height: 1.6;
  color: #2d2f3d;
  margin: 0 0 20px;
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Custom bullet (blue) */
.feature-list-group-three li::before {
  content: "\2022";
  color: #007bff;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  font-size: 18px;
  line-height: 1;
}

/* Buttons */
.feature-action-button-three {
  display: inline-block;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.3s ease;
  margin-top: auto;
}

.button-primary-three {
  background-color: #0056ff;
  color: #fff;
  border: 1px solid #0056ff;
}

.button-primary-three:hover {
  background-color: #0045e0;
}

/* Responsive */
@media (max-width: 992px) {
  .feature-grid-three {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .feature-grid-three {
    grid-template-columns: 1fr;
  }
  .training-feature-section-three {
    padding: 0px;
  }
}

/* ---------------green section left button------------------- */

/* Style for the section containing the button */
.button-section-left {
  padding: 20px; /* Add some padding around the button */
  text-align: left; /* Ensures content inside starts from the left */
}

/* Style for the button */
.custom-left-button {
  display: inline-block; /* Allows setting padding and margin */
  padding: 10px 20px; /* Adjust padding to match button size in image */
  font-size: 16px; /* Adjust font size as needed */
  color: #000; /* Text color */
  background-color: transparent; /* No fill for the button */
  border: 2px solid #330033; /* Darker border color */
  border-radius: 4px; /* Slightly rounded corners */
  text-decoration: none; /* Removes underline from link */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effect */

  /* Positioning on the left */
  margin: 0; /* Ensures no default margin pushes it from the left */
}

.custom-left-button:hover {
  background-color: #330033; /* Darker background on hover */
  color: #fff; /* White text on hover */
  cursor: pointer;
}

/* ----------********popup card css********------------------- */

.pop-card-section {
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: center;
  justify-content: center;
  padding: 30px;
  margin: 0 auto; /* center container horizontally */
}

.popup-card {
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 20px;
  width: 100%; /* make all cards same width */
  max-width: 400px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  box-sizing: border-box;
}

.logo-container h1 {
  background-color: #153391;
  color: white;
  font-weight: 900;
  font-size: 58px;
  font-family: "Arial Rounded MT Bold", "Arial Black", sans-serif;
  border-radius: 40px;
  padding: 8px 30px;
  letter-spacing: 0.8px;
}
/* --- Logo Styling --- */
/* .logo-container {
  margin: 10px 0 25px 0;
  display: flex;
  justify-content: center;
} */

.logo {
  width: 100%;
  max-width: 250px;
  height: auto;
}

.course-title {
  font-size: 18px;
  font-weight: bold;
  color: #000;
  margin-bottom: 10px;
}

.course-dates {
  font-size: 14px;
  color: #555;
  margin-bottom: 30px;
}

.read-more-btn {
  background-color: #0066cc;
  color: white;
  border: none;
  padding: 12px 0;
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  text-transform: capitalize;
  transition: background-color 0.3s;
}

.read-more-btn:hover {
  background-color: #005bb5;
}

/* --- Styling for the overall section --- */
.schedule-container {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  padding: 30px;
  /* background-color: #f0f0f0; */

  /* NEW: Constrains the width of the entire section and centers it */
  max-width: 1200px; /* Adjust this value to make the whole section wider or narrower */
  margin: 0 auto;
}

/* --- Subheading Styling --- */
.schedule-header h2 {
  font-size: 19px;
  color: #004fef;
  margin-bottom: 25px;
  padding-left: 0; /* Removing the left padding/border for a cleaner look like the screenshot */
  border-left: none;
  font-weight: 600; /* Bolder as seen in the image */
}

/* --- CSS Grid Layout for 2 Columns --- */
.course-grid {
  display: grid;
  /* 2 equal columns with a gap */
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

/* --- Styling for each individual box --- */
.course-box {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 20px;
  min-height: 80px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

  /* Layout for content inside the box */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Aligns content to the top */

  transition: box-shadow 0.2s;
}

.course-box:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* --- Text and Link Styling --- */
.course-text {
  font-size: 1.1em;
  color: #333333;
  font-weight: 500;
  margin-bottom: 10px;
}

.read-more-link {
  display: inline-block;
  color: #007bff; /* Blue link color */
  text-decoration: none;
  font-size: 1em;
  /* NEW: Adds an underline only for the link text */
  border-bottom: 1px solid #007bff;
  padding-bottom: 2px;
  font-weight: 400; /* Normal weight for link text */
  align-self: flex-start;
}

.read-more-link:hover {
  text-decoration: none; /* Removes the default hover underline */
  border-bottom: 1px solid transparent; /* Subtle change on hover */
}

/* --- Mobile Responsiveness --- */
@media (max-width: 650px) {
  .schedule-container {
    /* Remove max-width on tiny screens to use full available space */
    max-width: 100%;
    padding: 15px;
  }
  .course-grid {
    /* On small screens, switch to 1 item per row (full width) */
    grid-template-columns: 1fr;
  }
}


 .popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-overlay .popup-content {
  background: #fff;
  width: 50%;
  max-width: 650px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  position: relative;
}

.popup-overlay .popup-body {
  padding: 25px;
  overflow-y: auto;
  flex: 1;
}

.popup-overlay .popup-buttons {
  padding: 15px 25px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.popup-close {
  position: absolute;
  top: 12px;
  right: 15px;
  font-size: 22px;
  cursor: pointer;
}
 
/* ------------------BQA LOGO CSS---------------- */

.logo-section1 {
  text-align: center;
  padding: 60px 0 60px;
  background-color: #fff;
}
.logo-section1 h2{
	font-size: 18px;
    font-weight: 400;
    padding-left: 80px;
    color: #1a1919;
    font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
.logo-section1 a{
	border-bottom:4px solid #7ffcff;
}
.logo-image1 {
  /* width: 800px;
  height: 145px; */
  display: block;
  object-fit: contain;
  margin: 0 auto;
}

/* Optional: To make the logo responsive on smaller screens */
@media (max-width: 820px) {
  .logo-image1 {
    /* Set the width to 100% of its container (max 800px) */
    width: 100%;
    /* Let the height adjust automatically to maintain the original aspect ratio. 
           This is generally recommended for responsive images to prevent distortion. */
    height: auto;
    /* The max-height property ensures the image won't exceed the original 145px height */
    max-height: 145px;
  }
}

/* -------------------SHOP PAGE CSS-------------------- */

.language-course-info {
  background-color: #fff;
  max-width: 1300px;
  margin: 0 auto;
  line-height: 1.9;
  padding: 50px 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #444444;
}

/* ----------------------------------------------------
 * Paragraph and Line Styles
 * ----------------------------------------------------
 */
.intro-text {
  margin: 0 0 40px 0;
  font-size: 16px;
  padding-left: 200px; /* Desktop default */
  font-weight: 300;
  color: #4c4c4c;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.course-list {
  margin: 0 0 18px 0;
  font-size: 16px;
  display: flex;
  padding-left: 200px; /* Desktop default */
}

.course-list.last-item {
  margin-bottom: 0;
}

.course-list strong {
  font-weight: bold;
  margin-right: 5px;
}

/* ----------------------------------------------------
 * Mobile Responsive Styles
 * ----------------------------------------------------
 */
@media (max-width: 1024px) {
  .intro-text,
  .course-list {
    padding-left: 100px; /* Less padding for tablets */
    font-size: 15px;      /* Slightly smaller text */
  }
}

@media (max-width: 768px) {
  .intro-text,
  .course-list {
    padding-left: 20px;   /* Minimal padding for phones */
    font-size: 14px;      /* Readable on small screens */
  }
}

@media (max-width: 480px) {
  .intro-text,
  .course-list {
    padding-left: 15px;   /* Very small padding for very small phones */
    font-size: 13px;      /* Smaller text for small screens */
  }
}

/* * ----------------------------------------------------
 * Link/Category Styles (The green highlighted text)
 * ----------------------------------------------------
 */
.consultation-link,
.category-link {
  color: #444444; /* Keep the link text color the same as the body text */
  text-decoration: none; /* Remove default underline */
  border-bottom: 4px solid #50dfa1;
  padding-bottom: 1px; /* Small space between text and underline */
  font-weight: 300;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.consultation-link {
  /* Specific styling for the single 'receive a consultation' link */
  /* This ensures only 'receive a consultation' is green, not the 'or' */
  color: inherit;
  white-space: nowrap; /* Prevents the link from breaking onto a new line */
}

/* Hover effect is good practice */
.consultation-link:hover,
.category-link:hover {
  border-color: #2e8b57; /* Darker green on hover */
  cursor: pointer;
}

.language-courses-section {
  background-color: #f3f5f6; /* Very light blue/gray background */
  padding: 40px 20px 80px;
  font-family: Arial, sans-serif;
  color: #444;
}

.language-courses-section h1 {
  font-size: 28px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 40px;
}

/* * Two-Column Layout (Flexbox) 
 */
.courses-container {
  display: flex;
  justify-content: center;
  gap: 30px; /* Space between the two cards */
  max-width: 1200px;
  margin: 0 auto;
}

/* * Course Cards (The white boxes) 
 */
.course-card {
  background-color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Subtle shadow */
  padding: 30px;
  border-radius: 4px;
  width: 50%; /* Each card takes up half the space */
  min-width: 380px; /* Ensure they don't get too small */
}

/* * Specific Styling for the Left Card 
 */
.left-card {
  /* To push the title highlight to the left edge */
  padding-left: 30;
  padding-right: 30px;
}

.course-title-highlight {
  background-color: #3ddc97;
  color: #000000;
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
  padding: 10px 15px 10px 15px;
  width: fit-content;
  margin-top: 0px;
}

/* * Table Styling 
 */
.course-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  text-align: left;
}

.course-table th {
  font-weight: normal;
  padding: 10px 5px;
  color: #2a2a2a;
  border-bottom: 1px solid #eee; /* Light divider line */
}

.course-table td {
  padding: 10px 5px;
  border-bottom: 1px solid #eee;
  line-height: 1.4;
}

/* * Special Highlight Row (The light blue row on the right)
 */
.highlight-row {
  background-color: #e6eef9; /* Light blue background color */
}

/* * Link and Highlight Styling (The green underlines)
 */
.highlight-link {
  color: #2a2a2a; /* Inherit the text color */
  text-decoration: none; /* Remove default underline */
  border-bottom: 4px solid #50dfa1;
  padding-bottom: 1px;
}

.course-detail {
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #666;
}

/* * Footnote Style (The *per month text) 
 */
.footnote {
  font-size: 12px;
  color: #666;
  margin-top: 20px;
}

.language-courses-section {
  background-color: #f3f5f6; /* Very light blue/gray background */
  padding: 40px 20px 80px;
  font-family: Arial, sans-serif;
  color: #444;
}

.language-courses-section h1 {
  font-size: 28px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 40px;
}

/* * Two-Column Layout (Flexbox) 
 */
.courses-container {
  display: flex;
  justify-content: center;
  gap: 30px; /* Space between the two cards */
  max-width: 1200px;
  margin: 0 auto;
}

/* * Course Cards (The white boxes) 
 */
.course-card {
  background-color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Subtle shadow */
  padding: 30px;
  border-radius: 4px;
  width: 50%; /* Each card takes up half the space */
  min-width: 380px; /* Ensure they don't get too small */
}

/* * Specific Styling for the Left Card 
 */
.left-card {
  /* To push the title highlight to the left edge */
  padding-left: 30;
  padding-right: 30px;
}

.course-title-highlight {
  background-color: #3ddc97;
  color: #000000;
  font-size: 18px;
  font-weight: bold;
  padding: 5px 30px 5px 50px; /* Padding pushes text right */
  margin: -30px 0 30px; /* Adjust to align with card edges */
  display: inline-block;
}

/* * Table Styling 
 */
.course-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  text-align: left;
}

.course-table th {
  font-weight: normal;
  padding: 10px 5px;
  color: #2a2a2a;
  border-bottom: 1px solid #eee; /* Light divider line */
}

.course-table td {
  padding: 10px 5px;
  border-bottom: 1px solid #eee;
  line-height: 1.4;
}

/* * Special Highlight Row (The light blue rows)
 */
.highlight-row {
  background-color: #e6eef9; /* Light blue background color */
}

/* * Styling for the detail rows (e.g., "1,5 mo.")
 */
.course-detail-row td {
  border-bottom: 1px solid #eee;
  padding-top: 0; /* Reduce space above the detail text */
  padding-bottom: 5px; /* Adjust as needed */
  vertical-align: top;
}

.course-detail-row .course-detail {
  /* Indent the detail text to align with the course title */
  margin-left: 5px;
}

/* Remove bottom border for the last detail row if it's the very last in tbody */
.course-table tbody tr:last-child.course-detail-row td {
  border-bottom: none;
}

/* * Link and Highlight Styling (The green underlines)
 */
.highlight-link {
  color: #2a2a2a; /* Inherit the text color */
  text-decoration: none; /* Remove default underline */
  border-bottom: 4px solid #50dfa1;
  padding-bottom: 1px;
}

.course-detail {
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #666;
}

/* * Footnote Style (The *per month text) 
 */
.footnote {
  font-size: 12px;
  color: #666;
  margin-top: 20px;
}

/* * Responsive adjustments */
@media (max-width: 768px) {
  .courses-container {
    flex-direction: column; /* Stack cards vertically on small screens */
    align-items: center;
  }

  .course-card {
    width: 95%; /* Make cards almost full width */
    max-width: 500px; /* Limit max width for readability */
    margin-bottom: 20px; /* Space between stacked cards */
    padding: 20px; /* Adjust padding for smaller screens */
  }

  .left-card {
    padding-left: 20px; /* Reset padding for stacked cards */
  }

  .course-title-highlight {
    padding: 5px 20px; /* Adjust title padding */
    margin: -20px 0 20px;
  }
}

/* -----------------2 box2------------------- */

.language-courses-section {
  background-color: #f3f5f6; /* Very light blue/gray background */
  padding: 75px 20px 0px;
  font-family: Arial, sans-serif;
  color: #444;
}

.language-courses-section h1 {
  display: none; /* Title is hidden in this specific layout */
}

/* * Two-Column Layout (Flexbox) 
 */
/* Force card to be wider and fix unwanted height stretch */
.courses-container {
  display: flex;
  justify-content: center;
  align-items: stretch; /* ✅ makes all cards equal height */
  gap: 30px; /* space between cards */
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
}

.course-card {
  background-color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  padding: 35px;
  border-radius: 6px;
  width: 48%;
  min-width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* keeps footer at bottom */
}

/* * Specific Styling for the Card Titles 
 */
.course-card h2 {
  font-weight: normal; /* Override default h2 bolding */
}

.course-title-highlight {
  background-color: #59d282;
  color: #000000;
  font-size: 18px;
  font-weight: bold;
  padding: 5px 30px 5px 50px; /* Padding pushes text right */
  margin: -30px 0 30px; /* Adjust to align with card edges */
  display: inline-block;
}

/* * Table Styling 
 */
.course-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
  margin-bottom: 20px; /* Space before the footnote */
}

.course-table thead {
  /* Ensures the table header is always white */
  background-color: white;
}

.course-table th {
  font-weight: normal;
  padding: 10px 5px;
  color: #2a2a2a;
  border-bottom: 1px solid #eee; /* Light divider line */
}

.course-table td {
  padding: 10px 5px;
  border-bottom: 1px solid #eee;
  line-height: 1.4;
}

/* * Special Highlight Row (The light blue rows)
 */
.highlight-row {
  background-color: #e6eef9; /* Light blue background color */
}

/* Remove bottom border for the last table row */
.course-table tbody tr:last-child td {
  border-bottom: none;
}

/* * Link and Highlight Styling (The green underlines)
 */
.highlight-link {
  color: #2a2a2a; /* Inherit the text color */
  text-decoration: none; /* Remove default underline */
  border-bottom: 4px solid #50dfa1;
  padding-bottom: 1px;
}

.course-detail {
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #666;
}

/* * Footnote Style (*per month text) 
 */
.footnote {
  font-size: 12px;
  color: #666;
  margin: 0 0 20px 0; /* Space below the footnote */
}

/* * Request Text Style (The bottom line)
 */
.request-text {
  font-size: 14px;
  margin-top: auto; /* Pushes the text to the bottom of the flex container */
}

.request-text a {
  color: #444; /* Keep link text color dark */
  text-decoration: none;
  border-bottom: 3px solid #79d799; /* Green underline for the link */
  padding-bottom: 1px;
}

/* * Responsive adjustments */
@media (max-width: 768px) {
  .courses-container {
    flex-direction: column;
    align-items: center;
  }

  .course-card {
    width: 95%;
    max-width: 500px;
    margin-bottom: 20px;
  }

  .course-title-highlight {
    padding: 5px 20px;
    margin: -20px 0 20px;
  }
}

/* --------------------2 box3----------------------- */

.language-courses-section {
  background-color: #f3f5f6; /* Light gray background */
  padding: 40px 20px 80px;
  font-family: Arial, sans-serif;
  margin-top: -25px;
  color: #444;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 500px;
  width: 100%; /* Ensure full container width */
}

/* Single course card */
.course-card {
  background-color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  padding: 40px; /* Slightly more padding for larger card */
  border-radius: 4px;
  width: 90%; /* ⬅️ Let it take most of the section width */
  max-width: 1000px; /* ⬅️ Wider than before */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.language-courses-section {
  background-color: #f3f5f6; /* Very light blue/gray background */
  padding: 40px 20px 80px;
  font-family: Arial, sans-serif;
  margin-top: -25px;
  color: #444;
  display: flex; /* Use flex to center the single card */
  justify-content: center;
  align-items: flex-start; /* Align at the top */
  min-height: 500px; /* Ensure enough height for context */
}

/* Hide the h1 if this is a standalone section */
.language-courses-section h1 {
  display: none;
}

/* * Course Cards (The white box) 
 */
.course-card {
  background-color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Subtle shadow */
  padding: 30px;
  border-radius: 4px;
  width: 100%; /* Default to full width for responsiveness */
  max-width: 500px; /* Max width for a single card */
  display: flex; /* Use flex to push the request-text to the bottom */
  flex-direction: column;
  justify-content: space-between;
}

/* * Specific Styling for the Card Title 
 */
.course-card h2 {
  font-weight: normal;
}

.course-title-highlight {
  background-color: #59d282;
  color: #000000;
  font-size: 18px;
  font-weight: bold;
  padding: 5px 30px 5px 50px; /* Padding pushes text right */
  margin: -30px 0 30px; /* Adjust to align with card edges */
  display: inline-block;
}

/* * Table Styling 
 */
.course-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
  margin-bottom: 20px; /* Space before the request text */
}

.course-table thead {
  background-color: white;
}

.course-table th {
  font-weight: normal;
  padding: 10px 5px;
  color: #2a2a2a;
  border-bottom: 1px solid #eee; /* Light divider line */
}

.course-table td {
  padding: 10px 5px;
  border-bottom: 1px solid #eee;
  line-height: 1.4;
}

/* * Special Highlight Row (The light blue row)
 */
.highlight-row {
  background-color: #e6eef9; /* Light blue background color */
}

/* Remove bottom border for the last table row */
.course-table tbody tr:last-child td {
  border-bottom: none;
}

/* * Link and Highlight Styling (The green underlines)
 */
.highlight-link {
  color: #2a2a2a; /* Inherit the text color */
  text-decoration: none; /* Remove default underline */
  border-bottom: 4px solid #50dfa1;
  padding-bottom: 1px;
}

.course-detail {
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #666;
}

/* * Request Text Style (The bottom line)
 */
.request-text {
  font-size: 14px;
  margin-top: auto; /* Pushes the text to the bottom of the flex container */
}

.request-text a {
  color: #444; /* Keep link text color dark */
  text-decoration: none;
  border-bottom: 3px solid #79d799; /* Green underline for the link */
  padding-bottom: 1px;
}

/* * Responsive adjustments for single card */
@media (max-width: 768px) {
  .course-card.single-card {
    width: 95%; /* Adjust width for smaller screens */
    padding: 20px;
  }

  .course-title-highlight {
    padding: 5px 20px;
    margin: -20px 0 20px;
  }
}

/* -------------------------blue table section css-------------------- */

.language-course-container {
  font-family: Arial, sans-serif;
  padding: 20px;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
}

/* Flex Container for Two Columns */
.language-course-flex {
  display: flex;
  justify-content: center;
  gap: 30px;
}

/* Individual Course Column Styling (White box with subtle shadow) */
.language-course-column {
  flex: 1;
  min-width: 450px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  padding-top: 20px; /* Ensures space above the header */
}

.language-course-column.language-course-italian {
  max-width: 400px;
  min-width: 350px;
}

/* --- Header Styling (Purple box) - MODIFIED FOR LEFT ALIGNMENT --- */
.language-course-header {
  color: white;
  padding: 12px 15px;
  margin: 0 0 20px 20px; /* Pushes the element 20px from the left edge of the column */
  font-size: 1.2em;
  font-weight: 500;
  background-color: #794c9d;
  display: inline-block;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Table Styling */
.language-course-table-wrapper {
  padding: 0 20px 20px 20px; /* 20px left padding keeps the table aligned with the header */
}

.language-course-table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.9em;
  color: #333;
}

.language-course-table-wrapper th,
.language-course-table-wrapper td {
  padding: 12px 10px;
  text-decoration: none;
  vertical-align: top;
}

/* Table Header Row and Cells */
.language-course-table-wrapper thead tr {
  border-bottom: none;
  color: #333;
}

.language-course-table-wrapper th {
  font-weight: 600;
  border-bottom: 1px solid #ddd;
  color: #666;
}

/* Table Body Rows */
.language-course-table-wrapper tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Highlighted Rows (Light Blue/Lavender) */
.language-course-table-wrapper tbody tr.language-course-highlight-row {
  background-color: #f0f8ff;
}

/* Green Border Link Styling (The Course Name) */
.course-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 4px solid #50dfa1;
  display: inline-block;
  line-height: 1.2;
}

/* Styling for age note (e.g., (from 8 y.)) */
.language-course-age-note {
  color: #4caf50;
  font-size: 0.8em;
  font-weight: normal;
  white-space: nowrap;
  text-decoration: none;
  display: block;
  margin-top: 5px;
}

/* Price and Pax column text alignment */
.language-course-table-wrapper tbody td:nth-child(3), /* Pax column */
.language-course-table-wrapper tbody td:nth-child(4) {
  /* From column */
  text-align: right;
  font-weight: 500;
}

/* Responsive Design for smaller screens */
@media (max-width: 1000px) {
  .language-course-flex {
    flex-direction: column;
    align-items: center;
  }

  .language-course-column {
    width: 100%;
    max-width: 600px;
    min-width: auto;
    padding-top: 20px; /* Retain top padding */
  }

  .language-course-header {
    margin: 0 0 20px 20px; /* Keep left alignment */
  }
}

/* ----------------------img and content in shop page ------------------------ */

.berlitz-section-container {
  padding: 40px 20px;
  background-color: #fff; /* Very light background outside the main box */
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
}

/* --- Main Content Box (White box with shadow) --- */
.berlitz-content-box {
  display: flex;
  max-width: 900px; /* Overall width of the content box */
  background-color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow around the whole box */
}

/* --- Text Column Styling --- */
.berlitz-text-column {
  flex: 1; /* Allows the text column to take up half the space */
  padding: 40px;
  padding-right: 20px; /* Reduce padding on the side next to the image */
  line-height: 1.6;
}

.berlitz-text-column h2 {
  font-size: 1.8em;
  font-weight: 500;
  margin-bottom: 25px;
}

.berlitz-text-column ul {
  list-style-type: none; /* Remove default bullet points */
  padding-left: 0;
  margin: 0;
}

.berlitz-text-column li {
  position: relative;
  padding-left: 20px; /* Space for the custom bullet */
  margin-bottom: 15px;
  font-size: 16px;
  color: #000;
  font-weight: 300;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Custom Bullet Point (Small Blue Dot) */
.berlitz-text-column li::before {
  content: "•";
  color: #3fa9d5; /* A shade of blue for the bullet */
  font-size: 1.5em;
  position: absolute;
  left: 0;
  top: -3px; /* Adjust vertical alignment */
}

.berlitz-text-column strong {
  font-weight: 700; /* Bolder text for emphasis */
}

/* --- Image Column Styling --- */
.berlitz-image-column {
  flex: 1; /* Allows the image column to take up the other half */
  min-width: 40%; /* Ensure the image column doesn't disappear */
  overflow: hidden; /* Important to ensure the image fits perfectly */
}

.berlitz-image-column img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* Ensures the image covers the column area without distortion */
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
  .berlitz-content-box {
    flex-direction: column; /* Stack columns vertically on smaller screens */
    max-width: 100%;
  }

  .berlitz-text-column {
    padding: 20px;
    padding-right: 20px;
  }
}

/* -------------------dropdown section in blog page -------------------- */

/* --- 1. Global Positioning (Right Alignment) --- */
.custom-select {
  position: absolute;
  /* top: 20px;  */
  right: 190px;
  z-index: 99;
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

/* --- 2. Visible Header (The Box) --- */
.select-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 5px;
  border: 1px solid #d2d2d2;
  background-color: white;
  cursor: pointer;
  min-width: 168px;
  user-select: none;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 200;
  color: #191919;
}

/* 3. Custom Dropdown Arrow */
.dropdown-arrow::after {
  content: "v"; /* Simple 'v' or '\2304' */
  font-size: 14px;
  margin-left: 10px;
  display: inline-block;
  transition: transform 0.3s;
}

/* --- 4. Dropdown Options List --- */
.select-options {
  position: absolute;
  top: 100%; /* Positions the list right below the header */
  /* Aligning the list to the right edge of the header */
  left: 0;

  list-style: none;
  padding: 0;
  margin: -2px 0 0 0; /* Overlap the top border */
  border: 2px solid #333;
  border-top: none; /* Remove the top border to merge visually */
  background-color: white;
  z-index: 10;
  min-width: 100%; /* Match the width of the header */

  /* KEY FOR OPEN/CLOSE: Initially hide the list */
  display: none;
}

/* --- 5. State: When the dropdown is open (Toggled by JavaScript) --- */
.custom-select.open .select-options {
  display: block; /* Show the list when the 'open' class is present */
}

.custom-select.open .dropdown-arrow::after {
  /* Optional: Rotate arrow up when open */
  transform: rotate(-180deg);
}

/* --- 6. Individual List Options & Styling --- */
.option {
  padding: 8px 10px;
  cursor: pointer;
  color: #333;
}

/* The blue bar highlight */
.option.active-option {
  background-color: #3b82f6; /* A clean, deep blue */
  color: white;
}

/* Hover effect for options that are not the current selection */
.option:not(.active-option):hover {
  background-color: #f0f0f0; /* Light gray hover background */
}
/* ----------------------------------------------------
 * Responsive Dropdown Fix
 * ---------------------------------------------------- */

/* Tablets */
@media (max-width: 1024px) {
  .custom-select {
    right: 80px;   /* Reduce right offset */
    font-size: 15px;
  }

  .select-header {
    min-width: 150px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .custom-select {
    position: relative; /* Prevent overflow */
    right: auto;
    margin: 10px auto;
    display: block;
    width: fit-content;
  }

  .select-header {
    min-width: 100%;
    padding: 10px 12px; /* Better tap size */
    font-size: 14px;
  }

  .select-options {
    position: absolute;
    left: 0;
    width: 100%;
    max-height: 220px; /* Prevent tall overflow */
    overflow-y: auto;
  }

  .option {
    padding: 12px 14px; /* Thumb-friendly */
    font-size: 14px;
  }
}

/* Small Phones */
@media (max-width: 480px) {
  .custom-select {
    width: 100%;
    max-width: 220px;
  }

  .select-header {
    font-size: 13px;
  }

  .dropdown-arrow::after {
    font-size: 12px;
  }
}


/* -----------------img & content css in blog page------------------------ */

/* Container for the entire section/card */
.blog-card {
  display: flex; /* Enables Flexbox layout */
  max-width: 1150px; /* Limits the overall width of the card */
  margin: 50px auto; /* Centers the card on the page */
  background-color: white;
  height: 350px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* Optional subtle shadow */
}

/* 1. Image Styling */
.card-image {
  flex: 0 0 50%; /* Image takes roughly half the card width */
  max-width: 50%;
  overflow: hidden; /* Ensures image doesn't overflow its container */
}

.card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image fills the space without distortion */
}

/* 2. Content Styling */
.card-content {
  flex: 1; /* Content takes the remaining available space */
  padding: 30px 40px; /* Padding inside the content area */
  display: flex; /* Use Flexbox to stack items vertically */
  flex-direction: column;
  justify-content: center; /* Vertically centers the text content */
}

/* Date Text */
.card-date {
  margin: 0 0 5px 0;
  font-size: 14px;
  color: #6c757d; /* Slightly muted color for the date */
}

/* Title Text */
.card-titles {
  margin: 0 0 20px 0;
  font-size: 28px;
  font-weight: 500; /* Medium weight, not too bold */
  line-height: 1.3;
  color: #343a40; /* Dark text color */
}

/* Read Article Link */
.read-link {
  text-decoration: none; /* Remove default underline */
  color: #655e5e; /* Teal/dark green color seen in the image */
  font-size: 16px;
  display: inline-block;
  padding-bottom: 2px; /* Space for the custom underline */
  position: relative;
  font-weight: 500;
  /* left: 26px; */
  margin-top: 25px;
}

/* Custom Green Underline Effect */
.read-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 17%;
  height: 2px;
  border-bottom: 4px solid #50dfa1;
  transform: scaleX(1);
  transform-origin: bottom left;
}
/* ----------------------------------------------------
 * Responsive Styles
 * ---------------------------------------------------- */

/* Tablets */
@media (max-width: 1024px) {
  .blog-card {
    max-width: 95%;
    height: auto; /* Remove fixed height */
  }

  .card-titles {
    font-size: 24px;
  }
}

/* Mobile devices */
@media (max-width: 768px) {
  .blog-card {
    flex-direction: column; /* Stack image & content */
    height: auto;
    margin: 30px 15px;
  }

  .card-image {
    max-width: 100%;
    flex: 0 0 auto;
    height: 220px; /* Controlled image height */
  }

  .card-image img {
    height: 100%;
  }

  .card-content {
    padding: 20px;
    justify-content: flex-start;
  }

  .card-date {
    font-size: 13px;
  }

  .card-titles {
    font-size: 20px;
    margin-bottom: 15px;
  }

  .read-link {
    font-size: 15px;
    margin-top: 15px;
  }

  .read-link::after {
    width: 30%; /* More visible underline on mobile */
  }
}

/* Small phones */
@media (max-width: 480px) {
  .card-image {
    height: 180px;
  }

  .card-titles {
    font-size: 18px;
  }

  .read-link {
    font-size: 14px;
  }
}


/* --------------blog page card section css-------------- */

/* --- Global Grid Layout --- */
.blog-card-grid {
  display: grid;
  /* Create 3 equal columns */
  grid-template-columns: repeat(3, 1fr);
  gap: 30px; /* Space between the cards */
  padding: 20px 50px; /* Overall padding for the section */
  max-width: 1200px;
  margin: 50px auto; /* Centers the grid */
}

/* --- Individual Card Styling --- */
.blog-post-card {
  background-color: white;
  border-radius: 4px;
  /* Optional: Subtle box shadow */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  overflow: hidden; /* Ensures image borders are contained */
}

/* 1. Image Styling */
.blog-card-image {
  width: 100%;
  /* Set a fixed aspect ratio for all images */
  height: 180px;
  overflow: hidden;
}

.blog-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Crops and centers the image nicely */
}

/* 2. Content Styling */
.blog-card-content {
  padding: 20px 20px 30px 20px;
  font-family: Arial, sans-serif;
}

/* Date Text (Light Green) */
.blog-card-date {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 500;
  color: #585a5c; /* Light green, matching the image */
}

/* Title Text */
.blog-card-title {
  margin: 0 0 15px 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: #343a40;
}

/* Read Article Link */
.blog-read-link {
  text-decoration: none;
  color: #4caf50; /* Match the light green color */
  font-size: 14px;
  display: inline-block;
  padding-bottom: 2px;
  position: relative;
  font-weight: 500;
}

/* Custom Green Underline Effect */
.blog-read-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px; /* Thickness of the underline */
  background-color: #4caf50;
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* --- Responsive Design --- */
@media (max-width: 900px) {
  .blog-card-grid {
    /* On medium screens, switch to 2 columns */
    grid-template-columns: repeat(2, 1fr);
    padding: 20px;
  }
}

@media (max-width: 600px) {
  .blog-card-grid {
    /* On small screens, switch to 1 column */
    grid-template-columns: 1fr;
  }
}

#more-blog-posts {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

#more-blog-posts.show {
  display: block;
  opacity: 1;
}
/* -----------------------img and content css--------------------- */

/* Basic Reset/Container Styling */
.arabic-course-section {
  display: flex; /* Use Flexbox for side-by-side layout */
  max-width: 1200px; /* Adjust as needed */
  margin: 40px auto; /* Center the section on the page */
  background-color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Optional: Adds a subtle lift/card effect */
  border-radius: 8px; /* Optional: Slight rounded corners */
  overflow: hidden; /* Ensures image corners are within the container's radius */
}

/* Image Column Styling */
.image-container {
  flex: 1 1 50%; /* Image takes roughly half the width */
  max-width: 50%;
  /* The main image in the provided example looks like it has an effect overlay/filter, 
       but for basic structure, this is enough. */
}

.course-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the container without distortion */
  display: block; /* Removes any default bottom spacing */
}

/* Content Column Styling */
.content-container {
  flex: 1 1 50%; /* Content takes roughly half the width */
  max-width: 50%;
  padding: 40px 50px; /* Inner padding for the text */
  font-family: "Arial", sans-serif; /* Use a clean, sans-serif font */
}

.section-title3 {
  font-size: 32px;
    font-weight: 400;
    color: #333;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: left;
    font-family: "Poppins", sans-serif;
}

.content-container p {
  font-size: 16px; /* Standard paragraph text size */
  line-height: 1.6; /* Good readability */
  color: #8d8d8d; /* Slightly lighter text color */
  margin-bottom: 15px;
	font-weight: 400;
    font-family: 'Source Sans Pro', sans-serif;
}

/* Learn More Link Styling */
.learn-more-link {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none; /* Remove underline */
  color: #38a169; /* Example green color matching the image's link */
  border-bottom: 2px solid #38a169; /* Underline effect */
  padding-bottom: 2px;
  margin-top: 15px;
  transition: color 0.3s, border-color 0.3s;
}

.learn-more-link:hover {
  color: #2c774f; /* Darker green on hover */
  border-color: #2c774f;
}

/* Optional: Responsiveness for smaller screens */
@media (max-width: 768px) {
  .arabic-course-section {
    flex-direction: column; /* Stack columns vertically on small screens */
  }

  .image-container,
  .content-container {
    max-width: 100%; /* Both take full width */
  }

  .content-container {
    padding: 30px; /* Reduce padding on small screens */
  }
}
.partners-content h2{
	font-size:32px;
	font-weight:400;
}
.partners-content p{
	font-size:18px;
	font-weight:200;
}
fieldset.hidden-fields-container{
	display:none;
}
.content-container-ad p{
	font-size:18px;
}


input.wpcf7-form-control.wpcf7-submit.has-spinner {
  background: #00b0ba;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 36px;
  border: 1px solid #fff;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

/* Hover effect */
input.wpcf7-form-control.wpcf7-submit.has-spinner:hover {
  background: #00b0ba;
	color:#fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}
.submit-btn{
	text-align:center;
}
/* ----------------------------------------------------
 * TABLET
 * ---------------------------------------------------- */
@media (max-width: 1024px) {

  .content-container {
    padding: 30px 35px;
  }

  .section-title3 {
    font-size: 28px;
  }

  .content-container p {
    font-size: 15px;
  }

  .partners-content h2 {
    font-size: 28px;
  }

  .partners-content p,
  .content-container-ad p {
    font-size: 16px;
  }
}


/* ----------------------------------------------------
 * MOBILE
 * ---------------------------------------------------- */
@media (max-width: 768px) {

  .arabic-course-section {
    flex-direction: column; /* Stack image & content */
    margin: 20px 15px;
    border-radius: 6px;
  }

  .image-container,
  .content-container {
    max-width: 100%;
  }

  .course-image {
    height: 240px; /* Prevent tall image overflow */
  }

  .content-container {
    padding: 20px;
  }

  .section-title3 {
    font-size: 24px;
    margin-bottom: 15px;
  }

  .content-container p {
    font-size: 14px;
    line-height: 1.5;
  }

  .learn-more-link {
    font-size: 14px;
    margin-top: 10px;
  }

  .partners-content h2 {
    font-size: 24px;
  }

  .partners-content p,
  .content-container-ad p {
    font-size: 15px;
  }

  input.wpcf7-form-control.wpcf7-submit.has-spinner {
    font-size: 14px;
    padding: 10px 28px;
  }
}


/* ----------------------------------------------------
 * SMALL PHONES
 * ---------------------------------------------------- */
@media (max-width: 480px) {

  .course-image {
    height: 200px;
  }

  .section-title3 {
    font-size: 22px;
  }

  .partners-content h2 {
    font-size: 22px;
  }

  .partners-content p,
  .content-container-ad p {
    font-size: 14px;
  }

  input.wpcf7-form-control.wpcf7-submit.has-spinner {
    width: 100%;
    max-width: 280px;
  }
}

#scrollToTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99999; /* very high to stay above header/Google Translate */
  background-color: #0354de;
  color: #fff;
  border: none;
  outline: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 24px;
  display: none; /* hidden by default, JS will show */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s, transform 0.3s;
}

#scrollToTopBtn:hover {
  background-color: #0241b3;
  transform: translateY(-3px);
  color: #fff;
}

/* Extra small mobile tweak */
@media (max-width: 480px) {
  #scrollToTopBtn {
    width: 40px;
    height: 40px;
    font-size: 20px;
    bottom: 15px;
    right: 15px;
  }
}
.form-field p{
	text-align:left;
}

.entry-content p{
/* 	background-color: transparent; */
}
/* --- FLEXBOX CONTAINER FOR CARDS --- */
.card-container {
    display: flex; /* Enables flexbox layout */
    justify-content: center; /* Centers the cards horizontally */
    gap: 30px; /* Space between the cards */
    max-width: 1200px; /* Optional: Sets a max width for the cards section */
    margin: 0 auto; /* Centers the container on the page */
}

/* --- INDIVIDUAL CARD STYLING --- */
.card {
    flex: 1 1 300px; /* Grow: 1, Shrink: 1, Base width: 300px */
    max-width: 360px;
    background-color: #ffffff; /* White background for the cards */
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
    text-align: left;
    display: flex;
    flex-direction: column; /* Stacks image and content vertically */
}

.card-image-wrapper {
    overflow: hidden;
    /* Ratio for the image area, adjust as needed */
    aspect-ratio: 16 / 9; 
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area without distortion */
}

.card-content {
    padding: 20px 30px 40px 30px; /* Padding for the text content */
    flex-grow: 1; /* Allows content area to grow to ensure equal card height */
}

.card-content h2 {
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
}

.card-content p {
    font-size: 1em;
    color: #555;
    line-height: 1.5;
    margin-bottom: 20px;
}

.card-content a {
    color: #fff; /* Green color for the "Find out more" link */
    text-decoration: none;
    font-weight: bold;
    border-bottom: 2px solid #008000;
    padding: 15px 15px 15px;
    display: inline-block; /* Helps with border-bottom style */
}

.card-content1 a {
    color: #000; /* Green color for the "Find out more" link */
    text-decoration: none;
    font-weight: bold;
    border-bottom: 2px solid #008000;
    padding: 15px 15px 15px;
    display: inline-block; /* Helps with border-bottom style */
}

/* --- RESPONSIVENESS (Optional but recommended) --- */
@media (max-width: 1000px) {
    .card-container {
        /* Changes to 2 columns on smaller screens */
        flex-wrap: wrap; 
    }

    .card {
        /* Allows cards to take up roughly half the width, minus the gap */
        flex: 1 1 calc(50% - 30px);
        max-width: none;
    }
}

@media (max-width: 600px) {
    .card-container {
        /* Changes to a single column on mobile */
        flex-direction: column;
        align-items: center;
    }

    .card {
        /* Takes full width on mobile */
        width: 100%; 
    }
}			 
	
/* --- General Setup (Your provided styles) --- */
        .berlitz-levels-section {
            font-family: Arial, sans-serif;
            max-width: 1200px; /* MATCHING max-width */
            margin: 5px auto; /* MATCHING margin */
            padding: 20px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* ADDED BOX SHADOW */
        }

        .section-title {
            font-size: 32px;
            font-weight: 400; /* MATCHING font-weight */
            text-align: left;
            margin-bottom: 0px; /* MATCHING margin-bottom */
            color: #333;
            padding-left: 144px; /* MATCHING padding-left */
        }

        .levels-content-container {
            display: flex;
            justify-content: space-between;
            gap: 40px;
            text-align: left;
        }

        /* --- Left Column: Level Info --- */
        .level-info-column {
            flex: 1.5;
            padding-right: 20px;
        }

        .ability-tag {
            display: inline-block;
            padding: 5px 10px;
            font-size: 14px;
            font-weight: bold;
            border-radius: 4px;
            margin-bottom: 15px;
        }

        .ability-tag.functional {
            background-color: #00bf63;
            color: white;
        }

        .level-details p {
            margin: 5px 0;
            line-height: 1.5;
            padding-top: 10px; /* MATCHING padding-top */
            width: 450px; /* MATCHING width */
        }

        .level-details strong {
            font-weight: 400; /* MATCHING font-weight */
            color: #333;
        }

        .description-text {
            margin-top: 20px;
            font-size: 15px;
            color: #555;
        }

        /* --- Right Column: Chart Visualization --- */
        .level-chart-column {
            flex: 1;
        }

        .info-header {
            display: flex;
            align-items: center;
            color: #007bff;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .info-icon {
            font-style: normal;
            font-size: 18px;
            font-weight: bold;
            margin-right: 5px;
        }

        .chart-bars-container {
            display: flex;
            flex-direction: column;
            padding-left: 20px;
            padding-top: 5px;
        }

        .chart-bar-group {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
            height: 30px; /* MATCHING height */
            cursor: pointer;
            transition: background-color 0.2s;
        }

        /* --- HOVER EFFECT ON THE GROUP --- */
        .chart-bar-group:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }


        .level-number {
            font-size: 14px;
            width: 20px;
            text-align: right;
            margin-right: 10px;
            color: #555;
        }

        .level-bar {
            height: 100%;
            min-height: 25px; 
            border-radius: 0 4px 4px 0;
            transition: transform 0.2s, box-shadow 0.2s; 
        }

        /* --- HOVER EFFECT ON THE BAR ITSELF --- */
        .chart-bar-group:hover .level-bar {
            transform: translateX(2px) scaleX(1.01);
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
        }


        .ability-label {
            margin-left: 15px;
            font-size: 13px;
            color: #777;
            white-space: nowrap;
            line-height: 1.2;
            align-self: flex-start; 
            transform: translateY(-50%); 
        }

        /* --- Bar Sizing and Colors (Using your provided widths) --- */
        .level-1-bar { width: 10%; background-color: #00bf63; }
        .level-2-bar { width: 25%; background-color: #9cbce7; }
        .level-3-bar { width: 35%; background-color: #7b9ed9; }
        .level-4-bar { width: 43%; background-color: #5a7ecb; }
        .level-5-bar { width: 60%; background-color: #385ebc; margin-left: 5px; }
        .level-6-bar { width: 52%; background-color: #2e4b9a; }
        .level-7-bar { width: 58%; background-color: #243878; }
        .level-8-bar { width: 58%; background-color: #1a2556; } /* Your custom width */
        .level-9-bar { width: 100%; background-color: #101234;margin-left: 8px; }
        .level-10-bar { width: 66%; background-color: #060012; } /* Your custom width */

        .level-group-1 .ability-label,
        .level-group-3 .ability-label,
        .level-group-5 .ability-label,
        .level-group-7 .ability-label,
        .level-group-9 .ability-label {
            position: relative;
            top: -12px;
            font-size: 14px;
        }
	
/* --- General Setup --- */
        .ideal-section {
            font-family: Arial, sans-serif;
            max-width: 1000px;
            margin: 40px auto;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .ideal-title {
            font-size: 32px;
            font-weight: 500;
            text-align: center;
            margin-bottom: 40px;
            color: #333;
        }

        .ideal-content-container {
            display: flex;
            justify-content: space-between;
            gap: 40px;
            text-align: left;
        }

        /* --- Left Column: Level Info --- */
        .ideal-info-column {
            flex: 1.5; 
            padding-right: 20px;
        }

        .ideal-tag {
            display: inline-block;
            padding: 5px 10px;
            font-size: 14px;
            font-weight: bold;
            border-radius: 4px;
            margin-bottom: 15px;
            color: white;
            background-color: #00bf63;
        }

        .ideal-details p {
            margin: 5px 0;
            line-height: 1.5;
        }

        .ideal-details strong {
            font-weight: bold;
            color: #333;
        }

        .ideal-description-text {
            margin-top: 20px;
            font-size: 15px;
            color: #555;
        }

        /* --- Right Column: Chart Visualization --- */
        .ideal-chart-column {
            flex: 1;
        }

        .ideal-info-header {
            display: flex;
            align-items: center;
            color: #007bff;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .ideal-info-icon {
            font-style: normal;
            font-size: 18px;
            font-weight: bold;
            margin-right: 5px;
        }

        .ideal-bars-container {
            display: flex;
            flex-direction: column;
            padding-left: 20px;
            padding-top: 5px;
        }

        .ideal-bar-group {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
            height: 45px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .ideal-bar-group:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }

        .ideal-level-number {
            font-size: 14px;
            width: 20px;
            text-align: right;
            margin-right: 10px;
            color: #555;
        }

        .ideal-level-bar {
            height: 100%;
            min-height: 35px;
            border-radius: 0 4px 4px 0;
            transition: transform 0.2s, box-shadow 0.2s; 
        }

        .ideal-bar-group:hover .ideal-level-bar {
            transform: translateX(2px) scaleX(1.01);
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
        }

        .ideal-ability-label {
            margin-left: 15px;
            font-size: 14px;
            color: #777;
            white-space: nowrap;
            line-height: 1.2;
            align-self: flex-start; 
            transform: translateY(-50%); 
        }

        /* --- Bar Sizing & Colors for Kids/Teens IDEAL (5 Levels) --- */
        /* Note: Level-specific classes remain the same for easy color/width adjustments */
        .ideal-level-1-bar { width: 30%; background-color: #00bf63; } 
        .ideal-level-2-bar { width: 45%; background-color: #9cbce7; }
        .ideal-level-3-bar { width: 60%; background-color: #7b9ed9; }
        .ideal-level-4-bar { width: 80%; background-color: #5a7ecb; }
        .ideal-level-5-bar { width: 100%; background-color: #385ebc; }

        /* Positioning the ability labels next to the bars */
        .ideal-bar-group .ideal-ability-label {
            position: relative;
            top: 15px;
        }	
	
	
/* ----------------------------------------------------
 * TABLET RESPONSIVE
 * ---------------------------------------------------- */
@media (max-width: 1024px) {

  .section-title {
    padding-left: 40px;
    font-size: 28px;
  }

  .level-details p {
    width: auto; /* REMOVE fixed width */
  }

  .levels-content-container,
  .ideal-content-container {
    gap: 25px;
  }
}


/* ----------------------------------------------------
 * MOBILE RESPONSIVE
 * ---------------------------------------------------- */
@media (max-width: 768px) {

  /* SECTION WRAPPERS */
  .berlitz-levels-section,
  .ideal-section {
    padding: 20px 15px;
    margin: 20px 10px;
  }

  /* TITLES */
  .section-title,
  .ideal-title {
    padding-left: 0;
    text-align: left;
    font-size: 24px;
    margin-bottom: 20px;
  }

  /* MAIN LAYOUT STACK */
  .levels-content-container,
  .ideal-content-container {
    flex-direction: column; /* STACK */
  }

  /* LEFT + RIGHT COLUMNS FULL WIDTH */
  .level-info-column,
  .level-chart-column,
  .ideal-info-column,
  .ideal-chart-column {
    flex: 1 1 100%;
    padding: 0;
  }

  /* TEXT FIXES */
  .level-details p,
  .ideal-details p {
    width: 100%;
    font-size: 14px;
  }

  .description-text,
  .ideal-description-text {
    font-size: 14px;
  }

  /* CHART FIXES */
  .chart-bars-container,
  .ideal-bars-container {
    padding-left: 0;
  }

  .chart-bar-group,
  .ideal-bar-group {
    height: auto;
    align-items: flex-start;
  }

  .ability-label,
  .ideal-ability-label {
    white-space: normal; /* ALLOW WRAP */
    transform: none;
    margin-left: 10px;
    font-size: 13px;
  }
}


/* ----------------------------------------------------
 * SMALL PHONES
 * ---------------------------------------------------- */
@media (max-width: 480px) {

  .section-title,
  .ideal-title {
    font-size: 22px;
  }

  .ability-tag,
  .ideal-tag {
    font-size: 12px;
    padding: 4px 8px;
  }

  .level-number,
  .ideal-level-number {
    font-size: 12px;
  }

  .ability-label,
  .ideal-ability-label {
    font-size: 12px;
  }
}
.blue-steps-section p{
	color:#fff;				 
}				 
.blue-steps-section a{
	border-bottom:4px solid #7ffcff;				 
}			
.blue-steps-section .content-container{
	max-width: 1025px;
    margin: 0 auto;
    text-align: left;
}

.skills-section {
            text-align: center;
        }

        .skills-heading {
            font-size: 2em;
            font-weight: 600;
            color: #343a40;
            margin-bottom: 40px;
        }

        .cards-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: nowrap;
            max-width: 1280px;
            margin: 0 auto;
        }

        .card {
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            padding: 30px;
            flex: 1;
            text-align: left;
            min-width: 220px;
        }

        .card-title {
            display: inline-block;
           background-color: #fff;
            color: #000;
            padding: 5px 15px;
            font-weight: 600;
            font-size: 1.1em;
            margin-bottom: 20px;
        }

        .card-title1 {
            display: inline-block;
/*            background-color: rgb(0, 79, 239); */
            color: #fff;
            padding: 5px 15px;
            font-weight: 600;
            font-size: 1.1em;
            margin-bottom: 20px;
        }

        .card-title.multi-line {
            display: block;
            background-color: transparent;
            padding: 0;
        }

        .card-title.multi-line span {
            display: inline-block;
            background-color: #0056b3;
            color: #fff;
            padding: 5px 15px;
            margin-bottom: 5px;
        }

        .card-text {
           color: #1a1a1a;
    line-height: 1.6;
    font-size: 18px;
    font-weight: 300;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
        }				 
				 
/* ----------------------------------------------------
 * TABLET
 * ---------------------------------------------------- */
@media (max-width: 1024px) {

  .skills-heading {
    font-size: 1.8em;
    margin-bottom: 30px;
  }

  .cards-container {
    gap: 16px;
  }

  .card {
    padding: 25px;
  }

  .card-text {
    font-size: 16px;
  }
}


/* ----------------------------------------------------
 * MOBILE
 * ---------------------------------------------------- */
@media (max-width: 768px) {

  .skills-section {
    padding: 20px 15px;
  }

  .skills-heading {
    font-size: 1.5em;
    margin-bottom: 25px;
  }

  .cards-container {
    flex-wrap: wrap;        /* ALLOW STACKING */
    justify-content: center;
    gap: 15px;
  }

  .card {
    flex: 1 1 100%;         /* FULL WIDTH */
    min-width: unset;
    padding: 20px;
  }

  .card-title,
  .card-title.multi-line span {
    font-size: 1em;
    padding: 5px 12px;
  }

  .card-text {
    font-size: 15px;
    line-height: 1.5;
  }
}


/* ----------------------------------------------------
 * SMALL PHONES
 * ---------------------------------------------------- */
@media (max-width: 480px) {

  .skills-heading {
    font-size: 1.35em;
  }

  .card {
    padding: 18px;
  }

  .card-text {
    font-size: 14px;
  }
}
.feedback-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0;
    text-align: center;
  }

  /* Heading Styling */
  .section-title {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 10px;
    font-weight: bold;
  }

  .section-subtitle {
    font-size: 1.1em;
    color: #777;
    margin-bottom: 40px;
  }

  /* Video Grid Layout */
  .video-grid {
    display: grid;
    /* Exactly 3 columns of equal width */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px; /* Space between the cards */
    padding: 0 20px;
  }

  /* Video Card Styling */
  .video-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Soft shadow for card effect */
    overflow: hidden; /* Ensures the video and content stay within the rounded corners */
    transition: transform 0.3s ease;
  }
  
  .video-card:hover {
    transform: translateY(-5px); /* Optional: slight lift on hover */
  }

  /* Responsive Video Container (Maintains 16:9 Aspect Ratio) */
  .video-wrapper1 {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio (height / width * 100) */
    height: 0;
    overflow: hidden;
  }

  .video-wrapper1 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* Video Title Styling */
  .video-card-title {
    padding: 15px 20px;
    text-align: left;
    font-size: 1em;
    font-weight: 600;
    color: #333;
    margin: 0;
  }

  /* Responsive Design for smaller screens */
  @media (max-width: 900px) {
    .video-grid {
      grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
    }
  }

  @media (max-width: 600px) {
    .video-grid {
      grid-template-columns: 1fr; /* 1 column on mobile screens */
    }
    .section-title {
        font-size: 2em;
    }
  }				 
			


/* General Layout Container */
.card-section1 {
    display: flex;
    justify-content: space-between; /* Spreads the cards out */
    align-items: flex-start; /* Aligns items to the top */
    max-width: 1200px; /* Adjust as needed */
    margin: 0 auto; /* Center the section */
    padding: 20px;
   
}

/* Base Card Styling */
.card {
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Optional subtle shadow */
    margin: 0 10px;
    flex-shrink: 0; /* Prevents cards from shrinking */
}

/* Image Wrapper to control the image container size */
.card-image-wrapper {
    overflow: hidden; /* Important to contain the image */
}

/* Image Styling for proper fit */
.card-image-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the area without distortion */
}

/* Specific Card Dimensions (Card 1: Catalogue) */
.card-1 {
    width: 370px;
}
.card-1 .card-image-wrapper {
    height: 262px;
}

/* Specific Card Dimensions (Card 2: Brochure) */
.card-2 {
    width: 370px;
}
.card-2 .card-image-wrapper {
    height: 523px;
}

/* Specific Card Dimensions (Card 3: Orientation Session) */
.card-3 {
    width: 370px;
}
.card-3 .card-image-wrapper {
    height: 208px;
}

/* Content Styling (to mimic the provided image) */
.card-content {
    padding: 20px;
    padding-bottom: 50px; /* Add extra space for the "Find out more" link */
    position: relative; /* For positioning the link at the bottom */
}

.card-content h3 {
    font-size: 1.25rem;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 20px;
}

/* "Find out more" Link Styling */
.find-out-more {
    color: #007bff; /* Example link color */
    text-decoration: none;
    font-weight: bold;
    display: block;
    padding-bottom: 5px;
    border-bottom: 2px solid #00a0ae; /* The turquoise line */
    width: fit-content;
    position: absolute;
    bottom: 20px; /* Position it towards the bottom of the card content area */
    left: 20px;
}
/* ----------------------------------------------------
 * TABLET
 * ---------------------------------------------------- */
@media (max-width: 1024px) {

  .card-section1 {
    flex-wrap: wrap;          /* Allow wrapping */
    justify-content: center;
    gap: 20px;
  }

  .card {
    margin: 0;
  }

  .card-1,
  .card-2,
  .card-3 {
    width: 320px;             /* Slightly smaller cards */
  }
}


/* ----------------------------------------------------
 * MOBILE
 * ---------------------------------------------------- */
@media (max-width: 768px) {

  .card-section1 {
    flex-direction: column;   /* STACK CARDS */
    padding: 15px;
  }

  .card {
    width: 100%;
    max-width: 100%;
    margin: 0 0 25px 0;
  }

  .card-1,
  .card-2,
  .card-3 {
    width: 100%;
  }

  /* Normalize image heights on mobile */
  .card-1 .card-image-wrapper,
  .card-2 .card-image-wrapper,
  .card-3 .card-image-wrapper {
    height: 220px;
  }

  .card-content {
    padding: 18px;
    padding-bottom: 45px;
  }

  .card-content h3 {
    font-size: 1.1rem;
    margin-bottom: 15px;
  }

  .find-out-more {
    font-size: 14px;
    bottom: 15px;
    left: 18px;
  }
}


/* ----------------------------------------------------
 * SMALL PHONES
 * ---------------------------------------------------- */
@media (max-width: 480px) {

  .card-section {
    padding: 10px;
  }

  .card-1 .card-image-wrapper,
  .card-2 .card-image-wrapper,
  .card-3 .card-image-wrapper {
    height: 180px;
  }

  .card-content h3 {
    font-size: 1rem;
  }

  .find-out-more {
    font-size: 13px;
  }
}

.section-title-contact{
	text-align: left;
    margin: 80px 0 10px 0;
    padding-left: 0;
}

/* Container for the entire section (mimics the light background) */
.job-vacancies-section {
    background-color: #f7f7f7; /* Light gray background */
    padding: 40px 0;
    font-family: Arial, sans-serif; /* Use a common, clean font */
}

/* Inner container to constrain and center the content */
.job-vacancies-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Heading style */
.job-vacancies-container h2 {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 30px;
}

/* Flex container for the cards */
.cards-row {
    display: flex;
    justify-content: center; /* Center the two cards */
    gap: 20px; /* Space between the cards */
}

/* Base card style */
.job-card {
    background-color: white;
    width: 450px; /* Set a specific width for each card */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Image wrapper for consistent image presentation */
.card-image-wrapper {
    width: 100%;
    height: auto; /* Allow height to be determined by image content */
    overflow: hidden;
}

/* Image sizing and fit */
.card-image-wrapper img {
    display: block;
    width: 100%;
    /* The height looks slightly cropped on the worldwide image, but 
       we'll keep it standard for responsiveness. You can adjust height here if needed */
    height: 300px; /* Set a specific height for visual consistency */
    object-fit: cover; /* Ensures the image fills the space */
}

/* Content area styling */
.card-content {
    padding: 20px;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.5;
}
.card-content1 {
    padding: 20px;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Title/Header inside the card content */
.opportunity-title {
    font-weight: bold;
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
}

/* Paragraph spacing adjustments */
.card-content p {
    margin-bottom: 15px;
}

/* Styling for the email links */
.email-link {
    color: #00a0ae; /* Berlitz's signature turquoise color */
    text-decoration: underline;
}

/* Styling for the "Read More" link */
.read-more-link {
    color: #00a0ae;
    font-weight: bold;
    text-decoration: none;
    display: inline-block; /* Treat it like a link */
    margin-top: 10px;
}	
@media (max-width: 768px) {
	.feature-card p {
	margin-bottom: 10px; /* smaller spacing */
	font-size:16px;
	font-weight: 400;
	padding: 0 140px 0px 140px;
  }
}					 
/* ----------------------------------------------------
 * TABLET
 * ---------------------------------------------------- */
@media (max-width: 1024px) {

  .job-vacancies-container h2 {
    font-size: 1.6rem;
  }

  .job-card {
    width: 100%; /* Flexible width */
    max-width: 420px;
  }

  .card-image-wrapper img {
    height: 260px;
  }
}


/* ----------------------------------------------------
 * MOBILE
 * ---------------------------------------------------- */
@media (max-width: 768px) {

  .job-vacancies-section {
    padding: 30px 0;
  }

  .job-vacancies-container {
    padding: 0 15px;
  }

  .job-vacancies-container h2 {
    font-size: 1.4rem;
    margin-bottom: 20px;
  }

  .cards-row {
    flex-direction: column; /* STACK CARDS */
    align-items: center;
    gap: 25px;
  }

  .job-card {
    width: 100%;
    max-width: 100%;
  }

  .card-image-wrapper img {
    height: 220px; /* Reduce image height */
  }

  .card-content {
    font-size: 0.9rem;
    padding: 18px;
  }
}


/* ----------------------------------------------------
 * SMALL PHONES
 * ---------------------------------------------------- */
@media (max-width: 480px) {

  .job-vacancies-container h2 {
    font-size: 1.25rem;
  }

  .card-image-wrapper img {
    height: 190px;
  }

  .card-content {
    font-size: 0.85rem;
  }

  .read-more-link {
    font-size: 0.9rem;
  }
}

	/* Container for the entire section */
.privacy-policy-statement {
   max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    /* font-family: Arial, sans-serif; */
    color: #262424;
    line-height: 1.6;
    font-size: 16px;
    font-weight: 300;
}

/* Paragraph Styling */
.privacy-policy-statement p {
    margin-bottom: 20px;
}

/* List Styling (Bullet Points) */
.privacy-policy-statement ul {
    list-style-type: none; /* Remove default bullets */
    padding-left: 0; /* Remove default left padding */
    margin-bottom: 20px; /* Space after the list */
}

/* List Item Styling - Adding Custom Bullets and spacing */
.privacy-policy-statement ul li {
    position: relative;
    padding-left: 20px; /* Space for the custom bullet */
    margin-bottom: 10px; /* Space between bullet points */
}

/* Custom Bullet Point (mimicking the small dark circle) */
.privacy-policy-statement ul li::before {
    content: "•"; 
    color: #555555; /* Match the text color */
    font-weight: bold;
    font-size: 1.2rem;
    position: absolute;
    left: 0;
    top: 0;
}					 
	
						 
						 
/* Container and base styling */
.data-collection-section {
    max-width: 1200px; /* Adjust based on your site's content width */
    margin: 40px auto;
    padding: 0 20px;
    font-family: Arial, sans-serif;
    color: #333; /* Dark text color */
    line-height: 1.6;
}

/* Main Section Heading */
.section-title {
   font-size: 32px;
    font-weight: 500;
    color: #333;
    margin-top: 30px;
    margin-bottom: 50px;
	text-align: center;
	margin-right: 329px;
	padding-bottom: 0px;
}

/* Sub-section Headings (e.g., "When you register...") */
.subsection-title {
    font-size: 1rem;
    font-weight: 600;
    color: #9d9b9b;
    margin-top: 25px;
	margin-left: 5px;
    margin-bottom: 10px;
}

/* Styling for the lists */
.data-list {
    list-style-type: disc; /* Use standard disc bullets */
    padding-left: 25px;
    margin-bottom: 25px;
}

/* List Item Styling */
.data-list li {
    font-size: 16px;
    color: #262424;
    margin-bottom: 10px;
    font-weight: 300;
    font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Specific styling for the Payment Methods text */
.payment-methods-title {
    margin-top: 30; /* Align with the text above it */
	padding-bottom: 0px;
}

.payment-methods-text {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 20px;
}						 

						 
.data-list p{
	color:#2d2d2d;
	margin-left: -18px;
	font-weight: 300;
    font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;					 
}						 

						 
@media (max-width: 768px) {
	.feature-card p {
	margin-bottom: 10px; /* smaller spacing */
	font-size:16px;
	font-weight: 400;
	padding: 0 140px 0px 140px;
  }
}		


/* CSS for the section */
        .terms-list {
            /* Standard list styling reset */
            list-style-type: none; 
            padding-left: 0;
           margin: 0 auto;
           font-family: Arial, sans-serif;
           font-size: 16px;
           line-height: 1;
           width: 1000px;
        }

        .terms-list li {
            margin-bottom: 15px; 
            color: #333; /* Text color for the list item container */
            position: relative;
            padding-bottom: 3px; 
        }

        /* --- HYPERLINK STYLES --- */
        .terms-list li a {
            color: inherit; /* Inherit color from the parent li, or set a specific link color if desired */
            text-decoration: none; /* Crucial: Remove the browser's default underline */
            display: inline-block; /* Allows the link to better contain the text */
        }
        
        .terms-list li::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            height: 2px; 
        }

        /* Optional: Add hover state for better user experience */
        .terms-list li:hover a {
             /* Slightly darken the text on hover */
             color: #000; 
        }
        .terms-list li:hover::after {
             /* Make the line slightly thicker or darker on hover */
             background-color: #4CAF50; 
        }	 
	
			 
			 
		/* Styling for the Main Heading */
			 
			 .gtc{
				 font-family: Arial, sans-serif;
            color: rgb(45, 47, 61);
				 max-width: 1000px;
           line-height: 1.6;
            text-align: left;
            margin: 0px auto;
            line-height: 1.6;
/* 				 margin-bottom:-73px; */
			 }	 
			 
			 
        .gtc-heading {
            font-size: 24px; /* Larger font size for the main heading */
            font-weight: bold;
            margin-bottom: 25px; /* Space below the heading */
            color: #333; 
        }

        /* Styling for Sub-headings (1.1, 1.2, etc.) */
        .gtc-subheading {
			
           font-size: 18px;
    font-weight: 300;
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
    color: rgb(45, 47, 61);
			
        }

        /* Styling for the main text paragraphs */
        .gtc-paragraph {
			
            margin-bottom: 1.2em; /* Vertical spacing between paragraphs */
			font-size: 18px;
    font-weight: 300;
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
    color: rgb(45, 47, 61);
			
        }

        
/* Styling for the bold sub-headers (Information on right of withdrawal, Right of withdrawal) */
        .withdrawal-subheader {
            font-size: 16px;
            font-weight: bold;
            margin-top: 20px;
            margin-bottom: 5px; 
        }			 
		

/* Styling for the Recipient Address Block */
        .address-block {
            font-size: 18px;
    font-weight: 300;
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
    color: rgb(45, 47, 61);
			line-height: 1;
        }
        
        /* Styling for the underlined email address */
        .address-block .email-link {
            color: #333; /* Keep the link text color dark */
            text-decoration: none; /* Remove default link underline */
            /* Custom underline to match the light green/teal line in the image */
            border-bottom: 4px solid #50dfa1; 
            padding-bottom: 2px; /* Small space between text and line */
            display: inline-block; /* Helps with border positioning */
        }

        /* Styling for the Bulleted List */
        .form-list {
            list-style-type: disc; /* Use standard disc bullets */
            padding-left: 20px;
            margin-bottom: 30px;
        }

        .form-list li {
            margin-bottom: 15px; /* Spacing between bullet points */
           color: rgb(45, 47, 61);
			 font-size: 18px;
    font-weight: 300;
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
        }
        
        /* Styling for the explanatory note at the bottom */
        .note {
            font-size: 14px;
            margin-top: 15px;
        }			 
			 
	/* ===============================
   MOBILE RESPONSIVE FIXES
   =============================== */
@media (max-width: 768px) {

  /* Main containers */
 
  .gtc {
    width: 100%;
    max-width: 100%;
    padding: 0 20px; /* Mobile side padding */
  }


  /* Headings */
  .gtc-heading {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .gtc-subheading {
    font-size: 16px;
    margin-top: 18px;
    margin-bottom: 8px;
  }

  /* Paragraphs */
  .gtc-paragraph {
    font-size: 16px;
    line-height: 1.6;
    margin-top: 12px;
    margin-bottom: 12px;
  }

  /* Address block */
  .address-block {
    font-size: 16px;
    line-height: 1.5;
  }

  .address-block .email-link {
    border-bottom-width: 3px; /* Slightly thinner underline */
  }

  /* Bullet list */
  .form-list {
    padding-left: 18px;
  }

  .form-list li {
    font-size: 16px;
    line-height: 1.6;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  /* Notes */
  .note {
    font-size: 13px;
  }
}
@media (max-width: 768px) {

  /* Make full sentence underline visible on mobile */
  .terms-list li a,
  .address-block .email-link {
    display: inline;          /* Let text flow naturally */
    padding-bottom: 4px;
  }

  .terms-list li::after {
    width: 100%;              /* Full sentence width */
    background-color: #50dfa1;
    height: 4px;
  }
}
.pricing-card {
  background-color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  padding: 35px;
  border-radius: 6px;
  width: 44%;
  min-width: 400px;
  height: 259px;
  /* min-height: 420px; */ /* use this instead if content may grow */

  display: flex;
  flex-direction: column;
}

/* Table */
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.pricing-table th {
  font-weight: normal;
  padding: 10px 5px;
  border-bottom: 1px solid #eee;
}

.pricing-table td {
  padding: 10px 5px;
  border-bottom: 1px solid #eee;
}

/* Link */
.pricing-link {
  color: #2a2a2a;
  text-decoration: none;
  border-bottom: 4px solid #50dfa1;
  padding-bottom: 1px;
}
/* CTA alignment */
.cta-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 18vh;
	
}

.cta-button {
  background-color: #0a4cff;
  color: #ffffff;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s ease;
	margin-top: auto;
    text-align: center;
}

.cta-button:hover {
  background-color: #083dcc;
}
/* CTA alignment */
.cta-center1 {
  margin-top: auto; /* pushes CTA to bottom */
  text-align: center;
}

	.category-text {
  color: #444444;
  border-bottom: 4px solid #50dfa1;
  padding-bottom: 1px;
  font-weight: 300;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  cursor: default; /* NOT clickable */
}
/* Cards container */
.lang-courses-container {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}

/* ⭐ ONLY CHANGE → 3 CARDS IN ONE ROW */
.lang-card {
  flex: 1 1 calc(33.333% - 20px); 
  min-width: 250px;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

/* Image box */
.lang-card-img {
  width: 100%;
  height: 250px;
  overflow: hidden;
}

.lang-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content */
.lang-card-content {
  padding: 20px 15px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.lang-card-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
  color: #333;
  padding-left: 21px;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
	
	fieldset.hidden-fields-container{
		display:none;
	}
.feature-grid-four {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 25px;
  width: 100%;
  max-width: 1400px;   /* optional but recommended */
  margin: 0 auto;      /* centers the grid */
}

p.testimonial-author-main{
	font-weight: 600;
    color: #2d2f3d;
    font-size: 14px;
    padding-top: 12px;
    text-align: center;
}
.entry-content p{
/* 	display:none; */
}
.content-container-ad .txt{
	color: #787878;
	font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
	font-size: 19px;
    line-height: 1.9;
	margin-top: 50px;
}
/* Button Styling */
.view-more-button {
    /* Visual Appearance */
    background-color: #007bff; /* Bright blue color */
    color: white; 
    padding: 10px 20px; /* Adjust padding to set the button size */
    
    /* Text and Link Reset */
    text-decoration: none; /* Remove default underline from <a> tag */
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    
    /* Shape and Display */
    border-radius: 4px; /* Optional slight rounding, though the image looks fairly sharp */
    display: inline-block; /* Essential for padding to work correctly */
    cursor: pointer;
    border: none; /* Ensure no default button border is visible */
}

/* Optional Hover Effect */
.view-more-button:hover {
    background-color: #0056b3; /* Slightly darker blue on hover */
}
			html {
  scroll-behavior: smooth;
}
section {
  scroll-margin-top: 120px; /* adjust to your header height */
}
/* Container for Centering */
.button-container {
    text-align: center; /* Centers inline/inline-block elements inside */
    padding: 0 0 20px 0;
}
/* Overall Section Background */
.registration-form-section {
    background-color: #f7f7f7; 
    padding: 50px 20px;
    font-family: Arial, sans-serif;
}

/* Container to center and limit the form width */
.form-content-wrapper {
   max-width: 1050px;
    margin: 0 auto;
    background-color: rgb(252, 252, 252);
}

/* Form Title */
.form-heading {
    font-size: 24px;
    font-weight: 400;
    color: #333;
    margin-bottom: 20px;
    padding: 0 0 10px 0;
    font-family: "Poppins", sans-serif;
}

/* Form Grid Layout */
.contact-registration-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Individual Form Group (Label + Input) */
.form-field-group {
    display: flex;
    flex-direction: column;
}

/* Label Styling */
.form-field-group label {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 5px;
}

/* Input Field Styling */
.text-input,
.country-code-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 0;
    font-size: 1rem;
    box-sizing: border-box;
    height: 45px;
}

/* Specific styling for the Contact Number field wrapper */
.contact-number-wrapper {
    display: flex;
    gap: 10px;
}

/* Country Code Select Box */
.country-code-select {
    flex-basis: 150px;
    flex-shrink: 0;
}

/* Contact Number Input */
.phone-input {
    flex-grow: 1;
}

/* Full Width Controls (for reCAPTCHA and Submit button) */
.form-full-width-section {
    grid-column: 1 / -1; 
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 20px;
}

/* reCAPTCHA Styling */
.recaptcha-module-wrapper {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
}

.recaptcha-checkbox-area {
    border: 1px solid #ccc;
    padding: 10px;
    display: flex;
    align-items: center;
    margin-right: 10px;
    background-color: #f9f9f9;
}

.recaptcha-checkbox-area input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.recaptcha-checkbox-area label {
    font-size: 0.9rem;
    margin: 0;
}

.recaptcha-info-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.6rem;
    color: #888;
    text-align: center;
    line-height: 1.2;
}

/* Submit Button Styling */
.form-submit-btn {
    background-color: #00b0ba;
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 3px;
    font-weight: bold;
    transition: background-color 0.2s;
}

.form-submit-btn:hover {
    background-color: #00a0ae;
}					 
		
/* ----------------------------------------------------
 * TABLET
 * ---------------------------------------------------- */
@media (max-width: 1024px) {

  .form-content-wrapper {
    padding: 20px;
  }

  .form-heading {
    font-size: 22px;
  }
}


/* ----------------------------------------------------
 * MOBILE
 * ---------------------------------------------------- */
@media (max-width: 768px) {

  .registration-form-section {
    padding: 30px 15px;
  }

  /* Switch form to single column */
  .contact-registration-form {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .form-heading {
    font-size: 20px;
  }

  /* Phone number field stacking */
  .contact-number-wrapper {
    flex-direction: column;
    gap: 12px;
  }

  .country-code-select {
    flex-basis: 100%;
  }

  /* Full width elements */
  .form-full-width-section {
    align-items: stretch;
  }

  /* reCAPTCHA fix */
  .recaptcha-module-wrapper {
    flex-direction: column;
    gap: 10px;
  }

  .recaptcha-info-badge {
    align-items: flex-start;
    font-size: 0.7rem;
  }

  /* Inputs */
  .text-input,
  .country-code-select {
    height: 42px;
    font-size: 0.95rem;
  }

  /* Button */
  .form-submit-btn {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
  }
}


/* ----------------------------------------------------
 * SMALL PHONES
 * ---------------------------------------------------- */
@media (max-width: 480px) {

  .form-heading {
    font-size: 18px;
  }

  .form-field-group label {
    font-size: 0.85rem;
  }

  .recaptcha-checkbox-area label {
    font-size: 0.8rem;
  }
}
/* ===============================
   FIX CONTACT NUMBER VISIBILITY
   =============================== */
@media (max-width: 768px) {

  .contact-number-wrapper {
    display: flex;
    flex-direction: column;   /* Stack dropdown + input */
    gap: 10px;
    width: 100%;
  }

  .country-code-select {
    flex-basis: auto;
    width: 100%;
  }

  .phone-input {
    width: 100%;
    display: block;
  }
}

@media (max-width: 768px) {
	.feature-card p {
	margin-bottom: 10px; /* smaller spacing */
	font-size:16px;
	font-weight: 400;
	padding: 0 140px 0px 140px;
  }
}
/* Container - Global Position */
.top-right-translator {
    position: absolute !important;
    top: 0;
    right: 0;
    z-index: 2147483647 !important; /* Forces it above all WordPress elements */
}

/* Desktop Styles (Your Updated Version) */
#lang-toggle-btn {
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    padding: 3px 10px;
    font-size: 13px;
    font-weight: 500;
    font-family: Arial, sans-serif;
    cursor: pointer;
    margin-top: 17px;
    margin-right: 100px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    -webkit-tap-highlight-color: transparent;
    display: inline-block;
}

/* MOBILE VIEW - Locked to screen, No scrolling */
@media (max-width: 768px) {
	
	    .top-right-translator {
        position: absolute !important;
        top: -34px;
        right: 0;
        left: 87%;
        z-index: 2147483647 !important;
    }
/*     .top-right-translator {
      
        position: fixed !important; 
        
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        bottom: auto !important;

        z-index: 9999999999 !important; 
        
        transform: none !important;
        perspective: none !important;
        filter: none !important;

        width: auto !important;
        height: auto !important;
    } */

    #lang-toggle-btn {
        /* Your specific spacing to match the menu toggle */
       margin-top: 32px !important;  
        margin-right: 9px !important; 
        padding: 4px 10px;
        font-size: 14px;
        background: transparent; 
        border: 1px solid #fff;
        color: #fff !important;
        border-radius: 4px;
        
        /* Standard visibility rules */
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
        cursor: pointer;
    }
}

.goog-te-banner-frame.skiptranslate,
.goog-te-balloon-frame {
    display: none !important;
}

body {
    top: 0 !important;
}

.entry-content p{
/* display: contents; */
}
.advice-content-wrapper p{
	color:#fff;
}		

/* ----------------------card 2 ---------------------- */

.feature-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px; /* reduce space between cards */
}


.feature-card-content {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.feature-card-item {
  width: 330px; /* adjust until the spacing looks perfect */
  max-width: 100%;
}


.training-feature-section {
  padding: 0px 150px;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  background-color: #f6f6f6;
}

@media (max-width: 600px) {
  .training-feature-section {
    padding: 25px 20px;
  }

  .feature-grid {
    grid-template-columns: 1fr; /* ✅ One card per row */
    gap: 25px;
    justify-items: center;
  }
}


   
.feature-container {
  display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    padding: 0px 0 70px 0;
    box-sizing: border-box;
    width: fit-content;
    margin: 0 auto;
}

.container1 {
  max-width: 830px; /* Max width for content centering */
  margin: 0 auto;
  padding: 0 15px;
}


.content-container-ad {
  max-width: 850px;
  margin: 0 auto;
  font-family: "Source Sans Pro", sans-serif;
}

.content-container-ad h1{
    font-size: 30px;
    font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    font-weight: 500;
}
.training-feature-heading{
	font-size: 32px;
    font-weight: 500;
    text-align: center;
    color: #333;
	margin-bottom: 25px;
}
.testimonial-text{
	color: #555;
    line-height: 1.6;
    margin-bottom: 25px;
    font-style: italic;
    font-size: 17px;
    margin-bottom: 25px;
    padding: 0 0 0px 121px;
    text-align: start;
}
/* select.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required.country-code-select
 {
    width: 31% !important;
} */



/* CF7 contact number row fix */
.contact-number-wrapper {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-top: -35px;
}

/* Force CF7 spans to behave */
.contact-number-wrapper .wpcf7-form-control-wrap {
  display: block;
}

/* Country code */
.country-code-wrap {
  width: 30%;
}

.country-code-wrap select {
  width: 102%;
  height: 48px;
}

/* Phone number */
.phone-number-wrap {
  width: 70%;
}

.phone-number-wrap input {
  width: 100%;
  height: 48px;
  box-sizing: border-box;
}

/* Mobile */
@media (max-width: 768px) {
  .contact-number-wrapper {
    flex-direction: column;
  }

  .country-code-wrap,
  .phone-number-wrap {
    width: 100%;
  }
}
/* Move labels slightly up from inputs */
.contact-registration-form label {
  display: block;
  margin-bottom: 6px;   /* adjust this value if needed */
  font-weight: 500;
}

/* Ensure form fields don’t pull labels down */
.contact-registration-form .form-field-group {
/*   margin-bottom: 18px; */
}
/* Fix submit button alignment */
.form-full-width-section {
  display: flex;
  justify-content: center;   /* center horizontally */
  margin-top: 25px;
}

.form-submit-btn,
.wpcf7-submit {
  display: inline-block;
  padding: 14px 40px;
  text-align: center;
}




/* Reduce horizontal space between columns */
.contact-registration-form {
  column-gap: 16px !important;   /* reduce as needed */
}

/* If grid is used */
.contact-registration-form {
  grid-column-gap: 16px !important;
}

/* If flex is used */
.contact-registration-form {
  gap: 16px !important;
}
.hero-image-section {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 40px 20px;
  background-color: #ffffff;
}

.hero-image-box {
  width: 900px;
  height: 500px;
  overflow: hidden;
  border-radius: 8px; /* optional */
}

.hero-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive */
@media (max-width: 940px) {
  .hero-image-box {
    width: 100%;
    height: auto;
    aspect-ratio: 900 / 500;
  }
}
/* Breadcrumb */
/* .post-breadcrumb-bar {
  width: 100%;
  margin-top: 200px;        
  padding: 14px 40px;
  background: #ffffff;
  box-sizing: border-box;
}

.post-breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: #8a8a8a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-breadcrumb a {
  color: #8a8a8a;
  text-decoration: none;
  font-weight: 400;
}

.post-breadcrumb a:hover {
  text-decoration: underline;
}

.crumb-separator {
  color: #d0d0d0;
}

.current-crumb {
  color: #222;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

 */

/* Wrapper */
.post-breadcrumb-bar {
  width: 100%;
  background-color: #ffffff;
  padding: 5px 125px 60px;
  margin-top: 200px;          /* adjust if header height differs */
  box-sizing: border-box;
}

/* Breadcrumb row */
.post-breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  color: #8a8a8a;
  white-space: nowrap;
  overflow: hidden;
}

/* Links */
.post-breadcrumb a {
  color: #787676;
  text-decoration: none;
  font-weight: 400;
  flex-shrink: 0;
}

.post-breadcrumb a:hover {
  color: #2e8aec;
}

/* Separator */
.crumb-separator {
  color: #d0d0d0;
  flex-shrink: 0;
}

/* Current page */
.current-crumb {
  color: #000000;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60vw;
}
@media (max-width: 768px) {
  .post-breadcrumb-bar {
    padding: 12px 20px;
    margin-top: 90px;
  }

  .post-breadcrumb {
    font-size: 14px;
  }

  .current-crumb {
    max-width: 70vw;
  }
}




/* Featured Image */
.post-feature-media {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 30px 20px;
  box-sizing: border-box;
	background-color: #fff;
}

.post-feature-media-inner {
  width: 900px;
  height: 500px;
  overflow: hidden;
}

.post-feature-media-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 940px) {
  .post-feature-media-inner {
    width: 100%;
    height: auto;
    aspect-ratio: 900 / 500;
  }
}


.post-article-header {
  width: 100%;
  background: #ffffff;
  padding: 0px 20px 40px;
}

.post-article-inner {
  max-width: 1050px;
  margin: 0 auto;
  text-align: center;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
.post-article-inner2 {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Category */
.post-category {
  display: inline-block;
  font-size: 14px;
  color: #2bb673;
  margin-bottom: 20px;
  text-decoration: underline;
}

/* Title */
.post-title {
  font-size: 38px;
  line-height: 1.3;
  font-weight: 500;
  color: #111;
  margin-bottom: 20px;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
	
}

/* Meta info */
.post-meta {
 font-size: 18px;
 color: #666;
 margin-bottom: 40px;
 font-weight: 600;
}

.meta-separator {
  margin: 0 8px;
}

/* Intro text */
.post-intro {
  text-align: left;
}

.post-intro p {
  font-size: 18px;
    line-height: 1.6;
    color: rgb(45, 47, 61);
    margin-bottom: 24px;
    text-align: justify;
    font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    font-weight: 200;
}
.post-intro2 p {
  font-size: 18px;
    line-height: 1.6;
    color: rgb(45, 47, 61);
    margin-bottom: 24px;
    text-align: justify;
    font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    font-weight: 200;
	width:750px;
}
@media (max-width: 768px) {
  .post-title {
    font-size: 28px;
  }

  .post-article-header {
    padding: 60px 20px 30px;
  }
}


.article-section {
  background: #ffffff;
  
}

.article-content {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Top paragraph */
.article-lead {
  font-size: 18px;
    line-height: 1.6;
    color: rgb(45, 47, 61);
    margin-bottom: 24px;
    text-align: justify;
    font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    font-weight: 200;
}

/* Spoiler line */
.article-note {
  font-size: 18px;
    line-height: 1.6;
    color: rgb(45, 47, 61);
    margin-bottom: 24px;
    text-align: justify;
    font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    font-weight: 200;
}

/* Section heading */
.article-heading {
  font-size: 32px;
  font-weight: 700;
  color: #2b2e3a;
  margin-bottom: 25px;
}

/* Body text */
.article-content p {
 font-size: 18px;
    line-height: 1.6;
    color: rgb(45, 47, 61);
    margin-bottom: 24px;
    text-align: justify;
    font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    font-weight: 200;

}


.content-wrapper {
  display: flex;
  justify-content: center; /* This moves the whole block to the center */
/*   padding: 40px; */
	background-color: #f9f9f9;
}

.grammar-container {
  max-width: 980px;
  text-align: left; /* Strict left alignment */
	padding: 18px;
}

.grammar-header {
  font-family: 'Segoe UI', Roboto, sans-serif;
  color: #2d3848;
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 20px 0;
  padding: 0;
}

.grammar-text {
  font-size: 18px;
    line-height: 1.6;
    color: rgb(45, 47, 61);
    margin-bottom: 24px;
    text-align: justify;
    font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    font-weight: 200;
}

.grammar-bold {
  font-weight: 700;
  color: #2d3848;
}

.grammar-text.secondary {
  color: rgb(45, 47, 61);
}

.display-container {
  display: flex;
  justify-content: center;
  width: 100%;
/*   padding: 2rem 0; */
}

.info-block {
  background-color: #f9f9f9;
 padding: 0px;
    width: 100%;
    max-width: 950px;
  border-radius: 4px;
}

.header-label {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #2d3748;
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.data-set {
  list-style: none;
  padding: 0;
  margin: 0;
}

.entry-item {
 font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  color: rgb(45, 47, 61);
  margin-bottom: 1rem;
  position: relative;
  padding-left: 1.5rem;
  line-height: 1.6;
  font-weight: 200;
	font-size: 18px;
}

/* Custom bullet styling */
.entry-item::before {
  content: "•";
  color: #4299e1;
  font-size: 25px;
    position: absolute;
    left: 0;
    top: -4px;
}



/* The outer section acts as the wrapper for the whole page */
.tense-info-section {
  padding: 60px 20px;
  display: flex;
  justify-content: center;
}

.tense-info-wrapper {
  max-width: 950px;
  width: 100%;
  font-family: "Segoe UI", Arial, sans-serif;
  color: #1f2937;
  line-height: 1.7;
}

.tense-info-wrapper h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 24px;
}

.tense-info-wrapper p {
  font-size: 16px;
  margin-bottom: 16px;
  margin-left: 0;
  line-height: 1.6;
  font-weight: 200;
  font-size: 18px;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  color: rgb(45, 47, 61);
}

.tense-info-wrapper strong {
  font-weight: 600;
}

.tense-example {
  margin-left: 20px;
  color: #374151;
}
	/* Popup styling */

/* Overlay */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Popup container — NOW SCROLLABLE */
.popup-box {
  background: #fff;
  width: 550px;
  max-height: 80vh;     /* popup stops growing after 80vh */
  border-radius: 10px;
  overflow-y: auto;      /* entire popup scrolls */
  position: relative;
  padding: 20px 30px;    /* moved padding here */
}

/* Close X button — WILL SCROLL WITH CONTENT */
.close-btn {
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
  margin-bottom: 15px;    /* add spacing */
}

/* Popup content — NO FIXED HEIGHT */
.popup-content {
  padding-bottom: 20px;
}

.popup-content h4 {
  font-size: 24px;
  font-weight: 400;
  font-family: 'Poppins', sans-serif;
}

.popup-content .program {
  font-size: 28px;
  font-weight: bolder;
  color: #1f1f1f;
  font-family: 'Poppins', sans-serif;  
}

.popup-content p,
.popup-content li {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #8a7676;
}

/* Scrollbar styling */
.popup-box::-webkit-scrollbar {
  width: 8px;
}
.popup-box::-webkit-scrollbar-thumb {
  background: #c5c5c5;
  border-radius: 10px;
}
.popup-box::-webkit-scrollbar-track {
  background: transparent;
}

/* Bottom buttons — NOW SCROLL WITH CONTENT */
.popup-buttons {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 10px 0;
  border-top: 1px solid #eee;
}

.register-btn {
  background: #50dfa1;
  border: none;
  padding: 10px 25px;
  border-radius: 6px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  font-weight: 600;
}

.close-text-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  font-weight: 600;
}

.pdf-icon {
  font-size: 26px;
}
.content-container-ad h2{
	font-size: 32px;
    font-weight: 400;	 
 }			 
	@media (max-width: 768px) {
	.feature-card p {
	margin-bottom: 10px; /* smaller spacing */
	font-size:16px;
	font-weight: 400;
	padding: 0 140px 0px 140px;
  }
}		\
/* =============================== */
/* Mobile Popup Fix */
/* =============================== */
@media (max-width: 768px) {

  /* Overlay alignment */
  .popup-overlay {
    padding: 15px;
    align-items: flex-start; /* prevents vertical cutoff */
  }

  /* Popup box */
  .popup-box {
    width: 100%;          /* full width on mobile */
    max-width: 100%;
    max-height: 90vh;
    padding: 15px 18px;
    border-radius: 8px;
  }

  /* Close button */
  .close-btn {
    font-size: 22px;
    margin-bottom: 10px;
  }

  /* Headings */
  .popup-content h4 {
    font-size: 20px;
  }

  .popup-content .program {
    font-size: 22px;
  }

  /* Text */
  .popup-content p,
  .popup-content li {
    font-size: 15px;
    line-height: 1.5;
  }

  /* Buttons stack */
  .popup-buttons {
    flex-direction: column;
    gap: 15px;
    padding: 15px 0;
  }

  .register-btn,
  .close-text-btn {
    width: 100%;
    text-align: center;
  }

  /* P*

/* =============================== */
/* Section & Container */
/* =============================== */

/* --- Section --- */
.online-courses-section {
  padding: 40px 60px;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  background-color: #f6f6f6;
}

.online-courses-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 15px;
}

/* --- Heading --- */
.online-courses-heading {
  font-size: 32px;
  font-weight: 500;
  text-align: center;
  color: #333;
  margin-bottom: 10px;
}

.online-courses-subheading {
  text-align: center;
  color: #555;
  font-size: 18px;
  margin: 0 auto 40px;
  max-width: 800px;
  line-height: 1.6;
}

/* --- Grid --- */
.online-courses-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

/* --- Card --- */
.course-card {
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.course-image-wrap {
  height: 200px;
  overflow: hidden;
}

.course-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.course-card:hover .course-image {
  transform: scale(1.05);
}

.course-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.course-card-title {
  font-size: 17px;
  font-weight: 500;
  color: #333;
  margin-bottom: 15px;
}

/* --- List --- */
.course-features-list {
  list-style: none;
  padding: 0;
  margin-bottom: 25px;
  flex-grow: 1;
}

.course-features-list li {
  position: relative;
  padding-left: 18px;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  color: #2d2f3d;
  margin-bottom: 15px;
}

.course-features-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #007bff;
  font-weight: bold;
}

/* --- CTA --- */
.online-courses-cta {
  text-align: center;
  margin-top: 40px;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .online-courses-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .online-courses-section {
    padding: 30px 30px;
  }
}

@media (max-width: 768px) {
  .online-courses-grid {
    grid-template-columns: 1fr;
  }

  .online-courses-section {
    padding: 25px 20px;
  }
}


/* ===== Feature Section Grid ===== */

.trust-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 in one row */
  gap: 30px;
  justify-items: center;
}

/* ===== Feature Card ===== */

.trust-feature-card {
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ===== Headings & Text ===== */
.trust-feature-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 10px;
}

.trust-feature-text {
  font-size: 18px;
  font-weight: 300;
  margin-bottom: 10px;
}

/* ===== Icon ===== */
.trust-icon-wrapper {
  margin-bottom: 15px;
}

.trust-icon {
  height: 60px;
  color: #38a169;
  stroke: #38a169;
}

/* ===== Mobile View ===== */
@media (max-width: 768px) {
  .trust-features-grid {
    grid-template-columns: 1fr; /* stack */
    gap: 40px;
  }

  .trust-feature-card {
    max-width: 100%;
    padding: 0 20px;
  }
}
.trust-expertise-section {
    background-color: #192135;
    color: #fff;
}
.trust-feature-title {
    border-bottom: 4px solid #38a169;
    font-size: 22px;
/* 	height: 400px; */
}
.trust-feature-text {
    line-height: 1.7;
	font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    font-weight: 200;
}
/* ============================= */
/* Feature Section */
/* ============================= */

.bld-section {
  padding: 40px 0;
	background-color: #192135;
    color: #fff;
}

/* ============================= */
/* Grid Layout */
/* ============================= */

.bld-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ✅ 3 in one row */
  gap: 30px;
  justify-items: center;
}

/* ============================= */
/* Feature Card */
/* ============================= */

.bld-card {
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ============================= */
/* Text */
/* ============================= */

.bld-card p {
  margin-bottom: 10px;
  width: 100%;
  max-width: 600px;
  font-size: 18px;
  font-weight: 400;
	line-height: 1.7;
    font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    font-weight: 200;
}

/* ============================= */
/* Icon */
/* ============================= */

.bld-icon-wrap {
  margin-bottom: 10px;
}

.bld-icon {
  height: 70px;
  color: #38a169;
  stroke: #38a169;
}

/* ============================= */
/* Mobile */
/* ============================= */

@media (max-width: 768px) {
  .bld-grid {
    grid-template-columns: 1fr; /* stack */
    gap: 40px;
  }

  .bld-card p {
    padding: 0 20px;
  }
}
.trust-icon-wrapper {
  margin-bottom: 15px;
}

.trust-icon {
  width: 60px;
  height: 60px;
  color: #38a169;
  stroke: #38a169;
}
/* --- Heading Styling --- */
.language-learning-section h2 {
  /* Smaller font size for better fit on mobile */
  font-size: 24px;
  font-weight: 700;
  margin-top: 15px;
  margin-bottom: 8px;
  font-family: "Poppins", sans-serif;
  color: #1f1f1f;
  line-height: 1.2; /* Tighter line height for mobile */
}

/* --- Paragraph/List Styling --- */
.language-learning-section p,
.language-learning-section ul,
.language-learning-section li {
  /* Consistent, readable font size for mobile */
  font-size: 18px;

  font-family: "Source Sans Pro", sans-serif;
  color: #373333;
  font-weight: 400;
  max-width: 100%;
}

.language-learning-section p {
  margin-bottom: 18px;
  color: #484848;
  font-weight: 200;
  line-height: 1.8 !important;
  font-family: "IBM Plex Sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
.youtube-section {
            max-width: 800px; 
            margin: 20px auto; 
            font-family: Arial, sans-serif;
            text-align: center;
        }

        .youtube-section .video-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
        }

      
        .youtube-section .video-wrapper {
           
            position: relative;
            width: 100%;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
        }

       
        .youtube-section .video-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0; 
        }