/*
Theme Name: LifEvolution Karime Kamel
Theme URI: https://zeraki.com.br/
Author: Zeraki Themes
Author URI: https://zeraki.com.br/
Description: Excvlusive the crafted for Karime Kamel
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: karime-kamel
*/

@import url("https://fonts.cdnfonts.com/css/optima-nova-lt-pro");
/*font styles
Optima nova LT Pro 400
Optima nova LT Pro 400
Optima nova LT Pro Italic 400
Optima nova LT Pro 300
Optima nova LT Pro 300
Optima nova LT Pro Italic 300
Optima nova LT Pro 350
Optima nova LT Pro 500
Optima nova LT Pro 500
Optima nova LT Pro Italic 500
Optima nova LT Pro 600
Optima nova LT Pro 600
Optima nova LT Pro Italic 600
Optima nova LT Pro 700
Optima nova LT Pro 700
Optima nova LT Pro Italic 700
Optima nova LT Pro 750
Optima nova LT Pro Italic 750
Optima nova LT Pro 900
Optima nova LT Pro Italic 900
*/

/* === Global Vars === */
:root {
  --dark-gray: #232323;
  --teal: #47ccca;
  --light-beige: #f8f6f3;
  --white: #f6f6f6;

  --main-font: "Montserrat";
  --secondary-font: "Optima nova LT Pro", sans-serif;
  --secondary-font-black: "Optima nova LT Pro", sans-serif;
}

html,
body {
  width: 100%;
  position: relative;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 900;
  font-family: var(--secondary-font-black);
}

h1 {
  font-size: 56px;
  margin-bottom: 28px;
}

h2 {
  font-size: 40px;
}

h3 {
  font-size: 32px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 12px;
}

section {
  padding: 90px 0;
}

ul {
  margin-bottom: 0;
}

.montserrat-font {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.post-edit-link {
  background: brown;
  padding: 10px 50px;
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
}

/* === HERO BANNER === */
.hero__container__box {
  color: #fff;
  text-align: left;
  max-width: 55%;
  padding: 70px 0;
  color: var(--dark-gray);
}

.hero__container__box h1 {
  font-weight: 700;
  line-height: 56px;
}

.header-banner {
  height: 470px;
  width: 100%;
  margin: 0;
  padding: 0;
  background-size: cover;
}

.whatsapp-btn {
  background-color: var(--teal);
  color: #fff;
  padding: 16px 32px;
  font-weight: bold;
  font-size: 24px;
  border: none;
  border-radius: 32px;
  transition: background-color 0.3s;
  text-transform: uppercase;
  margin: 24px 0;
}

.whatsapp-btn:hover {
  background-color: #17a397;
}

main h1::before {
  content: "";
  width: 13vw;
  height: 2px;
  background-color: var(--dark-gray);
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* === BENEFITS === */
.benefits {
  margin: 50px 0;
}

.benefits h2 {
  color: var(--teal);
}

.benefits h3 {
  font-size: 24px;
  font-family: var(--main-font);
  font-weight: 700;
}

/* === DEPOIMENTOS === */
.home-grid-depoimentos {
  columns: 3 300px;
  column-gap: 20px;
  display: grid;
}

.home-depoimento {
  background-color: #d0d0d0;
  padding: 15px;
  margin: 8px;
}

@media (max-width: 992px) {
  .home-grid-depoimentos {
    columns: 1;
  }
}

.testimonials .whatsapp-btn {
  margin: 15px 0;
}

/* === PROGRAMAS === */
.program-card .overlay h3 {
  font-size: 24px;
  font-weight: 400;
  font-family: var(--main-font);
}

.programs-showcase a {
  text-decoration: none;
}

.programs-showcase__wrapper {
  flex: 0 0 auto;
  width: 50%;
  padding: 0;
}

.programs-showcase__wrapper-produto {
  border: 1px solid var(--light-beige);
  padding: 16px;
  display: flex;
  flex-direction: column;
  border-radius: 3px;
}

.programs-showcase__wrapper-produto__header {
  display: flex;
  justify-content: space-between;
}

.programs-showcase__wrapper-produto__header span:first-of-type {
  color: var(--dark-gray);
  font-size: 16px;
  font-weight: normal;
}
.programs-showcase__wrapper-produto__header span:nth-child(2) {
  color: var(--dark-gray);
  font-size: 32px;
  font-weight: bolder;
  line-height: 20px;
}

.programs-showcase__wrapper-produto__thumbnail {
  background-color: var(--light-beige);
  width: 100%;
  height: 280px;
  margin-bottom: 15px;
}

.programs-showcase h2 {
  font-size: 24px;
  font-weight: bolder;
  color: var(--dark-gray);
}

.programs-showcase__wrapper-produto__excerpt {
  color: var(--dark-gray);
  font-size: 13.5px;
}

/* === PROGRAMAS INDIVIDUAL === */
.wrapper_produto .col > p {
  margin-bottom: 24px;
} /*//TODO CHECAR SE USO */

/* === PROGRAMAS PREV NEXT === */
.wrapper_produto__links h3 {
  margin-top: 70px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--dark-gray);
}

.wrapper_produto__links h3::after {
  content: "";
  width: 180px;
  height: 4px;
  background-color: var(--teal);
  position: absolute;
  bottom: -6px;
  left: 0;
}

.wrapper_produto__links__action {
  display: flex;
}

.wrapper_produto__links__action__prev {
  border-right: 1px solid var(--light-beige);
}

.wrapper_produto__links__action__prev,
.wrapper_produto__links__action__next {
  flex: 0 0 auto;
  width: 50%;
  padding: 16px;
}

.wrapper_produto__links__action__thumb {
  width: 100%;
  height: 35vh;
  background-color: var(--light-beige);
}

/* Container principal com a imagem de fundo */
.overlay-box {
  position: relative;
  width: 100%; /* Ajuste o tamanho conforme necessário */
  height: 250px;
  background-position: center;
  overflow: hidden;
}

/* Sobreposição inicial (parcial) */
.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%; /* Tamanho inicial menor que o contêiner */
  height: 80%; /* Tamanho inicial menor que o contêiner */
  background-color: rgba(
    255,
    255,
    255,
    0.8
  ); /* Fundo branco semi-transparente */
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease; /* Transição para expandir a sobreposição */
  color: #333;
  font-size: 1.5em;
  font-weight: bold;
  border-radius: 8px; /* Bordas arredondadas para o estado inicial */
  opacity: 1; /* Visível no início */
  padding: 30px;
}

