:root {
      --brand-dark: #0c3a2c;
      --brand: #176246;
      --brand-pale: #e9f3ee;
      --orange: #e88a1a;
      --orange-dark: #dd8f1f;
      --cream: #f8f6f0;
      --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body {
      font-family: 'Inter', sans-serif;
      color: #16241e;
  }

  .font-display {
      font-family: 'Poppins', sans-serif;
  }

  .text-brand {
      color: var(--brand) !important;
  }

  .text-orange {
      color: var(--orange-dark) !important;
  }

  .bg-brand-dark {
      background-color: var(--brand-dark) !important;
  }

  .bg-brand {
      background-color: var(--brand) !important;
  }

  .bg-brand-pale {
      background-color: var(--brand-pale) !important;
  }

  .bg-cream {
      background-color: var(--cream) !important;
  }

  .bg-orange {
      background-color: var(--orange) !important;
  }

  .btn-orange {
      background-color: var(--orange);
      font-size: 16px;
      color: #ffffff;
      border-color: var(--orange);
      transition: var(--transition);
  }

  .btn-orange:hover {
      background-color: var(--orange-dark);
      border-color: var(--orange-dark);
      color: #1c1404;
  }

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

  .btn-brand:hover {
      background-color: var(--brand-dark);
      border-color: var(--brand-dark);
      color: #fff;
      transition: var(--transition);
  }

  .bg-gradient-photo {
      background: linear-gradient(135deg, #2c5f49, #0b2f23);
  }

  .bg-gradient-dark {
      background: linear-gradient(135deg, #0e3e2f, #163e2c);
  }

  .bg-gradient-purple {
      background: linear-gradient(135deg, #3a2c52, #1d1530);
  }

  .bg-gradient-blue {
      background: linear-gradient(135deg, #7fa9c9, #3f6b8f);
  }

  .watermark-text {
      font-size: clamp(36px, 9vw, 130px);
      color: rgba(255, 255, 255, .2);
      letter-spacing: 6px;
  }

  .brand-badge {
      width: 48px;
      height: 48px;
  }

  .icon-circle {
      width: 80px;
      height: 80px;
  }

  .step-num {
      width: 28px;
      height: 28px;
  }

  .arrow-btn {
      width: 42px;
      height: 42px;
  }

  .testi-photo {
      min-height: 260px;
  }

  .accordion-button:not(.collapsed) {
      background-color: var(--brand-pale);
      color: var(--brand-dark);
      box-shadow: none;
  }

  .accordion-button:focus {
      box-shadow: 0 0 0 .2rem rgba(23, 98, 70, .15);
  }

  .nav-pills .nav-link.active {
      background-color: var(--brand);
  }

  .nav-pills .nav-link {
      padding: 11px 26px;
      border-radius: 24px;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: var(--gray);
      transition: all .2s;
  }

  section {
      padding: clamp(3rem, 6vw, 8rem) clamp(0.7rem, 3vw, 4rem);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      font-family: 'Poppins', sans-serif;
  }

  h2,
  h3 {
      font-size: clamp(1.7rem, 5vw, 3rem);
  }

  .card p {
      font-size: 13px;
  }

  #backToTop {
      position: fixed;
      bottom: 30px;
      right: 20px;
      width: 44px;
      height: 44px;
      background: var(--brand-dark);
      color: #fff;
      border: none;
      border-radius: 12px;
      font-size: 18px;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 24px rgba(13, 92, 63, 0.4);
      transition: var(--transition);
      z-index: 999;
  }

  #backToTop.show {
      display: flex;
  }

  #backToTop:hover {
      background: var(--orange);
      transform: translateY(-3px);
  }

  .whatsapp-icon {
      display: inline-table;
      bottom: 30px;
      left: 10px;
  }

  .hero-banner {
      background-image: url(../images/international-bg.webp);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
  }

  .country-card {
      background: #fff;
      border: none;
      border-radius: 20px;
      padding: 22px 15px;
      text-align: center;
      height: 100%;
      transition: var(--transition);
      box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
      cursor: pointer;
      overflow: hidden;
      position: relative;
  }

  .country-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, var(--brand), var(--orange));
      transform: scaleX(0);
      transition: var(--transition);
  }

  .country-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 40px rgba(12, 58, 44, .18);
  }

  .country-card:hover::before {
      transform: scaleX(1);
  }

  .country-flag {
      width: 70px;
      height: 70px;
      object-fit: cover;
      border-radius: 50%;
      border: 4px solid var(--brand-pale);
      margin-bottom: 15px;
      transition: var(--transition);
  }

  .country-card:hover .country-flag {
      transform: scale(1.08);
  }

  .country-name {
      font-weight: 600;
      color: var(--brand-dark);
      font-size: 1rem;
      margin-bottom: 0;
  }

  .country-card:hover .country-name {
      color: var(--orange-dark);
  }

  .section-title {
      max-width: 700px;
      margin: auto;
  }

  @media (max-width:1200px) {
      #mainNav li a {
          font-size: 12px;
      }
      .navbar-collapse.collapse.show {
          padding: 10px;
      }
  }

  @media (max-width:575px) {
      .hero-img {
          height: 210px;
      }

      .navbar-brand img {
          width: 175px;
      }
  }