@font-face {
    font-family: "TT Travels Trl Medium";
    font-style: normal;
    font-weight: normal;
    src: local("TT Travels Trl Medium"), url("..//fonts/pluxee/TT Travels Trial Medium.woff") format("woff");
}

@font-face {
    font-family: "TT Travels Trl DemiBold";
    font-style: normal;
    font-weight: normal;
    src: local("TT Travels Trl DemiBold"), url("..//fonts/pluxee/TT Travels Trial DemiBold.woff") format("woff");
}

@font-face {
    font-family: "TT Travels Trl Bold";
    font-style: normal;
    font-weight: normal;
    src: local("TT Travels Trl Bold"), url("..//fonts/pluxee/TT Travels Trial Bold.woff") format("woff");
}

:root {
    /** Primary - Deep Blue **/
    --primary-1: #faf8ff;
    --primary-2: #f0eef5;
    --primary-3: #e5e3ea;
    --primary-4: #d1cfd7;
    --primary-5: #b5b2bc;
    --primary-6: #908c99;
    --primary-7: #716e7c;
    --primary-8: #5a5469;
    --primary-9: #463f5f;
    --primary-10: #362f54;
    --primary-11: #2d264e;
    --primary-12: #221c46;
    --primary-soxe: var(--primary-12);
    /** Secondary - Ultra green **/
    --secondary-1: #dafcdb;
    --secondary-2: #c7fcca;
    --secondary-3: #85fd96;
    --secondary-4: #00eb5e;
    --secondary-5: #01d253;
    --secondary-6: #01ad43;
    --secondary-7: #008a34;
    --secondary-8: #006825;
    --secondary-9: #004f1a;
    --secondary-10: #003d13;
    --secondary-11: #00330e;
    --secondary-12: #012f0d;
    --secondary-soxe: var(--secondary-4);
    /** Tertiary - Boldy blue  **/
    --tertiary-1: #e8f6fc;
    --tertiary-2: #def3fb;
    --tertiary-3: #c3ebfb;
    --tertiary-4: #88ddfb;
    --tertiary-5: #17ccf9;
    --tertiary-6: #0fa4c9;
    --tertiary-7: #0a83a1;
    --tertiary-8: #06637a;
    --tertiary-9: #034a5d;
    --tertiary-10: #043948;
    --tertiary-11: #06303c;
    --tertiary-12: #062c37;
    --tertiary-soxe: var(--tertiary-5);
    /** Warning - Very yellow  **/
    --warning-1: #fdf3d6;
    --warning-2: #fdeec1;
    --warning-3: #ffdc37;
    --warning-4: #f0cd01;
    --warning-5: #d2b301;
    --warning-6: #ad9400;
    --warning-7: #8a7501;
    --warning-8: #685800;
    --warning-9: #4f4200;
    --warning-10: #3d3300;
    --warning-11: #332a00;
    --warning-12: #2f2700;
    --warning-soxe: var(--warning-3);
    /** Error - Confidently coral  **/
    --error-1: #fcf1f0;
    --error-2: #fcecea;
    --error-3: #fbddda;
    --error-4: #fcc1be;
    --error-5: #ff9895;
    --error-6: #ff7375;
    --error-7: #e9003f;
    --error-8: #b2002e;
    --error-9: #890021;
    --error-10: #6b0318;
    --error-11: #5a0514;
    --error-12: #530512;
    --error-soxe: var(--error-6);
    /***** Variant Colors *****/
    /** Neutrals   **/
    --neutral-1: #f3f3f4;
    --neutral-2: #efefef;
    --neutral-3: #e4e4e4;
    --neutral-4: #d0d0d1;
    --neutral-5: #b6b6b7;
    --neutral-6: #969698;
    --neutral-7: #777779;
    --neutral-8: #5a595c;
    --neutral-9: #444345;
    --neutral-10: #343335;
    --neutral-11: #2b2b2d;
    --neutral-12: #131117;
    /** Green - Success states  **/
    --green-1: #d7fcea;
    --green-2: #c3fce1;
    --green-3: #78fcc7;
    --green-4: #31ecae;
    --green-5: #00cf96;
    --green-6: #01ab7b;
    --green-7: #008861;
    --green-8: #006245;
    --green-9: #004e36;
    --green-10: #023c29;
    --green-11: #043222;
    --green-12: #042e20;
    /** Orange - Warning states  **/
    --orange-1: #fbf2ec;
    --orange-2: #faede3;
    --orange-3: #f9dfcd;
    --orange-4: #f8c5a0;
    --orange-5: #f8a05b;
    --orange-6: #d47420;
    --orange-7: #b26019;
    --orange-8: #874810;
    --orange-9: #67360b;
    --orange-10: #4f2a0a;
    --orange-11: #41230a;
    --orange-12: #3c210a;
    /** Red - Error states  **/
    --red-1: #fcf1ee;
    --red-2: #fcece7;
    --red-3: #fbddd4;
    --red-4: #fcc2b1;
    --red-5: #ff9a7e;
    --red-6: #ff5d3b;
    --red-7: #ea0101;
    --red-8: #b30000;
    --red-9: #870a00;
    --red-10: #661101;
    --red-11: #531303;
    --red-12: #4c1304;
    /** Blue - Error states  **/
    --blue-1: #f3f3fc;
    --blue-2: #efeefb;
    --blue-3: #e3e2fa;
    --blue-4: #cfccfa;
    --blue-5: #b1b0fb;
    --blue-6: #878dfa;
    --blue-7: #526cf8;
    --blue-8: #1b51dc;
    --blue-9: #123ba7;
    --blue-10: #0f2d83;
    --blue-11: #0f266d;
    --blue-12: #0f2365;
    /** Fucsia - Text highlight  **/
    --fucsia: #cc1480;
    --white: #fff;
    --black: #000;
    /*** FONTS ***/
    /** Hero Title Font **/
    --f-hero-title: "TT Travels Trl Black";
    --f-s-hero-title: clamp(42px, calc(4vw + .5rem), 60px);
    --l-h-hero-title: 110%;
    /*** Primary Titles ***/
    --f-primary-title: "TT Travels Trl DemiBold";
    --f-s-primary-title: 42px;
    --l-h-primary-title: 134%;
    --f-primary-title-2: "TT Travels Trl Black";
    --f-s-primary-title-2: 42px;
    --l-h-primary-title-2: 134%;
    /*** Secondary Titles ***/
    --f-secondary-title: "TT Travels Trl DemiBold";
    --f-s-secondary-title: 32px;
    --l-h-secondary-title: 126%;
    --f-secondary-title-2: "TT Travels Trl ExtraBold";
    --f-s-secondary-title-2: 32px;
    --l-h-secondary-title-2: 126%;
    /*** Primary Body ***/
    --f-primary-body: "TT Travels Trl Medium";
    --f-s-primary-body: 16px;
    --l-h-primary-body: 150%;
    --f-primary-body-2: "TT Travels Trl Medium Italic";
    --f-s-primary-body-2: 16px;
    --l-h-primary-body-2: 150%;
    --f-primary-body-3: "TT Travels Trl DemiBold";
    --f-s-primary-body-3: 16px;
    --l-h-primary-body-3: 150%;
    --f-primary-body-4: "TT Travels Trl Bold";
    --f-s-primary-body-4: 16px;
    --l-h-primary-body-4: 150%;
    /*** Table Title ***/
    --f-primary-table-title: "TT Travels Trl DemiBold";
    --f-s-primary-table-title: 24px;
    --l-h-primary-table-title: 120%;
    /*** Table Cell / Label ***/
    --f-primary-table-td: "TT Travels Trl DemiBold";
    --f-s-primary-table-td: 14px;
    --l-h-primary-table-td: 120%;
    /*** Table Cell / Label ***/
    --f-secondary-table-td: "TT Travels Trl Regular";
    --f-s-secondary-table-td: 14px;
    --l-h-secondary-table-td: 120%;
    /*** Nav link Font ***/
    --f-s-nav-link: 16px;
    --l-h-nav-link: 120%;
    /**** soxexo vars ****/
    --header-h: 80px;
    --soxe-main-spacing-y: 3rem;
    --soxe-main-spacing-x: 1rem;
}

