.floating-links {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

.floating-btn {
  background-color: #19262f; /* Dark background */
  border-radius: 100px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 44px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.floating-btn:hover {
  background-color: #19262f; /* Slightly lighter on hover */
  transform: scale(1.05);
}

.floating-btn img {
  width: 20px;
  height: 20px;
}
body {
  font-family: "Manrope", sans-serif !important;
}
:root {
  --brand-deep: #0e1a18;
  --brand-green: #0b642e;
  --brand-green-2: #0e7c36;
  --brand-text: #111827;
  --brand-muted: #475569;
  --pill-bg: #e6f3e9;
  --play-bg: #e6f3f7;
}

/* Top util bar */
.topbar {
  background: #edf3f4; /* Light background */
  color: #000;
  font-size: 0.925rem;
}
.topbar a {
  color: #19262f;
  text-decoration: none;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
}
/* Main navbar */
.navbar-dark {
  background: #19262f; /* Updated to requested dark shade */
}
.navbar .btn-outline-light:hover {
  color: #19262f;
  background: #fff;
}
.navbar .nav-link {
  color: #fff;
  /* font-family: "Manrope" sans-serif; */
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
}
.navbar .wisth_tgl_div i {
  color: #fff;
}
.navbar .menu_pro_btn a {
  background-color: var(--clr-icon);
  color: #fff;
  border-radius: 30px;
}
.navbar .navbar-nav > .nav-item > .nav-link {
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

.btn-brand {
  background: var(--brand-green);
  color: #fff;
  border: 0;
}
.btn-brand:hover {
  background: var(--brand-green-2);
  color: #fff;
}

/* Hero section */
.hero {
  padding-top: 2rem;
  padding-bottom: 3rem;
  background: #fff;
}
.hero h1 {
  font-weight: 600 !important;
  font-size: 45px;
  line-height: 50px;
  letter-spacing: -0.4px;
  color: var(--brand-text);
  /* font-weight: 800; */
  /* letter-spacing: -0.02em; */
  /* line-height: 1.12; */
  /* font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3.25rem); */
}
.hero .leadish {
  color: var(--brand-muted);
  font-size: 1.05rem;
}
.text-accent {
  color: var(--brand-green);
}

/* Image tiles */
.img-tile {
  border-radius: 1.25rem;
  overflow: hidden;
  background: #f3f4f6;
}
.img-tile > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Play badge */
.play-badge {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.play-circle {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--play-bg);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.play-circle i {
  font-size: 34px;
  color: var(--brand-deep);
  margin-left: 4px;
}

/* Green info card */
.green-card {
  border-radius: 1.25rem;
  background: var(--brand-green);
  color: #e8f7ee;
  position: relative;
  overflow: hidden;
  min-height: 210px;
}
.green-card .muted {
  color: #d3f0dd;
  opacity: 0.95;
}
.green-card svg {
  position: absolute;
  right: -40px;
  bottom: -20px;
  width: 260px;
  height: auto;
  opacity: 0.18;
  fill: none;
  stroke: #c8ecd6;
  stroke-width: 2;
}

/* CTA button */
.btn-pill {
  border-radius: 999px;
  padding: 0.9rem 1.2rem;
  font-weight: 600;
  background: var(--brand-deep);
  color: #fff;
}
.btn-pill:hover {
  background: var(--clr-deep);
  color: #fff;
}

/* Badge */
.badge-soft {
  background: var(--pill-bg);
  color: var(--brand-green);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.nav-item {
  font-size: 14px;
  margin: 0 10px;
}

.btn-blue {
  background: #19262f !important;
  color: white !important;
  font-size: 14px !important;
  width: 149px;
  height: 42px;
  margin-top: 11px;
  border-radius: 100px;
  padding: 12px 0 12px;
  font-weight: 600;
  text-decoration: none;
}

/* .btn-login {
  background: #0a5b0f !important;
  color: #d9d9d9 !important;
  font-size: 14px !important;
  font-weight: 600;
  border-radius: 30px !important;
  height: 42px;
  width: 149px;
  line-height: 14px;
  padding-top: 14px;
} */
.btn-login {
  background-color: var(--clr-icon);
  color: #fff;
  border-radius: 30px;
  padding: 16px 29.68px 16px 30px;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 14px; /* 100% */
  width: 149px;
  /* text-decoration: none; */
  align-items: center;
}
.btn-rounded {
  border-radius: 40px;
}

.app-color {
  color: #2b8e3d !important;
}
.feature-box {
  background-color: #f0f5f5;
  text-align: left;
  padding: 40px 20px;
  transition: all 0.3s ease;
  cursor: pointer;
  height: 100%; /* Make all boxes same height */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 12px;
}

.feature-box h2 {
  /* color: var(--clr-ink); */
  font-weight: 800;
  font-size: 40px;
  line-height: 40px;
  margin: 40px 0 0px 0px;
}

.feature-box p {
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.2px;
  margin-top: 5px;
  color: #4a4a4a;
  font-weight: 500;
}

.feature-box i {
  font-size: 30px;
  margin-bottom: 15px;
  color: #0a5b0f;
}

.feature-box:hover {
  background-color: #0a5b0f;
  color: #fff;
}

.feature-box:hover p,
.feature-box:hover i {
  color: #fff;
}

/* Default green background for 2nd column */
.active-box {
  background-color: #0a5b0f;
  color: white;
}

.active-box p,
.active-box i {
  color: white;
}
.btn-book-call {
  margin-left: 10px;
  padding: 10px 35px 10px 35px;
  background: #19262f !important;
  color: #d9d9d9 !important;
  border-radius: 30px !important;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 14px;
}
.partners-strip {
  background: #0a5b0f;
}

.partners-strip h2 {
  font-size: 48px;
  color: #fff;
  font-weight: 600;
  font-style: normal;
  line-height: 67.2px;
  letter-spacing: -0.4px;
}

.ls-2 {
  letter-spacing: 0.12em;
}

.logo-card {
  background: #fff;
  border-radius: 42px;
  padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.logo-card img {
  /* max-width: 120px;
        max-height: 72px; */
  object-fit: contain;
  display: block;
}

/* .logo-card img {
        width: auto;
        height: 60px;
        object-fit: contain;
        display: block;
        margin-bottom: 10px;
      } */

.logo-caption {
  font-size: 0.78rem;
  color: #6b7880;
  margin-top: 10px;
  line-height: 1.15;
}
:root {
  /* ==== Global Colors ==== */
  --clr-ink: #1a1a1a;
  --clr-accent: #2b8e3d;
  --clr-muted: #4a4a4a;
  --clr-pill: #cff0e4;
  --clr-icon: #0a5b0f;
  --clr-deep: #19262f;
  --clr-white: #ffffff;

  /* ==== Section-Specific Colors ==== */
  --sec-bg: #edf3f4;
  --icon-bg: #e8eaeb;
  --box-title: #1e293b;
  --box-sub: #6e798a;
  --font-third-line: #212529;
}

/* Section spacing (matches your layout) */
.about-affordable {
  background: #fff;
}

/* Left image wrapper */
.about-visual {
  border-radius: 1rem;
  overflow: hidden;
}
.about-photo {
  border-radius: 1rem;
  display: block;
}

/* Floating “pill” cards */
.about-pill {
  position: absolute;
  left: 14%;
  right: auto;
  display: flex;
  gap: 0.8rem;
  align-items: center;
  background: var(--clr-pill);
  color: var(--clr-ink);
  border-radius: 16px;
  padding: 14px 18px;
  min-width: 68%;
}
.pill-1 {
  top: 12%;
}
.pill-2 {
  top: 40%;
  left: 22%;
  min-width: 60%;
}
.pill-3 {
  top: 68%;
  min-width: 65%;
}

.pill-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #ffe8a6; /* soft badge behind icon */
  color: var(--clr-icon);
  font-size: 20px;
}
.pill-title {
  font-weight: 700;
  line-height: 1.1;
}
.pill-text {
  font-size: 0.9rem;
  color: var(--clr-muted);
  margin-top: 2px;
}

/* Right column text */
.about-kicker {
  color: var(--clr-accent);
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: 28.8px;
  letter-spacing: 4px;
}
.about-heading {
  color: var(--clr-ink);
  font-weight: 600;
  font-size: 48px;
  font-style: normal;
  line-height: 67.2px;
  letter-spacing: -0.4px;
}
.about-heading .text-accent {
  color: var(--clr-accent);
}
.about-lead {
  color: var(--clr-muted);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28.8px; /* 180% */
  letter-spacing: 0.2px;
}

/* Bullet list with green checks */
.about-list li {
  color: var(--clr-deep);
  margin: 0.5rem 0;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28.8px;
  letter-spacing: 0.2px;
}
/* Bullet list with green checks */
.about-list span {
  font-weight: 700;
}
.about-list i {
  color: var(--clr-accent);
  margin-right: 0.6rem;
  width: 20.2px;
  height: 20px;
}

/* CTA */
.about-cta {
  background-color: var(--clr-deep);
  color: #fff;
  border-radius: 30px;
  padding: 16px 29.68px 16px 30px;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 14px; /* 100% */
  text-decoration: none;
}
.about-cta:hover {
  background-color: var(--clr-deep);
  color: #fff;
}

/* Responsive tweak: keep pills readable on small screens */
@media (max-width: 767.98px) {
  .about-pill {
    left: 8%;
    min-width: 84%;
    padding: 12px 14px;
  }
  .pill-2 {
    left: 12%;
    min-width: 78%;
  }
  .pill-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
}
/* Section wrapper */
.cat-section {
  background: var(--sec-bg);
}

/* Head area */
.cat-kicker {
  color: var(--clr-accent);
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: 28.8px; /* 192% */
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.cat-title {
  color: var(--clr-ink);
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 67.2px; /* 140% */
  letter-spacing: -0.4px;
  margin: 0 0 0.35rem;
}
.cat-title span {
  color: var(--clr-icon);
}
.cat-subline {
  color: #212529; /* your 3rd-line color */
  font-family: "Segoe UI";
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 22.5px; /* 150% */
  margin: 0;
}

/* Top category cards */
.cat-card {
  background: var(--clr-white);
  border-radius: 20px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.06);
  height: 100%;
}

.cat-thumb {
  height: 180px; /* adjust to taste */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* crops any overflow */
  border-radius: 12px;
}
.cat-thumb img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain; /* no stretching */
  display: block;
}

.cat-card-caption {
  color: var(--clr-ink);
  font-size: 23px;
  font-style: normal;
  font-weight: 600;
  line-height: 34.5px; /* 150% */
  letter-spacing: -0.4px;
  font-weight: 600;
  margin-top: 0.75rem;
  text-align: left;
}
@media (max-width: 767.98px) {
  .cat-thumb {
    height: 150px;
  } /* smaller on mobile */
}

/* Mini category items */
.mini-item {
  background: var(--clr-white);
  border-radius: 7px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.06);
  margin-bottom: 12px;
}
.mini-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 32px;
  background: var(--icon-bg);
}
.mini-icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.mini-title {
  color: var(--box-title);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}
.mini-sub {
  color: var(--box-sub);
  font-family: "Segoe UI";
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 22.5px; /* 150% */
  margin-top: 1px;
}
/* util: letter spacing */
.ls-2 {
  letter-spacing: 0.14em;
}

/* Section */
.courses-section {
  background: #fff;
}

.courses-section h2 {
  color: var(--clr-ink);
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 67.2px;
  letter-spacing: -0.4px;
}

/* Card base */
.course-card {
  background: var(--sec-bg);
  padding: 8px 8px 0px 8px;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Banner with consistent height */
.course-media {
  position: relative;
  aspect-ratio: 16 / 7; /* consistent banner area */
  background: #f3f5f6;
}
.course-media img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* crops cleanly to match mock */
  display: block;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

/* Top-left tiny brand and round logo */
.badge-brand {
  position: absolute;
  left: 12px;
  top: 10px;
  background: #f2f4f5;
  color: var(--clr-deep);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.7rem;
  font-weight: 700;
}
.badge-logo {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  padding: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Body */
.course-body {
  padding: 14px 16px 0 16px;
}
.course-title {
  color: var(--clr-ink);
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 45px; /* 150% */
  letter-spacing: -0.4px;
  margin-bottom: 8px;
}

/* Meta row */
.course-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 8px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}
.course-meta li {
  color: var(--clr-muted);
  display: flex;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 25.2px; /* 180% */
  align-items: center;
}
.course-meta img {
  margin-right: 5px;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.course-desc {
  color: var(--clr-muted);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28.8px; /* 180% */
  letter-spacing: 0.2px;
  margin: 0 0 10px;
}

/* Footer */
.course-footer {
  padding: 42px 16px 32px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto; /* push footer to bottom: equal heights */
}
.course-price {
  color: var(--clr-icon);
  font-size: 23px;
  font-style: normal;
  font-weight: 600;
  line-height: 34.5px; /* 150% */
  letter-spacing: -0.4px;
}

/* Button look */
.course-card .btn-dark {
  background: var(--clr-deep);
  border: none;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
}
.course-card .btn-dark:hover {
  background: #0f1e26;
}

.start-title {
  color: var(--clr-accent);
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: 28.8px; /* 192% */
  letter-spacing: 4px;
  text-transform: uppercase;
}
.btn-all-course,
.btn-get-strated {
  border-radius: 30px;
  background-color: var(--clr-deep);
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 14px; /* 100% */
  padding: 16px 30px 16px 30px;
  text-decoration: none;
}
/* Section background (deep green) */
.why-section {
  background: var(--clr-icon);
  padding-top: 100px; /* desktop */
  padding-bottom: 100px;
}

.why-section h2 {
  color: #fff;
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 67.2px;
  letter-spacing: -0.4px;
}

/* Exact vertical spacing for the green band */
@media (max-width: 1199.98px) {
  .why-section {
    padding-top: 104px;
    padding-bottom: 104px;
  }
}
@media (max-width: 991.98px) {
  .why-section {
    padding-top: 88px;
    padding-bottom: 88px;
  }
}
@media (max-width: 767.98px) {
  .why-section {
    padding-top: 72px;
    padding-bottom: 72px;
  }
}
@media (max-width: 575.98px) {
  .why-section {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

/* Photo + note */
.why-photo-wrap {
  border-radius: 16px;
  overflow: hidden;
}
.why-photo {
  display: block;
  border-radius: 16px;
}
.why-note {
  position: absolute;
  right: 18px;
  bottom: 18px;
  background: var(--clr-white);
  border-radius: 16px;
  padding: 14px 16px;
  max-width: 78%;
}
.why-note p {
  color: var(--clr-muted);
  font-size: 0.95rem;
}
.why-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

/* Make all feature boxes same height */
.why-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 10px;
  border-radius: 10px;
  background: transparent; /* transparent background */
  height: 100%; /* fills equal height in row */
}

/* Ensure the columns stretch equally */
/* .row.g-3 > [class*="col-"] {
        display: flex;
      } */

/* Make inner content fill height */
/* .why-item > div {
        flex: 1;
      } */
.why-ico {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  background: transparent;
  border-radius: 10px;
  align-self: flex-start; /* forces icon to align with first text line */
}
.why-ico img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: none;
}

.why-title {
  color: #fff;
  font-size: 19px;
  font-style: normal;
  font-weight: 600;
  line-height: 30.4px; /* 160% */
  letter-spacing: -0.4px;
}
.why-sub {
  color: #ffffffbd;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28.8px; /* 180% */
  letter-spacing: 0.2px;
}
/* helper */
.ls-2 {
  letter-spacing: 0.14em;
}

/* Section bg stays white like reference */
.process-section {
  background: var(--clr-white);
}
.process-section h2 {
  color: var(--clr-ink);
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 67.2px;
  letter-spacing: -0.4px;
}
/* Top card with fine border and subtle radius */
.process-card {
  border: 1px solid var(--icon-bg); /* #E8EAEB from your palette */
  border-radius: 12px;
  padding: 18px 20px;
  background: var(--clr-white);
}

/* Bullet list styling */
/* Bullet list styling with dash instead of dot */
.process-list {
  list-style: none; /* remove default bullet */
  margin: 0;
  padding-left: 0; /* remove default indent */
  color: var(--clr-muted);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28.8px; /* 180% */
  letter-spacing: 0.2px;
}

.process-list li {
  margin: 6px 0;
  padding-left: 18px; /* space for dash */
  position: relative;
}

.process-list li::before {
  content: "–"; /* dash character */
  position: absolute;
  left: 0;
  color: var(--clr-muted); /* matches reference text color */
  font-weight: 500;
}

/* Stacked “accordion look” items */
.process-accordion .proc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--icon-bg);
  border-radius: 10px;
  background: transparent; /* as per your style */
  color: var(--clr-ink);
  text-decoration: none;
  margin-bottom: 10px;
  font-size: 23px;
  font-style: normal;
  font-weight: 600;
  line-height: 34.5px; /* 150% */
  letter-spacing: -0.4px;
}
.process-accordion .proc-item img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.9;
}
.process-accordion .proc-item:hover {
  background: rgba(0, 0, 0, 0.02);
}

/* Keep right image corners rounded like mock */
.rounded-4 {
  border-radius: 16px !important;
}
/* section bg like reference */
.testi-section {
  padding-top: 80px;
  padding-bottom: 80px;
  background: var(--sec-bg);
}

/* card look = white, soft radius, subtle shadow */
.testi-card {
  background: var(--clr-white);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
}

.testi-section h2 {
  color: var(--clr-ink);
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 67.2px;
  letter-spacing: -0.4px;
}

.testi-ava {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}
.testi-text {
  color: var(--clr-muted);
  margin: 8px 0 14px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28.8px; /* 180% */
  letter-spacing: 0.2px;
}

.testi-sep {
  border: 0;
  border-top: 1px solid #00506430;
  margin: 0 0 12px;
}

.testi-bookmark {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.85;
}
.testi-tag {
  color: var(--clr-ink);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 25.2px; /* 180% */
}

.testi-stars img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* spacing helper */
.ls-2 {
  letter-spacing: 0.14em;
}
/* === Testimonial equal-heights & fixed divider position === */

/* Make each grid cell stretch so the card can fill the column */
.testi-section .row.g-3 > [class*="col-"],
.testi-section .row.g-lg-4 > [class*="col-"] {
  display: flex;
}

/* Ensure cards fill the column height (already flex, but enforce) */
.testi-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Fix the text block height so the HR sits at the same vertical position */
.testi-text {
  /* show up to 4 lines; change 4 to taste */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;

  line-height: 1.6;
  font-size: 1rem;

  /* fallback to keep identical height even if line-clamp unsupported */
  min-height: calc(1.6em * 4);

  margin: 8px 0 14px; /* keep previous spacing */
}

/* Keep the separator spacing consistent */
.testi-sep {
  margin: 14px 0 14px;
}
.btn-view-more {
  border-radius: 30px;
  background-color: var(--clr-deep);
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 14px;
  padding: 16px 30px 16px 30px;
  text-decoration: none;
}
.std-name-title {
  color: var(--clr-ink);
  font-size: 19px;
  font-style: normal;
  font-weight: 600;
  line-height: 30.4px; /* 160% */
  letter-spacing: -0.4px;
}
/* Section bg like the reference */
.teachers-section {
  background: var(--clr-white);
}

/* Equal-height, content-friendly cards */
.teacher-card {
  background: transparent; /* images float, no box around */
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* Same image size for all cards */
.teacher-photo {
  width: 100%;
  aspect-ratio: 3 / 4; /* portrait like mock */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.teacher-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* crops consistently */
  display: block;
}

/* Caption area kept equal so rows align perfectly */
.teacher-caption {
  min-height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.teacher-name {
  margin: 0;
  color: var(--clr-ink);
  font-size: 23px;
  font-style: normal;
  font-weight: 600;
  line-height: 34.5px; /* 150% */
  letter-spacing: -0.4px;
}
.teacher-role {
  margin: 4px 0 0;
  color: #005064;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28.8px; /* 180% */
  letter-spacing: 0.2px;
}

.text-accent {
  color: var(--clr-icon);
}

.teachers-section h2 {
  font-family: Manrope;
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 67.2px; /* 140% */
  letter-spacing: -0.4px;
}

/* helper */
.ls-2 {
  letter-spacing: 0.14em;
}
/* helper */
.ls-2 {
  letter-spacing: 0.14em;
}
.text-accent {
  color: var(--clr-icon);
}

/* Section background like the mock */
.faq-section {
  background: var(--sec-bg);
}

.faq-section h2 {
  color: var(--clr-ink);
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 67.2px; /* 140% */
  letter-spacing: -0.4px;
}

/* White rounded box centered and constrained */
.faq-box {
  background: var(--clr-white);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  max-width: 720px; /* keep the list narrow, centered */
  text-align: left;
}

/* Each row */
.faq-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--icon-bg);
  cursor: default;
}
.faq-row:last-child {
  border-bottom: 0;
}

.faq-q {
  color: var(--clr-ink);
  font-family: "Segoe UI";
  font-size: 19px;
  font-style: normal;
  font-weight: 600;
  line-height: 30.4px; /* 160% */
  letter-spacing: -0.4px;
  text-align: start;
}
.faq-row.active .faq-q {
  color: var(--clr-icon);
  font-family: "Segoe UI";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px; /* 140% */
  text-align: start;
}

/* Plus icon in a dark rounded chip (matches reference) */
.faq-ico {
  width: 29.61px;
  height: 48.39px;
  border-radius: 999px;
  background: #1e293b;
  display: grid;
  place-items: center;
  flex: 0 0 28px;
}
.faq-ico img {
  width: 12px;
  height: 12px;
  object-fit: contain;
}
/* helpers */
.ls-2 {
  letter-spacing: 0.14em;
}

/* section bg like reference */
.blog-section {
  background: var(--clr-white);
}

.blog-section h2 {
  color: var(--clr-ink);
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 67.2px; /* 140% */
  letter-spacing: -0.4px;
}
.text-accent {
  color: var(--clr-icon);
}
/* Card: equal height, big rounded image on top, soft body panel */
.blog-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  border-radius: 18px;
  overflow: hidden;
  background: transparent;
}

