@font-face {
  font-family: 'Galano Grotesk Bold';
  src: url('/assets/fonts/GalanoGrotesqueAltBold.otf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Galano Grotesk Light';
  src: url('/assets/fonts/GalanoGrotesqueAltLight.otf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Galano Grotesk Regular';
  src: url('/assets/fonts/GalanoGrotesqueAltRegular.otf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Galano Grotesk Medium';
  src: url('/assets/fonts/GalanoGrotesqueAltMedium.otf') format('truetype');
  font-weight: 400;
}


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

:root {

  /**
   * colors
   */

  --white: hsla(0, 0%, 100%, 1);
  --white_a8: hsla(0, 0%, 100%, 0.08);
  --white_a12: hsla(0, 0%, 100%, 0.12);
  --cultured: hsla(220, 20%, 97%, 1);
  --snow: hsla(345, 57%, 97%, 1);
  --manatee: hsla(219, 10%, 62%, 1);
  --black-coral: hsla(220, 12%, 43%, 1);
  --cadet-blue-crayola_a20: hsla(222, 23%, 71%, 0.2);
  --cinnamon-satin: hsla(344, 53%, 62%, 1);
  --raisin-black: hsla(216, 14%, 14%, 1);
  --raisin-black_a6: hsla(216, 14%, 14%, 0.06);
  --gunmetal: hsla(214, 15%, 21%, 1);
  --charcoal: hsla(219, 22%, 26%, 1);

  /**
   * typography
   */


  --fs-1: calc(2.7rem + 1.38vw);
  --fs-2: calc(2.6rem + .66vw);
  --fs-3: calc(2.6rem + .24vw);
  --fs-4: 1.9rem;
  --fs-5: 1.8rem;
  --fs-6: 1.7rem;
  --fs-7: 1.5rem;
  --fs-8: 1.4rem;

  --fw-700: 700;

  /**
   * spacing
   */

  --section-padding: 90px;

  /**
   * box shadow
   */

  --shadow-1: 0 0 20px hsla(216, 14%, 14%, 0.05);
  --shadow-2: 0 4px 28px hsla(216, 14%, 14%, 0.07);

  /**
   * border radius
   */

  --radius-circle: 50%;
  --radius-pill: 100px;
  --radius-8: 8px;
  --radius-6: 6px;

  /**
   * transition
   */

  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease;
  --transition-3: 0.3s ease-in-out;

}




/*-----------------------------------*\
  #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 {
  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;
}

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%);
}




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

.header {
  position: absolute;
  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;
}

@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: 'Galano Grotesk Bold';
  font-weight: 400;
  font-size: 27px;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  color: #1f2044;
  border-top: 1px solid #e9ecf5;
    padding-block: 12px;
}

.navbar .logo{
  font-family: 'Galano Grotesk Bold';
  font-weight: 400;
  font-size: 27px; 
  color: #4480c5;
}

.navbar .title-ct{
  font-family: 'Galano Grotesk Bold';
  font-weight: 400;
  font-size: 27px; 
  color: #1f2044;
}

.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: 'Galano Grotesk Regular';
  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: 'Galano Grotesk Regular';
  text-align:center;
  padding-block:7px;
  border-radius: 10px;
  margin-top:-10px;
}


.d-header {
  display: none;
}



@media (min-width: 1000px) {
.d-header {
    display: block;
  }
  .d-header {
    background-color: #F5F6F8;
    display: block;
  }

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

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

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

.nav-link {
    text-decoration: none;
    list-style: none;
    color: #1F2044;
    font-weight: 400;
    font-size: 17px;
    font-family: 'Galano Grotesk Bold';
    display:flex;
    align-items:center;
    gap:5px;
}

.container-header {
    display: flex;
    justify-content: space-between;
    width: 98%;
    max-width: 1080px;
    margin: 0 auto;
    align-items: end;
    padding-block: 0.5em 2em;
  }


  .group-menu {
    display: flex;
    width: 70%;
    align-items: end;
  }

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

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

  .btns-header {
    display: flex;
    width: 30%;
    gap: 35px;
    justify-content: flex-end;
    margin-top: 25px;
  }


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

  }


  .cont-logo a {
    font-size: 27px;
    line-height: 0.9;
    font-weight: 400;
    font-family: 'Galano Grotesk Bold';
    letter-spacing: 0px;
    color: black;
    text-align: center;

  }

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

  }

  .btn41-43 {
    padding: 10px 15px;
    font-weight: 800;
    font-weight: 500;
    background: transparent;
    outline: none !important;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    font-size: 15.5px;
  }

  .btn-42 {
    border: 2px solid #1F2044;
    z-index: 1;
    color: #1F2044;
    font-weight: 400;
  }

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

  }

  .btn-42:hover {
    color: white;
  }

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

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

  .btn41-43 {
    padding: 10px 25px;
    font-family: 'Galano Grotesk Bold';
    font-weight: 400;
    background: transparent;
    outline: none !important;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    font-size: 15.5px;
  }


  .btn-41 {
    border: 2px solid rgb(255, 255, 255);
    z-index: 1;
    color: white;
    background-color: #1F2044;
    border: 2px solid #1F2044;
  }

  .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;
  }

  .btn-41:hover {
    color: #000;
    border: 2px solid black;
  }

  .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: 'Galano Grotesk Bold';
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;
}
}








/*-----------------------------------*\
  #MAIN PAGE
\*-----------------------------------*/


/* START MAIN PAGE (DESKTOP) */
.main {
  padding-block: 3em 0em;
  background-color: #F5F6F8;
  background-image: url(/assets/images/background-main.svg);
  background-position: top;
  background-repeat: no-repeat;
  position:relative;
  overflow: visible;
}

.cont-main {
  width: 80%;
  max-width: 1080px;
  margin: 0 auto;
}

.cont-main h1 {
  font-size: 62px;
  font-weight: 400;
  font-family: 'Galano Grotesk Bold';
  color: #1f2044;
  line-height: 1em;
  margin-bottom: 20px;
}

.cont-main h2 {
  font-size: 30px;
  font-weight: 400;
  font-family: 'Galano Grotesk Light';
  color: #1f2044;
  line-height: 1em;
  margin-bottom: 40px;
}

.cont-main h3 {
  font-size: 18px;
  font-weight: 400;
  font-family: 'Galano Grotesk Light';
  color: #000;
  line-height: 1.2em;
  margin-bottom: 50px;

}

.cont-main .lema {
  font-size: 27px;
  font-weight: 400;
  font-family: 'Galano Grotesk Medium';
  color: #1f2044;
  line-height: 1.2em;
  margin-bottom: 10px;
  text-decoration: underline;
}

.col-main {
  display: flex;
  flex-direction: column;
  margin-top: 2em;
}

.cont-main img {
  width: 100%;
  height: auto;
}

.cont-price {
  display: flex;
  gap: 40px;
  align-items: center;

}

.cont-price a {
  background-color: #ffcf00;
  color: #1f2044;
  font-size: 24px;
  padding-inline: 40px;
  padding-block: 15px;
  box-shadow: #1f2044 5.5px 5.5px;
  font-family: 'Galano Grotesk Bold';
  font-weight: 400;
  width:220px;
  text-align:center;
}

.cont-price a:hover {
  background-color: #1f2044;
  box-shadow: none;
  color: white;
  transition: ease-in-out 0.3s;
}



.cont-price h4 {
  font-size: 18px;
  color: black;
  font-weight: 400;
  font-family: 'Galano Grotesk Bold';
  margin-top: 12px;
  text-align: center;
}

.cont-price h5 {
  font-size: 25px!important;
  color: #2e93ee;
  font-weight: 400;
  font-family: 'Galano Grotesk Medium';
  font-size: 30px;
  text-align: center;
}

.cont-main h6 {
  font-size: 2.5em;
  margin-block: 0em 2em;
  text-align: center;
  font-family: 'Galano Grotesk Bold';
  color: #1f2044;
  font-weight:400!important;
}


@media (min-width: 1100px) and (max-width: 1300px) {
  .main {
    padding-block: 5em;
    background-color: #F5F6F8;
    background-image: url(/assets/images/background-main.svg);
    background-position: center;
    background-size: 1600px;
    background-repeat: no-repeat;
  }
}

@media (min-width: 820px) and (max-width: 1099px) {
  .main {
    padding-block: 5em;
    background-color: #F5F6F8;
    background-image: url(/assets/images/background-main.svg);
    background-position: center;
    background-size: 1500px;
    background-repeat: no-repeat;
  }
  .cont-main .lema {
    margin-bottom: 0px;
  }
}

/* FINISH MAIN PAGE (DESKTOP) */



/* START MAIN PAGE (tablet) */
@media (min-width: 700px) and (max-width: 819px) {
  .main {
    padding-block: 5em;
    background-color: #F5F6F8;
    background-image: url(/assets/images/background-main.svg);
    background-position: center;
    background-size: 1200px;
    background-repeat: no-repeat;
  }

  .cont-main h1 {
    font-size: 50px;
  }

  .cont-main h2 {
    font-size: 22px;
  }

  .cont-main h3 {
    font-size: 15px;
    line-height: 1.4;
  }

  .cont-main h6 {
    font-size: 30px;
    line-height: 1.5;
    margin-block: 2em 0em;
    font-weight:400!important;
  }
  .cont-main .lema {
    margin-bottom: 0px;
  }
}


@media (min-width: 500px) and (max-width: 699px) {
  .main {
    padding-block: 6em 4em;
    background-color: #F5F6F8;
    background-image: none;
    background-position: center;
    background-size: 1200px;
    background-repeat: no-repeat;
    text-align: center;
  }

  .cont-main h1 {
    font-size: 50px;
  }

  .cont-main h2 {
    font-size: 22px;
  }

  .cont-main h3 {
    font-size: 17px;
    line-height: 1.4;
  }


 .main .cont-price {
 display: flex;
    justify-content: center;
    height: 150px;
    align-items: center;
  }
  
  .main .pricing{
      padding-block:0em!important;
  }

  .cont-price a {
    font-size: 21px;
    padding-inline: 30px;
    padding-block: 12px;
    width: 100%;
  }

  .cont-price h4 {
    margin: 0
  }

  .cont-price h5 {
    line-height: 1em;
  }

  .cont-main h6 {
    font-size: 27px;
    line-height: 1.4;
    margin-block: 0.5em 0em;
        font-weight:400!important;
  }
  .cont-main .lema {
    margin-bottom: 0px;
  }
}

/* FINISH MAIN PAGE (tablet) */

/* START MAIN PAGE (MOVILE) */
@media (min-width: 300px) and (max-width: 499px) {
  .main {
    padding-block: 6.5em 2em;
    background-color: #F5F6F8;
    text-align: center;
    background-image: none;
  }
  .cont-main {
    width:85%;
  }

  .cont-main h1 {
    font-size: 40px;
    margin-bottom: 0.7em;
  }

  .cont-main h2 {
    font-size: 19px;
    margin-top: 0.2em;
    margin-block: 0.5em 1em;
  }

  .cont-main h3 {
    font-size: 15px;
    line-height: 1.4;
    margin-block: 0.2em 1em;
  }

  .cont-main .lema {
    margin-bottom: 0px;
  }

  .cont-main h6 {
    margin-block: -1em 1em!important;
    font-weight:400!important;
  }

  .cont-price {
    justify-content: center;
    gap: 20px;
        height: 120px;
    margin-bottom: 2em;
  }

  .cont-price a {
    font-size: 18px;
    padding-inline: 20px;
    padding-block: 8px;
    width: 100%;
  }

  .cont-price h4 {
    font-size: 16px;
    margin-block:20px 0px;
  }

  .cont-price h5 {
    line-height: 1em;
    font-size: 21px;
  }

  .cont-main h6 {
    font-size: 27px;
    line-height: 1.5;
    margin-block: 2em 0em;
  }
}

/* Finish MAIN PAGE (MOVILE) */





/*-----------------------------------*\
  #ABOUT
\*-----------------------------------*/

/*  START ABOUT PAGE(DESKTOP) */
.about {
  background-color: white;
  padding-block: 3em 1.5em;
  margin-top: -4em;
}

.cont-about {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 90%;
  max-width: 1300px;
  margin: 0 auto;
  gap: 6%;
}

.cont-about h2 {
  font-family: 'Galano Grotesk Bold';
  font-weight: 400;
  line-height: 1.1;
  font-size: 3.5em;
  margin-bottom: 0.3em;
  color: #1f2044;
}

.cont-about h3 {
  font-family: 'Galano Grotesk Regular';
  font-weight: 400;
  line-height: 1.6;
  font-size: 16px;
  margin-block: 7px;
  color: black;
}

.content-items a {
  font-size: 27px;
  font-family: 'Galano Grotesk Medium';
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1f2044;

}

.content-items img {
  width: 45px;

}

.cont-about h4 {
  font-family: 'Galano Grotesk Regular';
  font-weight: 400;
  line-height: 1.6;
  font-size: 16px;
  margin-block: 10px 30px;
  font-weight: 400;
  color: black;

}

@media (min-width: 900px) and (max-width: 1120px) {
  .cont-about {
    gap: 4%;
    width: 95%;
  }

  .cont-about h2 {
    font-size: 2.8em;
  }
}

/*  START ABOUT PAGE(TABLET AND MOVILE) */
@media (min-width: 400px) and (max-width: 899px) {
  .cont-about {
    gap: 0%;
    width: 80%;
    grid-template-columns: repeat(1, 1fr);
    text-align: center;
  }

  .cont-about h2 {
    font-size: 2.8em;
    margin-top:1em;
  }

  .content-items a {
    justify-content: center;
  }

  .content-items .f-c {
    margin-top: 1em;
  }

}

@media (min-width: 0px) and (max-width: 399px) {
  .cont-about {
    gap: 2%;
    width: 85%;
    grid-template-columns: repeat(1, 1fr);
    text-align: center;
  }

  .cont-about h2 {
    font-size: 2.6em;
        margin-top:1em;
  }

  .content-items a {
    justify-content: center;
    font-size: 24px;
  }

  .cont-about h4 {
    font-size: 15.5px;
  }

}





/*-----------------------------------*\
  #CHOOSING SECTION
\*-----------------------------------*/

/*  START ABOUT PAGE(DESKTOP) */

.chs {
  padding-block: 3.5em;
}

.cont-chs-title {
  margin: 0 auto;
  width: 80%;
  max-width: 1080px;
}


.cont-c-fg {
  display: flex;
  width: 80%;
  max-width: 1080px;
  margin: 0 auto;
}

.cont-chs-title h2 {
  font-size: 62px;
  font-weight: 400;
  font-family: 'Galano Grotesk Medium';
  color: #1f2044;
  line-height: 1em;
  margin-bottom: 20px;
  text-align: center;
}

.cont-chs-title u {
  border-radius: 0px;
  background-color: #ffcf00;
  color: #1f2044;
  padding: 0px 5px;
  font-family: 'Galano Grotesk Bold';
  margin: 0;
}

.cont-c-fg {
  margin-block: 3em 1em;
  gap: 3%;
  width: 80%;
  max-width: 1080px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 0.9fr;
}



.col-chs-content h3 {
  font-size: 50px;
  font-family: 'Galano Grotesk Bold';
  font-weight: 400;
  color: #1f2044;
  line-height: 1.2em;

  margin-bottom: 0.5em;
}

.col-chs-content h4 {
  font-family: 'Galano Grotesk Regular';
  font-size: 18px;
  line-height: 1.6em;
  margin-bottom: 10px;
  text-align: justify;
  width: 90%;
  font-weight: 400;
  color: black;

}

.col-fgr img {
  width: 100%;
}


.cont-ql {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 80%;
  max-width: 1080px;
  margin: 0 auto;
  gap: 3%;
  margin-block: 2em;
}

.ql-content h5 {
  font-size: 27px;
  font-family: 'Galano Grotesk Medium';
  font-weight: 400;
  font-weight: 400;
}

.ql-content h6 {
  font-family: 'Galano Grotesk Regular';
  font-weight: 400;
  line-height: 1.6;
  font-size: 16px;
  margin-block: 10px 20px;
  font-weight: 400;

}


@media (min-width: 950px) and (max-width: 1200px) {
  .cont-chs-title h2 {
    font-size: 50px;
  }

  .col-chs-content h3 {
    font-size: calc(20.5px + 2vw) !important;
  }
}

/*  START ABOUT PAGE(TABLET) */
@media (min-width: 750px) and (max-width: 949px) {
  .cont-c-fg {
    width: 90%;
  }

  .col-chs-content h3 {
    font-size: calc(15.5px + 2.3vw) !important;
  }

  .cont-chs-title h2 {
    font-size: 45px;
  }

  .col-chs-content h4 {
    font-size: 17px;
    line-height: 1.4;
  }
}

@media (min-width: 700px) and (max-width: 749px) {
  .cont-c-fg {
    gap: 1.5%;
  }

  .col-chs-content h3 {
    font-size: calc(10.5px + 2.3vw) !important;
  }

  .cont-chs-title h2 {
    font-size: 45px;
  }

  .col-chs-content h4 {
    font-size: 17px;
    line-height: 1.4;
  }
}
/*  START ABOUT PAGE(movile) */
@media (min-width: 500px) and (max-width: 699px) {
  .chs {
    padding-block: 2em 4em;
  }

  .cont-c-fg {
    gap: 3%;
    grid-template-columns: repeat(1, 1fr);
  }

  .cont-chs-title h2 {
    font-size: 2.8em;
  }

  .col-chs-content h3 {
    font-size: 1.7em;
    text-align: center;
  }


  .col-chs-content h4 {
    font-size: 17px;
    line-height: 1.4;
    width: auto;
  }

  .col-fgr img {
    width: 60%;
    margin: 0 auto;
  }
}

@media (min-width: 0px) and (max-width: 499px) {
  .chs {
    padding-block: 4em 3em;
  }
  .cont-c-fg {
    gap: 3%;
    grid-template-columns: repeat(1, 1fr);
    width: 80%;
  }
  .cont-chs-title h2 {
    font-size: 2em;
    line-height: 1.3;
  }

  .col-chs-content h3 {
    font-size: 1.3em;
    text-align: center;
    margin-top:-1.3em;
  }
  .col-chs-content h4 {
    font-size: 16.5px;
    line-height: 1.4;
    width: auto;
  }
    
    .col-fgr img {
      width: 70%;
      margin: 0 auto;
 
  }
}



/*-----------------------------------*\
  #DIVI SECTION
\*-----------------------------------*/

.dv {
  padding-block: 1em 5em;
}

.cont--tldv {
  width: 80%;
  max-width: 1080px;
  margin: 0 auto;

}

.cont--tldv h2 {
  font-size: calc(25.5px + 2vw) !important;
  font-weight: 400;
  font-family: 'Galano Grotesk Bold';
  color: #1f2044;
  line-height: 1em;
  text-align: center;
  margin-bottom: 30px;

}

.cont--tldv h3 {
  font-size: 19px;
  font-weight: 400;
  font-family: 'Galano Grotesk Regular';
  color: #000;
  line-height: 1.6em;
  margin-block: 0.5em 50px;
  margin-inline: auto;
  text-align: center;
}


.cont--tldv a {
  background-color: #1f2044;
  color: white;
  font-size: 24px;
  padding-inline: 40px;
  padding-block: 15px;
  box-shadow: #ffcf00 9.5px 9.5px;
  font-family: 'Galano Grotesk Medium';

  margin: 0 auto;
  display: block;
  width: 320px;
  text-align: center;
}

.cont--tldv a:hover {
  background-color: #ffcf00;
  box-shadow: none;
  color: white;
  transition: ease-in-out 0.3s;
  color: black;
}


.cont-cbdv {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 80%;
  max-width: 1080px;
  margin-inline: auto;
  margin-block: 5em 0em;
  gap: 50px;
}


.cont-cbdv h4 {
  font-size: 23.5px;
  font-family: 'Galano Grotesk Medium';
  font-weight: 400;
  text-align: center;
  color: #1f2044;

}

.cont-cbdv img {
  width: 65px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-block: 0em 1em;

}


.cont-cbdv h5 {
  font-family: 'Galano Grotesk Regular';
  font-weight: 400;
  line-height: 1.6;
  font-size: 16px;
  margin-block: 10px 15px;
  font-weight: 400;
  text-align: center;
  color: black;
}

@media (min-width: 800px) and (max-width: 950px) {
  .cont-cbdv {
    width: 90%;
    gap: 20px;
  }
  .cont--tldv h2 {
    line-height: 1.2;
}
}
@media (min-width: 550px) and (max-width: 799px) {
  .cont-cbdv {
    width: 90%;
    gap: 20px;
    grid-template-columns: repeat(2,1fr);
  }
  .cont--tldv h2 {
    line-height: 1.2;
}
}

  @media (min-width: 0px) and (max-width: 549px) {
    .cont-cbdv {
      width: 80%;
      gap: 20px;
      grid-template-columns: repeat(1,1fr);
    }
    .cont--tldv h2 {
      line-height: 1.2;
   font-size: calc(28.5px + 2.5vw) !important;
      margin-bottom:10px;
  }
  .cont--tldv h3 {
      text-align:justify;
      font-size:17.5px;
      
  }
}
/*-----------------------------------*\
  #F.A.Q SECTION
\*-----------------------------------*/
.faq-section{
  padding-block: 0em 4em;
}
.pg{
  padding-block: 3em 4em;
}

.cont-tl-faq{
  width:80%;
  max-width:1080px;
  margin:0 auto;
}

.cont-tl-faq h2{
  font-size: calc(30.5px + 2.5vw) !important;
  font-weight: 400;
  font-family: 'Galano Grotesk Bold';
  color: #1f2044;
  line-height: 1em;
  text-align: center;
  
}

.cont-tl-faq .txt-ul{
  text-decoration: underline;
  
}

.cont-content-faq{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  width:80%;
  max-width: 1080px;
  margin-inline: auto;
  margin-block:3.5em 0em;
  gap:60px;
}

.col-content h3{
  font-family: 'Galano Grotesk Bold';  
  color: #1f2044;
  font-size:21px;
  font-weight:400;
  margin-block:0em;
}

.col-content h4{
  font-family: 'Galano Grotesk Regular';  
  color: #000;
  font-size:16.5px;
  font-weight:400;
  margin-block:0em 1.5em;
  line-height: 1.4;
 
}


@media (min-width: 750px) and (max-width: 1100px) {
  .cont-content-faq{
width:90%;
gap:40px;
  }
  .pg{
  padding-block: 8em 4em;
}
}

@media (min-width: 481px) and (max-width: 749px) {
  .cont-content-faq{
    width:80%;
    gap:0px;
    grid-template-columns: repeat(1,1fr);
    margin-block:2.5em 0em;
      }
        .pg{
  padding-block: 8em 4em;
}

      .cont-tl-faq h2{
        line-height: 1.2;
      }

      .col-content h3{
        line-height: 1.2;
      }
      .col-content h4{
        text-align: justify;
      }

    }

    @media (min-width: 0px) and (max-width: 480px) {
      .cont-content-faq{
        width:85%;
        gap:0px;
        grid-template-columns: repeat(1,1fr);
        margin-block:2.5em 0em;
          }
            .pg{
  padding-block: 8em 0em;
}
    
          .cont-tl-faq h2{
            line-height: 1.2;
            font-size:2.3em!important;
         
          }
    
          .col-content h3{
            line-height: 1.2;
            text-align: center;
          }
          .col-content h4{
            text-align: justify;
          }
    
        }


/*-----------------------------------*\
  #PRICING PAGE
\*-----------------------------------*/

.pricing {
  padding-block: 3em 4em;

}

 .tl-pd{
  font-size: 16.5px;
  font-weight: 400;
  font-family: 'Galano Grotesk Bold';
  margin-block: 1.5em 0.5em;
  color:#1f2044;
  margin-left:20px;

}

.pricing .title-pricing{
  font-size: 2.8em;
  font-weight: 400;
  font-family: 'Galano Grotesk Bold';
  color: #1f2044;
  line-height: 1em;
  margin-bottom: 1.2em;
  text-align:center;
}


.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 {
  padding: 50px 15px;
  border:1.5px solid #4480c5;
  transform: scale(1.05); /* Puedes ajustar este valor según tus preferencias */
  transition: transform 0.3s ease; 

}

.f-column-items:hover{
transform:scale(1.1)
}


.t-column-items {
  padding: 50px 15px;
  border:0.5px solid #4480c5;
  transform: scale(1.05); /* Puedes ajustar este valor según tus preferencias */
  transition: transform 0.3s ease; 

}

.t-column-items:hover{
transform:scale(1.1)
}




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


}


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

.grid-item .plan {
  font-size: 27px;
  font-family: 'Galano Grotesk Bold';
  color: #1f2044;
  letter-spacing: 0px;
}


.f-column-items-s {
    background-color: #1f2044;
  padding: 15px 0px;
  width:280px;
  margin:0 auto;
  border-radius: 200px;
  margin-bottom:-5px;
  z-index: 1;
  border:2.5px solid #1f2044;


}

.f-column-items-s h2 {
  padding: 0;
  margin: 0;
  line-height: 1em;
  color:rgb(195, 228, 241);
  text-align: center;
  font-weight: 400;
  
  font-size: 21px;
  font-family:"Galano Grotesk Bold"
}


.s-column-items {
  border:0.5px solid #4480c5;
  padding: 50px 15px;
  transform: scale(1.05); /* Puedes ajustar este valor según tus preferencias */
  transition: transform 0.3s ease; 

}

.s-column-items:hover{
transform:scale(1.1)
}


.cont-prc-an-mn {
  display:flex;
  margin-inline:auto;
  justify-content:center;
  align-items:center;
  margin-inline:auto;
  margin-block:0.5em 1.5em;
}



.grid-item.price {
  font-size: 27px;
  font-family: "Galano Grotesk Medium";
  font-weight: 400;
  letter-spacing: 0px;
  font-weight:400;
  color: #2e93ee;
  margin-bottom: 0em;
display:flex;
align-items:center;
}



.grid-item.price .mtl{
  font-size:15px;
  font-family: "Galano Grotesk Regular";
  margin-top:5px;
  color: #86bdec;
}

.grid-item.price .o-r{
  font-size:18px;
  font-family: "Galano Grotesk Medium";
  margin-top:5px;
  color: #706b6b;
  margin-inline:10px;
}


.number-ofert{
  color:#4480c5;
  font-family: "Galano Grotesk Regular";
  font-weight:400;
  text-align: center;
  margin-block:1.5em 0.6em;
  border:1px solid #4480c5;
  width:50%;
  margin-inline:auto;
  border-radius:300px;
  background-color: #e5eef8;;

}

.product {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding-top: 10px;
  padding-inline:5%;
}


.tooltip-container {

  position: relative;
  z-index: 10;
  text-align: center;
  font-family:"Galeno Grotesk Medium";
  font-size: 14px;
  margin-top: -5px;
  line-height: 1.3em;
}

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

  padding: 10px !important;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #1f2044;
  z-index: 11;
  /* Añade esta línea para asegurarte de que el contenido del tooltip esté por encima de su contenedor */
  font-size: 13.5px;
  margin-right: 5px;
  background-color: #1f2044;
  color: white;
  font-family: Galano Grotesk Medium;


}

.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;

}

