/* ===== Font ===== */
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@300;400;500;600;700;800;900&display=swap');

/* ===== Base Styles ===== */

:root {
    --ct-red: #063C87;
    --ct-red-dark: #042d62;
    --ct-red-light: #1a5fb8;
    --ct-blue: #26a4db;
    --ct-dark: #333333;
    --ct-gray: #6c757d;
    --ct-light-gray: #f7f7f7;
    --ct-border: #e0e6ed;
    --ct-bg-light: #f3f9fb;
    --ct-white: #ffffff;
    --ct-yellow: #f7b500;
    --ct-green: #28a745;
    --ct-font: 'Red Hat Display', Arial, Helvetica, sans-serif;
    --ct-font-light: 'Red Hat Display', Arial, Helvetica, sans-serif;
}

/* ===== Reset & Base ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--ct-font);
    font-weight: 400;
    color: var(--ct-dark);
    background-color: var(--ct-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: none;
}

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

/* ===== Common Components ===== */

/* Red Button */
.red-button {
    background-color: var(--ct-red);
    color: var(--ct-white) !important;
    border-radius: 24px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    border: none;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.red-button:hover {
    background-color: var(--ct-red-dark);
    color: var(--ct-white) !important;
}

/* Rounded Button */
.rounded-btn {
    border-radius: 24px;
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 400;
    max-width: 200px;
    display: inline-block;
    text-align: center;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.container-fluid {
    width: 100%;
    padding: 0 15px;
}

/* Section spacing */
section {
    position: relative;
}

/* Utility */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }
.my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.p-0 { padding: 0; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-5 { padding-left: 3rem; padding-right: 3rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }
.pb-5 { padding-bottom: 3rem; }
.pt-5 { padding-top: 3rem; }
.w-100 { width: 100%; }
.bg-white { background-color: var(--ct-white); }
.fw-bold { font-weight: 700; }
.fs-32 { font-size: 2rem; }
.fs-16 { font-size: 1rem; }
.fs-18 { font-size: 1.125rem; }
.color-black-35 { color: #353535; }