/*
* Style Guide CSS
*/
:root {
    --font-family-base: 'Montserrat', sans-serif;
    --font-family-heading: 'Kanit', sans-serif;
    --font-size-heading-1: min(max(35px, calc(2.1875rem + (105 - 35) * ((100vw - 390px) / (1440 - 390)))), 105px);
    --font-size-heading-15: min(max(30px, calc(1.875rem + (80 - 30) * ((100vw - 390px) / (1440 - 390)))), 80px);
    --font-size-heading-2: min(max(28px, calc(1.75rem + (60 - 28) * ((100vw - 390px) / (1440 - 390)))), 60px);
    --font-size-heading-3: calc(var(--font-size-base) + 19px);
    --font-size-heading-4: calc(var(--font-size-base) + 8px);
    --font-size-lead-in: calc(var(--font-size-base) + 2px);
    --font-size-base: 16px;
    --font-size-remark: calc(var(--font-size-base) - 2px);
    --line-height-heading-1: min(max(40px, calc(2.5rem + (100 - 40) * ((100vw - 390px) / (1440 - 390)))), 100px);
    --line-height-heading-15: min(max(35px, calc(2.1875rem + (90 - 35) * ((100vw - 390px) / (1440 - 390)))), 90px);
    --line-height-heading-2: min(max(34px, calc(2.125rem + (68 - 34) * ((100vw - 390px) / (1440 - 390)))), 68px);
    --line-height-heading-3: 1.2;
    --line-height-heading-4: 1.3333333333333333333333333333333;
    --line-height-lead-in: 1.4444444444444444444444444444444;
    --line-height-base: 1.5;
    --line-height-remark: 1.6666666666666666666666666666666;
    --color-text: #fff;
    --color-dark-blue: #003966;
    --color-dark-blue-2: #001628;
    --color-light-blue: #005DA7;
    --color-red: #ED3026;
    --color-blue-4: #002340;
    --color-blue-3: #008EFF;
    --button-border-color: #005DA7;
    --color-grey-2: #A2A2A2;
    --color-text-grey: #D0D0D0;
    --button-text-color: var(--color-text);
    --button-hover-border-color: var(--button-border-color);
    --button-hover-text-color: var(--button-text-color);
    --button-border-radius: 5px;
    --button-secondary-background-color: var(--color-dark-blue);
    --padding-container: 0 40px;
    --padding-container-mobile: 0 30px;
}

body,
html {
    overflow-x: clip;
}

h1,
.h1,
h1 *,
.h1 *,
h2,
.h2,
h2 *,
.h2 *,
h3,
.h3,
h3 *,
.h3 * {
    font-family: var(--font-family-heading) !important;
}

h4,
.h4,
h5,
.h5,
h6,
.h6,
p,
span,
li,
ul,
ol,
dl,
dt,
dd,
table,
th,
td,
textarea,
input {
    font-family: var(--font-family-base);
}

h1,
h1 *,
.h1,
.h1 * {
    font-size: var(--font-size-heading-1);
    line-height: var(--line-height-heading-1);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: capitalize;
}

.heading-15,
.heading-15 * {
    font-size: var(--font-size-heading-15);
    line-height: var(--line-height-heading-15);
    font-weight: 500;
    text-transform: capitalize;
}

h2,
.h2,
.h2 * {
    font-size: var(--font-size-heading-2);
    line-height: var(--line-height-heading-2);
    font-weight: 400;
    text-transform: capitalize;
}

h3,
.h3 {
    font-size: var(--font-size-heading-3);
    line-height: var(--line-height-heading-3);
    font-weight: 400;
}

h4,
.h4 {
    font-size: var(--font-size-heading-4);
    line-height: var(--line-height-heading-4);
    font-weight: 400;
}

h5,
.h5 {
    font-size: var(--font-size-lead-in);
    line-height: var(--line-height-lead-in);
    font-weight: 400;
}

h6,
.h6 {
    font-size: var(--font-size-remark);
    line-height: var(--line-height-remark);
    font-weight: 400;
}


body {
    letter-spacing: 0px;
    color: var(--color-text);
    font-size: var(--font-size-base);
    line-height: 1.5;
    font-family: var(--font-family-base);
}

