:root
{
    --main-color: #f3f3f3;
    --contrast-color: #B89B72;
    --back-color: #ed7c2e;
    --dark-gray: #434141;
    --dark-green: #004041;
    --font-normal: calc(10px + 0.5vw);
    --font-medium: calc(.75rem + 1vw);
    --font-big: calc(2rem + 1vw);
    --font-small: calc(0.25rem + .75vw);
    --font-extrabig: calc(3rem + 1vw);
    scroll-behavior: smooth;   
    font-family: 'Roboto', sans-serif;
}

html
{
    scroll-behavior: smooth;   
    
}

body
{
    background-color: var(--dark-green);
}

.fullsize-container
{
    height: calc(100dvd - 15%);
}

.container
{
    width: 90%;
    margin: 0 auto;
}

.flex
{
    display: flex;
}

.tittle
{
    font-size: var(--font-big);
    font-weight: 900;
    text-transform: uppercase;
    color: var(--contrast-color);
    text-align: center;
    
}

.tittle-black
{
    font-size: var(--font-big);
    font-weight: 900;
    text-transform: uppercase;
    color: black;
    text-align: center;
}

.tittle.dark
{
    color: var(--dark-green);
}

header
{
    height: 100svh;
    transition: .3s ease-in-out;
}

nav {
    display: flex;
    height: 9%;
    width: 100%;
    z-index: 100;   
    position: absolute;
    background: linear-gradient(0deg, rgba(0,64,65, 0) 0%, rgba(0,64,65,1) 100%);
    animation: stickmenu .5s ease-in-out;
}

@keyframes stickmenu {
    0% {
        background: linear-gradient(0deg, rgba(0,64,65, 0) 0%, rgba(0,64,65,1) 100%);
        position: absolute;
        border-bottom: 0px solid var(--contrast-color);
    }
    100% {
        background-color: var(--dark-green);
        position: fixed;
        border-bottom: 5px solid var(--contrast-color);
    }
}

.sticky {
    
    position: fixed; /* 🔹 Mantém fixo após a animação */
    background-color: var(--dark-green); /* 🔹 Mantém o fundo */
    border-bottom: 2px solid var(--contrast-color);
    top: 0;
    width: 100%;
}
  
  /* Hack para prevenir movimentos bruscos nos elementos da página quando o header fica fixo */
  .sticky + .content {
    padding-top: 102px;
  } 

#nav-content
{
    padding: 2% 0 1% 0;    
    justify-content: space-between;
    align-items: center;

}

#nav-content img
{
    width: 12vw;
}

#nav-content ul
{
    display: flex;
    gap: 8%;
    flex-wrap: nowrap;
    width: 80%;
    
    justify-content: flex-end;
    
}

#nav-content li
{
    font-size: var(--font-normal);
    color: white;
}

#nav-content li.active::after
{
  display:block;
  content: '';
  border-bottom: solid 2px var(--contrast-color);  
  transform: scaleX(1);  
  transition: transform 250ms ease-in-out;
  width: 100%;;
}

#nav-content li:after
{
  display:block;
  content: '';
  border-bottom: solid 2px var(--contrast-color);  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
  width: 100%;;
}

#nav-content li:hover::after
{
  transform: scaleX(1); 
}


.hamburger-menu {
    display: none;
    cursor: pointer;
  }
  
  .bar {
    width: 25px;
    height: 3px;
    background-color: var(--contrast-color);
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
  } 
  
  .bar:nth-child(2) {
    width: 20px;
  }
  
  .bar:nth-child(3) {
    width: 15px;
  }
  
  .active .bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  
  .active .bar:nth-child(2) {
    opacity: 0;
  }
  
  .active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
  }

#banner
{
    width: 100%;
    height: 100%;
    /* background-image: url(../Image/banner-bg.png); */
    background-size: cover;    
    background-position: center;    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    background: linear-gradient(0deg, rgb(0 64 65) 0%, rgb(0 64 65 / 4%) 100%)
    /* background-color: rgba(0, 64, 65, 0.24); */
    /*
    background: rgb(2,0,36);
    background: linear-gradient(4deg, rgb(10 10 41 / 100%) 0%, rgba(10,10,41,100) 100%);
    */
}

#banner video
{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -2;
    filter:opacity(60%);
    object-fit: cover;
    
}

#svg-container
{
    width: 20%;    
    height: 35%;    
}

/*
#banner video::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
}
*/

