/* Default CSS  */
:root {
    --white-color: #ffffff;
    --black-color: #000000;
    --main-color: #ce1438;

    --bg-1: #ffffff;
    --bg-2: #f7f7f7;
    --bg-3: #f1e7c3;
    --card-bg: #f1e7c3;

    --nav-color: #ffffff;
    --nav-fixed-color: #000000;
    --nav-hover: #ce1438;
    --nav-des-hover: #ce1438;
    --nav-des-active: #ce1438;
    --nav-active: #ce1438;

    --input-field-bg: #e8f0fe;
    --input-field-color: #000000;
    --input-req-color: #ce1438;

    --title-color-1: #ffffff;
    --title-color-2: #000000;
    --title-color-3: #ce1438;
    --title-color-4: #132255;

    --paragraph-color-1: #ffffff;
    --paragraph-color-2: #444444;

    --border-color-1: #ffffff;
    --border-color-2: #ce1438;
    --border-radius: 15px;

    --button-bg-color: #ce1438;
    --button-hover-color: #ef113d;
    --button-color: #ffffff;
    --content-button-color: #ef113d;

    --review-color: #ffca28;

    --footer-top: linear-gradient(#122254, #162358, #111f5c);
    --footer-bottom: #101735;
    --footer-color: #ffffff;

    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    --hover-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

html {
    scroll-behavior: smooth;
}

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

body {
    font-family: "Roboto", sans-serif;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
}

ul {
    list-style-type: none;
}

.myContainer {
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
    padding: 0 1rem;
}

@media screen and (max-width: 992px) {
    .myContainer {
        max-width: 100%;
    }
}

.title-container h1 {
    font-size: 60px;
    color: var(--title-color-2);
    text-align: center;
    padding: 10px 0;
}

.title-container h1 span {
    color: var(--title-color-3);
}

/*Title Responsive */
@media screen and (max-width: 992px) {
    .title-container h1 {
        font-size: 45px;
    }
}

@media screen and (max-width: 767px) {
    .title-container h1 {
        font-size: 40px;
    }
}

@media screen and (max-width: 400px) {
    .title-container h1 {
        font-size: 30px;
    }
}