@use "../utilities" as *;

/**----------------------------------------
START: Theme Hero CSS
----------------------------------------*/

.hero-section {
    @include background;
    position: relative;
    height: 930px;
    width: 100%;
    @include flex-vertical-center;
    padding-top: 130px;
    overflow: hidden;
    @include breakpoint(md) {
        height: auto;
        padding-top: 0;
        padding: 80px 0 60px 0;
        flex-direction: column;
    }
    @include breakpoint(sm) {
        padding: 60px 0;
    }
}

.hero-content {
    &.section-heading {
        margin-bottom: 0;
    }
    .section-title {
        font-size: 50px;
        margin-bottom: 15px;
        @include breakpoint(lg) {
            font-size: 40px;
        }
        @include breakpoint(md) {
            max-width: 500px;
            width: 100%;
        }
        @include breakpoint(sm) {
            font-size: 30px;
        }
        span {
            position: relative;
            display: inline-block;
            &:after {
                background-color: var(--mt-color-theme-primary);
                content: "";
                width: 45%;
                height: 3px;
                position: absolute;
                bottom: 9px;
                left: 4px;
                @include breakpoint(sm) {
                    bottom: 5px;
                }
            }
            &:before {
                background-color: var(--mt-color-theme-secondary);
                content: "";
                width: 55%;
                height: 3px;
                position: absolute;
                bottom: 9px;
                right: 3px;
                @include breakpoint(sm) {
                    bottom: 5px;
                }
            }
        }
    }
    p {
        margin-bottom: 30px;
        @include breakpoint(md) {
            max-width: 500px;
            width: 100%;
        }
    }
}

.hero-img-wrap {
    width: 860px;
    height: 675px;
    position: absolute;
    left: 50%;
    top: calc(50% + 65px);
    @include transform(translateY(-50%));
    @include breakpoint(xxxl) {
        width: 760px;
        top: calc(50% + 100px);
    }
    @include breakpoint(xxl) {
        width: 650px;
        top: calc(50% + 150px);
    }
    @include breakpoint(xl) {
        width: 580px;
        top: calc(50% + 170px);
    }
    @include breakpoint(lg) {
        width: 480px;
        top: calc(50% + 200px);
    }
    @include breakpoint(md) {
        position: relative;
        width: 90%;
        transform: inherit;
        margin-top: 40px;
        left: 0;
        height: 580px;
    }
    @include breakpoint(sm) {
        height: 292px;
    }
    .hero-shape {
        width: 350px;
        height: 320px;
        position: absolute;
        top: 0;
        right: 20%;
        object-fit: contain;
        object-position: center;
        z-index: -1;
        @include breakpoint(lg) {
            width: 175px;
            top: -80px;
            right: 24%;
        }
    }
    .hero-circle {
        width: 330px;
        height: 330px;
        position: absolute;
        bottom: -60px;
        left: 60px;
        object-fit: contain;
        object-position: center;
        @include breakpoint(xxxl) {
            bottom: -15px;
            left: 35px;
        }
        @include breakpoint(xxl) {
            bottom: 40px;
            left: 9px;
        }
        @include breakpoint(xl) {
            bottom: 100px;
            left: -11px;
        }
        @include breakpoint(sm) {
            display: none;
        }
    }
    .hero-img-inner {
        img {
            width: 100%;
        }
    }
}

.hero-box {
    @include flex-vertical-center;
    column-gap: 20px;
    margin-bottom: 30px;
    img {
        height: 65px;
        width: 100px;
    }
    ul {
        list-style: none;
        li {
            color: var(--mt-color-text-body);
            font-size: 16px;
            font-weight: 400;
            @include flex-vertical-center;
            &:not(:last-of-type) {
                margin-bottom: 12px;
            }
            i {
                color: var(--mt-color-theme-primary);
                font-size: 16px;
                margin-right: 7px;
            }
        }
    }
}

