@font-face {
    font-family: "Lato Bold";
    src: url('../assets/fonts/Lato/Lato-Bold.ttf');
}
@font-face {
    font-family: "Lato Regular";
    src: url('../assets/fonts/Lato/Lato-Regular.ttf');
}
@font-face {
    font-family: "Lato Light";
    src: url('../assets/fonts/Lato/Lato-Light.ttf');
}
@font-face {
    font-family: "Noto Light";
    src: url('../assets/fonts/Noto_Serif_Display/static/NotoSerifDisplay-Light.ttf');
}

.motive-section{
    background-color: var(--light-color);
}
.motive-container {
    color: var(--dark-color);
}

.motive-wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    margin: 0px auto;
}
.motive-label {
    width: 40%;
    font-family: "Lato Light";
    font-size: 26px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--dark-color);
    opacity: 0;
    transform: translateX(-100%);
    transition: all 1500ms;
}
.motive-label-active {
    opacity: 1;
    transform: translateX(0%);
}
.motive-text {
    font-family: "Noto Light";
    font-size: 46px;
    padding: 15px 0px;
    margin-bottom: 25px;
    opacity: 0;
    transform: translateX(-100%);
    transition: all 1500ms;
}
.motive-text-active {
    opacity: 1;
    transform: translateX(0%);
}
.motive-button {
    font-family: "Lato Regular";
    font-size: 16px;
    color: var(--light-color);
    background-color: var(--dark-color);
    border: 2px solid var(--dark-color);
    border-radius: 0.5em;
    padding: 10px 20px;
    transition: all 300ms;
}
.motive-button:hover {
    color: var(--dark-color);
    background-color: var(--light-color);
}

@media screen and (max-width: 2560px) and (min-width: 1537px) {
    .motive-label { font-size: 1.6vw;   padding-bottom: 0.97vw; }
    .motive-text { font-size: 3vw;    padding: 0.97vw 0px;    margin-bottom: 1.6vw; }
    .motive-button { font-size: 1vw;    padding: 0.65vw 1.3vw; }
}

@media screen and (max-width: 1024px) {
    .motive-label { font-size: 22px; }
    .motive-text { font-size: 36px; padding: 15px 0px; }
}

@media screen and (max-width: 768px) {
    .motive-label { font-size: 22px; }
    .motive-text { font-size: 26px; padding: 15px 0px; }
}

@media screen and (max-width: 426px) {
    .motive-label { width: 80%; font-size: 16px; padding-bottom: 5px; }
    .motive-text { font-size: 18px; padding: 10px 0px; }
}