@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");
}

.about-us-text-section {
    background-color: var(--light-color);
    overflow: hidden;
}
.about-us-text-container {
    color: var(--dark-color);
}
.about-us-text-block {
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    height: 100vh;
    max-height: 695px;
    background-color: var(--light-color);
    color: #262626;
    margin-bottom: 100px;
    opacity: 0;
}
.text-block-left-text {
    flex-direction: row;
    transform: translateX(-150%);
    transition: all 1000ms;
}
.text-block-right-text {
    flex-direction: row-reverse;
    transform: translateX(150%);
    transition: all 1000ms;
}
.about-us-text-block-active-left,
.about-us-text-block-active-right {
    opacity: 1;
    transform: translateX(0%);
}
.about-us-text-wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    width: 45%;
}
.about-us-text-title {
    font-family: "Noto Light";
    font-size: 56px;
    margin-bottom: 40px;
}
.about-us-text-desc {
    width: 100%;
    font-family: "Lato Light";
    font-size: 22px;
    line-height: 1.5;
}
.about-us-image-wrapper {
    position: relative;
    width: 30vw;
    height: 30vw;
    background-size: cover;
    background-position: center;
    z-index: 5;
}
.about-us-image-wrapper::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 1px solid #323232;
    z-index: 1;
}
.frame-right::after{
    top: -1.9vw;
    left: 1.9vw;
}
.frame-left::after{
    top: -1.9vw;
    left: -1.9vw;
}

@media screen and (max-width: 2560px) and (min-width: 1025px) {
    .about-us-text-block { gap: 2.6vw; max-height: 45vw; margin-bottom: 0px; }
    .about-us-text-title { font-size: 3.6vw; margin-bottom: 2.6vw; }
    .about-us-text-desc { font-size: 1.43vw; }
}

@media screen and (max-width: 1024px) {
    .about-us-text-block { justify-content: center; height: auto;}
    .text-block-left-text, .text-block-right-text { flex-direction: column-reverse; }
    .about-us-text-wrapper { width: 100%; }
    .about-us-text-title { font-size: 36px; margin-bottom: 20px; }
    .about-us-text-desc { font-size: 22px; }
    .about-us-image-wrapper { width: 100%; }
}

@media screen and (max-width: 426px) {
    .about-us-text-block { max-height: none; }
    #thirdText { margin-bottom: 0px; }
    .about-us-text-title { font-size: 32px; margin-bottom: 20px; }
    .about-us-text-desc { font-size: 16px; }
    .about-us-image-wrapper { width: 100%; }
}

@media screen and (max-width: 376px) {
    .about-us-text-title { font-size: 28px; margin-bottom: 20px; }
    .about-us-text-desc { font-size: 14px; }
}