html,body{
  height: 100%; 
  width: 100%;
  font-family: "Questrial", sans-serif;
  font-weight: 400;
  font-style: normal;
  box-sizing: border-box;
}

body { background-color: #fafafa; }  

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  position:relative;
}

h1{font-size: 47px;font-weight:lighter; margin: 0 0px;color:#646464}

h2{font-size: 43px;font-weight:lighter; margin: 0 0px;}

.clickable{cursor:pointer;}

/* glass efect for header and menu */
.glassElement {
 /* Semi-transparent dark background */
  background: rgba(20, 20, 20, 0.4); 
  
  /* Blurs everything behind the element */
  backdrop-filter: blur(20px) saturate(180%); 
  -webkit-backdrop-filter: blur(20px) saturate(180%); 
  
  /* Subtle glass border */
  border: 1px solid rgba(255, 255, 255, 0.1); 
  
  /* Rounded corners and soft shadow */
  border-radius: 8px;
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.17);

  z-index:5;
}

.button{
   border: none;
  padding:0 47px;
  cursor: pointer;
  height:47px;
  align-items: center;
  align-self: center;
  border-radius: 8px;
  background-color: #dadada;
  margin:0 4px 20px 4px;
}

.button:hover{
  opacity: 0.8;
}

.blackButton{
  background-color: rgba(0, 0, 0, 1);
  color: white;
}

/* Header styles */
.header {
  color: #000;
  text-align: center;
  height: 50px;
  display: flex;   
  position:fixed; 
  padding: 0;
  width:100%;
  margin-top:30px;
  z-index:100;
}  

.headerContent {
  display: flex;
  width: 100%;
  max-width:1920px;
  margin: 0 auto;
  height:100%;
  padding:0 48px;
}

.mobileHeaderBackground{
  position: absolute;
  display:flex;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  height: 64px;
  max-width:1112px;
  opacity:0;
  z-index:-1;
  color:white;
  padding: 0 20px;
}

.mobileHeaderBackground .leftMenuContainer{
  padding:16px;
}

.mobileHeaderBackground .contactButton{
  background:white;
  color:black;
}

.mobileHeaderBackground .contactButton:hover{
  background:black;
  color:white;
}

/*left section of header*/
.leftMenuContainer {
  width: calc(33% + 135px);
  display: flex;
  align-items: baseline;
}

.headerLogoContainer {
  display: flex;
  align-items: center;
  margin-right: 20px;
  flex-shrink: 0;
}

.headerLogo {
  height: 30px;
  width: auto;
}

.headerNavContainer {
  padding: 0;
}

.headerNavContainer span {
  display: none;
  margin: 0 10px;
}

.headerNavContainer span:first-of-type{
  margin-left:5px;
}

/*center section of header*/
.centerMenuContainer {
  display: none;
  justify-content: center;
  width: 33%;
  flex-shrink: 0;
} 

.centerMenuContainer img{
  width:280px;
  max-width:95%;
  height:auto;
}

/*right section of header*/
.rightMenuContainer{
  display: flex;
  justify-content: flex-end;
  width: calc(33% + 135px);
}

.contactButton {
  background-color: black;
  color: white;
  border: solid 1px transparent;
  padding: 23px 30px;
  cursor: pointer;
  height:30px;
  display: none;
  align-items: center;
  align-self: center;
  border-radius: 8px;
  font-weight:bold;
}

.contactButton:hover{
  background:white;
  color:black;
  border:solid 1px black;
}

.inlineButton{
  display:inline-flex;
}

.cotizaButton:hover{
  background:black;
  color:white;
}

.menuIcon {
  align-content: center;
  display: flex;
  align-items: center;
}

  /* The container for our hamburger icon */
  .hamburger {
    width: 25px;
    height: 16px;
    position: relative;
    cursor: pointer;
    /* Optional: Adding a transition here creates a slight zoom effect on hover */
    transition: transform 0.2s ease-in-out;
  }
  
  .hamburger:hover {
     transform: scale(1.05);
  }

  /* Base styles for all three lines */
  .hamburger .line {
    width: 100%;
    height: 2px;
    background-color: #333;
    border-radius: 4px;
    position: absolute;
    left: 0;
    /* 
       This transition handles the movement, rotation, and opacity changes.
       The 'transform' duration controls the line rotation/translation.
       The 'opacity' duration controls the fading of the middle line.
    */
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
                opacity 0.3s ease-in-out;
  }

  .mobileHeaderBackground .hamburger .line {
    background-color: white;
  }

  /* Initial positions for the lines */
  .hamburger .line-top {
    top: 0;
  }

  .hamburger .line-middle {
    top: 50%;
    /* 
       We translate by -50% to perfectly center the middle line 
       vertically within the container. 
    */
    transform: translateY(-50%);
  }

  .hamburger .line-bottom {
    bottom: 0;
  }

  /* 
     Styles applied when the 'is-active' class is added.
     These rules animate the lines into the 'X' shape.
  */
  
  .hamburger.is-active .line-top {
    /* Move down to center, then rotate 45 degrees */
    transform: translateY(9px) rotate(45deg);
  }

  .hamburger.is-active .line-middle {
    /* Fade out the middle line completely */
    opacity: 0;
  }

  .hamburger.is-active .line-bottom {
    /* Move up to center, then rotate -45 degrees */
    transform: translateY(-5px) rotate(-45deg);
  }

  /*mobile menu styles*/

.mobileMenuContainer {
    position:fixed;
    margin-top: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width:1920px;
    color: white;
    height:0px;
    overflow: hidden;
    z-index: 99;
    padding:0 20px;
  }

