@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Poppins:wght@300;400;500;600;700&family=Momo+Trust+Display:wght@400&display=swap");

:root {
  --clr-primary: #0077b6;
  --clr-primary-dark: #023e8a;
  --clr-secondary: #00b4d8;
  --clr-accent: #90e0ef;
  --clr-deep: #1a2a4a;
  --clr-light: #f6f9fc;
  --clr-muted: #6c7a89;
  --clr-white: #ffffff;
  --clr-dark: #0b1526;
  --max-width: 1200px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 6px;
  --shadow-soft: 0 20px 45px rgba(4, 33, 60, 0.12);
  --shadow-card: 0 18px 36px rgba(11, 21, 38, 0.16);
  --transition: all 0.35s ease;
}

/* Loading Animation */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-secondary));
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-overlay.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid var(--clr-white);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  color: var(--clr-white);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.loading-logo {
  width: 80px;
  height: auto;
  opacity: 0.9;
  animation: fadeIn 0.8s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 0.9;
    transform: scale(1);
  }
}

/* Gradient Animation for Hero Backgrounds */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.page-hero-gif {
  background-size: 200% 200% !important;
}

/* Accessibility Helper */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Prevent unwanted horizontal scrolling caused by decorative pseudo-elements or
   accidental overflow from fixed-width elements on small viewports */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  color: var(--clr-deep);
  background-color: var(--clr-light);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

ul {
  list-style: none;
}

/* Screen-reader helper */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Ensure all elements properly handle text wrapping */
* {
  box-sizing: border-box;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.container {
  width: min(calc(100% - 3rem), var(--max-width));
  margin-inline: auto;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: var(--transition);
  border: 2px solid transparent;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 119, 182, 0.25);
}

.btn-primary {
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-secondary));
  color: var(--clr-white);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0, 119, 182, 0.35);
}

.btn-outline {
  background-color: transparent;
  border-color: var(--clr-white);
  color: var(--clr-white);
}

.btn-outline:hover {
  background-color: var(--clr-white);
  color: var(--clr-primary-dark);
}

.section-title {
  font-family: "Momo Trust Display", serif;
  font-size: clamp(2.2rem, 3vw, 3.1rem);
  margin-bottom: 1rem;
  color: var(--clr-deep);
}

.section-subtitle {
  color: var(--clr-muted);
  max-width: 620px;
  margin-bottom: 2.5rem;
}

.section {
  padding: 5.5rem 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background-color: rgba(0, 119, 182, 0.12);
  color: var(--clr-primary-dark);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body.nav-open {
  overflow: hidden;
}

[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: var(--transition);
}

[data-animate].animated {
  opacity: 1;
  transform: translateY(0);
}

/* Header */
.top-bar {
  background-color: var(--clr-deep);
  color: var(--clr-white);
  font-size: 0.9rem;
}

.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
}

.top-bar a {
  color: var(--clr-accent);
  font-weight: 500;
}

