@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');

@font-face {
    font-family: "Calibri";
    src: url("fonts/calibri.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Calibri";
    src: url("fonts/calibrib.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }


        html,
        body {
            width: 100%;
            margin: 0;
            padding: 0;
        }

        /* =====================================
           HERO SLIDER
        ===================================== */

        .hero-slider {
            width: 100%;
            height: auto;
            overflow: hidden;
        }


        /* =====================================
           SWIPER SLIDE
        ===================================== */

        .hero-slider .swiper-slide {
            position: relative;

            width: 100%;
            height: auto;

            overflow: hidden;
        }


        /* =====================================
           BANNER IMAGE
        ===================================== */

        .slide-bg {
            display: block;

            width: 100%;
            height: auto;

            object-fit: cover;

            transform: scale(1);

            transition:
                transform 6s ease;
        }


        /* Zoom animation */

        .swiper-slide-active .slide-bg {
            transform: scale(1.05);
        }


        /* =====================================
           DARK OVERLAY
        ===================================== */

        .slide-overlay {
            position: absolute;

            inset: 0;

            z-index: 1;

            background:
                linear-gradient(
                    90deg,
                    rgba(0, 0, 0, 0.78) 0%,
                    rgba(0, 0, 0, 0.58) 38%,
                    rgba(0, 0, 0, 0.20) 75%,
                    rgba(0, 0, 0, 0.12) 100%
                );
        }


        /* =====================================
           DIAGONAL DARK SHAPE
        ===================================== */

        .slide-overlay::before {

            content: "";

            position: absolute;

            left: 0;
            top: 0;

            width: 45%;
            height: 100%;

            background: rgba(0, 0, 0, 0.12);

            clip-path: polygon(
                0 0,
                45% 0,
                100% 100%,
                0 100%
            );
        }


        /* =====================================
           HERO CONTENT
        ===================================== */

        .hero-content {

            position: absolute;

            inset: 0;

            z-index: 5;

            width: 100%;

            max-width: 1600px;

            margin: 0 auto;

            padding: 0 40px;

            display: flex;

            align-items: center;
        }


        .hero-content-inner {

            width: 700px;

            padding-top: 20px;
        }


        /* =====================================
           LABEL
        ===================================== */

        .hero-label {

            display: flex;

            align-items: center;

            font-family: "Calibri", Arial, sans-serif;

            gap: 20px;

            margin-bottom: 35px;

            font-size: 16px;

            font-weight: 600;

            color: #fff;
        }


        .hero-label::before {

            content: "";

            display: block;

            width: 84px;

            height: 3px;

            background: #33cccc;
        }


        /* =====================================
           TITLE
        ===================================== */

        .hero-title {
            color: #fff;

            margin: 0;
            font-family: "Calibri", Arial, sans-serif;

            font-size: 50px;

            line-height:120%;

            font-weight: 800;

            text-transform: uppercase;
        }


        .hero-title .highlight {

            color: #33cccc;
        }


        /* =====================================
           DESCRIPTION
        ===================================== */

        .hero-description {

            max-width: 600px;

            font-family: "Calibri", Arial, sans-serif;


            margin-top: 25px;

            margin-bottom: 40px;

            font-size: 17px;

            line-height: 140%;

            color: #f2f2f2;
        }


        /* =====================================
           BUTTON
        ===================================== */

        .hero-btn {

            font-family: "Calibri", Arial, sans-serif;

            display: inline-flex;

            align-items: center;

            gap: 20px;

            padding: 18px 30px;

            background: #33cccc;

            color: #111;

            text-decoration: none;

            font-size: 16px;

            font-weight: 600;

            transition: all 0.3s ease;
        }


        .hero-btn span {

            font-family: "Calibri", Arial, sans-serif;


            font-size: 25px;

            line-height: 1;

            transition:
                transform 0.3s ease;
        }


        .hero-btn:hover {

            background: #fff;
        }


        .hero-btn:hover span {

            transform: translateX(5px);
        }


        /* =====================================
           TEXT ANIMATION
        ===================================== */

        .swiper-slide .hero-label,
        .swiper-slide .hero-title,
        .swiper-slide .hero-description,
        .swiper-slide .hero-btn {

            opacity: 0;

            transform: translateY(35px);
        }


        .swiper-slide-active .hero-label {

            animation:
                textUp 0.8s 0.3s forwards;
        }


        .swiper-slide-active .hero-title {

            animation:
                textUp 0.8s 0.5s forwards;
        }


        .swiper-slide-active .hero-description {

            animation:
                textUp 0.8s 0.7s forwards;
        }


        .swiper-slide-active .hero-btn {

            animation:
                textUp 0.8s 0.9s forwards;
        }


        @keyframes textUp {

            from {

                opacity: 0;

                transform:
                    translateY(35px);
            }

            to {

                opacity: 1;

                transform:
                    translateY(0);
            }
        }


        /* =====================================
           NAVIGATION ARROWS
        ===================================== */

        .hero-slider .swiper-button-prev,
        .hero-slider .swiper-button-next {

            position: absolute;

            top: auto;

            bottom: 60px;

            width: 58px;

            height: 58px;

            margin: 0;

            z-index: 10;

            background:
                rgba(0, 0, 0, 0.65);

            color: #fff;

            transition:
                all 0.3s ease;
        }


        .hero-slider .swiper-button-prev {

            left: auto;

            right: 105px;
        }


        .hero-slider .swiper-button-next {

            right: 40px;
        }


        .hero-slider .swiper-button-prev:hover,
        .hero-slider .swiper-button-next:hover {

            background: #ffc400;

            color: #111;
        }


        .hero-slider .swiper-button-prev::after,
        .hero-slider .swiper-button-next::after {

            font-size: 20px;

            font-weight: 400;
        }


        /* =====================================
           HIDE PAGINATION
        ===================================== */

        .hero-slider .swiper-pagination {

            display: none;
        }


        /* =====================================
           TABLET
        ===================================== */

        @media (max-width: 991px) {

            .slide-bg {
                height: 100vh;
            }

            .hero-content {

                padding:
                    0 30px;
            }


            .hero-content-inner {

                width: 650px;
            }


            .hero-title {

                font-size: 52px;
            }


            .hero-description {

                font-size: 15px;
            }


            .hero-label {

                margin-bottom: 25px;
            }


            .hero-slider .swiper-button-prev,
            .hero-slider .swiper-button-next {

                bottom: 35px;
            }


            .hero-slider .swiper-button-prev {

                right: 95px;
            }


            .hero-slider .swiper-button-next {

                right: 30px;
            }

        }


        /* =====================================
           MOBILE
        ===================================== */

        @media (max-width: 767px) {

            .hero-content {

                padding:
                    0 22px;

                align-items: center;
            }


            .hero-content-inner {

                width: 100%;

                padding-top: 20px;
            }


            /* Mobile overlay */

            .slide-overlay {

                background:
                    linear-gradient(
                        180deg,
                        rgba(0, 0, 0, 0.35) 0%,
                        rgba(0, 0, 0, 0.65) 55%,
                        rgba(0, 0, 0, 0.90) 100%
                    );
            }


            .slide-overlay::before {

                display: none;
            }


            /* Label */

            .hero-label {

                gap: 12px;

                margin-bottom: 20px;

                font-size: 13px;
            }


            .hero-label::before {

                width: 50px;

                height: 2px;
            }


            /* Title */

            .hero-title {

                font-size:
                    clamp(
                        32px,
                        9vw,
                        46px
                    );

                line-height: 1.08;

                letter-spacing: -1px;
            }


            /* Description */

            .hero-description {

                margin-top: 18px;

                margin-bottom: 25px;

                font-size: 13px;

                line-height: 1.6;

                max-width: 100%;
            }


            /* Button */

            .hero-btn {

                padding:
                    14px 22px;

                font-size: 13px;

                gap: 15px;
            }


            .hero-btn span {

                font-size: 21px;
            }


            /* Arrows */

            .hero-slider .swiper-button-prev,
            .hero-slider .swiper-button-next {

                bottom: 20px;

                width: 45px;

                height: 45px;
            }


            .hero-slider .swiper-button-prev {

                right: 75px;
            }


            .hero-slider .swiper-button-next {

                right: 20px;
            }


            .hero-slider .swiper-button-prev::after,
            .hero-slider .swiper-button-next::after {

                font-size: 16px;
            }

        }

        .hero-slider .swiper-button-prev, .hero-slider .swiper-button-next {
            width: 36px;
            height: 36px;
            padding: 9px;
        }

        /* =====================================
           SMALL MOBILE
        ===================================== */


        @media (max-width: 480px) {

            .hero-content {

                padding:
                    0 18px;
            }


            .hero-content-inner {

                padding-top: 10px;
            }


            .hero-title {

                font-size: 31px;

                letter-spacing: -0.5px;
            }


            .hero-description {

                font-size: 12px;

                line-height: 1.6;
            }


            .hero-btn {

                padding:
                    13px 19px;
            }


            .hero-slider .swiper-button-prev,
            .hero-slider .swiper-button-next {

                width: 42px;

                height: 42px;
            }


            .hero-slider .swiper-button-prev {

                right: 68px;
            }


            .hero-slider .swiper-button-next {

                right: 18px;
            }

        }