.top{
    border-bottom: 1px solid var(--line);
    background: url(../../assets/img/pptbg.png) no-repeat center,var(--white);
    background-size: cover;
    background-blend-mode: multiply;
    padding: 4.33rem 0;
}

.top .text{
    max-width: 820px;
    margin: 0 auto;
}

.projetos{
    background: url(../../assets/img/pppbg.svg) no-repeat top left;
    padding: 4rem 0 6.4rem;
}

.projetos .draggerbox,
.projetos .bigimg{
    position: relative;
    width: 100%;
    height: 520px;
    border: 2px solid var(--main);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 10px;
}

.projetos .draggerbox .d1,
.projetos .draggerbox .d2{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.projetos .draggerbox .d1 img,
.projetos .draggerbox .d2 img,
.projetos .bigimg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

.projetos .draggerbox .d1 img{
    object-position: right center;
    -o-object-position: right center;
}

.projetos .draggerbox .d2 img{
    object-position: left center;
    -o-object-position: left center;
}

.projetos .draggerbox .bef,
.projetos .draggerbox .aft{
    position: absolute;
    z-index: 1;
    top: 25px;
    cursor: pointer;
    text-transform: uppercase;
    color: var(--white);
    font-family: var(--roboto);
    font-size: 26px;
    font-weight: 500;
    line-height: 30px;
}

.projetos .draggerbox .bef{
    left: 25px;
}

.projetos .draggerbox .aft{
    right: 25px;
}

.projetos .draggerbox .dragger{
    position: absolute;
    top: 0;
    display: flex;
    -webkit-display: flex;
    align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    width: 1px;
    height: 100%;
    background-color: transparent;
}

.projetos .draggerbox .dragger .bol{
    position: absolute;
    cursor: grab;
    width: 59px;
    height: 59px;
    border: 1px solid var(--white);
    border-radius: 5px;
    background: url('data:image/svg+xml;utf8,<svg width="35" height="30" viewBox="0 0 35 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.9019 0.429016V13.6629H5.4789L8.58286 10.5469L6.88651 8.8506L0.871094 14.866L6.88651 20.8814L8.58286 19.1851L5.4789 16.0691H12.9019V29.303H15.3081V0.429016H12.9019ZM28.542 8.8506L26.8457 10.5469L29.9496 13.6629H22.5266V0.429016H20.1204V29.303H22.5266V16.0691H29.9496L26.8457 19.1851L28.542 20.8814L34.5574 14.866L28.542 8.8506Z" fill="white"/></svg>') no-repeat center,var(--main);
}

.projetos .draggerbox .dragger.holding .bol{
    cursor: grabbing;
}

.projetos .owl-carousel .item{
    cursor: pointer;
    position: relative;
    display: flex;
    display: -webkit-flex;
    align-items: stretch;
    width: 100%;
    max-width: 188px;
    aspect-ratio: 1/.63829;
    border: 2px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.projetos .owl-carousel .item.active{
    border-width: 3px;
    border-color: var(--main);
}

.projetos .owl-carousel .item img{
    position: absolute;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

.projetos .owl-carousel .item img:first-of-type{
    z-index: 1;
    /* clip-path: polygon(0 0,100% 0,0 100%);
    -webkit-clip-path: polygon(0 0,100% 0,0 100%); */
}

.vants{
    border: 1px solid #F3F3F3;
    border-radius: 10px;
    background: url(../../assets/img/spvantsbg.png) no-repeat center,var(--white);
    background-size: cover;
    background-blend-mode: multiply;
    margin: 0 4.2rem 4rem;
    padding: 3.26rem 0;
}

.vants .df{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    grid-gap: 1rem;
    width: 100%;
    margin-bottom: 2.4rem;
}

.vants .df::before,
.vants .df::after{
    content: '';
    width: 100%;
    max-width: 368px;
    height: 1px;
    background-color: #e6e7e999;
}

.vants .sectitle::before{
    background-color: #F9F9F9;
}

.vants .owl-carousel{
    margin-bottom: 2.33rem;
}

.vants .item{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    grid-gap: 1rem;
    border: 1px solid #E6E7E9;
    border-radius: 10px;
    background: url(../../assets/img/boxbggg.png) no-repeat center,var(--white);
    background-size: cover;
    padding: 37px 41px 37px 25px;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.vants .item:hover{
    background: url(../../assets/img/boxbggg.png) no-repeat center,var(--main);
}

.vants .item::before{
    content: url('data:image/svg+xml;utf8,<svg width="28" height="36" viewBox="0 0 28 36" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 5.69561L5.57895 13.4909V3.25004C5.57895 3.25004 8.76617 2.75705 10.8522 2.40937H12.075C13.6799 2.79149 14.8615 3.37263 15.9344 4.77852C17.0426 6.23057 17.5011 7.45336 17.7304 9.21111C17.7728 9.53665 17.7491 9.72401 17.7304 10.0518C17.6061 12.2309 16.9546 13.6459 15.323 15.0958C13.5835 16.6415 9.62943 16.8535 9.62943 16.8535H7.9481L21.093 35.4246L27.5126 34.6603L13.7563 17.9999C18.7239 17.0829 23.1342 14.7137 23.5386 9.66965C23.5839 9.10441 23.5814 8.78304 23.5386 8.2176C23.1565 3.17369 17.1954 0.575195 12.8392 0.575195H0V5.69561Z" fill="rgb(237,118,14)"/></svg>');
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.vants .item:hover::before{
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
    -ms-filter: brightness(0) invert(1);
}

.vants .item .title{
    text-transform: uppercase;
    color: var(--main);
    font-family: var(--roboto);
    font-size: 18px;
    font-weight: 700;
    line-height: 21px;
    letter-spacing: .9px;
    border-left: 1px solid var(--main);
    margin-right: -1rem;
    padding-left: 1rem;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.vants .item:hover .title{
    color: var(--white);
    border-color: var(--white);
}

.vants .dbtn{
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

@media(max-width:1120px){
    .projetos .draggerbox{
        height: 46.42857vw;
    }
}

@media(max-width:992px){
    .top,
    .projetos,
    .vants{
        padding: 2rem 0;
    }   
}

@media(max-width:768px){
    .vants{
        margin: 0 20px 20px;
    }
    .projetos .draggerbox .bef,
    .projetos .draggerbox .aft{
        top: 1rem;
        font-size: clamp(16px,3.38vw,26px);
        line-height: clamp(19px,3.90625vw,30px);
    }
    .projetos .draggerbox .bef{
        left: 1rem;
    }
    .projetos .draggerbox .aft{
        right: 1rem;
    }
    .projetos .draggerbox .dragger .bol{
        width: 7.68229vw;
        height: 7.68229vw;
        background-size: 4.55729vw;
    }
    .projetos .owl-carousel .item{
        margin: 0 auto;
    }
    .vants .item{
        margin: 0 auto;
        padding: 2rem 1rem;
    }
}

@media(max-width:475px){
    .vants .item{
        flex-direction: column;
        -ms-flex-direction: column;
        padding: 1rem;
    }
    .vants .item .title{
        text-align: center;
        border-left: unset;
        border-top: 1px solid var(--main);
        margin: 0;
        padding: 1rem 0 0;
    }
}