body{
    overflow-x: hidden;
}

section {
  height: 100vh;
  background-image: url('../assets/images/retangle.png');
  background-size: cover;
  background-position: center;
  clip-path: polygon(0 0, 100% 0, 100% 145%, 0% 115%);
}

section::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;

    width: 100%;
    height: 150vh;

    background-image: url('../assets/images/retangle.png');
    background-size: cover;
    z-index: -1;  
}

#desktop-menu ul{
    display: flex;
    gap: 1rem;
    list-style: none;

    li a{
        text-decoration: none;
        font-weight: bold;
        transition: all .2s ease-in-out;

        &:hover{
            color: var(--orange-color);
        }
    }
}

#notebook-image{
    width: 100%;
    position: relative;
    right: clamp(1rem, 13vw, 15.625rem);
}

#video-box{
    aspect-ratio: 16 / 9;
}

#info-pricebot {
    position: relative;
    background-image: url('../assets/images/man-tablet.png');
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: right;

    .purple-bg {
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--secondary-bg-color);
        background: linear-gradient(
        to right,
            #7879b9 0%,
            #7879b9 40%,
            rgba(108, 92, 231, 0.7) 75%,
            rgba(108, 92, 231, 0.3) 90%,
            rgba(108, 92, 231, 0) 100%
        );
    }
}

.client-logo{
    width: 100px !important;
    filter: grayscale(100%);
    height: auto;
    object-fit: contain;
    max-height: 60px;
}

#client-flex img:not(:first-child):not(:last-child){
    margin-left: auto;
    margin-right: auto;
}
#container-prices{
    padding-bottom: 10rem !important;
}


#container-form{
    margin-top: 20rem;
}

#container-send-form{
    padding-top: 1rem !important;
}

#img-hand{
    position: absolute;
    bottom: 0px;
    right: -150px;
    width: 27rem;
    
}





/* MEDIA QUERY */
@media (max-width: 850px) {
    section{
        height: 50vh;
        header{
          padding-inline: 2rem !important;
        }
        main{
            flex-direction: column ;
            .principal-text-box{
                text-align: center;
            }
        }
    }
    #menu-icon{
        display: flex !important;
    }
    #desktop-menu{
        display: none;
    }
    #notebook-image{
        display:none;
    }

    #about-description{
        text-align: center;
    }

    #client-flex img{
        margin-left: 0;
        margin-right: 0;
        margin: auto;
        width: 50px !important;
        height: auto;
    }
    #card-box{
        flex-direction: column !important;
        align-items: center !important;
    }
    #container-prices{
        padding-bottom: 90rem !important;
    }

    #container-form{
        margin-top: 5rem;
    }

    .center-on-mobile{
        width: fit-content;
        margin: auto;
        padding-top: .6rem;
    }

    footer{
        text-align: center;
    }
}