/* fixed image area for uniformity */
.blog-thumb {
  aspect-ratio: 16 / 10; /* keeps all thumbs same height */
  overflow: hidden;
  flex-shrink: 0;
}
.blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* body panel */
.blog-body {
  background: var(--sec-bg);
  /* padding: 16px 18px 18px; */
  padding: 22px 20px;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

/* meta line */
.blog-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.meta-project,
.meta-date {
  color: var(--clr-muted);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 14px; /* 100% */
}
.meta-sep {
  width: 14px;
  height: 14px;
  object-fit: contain;
  opacity: 0.85;
}

/* title + excerpt */
.blog-title {
  margin: 0;
  color: var(--clr-ink);
  font-size: 23px;
  font-style: normal;
  font-weight: 600;
  line-height: 34.5px; /* 150% */
  letter-spacing: -0.4px;
  /* make title height consistent (2 lines max) */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* clamp to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(34.5px * 2); /* reserve space for 2 lines */
}
.blog-excerpt {
  color: var(--clr-muted);
  margin: 0;
  overflow: hidden;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28.8px; /* 180% */
  letter-spacing: 0.2px;

  /* clamp so all cards align */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: auto;
}
/* make each column act as a flex container (you already have d-flex in HTML) */
.row.g-3.g-lg-4.align-items-stretch > [class*="col-"] {
  display: flex; /* ensures children can stretch */
}
/* stretch the link to fill the column */
.blog-link {
  display: flex;
  width: 100%;
}
/* Section background like your pages */
.cta-start {
  background: var(--sec-bg);
  padding: 80px 0 80px 0;
}
.ls-2 {
  letter-spacing: 0.14em;
}

/* Inner green panel */
.cta-panel {
  background: var(--clr-icon); /* deep green (#0A5B0F) */
  border-radius: 16px;
  padding: 38px;
  color: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* Left copy */
.cta-title {
  color: #fff;
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 67.2px; /* 140% */
  letter-spacing: -0.4px;
  margin: 0.25rem 0 0.5rem;
}
.cta-sub {
  color: #ffffffbd;
  margin: 0 0 1rem;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28.8px; /* 180% */
  letter-spacing: 0.2px;
}

/* Pills */
.btn-pill {
  border-radius: 999px;
  padding: 0.5rem 1rem;
}
.btn-outline-light {
  border-color: #fff;
  color: #fff;
}
.btn-outline-light:hover {
  background: #fff;
  color: var(--clr-icon);
}

/* Overlapping avatars */
.cta-avatars {
  display: flex;
  align-items: center;
}
.cta-avatars img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  margin-left: -10px;
}
.cta-avatars img:first-child {
  margin-left: 0;
}
.cta-trust {
  color: var(--sec-bg);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 28.8px; /* 205.714% */
}

/* Right video placeholder (rounded like ref) */
.cta-video {
  border-radius: 14px;
  overflow: hidden;
  max-width: 420px;
  margin-left: auto;
}
.cta-video img {
  display: block;
  width: 100%;
  height: auto;
}

/* Layout polish */
@media (max-width: 991.98px) {
  .cta-panel {
    padding: 22px;
  }
  .cta-sub {
    max-width: none;
  }
  .cta-video {
    max-width: 100%;
  }
}
/* Footer base */
.footer-main {
  background: var(--clr-deep); /* #19262F from your root */
  color: #cbd5e1;
  position: relative;
  padding-right: 50px;
  padding-left: 50px;
  padding-top: 80px;
  padding-bottom: 24px;
}

/* Right artwork */
/* .footer-art {
        position: absolute;
        right: 20px;
        bottom: 150px;
        width: 0px;
        height: 90px;
        background: transparent;
        opacity: 1;
        pointer-events: none;
      } */

/* Headings + text */
.footer-head {
  color: #fff;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 34.5px; /* 150% */
  letter-spacing: -0.4px;
}

.footer-blurb {
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.74);
  font-family: Manrope;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28.8px; /* 180% */
  letter-spacing: 0.2px;
}