#banner h1
{
    font-size: var(--font-big);
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;    
    width: 90%;

}

#banner h1 span
{
    color: var(--contrast-color);
}

#about-us
{
    position: relative;
    width: 100%;    
    /* z-index: -2; */
    /* scroll-margin-top: -8em; */
    padding: 5% 0 2% 0;
    

}

#about-us::after
{
    content: "";
    position: absolute;
    background-image: url(../Image/about-us-bg.webp);    
    background-size: cover;    
    background-position: center;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.3;
    z-index: -1;

}

#about-us-content
{
    
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;   
}

.tittle span
{
    color: var(--contrast-color);
}

.background-tittle
{    
    font-size: calc(5rem + 1vw);
    color: var(--contrast-color) !important;
    font-weight: 900;
    opacity: 0.5;
    position: absolute;

}

#about-us-text
{
    width: 60%;
    height: 90%;
    /* background-color: var(--back-color); */
    padding: 5%;
    /* font-size: var(--font-medium); */
    /* font-size: 14px; */
    font-size: var(--font-normal);
    text-align: justify;
    text-justify: inter-word;
    color: white;
}


#about-us-text p
{
    padding-top: 2%;
    margin: 6% 0 1% 0;
    line-height: 2;
}

#about-us-text h1
{
    text-align: left;
    color: white;
}

#about-us-text a
{
    font-size: var(--font-normal);
    background-color: var(--contrast-color);
    padding: 2%;
    display: inline-block; /* Garante que a margem funcione */
    margin-top: 15px; /* Ajuste o valor conforme necessário */
    color: black;
    font-weight: bold;
    border-radius: 20px;
    transition: 0.5s ease;
}

#about-us-text a:hover
{
    /* transform: scale(1.05); */
    /* background-color: var(--dark-green); */
    /* border: 2px solid white; */
    background-color: white;
    color: var(--dark-green);

}


#about-us-img
{
    width: 40%;
    padding: 5% 0 5% 5%;
    display: flex;
    height: 100%;
    margin-right: -6%;
    align-items: flex-end;
}

#about-us-img img
{
    
    object-fit: contain;

}




.servicos-container
{
    background-color: var(--dark-green);
    display: flex;
    flex-wrap: wrap;
}

.servicos-container.white
{
    background-color: white;
}

.servicos img {
    
    height: auto;
    border-radius: 10px; /* Borda arredondada para um visual mais elegante */
    /* border-radius: 0px 40px 0px 40px; */
    box-shadow: 13px 13px 0px 0px #0c252242;
    z-index: 1;
}

.servicos
{
    padding: 5% 0;
    color: white;
    display: flex;
    flex-wrap: wrap;
    gap: 5%;
    text-align: justify;
    font-size: var(--font-normal);
    line-height: 2;
    position: relative;
    
}

.servicos:nth-child(1) .conteudo
{
    z-index: 1;
}

.service-link
{
    font-size: var(--font-normal);
    background-color: transparent;
    padding: 1% 2%;
    display: inline-flex;
    margin-top: 5%;
    color: var(--contrast-color);
    font-weight: 700;
    border-radius: 28px;
    transition: 0.5s ease-in-out !important;
    border: 1px solid var(--contrast-color);
    /* width: 70%; */    text-align: center;
    align-items: center;
    height: var(--font-extrabig);
}

.service-link:hover
{
    color: var(--dark-green);
    background-color: white;
    border-color: white;
}


.servicos div:has(img) 
{
    z-index: 1;
}


#firt-block::after
{
    content: "";
    position: absolute;
    background-image: url(../Image/2386.webp);
    background-size: cover;
    background-position: center;
    top: 0px;
    right: 0px;
    bottom: -100%;
    left: 0px;
    opacity: 0.2;
    z-index: 0;
    
}

#second-block::after
{
    content: "";
    position: absolute;
    background-image: url(../Image/transport-logistics-products.webp);
    background-size: cover;
    background-position: center;
    top: 0px;
    right: 0px;
    bottom: -115%;
    left: 0px;
    opacity: 0.15;
    z-index: 0;
}

#third-block::after
{
    content: "";
    position: absolute;
    background-image: url(../Image/third.webp);
    background-size: cover;
    background-position: center;
    top: 0px;
    right: 0px;
    bottom: -147%;
    left: 0px;
    opacity: 0.15;
    z-index: 0;
}

.servicos-container.white .servicos
{
    color: black;
}

