@charset "utf-8";
/* CSS Document */
	

 /* Contenedor principal del slider */
        .slider-container {
            position: relative;
            max-width: 800px;
            margin: auto;
            overflow: hidden;
            height: auto; /* Ajusta la altura según tus imágenes */
        }

        /* Contenedor de las imágenes */
        .slider-images {
            display: flex;
            transition: transform 0.5s ease;
        }

        /* Estilo de las imágenes */
        .slider-images img {
            width: 100%;
            flex-shrink: 0;
            margin: 0;
            padding: 0;
            display: block;
        }

        /* Botones de navegación */
        .slider-button {
            position: absolute;
            top: 50%; /* Centrado verticalmente */
            transform: translateY(-50%); /* Ajuste de centrado */
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            border: none;
            padding: 15px ;
            cursor: pointer;
            font-size: 24px;
			width: 40px;
            height: 40px;
            z-index: 10;
			display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Posición de los botones */
        .slider-button.left {
            left: 0px;
			
			
        }

        .slider-button.right {
            right:0px;
			
			
        }

/* CSS DE BARRA */		
       

        /* Estilos para la marca */
        .bahia-blanca {
            font-family: 'Great Vibes', cursive;
            font-size: 35px; /* Tamaño reducido para ajustarse a la barra */
            color: white;
            margin-top: 2px;
			margin-left: 20;
		
        }
		
		.logo {
            position: absolute;
		
        }

        .residencia-geriatrica {
            font-family: 'Arial', sans-serif;
            font-size: 15px; /* Tamaño reducido para ajustarse a la barra */
            color: #f8f9fa;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 40px; /* Reduce el espacio entre los textos */
            margin-left: -13px;
			position: absolute;
        }

        /* Ajuste del margen izquierdo de la marca */
        .navbar-brand {
            padding-left: 70px; /* Ajusta este valor para controlar la distancia desde el margen izquierdo */
			height: 70px;
			
        }

        /* Estilos de la barra de navegación */
        .navbar {
            background-color: #2B6CA3;
            padding: 0.05rem 0.5rem; /* Reducción extrema del padding para hacer la barra extremadamente delgada */
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease-in-out;
			position: fixed; /* Fija la barra de navegación */
			top: 0; /* La posiciona en la parte superior */
            width: 100%; /* Ocupa el ancho completo de la pantalla */
            z-index: 1000; /* Para que esté por encima de otros elementos */
        }

        .navbar:hover {
            background-color: #245985;
        }

        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
			
			  filter: brightness(0) invert(1);
        } 

		
		  .navbar-toggler {
             padding: 0.25rem 0.5rem;
             width: 60px;
             height: 60px;
             display: flex;
             align-items: center;
             justify-content: center;
			 color: #FFFFFF;
			 border: solid 0px;
}

           .navbar-toggler-icon {
               transform: scale(0.8);
			   color: #FFFFFF;
	
	
}

        /* Estilo para los links de navegación */
        .nav-link {
            color: #f8f9fa !important;
            font-family: 'Arial', sans-serif;
            font-weight: 500;
            padding: 2px 5px; /* Reducción extrema del padding de los links */
            font-size: 17px; /* Tamaño reducido para ajustarse a la barra */
            transition: color 0.3s, background-color 0.3s;
            border-radius: 3px;
            position: relative;
			margin-right: 20px;
        }

        .nav-link:hover {
            color: #f8f9fa !important;
            background-color: rgba(255, 255, 255, 0.15);
        }

        /* Efecto de borde inferior animado al hacer clic */
        .nav-link:active::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -2px;
            height: 2px;
            background-color: #f8f9fa; /* Color dorado para el efecto */
            transform: scaleX(1);
            transition: transform 0.3s ease-in-out;
        }

        /* Efecto inicial */
        .navbar-nav .nav-link::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -2px;
            height: 2px;
            background-color: #f8f9fa;
            transform: scaleX(0);
            transition: transform 0.3s ease-in-out;
        }
		
		.espaciobarra{
			
			
			margin-right: 60px;
		}

        /* Efecto cuando se selecciona */
        .navbar-nav .nav-link:focus::after,
        .navbar-nav .nav-link:hover::after {
            transform: scaleX(1);
        }
         


        
