@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lexend+Zetta:wght@100..900&display=swap');
/* CSS Document */

:root {
  --font-general: "Inter", sans-serif;
  --font-main: "Lexend Zetta", sans-serif;
  --dark: #233164;
  --light: #FFF;
  --color-1: #233164;
  --color-2: #0685e5;
  --color-3: #d4d6e0;
  --color-4: #FFF;
  --shadow: 0 0 3rem rgba(0,0,0,0.1);
}


html {
  font-size: 10px; /* 1rem = 10px */
  box-sizing: border-box;
  scroll-behavior: smooth;
  font-optical-sizing: auto;
  font-style: normal;
}


*, *::before, *::after {
  box-sizing: inherit;
}

body {
  font-family: var(--font-general);
  margin: 0;
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: var(--light);
  font-optical-sizing: auto;
  font-style: normal;
  isolation: isolate;
}

body.no-scroll {
  overflow-x: hidden;
}

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 6rem;
}
#background {
background-image: url("images/texture.png?v=1.3");
background-position: top -40rem center;
background-repeat: no-repeat;
background-size: 100% auto;
}
/*-----------------
HEADER
------------------*/
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
.header::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1rem;
  background: white;
}
/* NAVBAR */
.navbar {
  transition: all 0.3s ease;
}
/* NAVBAR */
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

/* NAV TODO JUNTO */
.nav {
  display: flex;
  align-items: center;
  gap: 6rem;
  padding: 0 6rem;
}
.nav-item {
font-size: 1.6rem;
color: var(--light);
text-decoration: none;
font-weight: 600;
letter-spacing: .2rem;
}

#background .nav-item{
color: var(--dark);
}

.nav .btn-home, .mobile-home, .btn-menu {
  color: transparent;
  background-image: url("images/icon-home.svg");
  background-position: center center;
  background-size: 80% auto;
  background-repeat: no-repeat;
  width: 3rem;
  height: 3rem;
  transition: all 0.3s ease;
  background-color: var(--light);
  border-radius: 50%;
  border: none;
  position: relative;
}
/* HOVER */
.nav .btn-home:hover {
  transform: scale(1.1);
}
.btn-menu {
  background-image: url("images/icon-menu.svg");
  margin-left: 2rem;
}
.mobile-home {
margin-right: 2rem;
}


/* MOBILE ELEMENTS */
.menu-toggle {
  display: none;
}
.mobile-home {
  display: none;
}

/* LOGO */
.navbar .navbar-inner .logo {
  width: 26rem;
  transition: all 0.3s ease;
  padding: 1rem 10rem 1rem 6rem;
  background-color: white;
 box-shadow: var(--shadow);
  clip-path: polygon(
  0 0,
  100% 0,
  65% 100%,
  0 100%
);
}

.navbar .navbar-inner .logo img {
  width: 100%;
  height: auto
}

/* STICKY EFFECT */
.header.scrolled .topbar {
  display: none;
}
.header.scrolled .navbar {
  background: white;
  box-shadow: var(--shadow);
}
.header.scrolled .navbar .navbar-inner {
  padding: 1rem 0;
  padding:  0;
}
.header.scrolled .navbar .navbar-inner .logo {
  width: 18rem;
  padding: 1rem 6rem;
}
.header.scrolled  {
  position: fixed;
}

.header.scrolled .navbar .navbar-inner .nav-item {
color: var(--dark);
}



/*-----------------
SIDE MENU
------------------*/

.side-menu {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  background: white;
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.35s ease;
}

/* ACTIVE */
.side-menu.active {
  transform: translateX(0);
}

/* INNER */
.side-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 4rem 3rem;
}

/* CLOSE */
.side-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 5rem;
  height: 5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 3rem;
  line-height: 1;
  color: var(--primary);
}

/* TOP */
.side-top {
  margin-bottom: 6rem;
}

.side-top img {
  width: 18rem;
}

/* NAV */
.side-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.side-nav a {
  font-size: 2.4rem;
  line-height: 3rem;
  text-decoration: none;
  color: var(--dark);
  font-weight: 600;
}

/* FOOTER */
.side-footer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--primary);
}
.side-footer-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.side-footer-item  .icon {
  width: 2.6rem;
}
.side-footer-item .value {
  color: var(--dark);
  font-weight: 500;
  font-size: 1.6rem;
}


/*-----------------
MAIN BANNER
------------------*/