.crossout{
  text-decoration: line-through;    
}



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

.info-icon img{width:15px;}

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

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

  padding: 20px 15px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  z-index: 1;
  font-size: 13px!important;
  margin-right: 5px;
  font-family: Galano Grotesk Medium;
}


.btn-price {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-block: 0.5em 2em;

}


.btn-pricing {
  border: 2.5px solid #1f2044;
  background-color: #ffcf00;
  color: #1f2044;
  padding: 7px 10px;
  text-align: center;
  font-size: 18px;
  cursor: pointer;
  transition: 0.3s;
  width: 70%;
  font-family:Galano Grotesk Bold;
  font-weight:400;



}

.btn-pricing:hover {
  border: 2px solid #1f2044;
  color: white;
  background-color: #1f2044;
  transition:0.3s ease-in all;
}


.icon-text {
  color: rgb(68, 67, 67);
font-size: 14.5px !important;
    font-family:Galano Grotesk Regular;
  font-weight: 400 !important;
  letter-spacing: 0px!important;
  line-height: 1.3em;
  margin-bottom: 10px;
  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: 600px) and (max-width: 1099px) {
  .grid-fcontainer {
    display: none;
  }
  .grid-scontainer {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    width: 65% !important;
    margin: 0 auto;
  }
  .best {

    line-height: 1em;
    color: rgb(195, 228, 241);
    text-align: center;
    font-weight: 400;
    font-size: 21px;
    font-family: "Galano Grotesk Bold";
    display: flex;
    flex-direction: column;
    background-color: #1f2044;
    padding: 15px 0px;
    width: 280px;
    margin-inline:auto;  
    margin-top:-68px;
  }
  .f-column-items {
    margin-block: 5em 4em;
  }

  .pricing .title-pricing {
    font-size:2.2em;
    line-height: 1em;
    margin-block: 2.5em 1.5em;
  }

}