/* Subscribe form */
.footer-input {
  background: var(--clr-white);
  color: #19262f;
  border-radius: 30px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  /* padding: 10px 15px; */
  padding: 13px 20px 11.8px 20px;
}

.footer-input::placeholder {
  color: #19262f;
  opacity: 0.8;
}

.footer-form button {
  background: #d4e9ef;
  color: #19262f;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
  border-radius: 30px;
  padding: 7px 15px;
  border: none;
}

/* Lists */
.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-list li {
  margin: 0.35rem 0;
}

.footer-list a,
.footer-legal a {
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 28.8px; /* 180% */
  letter-spacing: 0.2px;
  text-decoration: none;
}

.footer-list a:hover,
.footer-legal a:hover {
  color: #ffffff;
}

/* Contact card */
.contact-card {
  background: #d4e9ef;
  border-radius: 14px; /* updated to match reference */
  padding: 16px;
  color: var(--box-title);
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  color: #19262f;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0.2px;
}

.contact-row img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.9;
}

.contact-row a {
  color: var(--clr-deep);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28.8px; /* 180% */
  letter-spacing: 0.2px;
  text-decoration: none;
}

/* Divider */
.footer-sep {
  border: 0;
  border-top: 1px solid var(--clr-white); /* lighter like reference */
  margin: 40px 0 12px; /* more top space like reference */
}

