@import "variables-pc.css";

.content-wrapper {
    background-image: linear-gradient(180deg, #111111 2%, rgba(255, 255, 255, 0.17) 39%);
    background-image: -webkit-linear-gradient(#111111 2%, #FFFFFF 39%);
    background-image: -moz-linear-gradient(#111111 2%, #FFFFFF 39%);
    background-image: -o-linear-gradient(#111111 2%, #FFFFFF 39%);
    background: -ms-linear-gradient(top, #111111 2%, #FFFFFF 39%);
}

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

.navigator .menu .home-link {
    border-bottom: 2px #FFFFFF solid;
}

.focus {
    min-height: 603px;
    color: white;
    overflow: hidden;
    height: 47.0833%;
}

.focus-left-body {
    display: flex;
    flex-flow: column;
    margin-top: var(--spacing-60);
    margin-bottom: var(--spacing-56);
    margin-left: 13%;
    width: 100%;
}

.focus-left-body .title {
    color: var(--color-text-inverse);
    text-align: justify;
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    font-size: var(--font-size-7xl);
    margin-top: 0;
    margin-bottom: 0;
}

.focus-left-body .sub-title {
    color: var(--color-text-inverse);
    text-align: justify;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-3xl);
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-24);
}

.focus-left-body a {
    color: #735b2a;
    text-align: justify;
    font-weight: var(--font-weight-medium);
    background-image: linear-gradient(90deg, #E0C28A 0%, #F1DCB3 100%, #F0DCB2 100%);
    border-radius: var(--border-radius-xl);
    white-space: nowrap;
    padding: var(--spacing-5) var(--spacing-14);
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    max-width: 200px;
}

.features {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: url(../images/index/banner.png) no-repeat;
    background-size: 100% 100%;
    height: 5.875rem;
    margin: 0 auto var(--spacing-32) auto;
    padding: 0 16.5%;
}

.features .feature-item {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    text-align: center;
    flex: 1 0 auto;
    font-size: var(--font-size-xl);
}

.features a {
    display: block;
    color: var(--color-text-primary);
}

.features .feature-item:hover::after {
    display: block;
    background-color: rgba(231, 204, 147, 1);
    content: "";
    position: relative;
    width: 28%;
    height: 0.25rem;
    top: var(--font-size-2xl);
    margin: 0 auto 0 auto;
}

.feature {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 27.625rem;
    margin-bottom: 10.438rem;
    margin-left: 13%;
    margin-right: 13%;
}

.text-wrapper .title {
    color: var(--color-text-primary);
    text-align: justify;
    font-weight: var(--font-weight-bold);
    font-size: var(--spacing-9);
}

.text-wrapper .sub-title {
    color: var(--color-text-primary);
    text-align: justify;
    font-weight: var(--font-weight-bold);
    font-size: var(--spacing-12);
}

.text-wrapper .description {
    color: #494949;
    text-align: justify;
    font-weight: var(--font-weight-normal);
    font-size: var(--spacing-6);
    line-height: var(--line-height-snug);
}

.bottom-text {
    display: flex;
    border-radius: var(--border-radius-2xl);
    align-items: center;
    white-space: nowrap;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}

#section_everywhere .bottom-text {
    border: var(--border-width-thin) solid #FFE9C0;
    background: rgba(0, 0, 0, 0.06);
    margin-top: var(--spacing-16);
}

#section_reliable .bottom-text {
    border: var(--border-width-thin) solid #FF7D00;
    background: var(--color-bg-primary);
    margin-top: var(--spacing-24);
}

.bottom-text .title {
    text-align: justify;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-3xl);
    margin-top: var(--spacing-7);
    margin-bottom: var(--spacing-1);
    margin-right: var(--spacing-9);
}

.bottom-text .description {
    text-align: justify;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-lg);
    margin-top: 0;
    margin-bottom: var(--spacing-6);
    margin-right: var(--spacing-9);
}

#section_everywhere .bottom-text .title {
    color: #FFE9C0;
}

#section_everywhere .bottom-text .description {
    color: #FFE9C0;
}

#section_reliable .bottom-text .title {
    color: #FF7D00;
}

#section_reliable .bottom-text .description {
    color: #FF7D00;
}

.bottom-btn {
    background: #4A4A4A;
    border-radius: var(--border-radius-2xl);
    color: var(--color-text-inverse);
    text-align: justify;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xl);
}

.feature .img-container {
    height: 100%;
    max-width: 60%;
}

.img-container img {
    height: 100%;
}

.feature .text-wrapper {
    width: max-content;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: 34.375rem;
}

