@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  }
a{
  text-decoration: none;
}
  
  @media screen and (prefers-reduced-motion: reduce) {
  html {
  scroll-behavior: auto;
  }
  }

body {
    width: 100%;
    background-image: url(fondonews.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: rgb(187, 148, 87);
}
.containercontact{
  position: absolute;
  top: 0;
  margin-left: 7%;
  font-family: "Roboto", serif;
  background-color: rgb(67, 40, 24);
  color: ivory ;
  height: 3rem;
  width: 1140px;
  display: flex;
  justify-content: space-between;
  border-bottom-left-radius: 1.8rem;
  border-bottom-right-radius: 1.8rem;
  padding : 1% 2% 1%;
  column-gap: 2%;
  flex-direction: row;
  font-size: 0.9rem;
  text-decoration: none;
}
.containercontact a{
  text-decoration: none;
  color: ivory;
}
.containercontact a:hover {
  color: rgb(241, 131, 4); 
  text-decoration:none; 
  cursor:pointer;  
}


.item:nth-last-child(3) {
  margin-left: auto; 
}

@media (max-width: 1245px) {

  .containercontact{
    display: flex;
    margin: auto;
    max-width: 70%;
    flex-direction: row;
    flex-wrap: wrap;
    left: 10%;
  }
  
} 


.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  position: absolute;
  top: 50px;
  margin-left: 7%;
  font-family: "Roboto", serif;
}

/* Logo Styles */
.logo img {
  max-width: 50%;
  height: auto;
}

/* Hamburger Icon Styles */
.hamburger {
  display: none; /* Hidden by default on desktop */
  flex-direction: column;
  cursor: pointer;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background-color: ivory;
  margin: 4px 0;
  transition: 0.4s;
}

/* Menu Styles */
.containermenu {
  list-style-type: none;
  display: flex;
  margin: 0;
  padding-right: 10%;
}

.containermenu .items {
  margin: 0 10px;
}

.containermenu .items a {
  text-decoration: none;
  color: rgb(111, 29, 27);
  font-weight: bold;
  border-bottom: 3px solid rgb(111, 29, 27);
  background-color:rgba(255, 230, 167, 0.7) ;
  padding: 5px;
  border-radius: 10px;
}

.containermenu .items a:hover {
  color: ivory;
  background-color:rgb(111, 29, 27) ;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .hamburger {
      display: flex;
      margin-right: 20px;
  }
  /* .navbar{
    display: flex;
    margin: auto;
    flex-direction: column;
    align-items: ;
  } */

  .containermenu {
      display: none; /* Hide menu by default on mobile */
      flex-direction: column;
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      background-color: rgba(187, 148, 87,0.9);
      padding: 10px 0;
      border-radius: 30px;
  }

  .containermenu.active {
      display: flex; /* Show menu when active */
  }

  .containermenu .items {
      margin: 10px 0;
      text-align: center;
  }
}

.bienve{
  margin: 10% auto 0%;
  width: 85%;
}
.bienve>h4{
    font-family: "Roboto", serif;
  font-weight: 400;
  color: rgb(255, 230, 167) ;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  padding-top: 1rem;
}
.bienve>h1{
  color: rgb(255, 230, 167) ;
  font-size: clamp(1.5rem, 5vw, 4rem);
  letter-spacing: 2px;
  line-height: 150%;
  padding-top: 1rem;
}
.btns{
  display: flex;
  flex-direction: row;
  column-gap: 5% ;
}
.btn-42,
.btn-42 *,
.btn-42 :after,
.btn-42 :before,
.btn-42:after,
.btn-42:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-42 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: rgb(67, 40, 24);
  background-image: none;
  color: ivory;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-42:disabled {
  cursor: default;
}
.btn-42:-moz-focusring {
  outline: auto;
}
.btn-42 svg {
  display: block;
  vertical-align: middle;
}
.btn-42 [hidden] {
  display: none;
}
.btn-42 {
  border-radius: 999px;
  box-sizing: border-box;
  display: block;
  font-weight: 600;
  -webkit-mask-image: none;
  padding: 1rem 3rem;
  position: relative;
  text-transform: uppercase;
}
.btn-42 span {
  /* mix-blend-mode: difference; */
}
.btn-42:before {
  --thickness: 4px;
  border: var(--thickness) solid ivory;
  border-radius: 999px;
  content: "";
  inset: calc(var(--thickness) * -1);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: scale(1.3);
  transition: transform 0.2s, opacity 0.2s;
}
.btn-42:hover:before {
  opacity: 1;
  transform: scale(1);
}
.btn-42:hover {
  background-color: transparent;
}

