:root {
    --blue: #000E8B;
    --light-blue: #3E8EDE;
    --teal: #9BE7D8;
    --gray: #333E48;
    --white: #ffffff;
    --gradient: linear-gradient(to right, var(--blue), var(--light-blue));
}

@font-face {
    font-family: "Canaro";
    src: url("../fonts/canaro-light.otf") format("opentype");
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: "Canaro";
    src: url("../fonts/canaro-regular.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "Canaro";
    src: url("../fonts/canaro-medium.otf") format("opentype");
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: "Canaro";
    src: url("../fonts/canaro-semi-bold.otf") format("opentype");
    font-style: normal;
    font-weight: 600;
}

@font-face {
    font-family: "Canaro";
    src: url("../fonts/canaro-bold.otf") format("opentype");
    font-style: normal;
    font-weight: 700;
}

html {
    font-size: 13px;
}

@media (min-width: 900px) {
    html {
        font-size: 16px;
    }
}

html {
    scroll-behavior: smooth;
}

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

.content {
    padding-top: 1.1rem;
}

.custom-gradient {
    background: var(--gradient);
}

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

.p-side {
    padding-inline: 3rem;
}

@media (max-width: 576px) {
    .p-side {
        padding-inline: 2rem;
    }
}