#section_everywhere .img-container {
    margin-right: 4%;
}

#section_unlimited .text-wrapper {
    margin-right: 4%;
}

#section_team .img-container {
    margin-right: 4%;
}

#section_reliable .img-container {
    margin-left: 4%;
}

#section_unlimited .description {
    margin-bottom: var(--spacing-24);
}

#section_team .description {
    margin-bottom: var(--spacing-32);
}

.bottom-text .bottom-img {
    height: 3.5rem;
    width: auto;
    margin-right: var(--spacing-9);
    margin-left: var(--spacing-9);
}

#section_unlimited .bottom-btn {
    padding: var(--spacing-7) var(--spacing-16);
}

#section_team .bottom-btn {
    padding: var(--spacing-7) var(--spacing-24);
}

.about-us .header {
    background: #434343;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    height: 16.9792%;
    min-height: 326px;
}

.about-us .title {
    color: #EEDAAE;
    text-align: center;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-6xl);
}

.about-us .sub-title {
    color: #EEDAAE;
    text-align: center;
    font-weight: var(--font-weight-normal);
    margin-top: var(--spacing-7);
    font-size: 1.5rem;
}

.about-us .list {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-gap: 5%;
    margin: var(--spacing-28) 13%;
    min-height: 470px;
    display: -ms-grid;
    -ms-grid-columns: 1.2fr 5% 1fr;
    -ms-grid-rows: auto;
}

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

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

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

.list .bg-img-container {
    background-image: url(../images/index/grouping33.webp), url(../images/index/grouping33.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
}

.list .text-wrapper {
    display: flex;
    flex-flow: column;
}

.text-container .title-company-introduction {
    background-image: url(../images/index/block.webp), url(../images/index/block.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left;
    color: var(--color-text-primary);
    text-align: justify;
    font-weight: var(--font-weight-medium);
    margin-top: 0;
    margin-bottom: var(--spacing-8);
    padding-left: var(--spacing-14);
    font-size: var(--font-size-xl);
}

.text-container .content {
    color: #111111;
    text-align: justify;
    font-weight: var(--font-weight-normal);
    margin-bottom: var(--spacing-11);
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
}

.text-container .about-us-link {
    background-image: url(../images/index/next-step.png);
    background-size: auto 80%;
    background-repeat: no-repeat;
    background-position: right;
    color: #735B2A;
    text-align: justify;
    font-weight: var(--font-weight-medium);
    text-decoration: underline;
    padding-right: var(--spacing-9);
    font-size: var(--font-size-md);
}

.text-wrapper .data-block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: var(--spacing-9);
    margin-top: var(--spacing-14);
    display: -ms-grid;
    -ms-grid-columns: 1fr var(--spacing-10) 1fr var(--spacing-10) 1fr;
    -ms-grid-rows: auto;
}

.text-wrapper .data-block > * {
    -ms-grid-column-span: 1;
    -ms-grid-row-span: 1;
}

.text-wrapper .data-block > *:nth-child(1) {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
}

.text-wrapper .data-block > *:nth-child(2) {
    -ms-grid-column: 3;
    -ms-grid-row: 1;
}

.text-wrapper .data-block > *:nth-child(3) {
    -ms-grid-column: 5;
    -ms-grid-row: 1;
}

.data-block .data-content {
    background: #434343;
    border-radius: var(--border-radius-lg);
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-4);
}

.data-content .data-number {
    color: var(--color-text-inverse);
    text-align: justify;
    font-weight: var(--font-weight-normal);
    margin: 0;
    font-size: var(--font-size-4xl);
}

.data-content .data-object {
    color: var(--color-text-inverse);
    text-align: justify;
    font-weight: var(--font-weight-normal);
    margin: 0;
    font-size: var(--font-size-sm);
}

.business {
    background-image: linear-gradient(90deg, #AD945A 0%, #F1DCB3 100%, #FFF9ED 100%);
    text-align: center;
    width: 100%;
    height: 20.375rem;
}

.business .title {
    color: #111111;
    text-align: center;
    font-weight: var(--font-weight-medium);
    padding-top: var(--spacing-24);
    font-size: var(--font-size-6xl);
    margin-bottom: var(--spacing-9);
}

.business a {
    background: var(--color-bg-primary);
    box-shadow: 0 2px 4px 0 rgba(136, 104, 43, 0.31);
    border-radius: var(--border-radius-xl);
    color: #735b2a;
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-4) var(--spacing-24);
    font-size: var(--font-size-2xl);
    letter-spacing: 0;
}

.last-section {
    background-image: url(../images/common/background2.webp), url(../images/common/background2.png);
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: cover;
}