/* HERO */
.hero {
  display: flex;
  align-items: center;
  min-height: 100dvh;
  position: relative;
  padding-top: 10rem;
  border-radius: 0;
  background-color: transparent;
  z-index: 2;
}
.hero-content {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 24rem 0 24rem;
  z-index: 2;
  display: flex;
  align-items: center;
}
.hero-content .over {
    width: 100%;
    height: 100%;
  background-color: color-mix(in srgb, var(--color-1) 75%, transparent);
  padding: 4rem;
}
.hero-content h1 {
  font-size: 3rem;
  line-height: 3.6rem;
  letter-spacing: -.25rem;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--light);
  font-family: var(--font-main);
  margin: 0;
  width: 100%;
  height: 100%;
}
.blend {
  position: absolute;
  mix-blend-mode: multiply;
  bottom: 0;
  width: 100%;
  padding: 0 58rem 0 24rem;
  z-index: 1;
  height: 20rem;
  opacity: .75;
}
.blend .color {
  background:var(--color-1);
  width: 100%;
  height: 100%;
}

.shadow {
background: var(--color-1);
background: linear-gradient(
  0deg,
  color-mix(in srgb, var(--color-1) 0%, transparent) 0%,
  var(--color-1) 100%
);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 20rem;
z-index: 1;
 mix-blend-mode: multiply;
}

/*-----------------
HERO VIDEO
------------------*/

/* VIDEO FIJO */
#bg-video{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}


/*-----------------
INTERIOR BANNER
------------------*/

.interior-hero {
  display: flex;
  align-items: center;
  min-height: 100dvh;
  position: relative;
  padding-top: 10rem;
  border-radius: 0;
  background-color: transparent;
  z-index: 2;
}
.interior-hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 6rem;
  z-index: 2;
  display: flex;
}
.interior-hero-content h1 {
  font-size: 3rem;
  line-height: 3.6rem;
  letter-spacing: -.25rem;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--light);
  font-family: var(--font-main);
  margin: 0;
}
.shadow {
background: var(--color-1);
background: linear-gradient(
  0deg,
  color-mix(in srgb, var(--color-1) 0%, transparent) 0%,
  var(--color-1) 100%
);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 20rem;
z-index: 1;
 mix-blend-mode: multiply;
}
.interior-hero-img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
background-image: url("images/banner-about.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}



/*-----------------
CONTACTO BANNER
------------------*/

.contact-hero {
  display: flex;
  align-items: center;
  min-height: 100dvh;
  position: relative;
  padding-top: 10rem;
  border-radius: 0;
  z-index: 2;
  background-color: var(--color-1);
}
.contact-hero-content {
  position: absolute;
  top: 20rem;
  left: 0;
  width: 75%;
  padding: 6rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap:3rem;
}
.contact-hero-content h1 {
  font-size: 3rem;
  line-height: 3.6rem;
  letter-spacing: -.25rem;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--light);
  font-family: var(--font-main);
  margin: 0;
}
.contact-hero-img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
background-image: url("images/banner-about.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: .5;
}






/*-----------------
BTN  
------------------*/
.btn-primary, .btn-cta {
  display: inline-flex;
  align-items: center;
  height: 4rem;
  padding: 0 10rem 0 2rem;
  background-color: var(--color-1);
  background-image: url("images/arrow-go-white.svg");
  background-repeat: no-repeat;
  background-position: right 2rem center;
  background-size: 2.4rem;
  color: var(--light);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn-cta {
  padding: 0 2rem;
  background-color: var(--color-2);
  background-image: none;
}
/* HOVER */
.btn-primary:hover, .btn-cta:hover {
  transform: translateY(-.4rem);
}



/*-----------------
ABOUT 
------------------*/

.about {
  background-color: transparent;
  position: relative;
  z-index: 3;
background-image: url("images/texture.png?v=1.3");
background-position: center top;
background-repeat: no-repeat;
background-size: 100% auto;
}
.about .wrap {
text-align: left;
padding: 0 24rem 0 24rem;
}

.split-section{
  display: flex;
  width: 100%;
}
.left-box{
  background: var(--color-1);
  display: flex;
  align-items:center;
  padding: 6rem;
  box-sizing: border-box;
  flex: 1;
}
.text-content{
  color: var(--light);
}
.text-content p {
  font-size: 1.8rem;
  line-height: 2.8rem;
  margin: 0;
}

.right-box{
  width: 34rem;
  flex-shrink: 0;
}

.right-box img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}



