/* Start -> About Us page - Our Responsibility */

.our-story {
    background-color: #FAFBFF;
}

.grid--our-story {
    grid-template-areas:
        '. G_OVI G_OVI G_OVI G_OVI G_OVI G_OVC G_OVC G_OVC G_OVC G_OVC .';
}

.our-story-image-container {
    grid-area: G_OVI;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4rem;
}

.our-story-content-container {
    grid-area: G_OVC;
}

.our-story-headline {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.4;
    color: var(--color-primary-2);
    margin-bottom: 1.5rem;
}

.our-story-content {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-secondary-1);
    margin-bottom: 1.25rem;
}

.our-story-title-black {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-primary-2);
    margin-bottom: 2rem;
    padding-top: 0.75rem;
}

.our-story-title-main-color {
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.4;
    color: var(--color-primary-1);
    margin-bottom: 1.25rem;
}

/* End -> About Us page - Our Responsibility */

/* Start -> About Us - Core Values */

.grid--core-value {
    grid-template-areas:
        '. G_CAP G_CAP G_CAP G_CAP . . . . . . .'
        '. G_TIT G_TIT G_TIT G_TIT . G_CVL G_CVL G_CVL G_CVL G_CVL .'
        '. G_DEC G_DEC G_DEC G_DEC . G_CVL G_CVL G_CVL G_CVL G_CVL .'
        '. . . . . . G_CVL G_CVL G_CVL G_CVL G_CVL .';
}

.value-list {
    grid-area: G_CVL;
}

.value-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 3rem;
}

.value-item img {
    width: 4rem;
    aspect-ratio: 1 / 1;
    transition: all 0.4s;
}

.value-item img:hover {
    transform: scale(1.1,1.1);
}

.value-item .content-container {
    margin-left: 2rem;
}

.value-item .core-value-title {
    font-size: 1.12rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-primary-1);
    margin-bottom: 1rem;
}

.value-item .core-value-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-secondary-1);
}

/* End -> About Us - Core Values */

/* Start -> About us - Quote */

.quote {
    background-color: var(--color-primary-1);
    color: var(--color-tertiary-2);
}

.grid--quote {
    grid-template-areas:
        '. . G_QUO G_QUO G_QUO G_QUO G_QUO G_QUO G_QUO G_QUO . .';
}

.quote .container {
    grid-area: G_QUO;
    position: relative;
}

.quote .container::before {
    content: url(/temp-images/quote.png);
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -35%);
}

.quote .title {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 3rem;
}

.quote .desc {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

/* End -> About us - Quote */

/* Start -> About Us - Statistic */

.grid--statistics {
    grid-template-areas:
        '. G_CAP G_CAP G_CAP G_CAP . . . . . . .'
        '. G_TIT G_TIT G_TIT G_TIT G_TIT G_DEC G_DEC G_DEC G_DEC G_DEC .'
        '. G_AUS G_AUS G_AUS G_AUS G_AUS G_AUS G_AUS G_AUS G_AUS G_AUS .';

    padding: 8rem 0;
}

.stats-list {
    grid-area: G_AUS;
    margin: 3rem 0 1rem 0;
    display: flex;
    justify-content: space-between;
}

.stats-item {
    margin: 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stats-item .value {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-primary-1);
    margin-bottom: 1.5rem;
    transition: all 0.4s;
}

.stats-item .value:hover {
    transform: scale(1.1,1.1);
}

.stats-item .title {
    font-size: 1rem;
    text-align: center;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-secondary-1);
}

/* End -> About Us - Statistic */

/* Start -> About Us - Technologies */

.technology {
    background-color: #FAFBFF;
}

.grid--technology {
    grid-template-areas:
        '. G_CAP G_CAP G_CAP G_CAP . . . . . . .'
        '. G_TIT G_TIT G_TIT G_TIT G_TIT . . . . . .'
        '. G_TEC G_TEC G_TEC G_TEC G_TEC G_TEC G_TEC G_TEC G_TEC G_TEC .';
}

.tech-with-logo-container {
    grid-area: G_TEC;
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
}

.tech-with-logo-container .name {
    font-size: 1rem;
    line-height: 1.4;
    font-weight: bold;
    color: var(--color-primary-2);
    flex-basis: 150px;
}

.tech-with-logo-container-item {
    display: flex;
}

.tech-list {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
}

.tech-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-basis: 7rem;
    margin-bottom: 3rem;
}

.tech-list .tech-item img {
    width: 2.5rem;
    aspect-ratio: 1 / 1;
    margin-bottom: 1rem;
    transition: all 0.4s;
}

.tech-list .tech-item img:hover {
    transform: scale(1.1,1.1);
}