.social-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Responsive top-bar */
@media (max-width: 768px) {
  .top-bar .container {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  .social-links {
    justify-content: center;
  }
}

header {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(11, 21, 38, 0.05);
}

header.scrolled {
  box-shadow: 0 12px 35px rgba(11, 21, 38, 0.12);
}

/* ========================================= */
/* AUTOMATED RESPONSIVE HEADER LAYOUT        */
/* ========================================= */

/* Main header container: Keeps logo and navigation separate */
.main-header {
  display: flex;
  justify-content: space-between; /* Logo left, navigation right */
  align-items: center; /* Vertical alignment */
  padding: 1rem 0;
  min-height: 80px;
  gap: 30px; /* Increased gap for more space between logo and nav */
  width: 100%;
  box-sizing: border-box;
}

/* Navigation wrapper: Allows automatic flex-wrapping */
.navigation-wrapper {
  display: flex;
  flex-wrap: wrap; /* KEY: Automatic wrapping when content exceeds space */
  justify-content: flex-end; /* Aligns to the right */
  align-items: center;
  gap: 25px; /* Increased gap for more breathing room */
  flex-shrink: 1; /* Allow shrinking to enable wrapping */
  max-width: 100%; /* Ensure it doesn't exceed container */
  min-width: 0; /* Allow flex items to shrink below their minimum content size */
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-brand img {
  width: 52px;
  height: auto;
}

.nav-brand span {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--clr-primary-dark);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem; /* Increased gap for more space between items */
  font-weight: 500;
  flex-shrink: 1; /* Allow shrinking to enable better wrapping */
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0; /* Allow flex items to shrink */
}

.nav-links > li {
  position: relative;
}

.nav-links > li > a {
  color: var(--clr-deep);
  padding: 0.75rem 1rem; /* Increased padding for more space */
  border-bottom: 2px solid transparent;
  transition: var(--transition);
  white-space: nowrap; /* Prevent text wrapping in nav items */
}

.nav-links > li > a:hover,
.nav-links > li > a:focus,
.nav-links > li > a.active {
  color: var(--clr-primary);
  border-color: var(--clr-primary);
}

.dropdown-toggle::after {
  content: "\25BE";
  margin-left: 0.4rem;
  font-size: 0.7rem;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 0;
  min-width: 320px; /* Increased width for longer content */
  max-width: 400px; /* Prevent menus from being too wide */
  background-color: var(--clr-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem; /* More padding for breathing room */
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: var(--transition);
  z-index: 1000; /* Ensure dropdown appears above other content */
}

.nav-links > li:focus-within .dropdown-menu,
.nav-links > li:hover .dropdown-menu,
.nav-links > li.dropdown-open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu a {
  display: block;
  padding: 0.75rem 1rem; /* More padding for longer content */
  border-radius: var(--radius-sm);
  color: var(--clr-deep);
  transition: var(--transition);
  text-decoration: none;
  line-height: 1.4; /* Better line height for readability */
}

.dropdown-menu a:hover {
  background-color: rgba(0, 180, 216, 0.12);
  color: var(--clr-primary-dark);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Mobile optimization - still use hamburger on very small screens */
@media (max-width: 768px) {
  .main-header {
    padding: 0.5rem 0;
    min-height: 60px;
    flex-wrap: wrap; /* Allow header to wrap on very small screens */
    gap: 10px;
  }

  .navigation-wrapper {
    gap: 0.5rem;
    order: 2; /* Move navigation below logo on mobile */
    width: 100%;
    justify-content: center; /* Center navigation on mobile */
  }

  .nav-brand {
    order: 1; /* Logo comes first on mobile */
  }

  .nav-links {
    display: none; /* Hide navigation links on mobile */
  }

  .nav-toggle {
    display: block; /* Show hamburger menu on mobile */
    order: 3; /* Hamburger comes after navigation wrapper */
  }
}

/* Force navigation stacking before hamburger menu */
@media (max-width: 850px) and (min-width: 769px) {
  .navigation-wrapper {
    flex-direction: column; /* Stack navigation vertically */
    align-items: flex-end; /* Align to right */
    gap: 10px;
    width: auto; /* Allow natural width */
  }

  .nav-links {
    flex-direction: column; /* Stack nav items vertically */
    gap: 0.5rem;
    align-items: flex-end;
  }

  .nav-links > li > a {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.85rem;
  color: var(--clr-primary-dark);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0.5rem;
}

.nav-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

body.nav-open .nav-close {
  opacity: 1;
  visibility: visible;
}

/* Responsive Topnav */
.topnav {
  background-color: var(--clr-primary);
  overflow: hidden;
  border-radius: var(--radius-md);
}

.topnav a {
  float: left;
  display: block;
  color: var(--clr-white);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: var(--clr-primary-dark);
  color: var(--clr-white);
}

.topnav a.active {
  background-color: var(--clr-secondary);
  color: var(--clr-white);
}

.topnav .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* Hero */

.hero {
  position: relative;
  min-height: 90vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--clr-white);
  overflow: hidden;
}

.hero .hero-gif,
.hero video,
.hero::before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero .hero-gif {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: none; /* Remove any animations that might interfere */
}

.hero::before {
  content: "";
  background: linear-gradient(
    140deg,
    rgba(2, 62, 138, 0.82),
    rgba(0, 119, 182, 0.35)
  );
  z-index: -1;
}

.hero .container {
  padding: 6rem 0 5rem;
}

.hero h1,
.hero h2 {
  font-family: "Momo Trust Display", serif;
  word-break: break-word;
}

.hero h1 {
  font-size: clamp(3rem, 6vw, 4.5rem);
  margin-bottom: 1.5rem;
  transition: transform 0.3s ease, text-shadow 0.3s ease, color 0.3s ease;
}

.hero h1:hover {
  transform: scale(1.05);
  color: #ffc107;
}

.hero h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: 1rem;
  transition: transform 0.3s ease, text-shadow 0.3s ease;
}

.hero h2:hover {
  transform: scale(1.05);
}

.hero h2:hover .agency-name {
  color: #ffc107;
}

.hero p {
  max-width: 640px;
  margin: 0 auto 2.25rem;
  font-size: 1.1rem;
  word-break: break-word;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.hero-highlights {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  justify-content: center;
}

.hero-card {
  background: rgba(0, 0, 0, 0.7);
  padding: 1.1rem 1.4rem;
  border-radius: var(--radius-md);
  max-width: 260px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.hero-card:hover h3,
.hero-card:hover p {
  color: #ffc107;
  transition: color 0.3s ease;
}

.hero-card h3 {
  margin-bottom: 0.35rem;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: "Momo Trust Display", serif;
}

.hero-card p {
  margin: 0;
  font-size: 0.95rem;
}

/* Service grid */

.service-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.service-card {
  background-color: var(--clr-white);
  padding: 2.25rem 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(7, 34, 64, 0.06);
  transition: var(--transition);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card);
}

.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 180, 216, 0.12),
    rgba(2, 62, 138, 0.08)
  );
  opacity: 0;
  transition: var(--transition);
}

