@use '../globals' as u;

#landing-section{
    letter-spacing: 1px;  
    padding:var( --section-padding);
    min-height: 100vh;
    &::after{
        position: absolute;
        display: block;
        top:0;
        left:0;
        width:100%;
        height:48em;
        z-index:-1;
        clip-path: polygon(0 0, 100% 0%, 100% 70%, 0 62%);
        background-color: var(--secondaryBG-color);
        content:'';

        @include u.breakpoint(x-large) {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 46% 47%);
           transform-origin: right;
           transform: scale(1);
        }
    }
}

.landing-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  

    @include u.breakpoint(x-large) {
        flex-direction: row;
        gap:4em;
    }
}

.landing{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap:2em;
    
    @include u.breakpoint(x-large) {
        align-items: start;
        gap:1em;
        max-width: 37em;
    }
   
    &__textContainer{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap:.50em;

        @include u.breakpoint(x-large) {
            text-align: start;
        }
    }
    
    &__heading{
        font-size:var( --header-size);
        

        @include u.breakpoint(medium) {
            
        }
        span{
            color:var(--secondaryUtil-color)
        }
    }

    &__paragraph{
        font-size:var( --sub-head);
        @include u.breakpoint(medium) {
            
        }
        
    }

    .landing__button{
        padding:1.3em 1em;
        background-color: var(--util-color);
        border-radius: 5px;
        color:var(--body-color);
        z-index: 1;
        
        @include u.breakpoint(x-large) {
            margin-top:1.5em;
        }
    }

    &__review{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap:1em;
        margin-top:3em;
        text-align: center;
        @include u.breakpoint(x-large) {
            align-items: start;
            text-align: start;
            margin-top:2em;
        }
        img{
            width:100%;
            height:100%;
            object-fit: contain;
            max-width: 6em;
        }

        .review-span{
            
            line-height: 23px;
            font-size:0.95rem;
            max-width: 15em;

            span{
                color:var(--secondaryUtil-color);
            }
        }
    }

    &__image-container{
        position: relative;
        margin-top:4em;
        width:70%;
        height:100%;
        @include u.breakpoint(medium) {
            max-width: 19.9375em;
        }

        @include u.breakpoint(x-large) {
            max-width: 25em;
            height:30em;
            margin-top:0;
        }
    }

    &__image-utility{
        clip-path: circle(45% at 50% 50%);
        width: 7em;
        height: 7em;
        display: block;
        position: absolute;
        top:5em;
        left:2em;
        z-index: 1;
        display: none;
    }

    &__img{
        display: block;
        border-radius: 0.70em;
        clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
        width:100%;
        height:100%;
        transform: rotate(90deg);
        overflow: hidden;
        z-index: 1;
        position: relative;

        @include u.breakpoint(x-large) {
           clip-path: none;
           transform: rotate(0);
           border-top-left-radius: 5.5em;
        }
        &:before{
            content: '';
            display: block;
            height: 100%;
            width: 100%;
            background: black;
            opacity: .40;
            z-index: 2;
            position:absolute;
        }
        img{
            width:100%;
            height:100%;
            object-fit: contain;
            display: block;
            
            @include u.breakpoint(x-large) {
                object-fit: cover;
            }
        }
    }
    
    
}