@media (min-width: 380px) and (max-width:599px) {

  .grid-fcontainer {
    display: none;
  }


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

  .f-column-items {
    margin-block: 5em 4em;
  }

  .best {

    line-height: 1em;
    color: rgb(195, 228, 241);
    text-align: center;
    font-weight: 400;
    font-size: 21px;
    font-family: "Galano Grotesk Bold";
    display: flex;
    flex-direction: column;
    background-color: #1f2044;
    padding: 15px 0px;
    width: 280px;
    margin-inline:auto;  
    margin-top:-68px;
  }

  .pricing .title-pricing {
    font-size:2.4em;
    line-height: 1em;
    margin-block: 2em;
  }
}


@media (min-width: 200px) and (max-width:599px) {

  .grid-fcontainer {
    display: none;
  }

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

  .f-column-items {
    margin-block: 6em 4em;
    padding-inline: 5px;
    padding-block:20px 40px;
  }

  .s-column-items {

    padding-inline: 5px;
    padding-block:20px 40px;
  }

  .t-column-items {
    padding-inline: 5px;
    padding-block:20px 40px;
  }

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

  .best {

    line-height: 1em;
    color: rgb(195, 228, 241);
    text-align: center;
    font-weight: 400;
    font-size: 21px;
    font-family: "Galano Grotesk Bold";
    display: flex;
    flex-direction: column;
    background-color: #1f2044;
    padding: 15px 0px;
    width: 280px;
    margin-inline:auto;  
    margin-top:-45px;
  }
  .icon-text{
      font-size:14px!important;
  }
  .product{
    gap:10px;
  }

  .pricing .title-pricing {
    font-size:2em;
    line-height: 1em;
    margin-block: 2.2em 1.2em;
  }
}


