@font-face {
    font-family: 'FlamaUltralight';
    src: url('../assets/fonts/FlamaUltralight.eot');
    src: url('../assets/fonts/FlamaUltralight.eot') format('embedded-opentype'),
        url('../assets/fonts/FlamaUltralight.woff2') format('woff2'),
        url('../assets/fonts/FlamaUltralight.woff') format('woff'),
        url('../assets/fonts/FlamaUltralight.ttf') format('truetype'),
        url('../assets/fonts/FlamaUltralight.svg#FlamaUltralight') format('svg');
    font-display: swap;
}

@font-face {
    font-family: 'FlamaThin';
    src: url('../assets/fonts/FlamaThin.eot');
    src: url('../assets/fonts/FlamaThin.eot') format('embedded-opentype'),
        url('../assets/fonts/FlamaThin.woff2') format('woff2'),
        url('../assets/fonts/FlamaThin.woff') format('woff'),
        url('../assets/fonts/FlamaThin.ttf') format('truetype'),
        url('../assets/fonts/FlamaThin.svg#FlamaThin') format('svg');
    font-display: swap;
}

@font-face {
    font-family: 'FlamaSemibold';
    src: url('../assets/fonts/FlamaSemibold.eot');
    src: url('../assets/fonts/FlamaSemibold.eot') format('embedded-opentype'),
        url('../assets/fonts/FlamaSemibold.woff2') format('woff2'),
        url('../assets/fonts/FlamaSemibold.woff') format('woff'),
        url('../assets/fonts/FlamaSemibold.ttf') format('truetype'),
        url('../assets/fonts/FlamaSemibold.svg#FlamaSemibold') format('svg');
    font-display: swap;
}

@font-face {
    font-family: 'FlamaMedium';
    src: url('../assets/fonts/FlamaMedium.eot');
    src: url('../assets/fonts/FlamaMedium.eot') format('embedded-opentype'),
        url('../assets/fonts/FlamaMedium.woff2') format('woff2'),
        url('../assets/fonts/FlamaMedium.woff') format('woff'),
        url('../assets/fonts/FlamaMedium.ttf') format('truetype'),
        url('../assets/fonts/FlamaMedium.svg#FlamaMedium') format('svg');
    font-display: swap;
}

@font-face {
    font-family: 'FlamaLight';
    src: url('../assets/fonts/FlamaLight.eot');
    src: url('../assets/fonts/FlamaLight.eot') format('embedded-opentype'),
        url('../assets/fonts/FlamaLight.woff2') format('woff2'),
        url('../assets/fonts/FlamaLight.woff') format('woff'),
        url('../assets/fonts/FlamaLight.ttf') format('truetype'),
        url('../assets/fonts/FlamaLight.svg#FlamaLight') format('svg');
    font-display: swap;
}

@font-face {
    font-family: 'FlamaExtrabold';
    src: url('../assets/fonts/FlamaExtrabold.eot');
    src: url('../assets/fonts/FlamaExtrabold.eot') format('embedded-opentype'),
        url('../assets/fonts/FlamaExtrabold.woff2') format('woff2'),
        url('../assets/fonts/FlamaExtrabold.woff') format('woff'),
        url('../assets/fonts/FlamaExtrabold.ttf') format('truetype'),
        url('../assets/fonts/FlamaExtrabold.svg#FlamaExtrabold') format('svg');
    font-display: swap;
}

@font-face {
    font-family: 'FlamaBold';
    src: url('../assets/fonts/FlamaBold.eot');
    src: url('../assets/fonts/FlamaBold.eot') format('embedded-opentype'),
        url('../assets/fonts/FlamaBold.woff2') format('woff2'),
        url('../assets/fonts/FlamaBold.woff') format('woff'),
        url('../assets/fonts/FlamaBold.ttf') format('truetype'),
        url('../assets/fonts/FlamaBold.svg#FlamaBold') format('svg');
    font-display: swap;
}

@font-face {
    font-family: 'FlamaBook';
    src: url('../assets/fonts/FlamaBook.eot');
    src: url('../assets/fonts/FlamaBook.eot') format('embedded-opentype'),
        url('../assets/fonts/FlamaBook.woff2') format('woff2'),
        url('../assets/fonts/FlamaBook.woff') format('woff'),
        url('../assets/fonts/FlamaBook.ttf') format('truetype'),
        url('../assets/fonts/FlamaBook.svg#FlamaBook') format('svg');
    font-display: swap;
}

