@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700;800&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap");

:root {

    /*COLORS*/

    --navy: #0b3767;
    --gold: #fdbc59;
    --burgundy: #530100;
    --white: #ffffff;

    --black: #0f0f0f;
    --charcoal: #1b1b1b;
    --gray-dark: #3b3b3b;
    --gray: #707070;
    --gray-light: #d9d9d9;
    --off-white: #f8f8f8;

    --background: var(--white);
    --surface: var(--off-white);

    --heading: var(--navy);
    --text: var(--black);
    --text-soft: var(--gray);

    --accent: var(--gold);
    --accent-dark: var(--burgundy);

    /*BORDER*/

    --border: rgba(11, 55, 103, .12);
    --border-light: rgba(255, 255, 255, .08);

    /*OVERLAY*/

    --overlay-dark: rgba(0, 0, 0, .70);
    --overlay-light: rgba(0, 0, 0, .35);

    /*GRADIENTS*/

    --gradient-navy: linear-gradient(135deg, #0b3767, #184f8e);

    --gradient-gold: linear-gradient(135deg, #fdbc59, #ffd488);

    --gradient-background: linear-gradient(180deg, #ffffff, #f8f8f8);


    /*TYPOGRAPHY*/

    --font-heading: "EB Garamond", serif;
    --font-body: "Manrope", sans-serif;

    --fs-display: clamp(3.5rem, 7vw, 5.5rem);

    --fs-h1: 2.3rem;
    --fs-h2: clamp(2.2rem, 4vw, 3rem);
    --fs-h3: 1.75rem;
    --fs-h4: 1.35rem;

    --fs-large: 1.125rem;
    --fs-base: 1rem;
    --fs-small: .9375rem;
    --fs-xs: .8125rem;

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;

    --letter-spacing: .02em;
    --line-height: 1.6;

    /*LAYOUT*/

    --container-width: 1200px;
    --content-width: 720px;

    --section-padding: 6rem;
    --section-padding-small: 4rem;

    --card-padding: 2rem;


    /*SPACING*/

    --space-xs: .5rem;
    --space-sm: .75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 5rem;

    /*INPUTS*/

    --input-height: 3.5rem;
    --input-padding: 1rem;

    --input-bg: var(--white);
    --input-color: var(--text);
    --input-border: 1px solid var(--border);
    --input-placeholder: var(--gray);
    --input-focus: var(--navy);


    /*BUTTONS*/

    --button-padding: .9rem 1.5rem;
    --button-radius: .75rem;

    /*BORDER RADIUS*/

    --radius-sm: .5rem;
    --radius-md: .75rem;
    --radius-lg: 1.25rem;
    --radius-xl: 2rem;
    --radius-round: 999px;


    /*SHADOWS*/

    --shadow-sm: 0 4px 12px rgba(0,0,0,.08);
    --shadow-md: 0 10px 30px rgba(0,0,0,.12);
    --shadow-lg: 0 20px 60px rgba(0,0,0,.18);


    /*EFFECTS*/

    --blur: blur(12px);

    --transition-fast: .2s ease;
    --transition: .35s ease;
    --transition-slow: .6s ease;

    --easing: cubic-bezier(.22,1,.36,1);

}

/*RESET*/

*, 
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body{
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--line-height);
    overflow-x: hidden;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6{
    color: var(--heading);
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    line-height: 1.1;
}

h1{
    font-size: var(--fs-h1);
}

h2{
    font-size: var(--fs-h2);
}

h3{
    font-size: var(--fs-h3);
}

h4 {
    font-size: var(--fs-h4);
}

p {
    color: var(--text);
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

button {
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
}

input,
textarea,
select {
    width: 100%;
    min-height: var(--input-height);
    padding: var(--input-padding);
    background: var(--input-bg);
    color: var(--input-color);
    border: var(--input-border);
    border-radius: var(--radius-md);
    outline: none;
    font: inherit;
    transition: var(--transition);
}


input:focus,
textarea:focus,
select:focus {
    border-color: var(--input-focus);
}

input::placeholder,
textarea::placeholder {
    color: var(--input-placeholder);
}

textarea {
    resize: vertical;
}

ul {
    list-style: none;
}