/* Expansão da sobreposição ao passar o mouse */
.overlay-box:hover .overlay {
  width: 100%; /* Expande para cobrir toda a largura */
  height: 100%; /* Expande para cobrir toda a altura */
  border-radius: 0; /* Remove as bordas arredondadas ao expandir */
  padding: 35px;
}

/* Centraliza os cards quando houver apenas dois na linha */
.program-card {
  margin: 15px auto;
}

/* === SOBRE MIM === */
.home-about {
  padding: 130px 0;
}

.home-about .col-md-6 h2 {
  color: var(--white);
  margin-bottom: 40px;
}

.home-about .col-md-6 {
  text-align: left;
}

.home-about .col-md-6 .whatsapp-btn {
  font-size: 16px;
  padding: 10px 20px;
}

/* === BLOG === */

#home-blog a {
  text-decoration: none;
  color: var(--dark-gray);
}

#home-blog h3 {
  font-family: var(--main-font);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  text-align: center;
}

.post-thumbnail {
  height: 140px;
  width: 100%;
  margin-bottom: 12px;
}

#home-blog .big-one {
  text-align: center;
  margin-bottom: 30px;
}

.big-one .post-thumbnail {
  height: 240px;
}

.wrapper-blog h1 > span {
  color: #333;
  font-style: italic;
}

.wrapper-blog__vitrine__row {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.wrapper-blog__vitrine__row__showcase {
  order: 1;
}

.wrapper-blog__vitrine__row__sidebar {
  flex: 0 0 auto;
  width: 25%;
  order: 2;
}

.wrapper-blog__card {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  font-family: sans-serif;
  margin-bottom: 20px; /* Espaçamento entre os cards */
  padding: 16px;
}

.wrapper-blog__card__image-container {
  position: relative;
  width: 100%;
  height: 190px;
  display: block;
  border-radius-top: 5px 5px;
  background-color: #fbfbfb;
}

.wrapper-blog__card__category {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(200, 180, 100, 0.8); /* Cor e transparência da tag */
  color: white;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 0.8em;
}

.wrapper-blog__card__body {
  min-height: 300px;
}

.wrapper-blog__card__body h2 {
  font-size: 1.3rem;
  margin: 10px 0;
}

.wrapper-blog__card__body p {
  font-size: 0.9em;
  color: #555;
  margin-bottom: 8px;
}

.wrapper-blog__card__cta {
  background-color: #f0f0f0;
  color: #333;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 0 25px 25px 25px;
  font-size: 1em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-decoration: none;
}

.wrapper-blog__card__cta:hover {
  background-color: #e0e0e0;
}

.wrapper-blog__card__cta:active {
  background-color: #d0d0d0;
}

.post-header {
  width: 100%;
  height: 250px;
  margin: 20px auto;
}

.contato-geral .wpforms-field-container {
  display: block;
}

#contato-redes .wp-block-media-text {
  margin-bottom: 12px;
}