:root {
    /* Typography */
    --font-heading-1: 'FlamaUltralight', sans-serif;
    --font-heading-2: 'FlamaLight', sans-serif;
    --font-base: 'FlamaBook', sans-serif;
    --font-bold: 'FlamaSemibold', sans-serif;

    /* Colors */
    --color-primary: #061d57;
    --color-secondary: #04919a;
    --color-secondary-v1: #0cc0c6;
    --color-text: #ececec;
    --color-muted: #153166;
    --color-bg-light: #b6e3eb;
    --color-white: #ffffff;
    --color-black: #000000;
    /*--color-cyan: #9cdde3;*/
    --color-cyan: #b6e3eb;
    --powder-blue: #b6e3eb;
    --granite-gray: #666666;
    --green-eyebrow: #04919a;
}

/*====================================== 
Base setup
========================================*/
html {
    font-size: 100%;
}

body {
    font-family: 'FlamaBook', sans-serif;
    line-height: 1.5rem;
    margin: 0;
    padding: 0;
}

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


/*====================================== 
                Reset Css
========================================*/


/* h1 = ~30px to 72px / line-height = ~35px to 80px / 300vw to 1400vw*/
/* h2 = ~27px to 50px / line-height = ~32px to 55px / 400vw to 1440vw*/
/* h3 = ~24px to 36px = 300vw to 1400vw*/
/* h4 = ~22px to 28px = 300vw to 1400vw*/
/* h5 = ~18px to 24px = 300vw to 1400vw*/
/* h6 = ~16px to 20px = 300vw to 1400vw*/

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-black);
    font-weight: 400;
    margin-top: 0;
}

h1 {
    font-family: var(--font-heading-1);
    font-size: clamp(1.875rem, 1.1591rem + 3.8182vw, 4.5rem);
    line-height: clamp(2.1875rem, 1.4205rem + 4.0909vw, 5rem);
    margin-bottom: clamp(0.9375rem, 0.5966rem + 1.8182vw, 2.1875rem);
    /*15px to 35px == 300px to 1400px*/
}

h2 {
    font-family: var(--font-heading-2);
    font-size: clamp(1.6875rem, 1.2955rem + 2.0909vw, 3.125rem);
    margin-bottom: 1.5rem;
    line-height: clamp(2rem, 1.4471rem + 2.2115vw, 3.4375rem);
}

h3 {
    font-family: var(--font-heading-2);
    font-size: clamp(1.5rem, 1.2955rem + 1.0909vw, 2.25rem);
    margin-bottom: 1.125rem;
    line-height: 120%;
}

h4 {
    font-family: var(--font-heading-2);
    font-size: clamp(1.375rem, 1.2727rem + 0.5455vw, 1.75rem);
    line-height: 100%;
    margin-bottom: 1.125rem;
}

h5 {
    font-family: var(--font-heading-2);
    font-size: clamp(1.125rem, 1.0227rem + 0.5455vw, 1.5rem);
    line-height: 100%;
    margin-bottom: 1.125rem;
}

h6 {
    font-family: var(--font-heading-2);
    font-size: clamp(1rem, 0.9318rem + 0.3636vw, 1.25rem);
    line-height: 100%;
    margin-bottom: 1.125rem;
}

