/*ABOUT====================*/

/*ABOUT-CONTENT====================*/
.about-content .sc-inner {
    display: flex;
    flex-direction: column;
    grid-gap: var(--spacing-100);
}

.about-content .body {
    display: grid;
    grid-template-columns: min(31.8287037037vw, 559px) 1fr min(
            48.03240740741vw,
            830px
        );
    grid-auto-rows: min-content;
}

.about-content .body .text-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.about-content .body img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.about-content .text {
    padding-bottom: var(--spacing-100);
}

.about-content .image-with-text {
    position: relative;
    width: 100%;
}

.about-content .image-description .image-with-text > h3 {
    position: absolute;
    right: max(8.5867620751%, var(--spacing-16));
    bottom: max(12.2388059701%, var(--spacing-12));
    text-align: right;
}

.about-content .description-text {
    margin-top: var(--spacing-30);
}

.about-content .description-text.short-width {
    width: 43.9759036145%;
}

.about-content .body .images-grid {
    grid-row: span 2;
}

.about-content .body .images-grid .grid {
    display: grid;
    grid-gap: var(--spacing-10);
    grid-template-columns: 67.3493975904% 31.4457831325%;
    grid-template-rows: min(63.8005159071%, 371px) min(34.3938091144%, 200px);
}

.about-content .body .images-grid .grid .image-with-text {
    grid-row: span 2;
}

.about-content .images-grid .image-with-text > h3 {
    position: absolute;
    left: max(7.1556350626%, var(--spacing-16));
    top: max(5.366726297%, var(--spacing-12));
    text-align: left;
}

.about-content .footer {
    display: flex;
    grid-gap: var(--spacing-10);
}

.about-content .footer .comp-1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 21.6180371353%;
}

.about-content .footer .comp-1 p {
    width: 80.06134969325%;
    text-wrap: balance;
}

.about-content .footer .comp-1 .images {
    display: flex;
    flex-direction: column;
    grid-gap: var(--spacing-10);
}

.about-content .footer .comp-1 .images img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.about-content .footer .comp-2 {
    width: 54.774535809%;
    flex: 1;
    display: flex;
    grid-gap: var(--spacing-10);
    height: 486px;
}

.about-content .footer .comp-2 img {
    width: auto;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.about-content .footer .comp-2 img:nth-of-type(1) {
    width: 50.24213075065%;
}

.about-content .footer .comp-2 img:nth-of-type(2) {
    width: 32.6876513317%;
}

.about-content .footer .comp-3 {
    width: 32.6876513317%;
}

@media (max-width: 991px) {
    /*ABOUT-CONTENT====================*/
    .about-content .sc-inner {
        grid-gap: var(--spacing-50);
    }

    .about-content .description-text {
        margin-top: var(--spacing-16);
    }
    .about-content .description-text.short-width {
        width: 100%;
    }

    .about-content .body {
        grid-template-columns: 100%;
        text-align: center;
        grid-gap: var(--spacing-50);
    }

    .about-content .text {
        padding-bottom: 0;
        height: fit-content;
    }

    .about-content .body .text-content {
        width: 100%;
    }

    .about-content .image-description .image-with-text > h3 {
        right: unset;
        bottom: unset;
        left: max(4.1025641026vw, var(--spacing-16));
        top: max(4.1025641026vw, var(--spacing-16));
        text-align: left;
    }

    .about-content .body .images-grid {
        width: 100%;
        grid-row: unset;
    }

    .about-content .body .images-grid .grid {
        grid-gap: 0.25rem;
    }

    .about-content .images-grid .image-with-text > h3 {
        left: max(4.1025641026vw, var(--spacing-16));
        top: max(4.1025641026vw, var(--spacing-16));
    }

    .about-content .footer {
        flex-direction: column;
        text-align: center;
        grid-gap: var(--spacing-50);
    }

    .about-content .footer .comp-1 {
        width: 100%;
    }

    .about-content .footer .comp-1 p {
        width: 100%;
        text-wrap: wrap;
    }

    .about-content .footer .comp-2 {
        width: 100%;
        grid-gap: unset;
        justify-content: space-between;
    }

    .about-content .footer .comp-2 img {
        height: auto;
    }

    .about-content .footer .comp-2 img:nth-of-type(1) {
        width: 66.8571428571%;
    }

    .about-content .footer .comp-2 img:nth-of-type(2) {
        width: 32.2857142857%;
    }

    .about-content .footer .comp-3 {
        width: 100%;
    }
}

/* HORIZONTAL SCROLL==================== */
.screen-width {
    width: 100vw;
    overflow-x: hidden;
}

/* HORIZONTAL SCROLL SECTION */
.horizontal-scroll-sc {
    --line-top-position: 50%;
    --section-gap: min(14.7569444444vw, 250px);
    --margin-left: 0;
    --margin-right: 0;
    --header-top: min(16.6338582677vh, 70px);
    --arrow-panel-width: 0;
    --scroll-arrow-left: calc(
        100vw - var(--margin-right) - var(--arrow-panel-width)
    );
    height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-wrap: nowrap;
    width: fit-content;
    grid-gap: var(--section-gap);
}

.horizontal-scroll-sc::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--margin-left);
    width: 100%;
    height: calc(var(--line-top-position));
    border-bottom: var(--border);
    z-index: -1;
}

