/* CSS reset */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    font: inherit;
}

html {
    font-size: 16px;
}

body {
    min-height: 100vh;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}

/* Colors */

:root {
    --blue-900: rgb(11, 13, 23);
    --blue-300: rgb(208, 214, 249);
    --bg-nav-menu: rgba(255, 255, 255, 0.05);
    --black: rgb(0, 0, 0);
    --white: rgb(255, 255, 255);
}

/* Utilities */

/* Typography */

.main-nav-item a:link,
.main-nav-item a:visited,
.main-nav-item a:hover,
.main-nav-item a:active {
    color: var(--white);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    text-decoration: none;

    .number {
        font-weight: 700;
        letter-spacing: 0.16875rem;
    }
}

.destination .tab-button {
    color: var(--blue-300);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.13125rem;
    text-transform: uppercase;
    transition: color .3s ease-in-out;

    @media screen and (min-width: 768px) {
        font-size: 1rem;
        letter-spacing: 0.125rem;
    }

    &.active {
        color: var(--white);
    }
}

.technology .tab-button {
    color: var(--blue-300);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "Bellefair", sans-serif;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    transition: color .3s ease-in-out;

    @media screen and (min-width: 768px) {
        font-size: 1.5rem;

        @media screen and (min-width: 1200px) {
            font-size: 2rem;
        }
    }

    &.active {
        color: var(--white);
    }
}

.heading-1 {
    .headline {
        color: var(--white);
        text-align: center;
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: "Bellefair", serif;
        font-size: 5rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: uppercase;

        @media screen and (min-width: 768px) {
            font-size: 9rem;

            @media screen and (min-width: 1200px) {
                text-align: left;
            }
        }
    }

    .eyebrow {
        color: var(--blue-300);
        text-align: center;
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: "Barlow Condensed", sans-serif;
        font-size: 1rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.15rem;
        text-transform: uppercase;

        @media screen and (min-width: 768px) {
            font-size: 1.75rem;
            letter-spacing: 0.25rem;

            @media screen and (min-width: 1200px) {
                text-align: left;
            }
        }
    }
}

.heading-2 {
    color: var(--white);
    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "Bellefair", serif;
    font-size: 3.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;

    @media screen and (min-width: 768px) {
        font-size: 5rem;

        @media screen and (min-width: 1200px) {
            font-size: 6rem;
            text-align: left;
        }
    }
}

.heading-3 {
    color: var(--white);
    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "Bellefair", serif;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;

    @media screen and (min-width: 1200px) {
        text-align: left;
    }

    .crew-role {
        font-size: 1.125rem;

        @media screen and (min-width: 768px) {
            font-size: 1.5rem;

            @media screen and (min-width: 1200px) {
                font-size: 2rem;
            }
        }
    }

    .crew-name {
        font-size: 1.5rem;

        @media screen and (min-width: 768px) {
            font-size: 2.5rem;

            @media screen and (min-width: 1200px) {
                font-size: 3.5rem;
            }
        }
    }
}

.heading-4 {
    .eyebrow {
        color: rgb(from var(--white) r g b / 0.5042);
        text-align: center;
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: "Bellefair", serif;
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: uppercase;

        @media screen and (min-width: 768px) {
            font-size: 1.5rem;

            @media screen and (min-width: 1200px) {
                font-size: 2rem;
                text-align: left;
            }
        }
    }

    .technology-tab-title {
        color: var(--white);
        text-align: center;
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: "Bellefair", serif;
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: uppercase;

        @media screen and (min-width: 768px) {
            font-size: 2.5rem;

            @media screen and (min-width: 1200px) {
                font-size: 3.5rem;
                text-align: left;
            }
        }
    }
}

.regular-paragraph {
    color: var(--blue-300);
    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "Barlow", sans-serif;
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;

    @media screen and (min-width: 768px) {
        font-size: 1rem;

        @media screen and (min-width: 1200px) {
            font-size: 1.125rem;
            text-align: left;
        }
    }
}

