/* CSS reset */
*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Roboto Condensed', sans-serif;
}
body {
  box-sizing: border-box;
  position: relative;
}

html {
  font-size: 62.5%;
}

/* Typography --------------------------------------------*/

body {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1rem;
  text-align: center;
	color: #000000;
}

.heading {
  margin-bottom: 3rem;
}

.body-text {
  font-size: 2.6rem;
  line-height: 2.5rem;
  margin: 0 auto;
  width: 70%;
}

.footer-text {
  color: #fff;
  font-size: 1.2rem;
}

/* Navigation Bar --------------------------------------------*/

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 70px;
  background-color: #000000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3%;
  z-index: 1000;
}

.logo {
  color: #FFFFFF;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

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

.nav-item a {
  color: #FFFFFF;
  text-decoration: none;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-left: 2rem;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

.nav-item a:hover, .nav-item a:active, .nav-item a.active {
  transform: scale(1.05);
  color: #7F868F;
  opacity: 0.7;
}

.burger {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.burger div {
  width: 25px;
  height: 2px;
  background-color: #FFFFFF;
  margin: 4px;
}


.service-image-placeholder {
  width: 50px;
  height: 50px;
  background-color: transparent;
  border: 0;
  margin-bottom: 1rem;
}

.service-text {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #000000;
  text-align: center;
  letter-spacing: 0px;
  margin-right: 10%;
  margin-left: 10%;
  margin-top: 8%;
  margin-bottom: 10%;
  flex: 1;
}

/* Other CSS rules (unchanged) --------------------------------------------*/

@media (max-width: 768px) {
  .nav-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 70px;
    left: 0;
    background-color: #000000;
    padding-top: 1rem;
  }

  .nav-menu.active {
    display: flex;
  }

  .nav-item {
    text-align: left;
    padding: 1rem 2rem;
    width: 100%;
    font-size: 12px;
    line-height: 16px;
  }

  .burger {
    display: flex;
  }
.explore-content {
	column-count: auto;

	
	
}
}

/* Sections --------------------------------------------*/

.section {
  width: 100%;
  height: auto;
  min-height: 100vh;
  overflow: auto;
  padding-top: 3em;
	padding-bottom: 12em;
  display: flex;
  justify-content: top;
  align-items: center;
  text-align: center;
  flex-direction: column;
  opacity: 1;
	z-index: -10;
  
}

.section { opacity: 1; transition: opacity 1s; }
.section.visible { opacity: 1; }


.section-title {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 10px;
  text-transform: uppercase;
  margin-top: 80px;
  margin-bottom: 0px;
}

/* Section colors */

.portfolio {
	background-color: #EDEDED;

}



.about {
  background-color: #CCCBC8;
}

.services {
  background-color: #9BABBB;
}

.explore {
  background-color: #80878E;
}

.contact {
  background-color: #5F6A76;
}

/* About content --------------------------------------------*/

.about-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin-bottom: 0 auto;
}

.about-image {
  width: auto;
  height: 350px;;
  margin-right: 0rem;
	align-content: center;
	opacity: 100%;
	align-items: center;
	z-index: 10;
		 
}

.about-text {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	color: #000000;
	text-align: center;
	letter-spacing: 0px;
	margin-right: 10%;
	margin-left: 10%;
	margin-top: 5%;
	margin-bottom: 2%;
	flex: 1;
}
.about-box {
  position: relative;
  width: 100%;
  max-width: 100vw;
  margin: 0 auto;
  background: #CCCBC8;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.clients-carousel-container {
  position: absolute;
  top: 28%;
  left: 50%;
  width: 100vw;
  height: 400px;
  transform: translate(-50%, -50%);
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

/* Overlays to guarantee no logo leaks at edges */
.clients-carousel-container::before,
.clients-carousel-container::after {
  content: '';
  position: absolute;
  top: 0;
  width: 4px;
  height: 100%;
  background: #CCCBC8;
  z-index: 4;
  pointer-events: none;
}
.clients-carousel-container::before { left: 0; }
.clients-carousel-container::after { right: 0; }

.clients-carousel {
  display: flex;
  align-items: center;
  height: 100%;
  animation: slide 120s linear infinite;
}

.client-logo-strip {
  height: 400px;
  width: 5000px;
  opacity: 1;
  user-drag: none;
  user-select: none;
  pointer-events: none;
}

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-5000px); }
}

