/* ===============PRELOADER - SOFTVIS========================================================= */
.logo-preload {display: flex; align-items: center}

.logo-load { height: 60px; width: auto; opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s forwards ease-out}

body.preloading {overflow: hidden !important}

#preloader-react-style { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: radial-gradient(circle at center, #1a0b2e 30%, #0a0a0a 100%); color: white; transition: opacity 0.8s ease-in-out; pointer-events: all}

.preloader-content { position: relative; display: flex; flex-direction: column; align-items: center}

.glow-line { height: 2px; width: 100%; background: linear-gradient(to right, transparent, rgba(168, 85, 247, 0.4), transparent); margin-top: 15px;
    transform: scaleX(0); animation: scaleLine 1s forwards ease-in-out 0.6s}

.services-display {height: 40px;  margin-top: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden}

#service-text {font-size: 10px; font-weight: 600; letter-spacing: 0.3em; color: rgba(216, 180, 254, 0.8); transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0; transform: translateY(15px)}

/* Indicadores (Dots) do Preloader */
.loading-dots { position: absolute; bottom: -80px; display: flex; gap: 10px }

.predot { width: 6px; height: 6px; background-color: rgba(168, 85, 247, 0.5); border-radius: 50%; animation: pulsePreloader 1.4s infinite ease-in-out}

.predot:nth-child(2) { animation-delay: 0.15s; }
.predot:nth-child(3) { animation-delay: 0.3s; }

/* Transição para o conteúdo */
.content-hidden { opacity: 0; visibility: hidden; pointer-events: none; user-select: none}

.content-visible { opacity: 1; visibility: visible; pointer-events: all; user-select: auto; transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1)}

.preloader-hidden { opacity: 0; pointer-events: none}

/* Keyframes */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleLine {
    to {
        transform: scaleX(1);
    }
}

@keyframes pulsePreloader {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.3);
    }
}
/*----------------------------------------------------------------------------------------------
................................BACKGROUND DO HEADER + HERO-SECTION..........................
------------------------------------------------------------------------------------------------*/
/* 
* {
    outline: 1px solid red !important;
} */


