@use "../abstracts/variables" as vars;

/* ===========================
   Hero 2
   =========================== */
.hero2 {

    margin-top: -97px;

    @media (max-width: 1699px) {
        margin-top: 0px;
    }



    .container-fluid {
        max-width: 1800px;
    }

    &__wrap {
        padding: vars.rem(280) 0 vars.rem(130);
        position: relative;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 1;
        overflow: hidden;
        border-radius: vars.rem(50);

        @media (max-width: 1699px) {
            padding: vars.rem(180) 0 vars.rem(100);
            margin-top: 10px;
        }

        @media (max-width: 1399px) {
            padding: vars.rem(120) 0 vars.rem(120);
        }

        @media (max-width: 991px) {
            padding: vars.rem(100) 0 vars.rem(100);
        }

        @media (max-width: 767px) {
            padding: vars.rem(30) 0 vars.rem(30);
        }
    }


    &__content {
        position: relative;
        z-index: 1;
    }

    &__subtitle-wrap {
        display: inline-flex;
        align-items: center;
        background-color: vars.$color-white;
        padding: vars.rem(12) vars.rem(32);
        border-radius: vars.rem(50);
        margin-bottom: vars.rem(25);
        position: relative;
        gap: vars.rem(12);

        @media (max-width: 767px) {
            padding: vars.rem(12) vars.rem(12);
        }

        &::before {
            content: '';
            display: inline-block;
            width: vars.rem(38);
            height: vars.rem(6);
            background-color: vars.$color-black;
            border-radius: vars.rem(5);
        }
    }

    &__subtitle {
        font-family: "DM Sans", sans-serif;
        font-weight: 600;
        font-size: vars.rem(16);
        line-height: normal;
        letter-spacing: 0%;
        text-transform: uppercase;
        color: #0073E6;
        margin-bottom: 0;

        @media (max-width: 767px) {
            font-size: vars.rem(14);
            line-height: 1.2;
        }
    }

    &__title {
        font-family: "DM Sans", sans-serif;
        font-weight: 800;
        font-size: clamp(vars.rem(32), 6vw + 1rem, vars.rem(80));
        line-height: vars.rem(90);
        letter-spacing: -0.03em;
        color: vars.$color-white;
        margin-bottom: vars.rem(25);

        @media (max-width: 1199px) {
            font-size: clamp(vars.rem(32), 6vw + 1rem, vars.rem(50));
            line-height: 1.2;
        }
    }

    &__desc {
        font-family: "DM Sans", sans-serif;
        font-weight: 500;
        font-size: vars.rem(18);
        line-height: vars.rem(30);
        letter-spacing: 0%;
        color: rgba(255, 255, 255, 0.85);
        margin-bottom: vars.rem(40);
        max-width: vars.rem(710);

        @media (max-width: 1199px) {
            font-size: 16px;
            line-height: 24px;
        }
    }

    &__btn {
        background-color: #0073E6;
        color: vars.$color-white;
        padding: vars.rem(15) vars.rem(34);
        padding-right: vars.rem(80);
        border-radius: vars.rem(50);
        display: inline-flex;
        align-items: center;
        font-family: "DM Sans", sans-serif;
        font-weight: 700;
        font-size: vars.rem(16);
        letter-spacing: 0.02em;
        text-transform: uppercase;
        position: relative;
        transition: all 0.3s ease;
        text-decoration: none;

        span {
            position: relative;
            z-index: 2;
        }

        &::after {
            content: "\f061";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            top: 50%;
            right: vars.rem(8);
            transform: translateY(-50%);
            width: vars.rem(55);
            height: vars.rem(55);
            background-color: vars.$color-black;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: vars.rem(18);
            color: vars.$color-white;
            transition: all 0.3s ease;
        }

        &:hover {
            background-color: vars.$color-black;
            color: vars.$color-white;

            &::after {
                background-color: #0073E6;
                color: vars.$color-white;
            }
        }
    }



    @media (max-width: 767px) {

        &__title {
            font-size: vars.rem(40);
            line-height: 1.2;
        }

        &__desc {
            font-size: vars.rem(16);
            line-height: 1.6;
        }
    }
}