/* ================================
   Proxima Nova Font Family
================================ */

/* Regular */
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/ProximaNova-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Regular Italic */
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/ProximaNova-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* SemiBold */
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/ProximaNova-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* SemiBold Italic */
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/ProximaNova-SemiboldItalic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/ProximaNova-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Bold Italic */
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/ProximaNova-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ExtraBold */
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/ProximaNova-Extrabold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ================================
   Desktop Typography (≥1200px)
================================ */
.new-template {
  --font-body: "Inter", sans-serif !important;
  --font-heading: "Proxima Nova", sans-serif !important;
  --font-style: italic !important;
  --font-weight: 700 !important;
}

/* ================================
   Display Headings
================================ */
.new-template .display-1,
.new-template .display-2,
.new-template .display-3 {
  font-family: var(--font-heading) !important;
  font-weight: var(--font-weight) !important;
  font-style: var(--font-style) !important;
}

.new-template h1,
.new-template h2,
.new-template h3,
.new-template h4,
.new-template h5 {
  font-family: var(--font-heading) !important;
  font-weight: var(--font-weight) !important;
}

.new-template h5 {
  font-weight: 600 !important;
}

/* ================================
   Fixed Typography
================================ */

.new-template h4,
.new-template .fs-4 {
  font-size: 18px !important;
}

.new-template h5,
.new-template .fs-5 {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

.new-template .fs-xs {
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}
/* ************ COLORS VARIABLES ************* */
.text-heading {
  color: #01263e;
}
.text-body {
  color: #212529;
}

/* ================================
   Desktop Typography (≥1200px)
================================ */
@media (min-width: 1200px) {
  .new-template .display-1 {
    font-size: 58px !important;
    line-height: 1 !important;
    letter-spacing: -1px !important;
  }

  .new-template .display-2 {
    font-size: 48px !important;
    line-height: 1 !important;
    letter-spacing: -1px !important;
  }

  .new-template .display-3 {
    font-size: 38px !important;
    line-height: 1 !important;
    letter-spacing: -1px !important;
  }

  .new-template .display-4,
  .new-template .display-5 {
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
    font-family: var(--font-heading) !important;
  }

  .new-template .display-4 {
    font-size: 38px !important;
  }

  .new-template .display-5 {
    font-size: 28px !important;
  }

  .new-template h1,
  .new-template .fs-1 {
    font-size: 40px !important;
    line-height: 1.2 !important;
    letter-spacing: -1px !important;
  }

  .new-template h2,
  .new-template .fs-2 {
    font-size: 32px !important;
    line-height: 1.25 !important;
    letter-spacing: -1px !important;
  }

  .new-template h3,
  .new-template .fs-3 {
    font-size: 24px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.5px !important;
  }

  .new-template h4,
  .new-template .fs-4 {
    font-size: 20px !important;
    line-height: 1.35 !important;
  }

  .new-template .fs-6 {
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
  }

  .new-template .fs-lg {
    font-size: 18px !important;
  }

  .new-template .small,
  .new-template .fs-sm {
    font-size: 14px !important;
  }
}

/* ================================
   Tablet Typography (768px–1199px)
================================ */
@media (min-width: 768px) and (max-width: 1199px) {
  .new-template .display-1 {
    font-size: 52px !important;
  }

  .new-template .display-2 {
    font-size: 40px !important;
  }

  .new-template .display-3 {
    font-size: 32px !important;
  }

  .new-template .display-4 {
    font-size: 28px !important;
  }

  .new-template .display-5 {
    font-size: 24px !important;
  }

  .new-template h1,
  .new-template .fs-1 {
    font-size: 34px !important;
  }

  .new-template h2,
  .new-template .fs-2 {
    font-size: 28px !important;
  }

  .new-template h3,
  .new-template .fs-3 {
    font-size: 22px !important;
  }

  .new-template .fs-6 {
    font-size: 15px !important;
  }

  .new-template .fs-lg {
    font-size: 16px !important;
  }

  .new-template .small,
  .new-template .fs-sm {
    font-size: 13px !important;
  }
}

/* ================================
   Mobile Typography (<768px)
================================ */
@media (max-width: 767px) {
  .new-template .display-1 {
    font-size: 36px !important;
  }

  .new-template .display-2 {
    font-size: 28px !important;
  }

  .new-template .display-3 {
    font-size: 24px !important;
  }

  .new-template .display-4 {
    font-size: 24px !important;
  }

  .new-template .display-5 {
    font-size: 20px !important;
  }

  .new-template h1,
  .new-template .fs-1 {
    font-size: 28px !important;
  }

  .new-template h2,
  .new-template .fs-2 {
    font-size: 24px !important;
  }

  .new-template h3,
  .new-template .fs-3 {
    font-size: 20px !important;
  }

  .new-template .fs-6 {
    font-size: 14px !important;
  }

  .new-template .fs-lg {
    font-size: 15px !important;
  }
}