.mobileMenuContainer ul li {
    display: block;
    padding: 10px 0;
}

.mobileMenuNavContainer {
    padding: 20px;
}


/* Main content styles */

.content{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position:relative;
}

.contentContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 1380px;
  margin: 0px auto -3px auto;
}

.modelosContainer{padding: 0px 40px 0px 40px;}

.horizontalContainer {
  flex-direction: row;
  justify-content: space-between;
  text-align: left;
  margin-top:65px;
}

.textContainer,.imageContainer {
  width:50%;
  padding:0px 40px;
}

.textContainer {
  position:relative;
  height:240px;
  z-index: 1;
}


.textContainer h1,.textContainer h2, .textContainer p,.textContainer .buttonsContainer{
  position:absolute;
  width:525px;
  z-index:1;
}

.rightTextContainer.textContainer h1,.rightTextContainer.textContainer h2,
.rightTextContainer.textContainer p,.rightTextContainer.textContainer .buttonsContainer{
  right:initial;
  left:0px;
}

.textContainer h1{top:0px;}

.textContainer h2{top:50px;}

.textContainer p{top:90px;}

.textContainer .buttonsContainer{top:170px;}

.imageContainer{
  position:relative;
  width:50%;
  height:100%;
  min-height:75dvh;
  max-height:90dvh;
}

.fadeInWidget{
  height:100%;
  max-width:100%;
}

.containedImage {
  position:absolute;
  max-height:100%;
  width: auto;
  max-width:100%;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}

.containedImage:not(:first-of-type) {
  opacity:0;
}

.contentContainer p {
  margin:30px 0;
  font-size: 20px;
}

.threeImagesContainer {
  display: flex;
  justify-content: space-between;
  gap: 2px;
  flex-direction: row;
  height:75dvh;
}

.modelsGallery{max-width:5000px;}

.grid{
  display:flex;
  flex-wrap: wrap; 
  width: calc(100% - 20px);
  column-gap: 10px;
  padding: 35px 0;
  box-sizing: border-box;
}

.gridElement{
  flex: 0 0 calc((100% - (2 * 20px)) / 5); 
  border:solid 0px #8888;
  margin-bottom:30px;
  position:relative;
}	

.gridElement img {
	border-radius:.4rem
}

.modelName {
	padding: 10px 5px;
}

.deleteModel {
	color:red;	
	position:absolute;
	top:10px; 
	right:10px; 
	border:solid 1px red; 
	padding:7px 11px; 
	border-radius: 50%; 
	opacity: 0.5;
}

/* Footer styles */

.footer {
  background-color: #272523;
  color: #fff;
  text-align: center;
}

.footerContent {
  display: flex;
  justify-content: center;
  max-width: 1600px;
  margin: 0 auto;
  padding: 10px;
}

.footerCell{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px;
  width: 32%;
  height: 100px;
}

.footerCell img{
  height: 30px;
}

.modalContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity:0;
}

.modalContent {
  position:relative;
  border-radius: 8px 8px 8px 8px;
  width: 90%;
  max-height: 90%;
  overflow: hidden;
  display:flex;
  max-width: 1726px;
}

.modelShowcase {
  position:relative;
  width:33.333333%;
  display:inline;
  
}

.modelShowcase img {
  height: 100%;
  object-fit: cover;
}

.modelShowcase:hover button {
  display: flex;
}

.modelShowcase button {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background:white;
  color:black;
  display: none;
}

.closeModal {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  font-size: 24px;
  background:white;
  border-radius: 50%;
  color: black;
  z-index: 1001;
  height:50px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.closeModal:hover{
  background:black;
  color:white;
}

.popupContainer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  max-width:90%;
  height: 200px;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity:0;
}

.popupContent {
  position:relative;
  border-radius: 8px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  overflow: hidden;
  display:flex;
  background:white;
  flex-direction: column;align-items: center;
  justify-content: center;
}

.closePopup{
  margin-top:30px;
}


/* Responsive sections */

@media (min-width: 1350px) {
  .headerNavContainer span{display: inline; }
  .contactButton {display: inline-flex;}
  .menuIcon {display: none;}
}

@media (max-width: 990px) {
  .horizontalContainer {
    flex-direction: column;
    margin: 0px auto;
  }
  .contentContainer p{
    padding:0 20px;
  }

  .textContainer{
    margin-top:75px;
  }

  .textContainer h1,.textContainer h2, .textContainer p,.textContainer .buttonsContainer{
    position:relative;
    width:100%;
    z-index:1;
    right:initial;
  }

  .textContainer h1{top:initial;}

  .textContainer h2{top:initial;}

  .textContainer p{top:initial;}

  .textContainer .buttonsContainer{top:initial;}

  .textContainer,.imageContainer {
    position:relative;
    width:100%;
    height:100%;
  }

  h1{font-size: 35px;}
  .containedImage {
    max-width:100%;
    max-height:100%;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
  }
  
  .grid{
    padding-left:33px;
  }

  .modelosContainer{padding: 100px 40px 40px 40px;}

  .gridElement{
    flex: 0 0 calc((100% - (2 * 20px)) / 2); 
    border-radius: 2px;
  }

  .footerContent {flex-direction: column;}

  .footerCell {
    width: 100%;
    height: auto;
    margin: 40px 0;
  } 
}

@media (min-width: 900px) {
  .centerMenuContainer {display: flex;} 
}

@media(max-width: 450px) {
  .imageContainer{
    min-height: 50dvh;
  }
}

@media(max-width: 350px) {
  .imageContainer{
    min-height: 40dvh;
  }
}

@media(max-width: 250px) {
  .imageContainer{
    min-height: 30dvh;
  }
}