/*-----------------------------------*\
  #BASIC SECTION-- PRICING
\*-----------------------------------*/

.basic{
  padding-block:3em 2em;
}

.container-tl-basic{
  margin-inline:auto;
  margin-block:1em 2em;
  width:80%;
  max-width:1080px;
}

.container-tl-basic h2{
  font-size: 4em;
  font-weight: 400;
  color: #1f2044;
  font-family: 'Galano Grotesk Bold';
  letter-spacing: 0px;
  line-height: 1.1;
  text-align:center;
}

.container-cards-basic{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  width:80%;
  max-width:1080px;
  margin:0 auto;
  gap:5%;
  margin-block:1em 2em;
}
.card-basic img{
  width:120px;
  margin-inline: auto;
  margin-block:15px 10px;
}
.card-basic h3{
  font-size: 21px;
  font-weight: 400;
  color: #1f2044;
  font-family: 'Galano Grotesk Bold';
  letter-spacing: 0px;
  line-height: 1.5;
  text-align:center; 
}

.card-basic h4{
  font-size: 16px;
  font-weight: 400;
  color: #000;
  font-family: 'Galano Grotesk Regular';
  letter-spacing: 0px;
  line-height: 1.5;
  text-align:center; 
}

.card-basic u{
  color:#2e93ee;
}



