.product .turno a, .work a {
  border: 1px solid white;
  background-color: white;
  text-decoration: none;
  color: #500d76;
  padding: 8px;
  margin: 20px;
  text-align: center;
  border-radius: 20px; }

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

@font-face {
  font-family: acworth-bold;
  src: url(../fonts/acworth-bold.ttf); }

main {
  margin: 0;
  padding: 0;
  min-height: 100vh; }

body {
  background-image: url(../img/fondo-uno.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  font-family: acworth-bold; }

header a img {
  height: 30px;
  width: 98,7px;
  margin: 10px; }

.active {
  background-color: #500d76 !important; }

.nav-link {
  color: #500d76; }
  .nav-link:hover {
    color: #7d13ba; }

header {
  position: sticky;
  top: 0;
  z-index: 10; }

.botones {
  display: flex;
  justify-content: space-around; }
  .botones a {
    text-decoration: none;
    color: #500d76;
    background-color: white;
    font-size: large;
    border: 2px inset white;
    margin-top: 15px;
    padding: 4px;
    text-align: center;
    text-transform: uppercase;
    border-radius: 20px; }
    .botones a:hover {
      background-color: #500d76;
      color: white; }

.aboutUs h2 {
  color: white;
  text-align: center; }

.aboutUs p {
  color: white;
  text-align: center; }

.product h2 {
  color: white;
  text-align: center; }

.product .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; }
  .product .grid-container .especialidad {
    text-align: center;
    color: white;
    border: 2px white solid;
    margin: 15px; }
    .product .grid-container .especialidad img {
      width: 100%;
      padding: 10px;
      border-radius: 8px; }
    .product .grid-container .especialidad h3 {
      margin-top: 10px;
      margin-bottom: 5px; }
    .product .grid-container .especialidad a {
      display: block;
      background-color: white;
      text-decoration: none;
      color: #500d76;
      padding: 8px;
      margin: 20px;
      text-align: center;
      border: 1px solid white;
      border-radius: 20px; }
      .product .grid-container .especialidad a:hover {
        background-color: #500d76;
        color: white; }

.product .turno {
  display: flex;
  justify-content: center; }
  .product .turno a:hover {
    background-color: #500d76;
    color: white; }

.work {
  text-align: center;
  margin: 10px;
  padding: 7px; }
  .work h2 {
    color: white;
    margin: 5px; }
  .work p {
    color: white;
    margin: 10px; }
  .work a:hover {
    background-color: #500d76;
    color: white; }

.contact {
  text-align: center;
  margin: 15px;
  padding: 5px; }
  .contact h2 {
    color: white;
    margin: 10px; }
  .contact a {
    border: 1px solid white;
    background-color: white;
    text-decoration: none;
    color: #500d76;
    text-align: center;
    font-weight: 300;
    margin: 30px;
    padding: 7px;
    border-radius: 20px; }
    .contact a:hover {
      background-color: #500d76;
      color: white; }

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  form label {
    color: white;
    font-size: larger; }
  form input {
    margin-bottom: 10px; }
  form textarea {
    margin-bottom: 10px;
    height: 325px; }

.mision h1 {
  text-align: center;
  color: white;
  margin-top: 15px; }

.mision p {
  text-align: center;
  color: white;
  margin: 10px; }

.vision h2 {
  text-align: center;
  color: white;
  margin: 10px; }

.vision p {
  text-align: center;
  color: white;
  margin: 10px; }

.valor h2 {
  text-align: center;
  color: white;
  margin: 10px; }

.valor div h3 {
  text-align: center;
  color: white;
  margin: 10px;
  text-decoration: underline; }

.valor div p {
  text-align: center;
  color: white;
  margin: 10px; }

.nosotros h2 {
  text-align: center;
  color: white;
  margin: 10px; }

.nosotros p {
  text-align: center;
  color: white;
  margin: 10px; }

.medicos h2 {
  color: white;
  text-align: center;
  text-decoration: underline;
  font-size: x-large; }

.medicos .grid-medicos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; }
  .medicos .grid-medicos .especialidad-profesionales {
    border: 2px solid white;
    color: white;
    text-align: center;
    padding: 10px;
    margin: 10px;
    width: 300px; }
    .medicos .grid-medicos .especialidad-profesionales img {
      width: 80%;
      height: 70%; }
    .medicos .grid-medicos .especialidad-profesionales h3 {
      margin-bottom: 10px;
      font-size: large; }
    .medicos .grid-medicos .especialidad-profesionales a {
      text-decoration: none;
      color: #500d76;
      background-color: white;
      border: 1px solid white;
      padding: 7px;
      border-radius: 20px; }
      .medicos .grid-medicos .especialidad-profesionales a:hover {
        background-color: #500d76;
        color: white; }

.mb-3 .form-label {
  color: white; }

.mb-3 .col-auto {
  background-color: white; }

footer {
  background-image: url(../img/fondo-2.jpg);
  display: flex;
  justify-content: space-between; }
  footer p {
    color: #500d76;
    font-size: large;
    font-weight: bold;
    margin-top: 17px; }
  footer img {
    height: 30px;
    width: 30px;
    margin: 10px; }

@media screen and (max-width: 1037px) {
  .product .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    grid-auto-rows: minmax(75px, auto);
    align-items: center;
    justify-content: center; } }

@media screen and (max-width: 450px) {
  footer img {
    height: 20px;
    width: 20px; }
  footer p {
    font-size: medium; } }

@media screen and (max-width: 380px) {
  footer img {
    height: 15px;
    width: 15px; }
  footer p {
    font-size: small; } }