.secund{
  background-color: rgb(111, 29, 27);
}

@media(max-width:768px){

.bienve>h4{
  display: none;
}
.estadistica{
  display:none;
}

.btn-42 {
  border-radius: 999px;
  box-sizing: border-box;
  display: block;
  font-weight: 300;
  -webkit-mask-image: none;
  padding: 0.6rem 1rem;
  position: relative;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.btns{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

}
.estadi{
  height:109px;
  display: flex;
  list-style: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color:rgba(153, 88, 42, 1) ;
  column-gap: 10%;
  color: rgb(255, 230, 167) ;
  font-size: 1rem;
  font-weight: 500;
}
.estadi>li{
  text-align: center;
}
.numero{
  font-size: 2.5rem;
}
sup{
  font-size: 1rem;
}
.servicios{
  background-color: rgb(187, 148, 87);
  margin:auto;
  width: 100%;
  height: 100%;
}
.servicios h4{
  width: 85%;
  margin: auto;
  font-family: "Roboto", serif;
  font-weight: 400;
  color: rgb(255, 230, 167) ;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.servicios h2{
  width: 85%;
  margin: auto;
  color: rgb(67, 40, 24) ;
  font-size: clamp(1.5rem, 5vw, 3rem);
  line-height: 100%;

}
.servi{
  width: 85%;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex-wrap: wrap;
  column-gap: 3%;
  list-style: none;
  position: relative;
  height: 270px;
}
.servicios p{
  background-color: rgb(153, 88, 42);
  border-radius: 20px;
  padding: 1%;
  width: 400px;
  height: 300px;
  position: absolute;
  left: 95px;
  color: ivory;
  font-size: 1.3rem;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  line-height: 25px;
}
.servi img{
  margin-top: 12%;
  border: 8px solid ivory;
  border-radius: 11%;
  width: 280px;
}
.servi img:hover {
  transform: scale(1.05); /* Slight zoom on hover */
}
@media(max-width:1338px){
  
  .servicios{
    display: flex;
    flex-direction: column;
    margin: auto;
    flex-wrap: wrap;
    height:50rem;
  }
  .servi{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .servicios p{
    position: relative;
    width: 250px;
    height: 250px;
  } 
  .over{
    display: none;
  } 
}
@media(max-width:1069px){
 .servi li:last-child{
    display: none;
  }
}

@media(max-width:700px){

  .servi{
    height: 200px;
  }

  .servicios h4{
    
    padding-top: 2rem;
    margin-bottom: 0px;
  }


}


.destacado{
  background-color: rgb(153, 88, 42) ;
  position: relative;
  height: 48rem;
}
.destaca{
  display: flex;
  width: 85%;
  margin: auto;
  column-gap: 15%;
}
.desta{
  list-style: none;
  position: relative;
}
.sobre{
  position: absolute;
  top: 150px;
  left: 150px;
}
.ulti{
  position: absolute;
  top: 500px;
  left: 90px;
}
.desta img{
  margin-top: 12%;
  border: 8px solid ivory;
  border-radius: 11%;
}
.desta img:hover {
  transform: scale(1.05); /* Slight zoom on hover */
}

.desta p{
  background-color: rgb(255, 230, 167);
  border-radius: 20px;
  padding: 1%;
  width: 234px;
  height: 177px;
  /* position: absolute;
  left: 95px; */
  color: rgb(67, 40, 24);
  font-size: 1.5rem;
  line-height: 30px;
  text-align: center;
  font-weight: 800;
  padding-top: 8%;
}
.descri{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.descri h4{
  font-family: "Roboto", serif;
  font-weight: 400;
  color: rgb(255, 230, 167) ;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  line-height: 25px;
}
.descri h2{
  margin: auto;
  color: ivory ;
  font-size: clamp(1.5rem, 5vw, 3rem);
  line-height: 100%;
}
.descri h3{
  color: rgb(255, 230, 167);
  font-size: 1.3rem;
}
.btn-42{
  width: 250px;
}

@media(max-width:1308px){
  .destaca{
    display: flex;
    flex-direction: column-reverse;
          }
  .destacado{
    position: relative;
    height: 72rem;
}
.desta p{
  width: 234px;
  height: 177px;
  /* position: absolute;
  left: 95px; */
  color: rgb(67, 40, 24);
  font-size: 1.5rem;
  line-height: 20px;
  text-align: center;
  font-weight: 800;
  padding-top: 4%;
}

}
@media(max-width:620px){
  .destaca img{
    width: 70%;
    border: 5px solid ivory;
  }
  .ulti{
    position: absolute;
    top: 430px;
    left: 90px;
    font-size: clamp(1.5rem, 5vw, 3rem) ;  
}

.destacado{
  position: relative;
  height: 65rem;
}


.servicios h4{
    padding-top: 0rem;
  padding-bottom: 0rem;
}



}

.galeria{
  background-color: rgb(187, 148, 87);
  margin: auto;
}
.galeria h4{
  font-family: "Roboto", serif;
  font-weight: 400;
  color: ivory ;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  line-height: 25px;
  text-align: center;
}
.galeria h2{
  margin: auto;
  color: rgb(67, 40, 24) ;
  font-size: clamp(1.5rem, 5vw, 3rem);
  line-height: 100%;
  text-align: center;
}

.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px; /* Space between images */
  margin: auto;
}

/* Gallery images */
.images{
  border-radius: 11px;
  border: 8px solid ivory;
  transition: transform 0.3s ease;
  display: flex;
  margin: auto;
  width: 75%;
}
.gallery img:hover {
  transform: scale(1.05); /* Slight zoom on hover */
}

/* Responsive adjustments */
@media (max-width: 1400px) {
  .gallery img {
      flex: 1 1 calc(100% - 20px); /* Two images per row on tablets */
      max-width: calc(100% - 20px);
  }
}

@media (max-width: 780px) {
  .gallery img {
      flex: 1 1 100%; /* One image per row on mobile */
      width: 100%;
  }
}

.btn-77,
.btn-77 *,
.btn-77 :after,
.btn-77 :before,
.btn-77:after,
.btn-77:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-77 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: rgb(111, 29, 27);
  background-image: none;
  color: rgb(255, 230, 167);
  cursor: pointer;
  font-family: "Roboto", serif;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  display: flex;
  margin: auto;
  margin-top: 1rem;
  margin-bottom: 2rem;
}
.btn-77:disabled {
  cursor: default;
}
.btn-77:-moz-focusring {
  outline: auto;
}
.btn-77 svg {
  display: block;
  vertical-align: middle;
}
.btn-77 [hidden] {
  display: none;
}
.btn-77 {
  -webkit-animation: pulse 2s infinite;
  animation: pulse 2s infinite;
  border: 1px solid;
  border-radius: 999px;
  box-shadow: 0 0 0 2em transparent;
  box-sizing: border-box;
  display: block;
  font-weight: 600;
  -webkit-mask-image: none;
  overflow: hidden;
  padding: 0.6rem 1rem;
  position: relative;
  text-transform: uppercase;
}
@-webkit-keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #fff;
  }
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #fff;
  }
}


