/*-----------------------------------*\
  #BASIC SECTION-- TABLET VERSION
\*-----------------------------------*/
@media (min-width: 700px) and (max-width:1000px) {
  .container-cards-basic{
    display:grid;
    grid-template-columns: repeat(3,1fr);
  width:90%;
  }
  .container-tl-basic h2 {
    font-size:2.2em;
  } 
  .card-basic h3 {
    font-size:18px;
  }
  .basic{
    padding-block:3.5em;
  }

  }
  

/*-----------------------------------*\
  #BASIC SECTION-- MOVILE VERSION
\*-----------------------------------*/
  @media (min-width: 500px) and (max-width:699px) {
    .basic .container-cards-basic{
      display:grid;
      grid-template-columns: repeat(2,1fr)!important;
    width:90%;
    gap:1%;
    }
    .container-tl-basic h2 {
      font-size:2em;
    } 
    .card-basic h3 {
      font-size:19px;
    }
    .basic{
      padding-block:1em;
    }
    }

    @media (min-width: 300px) and (max-width:499px) {
      .basic{
        padding-block:1em;
      }
      .basic .container-cards-basic{
        display:grid;
        grid-template-columns: repeat(1,1fr)!important;
      width:80%;
      gap:0.7%;
      }
      .container-tl-basic h2 {
        font-size:2em;
      } 
      .card-basic h3 {
        font-size:24px;
      }
   
      }
  