/* Bottom row */
.footer-legal {
  font-size: 14px;
  font-weight: 500;
  color: #cbd5e1;
}

.footer-legal a {
  color: #cbd5e1;
}

.footer-legal span {
  color: rgba(255, 255, 255, 0.5);
}

/* Column spacing adjustments */
.footer-main .row.g-4 {
  --bs-gutter-x: 3rem; /* wider horizontal gap like reference */
}

.footer-main .col-lg-4:first-child {
  padding-right: 2rem; /* breathing space after logo/subscribe */
}

.footer-main .col-lg-2 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.footer-main .col-lg-4:last-child {
  padding-left: 2rem; /* more space before contact card */
}
.footer-logo {
  max-height: 38px; /* matches your original inline style */
  height: auto;
  width: auto;
}
/* Small tweaks */
@media (max-width: 991.98px) {
  .footer-art {
    display: none;
  }
}

.course-price span {
  color: var(--clr-deep);
}

.courses-card .courses-card-body .courses-text h5 {
  font-size: 16px;
  line-height: 25px;
  font-weight: 600;
  padding-right: 7px;
  transition: 0.5s;
  color: var(--clr-ink);
}
.courses-card .courses-card-body .courses-text .courses-price h5 {
  color: var(--clr-accent);
}
.course-category h3 {
  color: var(--clr-ink);
}
.grid-view-body .courses-card .courses-text .review-icon span {
  background-color: var(--clr-deep);
  border-radius: 15px;
}