/*-----------------
BENEFITS 
------------------*/
.benefits-container {
padding: 6rem;
display: flex;
gap: 4rem;
}

.benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
}
.benefit img {
  width: 8rem;
  height: auto;
}
.benefit .title {
  font-size: 2rem;
  line-height: 2.4rem;
 font-weight: 700;
color: var(--dark);
margin: 0;
 font-family: var(--font-main);
}
.benefit p {
  font-size: 1.6rem;
font-weight: 500;
color: var(--dark);
margin: 0;
}





/*-----------------
SOLUTIONS 
------------------*/

.solutions {
position: relative;
padding: 0 6rem;
}
.solutions .wrap {
display: flex;
gap: 0;
padding: 0;
}

.solutions h2{
  text-align: center;
  margin-bottom: 4rem;
  font-size: 2.4rem;
  color: var(--dark);
   font-family: var(--font-main);
}


/* CARD */
.solutions .card{
  position: relative;
  flex: 1;
  aspect-ratio: 1 / 1.2;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  align-items: flex-end;
  padding: 3rem;
  box-sizing: border-box;
  border: none;
  outline: none;
}

/* IMG */
.solutions .card img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

/* OVERLAY */
.solutions .card .overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(0,0,0,.75) 0%,
    rgba(0,0,0,.1) 60%
  );
  z-index: 1;
}

/* TEXTO */
.solutions .card span{
  position: relative;
  z-index: 2;
  color: white;
  font-size: 2rem;
  line-height: 1.1;
  text-transform: uppercase;
  font-family: var(--font-main);
  letter-spacing: -.25rem;
}

/* HOVER */
.solutions .card:hover img{
  transform: scale(1.05);
}

/*-----------------
EXPERIECIA 
------------------*/

.experiencia {
position: relative;
z-index: 4;
background-color: white;
padding: 10rem 0;
overflow: hidden;
}


/* LAYOUT */
.experiencia .content{
  display: flex;
  align-items: center;
}

/* LEFT */
.experiencia .info {
  width: 45%;
  position: relative;
  z-index: 2;
}

.experiencia h2{
  font-size: 2.4rem;
  line-height: 2.8rem;
  margin-bottom: 4rem;
  font-family: var(--font-main);
  color: var(--dark);
}
.experiencia p{
  font-size: 1.6rem;
  line-height: 2rem;
  margin-bottom: 6rem;
}

/* STATS */
.stats{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5rem 4rem;
  margin-bottom: 6rem;
}

.stats .item strong{
  display: block;
  font-size: 3rem;
  line-height: 1;
  color: var(--color-2);
  font-family: var(--font-main);
  letter-spacing: -.25rem;
}

.stats .item span{
  display: block;
  font-size: 1.6rem;
  line-height: 1.1;
  margin-top: 1rem;
}


/* RIGHT */
.map{
  position: absolute;
  right: -10rem;
  top: -8rem;
  bottom: -8rem;
  width: 60%;
}

/* MAP IMG */
.map img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}





/*-----------------
ABOUT
------------------*/
.about-content {
  display: flex;
  align-items: flex-start;
  width: 100%;
  z-index: 4;
  position: relative;
  background-color: var(--light);
color: var(--dark);
  padding: 6rem;
  gap: 6rem;
}
.about-left {
  flex: 1;
}
.about-right {
flex: 1;
}
.about-content h3 {
  font-size: 2rem;
  margin: 0;
}
.about-content p {
  font-size: 1.6rem;
  line-height: 2.4rem;
  margin: 0;
  margin-bottom: 2rem;
}



/*-----------------
SOLUTIONS
------------------*/
.solutions-content {
  display: flex;
  align-items: flex-end;
  width: 100%;
  z-index: 4;
  position: relative;
  color: var(--dark);
  padding: 6rem;
  padding-top: 20rem;
  gap: 6rem;
}
.solutions-left {
  flex: 1;
}
.solutions-right {
flex: 1;
}
.solutions-content h1 {
  font-size: 3rem;
  line-height: 3.6rem;
  letter-spacing: -.25rem;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--dark);
  font-family: var(--font-main);
  margin: 0;
}
.solutions-content p {
  font-size: 1.6rem;
  line-height: 2.4rem;
  margin: 0;
}


#background .solutions {
margin-bottom: 6rem;
}


/*-----------------
EXPERIENCIA
------------------*/

