@font-face {
    font-family: 'Arial Italic';
    src: url('../fonts/arial_italic-webfont.woff') format('woff'), url('../fonts/arial_italic-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arial';
    src: url('../fonts/arial-webfont.woff') format('woff'), url('../fonts/arial-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arial bold';
    src: url('../fonts/arial_bold-webfont.woff') format('woff'), url('../fonts/arial_bold-webfont.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
/* 
@font-face {
    font-family: 'Klavika Bold';
    src: url('../fonts/Klavika-Bold.woff') format('woff'),
    url('../fonts/Klavika-Bold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Klavika';
    src: url('../fonts/Klavika-Regular.woff') format('woff'),
    url('../fonts/Klavika-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
} */


:root {
    --navy: #001C71;
    --navy-20: #CBD0E1;
    --navy-40: #7A88B4;
    --navy-90: #001c71e6;
    /* --blue: #0093D0; */

    --light-blue-08: rgba(228, 231, 240, 0.8);
    --border-blue: #4CB3DE;
    --light-blue: #d5e2e2;
    --light-green: #eaf0f0;
    --green: #2d6c6e;
    --green-10: #ecf2f2;
    --green-20: #d0d8d8;
    --green-50: #96b6b7;
    --green-100: #899d9d;
    --green-200: #133b3b;
    --green-300: #426262;
    --green-400: #286163;
    --blue: #239ad7;
    --yellow: #ffcf7e;
    --yellow-50: #fff5e5;
    --yellow-100: #ffe7be;
    --dark-gray: #333333;
    --light-gray: #999999;
    --white: #ffffff;
    --black: #020202;
    --arial: 'Arial';
    --arial-italic: 'Arial Italic';
    --arial-bold: 'Arial Bold';
    --klavika: 'Klavika';
    --klavika-bold: 'Klavika Bold';
    --font-12: 0.75rem;
    --font-13: 0.8125rem;
    --font-14: 0.875rem;
    --font-15: 0.9375rem;
    --font-16: 1rem;
    --font-17: 1.0625rem;
    --font-18: 1.125rem;
    --font-20: 1.25rem;
    --font-23: 1.4375rem;
    --font-28: 1.75rem;
    --font-25: 1.5625rem;
    --font-30: 1.875rem;
    --font-38: 2.375rem;
    --font-35: 2.1875rem;
    --font-40: 2.5rem;
    --font-50: 3.125rem;
    --font-53: 3.3125rem;
    --font-65: 4.0625rem;
    --font-70: 4.375rem;
}


/* global css Start */
body {
    font-family: var(--arial), sans-serif;
    font-size: var(--font-16);
    color: var(--grey-52);
    line-height: 1.2;
}

.line-height-1 {
    line-height: 1;
}

.line-height-1-5 {
    line-height: 1.5;
}

.line-height-2 {
    line-height: 2;
}

.w-60 {
    width: 55%;
}

.w-40 {
    width: 45%;
}

.txt-yellow {
    color: var(--yellow);
}

.txt-green {
    color: var(--green);
}

.txt-green-50 {
    color: var(--green-50);
}

.txt-green-200 {
    color: var(--green-200);
}

.txt-green-100 {
    color: var(--green-100);
}

.txt-green-300 {
    color: var(--green-300);
}

.txt-blue {
    color: var(--blue);
}

.txt-black {
    color: var(--black);
}

.txt-white {
    color: var(--white);
}

.txt-dark-gray {
    color: var(--dark-gray);
}

.txt-light-gray {
    color: var(--light-gray);
}

.arial {
    font-family: var(--arial), sans-serif;
}

.arial-bold {
    font-family: var(--arial-bold), sans-serif;
}

.arial-itallic {
    font-family: var(--arial-italic), sans-serif;
}

.klavika {
    font-family: var(--klavika), sans-serif;
}

.klavika-bold {
    font-family: var(--klavika-bold), sans-serif;
}

.font-12 {
    font-size: var(--font-12);
}

.font-13 {
    font-size: var(--font-13);
}

.font-14 {
    font-size: var(--font-14);
}

.font-15 {
    font-size: var(--font-15);
}

.font-16 {
    font-size: var(--font-16);
}

.font-17 {
    font-size: var(--font-17);
}

.font-18 {
    font-size: var(--font-18);
}

.font-20 {
    font-size: var(--font-20);
}

.font-23 {
    font-size: var(--font-23);
}

.font-25 {
    font-size: var(--font-25);
}

.font-28 {
    font-size: var(--font-28);
}

.font-30 {
    font-size: var(--font-30);
}

.font-38 {
    font-size: var(--font-38);
}

.font-40 {
    font-size: var(--font-40);
}

.font-53 {
    font-size: var(--font-53);
}

.font-65 {
    font-size: var(--font-65);
}

a:hover {
    color: var(--yellow);
}

sub, sup {
    font-size: .65em;
}

sup {
    top: -.4em;
}

h1, .h1 {
    font-size: var(--font-50);
    line-height: 1;
}

h2, .h2 {
    font-size: var(--font-28);
}

h3, .h3 {
    font-size: var(--font-23);
}

h4, .h4 {
    font-size: var(--font-20);
}

h5, .h5 {
    font-size: var(--font-18);
}

h6, .h6 {
    font-size: var(--font-16);
}

.letter-1 {
    letter-spacing: 1px;
}

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

.btn-green-200 {
    background: var(--green-200);
    color: var(--yellow);
}

.btn-green:hover {
    color: var(--white);
}

.border-yellow {
    border: 1px solid var(--yellow);
}

.bg-yellow {
    background: var(--yellow);
}

.bg-green {
    background: var(--green);
}

.bg-green-10 {
    background: var(--green-10);
}

.bg-green-20 {
    background: var(--green-20);
}

.bg-green-50 {
    background: var(--green-50);
}

.bg-green-200 {
    background: var(--green-200);
}

.bg-green-400 {
    background: var(--green-400);
}

.bg-light-green {
    background: var(--light-green);
}

.bg-light-blue {
    background: var(--light-blue);
}

.bg-yellow-50 {
    background: var(--yellow-50);
}

.bg-yellow-100 {
    background: var(--yellow-100);
}

.fw-bold {
    font-weight: bold;
}

.no-underline {
    text-decoration: none;
}

.bg-banner {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.mb-40 {
    margin-bottom: 2.5rem;
}

.mb-104 {
    margin-bottom: 6.5rem;
}

.p-20 {
    padding: 20px;
}

.p-40 {
    padding: 40px;
}

.py-15 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.py-20 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.py-25 {
    padding-top: 1.5625rem;
    padding-bottom: 1.5625rem;
}

.py-60 {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
}

.py-40 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.my-60 {
    margin-top: 3.75rem;
    margin-bottom: 3.75rem;
}

.me-50 {
    margin-right: 3.125rem;
}

.face-left {
    margin-left: -10px;
}

/* global css End */


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

@media only screen and (max-width: 1600px) {
    .my-60 {
        margin-top: 2.75rem;
        margin-bottom: 2.75rem;
    }
}

@media only screen and (max-width: 1400px) {
    br {
        display: none;
    }

    :root {
        --font-15: 0.8125rem;
    }
}

@media only screen and (max-width: 1199px) {
    :root {
        --font-11: 0.6875rem;
        --font-12: 0.75rem;
        --font-14: 0.75rem;
        --font-16: 0.875rem;
        --font-18: 1rem;
        --font-20: 1.125rem;
        --font-23: 1.25rem;
        --font-25: 20px;
        --font-28: 1.5625rem;
        --font-30: 1.5625rem;
        --font-38: 1.75rem;
        --font-40: 1.875rem;
        --font-50: 2.1875rem;
        --font-60: 2.5rem;
        --font-65: 2.8125rem;
        --font-70: 3.125rem;
        --font-80: 3.25rem;
        --font-35: 1.5625rem;
    }
}

@media only screen and (max-width: 991px) {
    .py-60 {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .py-40 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .my-60 {
        margin-top: 2.5rem;
        margin-bottom: 2.5rem;
    }

    .me-50 {
        margin-right: 0;
    }

    :root {
        --font-50: 2.0625rem;
    }
}

@media only screen and (max-width: 767px) {
    :root {
        --font-12: 0.75rem;
        --font-14: 0.75rem;
        --font-16: 0.75rem;
        --font-17: 0.875rem;
        --font-18: 0.875rem;
        --font-20: 1rem;
        --font-23: 1.125rem;
        --font-25: 1.125rem;
        --font-28: 1.125rem;
        --font-38: 1.5rem;
        --font-60: 1.875rem;
        --font-65: 2.1875rem;
        --font-70: 2.5rem;
        --font-80: 2.625rem;
        --font-30: 1.25rem;
        --font-35: 1.4375rem;
        --font-40: 1.4375rem;
        --font-50: 2.125rem;
    }

    .p-40 {
        padding: 30px 20px;
    }

    .py-20 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .w-60 {
        width: 100%;
    }

    .w-40 {
        width: 100%;
    }

    .py-60 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .py-40 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .my-60 {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .mb-40 {
        margin-bottom: 30px;
    }

    /* .me-50 {
        margin-right: 1.5625rem;
    } */

    .line-height-1-5 {
        line-height: 1.2;
    }
}


@media only screen and (max-width: 575px) {
    :root {
        --font-18: 0.875rem;
        --font-20: 0.9375rem;
        --font-25: 1rem;
        --font-28: 1rem;
        --font-38: 1.25rem;
        --font-60: 1.5625rem;
        --font-65: 1.875rem;
        --font-70: 2.1875rem;
        --font-80: 2.375rem;
        --font-30: 1rem;
        --font-35: 1.125rem;
        --font-40: 1.25rem;
        --font-50: 1.625rem;
    }

    .p-40 {
        padding: 30px 10px;
    }
}