body {
     font-family: "Barlow", sans-serif;
     background-color: #f8f9fa;
     color: #333;
}
 
 .hero-image {
     border-radius: 76px;
     background: url(/img/banner.png) lightgray 50% / cover no-repeat;
     padding: 0 1rem;
     display: flex;
     width: 100%;
     height: calc(100vh - 155px);
     flex-direction: column;
     justify-content: center;
     align-items: center;
}
 .hero-image h1 {
     color: #FFF;
     text-align: center;
     font-family: "Barlow", sans-serif;
     font-size: 2rem;
     font-style: normal;
     font-weight: 400;
     line-height: 134.4%;
    /* 86.016px */
}
 .hero-image p {
     color: #FFF;
     text-align: center;
     font-family: "Barlow", sans-serif;
     font-size: 0.8rem;
     font-style: normal;
     font-weight: 200;
     line-height: normal;
}

 .video{

     border-radius: 32px;
     border: 1px solid rgba(85, 140, 195, 0.50);
     background: url(/img/logo-video.jpg) lightgray 50% / cover no-repeat;
     box-shadow: 0 60px 71px -49px rgba(192, 218, 243, 0.90)!important;
     display: flex;
     width: 90%;
     height: 250px;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     flex-shrink: 0;
     aspect-ratio: 489/275;
}
 .video-play-button-size svg {
     width: 138px;
     height: 138px;
     transition: width 0.2s, height 0.2s;
}
 .logo-header{
     width:200px;
     height: 80px;
     flex-shrink: 0;
     aspect-ratio: 269/107;
}
 .video-play-button svg {
     background-color: #008DD0;
    /* cor de fundo ao passar mouse */
     opacity: 0.9;
    /* opacidade ao passar mouse */
     border-radius: 50%;
    /* se quiser arredondar */
     fill: #008DD0;
    /* cor desejada ao hover */
     transition: fill 0.2s;
}
 .video-play-button:hover svg {
     background-color: #dc3545;
    /* cor de fundo ao passar mouse */
     opacity: 0.9;
    /* opacidade ao passar mouse */
     border-radius: 50%;
    /* se quiser arredondar */
     fill: #dc3545;
    /* cor desejada ao hover */
     transition: fill 0.2s;
}
 .video-container iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: none;
}
 .btn-primary-custom {
     background-color: #007bff;
     border-color: #007bff;
     font-weight: 600;
}
 .btn-primary-custom:hover {
     background-color: #0056b3;
     border-color: #0056b3;
}
 footer {
     padding: 0 0 3rem 0;
     margin-top: 0;
     display: block;
}
 footer a {
     color: #6c757d;
     text-decoration: none;
}
footer a:hover {
     color: #007bff!important;
}
 .footer-section h5 {
     color: #475E69;
     margin-bottom: 1.5rem;
}
 .footer-icon {
     margin-right: 10px;
}
 .logo-footer {
     width: 120px;
}
 .highlight-text {
     font-weight: bold;
     color: #495057;
}
 .choose{
     padding: 43px 47px 50px 47px;
     border-radius: 76px;
     background: #FFF;
     box-shadow: 0 60px 71px -49px rgba(192, 218, 243, 0.40);
}
 .font-choose-title{
     color: #4E545A;
     font-family: Barlow;
     font-size: 2.25rem!important;
     font-style: normal;
     font-weight: 400;

}
 .size-title-choose{
     font-size: 1.5rem;
}
 .size-title-text{
     font-size: 1.125rem;
}