.hero-btn-wrap {
    @include flex-vertical-center;
    column-gap: 30px;
    flex-wrap: wrap;
    row-gap: 15px;
    .video-btn {
            a{
                @include flex-vertical-center;
                column-gap: 20px;
                .play-btn{
                    background-color: var(--mt-color-heading-primary);
                    height: 55px;
                    width: 55px;
                    border-radius: 50%;
                    position: relative;
                    z-index: 1;
                    @include transition(all 0.3s ease-in-out);
                    &:hover{
                        background-color: var(--mt-color-theme-primary);
                    }
                    img{
                        position: absolute;
                        width: 30px;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }           
                }
                span {
                    font-family: var(--mt-ff-body);
                    font-size: 18px;
                    color: #222;
                    font-weight: 500;
                    text-decoration: underline;
                    @include transition(all 0.3s ease-in-out);
                    &:hover{
                        color: var(--mt-color-theme-primary);
                    }
                }
            }
        }
    }
    .mt-primary-btn {
        background-color: var(--mt-color-theme-secondary);
        color: var(--mt-color-heading-primary);
        &:hover {
            color: var(--mt-color-common-white);
        }
}

.hero-shape {
    position: absolute;
    @include breakpoint(sm) {
        display: none;
    }
    &.shape-1 {
        top: 13%;
        left: 3%;
        animation: hero-anim 2s infinite linear alternate-reverse;
        @include breakpoint(md) {
            display: none;
        }
    }
    &.shape-2 {
        top: 10%;
        right: 3%;
        animation: hero-anim-2 2s infinite linear alternate-reverse;
    }
    &.shape-3 {
        bottom: 10%;
        right: 5%;
        animation: hero-anim-3 2s infinite linear alternate-reverse;
    }
}

@include keyframes("hero-anim") {
    0% {
        @include transform(translateX(0));
    }
    100% {
        @include transform(translateX(15px));
    }
}

@include keyframes("hero-anim-2") {
    0% {
        @include transform(translateY(0));
    }
    100% {
        @include transform(translateY(15px));
    }
}

@include keyframes("hero-anim-3") {
    0% {
        @include transform(translateX(0));
    }
    100% {
        @include transform(translateX(15px));
    }
}

