/*-----------------------------------*\
  #main.css
\*-----------------------------------*/


@font-face {
  font-family:DM Sans Bold;
  src: url(./assets/font/DMSans_18pt-Bold.ttf);
  font-weight: 400;
}
@font-face {
  font-family:DM Sans Regular;.faq-header
  src: url(./assets/font/DMSans_18pt-Regular.ttf
);
  font-weight: 400;
}

@font-face {
  font-family:"Custom Body";
  src: url(./assets/font/New-byciclete.otf
);
  font-weight: 400;
}

@font-face {
  font-family:"Custom Body Bold";
  src: url(./assets/font/New-byciclete-Bold.otf
);
  font-weight: 400;
}


@font-face {
  font-family:"Custom Serif";
  src: url(./assets/font/NewKumlienRegular.otf);
  font-weight: 400;
}




/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {


  /* background colors */

  --bg-jet: hsla(0, 0%, 18%, 1);
  --bg-eerie-black: hsla(0, 0%, 13%, 1);
  --bg-rich-black-fogra-29: hsla(229, 23%, 9%, 1);
  --bg-smoky-black: hsla(0, 0%, 6%, 1);
  --bg-black: hsla(0, 0%, 0%, 1);
  /* gradient colors */
  --gradient-1: linear-gradient(to top, var(--bg-black) 0%, transparent 40%);
  --gradient-2: radial-gradient(circle at 75% 100%, hsla(79, 100%, 70%, 0.3) 0%, transparent 100%);

  /* text colors */

  --text-rich-black-fogra-29: hsla(216, 42%, 12%, 1);
  --text-smoky-black: hsla(0, 0%, 6%, 1);
  --text-black: hsla(0, 0%, 0%, 1);

  /* border colors */



  --border-eerie-black: hsla(0, 0%, 13%, 1);
  --border-smoky-black: hsla(0, 0%, 6%, 1);

  /**
   * TYPOGRAPHY
   */



  /* font weight */
  --weight-regular: 400;
  --weight-medium: 500;



  --radius-pill: 500px;
  --radius-circle: 50%;

  /**
   * TRANSITION
   */

  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease;
  --transition-3: 1000ms cubic-bezier(0.03, 0.98, 0.52, 0.99) 0s;
  --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
  --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97);

}


/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

a,
img,
span,
button,
ion-icon {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
    width:100%;
  height: auto;
}

input,
button,
textarea {
  background: none;
  border: none;
  font: inherit;
}

input,
textarea {
  width: 100%;
}

button {
  cursor: pointer;
}

ion-icon {
  pointer-events: none;
}

html {
  font-family: var(--ff-manrope);
  font-size: 10px;
  scroll-behavior: smooth;
}

body {
  background-color: white;
  color: var(--black-coral);
  font-size: 1.6rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

body.nav-active {
  overflow: hidden;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: hsl(0, 0%, 98%);
}

::-webkit-scrollbar-thumb {
  background-color: hsl(0, 0%, 80%);
}

::-webkit-scrollbar-thumb:hover {
  background-color: hsl(0, 0%, 70%);
}


/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/
.calendly-overlay {
    background-color: rgb(31 31 31 / 70%)!important;
}

.container {
  padding-inline: 16px;
}

.social-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  color:white;
}

.social-link {
  font-size: 2rem;
  transition: var(--transition-1);
}

.social-link:is(:hover, :focus-visible) {
  transform: translateY(-3px);
  color: white;
}

.section {
  padding-block: var(--section-padding);
}

.w-100 {
  width: 100%;
}

.h1,
.h2,
.h3,
.h4 {
  color: var(--charcoal);
  line-height: 1.3;
}

.h1 {
  font-size: var(--fs-1);
}

.h2 {
  font-size: var(--fs-2);
}

.h3 {
  font-size: var(--fs-3);
}

.h4 {
  font-size: var(--fs-4);
}

.btn {
  color: var(--cinnamon-satin);
  font-size: var(--fs-6);
  font-weight: var(--fw-700);
  border: 2px solid var(--cinnamon-satin);
  max-width: max-content;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  transition: var(--transition-1);
  will-change: transform;
}

.btn:is(:hover, :focus-visible) {
  transform: translateY(-4px);
  color: white;

}

.btn-primary, .btn-secondary:is(:hover, :focus-visible) {
  background-color: var(--cinnamon-satin);
  color: white;
}

.section-text {
  font-size: var(--fs-5);
}

.section-title {
  margin-block-end: 16px;
}

.grid-list {
  display: grid;
  gap: 30px;
}

[data-reveal] {
  opacity: 0;
  transition: 0.75s ease;
}

[data-reveal="top"] {
  transform: translateY(-30px);
}

[data-reveal="bottom"] {
  transform: translateY(30px);
}

[data-reveal="left"] {
  transform: translateX(-30px);
}

[data-reveal="right"] {
  transform: translateX(30px);
}

[data-reveal].revealed {
  transform: translate(0);
  opacity: 1;
}



.container{
    margin-inline:auto;
    width:95%;
    max-width: 4000px;
}



/*-----------------------------------*\
  #HEADER
\*-----------------------------------*/


.header {
  position:relative;
  top: 0;
  left: 0;
  background-color: var(--white);
  width: 100%;
  padding-block: 20px;
  box-shadow: var(--shadow-1);
  z-index: 4;
}

.navbar-link{
  color:black;
  font-weight:400;
}

.header.active {
  position: fixed;
  animation: slideIn 0.5s ease forwards;
    background:white;
  border-bottom:1.5px solid rgba(222, 222, 222, 0.657);
}

@keyframes slideIn {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width:80%;
  margin-inline:auto;
}
.nav-open-btn {
  font-size: 3.5rem;
  color: var(--gunmetal);
}

.navbar {
  position: fixed;
  top: 0;
  left: -300px;
  background-color: white;
  color: var(--white);
  max-width: 300px;
  width: 100%;
  height: 100vh;
  padding: 30px;
  padding-block-end: 40px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  z-index: 2;
  visibility: hidden;
  transition: var(--transition-3);
}

.navbar.active {
  visibility: visible;
  transform: translateX(300px);
}

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

.nav-close-btn {
  background-color: transparent;
  color:#1f2044;
  font-size: 2.8rem;
  border:1.5px solid #1f2044;
  padding: 6px;
  border-radius: var(--radius-circle);
  transition: var(--transition-1);
}

.nav-close-btn ion-icon {
  --ionicon-stroke-width: 50px;
}

.nav-close-btn ion-icon {
  --ionicon-stroke-width: 50px;
}

.nav-close-btn:is(:hover, :focus-visible) {
  background-color: var(--white_a12);
}

.navbar-list {
  margin-block-end: auto;
}

.navbar-link {
  font-weight: var(--fw-700);
  padding-block: 6px;
}

.contact-link {
  transition: var(--transition-1);
  margin-bottom:1.5em;
}

.contact-link:is(:hover, :focus-visible) {
  color: var(--cinnamon-satin);
}


.navbar-list {
  margin-block-end: auto;
}

.navbar-link {
  font-weight: var(--fw-700);
  padding-block: 6px;
}

.contact-link {
  transition: var(--transition-1);
  margin-bottom:1.5em;
}

.contact-link:is(:hover, :focus-visible) {
  color: var(--cinnamon-satin);
}


.contact-link:is(:hover, :focus-visible) {
  color: var(--cinnamon-satin);
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--raisin-black);
  pointer-events: none;
  opacity: 0;
  transition: var(--transition-1);
}

.overlay.active {
  pointer-events: all;
  opacity: 0.8;
}


.header .navbar-link{
  font-family: "Custom body";
  font-weight: 400;
  font-size: calc(1.7rem + 0.5vw);
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  color: #000;
  border-top: 1px solid #e9ecf5;
    padding-block: 12px;
    text-align:left;
}

.header .logo{
  font-family: 'Poppins';
  font-weight: 400;
  font-size: 27px;
  color: #4480c5;
}

.navbar .title-ct{
  font-family: "DM Sans", sans-serif;
  font-weight: 800;
  font-size: 27px;
  color: #000;
}

.navbar .e-m{
  font-size:16px;
  color:black;
  font-weight:400;
  font-family: 'Galano Grotesk Regular';
}

.navbar-link img{
  width:14px;
}

a.hm-btnf{
  font-size:16px;
  background-color: #4480c5;
  color:white;
  font-weight:400;
  font-family: Custom body;
  text-align:center;
  padding-block:10px;
  border-radius: 10px;
}
a.hm-btnfs{
  font-size:16px;
  color: #4480c5;
border:1.5px solid #4480c5;
  font-weight:400;
  font-family: "DM Sans", sans-serif;
  text-align:center;
  padding-block:7px;
  border-radius: 10px;
  margin-top:-10px;
}

.d-header {
  display: none;
}


/* Header only in these version: */

@media (min-width: 1360px) {
.d-header {
    display: block;
  }
  

  .d-header {
    background-color: #fffefa;
    display: block;
  }

.navbar {
    display: flex;
    justify-content: center;
}

.nav-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap:0.8rem;
}

.nav-item {
    margin: 0 10px;
    position: relative;
}

.nav-link {
    text-decoration: none;
    list-style: none;
    color: #000;
    font-weight: 400;
        font-size: 18px !important;
  font-family: "DM Sans", sans-serif;
    display:flex;
    align-items:center;
    letter-spacing:-0.5px;

}