.courses-card .courses-card-body .courses-text p {
  color: var(--clr-muted);
}

.grid-view .category-heading span {
  color: var(--clr-muted);
  font-weight: 500;
}

.pagenation-items ul li a {
  text-decoration: none !important;
}

.grid-view .search-bootcamp button {
  background-color: var(--clr-deep);
  border-radius: 30px;
  width: 80px;
}

.bootcamp-details a {
  text-decoration: none;
}
.bootcamp-details .card-btn a {
  background-color: var(--clr-deep);
  border-radius: 30px;
}

.bootcamp-details .card-btn a:nth-of-type(2) {
  border-color: var(--clr-deep);
  color: var(--clr-deep);
  border-radius: 30px;
}
.bootcamp-details .card-btn a:nth-of-type(2):hover {
  background-color: var(--clr-deep);
}

.contact-page {
  font-family: "Manrope", sans-serif !important;
}
.contact-page .contact-heading h3,
h1 {
  color: var(--clr-ink);
}
.contact-page .contact-heading p {
  color: var(--clr-muted);
}
.contact-page button {
  border-radius: 30px;
  background-color: var(--clr-deep);
  border-color: var(--clr-deep);
}

#floatingWidgetSidebar {
  display: none !important;
}

.navbar-collapse.show {
  display: block;
}