.destination-kicker,
.crew-kicker,
.technology-kicker {
    color: var(--white);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "Barlow Condensed", sans-serif;
    font-style: normal;
    line-height: normal;

    .destination-kicker-number,
    .crew-kicker-number,
    .technology-kicker-number {
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.15rem;

        @media screen and (min-width: 768px) {
            font-size: 1.25rem;
            letter-spacing: 0.1875rem;

            @media screen and (min-width: 1200px) {
                font-size: 1.75rem;
                letter-spacing: 0.29531rem;
            }
        }
    }

    .destination-kicker-text,
    .crew-kicker-text,
    .technology-kicker-text {
        font-size: 1rem;
        font-weight: 400;
        letter-spacing: 0.15rem;
        text-transform: uppercase;

        @media screen and (min-width: 768px) {
            font-size: 1.25rem;
            letter-spacing: 0.1875rem;

            @media screen and (min-width: 1200px) {
                font-size: 1.75rem;
                letter-spacing: 0.25rem;
            }
        }
    }
}

.hero-cta-button:link,
.hero-cta-button:visited,
.hero-cta-button:active {
    color: var(--blue-900);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "Bellefair", serif;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .3s ease-in-out;

    @media screen and (min-width: 768px) {
        font-size: 2rem;
    }
}

.hero-cta-button:hover {
    color: hsl(from var(--blue-900) h s l / 0.5);
}

.stat-title {
    color: var(--blue-300);
    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.125rem;
    text-transform: uppercase;

    @media screen and (min-width: 1200px) {
        text-align: left;
    }
}

.stat-value {
    color: var(--white);
    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "Bellefair", serif;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;

    @media screen and (min-width: 1200px) {
        text-align: left;
    }
}

/* Main styles */

html,
body {
    overflow-x: hidden;
}

body {
    position: relative;

    background-color: var(--blue-900);
}

main {
    padding-top: 88px;

    overflow-y: hidden;

    @media screen and (min-width: 768px) {
        padding-top: 96px;

        @media screen and (min-width: 1200px) {
            padding-top: unset;
        }
    }

    &:has(.hero) {
        @media screen and (min-width: 1200px) {
            padding-top: 136px;
        }
    }

    &:has(.technology) {
        @media screen and (min-width: 1200px) {
            padding-bottom: 50px;
        }
    }
}

section {
    width: 100%;

    display: flex;
    justify-content: center;
}

/* Header styles */