.servicos-container.white .service-link:hover
{
    color: white;
    background-color: var(--dark-green);
}


.servicos.reverse {
    flex-direction: row-reverse;
}


.conteudo
{
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;

}

.subtitle-contrast
{
    font-size: var(--font-medium);
    font-weight: 900;
    color: var(--contrast-color);
    text-transform: uppercase;
    margin: 2% 0;
}

.subtitle-dark
{
    font-size: var(--font-medium);
    font-weight: 800;
    color: var(--dark-green);
    text-transform: uppercase;
    
}

.top-offset-image
{
    margin-top: -15vh;
}

.servicos-container.white .sub-servicos-item
{
    border-color: var(--dark-green);
    color: black;

}

.sub-servicos
{
    display: flex;
    gap: 5%;
    padding: 0 0 5% 0;

}

.sub-servicos-item
{
    width: 30%;
    border: 1px solid var(--contrast-color);
    padding: 2%;
    color: white;    
}


.sub-servicos-item h1
{
    font-size: var(--font-normal);
    font-weight: bold;
    margin-bottom: 5%;
}



#services
{
    
    width: 100%;
    scroll-margin-top: 1em;
    position: relative;
    /* padding: 5% 0 10% 0; */
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

/*
#services::after
{
    content: "";
    position: absolute;
    background-image: url(../Image/predio.webp);    
    background-size: cover;    
    background-position: center;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.71;
    z-index: -1;
}
*/

#services-title
{
    padding: 5% 0;
    font-size: calc(2.7rem + 1vw);
 
}

.dark-tittle
{
    color: var(--dark-green);
}

#services-caontent
{
    display: grid;
    /* grid-gap: 5%; */
    grid-template-columns: 1fr 1fr 1fr;
    background-color: var(--dark-green);
    justify-content: center;
    align-items: center;
    justify-items: center;
    padding: 5%;
}

.services-itens
{
    height: 100%;
    width: 100%;
    padding: 5%;
    transition: .1s cubic-bezier(0.65, 0.05, 0.36, 1);
    /* background-color: var(--back-color); */
    display: grid;    
    justify-items: center;
    /* border-color: var(--contrast-color); */    
    border-right: 1px solid var(--contrast-color);
    border-left: 1px solid var(--contrast-color); 
    margin: 5% 0;
    align-items: start;
    transition: .3s ease-in-out;
    animation-delay: 0s;
}

.services-itens:hover h3 a img
{
    /* transform: translate(0, -10%); */
    /* background-color: #ff7a1f; */
    /* padding-bottom: 10%; */
    
    background-color: var(--dark-green);
    z-index: 10;
    transform: translate(0, -10%);
    
}
/* 
.services-itens:hover h3
{
    color: black;
    transform: translate(0, -10%);
}

.services-itens:hover img
{
    transform: translate(0, -10%);
} */

.services-itens:hover p
{
    
}

.services-itens h3
{
    text-align: center;
    color: var(--contrast-color);
    font-size: var(--font-normal);
    font-weight:bolder;
    text-transform: uppercase;
    
    padding-bottom: 3%;
}

.services-itens img
{
    width: 30%;
}

.services-itens p
{    
    text-align: center;
    text-justify: inter-word;    
    color: white;
}

#presolanized-services
{
    margin: 5% 0;
    text-align: center;
    font-weight: bold;
    
}

.link-arrow {
    text-decoration: none;
    font-weight: bold;
    color: #003d3d;
    display: inline-flex;
    align-items: center;
    font-size: var(--font-medium)
  }
  
  .link-arrow::after {
    content: "▶"; /* Pode usar → ou ➜ se preferir */
    font-size: 0.8em;
    margin-left: 8px;
    color: #b29467;
  }


#contact
{    
    scroll-margin-top: -1em;
    position: relative;    
    /* background-color: white; */
    
}


#contact::after
{
    content: "";
    position: absolute;
    background-color: var(--dark-green);
    background-image: url(../Image/teamwork-br.webp);    
    background-size: cover;    
    background-position: center;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.71;
    z-index: -1;
}

#contact-container
{
    background-color: var(--dark-gray);
    display: flex;
    margin-top: 5%;

}

#contact-container h1
{
    color: var(--dark-green);
    margin: 7% 0 5% 0;
    
}

#contact-form-container p
{
    text-align: center;
    color: var(--dark-green);
    font-weight: 600;
}

#contact-container div img
{
    width: 100%;
    height: 100%;
    object-fit: cover; /* para preencher todo o espaço da div */
    filter: grayscale(15%);
}

#contact-back-tittle
{
    top: -3%;
   
}

#contact-form-container
{
    width: 80%;
    padding: 3%;
    background-color: #D9D9D9;
    position: relative;
    
    
}

#contact-img-div
{
    width: 48%;
    
}

#contact-form
{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 5%;
}

#contact-form label
{
    color: white;
}

#contact-form input
{
    width: 45%;
    background-color: white;
    margin-bottom: 5%;
    font-size: var(--font-small);
    padding: 2%;
    color: var(--dark-green);
    text-align: left;
    border-radius: 30px;
    
}

#contact-form textarea
{
    background-color: white;
    width: 100%;
    margin-bottom: 5%;
    font-size: var(--font-small);
    color: var(--dark-green);
    line-height: 300%;
    padding: 2% 2%;
    border: none;
    border-radius: 20px;
}

#contact-form input[type="submit"] {
    background-color: var(--dark-green); /* cor de fundo */
    color: white; /* cor do texto */
    padding: 12px 20px; /* preenchimento */
    border: none; /* borda */
    border-radius: 20px; /* borda arredondada */
    cursor: pointer; /* cursor ao passar o mouse */
    margin-bottom: 0;
    width: 30%;
    margin-left: 70%;    
    text-align: center;
  }
  
  #contact-form input[type="submit"]:hover {
    background-color: var(--contrast-color)
  }

