@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200..800&display=swap');

.banner-portfolio *{margin: 0; padding: 0; box-sizing: border-box; font-family: "Plus Jakarta Sans", sans-serif;}
.banner-portfolio{width: 100%; height: 600px; padding: 0 20px 50px 20px; box-sizing: border-box; background-color: #121833; background-image: url(pro-upgrade-grid-bg.svg), url(pro-upgrade-overlay.svg); background-repeat: repeat, no-repeat; background-size: 1224px, 1880px; background-position: left top, -520px -680px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; text-align: center; position: relative; overflow: hidden;}
.banner-portfolio h1{width: 100%; max-width: 1000px; color: #fff !important; font-size: 40px; font-weight: 600; line-height: 56px;}
.banner-portfolio p{width: 100%; max-width: 1000px; color: #fff; font-size: 24px; font-weight: 500; line-height: 42px;}
.banner-portfolio div{width: 100%; max-width: 700px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 20px; text-align: center; margin-top: 40px;}
.banner-portfolio div a{width: 100%; height: 70px; color: #fff; font-size: 16px; font-weight: 600; padding: 0 10px; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 10px; text-decoration: none; transition: all .2s ease-in-out;}
.banner-portfolio div a.btn-1{background-color: hsla(0, 0%, 100%, .1); box-shadow: 0 0 4px rgba(0, 0, 0, .04), 0 4px 8px rgba(0, 0, 0, .06), inset 0 0 0 1px hsla(0, 0%, 100%, .16); backdrop-filter: blur(6px);}
.banner-portfolio div a.btn-2{background: radial-gradient(141.77% 141.08% at 100.26% 99.25%, #0ECAD4 0%, #7A45E5 100%); box-shadow: 0 0 4px rgba(0, 0, 0, .04), 0 4px 8px rgba(0, 0, 0, .06), inset 0 0 0 1px hsla(0, 0%, 100%, .16);}
.banner-portfolio div a.btn-1:hover{background: radial-gradient(141.77% 141.08% at 100.26% 99.25%, #25d366 0%, #00bcd4 100%);}
.banner-portfolio div a.btn-2:hover{background: radial-gradient(141.77% 141.08% at 100.26% 99.25%, #25d366 0%, #00bcd4 100%);}
.banner-portfolio svg{width: 30px; height: 30px; animation: upDown 1.2s ease-in-out infinite alternate; position: absolute; left: 50%; bottom: 45px; z-index: 1; margin: 0 0 0 -15px;}
.banner-portfolio svg path{stroke: #fff;}
.banner-portfolio.video h1, .banner-portfolio.video p, .banner-portfolio.video div, .banner-portfolio.video svg{display: none !important;}
.bg-video{width: auto; height: auto; position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); object-fit: cover; z-index: 0;}
@keyframes upDown{from {transform: translateY(0);} to{transform: translateY(5px);}}

.wrapp-portfolio *{font-family: "Plus Jakarta Sans", sans-serif;}

.wrapp-portfolio .wrapp-cards-portfolio{width: 100%; box-sizing: border-box;}
.wrapp-portfolio .wrapp-cards-portfolio *{margin: 0; padding: 0; box-sizing: border-box;}
.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio{width: 100%; height: 100vh; position: relative; padding: 0; border-bottom: 1px solid #ebe6e7; background-color: #fff; display: flex; align-items: center; justify-content: flex-end;}

.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .imagem-portfolio{width: 70%; height: 100%; background-color: #f8f8f8; display: flex; align-items: center; justify-content: center; padding: 30px; position: relative;}
.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .imagem-portfolio img{max-width: 100%; max-height: 70%; width: auto; height: auto; object-fit: contain; border-radius: 40px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); transition: all 0.5s ease-in-out;}
.wrapp-portfolio .wrapp-cards-portfolio.ativa .card-portfolio .imagem-portfolio img{opacity: 0.2; transform: scale(0.8);}
.wrapp-portfolio .wrapp-cards-portfolio.ativa .card-portfolio.card-corrente .imagem-portfolio img{opacity: 1; transform: scale(1);}
.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .imagem-portfolio i{display: none !important; width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; z-index: 1; margin: -50px 0 0 -50px; background-color: #3a4c5a; border-radius: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 40px; color: #fff; font-style: normal; font-weight: bold;}

.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio{width: 30%; height: 100%; background-color: #fff; border-right: 2px solid #f6f3f4; padding: 20px; position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; overflow: auto;}
.wrapp-portfolio .wrapp-cards-portfolio.ativa .card-portfolio.card-corrente .informacoes-portfolio{height: 100%; position: fixed; z-index: 10;}
.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio.scroll-ativado{justify-content: flex-start;}
.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio h2{font-size: 36px; color: #1d2023; font-weight: 700;}
.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio h3{color: #697581; font-size: 18px; font-weight: 300;}
.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio p{color: #4b5563; font-size: 18px; font-weight: 400; line-height: 34px;}
.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio .botoes-portfolio{width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; border-top: 1px solid #ebe6e7; padding-top: 30px;}
.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio .botoes-portfolio a{width: 100%; max-width: 320px; height: 50px; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 5px; text-align: center; border-radius: 100px; color: #fff; font-size: 16px; font-weight: 500; text-decoration: none !important;}
.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio .botoes-portfolio a svg{width: 25px; height: 25px;}
.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio .botoes-portfolio a svg path{fill: #fff;}
.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio .botoes-portfolio a.link-site{background-color: #1d2023;}
.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio .botoes-portfolio a.link-whatsapp{background-color: #25d366;}
.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio .botoes-portfolio a:hover{background-color: #673ab7 !important;}

.wrapp-portfolio .wrapp-cards-portfolio.inicio .card-portfolio:first-child .informacoes-portfolio h2,
.wrapp-portfolio .wrapp-cards-portfolio.inicio .card-portfolio:first-child .informacoes-portfolio h3,
.wrapp-portfolio .wrapp-cards-portfolio.inicio .card-portfolio:first-child .informacoes-portfolio p,
.wrapp-portfolio .wrapp-cards-portfolio.inicio .card-portfolio:first-child .informacoes-portfolio a{opacity: 1; transform: translateX(0);}

.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio h2,
.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio h3,
.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio p,
.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio a{opacity: 0; transform: translateX(-20px); transition: opacity 0.5s ease, transform 0.5s ease;}

.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio.card-corrente .informacoes-portfolio h2,
.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio.card-corrente .informacoes-portfolio h3,
.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio.card-corrente .informacoes-portfolio p,
.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio.card-corrente .informacoes-portfolio a{opacity: 1; transform: translateX(0);}

.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio.card-corrente .informacoes-portfolio h2{transition-delay: 0.1s;}
.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio.card-corrente .informacoes-portfolio h3{transition-delay: 0.2s;}
.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio.card-corrente .informacoes-portfolio p{transition-delay: 0.3s;}
.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio.card-corrente .informacoes-portfolio a.link-site{transition-delay: 0.4s;}
.wrapp-portfolio .wrapp-cards-portfolio .card-portfolio.card-corrente .informacoes-portfolio a.link-whatsapp{transition-delay: 0.5s;}

@media(max-width: 1250px){
    .banner-portfolio{height: 500px; padding: 0 20px 35px 20px; gap: 20px;}
    .banner-portfolio div{margin-top: 30px;}

    .wrapp-portfolio .wrapp-cards-portfolio{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; background-color: #f8f8f8; padding: 30px;}
    .wrapp-portfolio .wrapp-cards-portfolio .card-portfolio{width: 355px; height: auto; background-color: transparent; border: none; padding: 10px; display: flex; flex-direction: column; justify-content: flex-start;}
    .wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .imagem-portfolio{width: 100%; height: auto; padding: 0; background-color: transparent; position: relative; z-index: 1;}
    .wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .imagem-portfolio img{max-height: 100%; object-fit: inherit; border-radius: 20px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); opacity: 1 !important; transform: scale(1) !important;}

    .wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio{width: 100%; height: 100% !important; justify-content: flex-start !important; gap: 10px; padding: 30px 10px 185px 10px; position: relative !important; z-index: 2 !important; border: none; border-radius: 20px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); margin-top: -10px;}
    .wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio h2{font-size: 22px; line-height: 28px;}
    .wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio h3{font-size: 14px; line-height: 18px;}
    .wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio p{font-size: 16px; line-height: 26px;}
    .wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio .botoes-portfolio{padding: 20px 10px 40px 10px; position: absolute; left: 0; bottom: 0;}
    .wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio .botoes-portfolio a{font-size: 14px;}
    .wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio .botoes-portfolio a svg{width: 23px; height: 23px;}

    .wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio h2,
    .wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio h3,
    .wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio p,
    .wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio a{opacity: 1 !important; transform: translateX(0) !important;}
}

@media(max-width: 780px){
    .banner-portfolio{height: auto; padding: 60px 20px 110px 20px; gap: 15px;}
    .banner-portfolio h1{font-size: 30px; line-height: 44px;}
    .banner-portfolio p{font-size: 18px; line-height: 38px;}
    .banner-portfolio div{gap: 15px; margin-top: 10px;}
    .banner-portfolio svg{bottom: 15px;}

    .banner-portfolio.video{padding: 0;}
    .bg-video{
        width: 100%;
        position: relative;
        top: inherit;
        left: inherit;
        transform: inherit;
        object-fit: inherit;
    }

    .wrapp-portfolio .wrapp-cards-portfolio{gap: 20px; padding: 40px 10px;}
    .wrapp-portfolio .wrapp-cards-portfolio .card-portfolio{width: 100%;}

    .wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio h2{font-size: 18px; line-height: 24px;}
    .wrapp-portfolio .wrapp-cards-portfolio .card-portfolio .informacoes-portfolio p{font-size: 14px;}
}