.horizontal-scroll-sc.in-progress::before {
    left: 0;
}

.horizontal-scroll-sc .scroll-arrows {
    position: absolute;
    top: var(--header-top);
    left: var(--scroll-arrow-left);
    z-index: 100;
    display: flex;
    align-items: center;
    grid-gap: var(--spacing-36);
    transition: var(--duration) var(--timing-function);
    z-index: 10;
    user-select: none;
}

.horizontal-scroll-sc .scroll-arrows .angle {
    cursor: pointer;
    font-size: var(--icon-size-32);
}

.horizontal-scroll-sc .scroll-arrows > p {
    text-wrap: nowrap;
    order: -1;
}

.horizontal-scroll-sc .title {
    position: absolute;
    top: var(--header-top);
    left: var(--margin-left);
    transition: var(--duration) var(--timing-function);
    opacity: 0;
    z-index: 10;
}

.title.active {
    opacity: 1;
}

.horizontal-scroll-sc .horizontal-scroll-content {
    width: 100vw;
    height: 100%;
    position: relative;
}

@media (max-width: 991px) {
    .horizontal-scroll-sc {
        --section-gap: 25.641025641vw;
    }

    /* ANGLE PANEL */
    .horizontal-scroll-sc .scroll-arrows {
        top: unset;
        right: unset;
        left: 50vw;
        top: 90.4320987654vh;
        transform: translateX(-50%);
        grid-gap: var(--spacing-24);
    }

    .horizontal-scroll-sc .scroll-arrows .angle {
        font-size: var(--icon-size-20);
    }

    .horizontal-scroll-sc .scroll-arrows > p {
        order: 0;
    }

    /* HORIZONTAL SCROLL SECTION */
    .horizontal-scroll-sc .title {
        text-align: center;
        top: min(16.5876777251vh, 140px);
        left: 50vw;
        transform: translateX(-50%);
    }
}

@media (max-width: 389px) {
    /* HORIZONTAL SCROLL SECTION */
    .horizontal-scroll-sc .title {
        top: min(9.8765432099vh, 80px);
    }
}

/* TEMPLATES ==================== */
.horizontal-scroll-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.horizontal-scroll-content:first-of-type {
    margin-left: var(--margin-left);
}

@media (min-width: 992px) and (max-width: 1440px) {
    .horizontal-scroll-content > * {
        transform: scale(0.9);
        transform-origin: top left;
    }
}

@media (min-aspect-ratio: 1728/1117) {
    .horizontal-scroll-content > * {
        transform: scale(0.9);
        transform-origin: top left;
    }
}

@media (max-height: 768px) {
    /* .horizontal-scroll-sc {
        --line-top-position: 55%;
    } */

    .horizontal-scroll-content > * {
        transform: scale(0.8);
        transform-origin: top left;
    }
}