.title-desktop {
  display: none;
}
.title-mobile {
  display: block;
}
@media (min-width: 992px) {
  .title-desktop {
    display: block;
  }
  .title-mobile {
    display: none;
  }
}
@media (max-width: 992px) {
  .title-mobile {
    font-size: 1.0rem; /* ajuste conforme desejado */
  }
}
@media (max-width: 1400px) {
  .title-desktop {
    font-size: 1.8rem !important; /* ajuste conforme desejado */
  }
}

 .base-title{
     font-size: 2.3rem;
     font-style: normal;
     font-weight: 700;
     line-height: 100%;
}
 .base-subtitle{
     margin-top: 42px;
     font-size: 1.3rem;
     color: #2A2A2A;
     font-family: Barlow;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
}
 .concentrados-text{
     margin-top: 32px;
     color: #4E545A;
     font-family: Barlow;
     font-size: 1.125rem;
     font-style: normal;
     font-weight: 400;
     line-height: 195.5%;
    /* 35.19px */
}
 .base-fale{
     color: #4E545A;
     text-align: center;
     font-family: Barlow;
     font-size: 2.25rem;
     font-style: normal;
     font-weight: 500;
     line-height: 120%;
      margin-top: 1.5rem;
    /* 43.2px */
}
 .btn-fale{
     border-radius: 8px;
     background: #008DD0;
     padding: 0.8rem 1.938rem;
     border: none;
     color: #FFF;
     font-family: Barlow;
     font-size: 1.2rem;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
}
 .base-box1{
     border-radius: 8px;
     border: 2px solid #008DD0;
     background: #F7FAFC;
     color: #4E545A;
     font-feature-settings: 'dlig' on;
     font-family: Barlow;
     font-size: 1.3rem;
     font-style: normal;
     font-weight: 300;
     line-height: 134.4%;
     letter-spacing: -0.24px;
     height: auto;
     padding: 18px;
}
 .base-box2{
     border-radius: 8px;
     border: 2px solid #57B952;
     background: #F7FAFC;
     color: #4E545A;
     font-feature-settings: 'dlig' on;
     font-family: Barlow;
     font-size: 1.3rem;
     font-style: normal;
     font-weight: 300;
     line-height: 134.4%;
    /* 32.256px */
     letter-spacing: -0.24px;
      height: auto;
     padding: 18px;
}
 .base-box3{
     border-radius: 8px;
     border: 2px solid #FDB92E;
     background: #F7FAFC;
     color: #4E545A;
     font-feature-settings: 'dlig' on;
     font-family: Barlow;
     font-size: 1.3rem;
     font-style: normal;
     font-weight: 300;
     line-height: 134.4%;
     letter-spacing: -0.24px;
    height: auto;
     padding: 18px;
}
 .base-box4{
     border-radius: 8px;
     border: 2px solid #FF464F;
     background: #F7FAFC;
     align-self: stretch;
     color: #4E545A;
     font-feature-settings: 'dlig' on;
     font-family: Barlow;
     font-size: 1.3rem;
     font-style: normal;
     font-weight: 300;
     line-height: 134.4%;
     letter-spacing: -0.24px;
     height: auto;
     padding: 18px;
}
/* Rodape */
 .rd-copy{
     height: 2.375rem;
     margin-top: 1.938rem;
}
 .font-rd-small {
     font-family: "Barlow", sans-serif;
     font-weight: 400;
     font-style: normal;
     font-size: 0.813rem;
     color: #4E545A;
}
 .font-rd-big {
     font-family: "Barlow", sans-serif;
     font-weight: 400;
     font-style: normal;
     height: 2.375rem;
     font-size: 2rem;
     color: #4E545A;
     margin: 0;
     padding: 0;
}
 .font-rd-desc {
     font-family: "Barlow", sans-serif;
     font-weight: 400;
     font-style: normal;
     font-size: 0.938rem;
     color: #4E545A;
     line-height: 172%;
}
 .box-rd-base{
     border-radius: 2.375rem;
     background-color: #EAEFF6;
     padding: 2.938rem 3.313rem;
}
 .rd-m-endereco{
     margin-top: 2.25rem;
}
 .rd-m-contato{
     margin-top: 2.25rem;
}
 .rd-m-siga{
     margin-top: 2.25rem;
}
 .color-blue {
     color: #558CC3;
}
 .color-gray {
     color: #4E545A;
}
 .banco-de-cores, .plataforma, .concentrados{
     border-radius: 4.75rem;
     background: #FFF;
     box-shadow: 0 60px 71px -49px rgba(192, 218, 243, 0.40);
     padding: 44px 47px 50px 47px;
}
 /* .concentrados{
     padding: 44px 47px 50px 47px;
} */



/* Responsividade para copyright do rodapé */
 @media (max-width: 575.98px) {
     .rd-copy .font-rd-small {
         font-size: 0.75rem;
         text-align: center;
    }
}
 @media (max-width: 767.98px) {
     .rd-copy .font-rd-small {
         font-size: 0.85rem;
         text-align: center;
    }
     .rd-copy .font-rd-big {
         font-size: 1.5rem;
         text-align: center;
    }
     .rd-copy .text-end {
         text-align: center !important;
    }
     .rd-copy {
         height: auto;
         margin-top: 1rem;
    }
     .rd-copy .row {
         flex-direction: column;
         align-items: center !important;
    }
}
 .form-label{
     color: #475E69;
     font-family: Barlow;
     font-size: 1.125rem;
     font-style: normal;
     font-weight: 300;
     line-height: 20px;
    /* 111.111% */
}
 .form-control {
     border-radius: 10px;
     border: 1px solid rgba(85, 140, 195, 0.50);
     background: #EAEFF6;
     height: 48px;
     flex-shrink: 0;
}
 textarea.form-control{
     height: 175px;
     flex-shrink: 0;
}
.grid-box-row {
  display: grid;
  gap: 2rem; /* ou o valor do seu g-5 */
  grid-template-columns: repeat(1, 1fr); /* padrão mobile */
}