.container-header {
    display: flex;
    justify-content: space-between;
    width: 90%;
    max-width: 4000px;
    margin: 0 auto;
    align-items:center;
    padding-block: 0.3em;

  }


  .group-menu {
    display: flex;
    align-items:center;
  }

  .group-menu ul {
    display: flex;
    gap: 15px;
    margin-left: 30px;
    list-style: none;
  }

  .group-menu img {
    width: 80px;
  }

  .btns-header {
    display: flex;

    gap: 20px;
    justify-content: flex-end;

  }


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

  }


  .cont-logo a {
    font-size: 27px;
    line-height: 1;
    font-weight: 400;
    font-family:"Poppins";
    letter-spacing: 0px;
    color: black;
    text-align: center;
    text-transform:uppercase;
    margin:0;
    padding:0;

  }

  .cont-logo span {
    font-size: 22px;
    letter-spacing: 2.5px;

  }


  .btn-42 {
    border: 0.5px solid #000;
    z-index: 1;
    color: #000;
    font-weight: 400;
        padding: 15px 20px;
            border-radius:10px;
  }

  .btn-42:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #000;
    transition: all 0.3s ease;
        border-radius:10px;

  }

  .btn-42:hover {
    color: white;
        border-radius:10px;
  }

  .btn-42:hover:after {
    top: 0;
    height: 100%;
  }

  .btn-42:active {
    top: 2px;
  }

  .btn41-43 {
    padding: 10px 30px;
  font-family: "DM Sans", sans-serif;
    font-size: calc(1.39rem + 0.2vw) !important;
    font-weight: 400;
    background: transparent;
    outline: none !important;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    border-radius:10px;
  }


  .btn-41 {
    z-index: 1;
    color: white;
    background-color: #000;
    border: 1px solid #000;
        border-radius:10px;
        padding-inline:20px!important;
  }

  .btn-41:after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    direction: rtl;
    z-index: -1;
    background: rgb(255, 255, 255);
    transition: all 0.3s ease;
        border-radius:10px;
  }

  .btn-41:hover {
    color: #000;
    border: 0.5px solid #000;
        border-radius:10px;
  }

  .btn-41:hover:after {
    right: auto;
    left: 0;
    width: 100%;
  }

  .btn-41:active {
    top: 2px;
  }

  .group-menu ul li::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    background-color: #000;
    /* Puedes ajustar el color de la línea según tus preferencias */
    transition: width 0.3s;
  }


  ul li:hover::after {
    width: 100%;
  }

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    min-width: 300px;
    z-index: 9999;
    padding-block:25px 35px;
    padding-inline:30px;
}

.dropdown-content a {
  text-decoration: none;
  list-style: none;
  color: #1F2044;
  font-weight: 400;
  font-size: 18px;
  font-family: 'Galano Grotesk Bold';

  display:flex;
  align-items:center;

}
.dropdown-content img{
  width:75px;
}

.dropdown-content a:hover {
    background-color: #eaeaea;
}

.dropdown:hover .dropdown-content {
    display: block;
}


.toggle-icon {
    transition: transform 0.3s ease-in-out;
}

.header{display:none;}


.tl-hd-sm{
font-size: 25px;

font-family: "DM Sans", sans-serif;
color: #2d578a;
display:flex;
margin-bottom:20px;
border-bottom: 1px solid #cec9c9;
}

.cont-sb-mn
{display:flex;
  align-items:center;
  gap:20px;
  cursor:pointer;
}

.grp-links{
  font-family: 'Galano Grotesk Regular';
  font-size:15px;
  color:#838282;
  line-height: 1.3;
  gap:5px;
  display:flex;
  flex-direction:column;
}

.grp-a{
  margin-top:1em;
}
}



@media (min-width: 1360px) and (max-width: 1600px) {
  .container-header{
    width:95%!important;
  }
  .nav-item{
    margin:0 5px;
  }

  .btn41-43 {
    padding: 10px 25px;
    font-size: calc(1.2rem + 0.2vw) !important;
  }
  .nav-link {
    font-size: calc(1.29rem + 0.2vw) !important;
  }
  .btns-header{
    gap:15px;
  }

}





/* Customers HOMEPAGE */

.customers{
  padding-block: 5rem;
  background: #fffefa;

}

.container_customers{
  width:90%;
  max-width:1500px;
  margin-inline:auto;
  text-align: center;
}
.container_customers h2{
  color:#262626;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: calc(5rem + 4.9vw) !important;
  line-height: 0.9;
  font-weight:600;
}


.testimonial-slider {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slider-track {
  display: flex;
  animation: scroll 15s linear infinite;
}

.slide {
  flex: 0 0 auto;
  width: 220px; /* Ajustar según el tamaño del logo */
  margin-right: 45px;
}

.slide img {
  width: 100%;
  height: auto;
  display: block;
}

.slide h3{
  font-size:21px;
  font-family: "Bricolage Grotesque", sans-serif;
  line-height: 1.1;
  margin-block:1rem 0rem;
  text-align:left;
  letter-spacing: -0.2px;
}

.slide p{
  text-align:left;
  font-size:15px;
      font-family: "Custom Body";
}

@keyframes scroll {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-50%); /* Desplazar el 50% del total de los elementos */
  }
}


.mn-card{
  display: flex;
  justify-content: space-between;

}

.f_col_mn{
  display:flex;
  flex-direction:column;
}

.s_col_mn{
  display:flex;
  flex-direction: row;
  align-items:center;
  gap:2px;
  margin-top:-10px;
}

.s_col_mn img{
  width:16px;
}

.s_col_mn span{
  font-size:15px;
    font-family: Custom body;
  font-weight:400;

}




.schools_cont{
  margin-block:5rem 2rem;
}

.schools_cards{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin-inline:auto;
  gap:2rem;
  width:600px;
  align-items: center;
  margin-top:3rem;
}

.schools_cards img{
  width:100%;
}


.schools_cont h4{
  font-family: Custom body;
  font-weight:400;
  font-size:21px;
  line-height:1;
}


@media (min-width: 660px) and (max-width: 949px) {
  .customers{
    padding-block:5rem ;
    background: #fffefa;
  }
  .container_customers h2{
    font-size: calc(3.5rem + 4.9vw) !important;
  }

  .slide {
  margin-right: 35px;
  }


}

@media (min-width: 500px) and (max-width: 659px) {
  .customers{
    padding-block:5rem ;
    background: #fffefa;
  }
  .schools_cards{
    grid-template-columns: 1fr 1fr;
    width:60%;
   column-gap:5rem;
   row-gap:3rem;
  }

  .container_customers h2{
    font-size: calc(2.5rem + 5.2vw) !important;
  }
  .slide {
    margin-right: 30px;
    }
    
    .slider-track {
  animation: scroll 10s linear infinite;
}

}

@media (min-width: 300px) and (max-width: 499px) {
  .customers{
    padding-block:3rem ;
  }
  .schools_cards{
    grid-template-columns: 1fr 1fr;
    width:80%;
   column-gap:4rem;
   row-gap:2.5rem;
  }

  .container_customers h2{
    font-size: calc(2rem + 5.2vw) !important;
  }
  .slide {
    margin-right: 20px;
    width:160px;
    }
        .slider-track {
  animation: scroll 4s linear infinite;
}

.mn-card{
    flex-direction:column;
}
.slide h3 {
    text-align:center;
}
.slide p {
    text-align:center;
}
.s_col_mn{
    justify-content:center;
    margin-top:0.4rem;
}


}




/*  PROCESS PAGE - homepage */
.section_cards{
  padding-block:10rem 0rem;
  background: #000000;
}

.section_cards .container {
  display: flex;
  min-height: 50vh;

  width:90%;
  max-width:4000px;
  margin-inline:auto;
}

.section_cards .title-column {
  width: 50%;
  position: sticky;
  top: 0;
  height: 90vh;
  overflow: hidden;
}

.section_cards .title-column img{
  width:40%;
  height:auto;
  margin-inline:auto;
  margin-top:3rem;
}

.section_cards .title-column h2{
  font-family: "Bricolage Grotesque", system-ui;
  font-size: calc(4rem + 2.5vw) !important;
  line-height: 0.9;
text-align: center;
  letter-spacing: 0px;
  margin: 0;
  font-weight:700;
  text-wrap: balance;
  color:white;

}



.section_cards .cards-column {
  width: 50%;
  padding: 20px;
  box-sizing: border-box;
  z-index: 1;

}

.section_cards .card {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, top 0.3s ease; /* Añadida transición para 'top' */
  position: sticky;
}

.section_cards #card1, #card2, #card3, #card4, #card5 {
  display:grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 250px;
gap:3rem;
padding-inline:3rem;
  align-items:center;
  
}


#card1{
  background: #fff;
  color:black;
}

#card1 h3{
  color:black!important;
}

#card1 h4{
  color:black!important;
}

#card2{
  background:#93F5FF;
}

#card2 h3{
  color:black;
}

#card2 h4{
  color:black!important;
}

#card3{
  background:#0011d4;
  color:white;
}

#card3 h3{
  color:white!important;
}
#card3 h4{
  color:white!important;
}

#card4{
  background:#B8D1FF;
  color:black;
}

#card4 h3{
  color:black!important;
}

#card4 h4{
  color:black!important;
}

.col_content_card h4{
  color:black!important;
}



#card5{
  background: #EF98FF;
  color:black;
}
#card5 h3, h4{color:black;
}


.section_cards .cards-column img{
  width:50%;
  height:auto;
  margin-left:-200px;
}


.section_cards .cards-column h4{
  font-family:Custom body Bold;
font-size: calc(1.45rem + 0.39vw);
    font-weight: 400;
    color: #262626;
    margin-block: 5px;
    letter-spacing: 0px;
}
.section_cards .cards-column h3{
font-weight: 400;
font-size: calc(6.5rem + 3.5vw);
text-align: center;
padding: 0;
font-family: "Bricolage Grotesque", sans-serif;
line-height: 1em !important;
margin:0;
text-align: center;
letter-spacing: 0px;
}

.section_cards .cards-column p{
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: 0px;
}

.section_cards .cards-column h2 {
  margin-top: 0;
}

.section_cards .spacer {
  height: 10vh;
  padding:0;
  margin:0;
}



@media (min-width: 1300px) and (max-width: 1500px) {
  .section_cards .container {
    width:98%;
  }

}

@media (min-width: 950px) and (max-width: 1299px) {
  .section_cards .container {
    width:98%;
  }
  .section_cards .title-column h2{
    font-size: calc(2.7rem + 4vw) !important;
  }

}