.pro{
  padding-block:3em 6em;
}

.container-tl-pro{
  margin-inline:auto;
  margin-block:1em 2em;
  width:80%;
  max-width:1080px;
}

.container-tl-pro h2{
  font-size: 4em;
  font-weight: 400;
  color: #1f2044;
  font-family: 'Galano Grotesk Bold';
  letter-spacing: 0px;
  line-height: 1.1;
  text-align:center;
}

.container-cards-pro{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  width:80%;
  max-width:1080px;
  margin:0 auto;
  gap:5%;
  margin-block:1em 2em;
}
.card-pro img{
  width:120px;
  margin-inline: auto;
  margin-block:10px 15px;
}

.card-pro h3{
  font-size: 21px;
  font-weight: 400;
  color: #1f2044;
  font-family: 'Galano Grotesk Bold';
  letter-spacing: 0px;
  line-height: 1.5;
  text-align:center; 
}

.card-pro h4{
  font-size: 16px;
  font-weight: 400;
  color: #000;
  font-family: 'Galano Grotesk Regular';
  letter-spacing: 0px;
  line-height: 1.5;
  text-align:center; 
}

.card-pro u{
  color:#2e93ee;
}

/*-----------------------------------*\
  #PRO SECTION-- MOVILE VERSION
\*-----------------------------------*/
@media (min-width: 500px) and (max-width:699px) {
   .container-cards-pro{
    display:grid;
    grid-template-columns: repeat(2,1fr)!important;
  width:90%;
  gap:2%;
  }
  .container-tl-pro h2 {
    font-size:2em;
  } 
  .card-pro h3 {
    font-size:19px;
  }
  .pro{
    padding-block:1em;
  }
  }

  @media (min-width: 300px) and (max-width:499px) {
    .container-cards-pro{
      display:grid;
      grid-template-columns: repeat(1,1fr)!important;
    width:80%;
    gap:0.7%;
    }
    .container-tl-pro h2 {
      font-size:2em;
    } 
    .card-pro h3 {
      font-size:24px;
    }
    .pro{
      padding-block: 3em 1em;
    }
    
    }