#contato-redes img {
  width: auto !important;
}

#contato-redes a {
  text-decoration: none;
  color: var(--dark-gray);
}

/* === NEWSLETTER === */
#in-newsletter {
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 9999;
  margin-bottom: -45px;
}
#form-newsletter {
  display: inline-flex;
  background-color: var(--light-beige);
  padding: 24px;
  border-radius: 4px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
  width: 100%;
  justify-content: space-between;
}

#form-newsletter .form {
  width: 60%;
}

#wpforms-form-989,
#wpforms-form-989 .wpforms-field-text,
#wpforms-form-989 .wpforms-field,
#wpforms-form-989 .wpforms-submit-container {
  margin: 0 !important;
  padding: 0 !important;
}
#wpforms-form-989,
#wpforms-form-989 .wpforms-field-container {
  display: inline-flex !important;
  width: 100%;
}
#form-newsletter .wpforms-field-medium {
  min-width: 98%;
  max-width: 98%;
}

.wpforms-field-container {
  display: flex;
}

#wpforms-form-989 .wpforms-field:nth-child(1),
#wpforms-form-989 .wpforms-field:nth-child(2) {
  width: 50%;
}

#form-newsletter #wpforms-submit-989 input[type="submit"] {
  background: var(--teal) !important;
  border-radius: 50% !important;
  padding: 4px;
  overflow: hidden;
  border: none;
}

/* === FOOTER CTA === */
#start-now {
  padding: 200px 0 120px;
  color: var(--white);
}

#start-now .whatsapp-btn {
  font-size: 16px;
  padding: 8px 16px;
}
/* === === */
/*
.benefit-item img {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
}

.testimonials {
  background-color: #f9f9f9;
  padding: 50px 0;
}

.services {
  padding: 50px 0;
}

.services img {
  border-radius: 8px;
  max-width: 100%;
}

.about {
  background-color: #f0f0f0;
  padding: 50px 0;
}

.latest-content img {
  width: 100%;
  border-radius: 8px;
}*/

/* === FOOTER === */
footer {
  margin-top: 60px;
  font-size: 16px;
  padding: 20px 0 50px 0;
}

footer h2,
footer h3,
footer h4 {
  font-family: var(--main-font);
  font-weight: 400;
}

.social-media i {
  background: var(--dark-gray);
  padding: 6px 8px;
  border-radius: 50%;
  color: var(--white);
}

#footer ul li {
  list-style: none;
  margin: 2px 0;
  padding: 0;
}

#footer ul li a {
  text-decoration: none;
  color: var(--dark-gray);
  border-bottom: solid 2px transparent;
  font-size: 16px;
}

#footer ul li a:hover {
  border-bottom: 2px solid var(--dark-gray);
}

#footer ul {
  list-style: none;
  padding: 0;
}

/* ===   ---------------------> MEDIAs === */

@media (min-width: 992px) {
  .hero__container__box {
    padding-top: 160px;
  }
}

/* ======== > MOBILE */

@media (max-width: 992px) {
  /* ==== Header ==== */
  .hero {
    background-position: 65% center !important;
  }

  /* ==== MOBILE BLOG == */
  .wrapper-blog__vitrine__row {
    flex-direction: column-reverse;
  }

  .wrapper-blog__vitrine__row__sidebar {
    flex: 0 0 auto;
    width: 100%;
  }

  .wrapper-blog__vitrine__row__showcase {
  }

  .wrapper-blog__card__body p {
    display: none;
  }

  /* ==== NEWSLETTER ==== */
  #form-newsletter {
    display: block;
  }
  #wpforms-form-989,
  #wpforms-form-989 .wpforms-field-container {
    display: block !important;
  }

  #form-newsletter .form {
    width: 100%;
  }
}