#leftandright
{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

#adress-div
{
    
    margin: 5% 0 0 0;
    font-size: calc(var(--font-small) + .25rem);    
    color: var(--dark-green);

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
   
    margin: auto;
    padding: 20px;
    
    
}

#adress-div a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;    
    border-radius: 5px;
    text-decoration: none;
    color: var(--dark-green);
    font-weight: bold;
    transition: scale 0.3s;
}

#adress-div a:hover {
   scale: 1.03;
}

#adress-div a:nth-last-of-type(1) {
    grid-column: span 2;
}

#map, #social-media {
    grid-column: span 2;
    text-align: center;
    margin-top: 20px;
}

#map iframe {
    width: 100%;
    height: 300px;
    border-radius: 10px;
    position: relative;
    z-index: 0;
}



#social-media li {
    display: inline-block;
}

#social-media a {
    font-size: 24px;
    color: #333;
    transition: color 0.3s;
    background-color: transparent;
}

#social-media a:hover {
    color: #007bff;
}

#social-media li {
    display: inline-block;
}


#social-media
{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: center;
    justify-content: space-around;
    align-items: center;
    transition: .3s ease-in-out;

}

#social-media li
{
    font-size: var(--font-medium);
}

#social-media li a i
{
    color: var(--dark-green);
    transition: .3s ease-in-out;
    
}

#social-media li:hover a i
{
    color: var(--contrast-color);
    transform: scale(1.1);
}

#patners
{    
    min-height: 70svh;
    padding: 5% 0 0 0;
    background-color: white;
    position: relative;
}

#partners-title
{
    color: var(--dark-green);
    text-align: center;
}

#partines-back-title
{
    top: 1%;
    text-align: center;
    left: 28%;
    margin: 0 auto;
}




#part-container
{
    display: flex;
   
    background-color: #003d3d;
    min-height: 57vh;
    margin-top: 5%;
}

.empresas {
    display: flex;
    width: 92%;
    position: relative;
    justify-content: center;
}

.empresa {
    width: 60px;
    background-color: #004b4b;
    color: #c1a375;
    writing-mode: vertical-rl;
    text-align: center;
    font-size: var(--font-normal);    
    line-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: width 0.5s ease-in-out;
    border-left: 1px solid #ffffff44;
    position: relative;
}

/* Primeira empresa já começa expandida */
.empresa.ativa {
    width: 40%;
    background-color: #003d3d;
    color: white;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 5%;
    align-items: center;
    writing-mode: horizontal-tb;
    text-align: center;
}

.empresa h2,
.empresa .logo,
.empresa p 
{
    transition: 0.5s ease-in-out;
}

/* Animação de opacidade */
.empresa.ativa h2,
.empresa.ativa .logo,
.empresa.ativa p {
        
    text-align: justify;
    padding: 0 5%;
}

.empresa h2
{
    font-weight: bold;
    font-size: var(--font-medium);
    text-transform: uppercase;
}

.empresa.ativa.animada h2,
.empresa.ativa.animada .logo,
.empresa.ativa.animada p {
    opacity: 1;
}

