@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap');
:root {
    --font-family: 'Montserrat', sans-serif;
    --title-font-family: 'Quicksand', sans-serif;

    --container-full: 100%;
    /* --container-width: 1200px; */
    --container-width: 1200px;    

    --white-color: #ffffff;
    --grey-color: #DCDCDC;
    --text-color: #303030;
    --text-gray-color: #5B5F60;
    --text-light-gray-color: #414141;
    --black-color: #2E2E2E;
    --border-color: #5B5F60;
    

    --primary-color: #273073;
    --secondary-color: #D87C3A;
    --accent-color: #3945a1;
    
    --footer-bg-color: #273073;
    --social-media-bg-color: #9B704E;
    --about-shape-color: #92613B;
    --error-color: #d82121;

    --font-12: 1.2rem;
    --font-13: 1.3rem;
    --font-14: 1.4rem;
    --font-15: 1.5rem;
    --font-16: 1.6rem;
    --font-17: 1.7rem;
    --font-18: 1.8rem;
    --font-19: 1.9rem;
    --font-20: 2.0rem;
    --font-21: 2.1rem;
    --font-22: 2.2rem;
    --font-23: 2.3rem;
    --font-24: 2.4rem;
    --font-25: 2.5rem;
    --font-26: 2.6rem;
    --font-28: 2.8rem;
    --font-30: 3rem;
    --font-32: 3.2rem;
    --font-34: 3.4rem;
    --font-36: 3.6rem;
    --font-38: 3.8rem;
    --font-40: 4rem;
    --font-42: 4.2rem;
    --font-45: 45rem;
    --font-50: 5rem;

    --font-weight-300: 300;
    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-600: 600;
    --font-weight-700: 700;
    --radius-5: 5px;

    --body-font-size: var(--font-16);
    --body-color: #5B5F60;

    --body-line-height: 2.6rem;
    --body-font: var(--font-16) var(--font-family);

    --link-color: var(--secondary-color);
    --link-hover-color: var(--secondary-color);

    --button-height: 5rem;
    --button-font-size: var(--font-20);
    --button-font-weight: var(--font-weight-600);
    --button-font-family: var(--font-family);
    --button: var(--button-font-weight) var(--button-font-size) var(--button-font-family);

    --button-bg: #D87C3A;
    --button-color: var(--white-color);    
    --button-hover-color: #be6728;

    --h1-color: var(--primary-color);
    --h1-font-size: 8rem;
    --h1-line-height: 8rem;
    --h1-font: var(--font-weight-700) var(--h1-font-size) var(--title-font-family);

    --h2-color: #273073;
    --h2-font-size: 6rem;
    --h2-line-height: 6rem;
    --h2-font: var(--font-weight-700) var(--h2-font-size) var(--title-font-family);

    --h3-color: var(--primary-color);
    --h3-font-size: 4rem;
    --h3-line-height: 4rem;
    --h3-font: var(--font-weight-600) var(--h3-font-size) var(--title-font-family);

    --h4-color: var(--black-color);
    --h4-font-size: var(--font-18);
    --h4-line-height: 2.6rem;
    --h4-font: var(--font-weight-600) var(--h4-font-size) var(--title-font-family);
    
    --label-font: var(--font-16) var(--font-family);
    --label-color: #414141;

    --control-font: var(--font-16) var(--font-family);
    --control-border-radius: var(--radius-4);

    --control-textarea-height: 100px;
    --control-border: #CCCCCC;

    --popup-bg-color: #F4F4F4;
    --light-blue-bg: #F5F5F5;

    --flex: flex;
    --flex-wrap: wrap;
    --align-center: center;
    --space-between: space-between;
    --center: center;
}