/* Fades: 200px wide, smooth fade from transparent to background */
.fade {
  position: absolute;
  top: 0;
  width: 200px;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.fade-left {
  left: 0;
  background: linear-gradient(
    to right,
    #CCCBC8 0%,
    rgba(204,203,200,0.98) 10%,
    rgba(204,203,200,0.72) 40%,
    rgba(204,203,200,0.28) 70%,
    transparent 100%
  );
}

.fade-right {
  right: 0;
  background: linear-gradient(
    to left,
    #CCCBC8 0%,
    rgba(204,203,200,0.98) 10%,
    rgba(204,203,200,0.72) 40%,
    rgba(204,203,200,0.28) 70%,
    transparent 100%
  );
}



/* Responsive adjustments */
@media (max-width: 900px) {
  .clients-carousel-container {
    height: 200px;
    width: 100vw;
    left: 1vw;
    transform: translateY(-50%);
  }
  .client-logo-strip { height: 200px; }
  .about-image { width: auto; max-width: 300px; }
  .fade { width: 80px; }
  .clients-carousel-container::before,
  .clients-carousel-container::after { width: 2px; }
  
}
/* Services content --------------------------------------------*/

.services-content {
 
  margin-top: 10%;
  gap: 2rem;
  width: 90%;
  max-width: 1200px;
  text-align: center;
  align-content: center;
	margin-bottom: 10%;
	
	 
}

@media (max-width: 1200px) {
  .services-content {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .services-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .services-content {
    grid-template-columns: 1fr;
  }
}

.service-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-image-placeholder {
  width: 50px;
  height: 50px;
  background-color: transparent;
  border: 0px solid #000;
  margin-bottom: 1rem;
}

.service-text {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #4F5055;
  text-align: center;
  letter-spacing: 0px;
  margin-right: 10%;
  margin-left: 10%;
  margin-top: 2%;
  margin-bottom: 10%;
  flex: 1;
}


/* Explore content --------------------------------------------*
	


/* Grids --------------------------------------------*/

.container {
  column-count: 5;
  column-gap: 2rem;
  margin: 0 auto;
  max-width: 90%;
  padding: 0rem 0;
}

@media (max-width: 800px) {
  .container {
    column-count: 5;
  }
}

@media (max-width: 768px) {
  .container {
    column-count: 3;
  }
}

@media (max-width: 600px) {
  .container {
    column-count: 2;
  }
}

@media (max-width: 500px) {
  .container {
    column-count: 1;
  }

	

}

/* Grid images --------------------------------------------*/

.img-wrap {
  break-inside: avoid;
  margin-bottom: 2rem;
  overflow: hidden;
  position: relative;
}

.img {
  border-radius: 1rem;
  width: 100%;
  height: auto;
  object-fit: cover;
  /transition: transform 0.3s ease-in-out;
}

.img:hover {
  transform: scale(1.03);
}

.img-wrap:hover .info-panel {
  opacity: 1;
}

/* Info panel --------------------------------------------*/

.info-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 1rem;
  border-radius: 0 0 0 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  text-align: left;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  font-size: 9px;
  line-height: 10px;
  margin: 0;
}

.info-title {
  text-align: left;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 350;
  font-size: 9px;
  text-transform: uppercase;
  margin-bottom: 2px;
  letter-spacing: .2px;
	color: #D7D7D7;
}

.info-text {
  text-align: left;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 9px;
  text-transform: none;
  margin-bottom: 0;
	letter-spacing: .2px;
	color: #C7C7C7;
}

.services-text {
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
}

.case-text2 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 12px;
  font-weight: 350;
  margin-top: 5px;
  line-height: 15px;
  text-align: left;
}

.case-text1 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 16px;
  font-weight: 400;
  margin-top: 10px;
  line-height: 15px;
  text-align: left;
  font-variant-caps: all-small-caps;
}