.service-card:hover::after {
  opacity: 1;
}

.service-card h3 {
  font-size: 1.35rem;
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
}

.service-card p {
  color: var(--clr-muted);
  margin-bottom: 1.5rem;
  z-index: 1;
  position: relative;
}

.service-card .cta-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--clr-primary);
}

.service-card .cta-link svg {
  transition: transform 0.3s ease;
}

.service-card:hover .cta-link svg {
  transform: translateX(4px);
}

/* Highlighted tours */

.tour-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.tour-card {
  background-color: var(--clr-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}

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

.cyprus-img {
  object-position: center 7%;
}

.workpermit-img {
  object-position: top center;
}

.tour-img {
  object-position: center 30%;
}

.student-img {
  object-position: top center;
}

.russia-img {
  object-position: top center;
}

.switzerland-img {
  object-position: center 5%;
}

.tour-card-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.tour-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--clr-muted);
}

.tour-card h3 {
  font-size: 1.35rem;
  margin-bottom: 0.75rem;
  word-break: break-word;
}

.tour-card p {
  flex-grow: 1;
  color: var(--clr-muted);
  margin-bottom: 1.25rem;
  word-break: break-word;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  background-color: rgba(2, 62, 138, 0.12);
  color: var(--clr-primary-dark);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.price {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--clr-primary-dark);
}

/* Testimonials */

.testimonial-section {
  background-color: var(--clr-white);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.testimonial-card {
  background: var(--clr-light);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-soft);
  position: relative;
}

.testimonial-card::before {
  content: "\201C";
  position: absolute;
  top: -15px;
  left: 25px;
  font-size: 4rem;
  color: rgba(0, 119, 182, 0.18);
}

.testimonial-card p {
  margin-bottom: 1.5rem;
  color: var(--clr-deep);
  word-break: break-word;
}

.client {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.client img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(0, 180, 216, 0.35);
}

.client strong {
  display: block;
  font-size: 1rem;
}

.client span {
  color: var(--clr-muted);
  font-size: 0.9rem;
}

/* CTA banner */

.cta-banner {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(2, 62, 138, 0.95),
    rgba(0, 180, 216, 0.85)
  );
  border-radius: var(--radius-lg);
  padding: 3.5rem;
  color: var(--clr-white);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.cta-banner::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -90px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 35px solid rgba(255, 255, 255, 0.08);
}

.cta-banner h2 {
  font-family: "Momo Trust Display", serif;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin-bottom: 1rem;
}

.cta-banner p {
  max-width: 500px;
  margin-bottom: 2rem;
}