.experiencia-content {
  display: flex;
  align-items: flex-end;
  width: 100%;
  z-index: 4;
  position: relative;
  color: var(--dark);
  padding: 6rem;
  padding-top: 20rem;
  gap: 6rem;
}
.experiencia-left {
  flex: .5;
}

.experiencia-content h1 {
  font-size: 3rem;
  line-height: 3.6rem;
  letter-spacing: -.25rem;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--dark);
  font-family: var(--font-main);
  margin: 0;
}

.portafolio {
padding: 6rem;
padding-top: 0;
}
.portafolio .filter {
  display: grid;
  width: 100%;
  gap: 4rem;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 6rem;
}
.portafolio .filter button {
 width: 100%;
 height: 4rem;
 background-color: var(--color-3);
 color: var(--dark);
 border: none;
}
.portafolio .filter button.active {
 background-color: var(--color-1);
 color: var(--light);
}

.portafolio .wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap:4rem;
}


.content-port {
padding: 6rem 0;
}


.btn-card{
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
  padding: 3rem;
  width: 100%;
  aspect-ratio: 1 / .8;
  border: none;
  background-color: var(--color-1);
  color: var(--light);
  text-align: left;
  cursor: pointer;
  outline: none;
}

/* IMG */
.btn-card img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* OVERLAY */
.btn-card .overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(0,0,0,.8) 0%,
    rgba(0,0,0,.1) 60%
  );
  z-index: 1;
  opacity: 0;
  transition: opacity .4s ease;
}

/* CONTENT */
.btn-card .content{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(2rem);
  transition:
    opacity .4s ease,
    transform .4s ease;
}

/* TITLE */
.btn-card .title {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 1rem;
}

/* SUB */
.btn-card .bajada{
  font-size: 1.4rem;
  opacity: .8;
}
.btn-card:hover .overlay{
  opacity: 1;
}

.btn-card:hover .content{
  opacity: 1;
  transform: translateY(0);
}
.btn-card img{
  transition: transform .8s ease;
}

.btn-card:hover img{
  transform: scale(1.05);
}


#background .experiencia {
margin-bottom: 6rem;
}



/* OCULTO */
.map-locations{
  display: none;
}

/* ACTIVE */
.active-content{
  display: grid;
}

.portafolio .wrap,
.map-locations{
  display: none;
}

.portafolio .wrap.active-content {
  display: grid;
}
.map-locations.active-content{
  display: block;
}





/*-----------------
FOOTER
------------------*/

.footer {
  background-color: var(--color-1);
  color: #fff;
  padding: 4rem 0;
  z-index: 3;
  position: relative;
  background-image: url("images/bg-footer.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.footer::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1;
}

/* LAYOUT */
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4rem;
  position: relative;
  z-index: 2;
}

/* LEFT */
.footer-left {
  display: flex;
  font-kerning: 6;
  flex-direction: column;
  align-items: flex-start;
  gap: 1;
  flex: 6;
  padding-right: 10rem;
}
.footer-left h3 {
font-family: var(--font-main);
font-size: 2.4rem;
color: var(--light);
line-height: 2.6rem;
  letter-spacing: -.25rem;
  text-transform: uppercase;
  font-weight: 500;
}

/* RIGHT */
.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  flex: 4;
}

.footer-text {
  color: var(--light);
  padding-left: 4rem;
  background-position: left top;
  background-repeat: no-repeat;
  padding-top: .6rem;
  text-decoration: none;
  font-size: 1.6rem;
  background-size: 2.4rem auto;
}
.footer-text.email {
background-image: url("images/icon-envelope.svg");
}
.footer-text.phone {
background-image: url("images/icon-phone.svg");
}


/* RIGHT */
.footer-social  {
  display: flex;
  flex-direction:row;
  align-items: flex-start;
  gap: 2rem;
}
.footer-social .redes {
  color: transparent;
  text-decoration: none;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background-position: center center;
  background-size: 80% auto;
  background-repeat: no-repeat;
}
.footer-social .redes:hover {
  transform: scale(1.2);
  background-color: white;
}

.linkedin {
background-image: url("images/icon-linkedin-white.svg");
}
.linkedin:hover {
background-image: url("images/icon-linkedin.svg");
}
.instagram {
background-image: url("images/icon-instagram-white.svg?v=1.4");
}
.instagram:hover {
background-image: url("images/icon-instagram.svg?v=1.4");
}
.facebook {
background-image: url("images/icon-facebook-white.svg?v=1.4");
}
.facebook:hover {
background-image: url("images/icon-facebook.svg?v=1.4");
}