p {
    font-family: var(--font-base);
    font-size: 1.125rem;
    color: var(--granite-gray);
    line-height: 1.5rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

p:last-of-type {
    margin-bottom: 0;
}

a {
    text-decoration: none;
    color: var(--color-secondary);
}

strong{
    font-family: var(--font-bold);
}

img {
    max-width: 100%;
    height: auto;
}

/*====================================== 
            Container Styles
========================================*/
.container-full {
    width: 100%;
    overflow: hidden;
}

.container-fluid {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 3%;
}

.container-lg {
    max-width: 1450px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.container {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.container-md {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.container-sm {
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

/*====================================== 
            Button Styles Css
========================================*/

.primary-btn {
    background: var(--color-secondary-v1);
    color: var(--color-white);
}

.primary-btn:hover {
    background: var(--color-text);
    color: var(--color-black);
}

.secondary-btn {
    background: var(--color-white);
    color: var(--color-black);
}

.secondary-btn:hover {
    background: var(--color-secondary-v1);
    color: var(--color-white);
}

.btn {
    display: inline-block;
    position: relative;
    overflow: hidden;
    border: none;
    cursor: pointer;
    font-size: 20px;
    border-radius: 5px;
    transition-duration: 0.3s;
}

.btn .btn-text {
    white-space: nowrap;
    display: inline-block;
    padding: 15px 20px;
}

.btn:hover .btn-text {
    transition: color 0.1s ease;
    -webkit-transition: color 0.1s ease;
    -moz-transition: color 0.1s ease;
    -ms-transition: color 0.1s ease;
    -o-transition: color 0.1s ease;
}


/*====================================== 
        Gsap Animation Css
========================================*/

.heading h1,
.heading h2,
.heading h3,
.heading h4,
.heading h5,
.heading h6 {
    overflow: visible;
}

.line-mask {
    display: block;
    overflow: hidden;
}

/*====================================== 
            Common Css
========================================*/
section {
    position: relative;
    padding: clamp(3.125rem, -0.0801rem + 12.8205vw, 8.125rem) 0;
    /*50px to 130px top and bottom 400px to 1024px*/
}

.is-blue-bg {
    background: var(--color-primary);
}

.is-cyan-bg {
    background: var(--color-cyan);
}

.is-white-bg {
    background: var(--color-white);
}

.is-vgap-80 {
    display: flex;
    flex-direction: column;
    gap: clamp(1.875rem, 0.5801rem + 6.9061vw, 5rem);
    /*30px to 80px ==> 300px to 1024px*/
}

.is-vgap-50 {
    display: flex;
    flex-direction: column;
    gap: clamp(1.875rem, 1.357rem + 2.7624vw, 3.125rem);
    /*30px to 50px ==> 300px to 1024px*/
}

.pt-0 {
    padding-top: 0 !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.is-full-height {
    min-height: 100vh;
}

.is-v-content-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.is-center,
.is-center * {
    text-align: center;
}

.is-left,
.is-left * {
    text-align: left;
}

.is-right,
.is-right * {
    text-align: right;
}

.heading-group h6 {
    font-family: var(--font-base);
    font-size: 18px;
    color: var(--green-eyebrow);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.common-inner {
    display: flex;
    flex-direction: column;
}

.is-vgap-110 {
    /*~30px to 110px // 300px to 1024px*/
    gap: clamp(1.875rem, -0.1968rem + 11.0497vw, 6.875rem);
}

.is-vgap-80 {
    /*~30px to 80px // 300px to 1024px*/
    gap: clamp(1.875rem, 0.5801rem + 6.9061vw, 5rem);
}

.is-vgap-40 {
    /*~30px to 40px // 300px to 1024px*/
    gap: clamp(1.875rem, 1.616rem + 1.3812vw, 2.5rem);
}

.d-none {
    display: none;
}

.d-block {
    display: block;
}

.no-link {
    pointer-events: none;
}

/*====================================== 
                Preloader Css
========================================*/

/* Loader wrapper */
.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-primary);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Progress text */
.loader-text {
    color: #fff;
    font-size: 2rem;
    margin-bottom: 20px;
    display: none;
}

/* Progress bar */
.progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 8px;
    background: var(--color-primary);
    border-radius: 0px;
    overflow: hidden;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
}

.progress {
    height: 100%;
    width: 0;
    background: var(--color-white);
    border-radius: 0px;
    transition: width 0.2s ease;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
}

/* Page content */
.main-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
}

.main-wrapper.show {
    opacity: 1;
    visibility: visible;
}

/*====================================== 
                Cursor Css
========================================*/
.cursor-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 99999;
    transition: opacity 0.3s ease;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    display: none;
    opacity: 0;
    visibility: hidden;
}

.dot {
    position: fixed;
    width: 4px;
    height: 4px;
    background-color: white;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(1);
    z-index: 10000;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: background-color 0.1s ease, transform 0.2s ease;
    -webkit-transition: background-color 0.1s ease, transform 0.2s ease;
    -moz-transition: background-color 0.1s ease, transform 0.2s ease;
    -ms-transition: background-color 0.1s ease, transform 0.2s ease;
    -o-transition: background-color 0.1s ease, transform 0.2s ease;
}

polygon {
    transition: stroke 0.2s ease;
}

@media (min-width:1025px) {

    .cursor-wrapper,
    .dot {
        display: block;
        opacity: 1;
        visibility: visible;
    }
}