/* Footer */

footer {
  background-color: var(--clr-deep);
  color: var(--clr-white);
  padding: 4rem 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.5rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.footer-logo img {
  width: 60px;
}

.footer-logo span {
  font-size: 1.4rem;
  font-weight: 700;
}

.footer-links a {
  display: block;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 0.6rem;
  transition: var(--transition);
}

.footer-links a:hover {
  color: var(--clr-accent);
  transform: translateX(6px);
}

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.newsletter-form input {
  flex: 1 1 220px;
  padding: 0.85rem;
  border-radius: var(--radius-sm);
  border: none;
}

.footer-bottom {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
}

/* Page header */

.page-hero {
  position: relative;
  background: linear-gradient(
      135deg,
      rgba(2, 62, 138, 0.92),
      rgba(0, 180, 216, 0.82)
    ),
    url("../../src/gallery_013.jpeg") center/cover;
  color: var(--clr-white);
  padding: 6rem 0 5rem;
  text-align: center;
  overflow: hidden;
}

.page-hero .page-hero-gif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(2, 62, 138, 0.92),
    rgba(0, 180, 216, 0.82)
  );
  z-index: 0;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.page-hero .container {
  position: relative;
  z-index: 2;
}

.page-hero h1 {
  font-family: "Momo Trust Display", serif;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin-bottom: 1rem;
  word-break: break-word;
  color: white;
}

.breadcrumbs {
  display: inline-flex;
  gap: 0.65rem;
  font-size: 0.95rem;
}

.breadcrumbs a {
  color: var(--clr-accent);
}

/* Page content */

.page-section {
  padding: 4.5rem 0;
}

.grid-2 {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}

.grid-3 {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

.card {
  background-color: var(--clr-white);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  box-shadow: var(--shadow-soft);
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.card.visible {
  display: block;
}

.card h3 {
  margin-bottom: 0.75rem;
}

.highlight-list {
  display: grid;
  gap: 1.1rem;
}

.highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.highlight-item span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(0, 180, 216, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-primary-dark);
  font-weight: 600;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.75rem;
}

.table th,
.table td {
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid rgba(7, 34, 64, 0.08);
  text-align: left;
}

.table th {
  background-color: rgba(0, 119, 182, 0.08);
}

.accordion {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.accordion-item + .accordion-item {
  border-top: 1px solid rgba(7, 34, 64, 0.08);
}

.accordion-header {
  background-color: var(--clr-white);
  padding: 1.1rem 1.35rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
}

.accordion-content {
  background-color: rgba(0, 119, 182, 0.04);
  display: none;
  padding: 1.2rem 1.35rem;
}

.accordion-item.active .accordion-content {
  display: block;
}

/* Gallery */

.gallery-grid {
  columns: 4;
  column-gap: 1rem;
}

.gallery-grid figure {
  break-inside: avoid;
  margin-bottom: 1rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.gallery-grid figcaption {
  padding: 0.75rem 1rem;
  background-color: var(--clr-white);
  color: var(--clr-muted);
}

/* Contact */

.contact-wrapper {
  display: grid;
  gap: 2.75rem;
  grid-template-columns: 1.2fr 0.8fr;
}

.contact-form {
  background-color: var(--clr-white);
  padding: 2.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.contact-form h2 {
  margin-bottom: 1rem;
}

.contact-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.35rem;
}

.contact-form label {
  font-weight: 600;
  color: var(--clr-deep);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  padding: 0.9rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(7, 34, 64, 0.12);
  font-size: 1rem;
  transition: var(--transition);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 4px rgba(0, 119, 182, 0.15);
}

.contact-form textarea {
  min-height: 140px;
}

.contact-details {
  background: linear-gradient(
    135deg,
    rgba(2, 62, 138, 0.95),
    rgba(0, 180, 216, 0.85)
  );
  border-radius: var(--radius-lg);
  padding: 2.75rem 2.25rem;
  color: var(--clr-white);
  box-shadow: var(--shadow-card);
}

.contact-details h3 {
  margin-bottom: 1.5rem;
}

.contact-details ul {
  display: grid;
  gap: 1.5rem;
}

.contact-details strong {
  display: block;
  margin-bottom: 0.35rem;
}

.map-wrapper iframe {
  width: 100%;
  border: 0;
  border-radius: var(--radius-md);
  height: 320px;
  box-shadow: var(--shadow-soft);
}

/* Blog */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}

.blog-card {
  background-color: var(--clr-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}

.blog-card img {
  height: 200px;
  object-fit: cover;
}

.blog-card-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-grow: 1;
}

.blog-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--clr-muted);
}

