*{
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

body{
   /* background-color: #212529; */
   background-color: #ddd1c5;
   font-family: 'Alegreya Sans SC', sans-serif;
}

/* ---------- MODO OSCURO ---------- */

.dark-mode{
   background-color: #212529;
   transition: background-color 0.8s ease;
}
body:not(.dark-mode) {
   transition: background-color 0.8s ease;
}

.dark-mode .history p {
   color: rgb(195, 194, 194);
}

.dark-mode .location p{
   color: rgb(195, 194, 194);
}

.dark-mode .indicator{
   color: rgb(195, 194, 194);
}

#container{
   background-color: #f8f8f8;
   position: relative;
   width: 60px;
   height: 32px;
   /* box-shadow: inset 4px 4px 6px #cecece,
               inset -4px -4px 6px #fff; */
   margin: 0px;
   margin-top: 0.6rem;
   border-radius: 25px;
   cursor: pointer;
}

.toggle{
   position: absolute;
   top: 0;
   left: 0;
   width: 40px;
   height: 32px;
   transform: scale(.7);
   background-color: linear-gradient(#D8D8D8, #FFFFFF);
   border-radius: 25px;
   box-shadow: 3px 3px 8px #c4c4c4,
               -3px -3px 8px #fff;
   transition: left 0.5s ease;
}

#container.active .toggle{
   left: 20px;
   background-color: #ed4021;
}

#container.active {
   background-color: #ed4021;
}

/* ---------------------HOME--------------------- */

.sobre-nosotros{
   display: flex;
   flex-direction: column;
   /* background-color: #212529; */
   justify-content: center;
   align-items: center;
   text-align: center;
   padding-top: 4rem;
   color: black;
}


.sobre-nosotros hr{
   /* color: white; */
   color: #c83716;
   width: 95%;
   /* box-shadow: 0 0 0.5rem white;  */
   box-shadow: 0 0 1rem #c83716;; 
}

.sobre-nosotros img{
   margin-top: 1.5rem;
   width: auto;
   height: auto;
   max-height: 80vh;
   max-width: 85%;
   /* box-shadow: 0 0 0.5rem white;  */
   box-shadow: 0 0 0.5rem #c83716;; 
   transition: transform 0.5s ease;
}

.sobre-nosotros img:hover{
   cursor: pointer;
   transform: scale(1.03);
}


.navbar{
   opacity: 90% !important;
   background-color: black !important;
   margin-top: 2.5rem;
   position: fixed;
   /* z-index: 1000; */
   transition: top 0.3s ease;
   border-bottom: solid 0.1rem #5f3202;
   border-top: solid 0.1rem #5f3202;
}
.navbar.scrolled {
   top: -2.5rem;
}

.banner{
   border-radius: 100%;
   width: 7.5rem;
   height: 7rem;
   border: solid 0.1rem #c46500;
   position: relative;
   z-index: 1;
   margin-top: -2rem;
   margin-bottom: -1.5rem;
   box-shadow: 0 0 1rem #743d02;
}

.banner:hover{
   transition: 0.8s;
   box-shadow: 0 0 3rem #743d02; 
}
.banner:not(:hover){
   transition: 0.5s;
}

.welcome-message {
   text-align: center;
   position: absolute;
   top: 50%;
   left: -59%; /* Comienza desde el lado izquierdo de la pantalla */
   transform: translateX(-50%);
   z-index: 3; /* Asegura que el mensaje esta por encima de las imagenes */
   transition: left 2s ease; /* Ajusta la duracion y el efecto  */
   color: white;
   text-shadow: 2px 2px 4px rgb(10, 9, 9);
   font-family: 'Alegreya Sans SC', sans-serif;
   background: rgba(0, 0, 0, 0.5);
   padding: 1rem;
   padding-top: 1.5rem;
   border-radius: 50px;
   letter-spacing: 0.3rem;
}

.welcome-message h1{
   font-size: 1.8rem;
}

.welcome-message span {
   color: #ff8356;
   /* text-shadow: 2px 2px 4px #743c01; */
}

.welcome-message.show {
   left: 50%; /* Mueve el mensaje hacia la derecha */
}

.superdiv{
   width: 100%;
   height: 100vh;
   /* background-image: url("Rodziny/Imgs/rodtop.jpg"); */
   background-size: cover;
   padding: 0;
   position: relative;
   overflow: hidden;
   background-color: #181a1d;
}

.superdiv img{
   width: 100%;
   height: 100vh;
   object-fit: cover;
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
   z-index: 1;
   transition: opacity 1s ease, right 2s ease;
}

.superdiv img.active {
   opacity: 1;
   left: 0;
   z-index: 2;
}

.superdiv img.previous {
   right: -100%;
}

