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

.find-section {
    background-color: var(--light-color);
}
.find-container {
    color: var(--dark-color);
}
@keyframes labelTitleAnimation {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}
.find-label {
    width: 40%;
    font-family: "Lato Bold";
    font-size: 26px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--dark-color);
    opacity: 0;
    transform: translateX(-100%);
    animation: labelTitleAnimation 1000ms forwards;
}
.find-title {
    font-family: "Noto Light";
    font-size: 56px;
    line-height: 1;
    padding: 15px 0px;
    margin-bottom: 25px;
    opacity: 0;
    transform: translateX(-100%);
    animation: labelTitleAnimation 1000ms 500ms forwards;
}
.find-title-low {
    font-family: "Noto Thin";
    font-size: 36px;
    line-height: 1;
}

.find-text {
    font-family: "Lato Light";
    font-size: 36px;
    padding: 15px 0px;
    margin-bottom: 25px;
    opacity: 0;
    transform: translateX(-100%);
    transition: all 1000ms;
}

.find-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;
    opacity: 0;
    transform: translateX(-100%);
    transition: all 300ms;
}
.find-button:hover {
    color: var(--dark-color);
    background-color: var(--light-color);
}

.find-text-active,
.find-button-active {
    opacity: 1;
    transform: translateX(0%);
}

@media screen and (max-width: 2560px) and (min-width: 1537px) {
    .find-label { font-size: 1.7vw; padding-bottom: 0.97vw; }
    .find-title { font-size: 3.6vw; padding: 0.97vw 0px; margin-bottom: 1.6vw; }
    .find-title-low { font-size: 2.3vw; }
    .find-text { font-size: 2.3; padding: 0.97vw 0px; margin-bottom: 1.6vw; }
    .find-button { font-size: 1vw; border: 2px solid var(--dark-color); padding: 0.65vw 1.3vw; }
}

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

@media screen and (max-width: 426px) {
    .find-label { width: 80%; font-size: 16px; padding-bottom: 5px; }
    .find-title { font-size: 22px; margin-bottom: 0px; }
    .find-title-low { font-size: 18px; }
    .find-text { font-size: 16px; padding: 15px 0px; margin-bottom: 15px; }
}