.site-header {
    width: 100%;
    height: 88px;
    padding: 0 6.4%;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;

    display: flex;
    justify-content: space-between;
    align-items: center;

    @media screen and (min-width: 768px) {
        height: 96px;
        padding: 0;

        @media screen and (min-width: 1200px) {
            width: 100%;

            position: fixed;
            top: 40px;
            z-index: 10;
        }
    }

    .site-header-left {
        @media screen and (min-width: 768px) {
            margin-left: 5.21%;
        }

        .logo-wrapper {
            width: 40px;
            height: 40px;

            @media screen and (min-width: 768px) {
                width: 48px;
                height: 48px;
            }
        }
    }

    .site-header-right {
        @media screen and (min-width: 768px) {
            width: 83.334%;
            height: 100%;

            @media screen and (min-width: 1200px) {
                width: 51.11%;

                position: relative;
            }
        }

        &::before {
            @media screen and (min-width: 1200px) {
                width: 76.09%;
                height: 1px;

                content: "";

                position: absolute;
                top: 50%;
                right: 100%;
                transform: translate(32px, -50%);
                z-index: 20;

                background-color: hsl(from var(--white) h s l / 0.25);
            }
        }

        .main-nav {
            width: 67.73%;
            height: 100vh;
            padding: 32px 0 32px 32px;


            background: var(--bg-nav-menu);
            backdrop-filter: blur(40px);

            display: flex;
            flex-direction: column;
            gap: 80px;

            position: absolute;
            top: 0;
            right: 0;
            transform: translateX(100%);
            transition: transform .5s ease-in-out;

            @media screen and (min-width: 768px) {
                width: 100%;
                height: 100%;
                padding: 0;

                display: block;

                position: unset;
                transform: unset;
            }

            &.open {
                transform: translateX(0);
            }

            .menu-close-button {
                width: 24px;
                height: 21px;
                margin-right: 24px;

                background-color: transparent;
                border: none;

                align-self: flex-end;

                @media screen and (min-width: 768px) {
                    display: none;
                }
            }

            ul {
                list-style-type: none;

                display: flex;
                flex-direction: column;
                gap: 32px;

                @media screen and (min-width: 768px) {
                    width: 100%;
                    height: 100%;
                    padding: 0 6.25% 0 0;

                    flex-direction: row;
                    justify-content: flex-end;
                    gap: 48px;
                }

                .main-nav-item {
                    position: relative;

                    display: flex;
                    align-items: center;

                    @media screen and (min-width: 768px) {
                        height: 100%;
                    }

                    &::after {
                        width: 4px;
                        height: 100%;

                        content: "";

                        position: absolute;
                        top: 0;
                        right: 0;

                        background-color: transparent;
                        transition: background-color .3s ease-in-out;

                        @media screen and (min-width: 768px) {
                            width: 100%;
                            height: 4px;

                            top: unset;
                            bottom: 0;
                            left: 0;
                            right: unset;
                        }
                    }

                    &:hover::after {
                        background-color: hsl(from var(--white) h s l / 0.5);
                    }

                    &.current::after {
                        background-color: var(--white);
                    }

                    .nav-link {
                        display: flex;
                        gap: 12px;

                        @media screen and (min-width: 768px) {
                            height: 100%;

                            display: flex;
                            align-items: center;
                        }

                        span {
                            display: block;
                        }
                    }
                }
            }
        }

        .mobile-menu-button {
            width: 24px;
            height: 21px;

            background-color: transparent;
            border: none;

            @media screen and (min-width: 768px) {
                display: none;
            }
        }
    }
}

/* Page Home styles */

.page-home {
    background-image: url(../images/home/background-home-mobile.jpg);
    background-size: cover;
    background-repeat: no-repeat;

    @media screen and (min-width: 768px) {
        background-image: url(../images/home/background-home-tablet.jpg);

        @media screen and (min-width: 1200px) {
            background-image: url(../images/home/background-home-desktop.jpg);
        }
    }
}

.hero {
    @media screen and (min-width: 1200px) {
        min-height: calc(100vh - 136px);

        display: flex;
        align-items: flex-end;
    }

    .content-wrapper {
        width: 87.2%;
        padding: 24px 0;

        @media screen and (min-width: 768px) {
            width: 66.67%;
            max-width: 620px;
            padding: 128px 0;

            @media screen and (min-width: 1200px) {
                width: 76.39%;
                max-width: 1110px;
                height: 100%;

                display: flex;
                justify-content: space-between;
            }
        }

        >* {
            @media screen and (min-width: 1200px) {
                width: 100%;
                max-width: 540px;
            }
        }

        .hero-content {
            display: flex;
            flex-direction: column;
            gap: 24px;

            .heading-1 {
                display: flex;
                flex-direction: column;
                gap: 24px;

                span {
                    width: 100%;

                    display: block;
                }
            }
        }

        .hero-cta {
            padding: 119px 0;

            display: flex;
            justify-content: center;

            @media screen and (min-width: 768px) {
                padding: 66px 0;

                @media screen and (min-width: 1200px) {
                    padding: 35.5px 0;
                    justify-content: flex-end;
                }
            }

            .hero-cta-button {
                width: 144px;
                height: 144px;

                position: relative;

                display: flex;
                justify-content: center;
                align-items: center;

                border-radius: 50%;
                background-color: var(--white);

                @media screen and (min-width: 768px) {
                    width: 272px;
                    height: 272px;
                }

                &::after {
                    width: calc(100% + 176px);
                    height: calc(100% + 176px);

                    opacity: 0;
                    transition: opacity .5s ease-in-out;

                    content: "";

                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);

                    border-radius: 50%;
                    background-color: hsl(from var(--white) h s l / 0.1);
                }

                &:hover {
                    &::after {
                        opacity: 1;
                    }
                }
            }
        }
    }
}