.blog h1 span {
  color: var(--clr-ink);
}
.blog p {
  color: var(--clr-muted);
}
.blog .right-section .categories ul li a:hover {
  color: var(--clr-deep);
}

.blog .list-group-item h6 {
  font-size: 0.9rem;
}

.blog .rounded-pill {
  background-color: var(--clr-icon);
}

.blog-body .right-section .post p i {
  color: var(--clr-icon);
}

.blog-body .comment .message-btn {
  background-color: var(--clr-deep);
  border-color: var(--clr-deep);
  border-radius: 30px;
}
.blog-body .left-tag a {
  border-radius: 20px;
}
.instructor-right .instructon-icon i {
  color: var(--clr-icon);
}

.instructor-right .instructor-msg .btn {
  border-color: var(--clr-deep);
  border-radius: 30px;
}
.instructor-right .instructor-msg .btn:hover {
  background-color: var(--clr-deep);
  color: var(--clr-white);
}

/* instructor */
/* Ensure all course card columns stretch equally */
.instructor-1 .col-md-5 {
  display: flex;
}

/* Card fills the column */
.instructor-1 .courses-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* make all equal height */
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

/* link should also stretch fully */
.instructor-1 .courses-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* fixed, uniform image height */
.instructor-1 .courses-card-image {
  aspect-ratio: 16 / 9;
  /* force same size for all course images */
  width: 100%;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.instructor-1 .courses-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* cover keeps aspect while filling */
  display: block;
}

