:root {
    --primary-dark-blue: #1D4273;
    --secondary-dark-blue: #163A59;
    --primary-blue: #2B96D9;
    --light-blue: #32A9D9;
    --light-gray: #F2F2F2;
    --white: #FFFFFF
}

html {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.5
}

body {
    background-color: var(--light-gray);
    color: var(--primary-dark-blue);
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0
}

.navbar {
    background: var(--white);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--light-gray);
    box-shadow: 0 2px 10px rgba(29, 66, 115, .1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50
}

.navbar .flex {
    display: flex
}

.navbar .items-center {
    align-items: center
}

.navbar .justify-between {
    justify-content: space-between
}

.hero-section {
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 6rem;
    padding-bottom: 5rem;
    margin-top: 4rem
}

.hero-section h1 {
    font-weight: 700;
    font-size: clamp(1.875rem, 8vw, 3.75rem);
    line-height: 1.15;
    margin: 0;
    padding: 0
}

.bg-custom-light {
    background-color: var(--light-gray) !important
}

.bg-custom-primary {
    background-color: var(--primary-dark-blue) !important
}

.bg-custom-secondary {
    background-color: var(--secondary-dark-blue) !important
}

.bg-custom-blue {
    background-color: var(--primary-blue) !important
}

.bg-custom-light-blue {
    background-color: var(--light-blue) !important
}

.bg-custom-white {
    background-color: var(--white) !important
}

.text-custom-primary {
    color: var(--primary-dark-blue) !important
}

.text-custom-secondary {
    color: var(--secondary-dark-blue) !important
}

.text-custom-blue {
    color: var(--primary-blue) !important
}

.text-custom-light-blue {
    color: var(--light-blue) !important
}

.text-custom-white {
    color: var(--white) !important
}

.border-custom-light {
    border-color: var(--light-gray) !important
}

.border-custom-primary {
    border-color: var(--primary-dark-blue) !important
}

.container-safe {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem
}

@media(min-width:640px) {
    .container-safe {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }
}

@media(min-width:1024px) {
    .container-safe {
        padding-left: 3rem;
        padding-right: 3rem
    }
}