@media (min-width: 600px) and (max-width: 949px) {
  .section_cards .container {
    width:85%;
    display:flex;
    flex-direction:column;
    height: auto;
  }
  .section_cards .title-column {
    width:100%;
  }

  .section_cards .cards-column {
    width:100%;
  }
}

@media (min-width: 300px) and (max-width: 599px) {
  .section_cards .container {
    width:90%;
    display:flex;
    flex-direction:column;
    height: auto;
  }
  .section_cards .title-column {
    width:100%;
    height:auto;
  }

  .section_cards .cards-column {
    width:100%;
    padding:0;
  }
  .section_cards .title-column h2{
    text-wrap: normal;
    
  }
  .section_cards .cards-column p{
    font-size: calc(1.6rem + 0.19vw);
  }
  .section_cards #card1, #card2, #card3, #card4, #card5 {
    grid-template-rows: auto;
    padding:20px 25px;
  }
  
.section_cards .cards-column h4 {
  font-size: calc(0.8rem + 3.4vw);
  line-height:1;
}  
  
}




/* Portfolio Desktop*/

.centered-section {
  background-color: #f7f6f6 !important;
  padding-block: 8rem 5rem;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 3 columns on computer */
  gap: 0px;
  width: 95%;
  max-width: 4000px;
  margin: 0 auto;
  padding: 0;
  column-gap: 50px;
}


.centered-section .container__text {
  margin: 0 auto;
  padding: 0;
  width: 95%;

}

.text__portfolio {
font-family: "Bricolage Grotesque", sans-serif;
    font-size: calc(4.3rem + 2.3vw) !important;
  font-weight: 500!important;
  line-height: 0.9em;
  padding: 0px !important;
  margin-bottom: 0.6em !important;
  color: black;
  text-align: center;
  text-transform:none;
}


.box {
  min-height: calc(50px + 33vw) !important;
  margin: 0px;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s;
  margin-block: 0px 50px;
  margin-inline: 0px;


}

.overlay-boxed {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0);
  /* White overlay with initial transparency */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s, transform 0.3s, background-color 0.3s;
  /* Added background-color transition */
}

.box:hover .overlay-boxed {
  opacity: 1;
  transform: scale(1);
  background-color: rgba(255, 255, 255, 0.7);
  /* White overlay with opacity on hover */
}

.box1 {
  background-image: url('../images/patricia-guajardo.jpg');
  /* Replace with the path to your image */
}

.box2 {
  background-image: url('../images/charlie-mac_800.jpg');
  /* Replace with the path to your image */
}

.box3 {
  background-image: url('../images/grayce-toon_800.jpg');
  /* Replace with the path to your image */
}

.box4 {
  background-image: url('../images/will-ayarza_800.jpg');
  /* Replace with the path to your image */
}

.box5 {
  background-image: url('../images/Meg-sands_800.jpg');
  /* Replace with the path to your image */
}

.box6 {
  background-image: url('../images/jordan-dyck_800.jpg');
  /* Replace with the path to your image */
}

.box7 {
  background-image: url('../images/hanrin-cho_800.jpg');
  /* Replace with the path to your image */
}

.box8 {
  background-image: url('../images/kira-geiger_800.jpg');
  /* Replace with the path to your image */
}

.box9 {
  background-image: url('../images/tyler-courtad_800.jpg');
  /* Replace with the path to your image */
}

.box10 {
  background-image: url('../images/sophie-maja-hughs_800.jpg');
  /* Replace with the path to your image */
}

.box11 {
  background-image: url('../images/sydney-kamel_800.jpg');
  /* Replace with the path to your image */
}

.box12 {
  background-image: url('../images/sarah-gellert_800.jpg');
  /* Replace with the path to your image */
}

.box13 {
  background-image: url('../images/leah-ruane_800.jpg');
  /* Replace with the path to your image */
}

.box14 {
  background-image: url('../images/riel-geli_800.jpg');
  /* Replace with the path to your image */
}

.box15 {
  background-image: url('../images/marco-reese-maldonado_800.jpg');
  /* Replace with the path to your image */
}

.box16 {
  background-image: url('../images/nora_800.jpg');
  /* Replace with the path to your image */
}

.box17 {
  background-image: url('../images/patriia-burgos_800.jpg');
  /* Replace with the path to your image */
}

.box18 {
  background-image: url('../images/nathaniel-goodwin_800.jpg');
  /* Replace with the path to your image */
}
.box19 {
  background-image: url('../images/marian-smoot_800.jpg');
  /* Replace with the path to your image */
}
.box20 {
  background-image: url('../images/andy-mc_800.jpg');
  /* Replace with the path to your image */
}
.box21 {
  background-image: url('../images/kimberley-kim_800.jpg');
  /* Replace with the path to your image */
}
.box22 {
  background-image: url('../images/livia-hetes_800.jpg');
  /* Replace with the path to your image */
}
.box23 {
  background-image: url('../images/michelle-nuccio_800.jpg');
  /* Replace with the path to your image */
}
.box24 {
  background-image: url('../images/haley-m_800.jpg');
  /* Replace with the path to your image */
}
.box25 {
  background-image: url('../images/jackie_800.jpg');
  /* Replace with the path to your image */
}
.box26 {
  background-image: url('../images/marcus-l_800.png');
  /* Replace with the path to your image */
}
.box27 {
  background-image: url('../images/loretta-800.jpg');
  /* Replace with the path to your image */
}


.btn-bx {
  margin: 5px;
  border: none;
  background-color: transparent !important;
  cursor: pointer;
  color: black;
  /* Made the text black for contrast against the light background */
  position: relative;
  overflow: hidden;
  padding: 0;
  /* Removed padding */
  font-size: inherit;
  /* Use the same font size as the parent element */
  text-decoration: none;
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.btn-bx::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2.5px;
  background-color: black !important;
  transition: width 0.3s;
}

.btn-bx:hover::after {
  width: 100%;
  background-color: #191919 !important;
  transition: 0.6s;
}

/* Media Queries for Tablet */
@media (min-width: 551px) and (max-width: 1100px) {
  .centered-section{
    display:none;
  }  
}

/* Media Queries for Mobile */
@media screen and (max-width: 550px) {
  .centered-section{
    display:none;
  }
  }



  /* Portfolio Tablet & Movile*/
  .portfolio-movile{
    display:none;
   }
   @media (min-width: 601px) and (max-width: 1100px) {
    .portfolio-movile{
   display:flex;
   flex-direction: column;
   background-color: #efefef;
   padding-block:3em;
    }
.text__portfolio {
    font-family: "Bricolage Grotesque", sans-serif;
font-size: 4.1em !important;
  font-weight: 400;
  text-transform:none;
  letter-spacing:0px;
}
    .container-portfolio{
      margin:0 auto;
      width:90%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap:30px;
     }
     .desc-btn{
      display:flex;
      justify-content: space-between;
      padding-inline: 5px;
      padding-block:15px;
     }
     


     .person-movile{
      font-family: "Neue Montreal Medium";
      font-weight: 400;
      font-size: 1.2em;
      line-height: 1em;
      padding: 0px !important;
      margin-bottom: 0.3em !important;
      color: black;
    
      text-transform: uppercase;
     }
     .btn-movile{
      font-family: "Neue Montreal Medium";
      font-weight: 400 !important;
      font-size: 1.2em;
      line-height: 1em;
      padding: 0px !important;
      margin-bottom: 0.3em !important;
      color: black;
      padding-block:0px 10px !important;
      padding-inline: 5px !important;
      margin:0!important;
      text-transform: uppercase;
     }
     .img-portfolio-movile{
      width:100%;
      height:auto;
      max-height: auto;
      object-fit: cover;
     }
    
   }



   @media screen and (max-width: 600px) {
    .portfolio-movile{
      display:flex;
      flex-direction: column;
      background-color: #efefef;
      padding-block:3em;
       }
   .text__portfolio {
font-size: 3em !important;
  font-weight: 400;
  text-transform:none;
  letter-spacing:0px;
}

.desc-btn img{
          width:27px!important;
          height:27px!important;
      }

       .container-portfolio{
        margin:0 auto;
        width:90%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap:30px;
       }
       .desc-btn{
        display:flex;
        justify-content: space-between;
        align-items:center;
        padding-inline: 5px;
        padding-block:15px 5px;
       }
  
       .person-movile{
     font-family: Custom body Bold;
        font-weight: 400;
        font-size: 1.4em;
        line-height: 1em;
        padding: 0px !important;
        color: black;
      
        text-transform: uppercase;
       }
        .btn-movile{
    font-family: Custom body;
        font-weight: 400 !important;
        font-size: 1.2em;
        line-height: 1em;
        padding: 0px !important;
        margin-bottom: 0.3em !important;
        color: black;
        padding-block:0px 10px !important;
        padding-inline: 5px !important;
        margin-block:10px 5px!important;
        text-transform: uppercase;
       }
       .img-portfolio-movile{
        width:100%;
        height:auto;
        max-height: auto;
        object-fit: cover;
       }
      
    }








/*PRINCING*/


.pricing {
  width: 100%;
  padding-block: 3em;

}


.sbs-off-pr{
      width: 90%;
  max-width: 4000px;
  margin-inline: auto;
    margin-block: 15px 30px;
}

.sbs-off-pr h1{
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 500;
font-size: calc(2.5rem + 1.3vw) !important;
    text-align: center;
    line-height: 0.9em;   
    margin-bottom:10px;
}


.toggle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block: 0px 3em;

}


.grid-fcontainer {
  width: 90%;
  max-width: 4000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;

}


.f-column-items {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  padding: 50px 35px;
}


.grid-scontainer {
  width: 90%;
  max-width: 4000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;

}

.toggle-switch {
  position: relative;
  width: 60px;
  height: 30px;
  margin: 0 10px;
  margin: 0 auto;
}

.toggle-switch input {
  display: none;
}

.toggle-switch label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  border-radius: 15px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.toggle-switch label::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  transition: left 0.2s;
}