@media (min-width: 576px) {
  :root {
    --soxe-main-spacing-x: 1.5rem;
  }
}

@media (min-width: 768px) {

}

@media (min-width: 992px) {
    :root {
        --soxe-main-spacing-x: 5.75rem;
    }
}

@media (min-width: 1200px) {
  :root {
    --soxe-main-spacing-x: 8.875rem;
  }
}

@media (min-width: 1400px) {
}

.display {
    font-family: var(--f-hero-title);
    font-size: var(--f-s-hero-title);
    line-height: var(--l-h-hero-title);
}

h1,
.h1 {
  color: var(--primary-8);
  font-family: var(--f-primary-title-2);
  font-size: var(--f-s-primary-title-2);
  line-height: var(--l-h-primary-title-2);
}

h2,
.h2 {
    font-family: var(--f-primary-body-3);
    font-size: var(--f-s-primary-body-3);
    line-height: var( --l-h-primary-body-3);
}

h3, .h3 {
    font-family: var(--f-primary-body-3);
    font-size: var(--f-s-primary-body-3);
    line-height: var( --l-h-primary-body-3);
}

h4, .h4 {
    font-family: var(--f-primary-body-3);
    font-size: var(--f-s-primary-body-3);
    line-height: var( --l-h-primary-body-3);
}

h5, .h5 {
    font-family: var(--f-primary-body);
    font-size: var(--f-s-primary-body);
    line-height: var(--l-h-primary-body);
}


body {
    background-color: var(--primary-1);
    color: var(--primary-12);
    font-family: var(--f-primary-body);
    letter-spacing: 0;
}

a {
  color: var(--primary-soxe);

  transition: color 300ms ease;
}

a:hover {
  text-decoration: underline;
  color: var(--blue-7);
}

/*** Header ***/
header {
  align-items: center;
  background-color: var(--white);
  display: flex;
  height: var(--header-h);
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 11;
}

main {
  margin-top: var(--header-h);
}

/*** Footer ***/
footer {
    align-items: center;
    background-color: var(--white);
    display: flex;
    font-size: 0.8rem;
    min-height: 55px;
    padding: 1rem;
}

footer ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
}

@media (min-width: 600px) {
  footer ul {
    flex-direction: row;
  }
}

footer span,
footer p,
footer p a,
footer ul li,
footer ul li a {
    font-family: var(--f-primary-body-3);
    font-size: calc(var(--f-s-primary-body-3) * 0.8);
    line-height: var(--l-h-primary-body-3);
}