:root {
  font-size: 15px;

  /* Base */
  --color-bg: #FDF4EA;
  --color-text: #11171B;

  /* Brand */
  --color-primary: #254455;
  --color-primary-soft: #ABD8CF;

  /* Accents */
  --color-green: #ACBB4A;
  --color-orange: #C56629;
  --color-red: #F05027;
  --color-pink: #F7A7A8;
  --color-yellow: #FAAE42;



    /* Core / Neutral */
  --off-black: #11171B;
  --navy: #254455;
  --cream: #FDF4EA;

  /* Brand / Accent */
  --light-blue: #ABD8CF;
  --green: #ACBB4A;
  --burnt-orange: #C56629;
  --red: #F05027;
  --pink: #F7A7A8;
  --yellow: #FAAE42;


    /* Font Family */
  --font-primary: 'Gracio', sans-serif;

  /* Font Sizes */ 
  --fs-body: 15px; 

  /* text sizes */
  --fs-sm: 1.2rem;        /* 18px */
  --fs-md: 1.267rem;      /* 19px */
  --fs-lg: 1.333rem;      /* 20px */
  --fs-xl: 1.467rem;      /* 22px */

  /* titles */
  --fs-title-sm: 1.667rem; /* 25px */
  --fs-title-md: 2.333rem; /* 35px */
  --fs-title-lg: 6.667rem; /* 100px */


  --space-1: 8px;   /* 8px */
  --space-2: 1rem;       /* 15px */
  --space-3: 1.6rem;     /* 24px */
  --space-4: 2rem;       /* 30px */
  --space-5: 3.2rem;     /* 48px */
  --space-6: 4.267rem;   /* 64px */
  --space-7: 4.667rem;   /* 70px */
  --space-8: 5.333rem;   /* 80px */
  --space-9: 6rem;       /* 90px */
  --space-10: 6.667rem;  /* 100px */
  --space-11: 8rem;      /* 120px */
  --space-12: 9.333rem;  /* 140px */

  --bs-space-mini: 4.667rem;
  --bs-space: 8rem;
}




.bg-off-black { background-color: var(--off-black); }
.bg-navy { background-color: var(--navy); }
.bg-cream { background-color: var(--cream); }

.bg-light-blue { background-color: var(--light-blue); }
.bg-green { background-color: var(--green); }
.bg-burnt-orange { background-color: var(--burnt-orange); }
.bg-red { background-color: var(--red); }
.bg-pink { background-color: var(--pink); }
.bg-yellow { background-color: var(--yellow); }


.text-off-black { color: var(--off-black); }
.text-navy { color: var(--navy); }
.text-cream { color: var(--cream); }

.text-light-blue { color: var(--light-blue); }
.text-green { color: var(--green); }
.text-burnt-orange { color: var(--burnt-orange); }
.text-red { color: var(--red); }
.text-pink { color: var(--pink); }
.text-yellow { color: var(--yellow); }



/* Base */
.text-body {
  font-size: var(--fs-body);
}

/* Text sizes */
.text-sm {
  font-size: var(--fs-sm);
}

.text-md {
  font-size: var(--fs-md);
}

.text-lg {
  font-size: var(--fs-lg);
}

.text-xl {
  font-size: var(--fs-xl);
}



/* Titles */
.title-sm {
  font-size: var(--fs-title-sm);
  font-weight: 400;
  line-height: 1.3;
}

.title-md {
  font-size: var(--fs-title-md);
  font-weight: 400;
  line-height: 1.2;
}

.title-lg {
  font-size: var(--fs-title-lg);
  font-weight: 400;
  line-height: 1.05;
}


/* Margin All */
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-7 { margin: var(--space-7); }
.m-8 { margin: var(--space-8); }
.m-9 { margin: var(--space-9); }
.m-10 { margin: var(--space-10); }
.m-11 { margin: var(--space-11); }
.m-12 { margin: var(--space-12); }

/* Margin Y Axis */
.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }

/* Margin X Axis */
.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
.mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); }

/* Individual Sides */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.ml-5 { margin-left: var(--space-5); }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
.mr-5 { margin-right: var(--space-5);}

  

*,
*::before,
*::after {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-primary);
  background: var(--color-bg);
}
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s ease;
  display: inline-block;
  vertical-align: middle;
} 


.heading-hero {
  font-size: var(--fs-title-lg);
  font-weight: 700;
  line-height: 1.05;
}