.sobre-nosotros-container {
   display: flex;
   flex-direction: column;
   width: 100%;
   align-items: center;
   justify-content: space-evenly;
   height: 50vh;
   padding-bottom: 2rem;
   padding-top: 1rem;
}

.sobre-nosotros-div {
   display: flex;
   height: fit-content;
   flex-direction: row;
   width: 95%;
   justify-content: space-evenly;
   align-items: center;
   /* color: white; */
}
.sobre-nosotros h2{
   color: #c84224;
}
.sobre-nosotros-div img{
   width: 40%;

}

.sobre-nosotros-div p{
   width: 40%;
}

.home-container div {
   margin: 1rem;
   padding: 3rem;
   justify-content: space-around;

}

.history{
   display: flex;
   flex-direction: column;
   width: 100%;
   align-items: center;
   justify-content: center;
   padding-top: 1.5rem;
   text-align: center;
}

.history p{
   color: black;
}

.history-content0{
   display: flex;
   width: 90%;
   height: auto;
   font-size: 1.2rem;
}

.history-content1{
   display: flex;
   width: 90%;
   height: auto;
   font-size: 1.2rem;
}
.history-content2{
   display: flex;
   width: 90%;
   height: auto;
   padding-top: 0.5rem;
   font-size: 1.2rem;
}

.history-content2 div{
   display: flex;
   width: 75%;
}

.history i{
   color: #c83716;
   padding-left: 0.3rem;
   padding-right: 0.3rem;
}

.gallery-title{
   display: flex;
   flex-wrap: wrap;
   /* color: white; */
   color: #c84224;
   padding-bottom: 2.5rem;
   justify-content: center;
   text-align: center;
   padding-top: 2.2rem;
}

.gallery-title h2{
   padding-top: 2rem;
}

.gallery-title hr {
   /* color: white; */
   color: #c83716;
   width: 95%;
   /* box-shadow: 0 0 1rem white; */
   box-shadow: 0 0 1rem #c92e0c;
}

.gallery-container {
   display: flex;
   flex-wrap: wrap;
   width: 100%;
   justify-content: center;
   padding: 0.5rem;
   padding-bottom: 2.5rem;
}

.photo-item{
   overflow: hidden;
   width: 33%;
   position: relative;
   /* box-shadow: 0 0 0.5rem whitesmoke; */
   box-shadow: 0 0 0.5rem #c84224;;
}

.photo-item img {
   width: 100%;
   height: auto;
   transition: transform 0.5s ease;
}

.photo-item img:hover {
   transform: scale(1.1);
   cursor: pointer;
}

.location {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   /* color: white; */
   color: #c84224;
   padding-bottom: 1.5rem;
}

.location p{
   text-align: center;
   font-size: 1.5rem;
   padding-top: 2rem;
}

.location p:last-child {
   font-size: 3rem;
}

.location iframe{
   width: 90%;
   height: 30rem;
   border: 0;
   /* box-shadow: 0 0 0.5rem whitesmoke; */
   box-shadow: 0 0 0.5rem #c84224;
}

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

.logo-div{
   display: flex;
   flex-direction: column;
   text-align: center;
}
.apex{
   width: 60%;
   object-fit: cover;
}

.footmenu {
   display: flex;
   color: white;
   flex-direction: column;
   align-items: center;
   /* background-color: rgb(5, 5, 5); */
   background-color: #c84224;
   /* opacity: 95%; */
   padding-top: 1.5rem;
   padding-bottom: 1rem;
   border-top: solid 1px rgb(202, 195, 195);
}

.footmenu p a{
   text-decoration: none;
   color: white;
}

.footmenu hr{
   color: white;
   width: 60%;
   box-shadow: 0 0 0.5rem white; 
}

.footmenu div{
   display: flex;
   width: 40%;
   justify-content:space-evenly ;
   align-items: center;
}


.footmenu div a{
   color: white;
   font-size: 3rem;
   padding-bottom: 0.2rem;
}

.footmenu i:hover{
   transition: 0.3s;
   color: #f2927c;
}

.footmenu i:not(:hover){
   transition: 0.3s;
}
/* ----------CARTA------------ */

.indicator {
   text-align: center; /* Alinear al centro */
   margin-top: 10px; /* Espacio superior */
   font-size: 1.2rem;
   font-weight: bold;
}

.control-btn {
   background-color: #c84224; /* Color de fondo */
   color: white; /* Color del texto */
   border: none; /* Sin borde */
   padding: 10px 15px; /* Espaciado interno */
   border-radius: 5px; /* Borde redondeado */
   font-size: 16px; /* Tamaño de la fuente */
   cursor: pointer; /* Cambiar el cursor al pasar el ratón */
   transition: background-color 0.3s ease; /* Transición de color de fondo */
   position: absolute; /* Establecer la posición absoluta para los botones */
   top: 50%; /* Colocar los botones en el centro verticalmente */
   transform: translateY(-50%); /* Ajustar verticalmente los botones */
}