/* TEMPLATE 1 */
.horizontal-scroll-content.template-1 {
    width: 55.1388888889vw;
    position: relative;
}

.horizontal-scroll-content.template-1 .center {
    position: absolute;
    top: calc(
        var(--line-top-position) - (0.8680555556vw + (22.3958333333vw / 2))
    );
    left: 0;
}

.template-1 .wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    width: fit-content;
}

.template-1 .wrapper > p {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-100%);
}

.template-1 .images {
    display: flex;
    position: relative;
    width: fit-content;
    margin-top: 0.8680555556vw;
}

.template-1 .content-image:nth-of-type(1) {
    margin-top: 2.8935185185vw;
    width: 20.1967592593vw;
    height: 14.4097222222vw;
}

.template-1 .content-image:nth-of-type(2) {
    width: 25.7523148148vw;
    height: 22.3958333333vw;
}

.template-1 .content-image:nth-of-type(3) {
    width: 16.4351851852vw;
    height: 10.3009259259vw;
    right: -0.8680555556vw;
    bottom: -2.8935185185vw;
    position: absolute;
}

@media (max-width: 991px) {
    .horizontal-scroll-content.template-1 {
        width: 75.641025641vw;
    }

    .horizontal-scroll-content.template-1 .center {
        top: calc(
            var(--line-top-position) - (6.4102564103vw + (42.3076923077vw / 2))
        );
    }

    .template-1 .images {
        margin-top: 6.4102564103vw;
    }

    .template-1 .content-image:nth-of-type(1) {
        margin-top: 2.8935185185vw;
        width: 33.07692307692vw;
        height: 23.5897435897vw;
    }

    .template-1 .content-image:nth-of-type(2) {
        width: 42.3076923077vw;
        height: 36.9230769231vw;
    }

    .template-1 .content-image:nth-of-type(3) {
        width: 26.9230769231vw;
        height: 16.9230769231vw;
    }
}

/* TEMPLATE 2 ADD */
.horizontal-scroll-content.template-2 {
    width: 35.8796296296vw;
    height: 100%;
}

.horizontal-scroll-content.template-2 .wrapper {
    display: flex;
    flex-direction: column;
    grid-gap: 1.1574074074vw;
    width: fit-content;
    position: absolute;
    top: calc(var(--line-top-position) - (11.4583333333vw / 2));
    right: 0;
}

.template-2 .images {
    display: flex;
    height: 11.4583333333vw;
}

.template-2 .content-image:nth-of-type(1) {
    width: 19.7916666667vw;
    height: 100%;
}

.template-2 .content-image:nth-of-type(2) {
    width: 16.08796296296vw;
    height: 100%;
}

.template-2 .text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right;
    width: calc(19.7916666667vw + 16.08796296296vw);
    text-wrap: balance;
}

.template-2 .text > p {
    width: 51.6129032258%;
}

@media (max-width: 991px) {
    .horizontal-scroll-content.template-2 {
        width: 59.1871794872vw;
    }

    .horizontal-scroll-content.template-2 .wrapper {
        top: calc(var(--line-top-position) - (18.7179487179vw / 2));
        grid-gap: 1.8846153846vw;
    }

    .template-2 .images {
        height: 18.7179487179vw;
    }

    .template-2 .content-image:nth-of-type(1) {
        width: 32.5641025641vw;
        height: 100%;
    }

    .template-2 .content-image:nth-of-type(2) {
        width: 26.4102564103vw;
        height: 100%;
    }

    .template-2 .text {
        flex-direction: column;
        justify-content: unset;
        align-items: start;
        text-align: left;
        width: calc(32.5641025641vw + 26.4102564103vw);
    }

    .template-2 .text > p {
        width: 100%;
    }
}

/* TEMPLATE 3 */
.horizontal-scroll-content.template-3 {
    width: 35.8796296296vw;
    height: 100%;
}

.horizontal-scroll-content.template-3 .center {
    width: 29.2824074074vw;
    position: absolute;
    top: calc(var(--line-top-position) - (11.4583333333vw / 2));
    left: 0;
}

