.org-hero {
    @apply flex flex-col-reverse items-center md:pt-0 mb-16 md:min-h-screen relative;

    @screen md {
        @apply grid grid-cols-5;
    }

    &::after {
        content: '';
        @apply absolute left-0 bottom-0 h-2/6 w-full bg-gradient-to-t from-white hidden md:block;
    }

    &.compliments {
        @apply md:min-h-[90vh] h-[90vh] relative overflow-hidden bg-[#DDD2E6] pb-4 md:pb-0;
        .org-hero&:after {
            display: none !important;
        }
        .hero-right {
            @apply md:min-h-[90vh] h-[90vh];
            .hero-right-wrapper {
                .hero-path-desktop {
                    @apply hidden;
                }
            }

            .swiper {
                @apply relative z-10;
            }

            .swiper-nav {
                @apply hidden;
            }

            .swiper-container {
                @apply z-10;
            }

            .atm-image {
                @apply relative z-10;
                mask-repeat: no-repeat;
                mask-size: cover;
                mask-position: center bottom;
                mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 739 670"><path fill="white" d="M772 0V765.7C772 765.7 403.7 764.9 316.9 765.7C200.5 663 95.2 512.7 95.1 512.5C297 197.3 651.3 0.2 651.7 0Z"/></svg>');
                @media (max-width: theme('screens.xl')) {
                    mask-position: top left;
                }
                @media (max-width: theme('screens.md')) {
                    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 739 670"><path fill="white" d="M-27 -7H738.7C738.7 -7 737.9 361.3 738.7 448.1C636 564.5 485.7 669.8 485.5 669.9C170.3 468 -26.8 113.7 -27 113.4Z"/></svg>');
                    mask-position: top right;
                }
            }
        }
    }

    &.fullwidth {
        @apply lg:m-0 mb-0 p-0 min-h-[90vh] h-[90vh];

        &::after {
            content: none;
        }

        .hero-right {
            @apply md:col-span-5 h-[inherit];

            .hero-right-wrapper {
                @apply overflow-hidden;
            }

            .atm-video {
                @apply p-0 bg-[transparent];

                video {
                    @apply opacity-100;
                }
            }
        }

        .atm-button {
            @apply z-50 bg-secondary-col-1 outline outline-2 outline-white absolute -translate-x-1/2 translate-y-1/2 bottom-0 left-1/2;
        }
    }

    .hero-left {
        @apply md:col-span-2 relative z-20;

        @media (max-width: theme('screens.md')) {
            @apply vebego-container;
        }

        /* Add padding to the column so it aligns with .vebego-container */
        @screen md {
            padding-left: calc((100vw - theme('screens.md')) / 2);
        }

        @screen lg {
            padding-left: calc((100vw - theme('screens.lg')) / 2);
        }

        @screen xl {
            padding-left: calc((100vw - theme('screens.xl')) / 2);
        }

        @screen 2xl {
            padding-left: calc((100vw - theme('screens.2xl')) / 2);
        }

        .hero-content {
            @apply h-full;

            @screen md {
                @apply pl-8 pt-24;
            }

            .hero-content-wrapper {
                @apply md:row-start-2 row-span-2 md:flex md:items-center;

                h1 {
                    @apply my-4 text-secondary-col-1;
                }

                .hero-content-buttons {
                    @apply mt-6;

                    .atm-button {
                        @apply mr-4;
                    }
                }
            }

            .hero-content-work-cta {
                @apply md:row-start-4 md:flex md:items-end hidden lg:w-2/3 xl:w-1/2;
            }
        }
    }

    .hero-right {
        @apply md:col-span-3 relative flex-grow h-[400px] sm:h-[450px] md:h-full w-full;

        .hero-right-wrapper {
            @apply absolute top-0 left-0 z-10 h-full w-full flex flex-col-reverse md:flex-row;

            .hero-path-desktop {
                @apply hidden md:block h-full -translate-x-px;
            }

            .hero-path-mobile {
                @apply md:hidden translate-y-px;
            }

            .hero-path-mask {
                @apply absolute top-1/2 -translate-y-1/2 w-[201%] -left-full md:-left-1/2 md:w-[151%] lg:left-0 lg:w-[101%] lg:h-[90%] lg:top-0 lg:translate-y-0;
            }

            .hero-right-variant {
                @apply flex-grow flex justify-center items-center;

                .great-work {
                    @apply w-full md:ml-12 flex md:hidden lg:flex justify-center md:justify-start;

                    svg {
                        @apply w-48 xl:w-80 block;
                    }
                }
            }
        }

        .atm-image {
            @apply h-full;

            img {
                @apply h-full w-full object-cover;
            }
        }

        .atm-video {
            @apply relative h-full w-full;

            video {
                @apply absolute h-full w-full object-cover top-0 left-0;
            }
        }

        .play-video-wrapper {
            @apply flex justify-center items-center flex-grow;

            a {
                @apply relative z-30 flex justify-center items-center h-24 w-24 bg-white rounded-full;

                svg {
                    @apply h-full w-full absolute top-0;

                    transform: rotate(-90deg);
                    circle {
                        stroke-dasharray: 1000;
                        stroke-dashoffset: 1000;
                    }
                }
                s &:hover {
                    svg circle {
                        animation: dash-in 3s ease forwards;
                    }
                }

                .atm-icon {
                    &:before {
                        content: '\f04b';
                        @apply text-h4 ml-1 text-black fa-solid;
                    }
                }
            }
        }

        .hero-slider {
            @apply h-full w-full;

            .swiper-slide {
                .atm-image {
                    @apply h-full xl:max-h-screen;

                    img {
                        @apply w-full h-full object-cover;
                    }
                }
            }

            .swiper-nav {
                @apply absolute right-12 bottom-12 z-40 bg-white;

                .swiper-button-wrapper {
                    @apply flex items-center;
                }

                .swiper-button-divider {
                    @apply w-px h-8 rotate-12 bg-gray-200;
                }

                .swiper-prev,
                .swiper-next {
                    @apply py-6 px-7;

                    &.swiper-button-disabled {
                        @apply opacity-30;
                    }
                }

                .swiper-prev .atm-icon::before {
                    content: '\f060';
                }

                .swiper-next .atm-icon::before {
                    content: '\f061';
                }

                .slider-progress-wrapper {
                    @apply h-1 relative bg-gradient-to-r from-secondary-col-1 to-links flex justify-end;

                    div {
                        @apply h-full w-0 transition-all bg-gray-100;
                    }
                }
            }
        }

        .social-wrapper {
            @apply hidden lg:block lg:absolute right-0 bottom-0 pr-8 pb-8;
        }
    }
}

@keyframes dash-in {
    to {
        stroke-dashoffset: 0;
    }
}