@import "variables-pc.css";

.bg {
    background-image: url(../images/about-us/bg2.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.navigator, .navigator .title, .menu-item {
    color: var(--color-text-inverse);
}

.navigator .menu .about-us-link {
    border-bottom: 2px var(--color-bg-primary) solid;
}

.focus {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    color: var(--color-text-inverse);
}

.focus .title {
    font-weight: var(--font-weight-medium);
}

.focus .sub-title {
    font-weight: var(--font-weight-normal);
}

.focus .register {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 9rem;
    min-height: 3.25rem;
    background-image: linear-gradient(90deg, #e0c28a 0%, #f1dcb3 100%, #f0dcb2 100%);
    box-shadow: 0 2px 4px 0 rgba(136, 104, 43, 0.31);
    border-radius: var(--border-radius-md);
}

.focus .register a {
    color: #735b2a !important;
    font-weight: var(--font-weight-medium);
    text-align: center;
}

.bg {
    height: 39.375rem;
}

.focus {
    margin-left: 13%;
}

.focus .title {
    padding-top: var(--spacing-28);
    font-size: var(--font-size-6xl);
}

.focus .sub-title {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-normal);
    margin-top: var(--spacing-9);
    width: 27%;
    min-width: 354px;
}

.focus .register {
    min-width: 144px;
    height: 3.3333%;
    min-height: 52px;
    margin-top: var(--spacing-16);
    padding: 0 var(--spacing-6);
}

.focus .register a {
    font-size: var(--font-size-xl);
    letter-spacing: var(--letter-spacing-normal);
}


.features {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: var(--border-width-thin) solid #979797;
}

.features .feature-item {
    color: rgba(37, 42, 42, 1);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    text-align: center;
    flex: 1;
}

.features a {
    display: block;
    color: rgba(37, 42, 42, 1) !important;
}

.features .feature-item:hover::after {
    display: block;
    background-color: #ff6f08;
    content: "";
    position: relative;
    opacity: 1;
}

.features {
    height: 99px;
    margin: 0 auto var(--spacing-28) auto;
    padding: 0 17% 0 17%;
}

.features .feature-item {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-snug);
}

.features .feature-item:hover::after {
    width: 30%;
    height: 0.125rem;
    top: var(--spacing-6);
    margin: 0 auto 0 auto;
}

.feature {
    display: grid;
    display: -ms-grid;
}

#section_introduction {
    grid-template-columns:1fr 1.8fr;
    grid-gap: var(--spacing-10);
margin: 0 13% var(--spacing-28) 13%;
    -ms-grid-columns: 1fr var(--spacing-10) 1.8fr;
    -ms-grid-rows: auto;
}

#section_introduction > * {
    /* Ensure grid items are properly positioned in Internet Explorer */
    -ms-grid-column-span: 1;
    -ms-grid-row-span: 1;
}

#section_introduction > *:nth-child(1) {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
}

#section_introduction > *:nth-child(2) {
    -ms-grid-column: 3;
    -ms-grid-row: 1;
}

#section_introduction .left {
    display: flex;
    align-items: center;
}

#section_introduction .description {
    overflow-wrap: break-word;
    margin: var(--spacing-14) 0 auto 0;
}

#section_about-us {
    background: #2f2f2f;
    min-height: 385px;
    padding-top: var(--spacing-24);
}

#section_about-us .title-container {
    color: var(--color-text-inverse);
    padding-left: 0;
    margin-bottom: 0;
}

#section_about-us .list {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-gap: 10%;
    width: 100%;
    margin: 0;
    display: -ms-grid;
    -ms-grid-rows: auto;
    -ms-grid-columns: 1.2fr 10% 1fr;
}

#section_about-us .list > * {
    /* Ensure grid items are properly positioned in Internet Explorer */
    -ms-grid-column-span: 1;
    -ms-grid-row-span: 1;
}

#section_about-us .list > *:nth-child(1) {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
}

#section_about-us .list > *:nth-child(2) {
    -ms-grid-column: 3;
    -ms-grid-row: 1;
}

#section_about-us .description .left .block {
    color: #1f1f1f !important;
    text-align: left;
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
}

#section_about-us .description .left .block-top p {
    color: var(--color-text-inverse);
    margin-top: var(--spacing-20);
    width: 100%;
}

#section_about-us .description .left .block-bottom {
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-2xl);
    width: 84%;
    margin-top: var(--spacing-20);
    margin-bottom: var(--spacing-28);
    padding: var(--spacing-5) 8% var(--spacing-10) 8%;
}

#section_about-us .description .right {
    display: flex;
    align-items: center;
    margin-top: calc(-1 * var(--spacing-36));
    margin-right: -23%;
}

.feature .title-container {
    font-weight: var(--font-weight-medium);
    color: #1f1f1f;
    padding-top: 0;
    margin-bottom: var(--spacing-14);
}

.feature .title {
    text-align: left;
    font-size: var(--font-size-4xl);
}

#section_goal {
    -ms-grid-columns: 1fr;
    -ms-grid-rows: auto 51px auto;
    margin-top: var(--spacing-24);
}

#section_goal > * {
    -ms-grid-column-span: 1;
    -ms-grid-row-span: 1;
}

#section_goal > *:nth-child(1) {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
}

#section_goal > *:nth-child(2) {
    -ms-grid-column: 1;
    -ms-grid-row: 3;
}

#section_goal .description {
    background: #FFE7B8;
    border-radius: 2rem;
}

#section_goal .description {
    color: #1f1f1f;
    font-weight: var(--font-weight-normal);
    text-align: left;
}

#section_values {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5%;

    display: -ms-grid;
    -ms-grid-columns: 1fr 5% 1fr;
    -ms-grid-rows: auto;
}

#section_values > * {
    /* Ensure grid items are properly positioned in Internet Explorer */
    -ms-grid-column-span: 1;
    -ms-grid-row-span: 1;
}

#section_values > *:nth-child(1) {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
}

#section_values > *:nth-child(2) {
    -ms-grid-column: 3;
    -ms-grid-row: 1;
}

#section_values .description {
    color: #1f1f1f;
    font-weight: var(--font-weight-normal);
    text-align: left;
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    text-indent: 2.5rem;
}

#section_values .right {
    display: flex;
    align-items: center;
    width: 100%;
}

.feature p {
    text-indent: 2.5rem;
    font-size: var(--font-size-md);
}

#section_introduction p {
    margin: 0;
}

#section_introduction .right {
    width: 100%;
    line-height: 2rem;
}

#section_introduction .left img {
    width: 100%;
    height: 100%;
    max-height: 538px;
}

#section_introduction .title-container {
    padding-top: var(--spacing-1);
    padding-left: 0;
}


#section_about-us, #section_goal, #section_values {
    padding-left: 13%;
    padding-right: 13%;
}

#section_about-us .description .left {
    margin: 0;
    width: 100%;
}

#section_about-us .description .left .block-bottom img {
    height: 2.75rem;
    margin: calc(-1 * var(--spacing-24)) 0 var(--spacing-4) 0;
}


#section_about-us .description .right img {
    width: 80%;
}

.feature .sub-title {
    font-size: var(--font-size-md);
    margin-left: var(--spacing-6);
}

#section_goal .description {
    padding-top: var(--spacing-24);
    padding-bottom: var(--spacing-24);
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    text-indent: 2.5rem;
    margin: 0 -10%;
}

#section_goal .description p {
    margin: 0 8.5% 0 8.5%;
}

#section_values {
    margin: var(--spacing-24) auto var(--spacing-36) 0;
}

#section_values .right img {
    width: 100%;
}