input:checked+label {
  background-color: #4caf50;
}

input:checked+label::after {
  left: 35px;
}




.grid-item {
  padding: 0px;
  text-align: center;
}

.grid-item .plan {
  font-size: 16px;
  font-family: Custom body;
  color: black;
  letter-spacing: 1px;
  font-weight:400;
}


.f-column-items-s {
    background-color: #356af4;
  padding: 20px 35px;
}

.f-column-items-s h2 {
  padding: 0;
  margin: 0;
  line-height: 1em;
  color: white;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 17px;
  font-family:"Poppins", sans serif;
}


.s-column-items {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  padding: 50px 35px;
}



.text-annually,
.text-monthly {
  color: #908b8b;
  /* Color plomo por defecto */
  font-family: "Custom body" !important;
  font-size: 30px;
  letter-spacing: 1px;
  font-weight:400;
}

#pricingToggle:checked+.text-annually {
  color: #000000;
  /* Color negro cuando annually está seleccionado */
}

#pricingToggle:checked~.text-monthly {
  color: #908b8b;
  /* Color plomo cuando annually está seleccionado */
}

#pricingToggle:not(:checked)~.text-monthly {
  color: #000000;
  /* Color negro cuando monthly está seleccionado */
}


/* Estilos para el toggle */
.toggle-switch {
  position: relative;
  width: 60px;
  /* Puede ajustar según la necesidad */
  height: 30px;
  /* Puede ajustar según la necesidad */
  margin: 0 10px;
  cursor: pointer;
}

.toggle-switch:before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #4a4646;
  /* Color de fondo del toggle */
  border-radius: 30px;
  /* Asegura que el toggle tiene bordes redondeados */
  transition: background-color 0.2s;
}

.toggle-switch:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 2px;
  /* Un pequeño espacio desde la izquierda para el círculo */
  transform: translateY(-50%);
  width: 26px;
  /* Diámetro del círculo interno */
  height: 26px;
  /* Diámetro del círculo interno */
  background-color: #FFFFFF;
  /* Color de fondo del círculo interno */
  border-radius: 50%;
  /* Asegura que el círculo interno sea perfectamente redondo */
  transition: left 0.2s;
}

#pricingToggle:checked~.toggle-switch:before {
  background-color: #000000;
  /* Color de fondo cuando está activo */
}

#pricingToggle:checked~.toggle-switch:after {
  left: 32px;
  /* Posición del círculo interno cuando el toggle está activo */
}

#pricingToggle {
  display: none;
}

.grid-item.price {
  font-size: 55px;
    font-family: "DM Sans", sans-serif;
  font-weight: 400;
  letter-spacing: 0px;
  color: black;
  margin-bottom: 0em;
  display:flex;
  justify-content:center;
  align-items:center;
}

.grid-item.price span{
font-size:22px;
}

.number-ofert{
  color:#356af4;
font-family: "DM Sans", sans-serif;
  font-weight:400;
  text-align: center;
  margin-bottom:2em;
      display: flex;
    justify-content: center;
}

.product {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgb(190, 183, 183);
  padding-top: 25px;
}


.tooltip-container {

  position: relative;
  z-index: 10;
  text-align: center;
  font-family:Avenyr Lt Regular;
  font-size: 14px;
  margin-top: -5px;
  line-height: 1.3em;

}

.tooltip-content {
  display: none;
  position: absolute;
  width: 260px !important;
  height: auto;
  top: -50% !important;
  right: -300% !important;

  padding: 10px !important;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  z-index: 11;
  /* Añade esta línea para asegurarte de que el contenido del tooltip esté por encima de su contenedor */
  font-size: 16.5px;
  margin-right: 5px;
  background-color: #1b1b1b;
  color: white;
font-family: Custom body;


}

.tooltip-content::before {
  content: "";
  position: absolute;
  bottom: -7px;
  /* Ajustar la posición vertical del triángulo */
  left: 50%;

  /* Definiendo el triángulo con bordes */
  border-left: 8px solid transparent;
  /* Ajustar el tamaño si es necesario */
  border-right: 8px solid transparent;
  /* Ajustar el tamaño si es necesario */
  border-top: 8px solid black;
  /* Ajustar el tamaño si es necesario */

  width: 0;
  height: 0;
}

.icon-text {
  display: flex;
  align-items: center;
  gap: 15px;

}

.icon-text img{
    width:20px!important;
}


.info-icon {
  cursor: pointer;
  font-size: 20px;
  color: rgb(160, 155, 155);
  margin-top: -18px !important;

}

.tooltip-content {
  display: none;
  position: absolute;
  width: 200px;

  right: 100%;
  transform: translateY(-140%);

  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  z-index: 1;
  font-size: 16px!important;
  margin-right: 5px;
  font-family:Avenyr Lt Regular!important;
}


.btn-price {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-block: 0.5em 2em;
  text-transform: uppercase !important;
font-family:Custom body Bold;
font-weight:400;
letter-spacing:0.5px;
}


.btn-pricing {
  background: none;
  border: 2px solid black;
  background-color: black;
  color: white;
  padding: 12px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  width: 100%;
  font-family:Custom body Bold;


}

.btn-pricing:hover {
  border: 2px solid black;
  color: black;
  background-color: white;
  ;
}


.icon-text {
  color: black;
font-size: calc(10.7px + 0.429vw) !important;
 font-family: Custom body;
  font-weight: 300 !important;
  letter-spacing: 0px!important;
  line-height: 1.3em;
  margin-bottom: 23px;
  cursor:default!important;

}

.best {
  display: none;
}




@media (min-width: 1100px) and (max-width: 1500px) {
  .grid-fcontainer {
    width: 98% !important;
  }

  .grid-scontainer {
    width: 98% !important;
  }
}



@media (min-width: 100px) and (max-width: 1099px) {
  .pricing {
    margin: 0 auto;
  }

  .grid-fcontainer {
    display: none;
  }
  .text-annually,
.text-monthly {font-size:24px;}


  .grid-scontainer {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    width: 90% !important;
    margin: 0 auto;
  }

  .best {
    background-color: #2f80ed;
    padding: 20px 35px;

    margin-top: -40px;
    margin-bottom: 30px;
    margin-inline: -35px;
    line-height: 1em;
    color: white;
    text-align: center;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 14px;
    display: flex;
    flex-direction: column;
  }
  .icon-text{
      font-size:16.5px!important;
  }
}








.bnnr-rvw{
    background:white;
    color:black;
    padding-block:0.3rem;
}


.bnnr-rvw h2{
    font-family: Final Grotesque Light Font;
    font-weight:500;
    font-size: calc(27.5px + 2vw) !important;
    text-align:center;
    line-height:1.1em;
    margin-bottom:0.5em;
    letter-spacing:-1px;

}

@media (min-width: 551px) and (max-width: 900px) 
{ .bnnr-rvw h2
{ font-size: 3em; }
    
}

@media (min-width: 0px) and (max-width: 550px) 
{ .bnnr-rvw h2
{ font-size: 2.2em; }
    
}



 /* FOOTER */
 
  footer{
    background:#000;
    color:white;
    padding-block:0rem 3rem;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
  }

  .container_footer{
    width:90%;
    max-width: 4000px;
    display:grid;
    grid-template-columns: 1fr;
    margin-inline:auto;
  }

  .col_tl_footer h2{
    font-family: "Bricolage Grotesque", sans-serif;
    color:white;
    font-size:17.5vw;
    line-height:1em;
    font-weight:300;
  }


  .row_f_info_footer{
    display:grid;
    grid-template-columns: 0.6fr 0.6fr;
    gap:15%;
    padding-block:3rem;
    margin-block:2rem;
  }

  .col_info_footer{
    display:flex;
    flex-direction: column;
    gap:2.5rem;
  }

  .col_info_footer img{
    width:60px;
  }

  .col_info_footer h4{
    font-family: Custom body Bold;
    font-size: 1.6em;
    color:white;
    font-weight: 800;
  }

  .col_info_footer p{
  font-family: "DM Sans", sans-serif;
    font-weight: 400;
    line-height: 1.4;
    font-size:20px;
  }

  .cont_btns_footer{
    display:flex;
    gap:3rem;
  }


  .cont_btns_footer a{
  font-size:20px;
  background:white;
  color:black;
  border-radius: 100px;
  margin-top:0.5rem;
      font-family: Custom body Bold;

  }

  .cont_btns_footer a:nth-child(1){
    padding:15px 30px;
  }

  .cont_btns_footer a:nth-child(2){
    padding:15px 40px;
  }



  .subscribe-container {

    width: 100%;
}

.subscribe-form {
    display: flex;
    flex-direction: column;
    margin-top:5px;

}

.email-input {
    padding: 15px;
    font-size: 16px;
    border: 1px solid #fff;
    background-color: black;
    color: white;
    border-radius: 5px;
    outline: none;
width:85%;
font-family: "DM Sans", sans-serif;
font-size:19px;
font-weight:200;
}

.email-input::placeholder {
    color: gray;
}

.subscribe-button {
    padding: 10px 20px;
    font-size: 16px;
    color: black;
    background-color: white;
    border: none;
    border-radius: 5px;
margin-top:30px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width:150px;
    font-family: "DM Sans", sans-serif;
font-size:19px;
padding:15px 30px;
border-radius: 100px;
}

.subscribe-button:hover {
    background-color: lightgray;
}

.row_s_info_footer{
  margin-block: 4rem 8rem;
}

.row_s_info_footer ul{
  display:flex;
  justify-content: space-between;
}

.row_s_info_footer a{
  font-family: "Bricolage Grotesque", sans-serif;
font-size: calc(1.45rem + 0.39vw);
  font-weight:500;
  color:white;
}


.row_t_info_footer{
  display:flex;
  justify-content: space-between;
  gap:10rem;
}




.button {
	pointer-events: auto;
	cursor: pointer;
  padding:0;
  margin:0;
	margin: 0;
}


