/** Alternate Theme **/
body.light-mode .servicos-section{
  background-color: var(--light);
}

body.light-mode .servicos-section p,
body.light-mode .servicos-section h1,
body.light-mode .servicos-section h2{
  color: var(--dark);
}

body.light-mode .box-motivos-cases {
  border: 2px solid #ffffff;
 
}

body.light-mode .logo-top-cases{
  display: block;
  width: 180px;
  filter: invert(1);
}

/** Alternate Theme **/


.case-title{
  font-family: var(--funnel);
  color: var(--white);
  font-size: 58px;
  line-height: 56px;
  text-align:center;
}

.case-subtitle{
  font-family: var(--funnel);
  color: var(--light);
  font-size: 24px;
  padding: 16px 0px 16px 0px;
  font-weight: 400;
  text-align: center;
}

.case-description{
  font-family: var(--onest);
  color: var(--grey);
  font-size: 15px;
  font-weight: 400;
  line-height: 25px;
  text-align: center;
  width: 660px;
  margin: 0 auto;
  margin-bottom: 38px;
}

.bg-case-01 {
    background-image: url('../img/cases/bg-jade.webp');
    background-size: 124%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    transition: filter 0.5s ease, background-size 0.5s ease;
    border: 0px;
    cursor: pointer;
}

.bg-case-01::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.bg-case-01:hover {
    background-size: 120%;  /* Zoom só no background */
}

.bg-case-01:hover::after {
    opacity: 0;
}

.bg-case-02 {
    background-image: url('../img/cases/bg-stanley.webp');
    background-size: 124%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    transition: filter 0.5s ease, background-size 0.5s ease;
    border: 0px;
    cursor: pointer;
}

.bg-case-02::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.bg-case-02:hover {
    background-size: 120%;  /* Zoom só no background */
}

.bg-case-02:hover::after {
    opacity: 0;
}


.bg-case-03 {
    background-image: url('../img/cases/bg-guardaroba.webp');
    background-size: 125%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    transition: filter 0.5s ease, background-size 0.5s ease;
    border: 0px;
    cursor: pointer;
}

.bg-case-03::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.bg-case-03:hover {
    background-size: 120%;  /* Zoom só no background */
}

.bg-case-03:hover::after {
    opacity: 0;
}


.bg-case-04 {
    background-image: url('../img/cases/bg-approve.webp');
    background-size: 125%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    transition: filter 0.5s ease, background-size 0.5s ease;
    border: 0px;
    cursor: pointer;
}

.bg-case-04::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.bg-case-04:hover {
    background-size: 120%;  /* Zoom só no background */
}

.bg-case-04:hover::after {
    opacity: 0;
}


.bg-case-05 {
    background-image: url('../img/cases/bg-nutty.webp');
    background-size: 125%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    transition: filter 0.5s ease, background-size 0.5s ease;
    border: 0px;
    cursor: pointer;
}

.bg-case-05::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.bg-case-05:hover {
    background-size: 120%;  /* Zoom só no background */
}

.bg-case-05:hover::after {
    opacity: 0;
}


.link-box-case {
  position: absolute;
  bottom: 20px; /* Distância do fundo (ajusta como quiser) */
  right: 20px;   /* Opcional: se quiser distância da esquerda */
  background: var(--light);
  border-radius: 10px;
  color: var(--dark);
  padding: 8px 35px;
  font-family: var(--funnel);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none; /* Opcional: tira o sublinhado */
  z-index: 2; /* Pra garantir que fique por cima do overlay, se tiver */
  display: none;
  transition: ease 0.2s;
}

.link-box-case:hover {
  position: absolute;
  bottom: 20px; /* Distância do fundo (ajusta como quiser) */
  right: 20px;   /* Opcional: se quiser distância da esquerda */
  background: var(--dark);
  border-radius: 10px;
  color: var(--light);
  padding: 8px 35px;
  font-family: var(--funnel);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none; /* Opcional: tira o sublinhado */
  z-index: 2; /* Pra garantir que fique por cima do overlay, se tiver */
  display: none;
  transition: ease 0.2s;
}



.bg-case-01:hover .link-box-case,
.bg-case-02:hover .link-box-case,
.bg-case-03:hover .link-box-case,
.bg-case-04:hover .link-box-case,
.bg-case-05:hover .link-box-case{
  display: block;
  transition: ease 0.2s;
}


.logo-top-cases{
  display: block;
  width: 180px;
}

.banner-case-interno{
  display: block;
  width: 100%;
  border-radius: 15px;
}

.list-tag-cases{
    margin-top: 16px;
    width: 410px;
}

.list-tag-cases li{
  display: inline;
  background: #e638884d;
  padding: 6px 27px;
  border-radius: 60px;
  font-family: var(--funnel);
  font-size: 13px;
  font-weight: 400;
  color: #e63888;
  margin-right: 7px;
  border: 1px solid #e6388840;
  line-height: 43px;
}

.logo-box-cases{
  width: 160px;
}

.box-motivos-cases{
border-radius: 12px;
  padding: 32px 32px 32px 32px;
  border: 2px solid #000;
  margin: 13px 0px;
  min-height: 345px!important;
}

.texto-cases{
  font-size: 17px!important;
  line-height: 29px!important;
  padding-right: 20px!important;
}



/** Responsivo **/

@media (min-width: 300px) and (max-width: 767px) {
.bg-case-01,
.bg-case-02,
.bg-case-03,
.bg-case-04,
.bg-case-05 {
  background-size: cover;
}

.case-title {
  text-align: left;
}

.servicos-section h1 {
  font-family: var(--funnel);
  color: var(--white);
  font-size: 37px;
  line-height: 43px;
}

.case-subtitle {
  text-align: left;
}

.case-description {
  text-align: left;
  width: 100%;
}

.padding-section-top {
  padding-right: 0px;
  padding-top: 0px;
}

.list-tag-cases {
  margin-top: 16px;
  width: 376px;
  margin-bottom: 40px;
}

}

@media (min-width: 768px) and (max-width: 1023px) {
.bg-case-01,
.bg-case-02,
.bg-case-03,
.bg-case-04,
.bg-case-05 {
  background-size: cover;
}

.case-title {
  text-align: left;
}

.servicos-section h1 {
  font-family: var(--funnel);
  color: var(--white);
  font-size: 37px;
  line-height: 43px;
}

.case-subtitle {
  text-align: left;
}

.case-description {
  text-align: left;
  width: 100%;
}

.list-tag-cases {
  margin-top: 16px;
  width: 376px;
  margin-bottom: 40px;
}

}

@media (min-width: 1024px) and (max-width: 1279px) {
.bg-case-01,
.bg-case-02,
.bg-case-03,
.bg-case-04,
.bg-case-05 {
  background-size: cover;
}
}

@media (min-width: 1280px) and (max-width: 1535px) {

}


@media (min-width: 1536px) {

}