.whatsapp {
background-image: url("images/icon-whatsapp-white.svg");
}
.whatsapp:hover {
background-image: url("images/icon-whatsapp.svg");
}





/* OVERLAY */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  opacity: 0;
  visibility: hidden;
  transition: .4s ease;
  z-index: 999;
}

/* ACTIVE */
.modal-overlay.active{
  opacity: 1;
  visibility: visible;
}

/* PANEL */
.modal-panel{
  position: absolute;
  top: 0;
  right: 0;
  width: 33vw;
  max-width: 60rem;
  min-width: 32rem;
  height: 100%;
  background: white;
  transform: translateX(100%);
  transition: transform .4s ease;
  overflow: hidden;
}

/* OPEN */
.modal-overlay.active .modal-panel{
  transform: translateX(0);
}

/* CONTENT */
.modal-content{
  height: 100%;
  overflow-y: auto;
  padding: 6rem 4rem;
  box-sizing: border-box;
}

/* CLOSE */
.modal-close{
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 4rem;
  height: 4rem;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
}

/* ITEMS */
.modal-item{
  display: none;
}
.modal-item img{
  width: 100%;
  height: auto;
  margin-bottom: 2rem;
}

.modal-item.active{
  display: block;
}
.modal-item h2 {
color: var(--dark);
  font-family: var(--font-main);
  font-size: 2.4rem;
  text-transform: uppercase;
  letter-spacing: -.1rem;
  line-height: 2.2rem;
}
.modal-item p {
color: var(--dark);
  font-family: var(--font-general);
  font-size: 1.6rem;
}
.modal-item p + p {
margin-bottom: 3rem;
}


/* LIGHTBOX */
.lightbox{
  position: fixed;
  inset: 0;

  background: rgba(0,0,0,.92);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;

  transition: .3s ease;

  z-index: 9999;
}

/* OPEN */
.lightbox.active{
  opacity: 1;
  visibility: visible;
}

/* IMAGE */
.lightbox-image{
  max-width: 90vw;
  max-height: 90vh;

  object-fit: contain;
}

/* BUTTONS */
.lightbox button{
  position: absolute;

  border: 0;
  background: none;

  color: white;

  cursor: pointer;
}

/* CLOSE */
.lightbox-close{
  top: 2rem;
  right: 2rem;

  font-size: 4rem;
}

/* PREV */
.lightbox-prev{
  left: 2rem;

  font-size: 6rem;
}

/* NEXT */
.lightbox-next{
  right: 2rem;

  font-size: 6rem;
}

/* HIDE ARROWS */
.lightbox.hide-arrows .lightbox-prev,
.lightbox.hide-arrows .lightbox-next{
  display: none;
}



/* CARRUSEL */
.gallery-block {
margin-bottom: 6rem;
}
.gallery-content{
  width:100%;
  max-width:70rem;
  padding:0 6rem;
}

.gallery-content h2{
  margin-bottom:2rem;
  color: var(--dark);
  font-family: var(--font-main);
  font-size: 2.4rem;
  letter-spacing: -.1rem;
  text-transform: uppercase;
}
.gallery-content p{
  margin-bottom:2rem;
  color: var(--dark);
  font-size: 1.6rem;
}


.gallery-slider{
  position:relative;
  margin-top:4rem;
}

.gallery-track{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  padding:0 6rem;
  scrollbar-width:none;
}

.gallery-track::-webkit-scrollbar{
  display:none;
}
.gallery-track img{
  height:40rem;
  width:auto;
  flex:none;
  display:block;
  cursor:pointer;
  border-radius:1rem;
}


.gallery-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:5rem;
  height:5rem;
  border:none;
  cursor:pointer;
  z-index:10;
  font-size:3rem;
  border-radius:50%;
  background:white;
  box-shadow:0 0 20px rgba(0,0,0,.15);
}
.gallery-arrow.prev{
  left:1rem;
}

.gallery-arrow.next{
  right:1rem;
}

.gallery-arrow.hidden{
  display:none;
}

@media (max-width:768px){

  .gallery-content{
    padding:0 3rem;
  }

  .gallery-track{
    padding:0 3rem;
  }

  .gallery-track img{
    height:28rem;
  }

}