/* CSS DE AMBIENTECALIDO */		
		.recuadro {
            border: 2px solid  #f9f9f9;
            padding: 20px;
            max-width: 800px;
            margin: 20px auto;
            background-color: #f9f9f9;
            font-family: Arial, sans-serif;
        }
        .recuadro h2 {
            color: #2B6CA3;
        }
        .recuadro ul {
            list-style-type: none;
            padding: 0;
        }
        .recuadro ul li {
            margin: 10px 0;
        }
        .recuadro .protocolos {
            margin-top: 20px;
            padding: 10px;
            background-color: #e0f7fa;
            border-left: 5px solid #2B6CA3;
        }

/* CSS DE TEXTO FINAL */	

        .textfin h2 {
            color: #2B6CA3;
        }
        .textfin ul {
            list-style-type: none;
            padding: 0;
        }
        .textfin ul li {
            margin: 10px 0;
        }


/* CSS DE NOS.PHP */
        .imgnos {
           width: 100%; /* Ajusta el tamaño según tus necesidades */
           height: auto; /* Mantiene la proporción de la imagen */
           filter: grayscale(100%); /* Aplica el efecto blanco y negro */
			
}

		.contnos {
            border: 2px solid #f9f9f9;
            padding: 20px;
            max-width: 900px;
            margin: 20px auto;
            background-color: #f9f9f9;
            font-family: Arial, sans-serif;
        }
        .contnos h2 {
            color: #2B6CA3;
        }
        .contnos ul {
            list-style-type: none;
            padding: 0;
        }
        .contnos ul li {
            margin: 10px 0;
        }




/* CSS DE SERVICIOS.PHP */

        .imgserv {
           width: 100%; /* Ajusta el tamaño según tus necesidades */
           height: auto; /* Mantiene la proporción de la imagen */
           filter: grayscale(100%); /* Aplica el efecto blanco y negro */
			
}

		.contserv {
            border: 2px solid #f9f9f9;
            padding: 20px;
            max-width: 900px;
            margin: 20px auto;
            background-color: #f9f9f9;
            font-family: Arial, sans-serif;
        }
        .contserv h2 {
            color: #2B6CA3;
        }
  

/* CSS DE INSTALACIONES.PHP */

        .imginst {
           width: 100%; /* Ajusta el tamaño según tus necesidades */
           height: auto; /* Mantiene la proporción de la imagen */
           
			
}

		.continst {
            border: 2px solid #f9f9f9;
            padding: 20px;
            max-width: 900px;
            margin: 20px auto;
            background-color: #f9f9f9;
            font-family: Arial, sans-serif;
        }
        .continst h2 {
            color: #2B6CA3;
        }
        .continst ul {
            list-style-type: none;
            padding: 0;
        }
        .continst ul li {
            margin: 10px 0;
        }

 
/* CSS DE FOOTER */

          body {
             font-family: Arial, sans-serif;
}

         .footer {
            background-color: #2B6CA3;
            color: white;
            padding: 20px 0;
            text-align: center;
}

        .icon-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px; /* Espacio entre los ítems */
    flex-wrap: wrap;
    color: white;
			
}

         .footer-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

        .footer-item img {
    margin-right: 0px;
}

        .footer-item a {
    color: white;
    text-decoration: underline;
}

/* Estilos para pantallas pequeñas */
     @media (max-width: 768px) {
         .icon-text {
            flex-direction: column;
            gap: 10px;
    }
}
		

/* CSS DE CONTACTO.PHP */


         body {
             font-family: Arial, sans-serif;
}

          .contact-container {
            display: flex;
            justify-content: space-between;
            max-width: 800px;
            margin: auto;
            padding: 20px;
}

          .contact-form {
            flex: 1;
            margin-right: 20px;
}

          .contact-form h2 {
            color: #2B6CA3;
}

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

      .contact-form input, 
      .contact-form textarea {
             margin-bottom: 10px;
             padding: 10px;
             font-size: 16px;
             border: 1px solid #ccc;
             border-radius: 4px;
}

       .contact-form input[type="submit"] {
             background-color: #2B6CA3;
             color: white;
             border: none;
             cursor: pointer;
             transition: background-color 0.3s ease;
}

         .contact-form input[type="submit"]:hover {
             background-color: #2B6CA3;
}

         .contact-info {
             flex: 1;
			 margin-top: 90px;
			 margin-left: 10px;
}

        .contact-info h2 {
             color: #2B6CA3;
}

        .map-container {
             margin: 20px auto;
             max-width: 800px;
}

         iframe {
             width: 100%;
             height: 400px;
             border: 0;
}