@import url(https://fonts.googleapis.com/css2?family=Archivo:wght@400;700;800&family=Barlow:wght@400;700;800&family=Mulish:wght@400;700;800&display=swap);

li.marker-1, li.marker-2, li.marker-3, li.marker-4 {
  padding-left: 2rem;
  background-position: 0 7%;
  background-size: 1.3rem 1.3rem
}

#video_pattern, .fixmenu {
  position: fixed;
  width: 100%
}

:root {
  --aqua: #86c3f2;
  --purple-ligth: #f3b2f7;
  --blue: #046AE7;
  --aqua-marine: #1BA78D;
  --purple: #23007b;
  --purple-2: #280887;
  --pink: #f698fc;
  --blue-2: #12043f
}

.pl-banner {
  padding-left: 11vw
}

.text-archivo-regular {
  font-family: Archivo, sans-serif;
  font-weight: 400
}

.text-archivo-bold {
  font-family: Archivo, sans-serif;
  font-weight: 700
}

.text-archivo-extraBold {
  font-family: Archivo, sans-serif;
  font-weight: 800
}

::-webkit-scrollbar {
  width: .4rem
}

::-webkit-scrollbar-track {
  background: var(--blue-2)
}

::-webkit-scrollbar-thumb {
  background: var(--purple-2)
}

.nav-menu {
  overflow: hidden
}

.nav-menu::before {
  content: "";
  position: absolute;
  height: 4px;
  width: 100px;
  background: var(--aqua-marine);
  bottom: 0;
  transform: translateX(110px);
  opacity: 0;
  transition: .3s cubic-bezier(.55, 0, .1, 1)
}

.fixmenu .sticky-top, .nav-menu-color {
  background: linear-gradient(220deg, rgba(137, 137, 137, .763), 20%, #23007b)
}

.fixmenu, .fixmenu .sticky-top {
  -webkit-transition: .5s ease-out
}

.nav-menu:hover::before {
  transform: translateX(0);
  opacity: 1;
  width: 25px
}

.fixmenu {
  z-index: 999;
  transition: .5s ease-out
}

.fixmenu .sticky-top {
  padding: 10px !important;
  transition: .5s ease-out
}

.grid-sizer, .grid-item {
  width: 20%;
}

.grid-item--width2 {
  width: 40%;
}

.fixmenu .sticky-top img.logo-menu {
  width: 55% !important;
  height: 55% !important;
  -webkit-transition: .5s ease-out;
  transition: .5s ease-out
}

.bk-msg, .input-control {
  background-color: #f5f5f5
}

.text-barlow-regular {
  font-family: Barlow, sans-serif;
  font-weight: 400
}

.text-barlow-bold {
  font-family: Barlow, sans-serif;
  font-weight: 700
}

.text-barlow-extraBold {
  font-family: Barlow, sans-serif;
  font-weight: 800
}

.text-mulish-regular {
  font-family: Mulish, sans-serif;
  font-weight: 400
}

.text-mulish-bold {
  font-family: Mulish, sans-serif;
  font-weight: 700
}

.text-mulish-extraBold {
  font-family: Mulish, sans-serif;
  font-weight: 800
}

.text-aqua {
  color: var(--aqua)
}

.bg-banner {
  background-image: url('/images/home/collage banner.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;  
}

.text-aqua-marine {
  color: var(--aqua-marine)
}

.text-blue {
  color: var(--blue)
}

.text-blue-2 {
  color: var(#12043f)
}

.text-pink {
  color: var(--pink)
}

.text-purple {
  color: var(--purple)
}

.text-purple-2 {
  color: var(--purple-2)
}

.text-purple-ligth {
  color: var(--purple-ligth)
}

.title-banner h1 {
  font-weight: 700
}

@media only screen and (max-width:600px) {
  .title-banner, .title-banner h1 {
    font-size: calc(23px + .390625vw)
  }
  h1 span.sub-title-size {
    font-size: calc(20px + .390625vw) !important;
}

.logo-menu{
  width: 55% !important;
}

div.fourth-title-size p{
  font-size: calc(35px + .390625vw) !important;
}
}

@media only screen and (min-width:600px) {
  .title-banner, .title-banner h1 {
    font-size: calc(35px + .390625vw)
  }

  .img-footer {
    width: 20% !important
  }
  
}

@media only screen and (min-width:768px) {
  .title-banner, .title-banner h1 {
    font-size: calc(40px + .390625vw)
  }
}

@media only screen and (min-width:992px) {
  .title-banner, .title-banner h1 {
    font-size: calc(47px + .390625vw)
  }
}

@media only screen and (min-width:1200px) {
  .title-banner, .title-banner h1 {
    font-size: calc(50px + .390625vw)
  }
}

.sub-title-size {
  font-size: calc(26px + .390625vw)
}

.third-title-size {
  font-size: calc(36px + .390625vw)
}

.fourth-title-size {
  font-size: calc(55px + .390625vw)
}

@media only screen and (min-width:1440px) {
  .title-banner, .title-banner h1 {
    font-size: calc(60px + .390625vw)
  }

  .sub-title-size {
    font-size: calc(30px + .390625vw)
  }

  .third-title-size {
    font-size: calc(45px + .390625vw)
  }

  .fourth-title-size {
    font-size: calc(65px + .390625vw)
  }
}

.text-size {
  font-size: calc(14px + .390625vw)
}

.text-size-2 {
  font-size: calc(18px + .390625vw)
}

.text-footer {
  font-size: calc(6px + .390625vw)
}

.text-menu {
  font-size: calc(6px + .390625vw)
}

@media only screen and (max-width:768px) {
  .grid-sizer, .grid-item {
    width: 50%;
  }

  .grid-item--width2 {
    width: 50%;
  }

  .text-menu {
    font-size: calc(10px + .390625vw);
    padding: 21px 0
  }
}

.background-1, .background-2, .background-3 {
  padding: 20px 0;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat
}

.background-2 {
  background-image: url("../images/home/background_2.webp")
}

.background-3 {
  background-image: url("../images/home/background_3.webp")
}

.border-radius {
  border-radius: 20px
}

.bk-msg {
  color: var(--purple-2)
}

.input-control {
  border: none;
  display: block;
  padding: .375rem .75rem;
  line-height: 1.5;
  color: var(--blue-2);
  border-radius: .25rem
}

.input-control:focus~label, .input-control:valid~label {
  transform: translateY(-20px);
  color: var(--blue);
  background-color: #fff;
  font-weight: 500
}

.input-control:focus, .input-control:valid {
  background-color: #fff;
  border: 3px solid #f5f5f5
}

.label-form {
  bottom: 7px;
  left: 10px;
  pointer-events: none;
  transition: .3s
}

li.marker-1::marker, li.marker-2::marker, li.marker-3::marker, li.marker-4::marker {
  content: ''
}

li.marker-1 {
  background-image: url("../images/home/li_2.png");
  background-repeat: no-repeat
}

li.marker-2 {
  background-image: url("../images/home/li_1.png");
  background-repeat: no-repeat
}

li.marker-3 {
  background-image: url("../images/home/li_3.png");
  background-repeat: no-repeat
}

li.marker-4 {
  background-image: url("../images/home/li_4.png");
  background-repeat: no-repeat
}

@media only screen and (max-width:600px) {
  .img-footer {
    width: 80% !important
  }
}

#video_background {
  position: absolute;
  bottom: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1000;
  overflow: hidden
}

#video_pattern {
  background: #fff;
  opacity: .8;
  left: 0;
  top: 0;
  height: 100%;
  z-index: 1
}

.img-hover-zoom {
  overflow: hidden;
  /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.075);
}

