@font-face {
  font-family: "Brintanica-Black";
  src: url(./fonts/BritanicaBlack.ttf);
}
@font-face {
  font-family: "Britanica-Black-Italic";
  src: url(./fonts/BritanicaBlackItalic.ttf);
}

@font-face {
  font-family: "Brintanica-Bold";
  src: url(./fonts/BritanicaBold.ttf);
}

@font-face {
  font-family: "Brintanica-Regular";
  src: url(./fonts/BritanicaRegular.ttf);
}

@font-face {
  font-family: "Brintanica-Expanded-Bold";
  src: url(./fonts/BritanicaExpandedBold.ttf);
}

@font-face {
  font-family: "Brintanica-Expanded-Heavy";
  src: url(./fonts/BritanicaExpandedHeavy.ttf);
}

@font-face {
  font-family: "Brintanica-Heavy";
  src: url(./fonts/BritanicaHeavy.ttf);
}

@font-face {
  font-family: "Brintanica-Light";
  src: url(./fonts/BritanicaLight.ttf);
}

.peso-light-b {
  font-family: "Brintanica-Light";
}

.peso-heavy {
  font-family: "Brintanica-Heavy";
}

.peso-bold {
  font-family: "Britanica-Bold";
}

.peso-light {
  font-family: "Britanica-Black-Italic";
}

.fs-15 {
  font-size: 16px !important;
}

.fs-18 {
  font-size: 18px !important;
}

.fs-19 {
  font-size: 19px !important;
}

.fs-20 {
  font-size: 20px !important;
}

.fs-23 {
  font-size: 19px !important;
}

.fs-23-a-15 {
  font-size: 19px !important;
}

@media screen and (max-width: 800px) {
  .fs-23-a-15 {
    font-size: 15px !important;
  }
}

.fs-25 {
  font-size: 25px !important;
}

.fs-22-a-18 {
  font-size: 22px !important;
}

@media screen and (max-width: 800px) {
  .fs-22-a-18 {
    font-size: 18px !important;
  }
}

.fs-30 {
  font-size: 30px !important;
}

.fs-40 {
  font-size: 40px !important;
}

.fs-40-a-20 {
  font-size: 40px !important;
}

@media screen and (max-width: 800px) {
  .fs-40-a-20 {
    font-size: 20px !important;
  }
}

.fs-50 {
  font-size: 50px !important;
}

.fs-60 {
  font-size: 60px !important;
}

body {
  margin: 0;
  padding: 0;
}

.nav-link {
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: var(--bs-nav-link-font-size);
  font-weight: var(--bs-nav-link-font-weight);
  color: #322783 !important;
  text-decoration: none;
  background: 0 0;
  border: 0;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out;
}

.color-morado {
  color: #322783 !important;
}

.nav-items:after {
  display: flex;
  position: static;
  width: 100%;
  height: 4px;
  background-color: #059be5 !important;
  color: #059be5;
  content: "";
  opacity: 0;
  transition:
    opacity 0.3s ease 0s,
    transform 0.3s ease 0s;
  transform: translateY(10px);
}
.nav-items:hover:after {
  opacity: 1;
  transform: translateY(5px);
}

.centrado {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
}

@media screen and (max-width: 600px) {
  .centrado {
    display: flex !important;
    justify-content: start !important;
    height: 100% !important;
  }
}

.centrado-form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70vh;
}

.centrado-redes {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70vh;
}

.bg-inicio {
  background-image: url(./img/fondos_01.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-quienes-somos {
  background-image: url(./img/fondos_03.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-nav {
  background-image: url(./img/linea.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 600px;
}

.bg-nefrologico {
  background-image: url(./img/fondos_04.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.logo-nav {
  width: 150px !important;
}

@media screen and (max-width: 1200px) {
  .bg-nav {
    background-image: url(./img/linea.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100% !important;
  }
  .logo {
    width: 150px;
    margin-left: 1rem;
  }

  .logo-nav {
    width: 300px;
  }
  .bg-nav {
    background-image: url(./img/bg-white.jpg);
  }
  .mt-responsive {
    margin-top: 75px !important;
  }
}

@media screen and (max-width: 1100px) {
  .bg-nav {
    background-image: url(./img/linea.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100% !important;
  }

  .centrado {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .logo {
    width: 250px;
    margin-left: 1rem;
  }
  .bg-nav {
    background-image: url(./img/bg-white.jpg);
  }
  .mt-responsive {
    margin-top: 75px !important;
  }
  .agregar-bg-dark-responsive {
    background-color: #212529 !important;
  }
}

@media screen and (max-width: 800px) {
  .logo {
    width: 150px;
  }

  .bg-nav {
    background-image: url(./img/bg-white.jpg);
  }
  .margen-padding-nav {
    margin-right: 0rem !important;
    padding-left: 0rem !important;
    padding-right: 0rem !important;
  }
  .mt-responsive {
    margin-top: 10px !important;
  }
  .agregar-bg-dark-responsive {
    background-color: #212529 !important;
  }
}

@media screen and (max-width: 575px) {
  .logo {
    width: 150px;
  }

  .btn-derecha {
    width: 50px;
  }

  .padding-xy {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .agregar-bg-dark-responsive {
    background-color: #212529 !important;
  }
}

.logo-inicio {
  width: 100px;
}

.logo-inicio {
  width: 50px;
}

.margin-header {
  margin-top: -120px !important;
}

@media screen and (max-width: 1100px) {
  .margin-header {
    margin-top: 10px !important;
  }
}

.margin-e-responsive {
  margin-right: 2rem;
}

@media screen and (max-width: 500px) {
  .margin-e-responsive {
    margin-right: 1rem;
  }
}

.banner-panoramico {
  width: 100%;
  height: 900px; /* Ajusta la altura según tus necesidades */
  overflow: hidden; /* Evita que el contenido desborde si es más alto que la altura especificada */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

@media screen and (max-width: 1100px) {
  .banner-panoramico {
    width: 100%;
    height: 100%; /* Ajusta la altura según tus necesidades */
    overflow: hidden; /* Evita que el contenido desborde si es más alto que la altura especificada */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
  }
}

/* Establece la imagen del banner como de ancho completo y altura automática */
.banner-panoramico img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  opacity: 1;
}

.btn-enviar {
  width: 250px !important;
  background-color: #322783 !important;
  color: white !important;
}

.hover-effect:hover {
  color: black !important; /* Cambia el color al que prefieras en hover */
  /* Puedes agregar más propiedades CSS para personalizar el efecto */
}