.container {
    max-width: 1920px;
    margin: 0 auto;
    padding: var(--padding-container);

    @media(max-width: 767px) {
        padding: var(--padding-container-mobile);
    }
}

/* Common Elements */

a {
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    transition: all 0.3s ease;
}

a:hover,
a:focus {
    color: var(--color-text);
    text-decoration: none;
}

.btn,
button,
.btn-secondary.next,
button.btn-secondary.next,
.btn-secondary.prev,
button.btn-secondary.prev {
    border: 1px solid var(--button-border-color);
    border-radius: var(--button-border-radius);
    color: var(--button-text-color);
    padding: 12px 20px;
    transition: all 0.3s ease;
    background-color: transparent;
    text-decoration: none;
    font-weight: 500;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    letter-spacing: 0px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 16px;
    width: max-content;
}

.btn:hover,
button:hover,
.btn:focus,
button:focus {
    background-color: var(--button-hover-border-color);
    border-color: var(--button-hover-border-color);
    color: var(--button-text-color);
    outline: none;
}

.btn-secondary,
button.btn-secondary {
    background-color: var(--button-secondary-background-color);
    border-color: var(--button-secondary-background-color);
}

.btn-secondary:hover,
button.btn-secondary:hover,
.btn-secondary:focus,
button.btn-secondary:focus {
    background-color: var(--button-hover-border-color);
    border-color: var(--button-hover-border-color);
}

.btn.next:after,
button.next:after {
    content: "";
    display: inline-block;
    width: 23px;
    height: 15px;
    background-image: url("../images/arrow-red.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.btn.prev:before,
button.prev:before {
    content: "";
    display: inline-block;
    width: 23px;
    height: 15px;
    background-image: url("../images/arrow-red.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transform: rotate(180deg);
}

.btn.btn-primary.next:hover,
button.btn-primary.next:hover,
.btn.btn-primary.prev:hover,
button.btn-primary.prev:hover,
.btn.btn-primary.next:focus,
button.btn-primary.next:focus,
.btn.btn-primary.prev:focus,
button.btn-primary.prev:focus {
    background-color: var(--color-blue-4);
}

.btn.btn-secondary.next:hover,
button.btn-secondary.next:hover,
.btn.btn-secondary.prev:hover,
button.btn-secondary.prev:hover,
.btn.btn-secondary.next:focus,
button.btn-secondary.next:focus,
.btn.btn-secondary.prev:focus,
button.btn-secondary.prev:focus {
    background-color: var(--color-dark-blue);
}

button.btn-primary.btn-white,
.btn.btn-primary.btn-white {
    border-color: rgba(255, 255, 255, 0.3);
}

button.btn-primary.btn-white.next:after,
.btn.btn-primary.btn-white.next:after {
    filter: brightness(0) invert(1);
}

button.btn-primary.btn-white:hover,
.btn.btn-primary.btn-white:hover,
button.btn-primary.btn-white:focus,
.btn.btn-primary.btn-white:focus {
    background-color: rgba(255, 255, 255, 0.1);
}

button.btn-secondary.btn-white,
.btn.btn-secondary.btn-white {
    background-color: transparent;
    border-color: var(--button-border-color);
}

button.btn-secondary.btn-white:hover,
.btn.btn-secondary.btn-white:hover,
button.btn-secondary.btn-white:focus,
.btn.btn-secondary.btn-white:focus {
    background-color: var(--color-blue-4);
    border-color: var(--button-border-color);
}


.line-animation {
    background-color: var(--color-dark-blue);
    position: absolute;
}

.line-animation.horizontal {
    height: 1px;
    inset: 0 0 auto 0;
    width: 0;
}

.line-animation.vertical {
    width: 1px;
    height: 0;
}

@media (max-width: 1023px) {
    .container {
        padding: 0 30px;
    }
}

@media (max-width: 767px) {

    .heading-15,
    .heading-15 * {
        font-size: var(--font-size-heading-1);
        line-height: 1.2;
        font-weight: 400;
    }

    .h2,
    h2,
    .h2 * {
        font-size: var(--font-size-heading-1);
        line-height: 1.14285714286;
    }

    h3,
    .h3 {
        font-size: var(--font-size-heading-4);
        line-height: 1.33333333333;
    }
}