.horizontal-scroll-content.template-3 .wrapper {
    width: 100%;
    position: relative;
}

.horizontal-scroll-content.template-3 .wrapper > h1 {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-100%);
}

.horizontal-scroll-content.template-3 .wrapper .content-image:nth-of-type(1) {
    width: 100%;
    height: 19.03935185185vw;
}

.horizontal-scroll-content.template-3 .wrapper .content-image:nth-of-type(2) {
    width: 18.75vw;
    height: 12.3842592593vw;
    position: absolute;
    top: 14.9884259259vw;
    left: 17.1296296296vw;
    z-index: -1;
}

.horizontal-scroll-content.template-3 .wrapper .description {
    width: 50%;
    margin-top: 1.7361111111vw;
}

@media (max-width: 991px) {
    .horizontal-scroll-content.template-3 {
        width: 58.9743589744vw;
    }

    .horizontal-scroll-content.template-3 .center {
        width: 48.2051282051vw;
        top: calc(var(--line-top-position) - (18.7179487179vw / 2));
    }

    .horizontal-scroll-content.template-3
        .wrapper
        .content-image:nth-of-type(1) {
        width: 100%;
        height: 31.2820512821vw;
    }

    .horizontal-scroll-content.template-3
        .wrapper
        .content-image:nth-of-type(2) {
        width: 30.7692307692vw;
        height: 20.2564102564vw;
        top: 24.6153846154vw;
        left: 28.2051282051vw;
    }

    .horizontal-scroll-content.template-3 .wrapper .description {
        width: 122.3404255319%;
        margin-top: 15.3846153846vw;
    }
}

/* TEMPLATE 4 */
.horizontal-scroll-content.template-4 {
    width: 20.1967592593vw;
    height: 100%;
}

.horizontal-scroll-content.template-4 .center {
    width: 100%;
    position: absolute;
    top: calc(var(--line-top-position) - 5.03472222222vw);
    left: 50%;
    transform: translateX(-50%);
}

.horizontal-scroll-content.template-4 .center .wrapper {
    width: 100%;
    position: relative;
}

.horizontal-scroll-content.template-4 .center .wrapper .content-image {
    width: 100%;
    height: 16.4351851852vw;
    position: relative;
}

.horizontal-scroll-content.template-4 .center .wrapper .content-image > h1 {
    position: absolute;
    top: 2.7199074074vw;
    left: 0;
    transform: translateX(-45%);
}

.horizontal-scroll-content.template-4 .center .wrapper > .description {
    width: 100%;
    margin-top: 1.7361111111vw;
}

@media (max-width: 991px) {
    .horizontal-scroll-content.template-4 {
        width: 42.05128205128vw;
    }

    .horizontal-scroll-content.template-4 .center .wrapper .content-image {
        width: 33.07692307692vw;
        height: 26.9230769231vw;
    }
}

/* TEMPLATE 5 */
.horizontal-scroll-content.template-5 {
    width: 96.5277777778vw;
    height: 100%;
}

.horizontal-scroll-content.template-5 .center {
    width: 59.4907407407vw;
    position: absolute;
    left: 17.01388888889vw;
    top: calc(var(--line-top-position) - (12.5vw / 2));
}

.horizontal-scroll-content.template-5 .center .wrapper {
    width: 100%;
    position: relative;
}

.horizontal-scroll-content.template-5 .center .wrapper > * {
    position: absolute;
    z-index: 10;
}

.horizontal-scroll-content.template-5 .center .wrapper .template-title {
    left: 12.5vw;
    top: -1.7361111111vw;
    transform: translateY(-100%);
    display: flex;
}

.horizontal-scroll-content.template-5
    .center
    .wrapper
    .template-title
    .description {
    width: 20.8912037037vw;
}

.horizontal-scroll-content.template-5 .center .wrapper > .description1 {
    width: 15.2777777778vw;
    text-align: end;
    top: 9.9537037037vw;
    left: -1.7361111111vw;
    transform: translateX(-100%);
}

