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

:root {
    --primary-color: #00244D;
    --primary-hover:#000C1A;
    --accent-blue :#30C2FC;
    --danger: #F5365C;
    --white: #FFF;
    --white-hover: #B3B3B3;
    --black: #000;
    --black-hover: #4D4D4D;
    --grey: #EEF1F5;
    --grey-light: #F8F9FA;
    --opacity-white-60: rgba(255, 255, 255, 0.6);
    --opacity-white-60: rgba(255, 255, 255, 0.7);
    --header-height: 77px;

}

body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
    margin: 0;
    padding: 0;
}

/* Container with max-width 1440px */
.container {
    max-width: 1440px;
    margin: 0 auto;
    overflow: hidden;
}

.container-wrapper {
    padding: 96px 40px;
    box-sizing: border-box;
    width: 100%; 
}

/* Typography */
h1 {
    font-size: 64px;
    font-weight: 300;
    line-height: 72px;
}
h2 {
    font-size: 64px;
    font-weight: 300;
    line-height: 72px;
}
h3 {
    font-size: 64px;
    font-weight: 300;
    line-height: 72px;
}
.section-title {
    font-size: 25px;
    font-weight: 700;
    line-height: 32px;
}
.card-body {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
}
p {
    font-size: 25px;
    font-weight: 400;
    line-height: 32px;
}
.btn {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}
.btn-slim {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}


.space-between-line {
    margin-bottom: 24px;
}
p.space-between-line {
    opacity: .8;
}

/* --- Media Queries --- */

/* Desktop - min-width: 1440px */
@media (min-width: 1440px) {
    body {
        font-size: 16px;
    }

    .container {
        margin: 0 auto;
    }

    .container-wrapper {
        padding: 96px 40px;
    }

    h1 {
        font-size: 64px;
        font-weight: 300;
        line-height: 72px;
    }
    h2 {
        font-size: 64px;
        font-weight: 300;
        line-height: 72px;
    }
    h3 {
        font-size: 64px;
        font-weight: 300;
        line-height: 72px;
    }
    .section-title {
        font-size: 25px;
        font-weight: 700;
        line-height: 32px;
    }
    .card-body {
        font-size: 18px;
        font-weight: 400;
        line-height: 27px;
    }
    p {
        font-size: 25px;
        font-weight: 400;
        line-height: 32px;
    }
    .btn {
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
    }
    .btn-slim {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }
}

/* Tablet - min-width: 768px */
@media (min-width: 768px) and (max-width: 1439px) {
    body {
        font-size: 16px;
    }

    .container-wrapper {
        padding: 64px 40px;
    }


    h1 {
        font-size: 42px;
        font-weight: 300;
        line-height: 48px;
    }
    h2 {
        font-size: 42px;
        font-weight: 300;
        line-height: 48px;
    }
    h3 {
        font-size: 42px;
        font-weight: 300;
        line-height: 48px;
    }
    .section-title {
        font-size: 20px;
        font-weight: 700;
        line-height: 24px;
    }
    .card-body {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }
    p{
        font-size: 20px;
        font-weight: 400;
        line-height: 32px;
    }
    .btn {
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
    }
    .btn-slim {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }
}

/* Mobile - min-width: 360px */
@media (max-width: 767px) {
    body {
        font-size: 16px;
    }

    .container {
        padding: 0; /* Smaller padding for mobile */
    }

    .container-wrapper {
        padding: 64px 20px;
    }

    h1 {
        font-size: 32px;
        font-weight: 300;
        line-height: 36px;
    }
    h2 {
        font-size: 32px;
        font-weight: 300;
        line-height: 36px;
    }
    h3 {
        font-size: 32px;
        font-weight: 300;
        line-height: 36px;
    }
    .section-title {
        font-size: 20px;
        font-weight: 700;
        line-height: 24px;
    }
    .card-body {
        font-size: 16px;
        font-weight: 400;
        line-height: 27px;
    }
    p {
        font-size: 18px;
        font-weight: 400;
        line-height: 25px;
    }
    .btn {
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
    }
    .btn-slim {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }
}


@font-face {
    font-family: 'Nasalization';
    src: url('/assets/fonts/nasalization-rg.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
  }
  
  @font-face {
    font-family: 'Nasalization Bold';
    src: url('/assets/fonts/Nasalization Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
  }
  
  @font-face {
    font-family: 'Nasa';
    src: url('/assets/fonts/Nasa.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
  }