/* body fills remaining height */
.instructor-1 .courses-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* space out content */
  flex: 1;
  padding: 16px;
}

/* title clamped for consistency */
.instructor-1 .courses-text h5 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* clamp to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.4em * 2);
  /* reserve space for 2 lines */
}

/* review & price sections won't push unevenly */
.instructor-1 .review-icon,
.instructor-1 .courses-price-border {
  margin-top: auto;
  /* push to bottom */
}
/* =========================
   PRICE ROW (courses card)
   ========================= */

/* Top divider line */
.instructor-1
  .courses-card
  .courses-card-body
  .courses-text
  .courses-price-border {
  border-top: 1.5px solid #676c7d3a;
}

/* Price row container */
.instructor-1 .courses-card .courses-card-body .courses-text .courses-price {
  display: flex; /* row layout */
  align-items: center; /* vertically center */
  justify-content: space-between !important; /* left price | right duration */
  flex-wrap: nowrap !important; /* prevent wrapping to next line */
  width: 100%;
  margin-top: 10px;
}

/* LEFT: price group (current + optional old price) */
.instructor-1
  .courses-card
  .courses-card-body
  .courses-text
  .courses-price-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0; /* allow shrink instead of pushing right item down */
}
.instructor-1
  .courses-card
  .courses-card-body
  .courses-text
  .courses-price-left
  h5,
.instructor-1
  .courses-card
  .courses-card-body
  .courses-text
  .courses-price-left
  p {
  margin: 0;
  white-space: nowrap; /* keep price bits together */
}

/* Optional coloring (kept from your previous theme) */
.instructor-1 .courses-price-left span {
  color: #63cc94;
} /* if you use span for a tag/label */