.ser {
}
.sevice-text-h1 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 18px;
  font-weight: 350;
  margin-top: 5px;
  line-height: 16px;
  text-align: center;
  letter-spacing: 0px;
  font-variant-caps: all-small-caps;
	text-overflow: ellipsis;
}
.explore-img {
	max-width: 300px;
	max-height: 300px;
	align-content: center;
	align-self: center;
	padding-bottom: 10px;
	
}

.explore-photo {
  margin: 0;
	align-items: center;
	width: 100%;
	align-self: center;
    border-radius: 10px;
	
	
}


.footer-section {
	
	background-color: black;
	padding: 20px;
}
/* Contact Card and Form */
.contact-card {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 85%;
	column-count: 2;
  max-width: 800px;
  margin: 0 auto;
	break-inside: avoid-column;
	margin-top: 70px;
	column-gap: 30px;
}

.contact-card h2 {
  text-align: center;
  margin-bottom: 20px;
}

.contact-card form {
  display: flex;
  flex-direction: column;
}

.contact-card label {
  margin-bottom: 5px;
  font-size: 12px;
  text-transform:none;
}

.contact-card input,
.contact-card select,
.contact-card textarea {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
}

.contact-card button {
  padding: 10px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: #ffffff;
  cursor: pointer;
  font-size: 12px;
	margin-top: 33px;
}

.contact-card button:hover {
  background-color: #4E5861;
}

.empty-div {
	min-height: 100px;
}
.contact-form-aligntop {
	margin-top: 00px;
	columns: 1;
	height: auto;
}
.form-text-left {
	font: roboto condensed;
	text-align: left;
	font-weight: 400;
	text-transform:lowercase;
	
}

.tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
}

.tag-btn {
  background-color: #EDEDED;
  border: none;
  padding: 10px 20px;
	border-radius: 30px;
  margin: 5px;
  cursor: pointer;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: background-color 0.3s ease;
}

.tag-btn:hover {
  background-color: #EDEDED;
}

/* Carousel Styles */


.carousel-container {
  overflow: hidden;
  margin-bottom: 20px;

}

.carousel {
  display: flex;
  gap: 5px;
  cursor: grab;
  overflow-x: auto;
  padding: 10px 0;
	max-width: 630px;
	scroll-behavior: smooth;
		
}

.carousel.active {
  cursor: grabbing;
}

.tag-btn {
  background-color: #EDEDED;
  color: #777777;
  border: none;
  padding: 3px 10px;
  margin: 5px;
  cursor: pointer;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: background-color 0.3s ease, color 0.3s ease;
  white-space: nowrap;
}

.tag-btn:hover {
  background-color: #d0d0d0;
  color: rgba(0, 0, 0, 0.5);
}

.tag-btn.active {
  background-color: rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.5);
}

/* height*/
::-webkit-scrollbar {
  height: 1px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f13f1; 
	
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
	;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}




.explore-box {
  background: #ffffff;
  border-radius: 10px;
	height: 400px;
	max-height: 800px;
	overflow-y:hidden;
	max-width: 300px;
	  display: block;
  flex-direction: column;
  align-items: center;
	
	
	
	


}

.explore-text-h1 {
	font-family: "Roboto Condensed", sans-serif;
	font-size: 18px;
	font-weight: 600;
	padding-top: 5px;
	padding-bottom: 15px;
	line-height: 0px;
	text-align: center;
	letter-spacing: 1px;
	font-variant-caps: all-small-caps;
	color: #;
}

.explore-text-h3 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 11px;
  letter-spacing: -.5px;
  font-weight: 350;
  line-height: 14px;
   overflow: scroll;
  
	}
	::-webkit-scrollbar {
  width: 1px;
		
	
	}	

 .explore-img-crop {
	 max-height: 400px;
	 overflow-y: hidden;
}



/* Explore Section --------------------------------------------*/
#explore .explore-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 5%;
	margin-bottom: 35%;
  gap: 0%;
	padding-left: 4%;
  width: 90%;
  max-width: 1900px;
  text-align: center;
 
	border: 0px solid red;
	
}