.testimonios{
  background-color:rgb(153, 88, 42) ;
}
.testimonios h4{
  font-family: "Roboto", serif;
  font-weight: 400;
  color: rgb(255, 230, 167) ;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  line-height: 25px;
  text-align: center;
}
.testimonios h2{
  margin: auto;
  color: ivory ;
  font-size: clamp(1.5rem, 5vw, 3rem);
  line-height: 100%;
  text-align: center;
}
.testimo{
  display: flex;
  margin: auto;
  width: 90%;
  background-image: url(testimonios.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  height: 400px;
  column-gap: 7%;
  align-items: center;
  border-radius: 20px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}
.testi{
  color: rgba(110, 110, 110, 1);
  background-color: rgba(243, 236, 220, 1) ;
  width: 431px;
  height: 302px;
  border-radius: 20px;
  font-family: Georgia, Times New Roman, Times, serif;
  font-size: 1.2rem;
  padding: 10px;
  line-height: 30px;
}
.checked{
  color: rgba(243, 167, 52, 1);
}
.testi img{
  border-radius: 50%;
  border: 2px solid rgba(243, 167, 52, 1) ;
}
.name{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.name h4{
  color: #000;
  font-size: 1.2rem;
  text-shadow: 2px 30px rgba(110, 110, 110, 1) ;
}


@media(max-width:957px){
  .testimo{
    display: flex;
    margin: auto;
    background-image: url(testimonios.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 50rem;
    flex-direction: row;
    
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    border-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
  }

  .testi{
    color: rgba(110, 110, 110, 1);
    background-color: rgba(243, 236, 220, 1) ;
    width: 300px;
    height: 250px;
    border-radius: 20px;
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 1rem;
    padding: 10px;
    line-height: 20px;
  }
}

.formulario{
  display: flex;
  flex-direction: column;
  margin: auto;
  align-items: center;
  width: 100%;
  background-color: rgb(187, 148, 87);
}
.formulario h4{
  font-family: "Roboto", serif;
  font-weight: 400;
  color: rgb(255, 230, 167) ;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  line-height: 25px;
  text-align: center;
}
.formulario h2{
  color: rgb(67, 40, 24) ;
  font-size: clamp(1.5rem, 5vw, 3rem);
  line-height: 100%;
  text-align: center;
}
.form-container {
  background: rgba(243, 236, 220, 1);
  padding: 2%;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-family: "Nunito Sans", sans-serif;
  width: 50%;
}

.form-container h3 {
  text-align: center;
  color: rgb(67, 40, 24);
  margin-bottom: 20px;
  
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
  color: rgb(67, 40, 24);
}

.form-group input, .form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}

.form-group textarea {
  resize: vertical;
}

.form-group button {
  background-color: rgb(67, 40, 24);
  color: #fff;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
}

.form-group button:hover {
  background-color: rgb(153, 88, 42);
} 

.pie{
  display: flex;
  gap: 20px;
  justify-content: space-evenly;
  font-family: "Nunito Sans", sans-serif;
  font-size: clamp (1.5rem, 2vw, 2rem);
  line-height: 3;
  background-color: rgb(67, 40, 24);
  color: ivory;
  padding: 30px 0px 30px;
  flex-wrap: wrap;
}
.pie>a{
  color: ivory;
}
hr{
  color: rgba(202, 189, 189, 1);
}
.direccion{
  margin-top: 0px;
}
/* .icon-1 {
  color: rgb(68, 35, 4);
} */
@media (max-width:768px){
  .form-container{
    width: 80%;
  }
  .pie{
      flex-direction: column;
      text-align: center;
      
  }
  .pie>div{
      border-color: green;
      line-height: 2;
  }
  .testimo{
    background-image: none;
  }
  
}