.heading-main {
  font-size: var(--fs-title-md);
  font-weight: 600;
}

.heading-sub {
  font-size: var(--fs-title-sm);
  font-weight: 600;
}


.text-sm { font-size: var(--fs-sm); }
.text-md { font-size: var(--fs-md); }
.text-lg { font-size: var(--fs-lg); }
.text-xl { font-size: var(--fs-xl); }

.text-primary { color: var(--color-primary); }
.text-muted { opacity: 0.75; }
.text-center { text-align: center; } 


/*===== Start space =====*/
.pe-space {
    padding-right: var(--bs-space);
}
.ps-space {
    padding-left: var(--bs-space);
}
.px-space {
    padding-left: var(--bs-space);
    padding-right: var(--bs-space);
}
.mb-space{
    margin-bottom: var(--bs-space);
}
.mt-space {
    margin-top: var(--bs-space);
}
/*===== End space =====*/

/*===== Start mini space =====*/
.mt-space-mini {
    margin-top: var(--bs-space-mini);
}
.mb-space-mini {
    margin-bottom: var(--bs-space-mini);
}
.my-space-mini {
    margin-top: var(--bs-space-mini);
    margin-bottom: var(--bs-space-mini);
}
.ms-space-mini {
    margin-left: var(--bs-space-mini);
}
.me-space-mini {
    margin-right: var(--bs-space-mini);
}
.mx-space-mini {
    margin-left: var(--bs-space-mini);
    margin-right: var(--bs-space-mini);
}
.pt-space-mini {
    padding-top: var(--bs-space-mini);
}
.pb-space-mini {
    padding-bottom: var(--bs-space-mini);
}
.py-space-mini {
    padding-top: var(--bs-space-mini);
    padding-bottom: var(--bs-space-mini);
}
.ps-space-mini {
    padding-left: var(--bs-space-mini);
}
.pe-space-mini {
    padding-right: var(--bs-space-mini);
}
.px-space-mini {
    padding-left: var(--bs-space-mini);
    padding-right: var(--bs-space-mini);
}
/*===== End mini space =====*/

.btn-primary {
    padding: 12px 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    background-image: url(../images/btn-Vector1.svg);
    background-repeat: no-repeat;
    color: #254455;
    font-family: Gracio;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    background-size: 100%;
    background-position: center;
    width: 166px;
    height: 56px;
    line-height: 1.3;
    display: grid;
    place-content: center;
}
.btn-primary:hover {
    
    background-image: url(../images/btn-Vector1-hover.svg);
}
.btn-secondary {
    padding: 12px 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    background-image: url(../images/btn-secondary.svg);
    background-repeat: no-repeat;
    color: #254455;
    font-family: Gracio;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    background-size: 100%;
    background-position: center;
    width: 166px;
    height: 56px;
    line-height: 1.3;
    display: grid;
    place-content: center;
}
.btn-secondary:hover {
    
    background-image: url(../images/btn-secondary-hover.svg);
}



.hero-section .ratio {
    position: relative;
    width: 100%;
    --bs-aspect-ratio: 56.25%;
}
.ratio::before {
    display: block;
    padding-top: var(--bs-aspect-ratio);
    content: "";
    padding-top: 32%;
}
.ratio > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}






/* NAV WRAPPER */
.owl-nav {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

/* BUTTON BASE */
.owl-nav button {
  width: 1.66666666667 rem; 
  
  border: none !important;
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center;
    max-width: 1.66666666667rem;
}


button.owl-prev{
    background-image: url(../images/ARROW-left.svg) !important;
    background-repeat: no-repeat !important;
    background-size: 100% !important;
  
}
button.owl-next{
    background-image: url(../images/ARROW-right.svg) !important;
    background-repeat: no-repeat !important;
    background-size: 100% !important;
  
}
/* ARROW ICON */
.owl-nav button span {
  font-size: 32px;
  color: #fff;
  line-height: 1;
  opacity: 0 !important;
}

/* LEFT & RIGHT POSITION */
.owl-prev {
  margin-left: 20px;
}

.owl-next {
  margin-right: 20px;
}




.container {
    max-width: 82.5rem;
    margin-inline: auto;
}


.w-100 {
    width: 100%;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.p-0 {
    padding: 0;
}
.m-0{
  margin: 0;
}


.text-white {
    color: #ffffff !important;
}