.tech-list .tech-item .tech-name {
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    color: var(--color-primary-2);
}

/* End -> About Us - Technologies */

/* Start -> Media Queries */

/* -- For Mobile -- */
@media screen and (max-width: 480px) {
    
    /* About Us - Statistic */
    .grid--statistics {
        padding: 2rem 0;
    }

    .stats-list {
        flex-wrap: wrap;
    }

    .stats-item {
        flex-basis: 45%;
        margin-bottom: 2rem;
    }
}

/* -- For iPad / Tablets -- */
@media screen and (min-width: 481px) and (max-width: 768px) {

    /* About Us page - Our Responsibility */
    .our-story-image-container img {
        margin: 4rem 0;
        width: 70%;
    }

}

/* -- For Mobile / iPad / Tablets -- */
@media screen and (max-width: 768px) {

    /* About Us page - Our Responsibility */
    .grid--our-story {
        grid-template-areas:
            'G_OVC'
            'G_OVI';
    }

    .our-story-image-container {
        margin: 0;
    }

    .grid--core-value {
        grid-template-areas:
            'G_CAP'
            'G_TIT'
            'G_DEC'
            'G_CVL'
            'G_CTR';
    }

    .value-list {
        margin-top: 1rem;
    }

    .value-item img {
        width: 3rem;
    }

    .value-item .content-container {
        margin-left: 1rem;
    }

    .value-item .core-value-title {
        margin-bottom: .5rem;
    }

    .grid--quote {
        grid-template-areas:
            'G_QUO';
        margin: 2rem 10%;
    }

    .quote .title {
        font-size: 1.7rem;
    }

    .grid--statistics {
        grid-template-areas:
            'G_CAP'
            'G_TIT'
            'G_DEC'
            'G_AUS';
    }

    .stats-list {
        margin: 1.5rem 0;
    }

    .stats-item {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }

    .stats-item .value {
        margin-bottom: 0.7rem;
    }

    .grid--technology {
        grid-template-areas:
            'G_CAP'
            'G_TIT'
            'G_TEC';
    }

    .tech-with-logo-container {
        margin-top: 1rem;
    }

    .tech-with-logo-container .name {
        flex-basis: 0;
        margin-bottom: 3rem;
    }

    .tech-with-logo-container-item {
        flex-direction: column;
    }

}

/* -- For Small Screen / Laptops / Desktops -- */
@media screen and (min-width: 769px) and (max-width: 1150px) {

    /* About us - Quote */
    .grid--quote {
        grid-template-areas:
            '. G_QUO G_QUO G_QUO G_QUO G_QUO G_QUO G_QUO G_QUO G_QUO G_QUO .';
    }

    /* About Us page - Our Responsibility */
    .grid--our-story {
        grid-template-areas:
            'G_OVI G_OVI G_OVI G_OVI G_OVI G_OVI G_OVC G_OVC G_OVC G_OVC G_OVC G_OVC';
    }

    /* About Us - Core Values */
    .grid--core-value {
        grid-template-areas:
            'G_CAP G_CAP G_CAP G_CAP G_CAP . . . . . . .'
            'G_TIT G_TIT G_TIT G_TIT G_TIT . G_CVL G_CVL G_CVL G_CVL G_CVL G_CVL'
            'G_DEC G_DEC G_DEC G_DEC G_DEC . G_CVL G_CVL G_CVL G_CVL G_CVL G_CVL'
            '. . . . . . G_CVL G_CVL G_CVL G_CVL G_CVL G_CVL';
    }

    /* About Us - Statistic */
    .grid--statistics {
        grid-template-areas:
            'G_CAP G_CAP G_CAP G_CAP G_CAP . . . . . . .'
            'G_TIT G_TIT G_TIT G_TIT G_TIT G_TIT G_DEC G_DEC G_DEC G_DEC G_DEC G_DEC'
            'G_AUS G_AUS G_AUS G_AUS G_AUS G_AUS G_AUS G_AUS G_AUS G_AUS G_AUS G_AUS';

        padding: 6rem 0;
    }

    /* About Us - Technologies */
    .grid--technology {
        grid-template-areas:
            'G_CAP G_CAP G_CAP G_CAP G_CAP . . . . . . .'
            'G_TIT G_TIT G_TIT G_TIT G_TIT G_TIT . . . . . .'
            'G_TEC G_TEC G_TEC G_TEC G_TEC G_TEC G_TEC G_TEC G_TEC G_TEC G_TEC G_TEC';
    }

}

/* -- For Large Screen / Mac -- */
@media screen and (min-width: 1151px) and (max-width: 1440px) {


}