/* RIGHT: duration group (clock + text) */
.instructor-1
  .courses-card
  .courses-card-body
  .courses-text
  .courses-price-right {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap; /* keep clock + duration together */
  flex: 0 0 auto; /* don't stretch, don't wrap */
}
.instructor-1
  .courses-card
  .courses-card-body
  .courses-text
  .courses-price-right
  i {
  color: #1f5c13;
  line-height: 1;
  font-size: 18px;
  padding-right: 5px; /* subtle space before text */
}
.instructor-1
  .courses-card
  .courses-card-body
  .courses-text
  .courses-price-right
  p {
  margin: 0;
}

/* (Optional) if something else is overriding flex layout */
.instructor-1 .courses-card-body .courses-text .courses-price,
.instructor-1 .courses-card-body .courses-text .courses-price-right {
  justify-content: initial; /* reset any old overrides */
}

/* Instructor CSS End */

/* Courses page CSS  */
/* Make each column stretch and let the card fill it */
.courses-grid-view-body .courses-card .col-lg-4,
.courses-grid-view-body .courses-card .col-md-6,
.courses-grid-view-body .courses-card .col-sm-6,
.courses-grid-view-body .courses-card .col-12 {
  display: flex;
}

/* The clickable card fills the column and becomes a vertical flex layout */
.courses-grid-view-body .courses-card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Uniform image block for all cards */
.courses-grid-view-body .courses-card-image {
  aspect-ratio: 16 / 9; /* same height for every image */
  width: 100%;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.courses-grid-view-body .courses-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Heart and level badge keep working (they're already positioned in your code) */
.courses-grid-view-body .courses-icon {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
}
.courses-grid-view-body .courses-card-image-text {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
}

/* Body grows to fill remaining height; price row sits at the bottom */
.courses-grid-view-body .courses-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  flex: 1; /* fill leftover height for equal cards */
}

/* Clamp the title so long titles don't make the card taller */
.courses-grid-view-body .courses-text h5 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* max 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.35em * 2); /* reserve space for 2 lines for equal layout */
}

/* Reviews row – keep it tidy on one line */
.courses-grid-view-body .review-icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Clamp the short description to keep heights identical (2 lines here) */
.courses-grid-view-body .ellipsis-line-2 {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.5em * 2);
  color: #667085; /* optional muted */
}

/* Price block anchored to the bottom so all cards end at the same place */
.courses-grid-view-body .courses-price-border {
  margin-top: auto;
}
.courses-grid-view-body .courses-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Optional: small screens */
@media (max-width: 575.98px) {
  .courses-grid-view-body .courses-text {
    padding: 14px;
  }
}
/* Courses CSS End */

.grid-view .pagenation-items .pagination .active .page-link {
  background-color: var(--clr-deep);
  color: #fff;
  box-shadow: 0px 7px 18px -8px var(--clr-deep);
}

.privacy-policy .container h2 {
  font-family: "Manrope", sans-serif !important;
}

.courses-card .courses-card-body .courses-card-image .courses-card-image-text {
  left: auto;
}

.courses {
  background-color: transparent;
}

@media (max-width: 767px) {
  .hero h1 {
    font-size: 30px;
    line-height: 40px;
  }
  .feature-box h2 {
    font-size: 30px;
  }
  .partners-strip h2 {
    font-size: 30px;
  }
  .about-heading {
    font-size: 30px;
    line-height: 47.2px;
  }

  .cat-title {
    font-size: 30px;
    line-height: 47.2px;
  }

  .courses-section h2 {
    font-size: 30px;
    line-height: 47.2px;
  }
  .course-title {
    font-size: 25px;
  }
  .why-section h2 {
    font-size: 30px;
    line-height: 47.2px;
  }
  .process-section h2 {
    font-size: 30px;
    line-height: 47.2px;
  }
  .process-accordion .proc-item {
    font-size: 20px;
  }
  .testi-section h2 {
    font-size: 35px;
    line-height: 47.2px;
  }
  .teachers-section h2 {
    font-size: 30px;
    line-height: 47.2px;
  }
  .teachers-section .col-12 {
    width: 50%;
  }
  .faq-section h2 {
    font-size: 30px;
    line-height: 47.2px;
  }
  .faq-box {
    max-width: 420px;
  }
  .blog-section h2 {
    font-size: 30px;
    line-height: 47.2px;
  }
  .cta-title {
    font-size: 30px;
    line-height: 47.2px;
  }
}

@media (max-width: 767px) {
  .nav-item .btn-login {
    margin-bottom: 5px;
  }
}

@media (max-width: 460px) {
  .contact-card .contact-row a {
    font-size: 14px;
  }
}

@media (max-width: 429px) {
  .contact-card .contact-row a {
    font-size: 11px;
  }
}

@media (min-width: 767px) {
  .courses-list-view-card-body .courses-card-image img {
    width: 200px!important;
  }
}