.empresa.ativa h2 {
    font-size: var(--font-normal);
    font-weight: 200;
    margin-bottom: 10px;
    font-weight: bold;
}

.empresa .logo, 
.empresa p {
    display: none;
}

.logo {
    width: 50%;    
    transition: 0.5s ease-in-out;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    display: flex;
    padding: 5%;
    
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(123deg) brightness(108%) contrast(101%);

}

.logo:hover
{
    scale: 1.1;
}

.logo img
{
    width: 100%;
}

/* Desativa cliques temporariamente */
.empresas.bloqueado {
    pointer-events: none;
}



footer
{
    background-color: var(--dark-green);
    background-image: url(../Image/footer-bg.webp);
    
    width: 100%;
    transition: .3s ease;
    margin-top: -5vh;
}



#footer-content
{
    padding-top: 9%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
}

#grupo-a1
{
    width: 100%;
    text-align: center;
    margin: 0 0 2% 0;
}

#grupo-a1 h1
{
    font-size: var(--font-medium);
    font-weight: bold;
    text-transform: uppercase;
    color: var(--contrast-color);
    text-align: center;

}

#grupo-a1 span
{
    color: white;
}

#grupo-list
{
    display: flex;
    justify-content: space-around;
    margin: 5%;
    align-items: center;
}

.group
{
    width: 15%;
    transition: 0.3s ease-in-out;

}

.group:hover
{
    scale: 1.1;
}

.group img
{
    width: 100% !important;
}

#footer-logo
{
    width: 20%;
}


#footer-social-icons
{
    display: flex;
    font-size: var(--font-medium);
    color: white;
    width: 30%;
    justify-content: space-around;
}

#footer-social-icons li:hover
{
    transform: scale(1.1);
    color: black;
}
#sit-map
{
    width: 20%;
    font-size: var(--font-small);
    font-weight: bold;
    list-style: none;    
    padding-right: 5%;
    line-height: 150%;
    border-left: 1px solid white;
    text-align: center;
    transition: .3s ease;
}

#sit-map li:hover
{
    transform: scale(1.1);
    
}



#trademark
{
    font-size: var(--font-small);
    text-align: center;
    padding: 1% 0;
    background-color: var(--contrast-color);
    width: 100%;
    margin: 5% 0 0 0;
}