.blog-card-body h3 {
  font-size: 1.35rem;
  line-height: 1.4;
}

.blog-card-body p {
  color: var(--clr-muted);
  flex-grow: 1;
}

/* Timeline */

.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  width: 4px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 119, 182, 0.25),
    rgba(0, 180, 216, 0.05)
  );
}

.timeline-item {
  position: relative;
  margin-bottom: 2.5rem;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -23px;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--clr-white);
  border: 4px solid var(--clr-primary);
}

.timeline-item h3 {
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
}

.timeline-item span {
  display: block;
  font-size: 0.9rem;
  color: var(--clr-muted);
  margin-bottom: 0.8rem;
}

/* Table tabs */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.tab-btn {
  padding: 0.65rem 1.35rem;
  border-radius: 999px;
  border: 1px solid rgba(7, 34, 64, 0.12);
  font-weight: 600;
  cursor: pointer;
  background-color: var(--clr-white);
  transition: var(--transition);
}

.tab-btn.active,
.tab-btn:hover {
  background-color: var(--clr-primary);
  color: var(--clr-white);
  border-color: var(--clr-primary);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem;
}

.stat-card {
  background-color: var(--clr-white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow-soft);
}

.stat-card h3 {
  font-size: 2.4rem;
  margin-bottom: 0.35rem;
  color: var(--clr-primary-dark);
}

.stat-card span {
  color: var(--clr-muted);
}

.partner-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.5rem;
  align-items: center;
  justify-items: center;
}

.partner-logos img {
  max-width: 120px;
  opacity: 0.65;
  transition: var(--transition);
}

.partner-logos img:hover {
  opacity: 1;
}

.faq-list {
  display: grid;
  gap: 1.25rem;
}

.faq-item {
  background-color: var(--clr-white);
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.faq-item h3 {
  margin-bottom: 0.75rem;
}

/* Utility */

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

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

.quote {
  border-left: 4px solid var(--clr-primary);
  padding-left: 1rem;
  color: var(--clr-muted);
  font-style: italic;
}

.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background-color: rgba(144, 224, 239, 0.25);
  color: var(--clr-primary-dark);
  font-weight: 600;
}

.table-responsive {
  overflow-x: auto;
}

/* =================================== */
/* MOBILE-FIRST RESPONSIVE DESIGN     */
/* =================================== */

/* =================================== */
/* 1. Base (Mobile) Styles             */
/* =================================== */
/* These styles apply to ALL screen sizes, designed for mobile first */

.tour-grid,
.testimonial-grid,
.blog-grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column on mobile */
  gap: 1.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column on mobile */
  gap: 2rem;
}

.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr; /* Single column on mobile */
  gap: 2rem;
}

.gallery-grid {
  columns: 1; /* Single column on mobile */
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column on mobile */
  gap: 1.5rem;
}

.btn {
  width: 100%; /* Full width on mobile */
  justify-content: center;
}

.newsletter-form {
  display: flex;
  flex-direction: column; /* Stack vertically on mobile */
  gap: 1rem;
}

.hero-highlights {
  display: flex;
  flex-direction: column; /* Stack vertically on mobile */
  align-items: stretch;
  gap: 1rem;
}

/* =================================== */
/* 2. Tablet Styles (768px+)          */
/* =================================== */

@media (min-width: 768px) {
  .tour-grid,
  .testimonial-grid,
  .blog-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
  }

  .gallery-grid {
    columns: 2; /* 2 columns on tablets */
  }

  .btn {
    width: auto; /* Auto width on tablets */
  }

  .grid-2 {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
  }
}

/* =================================== */
/* 3. Desktop Styles (1024px+)         */
/* =================================== */