@keyframes MoveUpInitial {
	to {
		transform: translate3d(0,-105%,0);
	}
}

@keyframes MoveUpEnd {
	from {
		transform: translate3d(0,100%,0);
	}
	to {
		transform: translate3d(0,0,0);
	}
}


.button--narvi span {
	display: block;
	position: relative;
}

.button--narvi > span {
	transition: transform 0.4s;
	transform: translate3d(0,-0.556rem,0);
	z-index: 1;
	overflow: hidden;
}

.button--narvi:hover > span {
	transform: translate3d(0,-1.111rem,0);
}

.button--narvi:hover > span > span {
	animation: MoveUpInitial 0.45s forwards, MoveUpEnd 0.15s forwards 0.15s;
}





.row_t_info_footer p, a{
  font-family: "DM Sans", sans-serif;
  font-size:16.5px;
  font-weight: 300;
  line-height: 1.2;
}

.scol_lst_footer{
  display:grid;
  grid-template-columns: 1fr 1fr;
}


.text_act_ft{
        font-size:16.4vw!important;
        text-align:center;
}





@media (min-width: 1000px) and (max-width: 1250px) {

  .row_f_info_footer{
    grid-template-columns: 0.7fr 0.7fr;
    gap:8%;
  }
  .email-input{
    width:95%;
  }
}



@media (min-width: 900px) and (max-width: 999px) {

  .row_f_info_footer{
    grid-template-columns: 0.9fr 0.9fr;
    gap:8%;
  }
  .email-input{
    width:100%;
  }
  .col_info_footer p, .email-input, .cont_btns_footer a, .subscribe-button {
    font-size:18px;
  }

  .row_t_info_footer{
    gap:3.5rem;
  }

}


@media (min-width: 700px) and (max-width: 899px) {

  .container_footer{
    width:80%;
  }

  .col_info_footer {
    margin-top:3rem;
  }

  .row_t_info_footer {
    align-items:center;
  }

  .col_tl_footer h2 {
    font-size: calc(3rem + 10.89vw);
    line-height: 1.2em;
  }
  .row_f_info_footer{
    grid-template-columns:0.8fr;
    gap:5%;
  }
  .email-input{
    width:100%;
  }
  .col_info_footer p, .email-input, .cont_btns_footer a, .subscribe-button {
    font-size:19.5px;
  }
  .col_info_footer{
    margin-top:3rem;
  }

  .row_s_info_footer ul {
    display:grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
  }
  .row_s_info_footer li{
    margin-block:10px;
  }

  .row_t_info_footer p{
    line-height: 1.4;
  }
  .row_s_info_footer a{
    font-size: calc(1.5rem + 0.89vw);
  }


  .row_t_info_footer{
gap:1rem;
  }

  .scol_lst_footer{
    grid-template-columns: 1fr;
    gap:1rem;
  }

}


@media (min-width: 320px) and (max-width: 699px) {

  footer{
    padding-block:4rem 5rem;
  }


  .container_footer{
    width:85%;
  }

  .col_info_footer {
    margin-top:3rem;
  }

  .row_t_info_footer {
    align-items:center;
  }

  .col_tl_footer h2 {
    font-size: calc(2rem + 10.6vw);
    line-height: 1.2em;
    text-align: center;
  }
  .row_f_info_footer{
    grid-template-columns:0.97fr;
    gap:3%;
    padding:0;
    margin-block:1rem;
  }
  .email-input{
    width:100%;
  }
  .col_info_footer p, .email-input, .cont_btns_footer a, .subscribe-button {
    font-size:18px;
  }

  .cont_btns_footer{
    gap:1rem;
  }
  
  .row_s_info_footer {
    margin-block: 8rem;
}

  .row_s_info_footer ul {
    display:grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
  }
  .row_s_info_footer li{
    margin-block:10px;
  }

  .row_t_info_footer p{
    line-height: 1.4;
  }
  .row_s_info_footer a{
    font-size: calc(1.5rem + 0.89vw);
  }

  .row_t_info_footer{
    flex-direction:column-reverse;
    text-align:center;
gap:3.5rem;
  }

  .scol_lst_footer{
    display: flex;
    gap: 5rem;
  }

}


@media (min-width: 320px) and (max-width: 400px) {

  .col_tl_footer h2 {
    font-size: calc(1.5rem + 10.6vw);

  }
  .cont_btns_footer a:nth-child(1) {
padding:12px 20px;
  }
  .cont_btns_footer a:nth-child(2) {
    padding:12px 30px;
      }
}







 /* BANNER */

.banner-calendar{
background-color:#18233b;
padding-block:0.8em 0.7em ;
display:none;
}

.container-baner{
  display:flex;
  justify-content:space-evenly;
  align-items:center;
  width:70%;
  max-width: 4000px;
  margin:0 auto;
}
.text-baner{
  color:white;
  font-size:19px;
  letter-spacing:-0.3px!important;
  margin:0!important;
  padding:0!important;
  margin:0!important;
font-family: Final Grotesque Light Font;
  font-weight:40!important;
  letter-spacing: -0.5px;
  animation:none!important;
}

@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

.button-calendar{
color:white;
background-color:#356af4;
letter-spacing:-0.3px!important;
margin:0!important;
font-weight:400!important;
font-family: Final Grotesque Light Font;
border:1px solid transparent;
border-radius: 5px;
padding-block:3px;
padding-inline:20px;
font-size:17px;
cursor:pointer;
animation: fadeIn 1s ease-out 0s 1 forwards;
letter-spacing:0px!important;
}

.button-calendar:hover{
  background-color: #102c90;
  transition: 0.2s linear;
  cursor:pointer;
}

@media (min-width: 1200px) and (max-width: 1400px) {
  .container-baner{
    width:80%;
  } 
}
@media (min-width: 750px) and (max-width: 1199px) {
  .container-baner{
    width:98%;
  } 
  .button-calendar{
    font-size:1.1em;
  }
  .text-baner{
    font-size:1.1em;
  }
}

@media (min-width: 550px) and (max-width: 749px) {
  .container-baner{
    width:80%;
    display:flex;
    flex-direction:column;
  } 
}

@media (min-width: 0px) and (max-width: 549px) {
  .container-baner{
    width:95%;
    display:flex;
    flex-direction:column;
  } 
  .button-calendar{
    font-size:1em;

  }
  .text-baner{
    font-size:1em;
    margin-bottom:0.5em!important;
  }
}





.home-faq{
    background:white!important;
    padding-top:4rem;
}

.home-faq .faq-item:nth-child(5){
  border-bottom: 1px solid #ddd;
  padding-bottom:20px;
}











 

/*TERMS*/

.terms{
  padding-block:3.5em;
}

.cont-terms{
  width:80%;
  max-width:1080px;
  margin-inline:auto;
}

.cont-terms h2{
  font-family: "Poppins", sans-serif;
  font-weight:600;
  color:black;
  text-align:center;
  font-size:27px;
}

.container-content-terms{
  width:80%;
  max-width:1080px;
  margin-inline:auto;
}

.col-content-terms{
margin-block:1.5em;
}

.col-content-terms h3{
  font-family: "Poppins", sans-serif;
  font-weight:300;
  color:black;
  text-align:justify;
  font-size:16px;
  line-height:1.4;
  margin-block:5px 15px;
}



.st-disc{
  margin-block:5px 15px;
}
.st-disc li{
  list-style-type: disc;
  margin-left:16px;
  font-family: "Poppins", sans-serif;
  font-weight:300; 
 font-size:16px;
 line-height:1.3;
 color:black;
 margin-block:4px 8px;
}



.col-content-terms h2{
  font-family: "Poppins", sans-serif;
  font-weight:600;
  color:black;
  text-align:center;
  font-size:27px;
}

.st-disc-ws{
  margin-block:5px 15px;
}
.st-disc-ws li{
  list-style-type: disc;
  margin-left:16px;
  font-family: "Poppins", sans-serif;
  font-weight:300; 
 font-size:16px;
 line-height:1.1;
 color:black;
 margin-block:5px;
}


 
 
 /*CONTACT*/
 
.contact{
  padding-block:2em 4em;
  background:white;
  color:black;
}

.container_contact{
  width:90%;
  max-width:4000px;
  margin-inline:auto;
}

.frow_contact h2{
  color:black;
    font-family: "Bricolage Grotesque", sans-serif;
font-size: calc(4.3rem + 2.3vw) !important;
    line-height: 0.9;
    font-weight: 600;
    line-height: 1;
    text-align:center;
    margin-bottom:2rem;
}

.frow_contact iframe{
  width:1200px;
}

.cont_iframe{
  display:flex;
  justify-content:center;
}



.frow_contact h3{
  color:black;
    font-family: Custom body;
    font-size: 22px;
    font-weight: 300;
    line-height: 1.1;
    text-align:center;
    margin-block:1rem 3rem;
    letter-spacing: 1px;
}

.srow_contact{
  display:grid;
  grid-template-columns:1fr 0.8fr 1fr;
  border-top:1px solid black;
  width:90%;
  max-width: 1200px;
  margin-inline:auto;
  grid-template-rows: 100px;
  margin-top:4rem;
}

.srow_contact img{
  width:35px;
  height:auto;
}

.srow_contact a{
  display:flex;
  align-items:center;
  gap:15px;
  font-size:18px;
  font-weight: 400;
  letter-spacing: 0px;
  font-family:Custom body;
}

.fcol_srow , .scol_srow , .tcol_srow{
  display:flex;
  justify-content:center;
}

.fcol_srow{
  border-right:1px solid black;
}

.scol_srow{
  border-right:1px solid black;
}

.tcol_srow img{
  width:40px;
  height:auto;
}

 
 
 
 @media (min-width: 900px) and (max-width: 1299px) {
.srow_contact {
     grid-template-columns: 1fr 1fr 1fr;   
}
.fcol_srow, .scol_srow {
    border:none;
}
 }


 @media (min-width: 300px) and (max-width: 899px) {
.srow_contact {
     grid-template-columns: 1fr;  
grid-template-rows: none;
row-gap: 2.5rem;
border:none;
}
.fcol_srow, .scol_srow {
    border:none;
}

.frow_contact iframe{
    height:450px;
}
 }


 
 