.home-hero { position: relative; min-height: 95vh; width: 100%; display: flex; flex-direction: column; overflow: hidden; 
    background: #000;}

.hero-video-bg { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%;  width: auto;
    height: auto; z-index: 0; transform: translate(-50%, -50%); object-fit: cover;
     pointer-events: none; /* Garante que o vídeo não bloqueia quando navegamos no menu */}

.main-header, .hero-container { position: relative; z-index: 1;}

.hero-container { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; padding: 0 5%;}

.hero-text-content-dir { grid-column: 2; display: flex; flex-direction: column; align-items: center; text-align: right;}

.hero-title { font-size: 60px; color: #fff; margin-bottom: 25px; font-weight: 800; line-height: 1.5;}


.home-hero-esq {  position: relative; min-height: 95vh;  width: 100%; display: flex; flex-direction: column;  overflow: hidden;  background: #000;}

.hero-video-bg-esq { position: absolute; top: 50%; left: 50%;  min-width: 100%; min-height: 100%;  width: auto; height: auto;  z-index: 0;  transform: translate(-50%, -50%); 
object-fit: cover; pointer-events: none; }

.main-header-esq, .hero-container-esq { position: relative; z-index: 1;}

.hero-container-esq { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center;  padding: 0 5%;}

.hero-text-content-esq { grid-column: 1; display: flex; flex-direction: column;  align-items: flex-start;  text-align: left;}

.hero-title-esq { font-size: 60px; color: #fff;  margin-bottom: 25px;  font-weight: 800; line-height: 1.2}

@media (min-width: 1200px) {
    .hero-container-esq { grid-template-columns: 1.5fr 0.5fr; padding: 0 10% 0 12%;}
    
}

@media (max-width: 768px) {

    .hero-title { font-size: 30px;}

    .hero-title-esq {margin-top: 70px; font-size: 30px;}

    .hero-container, .hero-container-esq { grid-template-columns: 1fr; padding: 80px 5% 40px; }

    .hero-text-content-dir, .hero-text-content-esq {grid-column: unset;  text-align: center; align-items: center; width: 100%; }

    .hero-video-bg, .hero-video-bg-esq { width: 100%; height: 100%;  object-fit: cover; }

    .home-hero, .home-hero-esq {min-height:50vh}
    
}
/*----------------------------------------------------------------------------------------
..........................................VARIÁVEIS ROOTS................................
-----------------------------------------------------------------------------------------*/

:root{--glass-bg:rgba(255,255,255,.177);--glass-blur:blur(12px);--transition:all .4s ease-in-out}

/*----------------------------------------------------------------------------------------------
................................................HEADER..........................................
------------------------------------------------------------------------------------------------*/

.header-section{width:100%;position:fixed;top:0;z-index:1000;transition:var(--transition)}

.header-section.darkHeader{background:rgba(19,13,22,.8);backdrop-filter:var(--glass-blur);box-shadow:0 4px 30px rgba(0,0,0,.5)}

.header-section.clearHeader{padding:20px 0}

.header-container{width:100%;max-width:1400px;display:flex;justify-content:space-between;align-items:center;padding:0 5%;margin:18px auto}


@media (max-width: 768px) {

    .header-section.darkHeader .header-container {margin: 5px auto;  padding: 0px 5%;}
    
    .header-container {margin: 11px auto;}

}
/*--------------------------------------------------------------------------------------------
................................................LOGO..........................................
----------------------------------------------------------------------------------------------*/

.logo{display:flex;align-items:center}

.logo-desktop,.logo-mobile{height:40px;width:auto}

.logo-mobile{display:none}

/*--------------------------------------------------------------------------------------------
................................................MENU..........................................
----------------------------------------------------------------------------------------------*/

.right-group{display:flex;align-items:center;gap:24px}

.nav-glass-pill{border:none;border-radius:90px;padding:5px 25px;background:var(--glass-bg);transition:var(--transition)}

.nav-list{display:flex;list-style:none;margin:0}

.nav-list li a{color:#fff;text-decoration:none;font-size:15px;font-weight:100;padding:10px 20px;border-radius:50px;transition:.3s;display:block}

.nav-list li.active{background:rgba(255,255,255,.2);border-radius:50px;box-shadow:0 0 10px rgba(188,58,203,.2)}

.nav-list li a:hover{color:#fff;background:rgba(255,255,255,.05)}

.header-section.darkHeader .nav-glass-pill{background: transparent;}

/*--------------------------------------------------------------------------------------------
...............................................MENÚ MOBILE....................................
----------------------------------------------------------------------------------------------*/

.mobile-menu-btn{display:none;border:none;background:none;color:#fff;font-size:35px;padding:10px;border-radius:100%;cursor:pointer;z-index:1000}

/*--------------------------------------------------------------------------------------------
...................................BOTÃO DE MUDANÇA DE LÍNGUAGEM..............................
----------------------------------------------------------------------------------------------*/

.lang-selector{position:relative;display:inline-flex;align-items:center;padding:0 15px;cursor:pointer;color:#fff}

.lang-selector-mobile{position:relative; align-items:center;padding:0 15px;cursor:pointer;color:#fff; display:none}

.dropbtn{border:none;background:none;cursor:pointer;display:flex;align-items:center;gap:5px;padding:10px 30px 10px 10px;font-size:15px;font-weight:300; color:#fff;}

.dropdown{position:relative}

.dropdown-content{display:none;position:absolute;background:var(--glass-bg);backdrop-filter:var(--glass-blur);min-width:max-content;border-radius:15px}

.dropdown-content a{color:#fff ;padding:12px 16px;text-decoration:none;display:block;font-size:12px}

.dropdown-content a:hover{color:#fff; background:rgba(255,255,255,.05); text-decoration:none}

.dropdown:focus-within .dropdown-content{display:block;top:40px}

.dropdown:hover .dropdown-content {display: block; opacity: 1; visibility: visible; top: 100%; }

.dropbtn:hover, .dropbtn:focus {color: #fff !important;text-decoration: none !important; outline: none; }

/*--------------------------------------------------------------------------------------------
...........................................RESPOSNIVIDADE.....................................
----------------------------------------------------------------------------------------------*/
/*Se precisar que o menu troque de lugar com o logo basta acrescentar o estilo order:-1*/

@media(max-width:768px){
    .mobile-menu-btn{display:block}

    .nav-glass-pill{display:none;position:fixed;top:0px;padding:80px 5%;left:0;width:100%;background:rgba(0,0,0,.4);backdrop-filter:blur(15px);z-index:998;border-radius:0}

    .nav-glass-pill.active{display:flex;animation:fadeInDown .3s ease;}

    .nav-list{flex-direction:column;gap:15px;align-items:flex-start; margin-top: 30px; }

    .nav-list li a{font-weight:500}

    .logo-desktop{display:none}

    .logo-mobile{display:block;position:relative;z-index:1001}

    .lang-selector {display:none;}

    .lang-selector-mobile{display:flex}
    
    .lang-selector-mobile .dropdown-content { position: static; background: rgba(255, 255, 255, 0.05); box-shadow: none; border-radius: 10px;
        width: 100%;  margin-top: 10px; }

    /* Classe que o JS vai ativar no clique */
    .lang-selector-mobile .dropdown-content.show { display: block !important; }

    .header-section.darkHeader .nav-glass-pill { background: rgba(0, 0, 0, .6); backdrop-filter: blur(50px)}

    }

/*--------------------------------------------------------------------------------------------
.................................................ANIMAÇÃO.....................................
----------------------------------------------------------------------------------------------*/

@keyframes slideInLeft{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}

/*----------------------------------------------------------------------------------------------
..............................................CSS FOOTER.........................................
------------------------------------------------------------------------------------------------*/

.footer-container{background-color:#220625;background-image:url('/assets/website/img/footerbackground.webp');background-size:cover;background-repeat:no-repeat;padding:100px 5%;display:flex;justify-content:center}

.footer-grid{background:#170619;border:1.233px solid var(--Stroke,#2B2B2B);border-radius:20px;width:100%;max-width:1300px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;padding:20px 70px}

/*----------------------------------------------------------------------------------------------
..............................................COLUNA ESQUERDA..................................
------------------------------------------------------------------------------------------------*/

.footer-info{display:flex;flex-direction:column;justify-content:space-between}

.footer-logo{margin:0 0 20px;padding-top:20px;display:block}

.footer-bottom-text,
.footer-description,
.footer-description-mobile {
    font-size: 15px;
    line-height: 150%;
    color: rgba(255,255,255,.8);
}

.footer-description-mobile{display:none}

.footer-description{max-width:400px;margin:10px 0 20px}

.footer-bottom-text{margin-bottom:30px}

.logo-img{height:40px;width:auto}

/*----------------------------------------------------------------------------------------------
..............................................COLUNA DIREITA..................................
------------------------------------------------------------------------------------------------*/

.footer-nav{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}

.nav-links{list-style:none;display:flex;gap:30px;padding:0;margin-top:90px}

.nav-links a{text-decoration:none;color:#fff;font-size:15px;font-weight:300;transition:color .3s}

.nav-links a:hover{opacity:.7}

/*----------------------------------------------------------------------------------------------
.....................................REDES SOCIAIS ICONES........................................
------------------------------------------------------------------------------------------------*/

.social-icons{display:flex;gap:15px;margin-bottom:50px}

.icon-circle{width:40px;height:40px;background-color:#151515;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;font-size:14px;border:1px solid #2A2A2A;transition:all .3s ease}

.icon-circle:hover{background-color:rgba(255,255,255,.2)}

 /*----------------------------------------------------------------------------------------------
...........................................RESPONSIVIDADE........................................
------------------------------------------------------------------------------------------------*/

@media(max-width:768px){
    .footer-grid{grid-template-columns:1fr;text-align:center;padding:40px 30px;gap:0}

    .footer-container{padding:5px 5%}

    .footer-bottom-text,.footer-description-mobile,.footer-logo{padding:0 20px;margin-left:auto;margin-right:auto}

    .footer-description{display:none}

    .footer-nav{align-items:center}

    .footer-description-mobile{display:block}

    .nav-links{gap:15px;margin-bottom:40px;margin-top:40px;flex-direction:column}

    .social-icons{margin-bottom:40px;justify-content:center}

    .footer-bottom-text{margin-bottom:20px;order:10}}



/*----------------------------------------------------------------------------------------------
...........................................1 - HOME PAGE - 1...................................
------------------------------------------------------------------------------------------------*/


.services-container{padding:100px 0;background-size:100%}

.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;max-width:1200px;margin:0 auto;align-items:flex-end}

.cartao{border-radius:35px;padding:40px;min-height:350px;display:flex;flex-direction:column;justify-content:flex-start;gap:15px;color:#fff}

.cartao.featured{min-height:450px;background:linear-gradient(180deg,rgba(52,28,99,.21)30.43%,#BC3ACB 86.88%),#0C030E}

.dark-purple{text-align:center}

.glass{background:rgba(188,58,203,.69);border:1px solid #BC3ACB}


.inner-img{width:60px;height:55px;object-fit:contain}

.cartao-info h1{font-size:24px;margin-bottom:10px;font-weight:500;line-height:1.5}

.cartao-info p{font-size:15px;color:rgba(255,255,255,.6);margin-bottom:30px}

.btn-white{background: white;  color: black; border-radius: 50px; padding: 5px 20px; font-weight: 500; border: 2px solid white; transition: 0.3s;
    outline: 1px solid white; outline-offset: 8px; font-size: 13px; text-decoration: none;}

.btn-white:hover{background: transparent;  color: white;  outline: none; outline-offset: 0; text-decoration: none}

.arrow-circle{display:flex;align-items:center;justify-content:center;margin:40px auto;transition:transform .3s ease}

.arrow-circle:hover{transform:rotate(45deg)scale(1.1)}

.cartao-info.center{text-align:center;margin:auto 0}

.small-desc{font-size:13px;color:rgba(255,255,255,.5);font-weight:300;margin-top:50px}

.top-row{display:flex;justify-content:space-between;align-items:center;width:100%}

.cartao-info.bottom{text-align:left;margin-top:auto}

.cartao-info.bottom h1{text-align:right}

.services-dots-mobile {display: none;}


@media(max-width:768px){
    .services-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:30px;padding:20px}

    .cartao{flex:0 0 100%;min-height:400px;align-items:center;text-align:center;padding:20px}

    .services-grid::-webkit-scrollbar{display:none}

    .services-grid{-ms-overflow-style:none}

    .cartao.featured{order:-1}

    .top-row{flex-direction:column;gap:30px;margin-top:45px}

    .card-info.bottom h1{text-align:center}

    .cartao-info.bottom{margin-top:20px;align-items:center}

    .cartao-info h1{font-size:20px;text-align:center;margin-top:40px}

    .cartao-info p{font-size:14px;margin-bottom:20px;text-align:center}

    .arrow-circle{margin:20px auto}

    .small-desc{width:100%}

    .services-container{padding:0px 0}

    .inner-img{margin-top:30px}

    .cartao.featured .card-info p{margin-top:-30px}

    .services-dots-mobile {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: 25px;
    }

    .dot {
        width: 10px;
        height: 10px;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        transition: all 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .dot.active {
        background-color: #fff;
        width: 25px; /* Transforma o ponto numa pílula para destacar o ativo */
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }
}



.background-nuances {background: url('/assets/website/img/Group-27194.webp')no-repeat;padding:100px 0;background-size: cover;}

.section-projects{width:100%;padding:60px 20px;display:flex;}

.projects{width:100%;max-width:1400px;margin:0 auto;display:flex;flex-direction:column}

.title-section h1{font-size:50px;line-height:1.1;margin-bottom:50px;margin-left:65px;font-weight:800;color:#fff}

.main-content{display:flex;gap:30px;align-items:stretch;justify-content:space-between;padding:0 40px;flex-wrap:wrap}

.gallery-section{display:flex;gap:25px;flex:1 1 800px}

.project-card{border-radius:20px;overflow:hidden;background-color:#1a1a1a;height:480px;display:flex}

.card-narrow{flex:1.5}

.card-wide{flex:2.5}

.project-card img{width:100%;height:auto;object-fit:cover}

.stats-section{flex:1 1 300px;display:flex;flex-direction:column;justify-content:space-around;text-align:right;padding:40px 0}

.stat-number{font-size:70px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}

.stat-group h2{color:#BC3ACB;font-size:40px;margin:0 0 10px 0;font-weight:500;line-height:normal}

.num{display:inline-block;min-width:1.5ch;font-variant-numeric:tabular-nums}

@media(max-width:768px){
    .container{background-position:center}

    .card-wide{display:none}

    .title-section h1{font-size:30px;margin-left:0;text-align:left}

    .main-content{flex-direction:column;padding:0;gap:40px}

    .gallery-section{flex-direction:column;flex:none;width:100%;gap:15px}

    .project-card{width:100%;height:300px}

    .stats-section{text-align:center;align-items:center;width:100%;padding:20px 0}

    .stat-group h2{font-size:20px}

    .stat-number{font-size:30px;font-weight:200}}

    .background-nuances {padding:0px 0;}



.logos-section{background-color:#4c1753;overflow:hidden}

.py-5{padding-top:5rem;padding-bottom:5rem}

.logos-wrapper{width:100%;display:flex;mask-image:linear-gradient(to right,transparent,#000 15%,#000 85%,transparent)}

.logos-track{display:flex;width:max-content;animation:scroll-infinite 30s linear infinite}

.logo-group{display:flex;align-items:center;gap:80px;padding-right:80px}

.client-logo img{height:40px !important;width: auto !important ;filter:brightness(0)invert(1);opacity:.6;transition:.3s}

.client-logo:hover img{opacity:1}

@keyframes scroll-infinite{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}


@media (max-width: 768px) {
    .logos-static-column {
        gap: 30px;
    }
    .client-logo img {
        height: 35px;
    }
}

.design-container { position: relative; padding: 80px 20px; background: linear-gradient(180deg, #220625 0%, #000 100%); overflow: hidden; text-align: center}

.titulo{text-align:center;max-width:1200px;margin:0 auto 20px auto}

.design-titulo{font-size:35px;line-height:1.6;font-weight:600;color:#fff;margin-bottom:20px}

.bg-purple-image { position: absolute; right: -50px; top: 10%; width: 400px; z-index: 1; opacity: 0.8}

.design-glass-box { position: relative; z-index: 2; max-width: 900px; margin: 40px auto 0; padding: 40px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; color: #fff}

.subtitle-t { color: #fff; margin-top: 20px; font-size: 15px}

.subtitle-p {color: rgba(255, 255, 255, 0.5); margin-top: 20px; font-size: 15px}


@media (max-width: 768px) {

    .design-container{ padding: 20px 40px; }

    .bg-purple-image { display: none }

    .design-glass-box { padding: 20px; backdrop-filter: none; background: rgba(255, 255, 255, 0.1)}

    .design-titulo {font-size:25px;}
}






.custom-indicators{position:absolute;bottom:60px;left:50%;transform:translateX(calc(500px - 100% - 40px));display:flex;gap:4px;font-size:14px;letter-spacing:2px;font-weight:300;color:#fff;z-index:20}

.slide-box{display:flex;align-items:center;justify-content:space-between;max-width:1000px;margin:0 auto;padding:80px 40px;background:rgba(255,255,255,.05);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.1);border-radius:20px;position:relative}

.slide-content{background:linear-gradient(171deg,#000 34.94%,#220625 64.2%,#220625 93.47%);padding:60px 0; overflow-x: hidden; overflow-y: visible !important;}

.image-box{flex:1;position:relative;display:flex;justify-content:center}

.tel-img{width:130%;max-width:650px; height: auto !important; position:absolute;left:-20px; top:-250px;filter:drop-shadow(0 40px 80px rgba(0,0,0,.6));pointer-events:none;transition:transform .8s cubic-bezier(.2,1,.3,1)}

.tel-img2{width:130%;max-width:650px; height: auto !important; position:absolute;left:-100px; top:-330px;filter:drop-shadow(0 40px 80px rgba(0,0,0,.6));pointer-events:none;transition:transform .8s cubic-bezier(.2,1,.3,1)}

.carousel-inner {position: relative; width: 100%; overflow: visible !important; }

.text-box{flex:1;text-align:right;min-width:300px}

.text-box h1{font-size:20px;font-weight:500;margin-bottom:25px;color:#fff}

.text-box-web{flex:1;text-align:right;min-width:300px}

.text-box-web h1{font-size:20px;font-weight:500;margin-bottom:25px;color:#fff}

.description-group p{font-size:15px;font-weight:300;line-height:1.7;margin-bottom:25px;color:#fff}

#carouselExampleIndicators .carousel-indicators{ position: absolute;right: 0;bottom: -60px;left: 70px;z-index: 2;display: flex; justify-content: center; padding: 0; margin-right: 15%; margin-bottom: 1rem;
    margin-left: 15%;}

.carousel {overflow: visible}

.carousel-indicators.indicadores-costumizados { bottom: 20px; gap: 20px}

.carousel-indicators.indicadores-costumizados button { width: 12px; height: 12px; border-radius: 50%; border: none; background-color: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease; margin: 0; opacity: 1}

.carousel-indicators.indicadores-costumizados button.active { background-color: #fff; transform: scale(1.2); border-radius: 14px; height: 10px; width: 40px}

.carousel-indicators.indicadores-costumizados button:hover { background-color: rgba(255, 255, 255, 0.7)}


@media(max-width:768px){
.slide-content{padding:50px 30px 125px 30px}

.slide-box{flex-direction:column;padding:40px 20px;text-align:center;gap:80px;height:auto}

.image-box{width:100%;display:flex;justify-content:center;order:1}

.tel-img{max-width:650px;width:130%;left:30px;top:-66px;position:relative;filter:drop-shadow(0 15px 30px rgba(0,0,0,.4))}

.tel-img2{max-width:650px;width:120%;left:12px;top:-66px;position:relative;filter:drop-shadow(0 15px 30px rgba(0,0,0,.4))}

.text-box{width:100%;text-align:center;order:2}

.text-box h1{font-size:24px;margin-bottom:25px; margin-top: -80px;}

.text-box-web{width:100%;text-align:center;order:2}

.text-box-web h1{font-size:24px;margin-bottom:25px; margin-top: -105px;}

.description-group p{font-size:14px;line-height:1.5;margin-bottom:-10px;padding:0 10px}

.carousel-control-next,.carousel-control-prev{width:10%}

#carouselExampleIndicators .carousel-indicators {left: 20px !important;}

.p_responsivo{display:none}

.carousel{background:0 0!important}

.custom-indicators{display:none}}

/*--------------------------------------------------------------------------------------
.....................................ABOUT US PAGE.....................................
---------------------------------------------------------------------------------------*/

.services-tags-section{padding:60px 20px;text-align:center}

.tags-title{color:#fff;font-size:32px;font-weight:700;margin-bottom:40px}

.tags-container{margin:0 auto;max-width:1000px}

.tag{background-color:#ab47bc;color:#fff;padding:10px 20px;border-radius:10px;font-size:14px;font-weight:500;
    transition:transform .3s ease,background-color .3s ease;cursor:default;white-space:nowrap}

.tag:hover{transform:translateY(-3px);background:0 0;border-color:#ab47bc;box-shadow:0 5px 15px rgb(169 83 184 / 89%)}

@media(max-width:768px){

    .services-tags-section{margin-top: -30px;}
    
    .tags-title{font-size:24px}

    }

    /* .tags-container{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;justify-content:flex-start!important;
        padding-bottom:15px;-webkit-overflow-scrolling:touch}

    .tag{flex:0 0 auto}

    .tags-container::-webkit-scrollbar{display:none}} */

/*--------------------------------------------------------------------------------------
.....................................BENTO LAYOUT.....................................
---------------------------------------------------------------------------------------*/
.distinction-section{background-color:#000;color:#fff;padding:80px 5%;display:flex;flex-direction:column;align-items:center;text-align:center}

.main-title{font-size:32px;font-weight:700;margin-bottom:60px;width:100%}

.grid-container{width:100%;display:flex;justify-content:center}

.bento-grid{display:grid;grid-template-columns:repeat(4,250px);grid-auto-rows:250px;gap:1rem;grid-template-areas:"box-1 box-2 box-3 box-4" "box-5 box-5 box-6 box-4"}

.icon-box{width:40px;height:40px;background:rgba(255,255,255,.1);border-radius:8px;display:flex;align-items:center;justify-content:center;margin-top:30px;margin-left:25px;font-size:18px}

.box{background-color:rgba(255,255,255,.03);border-radius:20px;border:1px solid rgba(255,255,255,.08);transition:transform .3s ease}

.box h3{font-size:17px;margin-bottom:20px;font-weight:700;text-align:left;margin-left:25px;margin-top:15px}

.box p{font-size:14px;color:#aaa;line-height:1.6;text-align:left;margin-left:25px}

.box:hover{transform:translateY(-5px);background:rgba(255,255,255,.226)}

.softvis-box{background-color:#c167cb;width:160px;height:70%;display:flex;align-items:center;justify-content:center;border-radius:6px;margin-right:20px}

.softvis-box span{font-size:32px;font-weight:900;color:#fff}

.card-image{margin-top:20px;overflow:hidden}

.card-image img{width:80%;height:auto;display:block;margin:0 auto}

.bento-grid.content{padding:30px}

.grid-container{display:grid;grid-template-columns:repeat(4,250px);grid-auto-rows:250px 250px;gap:1rem;grid-template-areas:"box-1 box-2 box-3 box-4" "box-5 box-5 box-6 box-4"}

.bento-content-wrapper {  display: flex; justify-content: space-between; align-items: center; height: 100%;}

.bento-content-wrapper .content { flex: 1; text-align: left}


.softvis-box {flex-shrink: 0; margin-left: 20px}


@media(max-width:768px){
    .distinction-section{padding:40px 20px}

    .main-title{font-size:24px;margin-bottom:30px}

    .grid-container{display:flex;justify-content:center;width:100%}

    .bento-grid{display:flex;flex-direction:column;gap:1.5rem}

    .box{width:100%;height:auto;padding-bottom:30px}

    .box h3,.box p{margin-left:25px;margin-right:25px}

    .softvis-box {width: 100%; height: auto; min-height: 60px; margin: 0 auto}

    .bento-content-wrapper { flex-direction: column; text-align: center}

    .bento-content-wrapper .content {text-align: center }

    .card-image img{width:60%}}


/*--------------------------------------------------------------------------------------
.....................................SECÇÃO STATUS.....................................
---------------------------------------------------------------------------------------*/
.status-section{background:linear-gradient(180deg,#000 34.94%,#220625 64.2%,#220625 93.47%);padding:60px 5%;width:100%}

.status-container{max-width:1200px;margin:70px auto;display:flex;justify-content:space-around;align-items:flex-start;flex-wrap:wrap;gap:40px}

.stat-item{text-align:center;display:flex;flex-direction:column;align-items:center}

.stat-label{color:#BC3ACB;font-size:16px;font-weight:600;text-transform:none;line-height:1.2;margin-bottom:10px}

.stat-number{color:#fff;font-size:64px;font-weight:800;margin:0;letter-spacing:-2px}

@media(max-width:768px){
    .stat-number{font-size:40px}}


/*--------------------------------------------------------------------------------------
.....................................Services PAGE.....................................
---------------------------------------------------------------------------------------*/

/*---------------------------------------Setor das soluções-------------------------------------------*/
.card-solutions.design { 
    min-height: 580px; 
    background: linear-gradient(to bottom, #1C1C1C, #050505); 
    border: 1px solid #2B2B2B; 
    position: relative;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: flex-start; 
    padding: 250px 20px 20px 20px;
    border-radius: 10px; 
    max-width: 320px; 
    margin: 0 auto;
    transition: transform 2.2s cubic-bezier(0.165, 0.84, 0.44, 1), 
                opacity 2.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    will-change: transform, opacity;
    opacity: 0; 
    transform: translateY(10px) scale(0.98);
}

.card-solutions:hover { 
    transform: translateY(-10px) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);}

.card-solutions.reveal-active { opacity: 1; transform: translateY(0) scale(1);}

#section-solutions { position: relative; z-index: 5; padding-top: 100px;  margin-top: 0;}

:root {
    --glass-bg: rgba(255,255,255,.177);
    --glass-blur: blur(12px);
    --transition: all .4s ease-in-out;
    --color-roxo: rgb(102 13 112 / 74%);
    --color-laranja: rgb(112 59 13 / 74%);
    --color-azul: #337ab7a6;
    --border-roxo: rgba(157, 1, 174, 0.63);
    --border-laranja: rgb(159 68 4 / 63%);
    --border-azul: rgb(4 83 159 / 63%);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(144, 46, 155, 0.1);
}

.card-solutions.roxo.active-scroll, 
.card-solutions.roxo:hover { 
    background: radial-gradient(circle at top right, var(--color-roxo) 0%, transparent 80%); 
    border-color: var(--border-roxo); 
    box-shadow: var(--shadow-card);
}

.card-solutions.laranja.active-scroll, 
.card-solutions.laranja:hover { 
    background: radial-gradient(circle at top right, var(--color-laranja) 0%, transparent 80%); 
    border-color: var(--border-laranja); 
    box-shadow: var(--shadow-card);
}

.card-solutions.azul.active-scroll, 
.card-solutions.azul:hover { 
    background: radial-gradient(circle at top right, var(--color-azul) 0%, transparent 80%); 
    border-color: var(--border-azul); 
    box-shadow: var(--shadow-card);
}

.solutions-info { text-align: center; width: 100%;}

.solutions-info h1 { font-size: 20px; margin-bottom: 15px; font-weight: 500; line-height: 1.5; text-align: center; color: white;}

.solutions-info p { font-size: 15px; color: rgba(255, 255, 255, 0.6); margin-bottom: 30px; text-align: center; }

.responsivo-paragrafo p { display: none; font-size: 15px; color: rgba(255, 255, 255, 0.6); margin-bottom: 30px; text-align: center; line-height: 1.5; }

.solutions-img { position: absolute; top: -30px; width: 100%; display: flex; justify-content: center; }

.solutions-img img { width: 300px; height: auto; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5)); }

.solutions-title { max-width: 1200px; margin: 0 auto 20px auto; text-align: center;}

.solutions-title h1 { font-size: 50px; line-height: 1.6; font-weight: 600; color: #ffffff; margin-bottom: 20px;  }

.solutions-title h2 { font-size: 20px; line-height: 1.6; font-weight: 400; color: #ffffff; margin-bottom: 60px;}

.solution-botao { display: flex; justify-content: center; margin-top: 80px; padding-bottom: 60px; }


@media (max-width: 768px) {

.solutions-title h1 { font-size: 16px; }

.solutions-title h2 { font-size: 14px; }

.solutions-info p { display: none; }

.card-solutions.design { min-height: 350px; padding: 160px 10px 20px 10px; }

.solutions-img img { width: 200px; }

.solutions-img { top: 0px; }

.responsivo-paragrafo p { display: block; font-size: 12px; margin-bottom: 5px; }

.solution-botao { margin-top: 20px; }

}
/*-------------------------------------------Faixa das redes soluções--------------------------------*/
.phrases-container { width: 100%; overflow: hidden; padding: 40px 0; position: relative; }

.solutions-wrapper { background-color: #1d061c; padding: 20px 0; width: 120%; margin-left: -10%; transform: rotate(-3deg); display: flex; align-items: center; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); white-space: nowrap; }

.solutions-track { display: flex; gap: 50px; align-items: center; animation: scroll 25s linear infinite; white-space: nowrap; }

.solutions-items { display: flex; align-items: center; gap: 60px; }

.solutions-items p { font-size: 20px; padding: 5px; font-weight: 500; color:white; }

@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.star-divider { width: 25px; height: auto; flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)); }

/* Wrapper dos Retângulos */
.rects-wrapper { flex-direction: column; gap: 16px; display: none; }

.rect { height: 60px; width: 70%; border-radius: 16px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: #ffffff; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.1); transition: transform 1.8s cubic-bezier(0.23, 1, 0.32, 1), opacity 2s ease; will-change: transform, opacity; }

.rect.purple { background: radial-gradient(circle at top right, rgb(102 13 112 / 74%) 0%, transparent 80%); border-color: rgba(157, 1, 174, 0.63); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(144, 46, 155, 0.1); }

.rect.orange { background: radial-gradient(circle at top right, rgb(112 59 13 / 74%) 0%, transparent 80%); border-color: rgb(159 68 4 / 63%); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(144, 46, 155, 0.1); }

.rect.blue { background: radial-gradient(circle at top right, #337ab7a6 0%, transparent 80%); border-color: rgb(4 83 159 / 63%); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(144, 46, 155, 0.1); }

.degrau-dir { transform: translateX(100%) scale(0.9); }

.degrau-esq { transform: translateX(-100%) scale(0.9); }

.rect.show { opacity: 1; transform: translateX(0) scale(1); }

.rect-content { display: flex; align-items: center; gap: 12px; }

.rect-content svg, .rect-content i { width: 24px; height: 24px; opacity: 0.9; }

.texto-direita { justify-content: flex-end !important; text-align: right; }

.rect:nth-child(1) { transition-delay: 0.1s; }
.rect:nth-child(2) { transition-delay: 0.2s; }
.rect:nth-child(3) { transition-delay: 0.3s; }
.rect:nth-child(4) { transition-delay: 0.4s; }
.rect:nth-child(5) { transition-delay: 0.5s; }

@media (max-width: 768px) {
.rects-wrapper { display: flex !important; align-items: center; flex-direction: column; width: 100%; overflow-x: hidden; padding: 40px 0; align-items: stretch; }
.rect { display: flex !important; width: 75% !important; opacity: 0; position: relative; }
.degrau-dir { align-self: flex-end; margin-right: 5%; transform: translateX(80%) scale(0.9); }
.degrau-esq { align-self: flex-start; margin-left: 5%; transform: translateX(-80%) scale(0.9); }
.rect.show { opacity: 1 !important; transform: translateX(0) scale(1) !important; }
.phrases-container { display:none; }
}

/*--------------------------------------Secção de exemplos de soluções----------------------------*/
.project-content { background:linear-gradient(171deg, #000 34.94%, #220625 64.2%, #220625 93.47%); padding: 60px 0; }

.card-example.design { min-height: 400px; background:linear-gradient(to bottom, #1C1C1C, #050505); border: 1px solid #2B2B2B; border-radius: 10px; position: relative; display: flex; flex-direction: column; align-items: center; overflow: visible; max-width: 320px; margin: 0 auto; margin-top: 100px; margin-bottom: 120px; }

.card-example:hover { box-shadow: 0 4px 6px rgba(168, 167, 167, 0.434); }


.card-example.roxo:hover { 
    border-color: rgba(157, 1, 174, 0.63); 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(144, 46, 155, 0.1); 
}

.card-example.laranja:hover { 
    border-color: rgba(159, 68, 4, 0.63); 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(144, 46, 155, 0.1); 
}

.card-example.azul:hover { 
    border-color: rgba(4, 83, 159, 0.63); 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(144, 46, 155, 0.1); 
}

.example-info { width: 100%; text-align: center; margin-top: 40px; }

.example-info p { font-size: 18px; color: white; font-weight: 600; margin-bottom: 15px; }

.hr-costum { background-color: #696464; width: 70%; height: 1px; margin: 20px auto; border: none; opacity: 1; }

.example-stack { position: relative; width: 130%; margin-top: 70px; }

.example-layer { position: absolute; left: 50%; height: 120px; background: #757575; border-radius: 20px 20px 0 0; border: 1px solid #444; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); }

.layer-1 { top: -30px; opacity: 0.4; z-index: 1; width:70%; transform: translateX(-50%) scale(0.9); }

.layer-2 { top: -15px; width: 75%; z-index: 2; transform: translateX(-50%) scale(0.95); }

.card-example.design:hover .layer-1 { top: -60px; opacity: 0.5; transform: translateX(-50%) scale(0.92); }

.card-example.design:hover .layer-2 { top: -35px; opacity: 0.8; transform: translateX(-50%) scale(0.97); }

.card-example.design:hover .main-image { transform: translateX(-50%) translateY(-10px); }

.main-image { position: absolute; left: 50%; transform: translateX(-50%); transition: transform 0.4s ease; z-index: 3; width: 85%; border-radius: 20px; overflow: visible; }

.main-image img { width: 100%; display: block; object-fit: cover; border-radius: 30px;}

.btn-arrow-wrapper { position: absolute; bottom: -20px; right: -15px; width: 100px; height: 100px; border: 5px solid #220625; border-radius: 50%; }

.btn-arrow-wrapper:hover { transform: scale(1.1); background-color: #9d26da; }

/* --- COMPORTAMENTO MOBILE (Apenas nesta secção) --- */
@media (max-width: 768px) {
.design-cards-section.container.text-center { margin-top: -30px; }

.project-content { padding: 0px 0; }

.layer-1, .layer-2 { display: none; }

.example-stack { margin-top: 30px; }

.card-example.design { max-width: 260px; min-height: 300px; }

.design-cards-section { position: relative; display: block !important; height: 650px; overflow: visible !important; }

.design-cards-section .col-md-4 { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; 
    width: 100% !important; max-width: 320px !important; transition: all 0.5s ease; }
.design-cards-section .col-md-4:nth-child(1) { z-index: 3; top: 0; }

.design-cards-section .col-md-4:nth-child(2) { z-index: 2; top: 50px; opacity: 0.8; transform: translateX(-50%) scale(0.95) !important; }

.design-cards-section .col-md-4:nth-child(3) { z-index: 1; top: 100px; opacity: 0.6; transform: translateX(-50%) scale(0.9) !important; }

@keyframes arcoSaida { 0% { transform: translate(-50%, 0) rotate(0deg); opacity: 1; } 100% { transform: translate(120%, -150%) rotate(40deg); opacity: 0; } }
.card-em-saida { animation: arcoSaida 0.8s forwards !important; z-index: 100 !important; }
}

/*--------------------------------------------------------------------------------------
.....................................PORTOFOLIO PAGE.....................................
---------------------------------------------------------------------------------------*/
#pills-tabContent .tab-pane { max-width: 1000px; margin: 0 auto; width: 100%;}

#pills-tab .nav-link.active { background-color: #a855f7; color: #fff; border: 1px solid #a855f7; }

#pills-tab .nav-link { background-color: #9b9b9b33; color: #fff; font-size: 15px; border-radius: 10px; border: 1px solid #9b9b9b33; padding: 10px 35px;}

#pills-tab .nav-link:hover { background-color: #a855f7; color: #fff; border: 1px solid #a855f7;}

#pills-tab .nav-item { margin: 40px 10px;}

.item-portfolio { width: 75%; margin: 0; padding: 0;}

.portfolio-card { position: relative; border-radius: 15px; overflow: hidden; aspect-ratio: 16 / 11;}

.portfolio-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;}

.portfolio-card:hover img { transform: scale(1.05);}

/* Barra de Vidro (Overlay) */

.card-overlay{ position: absolute; bottom: 20px; left: 20px; right: 20px; background: rgb(0 0 0 / 17%);
    backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 15px 20px;}

.overlay-content{display: flex; justify-content: space-between; align-items: center;}

.overlay-content h3 { color: white; font-size: 11px; margin: 0; font-weight: 600;}

.overlay-content span {color: white; font-size: 8px; letter-spacing: 1px;}

@media (max-width: 768px) {


    #pills-tab li:not(:first-child) { display: none; }

    #pills-tabContent {margin-bottom: 50px; }
}

/*--------------------------------------------------------------------------------------
.....................................CONTACTS PAGE.....................................
---------------------------------------------------------------------------------------*/
.contacts-description{color: #fff;}

.contacts-description h1 {font-size: 35px; margin-bottom: 50px; font-weight: 800;}

.contacts-description p {font-size: 15px; margin-bottom: 50px;}

.icon-wrapper { display: flex; justify-content: center; align-items: center;}

.contact-icon, .mapa-icon { width: 24px; height: auto; margin-right: 20px;}

.address-content p {font-size: 14px; line-height: 1.6; color: #eee;}

.contacts-path {font-size: 15px; color: #fff;}

.contact-space { padding-bottom: 20px;}

.contact-glass-card { background: linear-gradient(150deg, #1C1C1C 31%, #4a2f4d 65%); backdrop-filter: blur(12px);  border: 1px solid #4a2f4d; padding: 50px;
    border-radius: 10px}

.form-control { background-color: rgba(255, 255, 255, 0.05) !important; border: 1.5px solid rgba(255, 255, 255, 0.15) !important; 
    color: white !important; font-size: 14px !important; }

.form-control:focus { background-color: rgba(255, 255, 255, 0.08) !important; border-color: #a32cc4 !important; box-shadow: 0 0 0 0.25rem rgba(163, 44, 196, 0.25);}

.btn-submit { background: white;  color: black; border-radius: 50px; padding: 5px 20px; font-weight: 500; border: 2px solid white; transition: 0.3s;
    outline: 1px solid white; outline-offset: 8px; font-size: 13px; }

input.form-control::placeholder,textarea.form-control::placeholder { color: white; font-weight: 100; font-size: 13px;
    letter-spacing: 0.5px;}

.btn-submit:hover { background: transparent;  color: white;  outline: none; outline-offset: 0;}

.perguntas h1 {font-size: 25px; margin-bottom: 20px; font-weight: 800; color: #fff; text-align: left;}

.radio-group .button {display: flex; justify-content: center; align-items: center; max-width: 160px; margin-bottom: 20px;}

.radio-group .button-label { display: flex; padding: 10px; border-radius: 5px; border: 1.5px solid rgba(255, 255, 255, 0.15);
    font-size: 13px; color: rgba(255, 255, 255, 0.651); cursor: pointer; background-color: rgba(255, 255, 255, 0.05); font-weight: 200;}

/* hide radio */
input[type="radio"] { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;}

/* checked radio */
input[type="radio"]:checked ~ .button-label { background-color: rgba(170, 31, 130, 0.601) ; color: white; border: 1.5px solid rgb(63, 7, 63);}

.contact-glass-card-mobile { display: none;}

.contact-glass-card .form-control {padding: 20px 20px !important;}


#contact-glass-card {
    position: relative; /* Obrigatório para o absolute do toast funcionar */
    overflow: visible !important; /* Permite que o toast "saia" se for necessário, ou evita que o corte */
}



@media (max-width: 768px) {

    .contacts-section {padding: 0px 0px; margin-top: -130px;}

    .contacts-desktop {display:none}

    .contact-glass-card-mobile { display: block;}

    .hero-contacts { min-height: 50vh;}

    .contact-glass-card {margin-top: 150px; padding: 30px;}

    .perguntas h1 {font-size: 18px;}

    .justify-content-start {  justify-content: center !important;}
}
/*--------------------------------------------------------------------------------------
.....................................Versáo dos contactos para mobile..................
---------------------------------------------------------------------------------------*/

.contact-glass-card-mobile { padding: 0px 20px; text-align: center;color: white;}

.contact-header-mobile { margin-bottom: 50px;}

.contact-title-mobile {font-weight: 800; font-size: 26px; line-height: 1.3; color: #fff; margin-bottom: 25px;}

.contact-description-mobile { font-size: 15px; line-height: 1.6; color: #dfdfdf; max-width: 90%;  margin: 0 auto; }

.contact-top-row { display: flex;  justify-content: center; align-items: flex-start; gap: 15px; margin-bottom: 40px;}

.contact-item-mobile { flex: 1; display: flex; flex-direction: column; align-items: center;}

.contacts-path-mobile { font-size: 13px; color: #fff; margin-top: 10px; word-break: break-all;}

.map-section-mobile { display: flex; flex-direction: column; align-items: center;}

.address-block-mobile { margin-bottom: 30px; width: 100%;}

.city-title { font-weight: 800; font-size: 15px; margin-bottom: 8px; color: #fff;}

.address-text { font-size: 14px; line-height: 1.5; color: #eee; margin: 0;}

.icon-wrapper-mobile, .main-map { display: flex; justify-content: center; align-items: center; height: 30px;}

.contact-icon-purple, .mapa-icon-purple { color: #a32cc4; font-size: 24px;}

.nota-discreta {font-size: 15px; font-weight: 300; opacity: 0.8; margin-left: 10px;}



/*--------------------------------------------------------------------------------------
.....................................Explorar............................
---------------------------------------------------------------------------------------*/
.show-projects-card { position: relative;}

.show-projects-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px;}

.legenda-overlay{ position: absolute; bottom: 20px; left: 20px; right: 20px; background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 15px 20px;}

.legenda-content{display: flex; justify-content: space-between; align-items: center;}

.legenda-content h3 { color: white; font-size: 11px; margin: 0; font-weight: 600;}

.legenda-content span {color: white; font-size: 8px; letter-spacing: 1px;}

.show-projects-description {padding: 25px; color: white; text-align: right; }

.show-projects-description h1 {font-size: 30px; font-weight: 600; margin-bottom: 50px;}

.show-projects-description h2 {font-size: 15px; margin-bottom: 90px; line-height: 1.5;}

.custom-wrapper { max-width: 1000px !important; margin: 0 auto !important; width: 100% !important; padding-left: 15px; padding-right: 15px;}

@media (max-width: 768px) {

    .portfolio-description{ text-align: center;}

    .projetos:nth-child(2),
    .projetos:nth-child(3) {
        display: none;
    }

}

.fotos-container {background:linear-gradient(180deg, #000 34.94%, #220625 64.2%, #220625 93.47%); padding: 60px 0; margin-top: 20px;}

.fotos-projetos {width: 100%; margin: 0 auto; max-width: 1200px; padding: 20px; display: flex; flex-direction: column; align-items: center;}

.grupo-fotos { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 30px; scrollbar-width: none;  -ms-overflow-style: none;  
    justify-content: center;}

/* Chrome, Safari, Edge */
.grupo-fotos::-webkit-scrollbar { display: none;}

.projetos { min-width: 300px; height: 200px;  background: #fff; border-radius: 8px;  overflow: hidden; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); transition: transform 0.3s ease;}

.projetos img { width: 100%; height: 100%; object-fit: cover;}

.projeto-carrossel {padding:60px 0; overflow-x: hidden; overflow-y: visible !important;}

.carousel-indicators.indicadores-projetos { bottom: 20px; gap: 20px}

.carousel-indicators.indicadores-projetos button { width: 10px; height: 10px; border-radius: 50%; border: none; background-color: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease; margin: 0; opacity: 1}

.carousel-indicators.indicadores-projetos button.active { background-color: #fff; transform: scale(1.2); border-radius: 14px; height: 7px; width: 30px}

.carousel-indicators.indicadores-projetos button:hover { background-color: rgba(255, 255, 255, 0.7)}

.custom-indicators{position:absolute;bottom:60px;left:50%;transform:translateX(calc(500px - 100% - 40px));display:flex;gap:4px;font-size:14px;letter-spacing:2px;font-weight:300;color:#fff;z-index:20}

#carouselExampleIndicators .indicadores-projetos{ position: absolute;right: 0;left: 70px;z-index: 2;display: flex; justify-content: center; padding: 0; margin-right: 15%; margin-bottom: 50px;
    margin-left: 15%;}


@media(max-width:768px){
.slide-content{padding:25px 30px 125px 30px}

.carousel-control-next,.carousel-control-prev{width:10%}

#carouselExampleIndicators .indicadores-projetos { left: 20px !important; }

.p_responsivo{display:none}

.carousel{background:0 0!important}
}