@media (max-width: 1023px) {
    
    nav
    {
        height: 10%;
    }

    nav.active
    {
        
        background-color: var(--dark-green);
        border-bottom: 1px solid var(--contrast-color);
    }

    .tittle
    {
        font-size: calc(1.2rem + 1vw);
    }

    #nav-content
    {
        
        flex-wrap: nowrap;
        flex-direction: row;
        align-content: center;
        justify-content: space-between;
    }

    .hamburger-menu {
      display: block;
    }

    #nav-content img
    {
        width: 45%;
    }

    
  
    #nav-content li.active::after
    {
        display: none;
    }

    #nav-content li.active
    {
        background-color: var(--contrast-color);
    }

    #nav-content ul {
      display: none;
      flex-direction: column;
      position: absolute;
      top: 66px;
      left: 0;
      width: 100%;
      background-color: var(--dark-green);
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      opacity: 0;
      height: 0;
      transition:.3s ease-in-out;
      z-index: 1003;
    }
  
    /* li {
      margin-right: 0;
      margin-bottom: 10px;
    } */

    #nav-content li
    {
        
    }
    
    #nav-content li a
    {
        padding: 5%;
        width: 100%;
        display: inline-block;
    }


    ul.active{
        display: flex !important;
        opacity: 1 !important;
        height: auto !important;
        transition: .3s ease-in-out;
    }

    #services-title
    {
        font-size: calc(1.2rem + 1vw)
    }

    #svg-container
    {
        width: 56%;
        margin-bottom: -10%;
    }

    #about-us
    {
        height: auto;
        padding: 27% 0 10% 0;
        scroll-margin-top: -3em;
    }

    #about-us-content
    {
        flex-wrap: wrap;
    }

    #about-us-text
    {
        width: 100%;
        margin-top: 10%;
        font-size: calc( var(--font-normal) + 0.1rem);
    }

    #about-us-img
    {
        display: none;
    }

    #services
    {
        
    }

    .conteudo
    {
        width: 100%;
        justify-content: center;

    }

    .top-offset-image
    {
        margin-top: auto;
        width: 100% !important;
        margin-bottom: 5%;
    }

    .sub-servicos
    {
        flex-wrap: wrap;
        gap: 10%;
    }

    .servicos div:has(img)
    {
        width: 100% !important;
        margin-bottom: 5%;
    }

    .sub-servicos-item
    {
        width: 100%;
        padding: 5%;
        margin: 5% 0;
    }

    #services-caontent
    {
        grid-template-columns: 1fr;
        /* display: block; */
    }

    .services-itens
    {
        
        margin-bottom: 5%;
    }

    #contact
    {
        scroll-margin-top: 2em;
    }

    #contact-container
    {
        flex-wrap: wrap;
    }

    #contact-img-div
    {
        width: 100%;
    }

    #contact-form-container
    {
        width: 100%;
    }

    #leftandright
    {
        flex-wrap: wrap;
        
    }

    #left-div
    {
        width: 100%;
    }

    #contact-form input
    {
        font-size: var(--font-medium);
        padding: 2% 2%;
        width: 100%;
    }

    

    #contact-form textarea
    {
        font-size: var(--font-medium);
        
        padding: 2% 2%;
    }

    #adress-div {
        grid-template-columns: 1fr;
    }
    
    #adress-div a,
    #adress-div a:nth-last-of-type(1),
    #map, 
    #social-media {
        grid-column: span 1;
        width: 100%;
    }

    #adress-div a
    {
        align-items: center;
        justify-content: center;
        font-size: var(--font-medium);
    }

    #patners h1
    {
        margin-bottom: 5%;
    }    
   
    #part-container
    {
        height: auto;
    }

    .empresas {
        flex-direction: column;
        align-items: center;
        margin-top: 5%;
    }

    .empresa {
        width: 100%;
        height: 60px;
        writing-mode: horizontal-tb;
        font-size: var(--font-normal);
        border-left: none;
        border-bottom: 1px solid #ffffff44;
        transition: height 0.5s ease-in-out; /* Adicionando transição */
    }

    .empresa.ativa {
        width: 100%;
        height: auto; /* Expansão na vertical */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 5%;
    }

    /* Animação de opacidade para os elementos internos */
    .empresa.ativa h2,
    .empresa.ativa .logo,
    .empresa.ativa p {
        opacity: 0;
        transition: opacity 0.5s ease-in-out 0.2s;
    }

    .empresa.ativa.animada h2,
    .empresa.ativa.animada .logo,
    .empresa.ativa.animada p {
        opacity: 1;
    }
     
    .empresa.ativa.animada h2
    {
        font-size: var(--font-big);
        text-align: center;
    }

    .logo
    {
        width: 100%;
        margin: 15% 0;
    }

    footer
    {
        margin-top: 0vh;
    }

    #footer-content
    {
        flex-wrap: wrap;
        justify-content: center;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        
        
    }
    #footer-content img
    {
        width: 60%;
    }

    #footer-social-icons
    {
        width: 100%;
        font-size: calc(var(--font-medium) + .75rem);
        margin: 3% 0;
    }

    #sit-map
    {
        width: 100%;
        border: none;
        text-align: center;
        font-size: var(--font-medium);
    }

    #trademark
    {
        font-size: var(--font-medium);
    }

    .background-tittle
    {
        font-size: var(--font-big);
    }
    
  }

  .whatsapp
{
    background: #25d366;
	color: white;
	position: fixed;
	bottom: 2%;
	left: 2%;
	font-size: 35px;
	display: flex;
	justify-content: center;
	align-items: center;
    z-index: 99999;
	width: 0;
	height: 0;
	padding: 30px;
	text-decoration: none;
	border-radius: 50%;
	animation-name: pulse;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
    
}

#whatsapp .whatsapp i
{
    font-style: normal;
    
    
}


@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
	}
	80% {
		box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
	}
}

.sociais-fixo {
    position: fixed;
    z-index: 99;
    right: 0;
    top: 40%;
    padding: 10px;
    background: var(--contrast-color);
}

.sociais-fixo a {
    display: block;
    color: black;
    margin: 10px 0;
    transition: .2s ease-in-out;
}

.sociais-fixo a:hover
{
    transform: scale(1.1);
    color: black;
}


/* Estilos do popup */
#popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.popup-content h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.popup-content p {
    font-size: 16px;
    margin-bottom: 0;
}

/* Classe para esconder o popup */
.hidden {
    display: none;
}

#popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
    z-index: 99999;
}