.portfolio-logo div {
  border-radius: 50%;
  height: 70px;
  width: 70px;
  background-color: rgba(245, 245, 245, 0.603);
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio-logo div i {
  margin-left: 7px;
  font-size: 25px;
  color: #2e0f7d98;
}

:root {
  --dark-blue: #12043F;
  --green: #10D36E;
  --blue: #074BDE;
  --yellow: #FFD62C;
  --red: #FC3D5B;
  --gray: #f1f1f1;
  --light-pruple: #2B00AA;
}

.bg-gray {
  background-color: var(--gray);
}

.width-s {
  width: 100%;
}

.bg-blue {
  background-color: var(--blue);
}

.bg-dark-blue {
  background-color: var(--dark-blue);
}

.bg-yellow {
  background-color: var(--yellow);
}

.bg-green {
  background-color: var(--green);
}

.bg-light-purple {
  background-color: var(--light-pruple);
}

.super-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  gap: 12px;
  padding: 14px 28px;
  background: linear-gradient(145deg, #0f0f0f, #1c1c1c);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  z-index: 1;
}

.super-button::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, #00ffff, #ff00ff, #00ffff);
  animation: rotate 4s linear infinite;
  z-index: -2;
}

.super-button::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: #0a0a0a;
  border-radius: inherit;
  z-index: -1;
}

.super-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 40px rgba(0, 255, 255, 0.2);
  color: white;
}

.super-button:hover .arrow {
  transform: translateX(6px);
}

.arrow {
  width: 22px;
  height: 22px;
  transition: transform 0.3s ease-in-out;
  color: #00ffff;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}



.portada_movil{
  min-height: 500px;
  object-fit: cover;
  object-position: right;
  filter: brightness(55%);
}

.wwwa__cta, .wwwa__pulse{
  bottom: 45vh !important;
}

.wwwa--style_icon .wwwa__popup {
  bottom: 10px !important;
}

.navbar-brand {
  margin-right: 0rem !important;
}

.conocer_mas{
width: auto;
height: 60px;
cursor: pointer;
color: white;
border-radius: 16px;
border: none;
outline: none;
position: relative;
background-color: #12043f;
transition: .3s;
}

@media only screen and (min-width:768px) {
  .width-s {
    width: 85%;
  }

  
}

.conocer_mas::after{
  content: '';
  width: 100%;
  height: 100%;
  background: radial-gradient(circle farthest-corner at 10% 20%,
  rgba(255,94,247,1) 18%,
  rgba(2,245,255,1) 100%
  );
  filter: blur(15px);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  animation: move 2s linear infinite;
  background-size: 40% 200%;
}

.conocer_mas:hover{
  background-color: #23007b;
  transition: .3s;
}

@media(max-width: 500px){
  .wwwa__cta, .wwwa__pulse{
  bottom: 20px !important;
}
}

@keyframes move {
  0%{
    background-position: 0 0;
  }
  100%{
    background-position: 200px 440px;
  }
  
}