/* Page Destination styles */

.page-destination {
    background-image: url(../images/destination/background-destination-mobile.jpg);
    background-size: cover;
    background-repeat: no-repeat;

    @media screen and (min-width: 768px) {
        background-image: url(../images/destination/background-destination-tablet.jpg);

        @media screen and (min-width: 1200px) {
            background-image: url(../images/destination/background-destination-desktop.jpg);
        }
    }
}

.destination {
    .content-wrapper {
        width: 87.2%;
        padding: 24px 0;

        display: flex;
        flex-direction: column;
        gap: 24px;

        @media screen and (min-width: 768px) {
            width: 89.58%;
            max-width: 688px;
            padding: 40px 0;

            @media screen and (min-width: 1200px) {
                width: 78%;
                max-width: 1110px;
                margin-top: 136px;
                padding: 48px 0;
            }
        }

        .destination-header {
            .destination-kicker {
                display: flex;
                justify-content: center;
                gap: 24px;

                @media screen and (min-width: 768px) {
                    justify-content: flex-start;
                }

                .destination-kicker-number {
                    opacity: .25;
                }
            }
        }

        .tabs {
            display: flex;
            flex-direction: column;
            gap: 32px;

            @media screen and (min-width: 1200px) {
                height: 734px;

                flex-direction: row;
            }

            >* {
                @media screen and (min-width: 1200px) {
                    flex: 1;
                }
            }

            .tab-images {
                height: 203px;

                position: relative;

                @media screen and (min-width: 768px) {
                    height: 384px;

                    @media screen and (min-width: 1200px) {
                        height: 100%;
                    }
                }

                .tab-image {
                    width: 100%;
                    height: 100%;

                    display: flex;
                    justify-content: center;
                    align-items: center;

                    position: absolute;
                    top: 0;
                    left: 0;

                    opacity: 0;
                    transition: opacity 500ms ease-in-out;

                    &.active {
                        opacity: 1;
                    }

                    img {
                        width: 45.87%;
                        max-width: 175px;

                        @media screen and (min-width: 768px) {
                            width: 43.6%;
                            max-width: unset;

                            @media screen and (min-width: 1200px) {
                                width: 89.05%;
                            }
                        }
                    }
                }
            }

            .wrapper {
                display: flex;
                flex-direction: column;
                gap: 24px;

                @media screen and (min-width: 768px) {
                    width: 74.71%;
                    margin: 0 auto;

                    @media screen and (min-width: 1200px) {
                        width: unset;

                        justify-content: center;
                        gap: 40px;
                    }
                }

                >* {
                    @media screen and (min-width: 1200px) {
                        max-width: 445px;
                        margin-left: 47px;
                    }
                }

                .tab-button-wrapper {
                    height: 32px;

                    display: flex;
                    justify-content: center;
                    gap: 32px;

                    @media screen and (min-width: 1200px) {
                        justify-content: flex-start;
                    }

                    .tab-button {
                        display: flex;
                        align-items: flex-start;
                        position: relative;
                        
                        background-color: transparent;
                        border: none;

                        &::after {
                            width: 100%;
                            height: 4px;

                            content: "";

                            position: absolute;
                            left: 0;
                            bottom: 0;

                            opacity: 0;
                            transition: opacity .3s ease-in-out;

                            background-color: var(--white);
                        }

                        &:hover {
                            @media (hover: hover) and (pointer: fine) {
                                cursor: pointer;

                                &::after {
                                    background-color: hsl(from var(--white) h s l / 0.5);
                               
                                    opacity: 1;
                                }
                            }
                        }

                        &.active {
                            &::after {
                                opacity: 1;
                            }
                        }
                    }
                }

                .tab-texts {
                    position: relative;

                    .tab-text {
                        position: absolute;
                        top: 0;
                        left: 0;

                        opacity: 0;
                        transition: opacity 500ms ease-in-out;

                        &.active {
                            position: relative;
                            opacity: 1;
                        }

                        .destinations-tab-description {
                            margin-top: 16px;
                        }

                        .destinations-tab-divider {
                            margin: 24px 0;
                            
                            border-top: 1px solid rgb(from var(--white) r g b / 0.25);
                            border-bottom: 0;

                            @media screen and (min-width: 1200px) {
                                margin: 40px 0;
                            }
                        }

                        .stats-wrapper {
                            display: flex;
                            flex-direction: column;
                            gap: 24px;

                            @media screen and (min-width: 768px) {
                                flex-direction: row;
                                justify-content: center;

                                @media screen and (min-width: 1200px) {
                                    justify-content: flex-start;
                                }
                            }

                            >* {
                                display: flex;
                                flex-direction: column;
                                gap: 12px;

                                @media screen and (min-width: 768px) {
                                    flex: 1 1 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* Page Crew styles */

.page-crew {
    background-image: url(../images/crew/background-crew-mobile.jpg);
    background-size: cover;
    background-repeat: no-repeat;

    @media screen and (min-width: 768px) {
        background-image: url(../images/crew/background-crew-tablet.jpg);

        @media screen and (min-width: 1200px) {
            background-image: url(../images/crew/background-crew-desktop.jpg);
        }
    }
}

.crew {
    .content-wrapper {
        width: 87.2%;
        padding: 24px 0;

        display: flex;
        flex-direction: column;
        gap: 24px;

        @media screen and (min-width: 768px) {
            width: 89.58%;
            max-width: 688px;
            padding: 40px 0;

            @media screen and (min-width: 1200px) {
                width: 78%;
                max-width: 1110px;
                margin-top: 136px;
                padding: 48px 0;
            }
        }

        .crew-header {
            .crew-kicker {
                display: flex;
                justify-content: center;
                gap: 24px;

                @media screen and (min-width: 768px) {
                    justify-content: flex-start;
                }

                .crew-kicker-number {
                    opacity: .25;
                }
            }
        }

        .tabs {
            display: flex;
            flex-direction: column;
            gap: 32px;

            @media screen and (min-width: 1200px) {
                height: 734px;

                flex-direction: row;
            }

            >* {
                @media screen and (min-width: 1200px) {
                    flex: 1;
                }
            }

            .tab-images {
                height: 352px;

                position: relative;

                display: flex;
                justify-content: center;

                @media screen and (min-width: 768px) {
                    height: 463px;

                    @media screen and (min-width: 1200px) {
                        height: 100%;
                    }
                }

                .tab-image {
                    width: 82.87%;
                    height: 340px;

                    position: absolute;

                    display: flex;
                    justify-content: center;
                    align-items: flex-end;

                    object-fit: contain;

                    opacity: 0;
                    transition: opacity 500ms ease-in-out;

                    @media screen and (min-width: 768px) {
                        width: 64.97%;
                        height: 560px;

                        @media screen and (min-width: 1200px) {
                            width: 100%;
                            height: 676px;

                            bottom: 0;
                        }
                    }

                    &.active {
                        opacity: 1;
                    }

                    img {
                        width: 100%;
                        max-height: 100%;

                        object-fit: contain;

                        mask-image: linear-gradient(to bottom,
                                rgba(0, 0, 0, 1) 0%,
                                rgba(0, 0, 0, 1) 77.39%,
                                rgba(0, 0, 0, 0) 100%);
                    }
                }
            }
        }

        .wrapper {
            position: relative;

            display: flex;
            flex-direction: column;
            gap: 24px;

            padding-top: 40px;

            @media screen and (min-width: 768px) {
                width: 74.71%;
                margin: 0 auto;

                @media screen and (min-width: 1200px) {
                    width: unset;
                    padding-top: unset;

                    justify-content: center;
                    gap: unset;
                }
            }

            .tab-button-wrapper {
                height: 10px;

                display: flex;
                justify-content: center;
                gap: 16px;

                @media screen and (min-width: 1200px) {
                    justify-content: flex-start;

                    position: absolute;
                    bottom: 48px;
                    left: 0;
                }

                .tab-button {
                    width: 10px;
                    height: 10px;

                    display: flex;
                    align-items: flex-start;
                    position: relative;

                    background-color: rgb(from var(--white) r g b / 0.1744);
                    border: none;
                    border-radius: 50%;

                    @media screen and (min-width: 1200px) {
                        width: 15px;
                        height: 15px;
                    }

                    &:hover {
                        @media (hover: hover) and (pointer: fine) {
                            cursor: pointer;

                            &::after {
                                background-color: hsl(from var(--white) h s l / 0.5);
                                opacity: 1;
                            }
                        }
                    }

                    &.active {
                        background-color: var(--white);
                    }
                }
            }

            .tab-texts {
                position: relative;

                .crew-tab-title {
                    span {
                        display: block;

                        &.crew-role {
                            opacity: .5;
                        }

                        &.crew-name {
                            margin-top: 8px;

                            @media screen and (min-width: 768px) {
                                margin-top: 16px;
                            }
                        }
                    }
                }

                .tab-text {
                    position: absolute;
                    top: 0;
                    left: 0;

                    opacity: 0;
                    transition: opacity 500ms ease-in-out;

                    &.active {
                        position: relative;

                        opacity: 1;
                    }

                    .crew-tab-description {
                        min-height: 165px;
                        margin-top: 24px;

                        @media screen and (min-width: 768px) {
                            min-height: 117px;

                            @media screen and (min-width: 1200px) {
                                min-height: unset;
                            }
                        }
                    }
                }
            }
        }
    }
}

/* Page Technology styles */

.page-technology {
    position: relative;
    overflow: hidden;
}

.page-technology::before {
    content: "";

    position: absolute;
    z-index: -1;
    inset: 0;

    background-image: url("../images/technology/background-technology-mobile.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transform: scaleX(-1);

    @media screen and (min-width: 768px) {
        background-image: url("../images/technology/background-technology-tablet.jpg");

        @media screen and (min-width: 1200px) {
            background-image: url("../images/technology/background-technology-desktop.jpg");
            transform: unset;
        }
    }
}

.technology {
    @media screen and (min-width: 1200px) {
        justify-content: center;

        overflow: hidden;
    }

    .content-wrapper {
        width: 87.2%;
        padding: 24px 0;

        display: flex;
        flex-direction: column;
        gap: 88px;

        @media screen and (min-width: 768px) {
            width: 89.58%;
            max-width: 688px;
            padding: 40px 0;

            @media screen and (min-width: 1200px) {
                width: 88.54%;
                max-width: 1110px;
                margin-top: 136px;
                padding: 48px 0;
            }
        }

        .technology-header {
            @media screen and (min-width: 1200px) {
                width: 100%;
                max-width: 635px;
            }

            .technology-kicker {
                display: flex;
                justify-content: center;
                gap: 24px;

                @media screen and (min-width: 768px) {
                    justify-content: flex-start;

                    @media screen and (min-width: 1200px) {
                        max-width: 635px;
                        margin: 0 auto;
                    }
                }

                .technology-kicker-number {
                    opacity: .25;
                }
            }
        }

        .tabs {
            display: flex;
            flex-direction: column;
            gap: 32px;

            @media screen and (min-width: 1200px) {
                height: 734px;

                flex-direction: row-reverse;
                justify-content: space-between;
            }

            .tab-images {
                width: 100%;
                height: 258px;

                position: relative;

                @media screen and (min-width: 768px) {
                    height: 356px;

                    @media screen and (min-width: 1200px) {
                        width: 47.75%;
                        height: 100%;

                        overflow: visible;
                    }
                }

                .tab-image {
                    width: 100vw;
                    height: 100%;

                    overflow: hidden;

                    position: absolute;
                    top: 0;
                    left: 50%;
                    transform: translateX(-50%);

                    display: flex;
                    justify-content: center;
                    align-items: center;

                    opacity: 0;
                    transition: opacity 500ms ease-in-out;

                    @media screen and (min-width: 768px) {
                        width: 100%;

                        @media screen and (min-width: 1200px) {
                            width: 42.22vw;
                            height: unset;
                            aspect-ratio: 600/608;

                            top: 50%;
                            left: 0;
                            transform: translateY(-50%);
                        }
                    }

                    &.active {
                        opacity: 1;
                    }

                    picture {
                        width: 100%;
                        max-width: unset;

                        object-fit: cover;

                        @media screen and (min-width: 768px) {
                            height: 100%;

                            @media screen and (min-width: 1200px) {
                                height: auto;

                                object-fit: contain;

                                display: flex;
                                justify-content: flex-end;
                                align-items: center;
                            }
                        }

                        img {
                            width: 100%;
                            max-width: 414px;
                            margin: 0 auto;

                            @media screen and (min-width: 768px) {
                                height: 100%;
                                max-width: unset;
                                margin: unset;

                                @media screen and (min-width: 1200px) {
                                    width: 100%;
                                    max-width: 795px;
                                    height: 100%;
                                    min-height: 0;
                                }
                            }
                        }
                    }
                }
            }

            .wrapper {
                display: flex;
                flex-direction: column;
                gap: 40px;

                @media screen and (min-width: 768px) {
                    width: 74.71%;
                    margin: 0 auto;

                    @media screen and (min-width: 1200px) {
                        width: 100%;
                        max-width: 635px;
                        margin: unset;

                        flex-direction: row;
                        align-items: center;
                        gap: 64px;
                    }
                }

                >* {
                    @media screen and (min-width: 1200px) {
                        margin-left: 0;
                    }
                }

                .tab-button-wrapper {
                    height: 40px;
                    
                    display: flex;
                    justify-content: center;
                    gap: 16px;

                    @media screen and (min-width: 768px) {
                        height: 56px;

                        @media screen and (min-width: 1200px) {
                            height: unset;
                    
                            flex-direction: column;
                            justify-content: flex-start;
                            gap: 32px;
                        }
                    }

                    .tab-button {
                        width: 40px;
                        height: 40px;

                        background-color: transparent;

                        border: 1px solid;
                        border-color: rgb(from var(--white) r g b / 0.25);
                        border-radius: 50%;

                        position: relative;

                        display: flex;
                        justify-content: center;
                        align-items: center;

                        transition: color .3s ease-in-out, background-color .3s ease-in-out, border-color .3s ease-in-out;

                        @media screen and (min-width: 768px) {
                            width: 56px;
                            height: 56px;

                            @media screen and (min-width: 1200px) {
                                width: 80px;
                                height: 80px;
                            }
                        }

                        &:hover {
                            @media (hover: hover) and (pointer: fine) {
                                cursor: pointer;

                                border: 1px solid;
                                border-color: var(--white);
                            }
                        }

                        &.active {
                            color: var(--blue-900);

                            background-color: var(--white);
                        }
                    }
                }

                .tab-texts {
                    position: relative;

                    @media screen and (min-width: 1200px) {
                        width: 100%;
                    }

                    .tab-text {
                        position: absolute;
                        top: 0;
                        left: 0;

                        opacity: 0;
                        transition: opacity 500ms ease-in-out;

                        &.active {
                            position: relative;
                            opacity: 1;
                        }

                        .heading-4 {
                            display: flex;
                            flex-direction: column;
                            gap: 16px;
                        }

                        .technology-tab-description {
                            margin-top: 16px;

                            @media screen and (min-width: 1200px) {
                                margin-top: 24px;
                            }
                        }
                    }
                }
            }
        }
    }
}