.plus{
  padding-block:3em 11em;
}

.container-tl-plus{
  margin-inline:auto;
  margin-block:1em 2em;
  width:80%;
  max-width:1080px;
}

.container-tl-plus h2{
  font-size: 4em;
  font-weight: 400;
  color: #1f2044;
  font-family: 'Galano Grotesk Bold';
  letter-spacing: 0px;
  line-height: 1.1;
  text-align:center;
}

.container-cards-plus{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  width:80%;
  max-width:1080px;
  margin:0 auto;
  gap:5%;
  margin-block:1em 2em;
}
.card-plus img{
  width:120px;
  margin-inline: auto;
  margin-block:10px 15px;
}

.card-plus h3{
  font-size: 21px;
  font-weight: 400;
  color: #1f2044;
  font-family: 'Galano Grotesk Bold';
  letter-spacing: 0px;
  line-height: 1.5;
  text-align:center; 
}

.card-plus h4{
  font-size: 16px;
  font-weight: 400;
  color: #000;
  font-family: 'Galano Grotesk Regular';
  letter-spacing: 0px;
  line-height: 1.5;
  text-align:center; 
}

.card-plus u{
  color:#2e93ee;
}
/*-----------------------------------*\
  #PLUS SECTION-- MOVILE VERSION
\*-----------------------------------*/
@media (min-width: 500px) and (max-width:699px) {
  .container-cards-plus{
   display:grid;
   grid-template-columns: repeat(2,1fr)!important;
 width:90%;
 gap:1%;
 }
 .container-tl-plus h2 {
   font-size:2em;
 } 
 .card-plus h3 {
   font-size:19px;
 }
 .plus{
  padding-block:6em;
}
 }

 @media (min-width: 300px) and (max-width:499px) {
   .container-cards-plus{
     display:grid;
     grid-template-columns: repeat(1,1fr)!important;
   width:80%;
   gap:0.7%;
   }
   .container-tl-plus h2 {
     font-size:2em;
   } 
   .card-plus h3 {
     font-size:24px;
   }
   .plus{
    padding-block: 8em 18em;
  }
   }
    



/*-----------------------------------*\
  # SECTION-- 24/7 SUPPORT
\*-----------------------------------*/

.qr-section{
  padding-block:3em;
}

.cont-gr-tl h2{
  font-size: calc(30.5px + 2.5vw) !important;
  font-weight: 400;
  font-family: 'Galano Grotesk Bold';
  color: #1f2044;
  line-height: 1em;
  text-align: center;
  
}
.container-gr{
  width:80%;
  max-width: 1080px;
  margin-inline:auto;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  margin-block:3em;
  gap:3%;
}

.gr-content h3{
  font-size: 31px;
  font-weight: 400;
  font-family: 'Galano Grotesk Bold';
  color: #1f2044;
  line-height: 1em;
  margin-bottom:0.5em;
  
}


.container-gr img{
  width:100%!important;
  height:auto;
}


.gr-content h4{
  font-size: 16px;
  font-weight: 400;
  font-family: 'Galano Grotesk Regular';
  color: #000;
  line-height: 1.5em;
  
}

.container-cards{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  margin-block:1em;
  align-items:center; 
}
.fcontent-card,.s-content-card, h5{
  font-size: 27px;
  font-weight: 400;
  color:#1f2044;
   font-family: 'Galano Grotesk Bold';
  letter-spacing: 0px;
  line-height: 1.2em;
  margin-bottom:0.2em;
}

.fcontent-card,.s-content-card, h6{
  font-size: 15.5px;
  font-weight: 400;
  color:#000;
  font-family: 'Galano Grotesk Regular';
  letter-spacing: 0px;
  line-height: 1.5;
}

.fcontent-card  {
  border-right:1px solid #2e93ee;
  padding-block:1em;
}

.scontent-card {
  margin-left:30px;
  padding-block:1em;
}