.horizontal-scroll-content.template-5 .center .wrapper > .description2 {
    width: min(13.2523148148vw, 229px);
    bottom: -1.7361111111vw;
    left: 27.4884259259vw;
    transform: translateY(100%);
}

.horizontal-scroll-content.template-5 .center .wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.horizontal-scroll-content.template-5 .wrapper .content-image-1 {
    width: 16.4351851852vw;
    height: 10.3009259259vw;
    left: -5.9027777778vw;
    top: -1.7361111111vw;
}

.horizontal-scroll-content.template-5 .wrapper .content-image-2 {
    width: 19.2708333333vw;
    height: 14.4675925926vw;
    left: 5.9027777778vw;
    bottom: 2.7199074074vw;
    transform: translateY(100%);
}

.horizontal-scroll-content.template-5 .wrapper .content-image-3 {
    position: static;
    width: 100%;
    height: 12.5vw;
}

.horizontal-scroll-content.template-5 .wrapper .content-image-4 {
    width: 17.7662037037vw;
    height: 10.5324074074vw;
    right: 5.3240740741vw;
    top: 9.9537037037vw;
    transform: translateX(100%);
}

.horizontal-scroll-content.template-5 .wrapper .content-image-5 {
    width: 18.287037037vw;
    height: 14.8148148148vw;
    right: -1.73611111111vw;
    bottom: 0;
    transform: translateX(100%);
}

@media (max-width: 991px) {
    .horizontal-scroll-content.template-5 {
        width: 140.7692307692vw;
    }

    .horizontal-scroll-content.template-5 .center {
        width: 97.9487179487vw;
        position: absolute;
        left: 9.7435897436vw;
        top: calc(var(--line-top-position) - (20.5128205128vw / 2));
    }

    .horizontal-scroll-content.template-5 .center .wrapper .template-title {
        left: -9.7435897436vw;
        top: -10.5128205128vw;
        transform: translateY(-100%);
        display: flex;
    }

    .horizontal-scroll-content.template-5
        .center
        .wrapper
        .template-title
        .description {
        width: min(85.8974358974vw, 435px);
    }

    .horizontal-scroll-content.template-5 .center .wrapper > .description1 {
        width: min(60.2564102564vw, 235px);
        top: 43.07692307692vw;
        bottom: unset;
        left: -9.7435897436vw;
        transform: translateX(0);
    }

    .horizontal-scroll-content.template-5 .center .wrapper > .description2 {
        width: min(56.1538461538vw, 229px);
        top: 43.07692307692vw;
        bottom: unset;
        left: 63.5897435897vw;
        transform: translateY(0);
    }

    .horizontal-scroll-content.template-5 .wrapper .content-image-1 {
        width: 26.9230769231vw;
        height: 16.9230769231vw;
        left: -9.7435897436vw;
        top: -3.4358974359vw;
    }

    .horizontal-scroll-content.template-5 .wrapper .content-image-2 {
        width: 31.5384615385vw;
        height: 23.8461538462vw;
        left: 10.6923076923vw;
        bottom: 4.4871794872vw;
    }

    .horizontal-scroll-content.template-5 .wrapper .content-image-3 {
        position: static;
        width: 100%;
        height: 20.5128205128vw;
    }

    .horizontal-scroll-content.template-5 .wrapper .content-image-4 {
        width: 29.2307692308vw;
        height: 17.1794871795vw;
        right: 8.7179487179vw;
        top: 16.4102564103vw;
    }

    .horizontal-scroll-content.template-5 .wrapper .content-image-5 {
        width: 30vw;
        height: 24.358974359vw;
        right: -3vw;
    }
}

/* TEMPLATE 6 */
.horizontal-scroll-content.template-6 {
    width: min(51.7563657407vw, 895px);
    height: 100%;
}

.horizontal-scroll-content.template-6 .center {
    width: 100%;
    position: absolute;
    top: calc(var(--line-top-position) - min(11vw, 200px));
    left: 0;
}

.horizontal-scroll-content.template-6 .center .wrapper {
    width: 100%;
    position: relative;
}

.horizontal-scroll-content.template-6 .center .wrapper .logos-flex {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: min(9.9537037037vw, 172px);
}