// Hero Section 2
.hero-section-2 {
    @include background;
    width: 100%;
    height: 941px;
    @include flex-vertical-center;
    position: relative;
    z-index: 1;
    @include breakpoint(md) {
        height: auto;
    }
    .custom-container {
        max-width: 1440px;
        width: 100%;
        padding: 0 15px;
        margin: 0 auto;
    }
    .overlay {
        background-color: rgba(37, 37, 45, 0.7);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
}

.hero-content.content-2 {
    position: relative;
    display: inline-block;
    padding-top: 175px;

    @include breakpoint(md) {
        padding: 100px 0 100px 0;
    }
    @include breakpoint(xxxl) {
        padding-left: 150px;
    }
    @include breakpoint(md) {
        padding-left: 0;
    }
    .shape {
        background-repeat: no-repeat;
        background-position: top left;
        background-size: contain;
        width: 120px;
        height: 105px;
        position: absolute;
        top: 0;
        left: 50%;
        @include breakpoint(md) {
            display: none;
        }
    }
    .hero-sub-title {
        font-family: var(--mt-ff-body);
        font-style: italic;
        color: var(--mt-color-theme-secondary);
        font-size: 22px;
        font-weight: 700;
        position: relative;
        padding-left: 25px;
        margin-bottom: 15px;
        text-transform: uppercase;
        &:before {
            background-color: var(--mt-color-theme-secondary);
            content: "";
            height: 10px;
            width: 10px;
            position: absolute;
            left: 0;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            border-radius: 2px;
        }
        span {
            color: var(--mt-color-common-white);
            -webkit-text-fill-color: transparent;
            -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color: var(--mt-color-common-white);
            text-transform: uppercase;
        }
    }
    .title {
        color: var(--mt-color-common-white);
        font-size: 50px;
        font-weight: 700;
        line-height: 1.3;
        max-width: 600px;
        width: 100%;
        margin-bottom: 20px;
        @include breakpoint(md) {
            font-size: 40px;
        }
        @include breakpoint(sm) {
            font-size: 32px;
        }
        span {
            color: var(--mt-color-theme-primary);
            text-decoration: underline;
        }
    }
    p {
        color: var(--mt-color-common-white);
        max-width: 450px;
        width: 100%;
        margin-bottom: 45px;
    }
    .btn-wrap {
        @include flex-vertical-center;
        column-gap: 30px;
        flex-wrap: wrap;
        row-gap: 20px;
        .mt-primary-btn {
            background-color: var(--mt-color-theme-secondary);
            color: var(--mt-color-heading-primary);
            &:before,
            &:after {
                background-color: var(--mt-color-common-white);
            }
            &.active{
                background-color: var(--mt-color-common-white);&:before,
                &:after {
                    background-color: var(--mt-color-theme-secondary);
                }
            }
        }
    }
}

.hero-social {
    position: absolute;
    bottom: 260px;
    left: 60px;
    @include breakpoint(md) {
        display: none;
    }
    .social-list {
        list-style: none;
        li {
            &:not(:last-of-type) {
                margin-bottom: 20px;
            }
            a {
                color: #aaaaaa;
                display: block;
                height: 40px;
                width: 40px;
                border-radius: 50%;
                line-height: 1;
                @include flex-center;
                @include transition(all 0.3s ease-in-out);
                border: 1px solid #aaaaaa;
                &:hover {
                    background-color: var(--mt-color-theme-primary);
                    border: 1px solid var(--mt-color-theme-primary);
                }
            }
        }
    }
    .follow {
        color: var(--mt-color-common-white);
        font-family: var(--mt-ff-body);
        font-size: 22px;
        font-weight: 600;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        transform: rotate(-180deg);
        margin: 30px 0 0 8px;
    }
}

// Hero Section 3
.hero-3{
    position: relative;
    z-index: 1;
    @include breakpoint(md){
        padding: 50px 0;
    }
    @include breakpoint(sm){
        padding-bottom: 0;
    }
    .bg-img {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 941px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        @include breakpoint(md){
            height: 1150px;
        }
        @include breakpoint(sm){
            height: 800px;
        }
    }
    .bg-color{
        background-color: #171719;
        width: 100%;
        height: 400px;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: -2;
    }
    .hero-img{
        max-width: 630px;
        z-index: 1;
        @include breakpoint(md){
            margin: 0 auto;
            max-width: 550px;
        }
        img{
            width: 100%;
        }
    }
    .hero-content{
        padding-top: 125px;
        @include breakpoint(xxxl){
            padding-left: 50px;
        }
        @include breakpoint(xl){
            padding-top: 50px;
        }
        @include breakpoint(md){
            padding-left: 0;
        }
        @include breakpoint(sm){
            padding-bottom: 0;
        }
        .shape{
            left: auto; 
            right: -150px;
            @include breakpoint(xxxl){
                right: 0;
            }
            @include breakpoint(xl){
                top: -50px;
            }
        }
        .title{
            @include breakpoint(xl){
                font-size: 40px;
            }
            @include breakpoint(md){
                font-size: 32px;
            }
        }
        p{
            margin-bottom: 35px;
        }
        .number-box{
            display: grid;
            align-items: center;
            grid-template-columns: 55px 1fr;
            grid-gap: 10px;
            .icon{
                background-color: var(--mt-color-common-white);
                color: var(--mt-color-theme-primary);
                font-size: 18px;
                width: 55px;
                height: 55px;
                border-radius: 50%;
                @include flex-center;
            }
            .numbers{
                a{
                    font-family: var(--mt-ff-body);
                    color: var(--mt-color-common-white);
                    font-size: 18px;
                    font-weight: 500;
                    display: block;
                    &:hover{
                        color: var(--mt-color-theme-secondary);
                    }
                    &:not(:last-of-type){
                        margin-bottom: 3px;
                    }
                }
            }
        }
        .hero-social{
            position: inherit;
            bottom: 0;
            left: 0;
            @include flex-vertical-center;
            flex-wrap: wrap;
            row-gap: 15px;
            column-gap: 30px;
            margin-top: 35px;
            ul{
                display: flex;
                align-items: center;
                li{
                    &:not(:last-of-type){
                        margin-bottom: 0;
                        margin-right: 10px;
                    }
                    a{
                        border: 1px solid var(--mt-color-common-white);
                        color: var(--mt-color-common-white);
                        &:hover{
                            background-color: var(--mt-color-common-white);
                            color: var(--mt-color-theme-primary);
                        }
                    }
                }
            }
            .follow{
                writing-mode: inherit;
                text-orientation: inherit;
                transform: rotate(0);
                margin: 0;
            }
        }
    }
}

// Hero 4

.hero-4{
    padding-top: 180px;
    padding-bottom: 50px;
    @include breakpoint(md){
        padding: 70px 0;
    }
    .hero-content{
        .title{
            color: var(--mt-color-common-white);
            margin-bottom: 20px;
            @include breakpoint(sm){
                font-size: 30px;
            }
        }
        p{
            color: var(--mt-color-common-white);
        }
        .hero-btn-wrap{
            .video-btn{
                .play-btn{
                    background-color: var(--mt-color-common-white);
                    height: 60px;
                    width: 60px;
                    img{
                        @include transition(all 0.3s ease-in-out);
                    }
                    &:hover{
                        background-color: var(--mt-color-theme-primary);
                        img{
                            filter: brightness(0) invert(1);
                        }
                    }
                }
            }
            span{
                color: var(--mt-color-common-white);
            }
        }
    }
    .hero-img{
        position: relative;
        z-index: 1;
        border-radius: 50%;
        border: 1px dashed var(--mt-color-common-white);
        padding: 10px;
        width: 675px;
        img{
            width: 100%;
        }
        @include breakpoint(xl){
            width: 100%;
        }
        @include breakpoint(md){
            margin-top: 50px;
        }
        .elements{
            .circle{
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: -1;
                &.circle-2{
                    bottom: auto;
                    top: 0;
                    left: auto;
                    right: 0;
                }
            }
            .element{
                position: absolute;
                top: 60px;
                left: -50px;
                @include breakpoint(md){
                    left: 0;
                }
                &.about-counter-wrap{
                    margin: 0;
                }
                &.hero-count-img{
                    top: auto;
                    left: auto;
                    bottom: 20px;
                    right: 50px;
                    animation: hero-anim-2 2s infinite linear alternate-reverse;
                }
            }
        }
    }
}

.ripple-2,
.ripple-2:before,
.ripple-2:after {
    position: absolute;
    left: 0px;
    top: 50%;
    width: 55px;
    height: 55px;
    transform: translateY(-50%);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 0 0 rgba(49, 34, 34, 0.5);
    -moz-box-shadow:  0 0 0 0 rgba(49, 34, 34, 0.5);
    -ms-box-shadow: 0 0 0 0 rgba(49, 34, 34, 0.5);
    -o-box-shadow: 0 0 0 0 rgba(49, 34, 34, 0.5);
    box-shadow: 0 0 0 0 rgba(49, 34, 34, 0.5);
    -webkit-animation: rippleTwo 3s infinite;
    -moz-animation: rippleTwo 3s infinite;
    -ms-animation: rippleTwo 3s infinite;
    -o-animation: rippleTwo 3s infinite;
    animation: rippleTwo 3s infinite;
}
.ripple-2 {
    z-index: -1;
    &:before {
        -webkit-animation-delay: 0.9s;
        -moz-animation-delay: 0.9s;
        -ms-animation-delay: 0.9s;
        -o-animation-delay: 0.9s;
        animation-delay: 0.9s;
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
    }
    &:after {
        -webkit-animation-delay: 0.6s;
        -moz-animation-delay: 0.6s;
        -ms-animation-delay: 0.6s;
        -o-animation-delay: 0.6s;
        animation-delay: 0.6s;
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
    }
}

@-webkit-keyframes rippleTwo {
    70% {
        box-shadow: 0 0 0 20px rgba(244, 68, 56, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
    }
}

@keyframes rippleTwo {
    70% {
        box-shadow: 0 0 0 20px rgba(244, 68, 56, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
    }
}

/* !END: Theme Hero CSS */