.prev {
   left: 10px; /* Ajustar la posición del botón izquierdo */
}
 
 .next {
   right: 10px; /* Ajustar la posición del botón derecho */
}
 
.control-btn:hover {
   background-color: #a6301b; /* Color de fondo al pasar el ratón */
}

.menu-container{
   /* background-color: rgb(168, 150, 150); */
   /* background-color: #212529; */
   display: flex;
   /* flex-direction: column; */
   width: 100%;
   flex-wrap: wrap;
   justify-content: space-evenly;
   align-items:center;
   padding-top: 2rem;
   padding-bottom: 1.5rem;
}

.menu-section:first-child{
   margin-top: 1rem;
}

.menu-section:last-child{
   margin-bottom: 3rem;
}

.menu-section {
   display: flex;
   /* flex-wrap: wrap; */
   flex-direction: column;
   width: 30%;
   min-width: 18.5rem;
   justify-content: center;
   align-items: center;
   padding-bottom: 3rem;
   margin-right: 1rem;
   margin-left: 1rem;
   margin-top: 3.5rem;
   /* box-shadow: 0 0 1.5rem rgb(66, 62, 62); */
   box-shadow: 0 0 0.5rem #c84224;
   /* border: solid 1px rgb(202, 195, 195); */
   border: solid 1px #c84224;
   border-radius: 20px;
   position: relative; /* Establecer la posición relativa para los botones */
}

.menu-title{
   width: 99%;
}

.menu-section h2{
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   /* color: rgb(202, 195, 195); */
   color: #c84224;
   text-align: center;
   /* border-bottom: solid 1px rgb(202, 195, 195); */
   border-bottom: solid 1px #c84224;
   /* background-color: rgb(137, 123, 123); */
   font-family: 'Alegreya Sans SC', sans-serif;
}

.menu-section h2:hover {
   cursor: pointer;
}
.card-container{
   height: 25rem;
   width: 18rem;
   background-color: white;
   flex-direction: column;
   padding: 0.5rem;
   border-radius: 3%;
   margin: 1rem;
   margin-top: 2rem;
   border: solid 1px black;
   box-shadow: 0 0 0.2rem #070707;
   background-color: rgb(168, 150, 150);
   /* background-color: #beb2a6; */
   font-family: 'Alegreya Sans SC', sans-serif;
   display: none;
}

.card-container.active{
   display: flex; /* Mostrar la tarjeta activa */
}

.card-container:hover{
   /* box-shadow: 0 0 3rem #743d02; */
   box-shadow: 0 0 2rem #c84224;
   transition: 0.5s;
   cursor: pointer;
}

.card-container:not(:hover){
   transition: 0.5s;
}
.card-img{
   display: flex;
   height: 60%;
   min-height: 60%;
   border-radius: 6%;
   justify-content: center;
   padding-top: 0.5rem;
}

.card-img img{
   width: 17rem;
   border-radius: 6%;
}

.card-description{
   display: flex;
   flex-direction: column;
   height: 30%;
   justify-content: center;
   /* padding-top: 1rem; */
   align-items: center;
   /* border-bottom: solid 0.5px black; */
   border-radius: 5px;
}

.card-d-title{
   padding-top: 2.5rem;
   padding-bottom: 1.5rem;
   height: 10%;
   text-align: center;
}

.card-d-title h5{
   font-size: 1.3rem;
}

.card-description p{
   text-align: center;
}

/* Querys para la galeria de imagenes  */
@media (max-width: 1200px) {
   .photo-item {
      width: 50%;
      transition: width 0.3s ease;
   }
}
@media (max-width: 700px) {
   .photo-item {
      width: 100%;
      transition: width 0.3s ease;
   }
}

 /* QUERY PARA EL MENU ( GALAXY FOLD ) */
@media (max-width: 350px){
   .menu-section {
      width: 90%;
      min-width: none;
      margin-right: 0;
      margin-left: 0;
   }
   .card-container{
      width: 16rem;
      padding-right: 0;
      padding-left: 0;
   }
   
   .card-img img{
      width: 15rem;
   }
}

@media (max-width: 300px) {
   .superdiv {
      width: 100vw;
      height: 100vh;
      background-color: #181a1d;
      padding: 0;
      margin: 0; /* Asegúrate de que no haya margen */
      position: relative;
      overflow: hidden;
   }
   .superdiv img {
     width: 100%;
     height: 100vh;
     object-fit: cover;
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;
     z-index: 1;
     transition: opacity 1s ease, right 2s ease;
   }
 
   .superdiv img.active {
     opacity: 1;
     left: 0;
     z-index: 2;
   }
 
   .superdiv img.previous {
     right: -100%;
   }
 }