@font-face {
    font-family: "Poppins";
    src: url(../fonts/Poppins/Poppins-Regular.ttf);
}
@font-face {
    font-family: "Poppins Light";
    src: url(../fonts/Poppins/Poppins-Light.ttf);
}
@font-face {
    font-family: "Poppins Medium";
    src: url(../fonts/Poppins/Poppins-Medium.ttf);
}
@font-face {
    font-family: "Poppins Bold";
    src: url(../fonts/Poppins/Poppins-Bold.ttf);
}

:root {
    --main-color: #032842;
    --secondary-color: #4EBCC2;
    --white-color: #ffffff;
    --black-color: #221816;
    --text-color: #a7a7a7;
    --red-color: #DB222A;
}

html {
    font-family: "Poppins";

    /* 1REM = 10PX */
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

h1 {
    font-size: 3.8rem;
}
h2 {
    font-size: 3.2rem;
}
h3 {
    font-size: 2.8rem;
}
h4 {
    font-size: 2.2rem;
}
h5 {
    font-size: 1.8rem;
}
h6 {
    font-size: 1.2rem;
}

p,
a,
span,
button,
input,
textarea,
strong,
li {
    font-size: 1.6rem;
    color: var(--text-color);
}

a {
    text-decoration: none;

    transition: all 0.3s ease-in-out;
}

.container {
    width: 90%;
    margin: 0 auto;
    max-width: 1240px;
}

.backtotop {
    position: fixed;
    background-color: var(--main-color);
    border: 2px solid var(--white-color);
    bottom: 50px;
    right: 50px;
    width: 5rem;
    height: 5rem;
    border-radius: 10px;
    color: var(--white-color);
    cursor: pointer;

    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.backtotop.active {
    visibility: visible;
    opacity: 1;
}

.btn-1 {
    display: block;
    width: fit-content;
    padding: 1.6rem 6rem;
    background-color: var(--main-color);
    color: var(--white-color);
    border-radius: 30px;
}

.btn-1:hover {
    background-color: var(--secondary-color);
    color: var(--black-color);
}
.btn-2 {
    display: block;
    width: fit-content;
    padding: 1.6rem 6rem;
    background-color: transparent;
    color: var(--main-color);
    border: 2px solid var(--secondary-color);
    border-radius: 30px;
}

.btn-2:hover {
    background-color: var(--secondary-color);
    color: var(--white-color);
}
.btn-3 {
    display: block;
    width: fit-content;
    padding: 1.6rem 6rem;
    background-color: var(--secondary-color);
    color: var(--white-color);
    border-radius: 30px;
}

.btn-3:hover {
    color: var(--main-color);
}