/* =========================
   HERO
========================= */
.canada-hero {
  background: url("../../images/hero/canada-hero.jpg");
  background-size: cover;
  background-position: center;
}

.uk-hero {
  background: url("../../images/hero/UK-HERO.jpg");
  background-size: cover;
  background-position: center;
}

.usa-hero {
  background: url("../../images/hero/usa-hero.jpg");
  background-size: cover;
  background-position: center;
}

.australia-hero {
  background: url("../../images/hero/australia-hero.jpg");
  background-size: cover;
  background-position: center;
}
.germany-hero {
  background: url("../../images/hero/germany-hero.jpg");
  background-size: cover;
  background-position: center;
  background-size: cover;
  background-position: center;
}
.france-hero {
  background: url("../../images/hero/france-hero.jpg");
  background-size: cover;
  background-position: center;
}
.dubai-hero {
  background: url("../../images/hero/dubai-hero.jpg");
  background-size: cover;
  background-position: center;
}
.newzealand-hero {
  background: url("../../images/hero/newzealand-hero.jpg");
  background-size: cover;
  background-position: center;
}
.country-hero {
  position: relative;
  /* background:url('https://images.unsplash.com/photo-1517935706615-2717063c2225?q=80&w=1600&auto=format&fit=crop'); */
  background-size: cover;
  background-position: center;
  min-height: 420px;
  display: flex;
  align-items: center;
}

.country-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.country-hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 600px;
}

.country-hero-content span {
  display: block;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
}

.country-hero-content h1 {
  color: #fff;
  font-size: 72px;
  margin: 10px 0;
}

.country-hero-content p {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 25px;
}

/* =========================
   BUTTON
========================= */

.apply-btn {
  display: inline-block;
  padding: 12px 30px;
  background: #e5a12a;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: 0.3s;
}

.apply-btn:hover {
  background: #c98b20;
  color: #fff;
}

/* =========================
   WHY COUNTRY
========================= */

.why-country {
  padding: 80px 0;
}

.why-country h2 {
  color: #073b73;
  margin-bottom: 20px;
}

@media (min-width: 992px) {
  .why-country .row.align-items-stretch {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
    gap: 34px 56px;
    align-items: start;
  }

  .why-country .row.align-items-stretch > .col-lg-7 {
    display: contents;
  }

  .why-country .row.align-items-stretch > .col-lg-5 {
    width: auto;
    max-width: none;
    padding: 0;
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .why-country .row.align-items-stretch > .col-lg-7 > h2 {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }

  .why-country .row.align-items-stretch > .col-lg-7 > .country-list {
    grid-column: 1;
    grid-row: 2;
  }

  .why-country .row.align-items-stretch > .col-lg-7 > .quick-facts {
    grid-column: 1 / -1;
    grid-row: 3;
    width: min(100%, 980px);
    margin: 0 auto !important;
  }
}

.country-list {
  padding-left: 20px;
}

.country-list li {
  margin-bottom: 12px;
}

.quick-facts {
  background: var(--color-card-bg);
  padding: 30px;
  border-radius: 12px;
  border: 1px solid var(--color-card-border);
  text-align: center;
}

.quick-facts h3 {
  color: #073b73;
  margin-bottom: 20px;
}

.quick-facts ul {
  display: inline-block;
  margin: 0 auto;
  padding-left: 20px;
  text-align: left;
}

.quick-facts li {
  margin-bottom: 12px;
}

/* =========================
   COURSES
========================= */

.courses-section {
  padding: 0 0 80px;
}

.course-card {
  text-align: center;
  padding: 25px 15px;
  border: 1px solid var(--color-card-border);
  border-radius: 10px;
  background: var(--color-card-bg);
  transition: 0.3s;
  height: 100%;
}

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

.course-card i {
  font-size: 32px;
  color: #073b73;
  display: block;
  margin-bottom: 15px;
}

.course-card span {
  font-weight: 600;
}

/* =========================
   UNIVERSITIES
========================= */

.universities-section {
  padding-bottom: 80px;
}

.university-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  align-items: stretch;
}

.university-card {
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  padding: 14px;
  text-align: left;
  background: var(--color-card-bg);
  transition: 0.3s;
  height: 100%;
  display: flex;
  flex-direction: column;
}

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

.university-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.university-card h4 {
  color: #073b73;
  font-size: 18px;
  line-height: 1.25;
  margin-bottom: 0;
}

.university-card span {
  color: #073b73;
  font-size: 14px;
  font-weight: 600;
}

