@use "../utilities" as *;

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

.hero-section{
    background-color: var(--cp-color-bg-1);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.hero-container{
    max-width: 1545px;
}

.hero-content{
    padding-top: 140px;
    padding-bottom: 120px;
    @include flex-vertical-center;
    @include breakpoint(sm){
        padding-top: 70px;
        padding-bottom: 70px;
    }
    @include breakpoint(lg){
        align-items: start;
    }
    .hero-scroll-btn{
        max-height: 353px;
        height: 100%;
        @include flex-vertical-center;
        justify-content: space-between;
        writing-mode: vertical-lr;
        margin-right: 100px;
        
        @include breakpoint(xxl){
            margin-right: 50px;
        }
        @include breakpoint(xl){
            margin-right: 30px;
        }
        @include breakpoint(lg){
            margin-top: 20px;
        }
        @include breakpoint(sm){
            display: none;
        }
        .scroll-text{
            color: var(--cp-color-text-body);
            font-family: var(--cp-ff-p);
            font-size: 14px;
            font-weight: 600;
            opacity: 0.5;
        }
        .line{
            background-color: var(--cp-color-text-body);
            opacity: 0.2;
            height: 160px;
            width: 1px;
            display: inline-block;
        }
        .icon{
            background-color: rgba(144, 221, 140, 0.2);
            color: var(--cp-color-theme-primary);
            padding: 4px 15px;
            border-radius: 100px;
            transform: rotate(90deg);
        }
    }
    .hero-right-content{
        @include flex-vertical-center;
        justify-content: space-between;
        column-gap: 20px;
        flex-wrap: wrap;
        row-gap: 30px;
        width: 100%;
        .title{
            font-size: 130px;
            font-weight: 500;
            text-transform: uppercase;
            line-height: 1;
            @include breakpoint(xxl){
                font-size: 120px;
            }
            @include breakpoint(xl){
                font-size: 90px;
            }
            @include breakpoint(md){
                font-size: 80px;
            }
            @include breakpoint(sm){
                font-size: 42px;
                line-height: 1.2;
            }
            span{
                font-family: "NewYork", sans-serif;
                nav-down: 400;
            }
        }
        .hero-client-wrap{
            max-width: 450px;
            width: 100%;
            .hero-author-list{
                @include flex-vertical-center;
                li{
                    height: 56px;
                    width: 56px;
                    @include flex-center;
                    border-radius: 50%;
                    border: 3px solid var(--cp-color-common-white);
                    overflow: hidden;
                    &:not(:first-of-type){
                        margin-left: -20px;
                    }
                    &.icon{
                        background-color: var(--cp-color-theme-primary);
                        color: var(--cp-color-bg-1);
                    }
                }
            }
            .desc{
                font-family: var(--cp-ff-heading);
                color: var(--cp-color-common-white);
                font-size: 22px;
                font-weight: 500;
                margin-top: 20px;
            }
            .hero-desc{
                font-family: 'Euclid Circular B';
                margin-top: 45px;
                padding-top: 45px;
                border-top: 1px solid var(--cp-color-border-1);
                font-size: 22px;
                font-weight: normal;
                line-height: 32px;
            }
        }
    }
}

.hero-video-box{
    .video-area{
        max-width: 100%;
        width: 100%;
    }
}


// Hero 2

.hero-2{
    position: relative;
    .hero-img{
        position: absolute;
        left: 50%;
        bottom: 120px;
        transform: translateX(-50%);
        max-width: 550px;
        width: 100%;
        height: 550px;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        @include breakpoint(md){
            position: relative;
        }
        @include breakpoint(sm){
            height: 400px;
            padding: 0 15px;
        }
    }
}

.hero-content-2{
    text-align: center;
    padding: 90px 0 200px 0;
    @include breakpoint(xl){
        padding: 90px 0 240px 0;
    }
    @include breakpoint(md){
        padding: 90px 0 155px 0;
    }
    .title{
        font-size: 170px;
        font-weight: 400;
        text-transform: uppercase;
        line-height: 1;
        margin-bottom: 150px;
        position: relative;
        z-index: 5;
        @include breakpoint(xl){
            font-size: 130px;
        }
        @include breakpoint(lg){
            font-size: 117px;
        }
        @include breakpoint(md){
            font-size: 85px;
            margin-bottom: 40px;
        }
        @include breakpoint(sm){
            font-size: 62px;
            br{
                display: block;
            }
        }
        span{
            font-family: "NewYork", sans-serif;
            font-weight: 400;
        }
    }
    .hero-text-wrap{
        @include flex-vertical-center;
        justify-content: space-between;
        @include breakpoint(sm){
            flex-direction: column;
            row-gap: 20px;
        }
        p{
            max-width: 380px;
            width: 100%;
            text-align: right;
            font-size: 24px;
            font-weight: 400;
            line-height: 1.6;
            margin-bottom: 0;
            position: relative;
            z-index: 5;
            @include breakpoint(xl){
                max-width: 300px;
            }
            @include breakpoint(sm){
                text-align: left;
            }
        }
        .hero-btn{
            background-color: var(--cp-color-theme-primary);
            height: 150px;
            width: 150px;
            @include flex-center;
            border-radius: 50%;
            position: relative;
            margin-right: 200px;
            position: relative;
            z-index: 5;
            @include breakpoint(xl){
                margin-right: 130px;
            }
            @include breakpoint(md){
                margin-right: 80px;
            }
            @include breakpoint(sm){
                margin-right: 0;
            }
            i{
                color: var(--cp-color-text-black);
                font-size: 20px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) rotate(-45deg);
            }
            .explore-text{
                animation-name: spin;
                animation-duration: 15s;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
            }
        }
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* !END: Hero CSS */