@media (min-width: 1024px) {
  .tour-grid,
  .testimonial-grid,
  .blog-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
  }

  .footer-grid {
    grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
  }

  .contact-wrapper {
    grid-template-columns: 1.2fr 0.8fr; /* 2 columns with different widths */
  }

  .stats-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
  }

  .gallery-grid {
    columns: 3; /* 3 columns on desktop */
  }

  .newsletter-form {
    flex-direction: row; /* Side by side on desktop */
    align-items: center;
  }

  .hero-highlights {
    flex-direction: row; /* Side by side on desktop */
    justify-content: space-between;
  }

  .btn {
    width: auto; /* Auto width on desktop */
  }

  .grid-2 {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on desktop */
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
  }
}

/* =================================== */
/* 4. Large Desktop Styles (1200px+)   */
/* =================================== */

@media (min-width: 1200px) {
  .tour-grid,
  .testimonial-grid,
  .blog-grid {
    grid-template-columns: repeat(4, 1fr); /* 4 columns on large desktop */
  }
}

/* =================================== */
/* MOBILE NAVIGATION (576px and below) */
/* =================================== */

@media (max-width: 576px) {
  header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .nav-menu-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--clr-white);
    box-shadow: -4px 0 35px rgba(11, 21, 38, 0.18);
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1001;
  }

  .nav-menu-wrapper.open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }

  .nav-links {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 2rem;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
  }

  .nav-links li a {
    font-size: 1.2rem;
    padding: 0.5rem 0;
    display: block;
    word-break: normal;
    white-space: normal;
  }

  .nav-actions {
    display: none; /* Hide desktop button on mobile */
  }

  .nav-toggle {
    display: block;
  }

  .nav-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1002;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--clr-primary-dark);
    cursor: pointer;
  }

  body.nav-open .nav-close {
    opacity: 1;
    visibility: visible;
  }

  .navbar {
    padding: 1rem 0;
  }

  .nav-links li {
    width: 100%;
  }

  .dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    padding: 0;
    background: none;
    min-width: auto;
    margin-top: 0.5rem;
    padding-left: 20px;
  }

  .dropdown-menu a {
    font-size: 1rem;
    color: var(--clr-muted);
    padding: 0.4rem 0;
  }
}

@media (max-width: 768px) {
  .tour-grid,
  .testimonial-grid,
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    columns: 2;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-highlights {
    flex-direction: column;
    align-items: stretch;
  }

  .gallery-grid {
    columns: 1;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .newsletter-form {
    flex-direction: column;
  }

  /* =================================== */
  /* DESKTOP NAVIGATION (577px and above) */
  /* =================================== */

  @media (min-width: 577px) {
    .nav-menu-wrapper {
      position: static;
      transform: none;
      opacity: 1;
      visibility: visible;
      width: auto;
      height: auto;
      background: none;
      box-shadow: none;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 2rem;
    }

    .nav-close {
      display: none; /* Hide close button on desktop */
    }

    .nav-links {
      display: flex;
      position: static;
      flex-direction: row;
      gap: 1.75rem;
      font-weight: 500;
      padding: 0;
      transform: none;
      opacity: 1;
      visibility: visible;
      width: auto;
      height: auto;
      background: none;
      box-shadow: none;
    }

    .nav-links li {
      margin: 0;
    }

    .nav-links li a {
      font-size: 1rem;
      padding: 0.35rem 0;
      word-break: normal;
      white-space: normal;
      transition: color 0.3s ease;
    }

    .nav-links li a:hover {
      color: var(--clr-primary);
    }

    .nav-actions {
      display: flex;
      align-items: center;
    }

    .nav-toggle {
      display: none; /* Hide hamburger on desktop */
    }

    .nav-links li a {
      font-size: 1rem;
      padding: 0.35rem 0;
      word-break: normal;
      white-space: normal;
      transition: color 0.3s ease;
    }

    .nav-links li a:hover {
      color: var(--clr-primary);
    }

    .nav-actions {
      display: flex;
      align-items: center;
    }
  }

  /* Reduce CTA decorative element overflow on very small screens */
  @media (max-width: 480px) {
    .cta-banner::after {
      right: -40px;
      top: -60px;
      width: 150px;
      height: 150px;
      border-width: 20px;
    }
  }
}