/*AFFILIATE SECTION*/
 
 .container_affiliate {
  width: 100%;
  display: grid;
  grid-template-columns: 0.79fr 1.1fr;
}

.scol_aff img {
  width: 100%;
  height: 90vh;
  background-size: cover;
  object-fit: cover;
}

.fcol_aff {
  width: 75%;
  gap: 3.5rem;
  padding-block: 6rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content:center;
}

.fcol_aff h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 500;
  font-size: calc(2.99rem + 1.5999vw) !important;
  line-height: 1.1;
}

.fcol_aff p {
  font-size: calc(1.24rem + 0.499999vw) !important;
  font-weight: 300;
  margin-bottom: 1rem;
  font-family: "DM Sans", sans-serif;
  line-height: 1.4;
}

.fcol_aff a {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  background: black;
  display: inline-block;
  padding: 15px 30px;
  color: white;
  font-size: calc(1.24rem + 0.499999vw) !important;
}

@media (min-width: 1300px) and (max-width: 1430px) {
  .fcol_aff {
    width: 80%;
    gap: 3rem;
  }
}

@media (min-width: 1100px) and (max-width: 1299px) {
  .fcol_aff {
    width: 90%;
    gap: 3rem;
  }
}

@media (min-width: 900px) and (max-width: 1099px) {
  .fcol_aff {
    width: 80%;
    gap: 3rem;
  }
  .container_affiliate {
    grid-template-columns: 1.2fr 1.1fr;
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  .fcol_aff {
    width: 100%;
    padding-inline: 15%;
    gap: 3rem;
  }
  .container_affiliate {
    display: flex;
    flex-direction: column-reverse;
  }
  .scol_aff img {
    width: 100%;
    height: 70vh;
  }
  .fcol_aff h2 {
    text-align: center;
  }
  .fcol_aff p {
    text-align: justify;
  }
}

@media (min-width: 300px) and (max-width: 599px) {
  .fcol_aff {
    width: 100%;
    padding-inline: 12.5%;
    gap: 3rem;
  }
  .container_affiliate {
    display: flex;
    flex-direction: column-reverse;
  }
  .fcol_aff h2 {
    text-align: center;
  }
  .fcol_aff p, a {
    text-align: justify;
    font-size:16px;
  }
  .col_btn_fcol{
margin-inline:auto;
  }
}


 
 
 
 

.pricing-affiliate{
    background-color:#fff;
    padding-block:4em;
}


.pricing-affiliate h2{
    font-size:50px;
font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 500;
    font-size: calc(2.99rem + 1.5999vw) !important;
  color:black;
  text-align:center;
  margin-bottom:0.3em;
}
.p-a-text{
    width:80%;
    max-width:1050px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5rem;
    align-items:center;
}

.fcolumn-p-a-text, .scolumn-p-a-text{
    flex:1;
}
.fcolumn-p-a-text img{
    width:100%;
    heigth:auto;
    max-height:auto;
}


.p-a-text h4{
      font-family: 'DM Sans', sans-serif;  
      color:black;
      font-weight:300;
font-size: 18px;
line-height:1.5;
margin-bottom:10px;

}



.cont-price{
   background-image: url('images/icon-price.svg'); 
  background-size:contain;
  background-position:center; 
     background-repeat: no-repeat;
     margin:0 auto;
     display:flex;
     flex-direction:column;
     justify-content:center;
     height:20vh;
     width:100%;
}



.container-sqare{
display: grid;
  grid-template-columns: repeat(4, 1fr);
    width:90%;
    max-width:800px;
    margin:0 auto;
    color:black;
    text-align:center;
    margin-block:1em;
    gap:50px;
      justify-content: space-between; /* Alineación horizontal */
   align-content: space-between; /* Alineación vertical */
}

.cont-price h3{
  font-family: 'Poppins', sans-serif; 
  font-size:20px;
  font-weight:400;
  color:green;
  margin-top:2.7em;
  line-height:1em;
  margin-bottom:0em;
  padding:0;
-webkit-text-fill-color: transparent;
    -webkit-font-smoothing: subpixel-antialiased;
    background-color: transparent;
        word-break: break-word;
            display: block;
            -webkit-text-stroke-width: 1px;
}

.cont-price h2{
  font-family: 'Poppins', sans-serif;  
font-size:40px;
  font-weight:800;
  color:orange;
}

.container-outside{
    display:flex;
    justify-content:space-around;
    margin:0 auto;
    width:90%;
    max-width:847px;
    gap:0px;
}

.container-outside h4{
  font-family: 'Poppins', sans-serif; 
  font-size:27px;
  font-weight:600;
  color:#525050;
  text-align:center;
  
}

.container-outside h5{
  font-family: 'Poppins', sans-serif; 
  font-size:16.5px;
  font-weight:400;
  color:black;
  text-align:center;
  margin-top:1em;
  
}

@media (min-width: 850px) and (max-width: 1250px) {
  .p-a-text{
      gaap:20px;
      width:95%;
  }
  .p-a-text h4 {
      font-size:16.5px!important;
  }  
}

@media (max-width: 849px) {
    
  .p-a-text{
      display:flex;
      flex-direction:column;
      width:80%!important;
  }  
  .pricing-affiliate h2 {
      font-size:33px;
      line-height:1.2;
  }
    
   /* Cambios de estilo para tablet (ancho máximo de 768px) */
.container-sqare {
  grid-template-columns: repeat(2, 1fr);
     width:60%;
   }
      .cont-price{
 height:40vh;  
 background-size:contain;
   }
   
   .container-outside{
  display:none;

   }
   container-outside{
 display:none;
   }

}

@media (max-width: 680px) {
   .cont-price{
 height:28vh;  
 background-size:contain;
 margin-bottom: -30px;
   }
    
}

@media (max-width: 500px) {
    .container-sqare {
     width:80%;
   }
   .cont-price{
height: 25vh;
    background-size: contain;
    margin-bottom: -40px;
   }   
}




.steps{
  padding-block:4.5rem;
  background: black;
  color:white;
}
.container_steps{
  margin-inline:auto;
  width:90%;
  max-width: 950px;
}

.row-tl_steps{
  margin-block:2rem 4rem;
}


.fcol_content_steps, .scol_content_steps, .tcol_content_steps {
  display:grid;
  grid-template-columns:0.12fr 1fr;
  margin-block:2rem;
  align-items:center;

}
.row-tl_steps h2{
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 500;
  font-size: calc(2.99rem + 1.5999vw) !important;
  text-align:center;
  color:white;
}

.row_content_steps h3{
  text-align:center;
  font-family: "DM Sans" , sans serif;
  font-weight: 300;
  font-size: calc(2.99rem + 1.5999vw) !important;
  color:white;

}

.row_content_steps p{
  text-align:left;
  font-weight:300;
  line-height: 1.2;
  font-size: calc(1.24rem + 0.499999vw) !important;
  font-family: "DM Sans" , sans serif;
  color:white;

}

.row_content_steps a{
  font-size: calc(1.24rem + 0.499999vw) !important;
  font-family: "DM Sans" , sans serif;
  font-weight:300;
  color:white;
}



@media (min-width: 600px) and (max-width: 1000px) {
  .container_steps{
    width:80%;
  }
  .fcol_content_steps, .scol_content_steps, .tcol_content_steps {
    grid-template-columns:0.18fr 1fr;
  }
  .row_content_steps h3{
    font-size:6rem!important;
    font-weight:200;
  }
  .row_content_steps p{
    font-size:19px!important;
    line-height: 1.4;
  }
}

@media (min-width: 300px) and (max-width: 599px) {
  .container_steps{
    width:85%;
  }
  .fcol_content_steps, .scol_content_steps, .tcol_content_steps {
    grid-template-columns:1fr;
    gap:1rem;
    margin-bottom:4rem;
  }
  .row_content_steps h3{
    font-size:6rem!important;
    font-weight:200;
  }
  .row_content_steps p{
    font-size:19px!important;
    line-height: 1.4;
    text-align:center;
  }
  .row_content_steps a{
    font-size:19px!important;
  }
}





/*-----------------------------------*\
  #MAGAZINE PAGE
\*-----------------------------------*/


/* FULL CARD MAGAZINE SECTION */

  .row-magazine{
    display:grid;
grid-template-columns: 0.6fr 0.8fr;
GAP:2rem;
align-items:center;
}

.fcol_desc_magazine h2{
  font-size: calc(1.2rem + 2.2vw) !important;

    font-weight:400;
    line-height: 1.1;
    font-family: "Custom Serif";
    letter-spacing:1px;
}

.fcol_desc_magazine{
  padding-inline:3.5rem;
}

.fcol_desc_magazine p{
  font-family: "Baskervville", serif;

    line-height: 1.6;
    font-size: 17.5px;
    margin-top:1rem;
}
    



.desc-magazine{
    padding-block:2rem 2.5rem;
}

.desc-magazine img{
    border-radius: 10px;
}


@media (min-width: 1300px) and (max-width: 1500px) {
  .fcol_desc_magazine{
    padding-inline:2rem;
  }
}

@media (min-width: 1100px) and (max-width: 1299px) {
  .fcol_desc_magazine{
    padding-inline:1rem;
  }
}

@media (min-width: 700px) and (max-width: 1099px) {

  .desc-magazine {
    padding-block:1rem  2rem;
  }

  .fcol_desc_magazine{
    padding-inline:0rem;
  }
  .fcol_desc_magazine p{
    display:none;
  }
  .fcol_desc_magazine h2{
    line-height:1.3;
   
  }

}

@media (min-width: 450px) and (max-width: 699px) {

  .desc-magazine {
    padding-block:1rem  0rem;
  }
  .row-magazine{
    display:flex;
flex-direction:column-reverse;
GAP:2rem;
align-items:center;
width:80%;
}

.row-magazine img{
  width: 100%;
  margin-inline:auto;
}

  .fcol_desc_magazine{
    padding-inline:0rem;
  }
  .fcol_desc_magazine h2{
    line-height:1.3;
    text-align:center;
       font-size: calc(1.8rem + 1.7vw) !important;
  }

}

@media (min-width: 250px) and (max-width: 449px) {
  .row-magazine{
    display:flex;
flex-direction:column-reverse;
GAP:2rem;
align-items:center;
width:80%;
}

.row-magazine img{
  width: 100%;
  margin-inline:auto;
}

  .fcol_desc_magazine{
    padding-inline:0rem;
  }
  .fcol_desc_magazine h2{
    line-height:1.3;
    text-align:center;
          font-size: calc(1.8rem + 1.3vw) !important;
  }
}







/* MAGAZINE SECTION */

.article .grid_sm{
    display:grid;
    grid-template-columns: 0.6fr 1.49fr 0.06fr;
    gap:3rem;
}

.article .sidebar_content h2{
  font-family:"Custom Serif";
  font-weight:400;
  font-size:28px;
  text-transform:uppercase;
  letter-spacing:1px;
}

.article .sidebar, .share-container {
    position: sticky;
    top: 3%;
    padding: 0px;

    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto; /* Ajuste la altura para ser automática */
    align-self: start; /* Asegura que se quede en la parte superior */
}


.article .share-container{
    padding:0;
    top: 6.5%;
}

.article .progress-bar {
    width: 100%;

    height: 4px;
    margin-bottom: 10px;
}

.article .progress {
    width: 0%;
    height: 100%;
    background-color: #595959;
    transition: width 0.8s linear;
}

.article .reading-time {
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center;
    gap:0.5rem;
    width:100%;
    justify-content:center;
}

.article .reading-time img{
    width:16px;
    height:16px; 
    margin-top:-2px;
}

.article .reading-time-text{
    font-family:"Custom body Bold";
}



.article .sidebar_content{
    background:#F5F5F5;
    padding-inline:2rem;
    padding-block:2rem;
    width:100%;
    margin-bottom:1.5rem;
    border-radius: 10px;
    line-height: 1.3;
    font-family:Custom body Bold;
    font-weight:400;
}

.article .sidebar_content a{
    padding-block:3px;
    margin-block:6px;
  font-family: "Baskervville", serif;
}

.article .sidebar_content a:hover{
  text-decoration: underline;
  transition:0.4s linear;
}



.article .share-container h3 {
    font-size: 14.5px;
    font-family: "Custom Body";
    color: #333;
    font-weight:400;
    margin-bottom:5px;
}

.article .social-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.article .social-button {
    background-color: #474646;
    /* Ajusta el color de fondo según la imagen */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

.article .social-button:hover {
    background-color: #000;
    /* Cambia el color al pasar el mouse */
}

.article .icon {
    font-size: 14px;
    color: #fff;
}

.article .content li{
    list-style:decimal;
    margin-block:5px;
  font-family: "Baskervville", serif;
    margin-bottom: 20px;
    line-height:1.4;
    margin-block:10px!important;
    font-size:19.5px;
    margin-left:30px;
}

.article .content p{
font-size: 19px;
    line-height:1.4;
    margin-block:5px 16px;
  font-family: "Baskervville", serif;
line-height: 1.6;
letter-spacing:-0.3px;
}

.quoted-text {
    font-style: italic;
}



.article .content p span{
  font-family: "Baskervville", serif;
  display:inline;
}

.article .content p a{
  font-family:"Custom body Bold";
  display:inline;
}

.article .content h1{
    font-weight:500;
    font-size: calc(1vw + 2.7rem);
  font-family:"Custom Serif";
    line-height: 1.2;
    margin-block:10px 15px;
    letter-spacing:1px;
}


.article .content .tl_p {
  font-family: "Baskervville", serif;
  margin-block:25px -8px;
  font-size:21px;
  font-weight:700;
}

.article .content .btn-magazine{
  background-color: #474646;
 width:fit-content;
  padding-inline:35px;
  padding-block:12px;
color:white;
font-family: "Custom Body Bold";
margin-top:30px;
margin-inline: auto;
}

.article .content .btn-magazine:hover{
    background:black;
    transition:0.5s ease all;
}


.article{
    padding-block:1rem 3rem;
}


@media (min-width: 1100px) and (max-width: 1300px) {
  .article .grid_sm{
    display:grid;
    grid-template-columns: 0.6fr 1.49fr 0.06fr;
    gap:2.5rem;
    width:98%;
}
}

@media (min-width: 900px) and (max-width: 1099px) {
  .article .grid_sm{
    display:grid;
    grid-template-columns: 0.48fr 1fr;
    gap:1.5rem;
    width:98%;
}

.article .social-buttons {
  flex-direction:row;
}
.article .sidebar_content{
  padding-inline:1rem;
}
.article .share-container{
  top:auto;
  align-self: auto;
  grid-column: 2 / -1; /* Ocupar todo el ancho de la cuadrícula */
  width: 100%;
}
}


@media (min-width: 600px) and (max-width: 899px) {
  .article .grid_sm{
    display:grid;
    grid-template-columns: 1fr;
    gap:2rem;
    width:80%;
}
.article .sidebar, .share-container {
  position:relative;
  top:auto;
  padding: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto; 
  align-self:auto;
}

.article .social-buttons {
  flex-direction:row;
}
.article .sidebar_content{
  padding-inline:1rem;
}
.article .progress-bar{
  display:none;
}
}


@media (min-width: 320px) and (max-width: 599px) {
  .article .grid_sm{
    display:grid;
    grid-template-columns: 1fr;
    gap:2rem;
    width:85%;
}
.article .sidebar, .share-container {
  position:relative;
  top:auto;
  padding: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto; 
  align-self:auto;
}

.article .social-buttons {
  flex-direction:row;
}
.article .sidebar_content{
  padding-inline:1rem;
}
.article .progress-bar{
  display:none;
}
.article .content h1 {
  font-size:25.5px;
}
.article .content p{
  font-size:17.5px;
  text-align:justify;
}
}



/* Grid principal */
.magazine-grid {
  padding-block: 3.5rem;
  background-color: white;
}

.mgz-cnt-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
gap:3rem;
}

/* Estilos de la card */
.magazine-preview-card {
  position: relative;
  overflow: hidden;
  background: transparent;
  transition: transform 0.5s ease;
}

.magazine-preview-card:hover {
  transform: translateY(-5px);
}

.magazine-preview-card a {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* Imagen */
.magazine-preview-image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 24px;
  margin-bottom: 1rem;
}

/* Contenido */
.magazine-preview-content {
  padding: 0;
}

.magazine-preview-title {
  font-size: 3.5rem;
  font-weight: 400;
  margin: 0 0 0.5rem;
  color: #000;
  line-height: 1;
  font-family: Custom Serif;
}

.magazine-preview-excerpt {
  display: none; /* Como en la referencia, que no muestra extractos */
}

/* Meta información */
.magazine-preview-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.magazine-preview-date,
.magazine-preview-author {
  display: none; /* Como en la referencia, que no muestra estos elementos */
}

/* Tiempo de lectura */
.magazine-reading-time {
  padding: 0;
  background: transparent;
  border: none;
  margin-bottom:10px;

}

.magazine-reading-time-text {
  font-size: 1rem;
  color: #3a3a3a;
  font-weight: 400;
  font-family: Custom body;

  font-size:15px;
}

/* Media queries para responsividad */
@media (max-width: 1200px) {
  .mgz-cnt-cols {
    gap:2rem;
  }
  
}

/* Media queries para responsividad */
@media (max-width: 980px) {
  .mgz-cnt-cols {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .magazine-grid .container{
    width:85%;
  }
  
}



@media (max-width: 700px) {
  .mgz-cnt-cols {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .magazine-grid .container{
    width:80%;
  }
  
  .magazine-preview-image {
    border-radius: 16px;
  }
}
















/*embed-form-mailchimp*/

#mc_embed_signup h2{
    font-weight:400!important;
    font-family:Custom body bold;
    font-size: 1.6em!important;
}

#mc_embed_signup .indicates-required {
    display:none;
}

#mc_embed_signup .mc-field-group label {
    color:white;
  font-family: "DM Sans", sans-serif;
       font-size:21px;
}