@media (max-width: 1200px) {
  #explore .explore-content {
    grid-template-columns: repeat(4, 1fr);
	    margin-top: 100px;
	  
  }
}

@media (max-width: 992px) {
  #explore .explore-content {
    grid-template-columns: repeat(3, 1fr);
	  margin-top: 100px;
  }
	
}

@media (max-width: 776px) {
  #explore .explore-content {
    grid-template-columns: 1fr;
	    margin-top: 100px;
  }
}



.expl-card {
	width: 260px;
	max-width: 600px;
	background-color: #ffffff;
	border-radius: 10px;
	display: flex;
   flex-direction: column;

	
	
	
}
.expl-img {
	margin: 5% 5% 0% 5%;;
	align-items: center;
	width: 90%;
	align-self: center;
	height: auto;
	
}
.white {
	min-height:20px;
}
.explore-text-container {
	margin-bottom: 20px;
}
.scroll_container {
   overflow-y: hidden;
}
.text-cropped-1 {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  
		
	
}
.card-out {
	background-color: #FFFFFF;
	padding: 3%;
	border-radius: 9px
	
}
.explore-text-block {
	
}

.rounded-div {
    width: 90%;
    height: 500px;
    padding: 10px;
    border-radius: 9px;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
	margin-bottom: 10%;
}

.image-box {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 12px;
}

.image-box img {
    width: 100%;
    height: auto, max 200px;
    display: block;
    border-radius: 7px;
}

.scrollable-paragraph {
    flex: 1;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 16px; /* Leading */
    overflow-y: scroll;
    padding: 0px 10px 10px 15px;
}

.text-form {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 12px;
	font-weight: 500;
	text-transform: none;
	padding-bottom: 5px;
	letter-spacing: -.2px;
	line-height: 16px;
}

.text-form1 {
		font-family: 'Roboto Condensed', sans-serif;
	font-size: 12px;
	font-weight: 400;
	text-transform: none;
	padding-bottom: 10px;
	padding-top: 10px;
	letter-spacing: -.2px;
	line-height: 18px;
}

.service-title {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 8px;
	font-weight: 400;
	text-transform: uppercase;
	padding-bottom: 0px;
	letter-spacing: 2px;
	color:#8F8F8F;
	

}
.about-title {
		 font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  color: #000000;
  text-align: center;
  letter-spacing: 0px;
  margin-right: 10%;
  margin-left: 10%;
  margin-top: 3%;
  margin-bottom: 1%;
  flex: 1;
}

.expand {
  position: absolute;
  top: 5px;
  right: 5px;
  /* Remove padding-left, and don't use negative values with padding */
  /* Optionally set width/height if needed */
  width: 12px;
  height: 12px;
	opacity: .7;
  z-index: 2;
  pointer-events: auto;
}
.idioma {
	color: darkred;
}
.language_select {
    position: fixed;
    top: 55px;
    right: 0;
    margin-right: 10px;
    z-index: 1000;
	color: #818181;
	
	font-size: 9px;

}
.language_select {
    /* your other styles */
    transition: color 0.2s; /* smooth color change */
}

.language_select:hover {
    cursor: pointer;
    color: #7F868F;
}

.about-socials {
  display: flex;
  justify-content: center;
  gap:10px;
  margin-top: 00px;
	margin-bottom: 30px;
	opacity: .5;
}

.about-socials img {
  width: 25px;
  height: 25px;
  display: block;
  transition: transform 0.2s, box-shadow 0.2s;

}

.about-socials a:hover img,
.about-socials a:focus img {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.language-select-vertical {
  position: fixed;
  right: 0;
  top: 15%;
  transform: translateY(-50%);
  width: 20px;
  height:53px;
  background: #414142; /* or your preferred color */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  font-size: 1rem;
  border-radius:  6px 0 0 6px;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 1px 1px 6px rgba(0,0,0,0.08);
  transition: background 0.2s;
}

.language-select-vertical:hover {
  background: #444; /* Hover color */
}

.language-select-vertical span {
  letter-spacing: 1px;
  padding: 0;
  margin: 0;
  user-select: none;
}
.click-eng {
	position: inherit;
	margin: -20px;
	z-index: -1000;

		
}