@media (min-width: 768px) {
  .grid-box-row {
     gap: 1rem; 
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .grid-box-row {
    gap: 2rem;
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Garante que todas as caixas ocupem 100% da altura da célula do grid */
.base-boxs,
.feature-box {
  height: 100%!important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

 #contact ::placeholder{
     color: rgba(71, 94, 105, 0.30);
     font-family: Barlow;
     font-size: 1rem;
     font-style: normal;
     font-weight: 300;
     line-height: 20px;
    /* 125% */
}
 @media (max-width: 991.98px) {
     .rd-m-endereco{
         margin-top:0!important;
    }
     .rd-m-contato{
         margin-top: 0!important;
    }
     .rd-m-siga{
         margin-top: 0!important;
    }
}
/* Estilos responsivos para #img-contact no rodapé */
/* Estilos responsivos para #img-contact no rodapé Proporção original: 549x626 (largura/altura ≈ 0.877) O top negativo sempre igual à altura definida em cada breakpoint */
 #img-contact {
     position: absolute;
     left: 1.5rem;
     width: 220px;
     height: 251px;
     top: -251px;
     z-index: 100;
}
 /* #img-seta {
     position: absolute;
     left: -150px;
     width: 150px;
     height: 62px;
     top: 42px;
     z-index: 100;
     transform: rotate(-29.753deg);
     flex-shrink: 0;
} */
/* Extra extra large (≥1400px) */
 @media (min-width: 1400px) {
     .logo-header{
         width: 269px;
         height: 107px;
    }
     .base-title{
         font-size: 3.75rem;
         font-style: normal;
    }
     .base-subtitle{
         font-size: 2rem;
         font-style: normal;
    }
     #img-contact {
         width: 549px;
         height: 626px;
         top: -626px;
    }
     .hero-image h1 {
         font-size: 4rem;
         font-weight: 300;
    }
     .hero-image p {
         font-size: 1.5rem;
         font-weight: 400;
    }
     .video{
         height: 559px;
    }
}
/* Extra large (≥1200px) */
 @media (min-width: 1200px) and (max-width: 1399.98px) {
     .logo-header{
         width: 269px;
         height: 107px;
    }
     #img-contact {
         width: 395px;
        /* manter a proporção da base 549x626 */
         height: 451px;
         top: -451px;
    }
     .hero-image h1 {
         font-size: 4rem;
         font-weight: 300;
    }
     .hero-image p {
         font-size: 1.5rem;
         font-weight: 400;
    }
     .video{
         height: 559px;
    }
}
/* Large (≥992px) */
 @media (min-width: 992px) and (max-width: 1199.98px) {
     .logo-header{
         width: 300px;
         height: 119px;
    }
     #img-contact {
         width: 395px;
        /* manter a proporção da base 549x626 */
         height: 451px;
         top: -451px;
    }
     .hero-image h1 {
         font-size: 3rem;
         font-weight: 300;
    }
     .hero-image p {
         font-size: 1.1rem;
         font-weight: 400;
    }
     .video{
         height: 420px;
    }
}
/* Medium (≥768px) */
 @media (min-width: 768px) and (max-width: 991.98px) {
     #img-contact {
         left: 0;
         width: 300px;
         height: 342px;
         top: -342px;
    }
     textarea.form-control{
         height: 105px;
         flex-shrink: 0;
    }
     .video{
         height: 400px;
    }
}
/* Small (≥576px) */
 @media (min-width: 576px) and (max-width: 767.98px) {
     #img-contact {
        width: 140px;
         height: 160px;
         top: -160px;
         display: hidden;
    }
     textarea.form-control{
         height: 105px;
         flex-shrink: 0;
    }
     .base-title{
         font-size: 2.3rem;
    }
     .base-subtitle{
         font-size: 1.3rem;
    }
     .base-fale{
         font-size: 1.25rem;
        
    }
     .base-box1{
         height: auto!important;
    }
     .base-box2{
         height: auto!important;
    }
     .base-box3{
         height: auto!important;
    }
     .base-box4{
         height: auto!important;
    }
     .base-boxs{
         margin-top: 1rem;
    }
     .video{
         height: 350px;
    }
     .video-play-button-size svg {
         width: 70px;
         height: 70px;
         transition: width 0.2s, height 0.2s;
    }
}
/* X-Small (<576px) */
 @media (max-width: 575.98px) {
     /* #img-contact {
         width: 70px;
         height: 80px;
         top: -80px;
    } */
      #img-contact {
        width: 140px;
         height: 160px;
         top: -160px;
         display: hidden;
    }
     .base-title{
         font-size: 2.3rem;
         font-style: normal;
         font-weight: 700;
         line-height: 100%;
    }
     .base-subtitle{
         margin-top: 42px;
         font-size: 1.3rem;
         color: #2A2A2A;
         font-family: Barlow;
         font-style: normal;
         font-weight: 400;
         line-height: normal;
    }
     .base-fale{
         color: #4E545A;
         text-align: center;
         font-family: Barlow;
         font-size: 1.25rem;
         font-style: normal;
         font-weight: 500;
         line-height: 120%;
    }
     
     .base-boxs{
         margin-top: 1rem;
    }
     .video-play-button-size svg {
         width: 70px;
         height: 70px;
         transition: width 0.2s, height 0.2s;
    }
}