.img-gr-mv{
  display:none;
}

@media (min-width: 1200px) and (max-width:1299px) {
  .container-gr{
    width:90%;
  }
}
@media (min-width: 1000px) and (max-width:1199px) {
  .container-gr{
    width:95%;
    gap:0%;
  }
  .gr-content h3{
  font-size: 28px;

  
}
}

@media (min-width: 600px) and (max-width:999px) {
  .container-gr{
    width:80%;
    gap:0%;
    grid-template-columns:repeat(1,1fr);
  }

  .gr-content h4 {
    font-size:17px;
    text-align:justify;
  }
  .fcontent-card{
    padding-right:15px;
  }
  .scontent-card{
    margin-left:25px;
  }
  .container-cards {
    margin-inline:auto;
    align-items: start;
  }
  .container-gr img {
    width:80%!important;
    margin:0 auto;
  }
}

@media (min-width: 200px) and (max-width:599px) {
  .container-gr{
    width:80%;
    gap:0%;
display:flex;
flex-direction:column-reverse;
  }
  .container-cards{   
    grid-template-columns:repeat(1,1fr);   
  }
  .fcontent-card{
    padding-right:0px;
    border:none;
  }
  .scontent-card{
    margin-left:0px;
  }
  .gr-content h4 {
    text-align:justify;
  }
  .gr-content h3 {
    font-size:25px;
    text-align:center;
    margin-top:1em;
  }
  .fcontent-card, .s-content-card, h5 {
    font-size:20px;

  }
}










.terms{
  padding-block:3.5em;
}

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

.cont-terms h2{
  font-family:DM Sans;
  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:DM Sans;
  font-weight:400;
  color:black;
  text-align:justify;
  font-size:18px;
  line-height:1.4;
  margin-block:5px 15px;
}



.st-disc{
  margin-block:5px 15px;
}
.st-disc li{
  list-style-type: disc;
  margin-left:15px;
  font-family:DM Sans;
  font-weight:400; 
 font-size:18px;
 line-height:1.3;
 color:black;
 margin-block:4px 8px;
}



.col-content-terms h2{
  font-family:DM Sans;
  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:15px;
  font-family:DM Sans;
  font-weight:400; 
 font-size:18px;
 line-height:1.1;
 color:black;
 margin-block:5px;
}







/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

.footer {
  padding-block: 3em 1em;
  background-color: #F5F6F8;
}


.cont-footer {
  display: grid;
  grid-template-columns: 1.0fr 1fr 0.87fr 1fr;
  width: 80%;
  max-width: 1080px;
  margin: 0 auto;
  gap: 30px;
}


.fcol-f {
  display: flex;
  align-items: center;

}

.fcol-f img {
  width: 90px;
}

.fcol-f .text-logo {
  font-size: 27px;
  line-height: 0.9;
  font-weight: 400;
  font-family: 'Galano Grotesk Bold' !important;
  letter-spacing: 0px;
  color: black;
  text-align: center;
  margin-bottom: -10px;

}

.cont-footer ul {
  display: flex;
  flex-direction: column;
  display: block;
  list-style: none;
  line-height: 1.3em;

  font-family: 'Galano Grotesk Regular';
}

.cont-footer li {
  margin-block: 7px 14px;
}

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

.cont-footer a {
  font-family: 'Galano Grotesk Regular' !important;
  color: black;
}

/* Estilo de la línea al hacer hover */
.cont-footer ul li:hover::after {
  width: 15px;
}

.cont-footer h2 {
  font-size: 18px;
  font-family: 'Galano Grotesk Bold';
  color: #1f2044;
  font-weight:400;
}

.container-copiright{
  width:80%;
  max-width: 1080px;
  margin-inline:auto;
  margin-block:2em 0.5em;
  display:grid;
  grid-template-columns: repeat(2,1fr);
  align-items:center;
}

.container-copiright h3{
  font-size: 14px;
  font-family: 'Galano Grotesk Medium';
  color: #939393;
  font-weight:400;
  line-height: 1.1em;
}
.container-copiright .location-text{
  text-align: right;
  margin-right:12%;
  display:inline;
}
.container-copiright a{
  color:black;
  display:inline;
}





@media (min-width: 900px) and (max-width: 1260px) {
  .cont-footer {
    width: 95%;  
}
.container-copiright .location-text{
   margin-right:0%;   
}
}

@media (min-width: 750px) and (max-width: 899px) {
  .cont-footer {
    width: 98%;  
    grid-template-columns: 0.9fr 1fr 0.87fr 1fr;
}
.fcol-f .text-logo {
  font-size: 22px;
}
.fcol-f img {
  width:60px;
}
}


@media (min-width: 450px) and (max-width: 749px) {
  .cont-footer {
    width: 90%;  
    grid-template-columns: 0.9fr 0.9fr;
    gap:0px;
}
.fcol-f .text-logo {
  font-size: 22px;
}
.fcol-f img {
  width:60px;
}
.container-copiright{
width:90%;
}

.container-copiright .location-text {
    text-align:center;
    margin-right:0px!important;
}
}

@media (min-width: 0px) and (max-width: 449px) {
  .cont-footer {
    width: 80%;  
    grid-template-columns: repeat(1,1fr);
    gap:0px;
}
.fcol-f .text-logo {
  font-size: 1.8em;
}
.fcol-f {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2em;
}

.fcol-f img {
  width:90px;
}
.container-copiright{
    width:98%;
  display:grid;
  grid-template-columns: repeat(1,1fr);
gap:10px;
}
.container-copiright h3 {
    text-align:center;
}
.container-copiright .location-text {
    text-align:center;
    margin-right:0px!important;
}
}





#headerpr{
background-color:white!important;
}

#footerpr{
  background-color:white!important;
  }