.university-card p {
  color: #666;
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
}

.university-image {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 12px;
}

@media (max-width: 1399px) {
  .university-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1199px) {
  .university-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .university-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .university-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================
   POPULAR CITIES
========================= */

.popular-cities-section {
  padding: 60px 0 0;
}

.city-card {
  text-align: center;
  padding: 28px 15px;
  border: 1px solid var(--color-card-border);
  border-radius: 10px;
  background: var(--color-card-bg);
  transition: 0.3s;
  height: 100%;
}

.city-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(7, 59, 115, 0.12);
}

.city-card i {
  font-size: 32px;
  color: #073b73;
  display: block;
  margin-bottom: 12px;
}

.city-card span {
  font-weight: 700;
  font-size: 15px;
  color: #073b73;
}

/* =========================
   CTA
========================= */

.country-cta {
  background: #073b73;
  color: #fff;
  padding: 80px 0;
}

.country-cta h2 {
  color: #fff;
  margin-bottom: 15px;
}

.country-cta p {
  margin-bottom: 25px;
}

/* =========================
   SECTION TITLE
========================= */

.section-title {
  margin-bottom: 40px;
}

.section-title h2 {
  color: #073b73;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {
  .country-hero {
    min-height: 320px;
  }

  .country-hero-content h1 {
    font-size: 48px;
  }

  .country-hero-content p {
    font-size: 16px;
  }
}

@media (max-width: 575.98px) {
  .country-hero {
    min-height: 360px;
    padding: 54px 0;
  }

  .country-hero-content h1 {
    font-size: 38px;
  }

  .why-country,
  .country-cta {
    padding: 56px 0;
  }

  .courses-section,
  .universities-section {
    padding-bottom: 56px;
  }

  .quick-facts {
    padding: 22px;
  }

  .apply-btn {
    width: 100%;
    text-align: center;
  }
}

/* =========================
   5-COLUMN GRID
========================= */

.col-lg-2.4 {
  flex: 0 0 auto;
  width: 20%;
}

@media (max-width: 1199.98px) {
  .col-lg-2.4 {
    width: 25%;
  }
}

@media (max-width: 991.98px) {
  .col-lg-2.4 {
    width: 33.333%;
  }
}

@media (max-width: 767.98px) {
  .col-lg-2.4 {
    width: 50%;
  }
}

@media (max-width: 575.98px) {
  .col-lg-2.4 {
    width: 100%;
  }
}

/* =========================
   UNIVERSITY IMAGE PLACEHOLDER
========================= */

.university-image-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  border-radius: 6px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #073b73 0%, #e5a12a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
}

/* =========================
   UK MAP
========================= */

.uk-map-container {
  align-self: flex-start;
  width: fit-content !important;
  max-width: 100%;
  height: auto !important;
  min-height: 0;
  text-align: center;
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  flex-direction: row !important;
  margin: 0 auto;
  padding: 0;
}

.why-country .col-lg-5.d-flex {
  align-items: flex-start;
  justify-content: center;
}

.uk-map-image {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: min(100%, 360px);
  height: auto !important;
  max-height: 360px;
  object-fit: contain !important;
  object-position: center;
  padding: 10px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.uk-map-image:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

/* =========================
   IMAGE LIGHTBOX / MODAL
========================= */
.image-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1050;
  padding: 20px;
}

.image-modal.active {
  display: flex;
}

.image-modal img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.6);
}

.image-modal .close-btn {
  position: absolute;
  top: 18px;
  right: 20px;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px 10px;
}

.image-modal .close-btn:focus {
  outline: 2px solid rgba(229, 161, 42, 0.9);
}

/* =========================
   INTAKES SECTION
========================= */

.intakes-section {
  padding: 80px 0;
  background: #f8f9fa;
}

.intake-card {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  border: 1px solid var(--color-card-border);
  transition: 0.3s;
  height: 100%;
}

.intake-card:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}

.intake-card h3 {
  color: #073b73;
  margin-bottom: 20px;
  font-size: 22px;
}

.intake-list {
  padding-left: 20px;
  margin: 0;
}

.intake-list li {
  margin-bottom: 12px;
  color: #666;
}

@media (max-width: 575.98px) {
  .uk-map-container {
    width: 100% !important;
    margin: 28px auto 0;
    padding: 0;
  }

  .uk-map-image {
    max-width: min(100%, 300px);
    max-height: 320px;
  }

  .intakes-section {
    padding: 56px 0;
  }

  .intake-card {
    padding: 22px;
  }
}