#mc_embed_signup .asterisk {
    display:none;
}

#mc_embed_signup .button {
    font-family:Custom body;
    font-weight:400;
    background-color:transparent!important;
    color:#fff!important;
    border:1.5px solid white!important;
        font-size:18px!important;
        height:auto!important;
            padding: 5px 30px!important;
}

#mc_embed_signup .mc-field-group input{
        background: transparent!important;
    color: white!important;
}







/*-----------------------------------*\
  #UPDATES PAGE
\*-----------------------------------*/

/* #UPDATES SECTION    */

.updates{padding-block:0rem 3rem;
    background-color:#fff;
}

.row-dsc-updates{
    width:90%;
    max-width:1300px;
    margin:0 auto;
  display:grid;
      grid-template-columns:1fr 1fr;
        justify-items: center;
align-items: center;
gap:0rem;
}

.row-dsc-updates img{
    width:100%;
    height:auto;
}

.row-dsc-updates h2{
    font-family: "Custom body" , sans serif;
    font-weight:200;
    font-size:2.9em;
    text-wrap:balance;
    line-height:1.2;
}

.row-dsc-updates a{
    text-align: center;
    font-family: Custom body;
    background:black;
    padding-block: 12px;
    font-size:20px;
    color:white;

    margin-top:1.5em;
        display: inline-block;
    padding: 20px 40px;
    border-radius: 15px;
    font-weight: 200;
}


.row-content-updates{
    width:80%;
    max-width:1350px;
    margin-inline: auto;
    margin-block:40px 20px;
  display:grid;
     grid-template-columns: repeat(5,1fr);
      gap:1%;
      text-align:center;
      padding-block:2.5rem 3rem;
}