/* .horizontal-scroll-content.template-6 .center .wrapper .logos-flex img {
    max-width: min(13.8310185185vw, 239px);
    width: auto;
    object-fit: contain;
    object-position: center;
    height: 100%;
} */

.horizontal-scroll-content.template-6 .center .wrapper .logos-flex img {
    width: 100%;
    object-fit: contain;
    object-position: center;
    height: 100%;
}

.horizontal-scroll-content.template-6 .center .wrapper > h1 {
    margin-top: min(5.8449074074vw, 101px);
}

.horizontal-scroll-content.template-6 .center .wrapper .description {
    width: 31.5393518519vw;
    margin-top: min(3.3564814815vw, 58px);
}

@media (max-width: 991px) {
    .horizontal-scroll-content.template-6 {
        width: 85.1282051282vw;
    }

    .horizontal-scroll-content.template-6 .center {
        top: calc(var(--line-top-position) - 20vw);
    }

    .horizontal-scroll-content.template-6 .center .wrapper .logos-flex {
        height: 16.4102564103vw;
    }

    .horizontal-scroll-content.template-6 .center .wrapper > h1 {
        margin-top: 11.7948717949vw;
    }

    .horizontal-scroll-content.template-6 .center .wrapper .description {
        width: 100%;
        margin-top: 3.8461538462vw;
    }
}

/* TEMPLATE 7 */
.horizontal-scroll-content.template-7 {
    width: min(43.5763888889vw, 753px);
    height: 100%;
    --align-top: calc(var(--line-top-position) - 7.349537037vw);
}

.horizontal-scroll-content.template-7 .wrapper {
    position: absolute;
    top: var(--align-top);
    left: 0;
    display: flex;
    grid-gap: 1.7361111111vw;
    align-items: end;
}

.horizontal-scroll-content.template-7 .wrapper .image {
    width: min(27.6041666667vw, 477px);
    height: min(22.9166666667vw, 396px);
    position: relative;
}

.horizontal-scroll-content.template-7 .wrapper .image > h1 {
    position: absolute;
    left: 2.2569444444vw;
    bottom: 0.33vw;
}

.horizontal-scroll-content.template-7 .wrapper .description {
    width: min(14.2361111111vw, 246px);
}

@media (max-width: 991px) {
    .horizontal-scroll-content.template-7 {
        width: 45.641025641vw;
        --align-top: calc(var(--line-top-position) - 12.05128205128vw);
    }

    .horizontal-scroll-content.template-7 .wrapper {
        width: 100%;
        grid-gap: 1.7948717949vw;
        flex-direction: column;
        align-items: start;
    }

    .horizontal-scroll-content.template-7 .wrapper .image {
        width: 100%;
        height: 37.6923076923vw;
        position: relative;
    }

    .horizontal-scroll-content.template-7 .wrapper .description {
        width: 100%;
    }
}

/* TEMPLATE 8 */
.horizontal-scroll-content.template-8 {
    width: 28.7037037037vw;
    height: 100%;
    --align-top: calc(var(--line-top-position) - 11vw);
}

.horizontal-scroll-content.template-8 .wrapper {
    position: absolute;
    top: var(--align-top);
    right: 0;
    display: flex;
    flex-direction: column;
    grid-gap: 1.7361111111vw;
    width: min(28.7037037037vw, 496px);
}

.horizontal-scroll-content.template-8 .image {
    width: 100%;
    height: min(30.09259259259vw, 520px);
    position: relative;
}

.horizontal-scroll-content.template-8 .image > h1 {
    position: absolute;
    left: 3.1828703704vw;
    top: 0;
    transform: translateY(-50%);
    vertical-align: middle;
}

@media (max-width: 991px) {
    .horizontal-scroll-content.template-8 {
        width: 47.1794871795vw;
        --align-top: calc(var(--line-top-position) - 17.9487179487vw);
    }

    .horizontal-scroll-content.template-8 .wrapper {
        width: 100%;
    }

    .horizontal-scroll-content.template-8 .image {
        height: 49.4871794872vw;
    }
}