.row-content-updates img{
    width:80px;
    margin-inline:auto;
    height:auto;
padding: 0px 12px;
}

.row-content-updates h2{
    font-size: 20px;
    font-family: Final Grotesque Medium Font;
    font-weight: 400;
}

.row-content-updates p{
    font-size: 18.5px;
   font-family: Custom body;
    font-weight: 400;
    line-height:1.1;
    margin-top:0.5em;
    text-wrap:balance;
}

@media (min-width: 900px) and (max-width: 1200px) {
.row-dsc-updates{
  
      grid-template-columns:0.9fr 1.4fr;
}
  .row-dsc-updates h1{
      font-size:2em;
  }  
  .row-content-updates{
      gap:2%;
  }
  .row-dsc-updates a{
      width:80%;
      font-size:19.5px;
  }

}

@media (min-width: 600px) and (max-width: 899px) {
.row-dsc-updates{
  
      grid-template-columns:1fr 1.3fr;
      width:85%;
      gap:4%;
}
.row-dsc-updates h1{
      font-size:1.8em;

  }
  .row-content-updates{
     grid-template-columns: repeat(3,1fr);  
width:85%;
      gap:6%;
  }
  
   .row-dsc-updates a{
      width:90%;
      font-size:18.5px;
  }
  
}

@media screen and (max-width: 699px) {
    .updates {
    padding-block: 3rem 7rem;
}
.row-dsc-updates{
     grid-template-columns: repeat(1,1fr);     
}
.row-dsc-updates h1{
    text-align:center;
          font-size:2em;
              line-height: 1em;
              margin-bottom:2rem;
} 
 .row-content-updates{
     grid-template-columns: repeat(2,1fr);  
width:85%;
row-gap: 6%;
    column-gap: 5%;
    margin-block:0;
  }
  
  .row-content-updates > *:nth-last-child(1) {
  grid-column: 1 / -1; 
  justify-self: center; 
}

    .row-content-updates > *:nth-last-child(1) p {
        width: 170px;
    }

  .row-content-updates p{
      font-size: 15.5px;   
  }
  
   .row-dsc-updates a{
      width:80%;
      font-size:16.5px;
      margin-inline:auto;
  }
}





/*FAQ SECTION*/

.faq{
  padding-block: 5rem 4rem;
}
.faq-container {
width:90%;
max-width: 4000px;
margin-inline:auto;
  padding: 20px;
}

.faq-item {
  border-top: 1px solid #ddd;
  margin-bottom: 25px;
  padding-block:25px 0px;
}

.faq-item:nth-child(19){
  border-bottom: 1px solid #ddd;
  padding-bottom:20px;
}

.faq-header {
  display: grid;
    grid-template-columns: 0.07fr 1fr 0.07fr;
  align-items: center;
  padding-inline:4.5rem;
}

.faq-number {
  font-size: 3em;
  color: #333;
  font-family: Custom body;
  font-weight:200;
}

.faq-question {
  background-color: transparent;
  border: none;
  outline: none;
  font-size: 25px;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
    font-family: "Bricolage Grotesque", sans-serif;
  font-weight:500;
  letter-spacing: 0px;
  line-height:1;
}

.faq-question .icon {
  font-size: 1.5em;
  transition: transform 0.3s ease;
  display: inline-block;
  transform-origin: center;
}

.faq-content {
  display: grid;
  grid-template-columns:1fr;
  align-items: center;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
  padding-inline:2.5rem;
}

.faq-answer {
  font-size: 19px;
  color: #000;
  padding-block: 0px 15px;
  font-family: "DM Sans", sans-serif;
  line-height: 1.6;
  font-weight:400;
}


.faq-icon{
  display:flex;
  justify-content:flex-end;
}

.faq-icon .icon {
  position: relative;
  width: 22px;
  height: 22px;
  display: inline-block;
  transition: transform 0.3s ease;
}

.faq-icon .icon::before,
.faq-icon .icon::after {
  content: '';
  position: absolute;
  background-color: #333; /* Color del símbolo */
  transition: background-color 0.3s ease;
}

.faq-icon .icon::before {
  width: 2px; /* Grosor del símbolo "+" */
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.faq-icon .icon::after {
  width: 100%;
  height: 2px; /* Grosor del símbolo "+" */
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* Cuando se activa, el símbolo "+" se convierte en "-" */
.faq-header.active .icon::before {
  display: none; /* Ocultar la línea vertical */
}

.faq-header.active .icon::after {
  transform: rotate(180deg); /* Rotar la línea horizontal para parecerse a un "-" */
}




@media (min-width: 1300px) and (max-width: 1500px) {
  .faq-header, .faq-content {
    grid-template-columns: 0.2fr 1fr 0.2fr;
  }
}

@media (min-width: 800px) and (max-width: 1299px) {
  .faq-header, .faq-content {
    grid-template-columns: 0.15fr 1fr 0.1fr;
  }
  .faq-number {
    font-size:2.7em;
  }
  .faq-question {
    font-size:24px;
  }
  .faq-answer {
    font-size:18px;
  }
}

@media (min-width: 600px) and (max-width: 799px) {
  .faq-container {
    width:85%;
  }
  .faq-header {
        grid-template-columns: auto 1fr auto;
        padding-inline: 1rem;
        gap: 2rem;

  }
  .faq-content{
    grid-template-columns: 1fr;
    padding-inline:1.5rem;
  }
  .faq-number {
    font-size:2.7em;
  }
  .faq-question {
    font-size: 21px;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
  }
  .faq-answer {
    font-size:18px;
  }
}

@media (min-width: 300px) and (max-width: 599px) {
  .faq-container {
    width:85%;
  }

  .faq-header {
    grid-template-columns: 1fr auto;
    gap:7%;
    padding-inline:0.5rem;
  }

  .faq-content{
    grid-template-columns: 1fr;
    padding-inline:0.5rem;
  }
  .faq-number {
 display:none;
  }
  .faq-question {
    font-size: 19px;
    line-height: 1.2;
    font-weight:500;
  }
  .faq-answer {
    font-size:16.5px;
color:black;
margin-top:15px;
  }
  
}






.ap-faq .faq-item {
  border:none;  
  margin-bottom:0px;
  padding-block:8px;
}

.row_tl_faqap{
    margin-bottom:2rem;
}

.faq-ap {
  padding-block: 0em 3em;
}

.faq-container-ap {
  width: 90%;
  max-width: 900px;
  margin-inline: auto;

}


.faq-container-ap h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 500;
  font-size: calc(2.99rem + 1.5999vw) !important;
  color: black;
  text-align: center;
  line-height: 1;
  margin-bottom: 0.5em;
}



.faq-ap .faq-header-ap {
  display: grid;
  grid-template-columns: 0.98fr auto;
  align-items: center;
  padding-inline: 0.5rem;
  cursor: pointer;
  border-bottom:1.5px solid rgba(163, 162, 162, 0.247);
  padding-bottom: 15px;
  color:black;

}

.faq-ap .faq-question {
  font-size: 20px;
  text-align: left;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  color:black;
}

/* Estilo del icono */
.faq-ap .faq-icon {
  display: flex;
  justify-content: flex-end;
}

.faq-ap .faq-icon .icon {
  transition: transform 0.3s ease; /* Transición suave */
  transform: rotate(0deg); /* Comienza apuntando hacia abajo */
  width:30px;
  height:30px;
}

/* Contenido del FAQ */
.faq-ap .faq-content-ap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out; /* Transición suave */
  padding-inline: 0.8rem;
}

.faq-ap .faq-answer {
  font-size: 18px;
  color: #000;
  padding-block: 0px 15px;
  font-family: "DM Sans", sans-serif;
  line-height: 1.5;
  font-weight: 400;
      padding-block: 10px;
}

/* Rotar el icono cuando el FAQ está activo (hacia arriba) */
.faq-ap .faq-header-ap.active .icon {
  transform: rotate(180deg); /* Rota el ícono hacia arriba */
}

/* Cuando el FAQ está activo, el contenido se expande */
.faq-ap.faq-header-ap.active + .faq-content-ap {
  max-height: 1000px; /* Ajustar según el contenido */
}





.contact-af{
    background-color:#f5f5f5;
    padding-block:3em;
}

.hero{
    width:80%;
    max-width:1080px;
    margin: 0 auto;
              font-family: 'Poppins', sans-serif;
}

  .form-container {
    background: #f5f5f5;
    padding-block: 2rem;
    padding-inline:2rem 4rem;
    border-radius: 8px;
    width: 400px;
  }
  
  .form-group {
    margin-bottom: 1rem;
  }
  
  label {
    display: block;
    margin-bottom: .5rem;
    color: #000;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    font-size:16.5px;
    font-weight:400;
  }
  
  input, textarea {
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    border: 1px solid #333A44;
    background-color: #fff;
    color: black;
    font-size: 1rem;
      font-family: 'Poppins', sans-serif;
    font-size:16.5px;

  }
  
  
  input::placeholder, textarea::placeholder {
    color: #8A8A8E;
  }
  
  
  
  input:focus, textarea:focus {
    outline: none;
    border-color: #5757f3;
  }
  
  
  
  .form-button {
    display: block;
    width: 30%;
    padding: 1rem;
    border: none;
    border-radius: 8px;
    background-color: #5757f3;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
      font-family: 'Poppins', sans-serif;
    font-size:16.5px;
  }
  .form-button:hover {
    background-color: #43458B;
  }
.cont-flname{
display:flex;
gap:40px;
  }
  
  .fcolumn-fsname{
      width:50%;
  }
.scolumn-lsname{
    width:50%;
}

.custom-terms-label label {
    margin-left:20px;
}

  .custom-terms-label label:hover {
    text-decoration: underline; /* Subraya el texto al pasar el ratón por encima */
    cursor:pointer;
    background-color: #f7f7f7;
  }
.custom-terms-label{margin-bottom:20px;}


.custom-terms-checkbox{
    width:auto;
    position:absolute;
    margin-top:8px;
}