@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Poppins:wght@400;600;900&display=swap");
.home{
    background: url(../img/home/banner_doctor_corazon.webp) no-repeat;
    background-size: contain;
    background-position: center;
}
.home .content{
    width: 50rem;
}
.home .content h3{
    font-size: 5rem;
    text-transform: uppercase;
    color: var(--black);
}
.home .content p{
    line-height: 2;
    font-size: 1.5rem;
    color: var(--light-color);
    padding: 1rem 0;
}
.home.active {
  background-color: var(--white);
  box-shadow: var(--box-shadow);
  border: 0;
}
.contenido_responsive_home{
    display: grid;
    grid-template-columns: 0 1fr 2fr;
}

/* services */

.heading{
    text-align: center;
    font-size: 4rem;
    color: var(--black);
    text-transform: uppercase;
    font-weight: bolder;
    margin-bottom: 3rem;
}
.services{
    background-color: var(--light-bg);
    padding-bottom: 150px;
}
.services .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem,1fr));
    gap: 2rem;
}
.services .box-container .box{
    text-align: center;
    padding: 2rem;
    background-color: var(--white);
    box-shadow: var(--box-shadow);
}
.services .box-container .box img{
    margin: 1rem 0;
    height: 9rem;
}
.services .box-container .box h3{
    font-size: 2rem;
    padding: 1rem 0;
    color: var(--black);
}
.services .box-container .box p{
    font-size: 1.5rem;
    color: var(--light-color);
    line-height: 2;
}
.services .container p{
    text-align: justify;
}
@media (max-width:450px) {
    .heading{
        font-size: 3rem;
    }
    .services .container p{
        text-align: justify;
    }
}

/* about */

.about .content span{
    font-size: 2rem;
    color: var(--blue);
}
.about .content h3{
    font-size: 3rem;
    color: var(--black);
    margin-top: 1rem;
}
.about .content p{
    padding: 1rem 0;
    font-size: 1.5rem;
    color: var(--light-color);
    line-height: 2;
}

@media (max-width:768px) {
    .home{
        background: none;
    }
    .doctor_responsive{
        height: 310px;
        width: 100%;
        margin-top: 40px;
        background: url(../img/home/doctor_heart.webp) no-repeat;
        background-size: contain;
        background-position: top;
    }
    .contenido_responsive_home{
      display: block;
      justify-content: center;
      align-items: center;
      min-height: calc(100vh - 10px);
    }
    .home .content h3{
      font-size: 2rem;
      text-transform: uppercase;
      font-weight: bold;
      color: var(--black);
    }
    .home .content{
        width: 100%;
        text-align: justify;
    }
    .image{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .banner_sobre{
        width: auto !important;
        height: 250px;
    }
    .about .content p{
        text-align: justify;
        margin: 0;
        padding: 0;
    }
    .services .container p{
        font-size: 12px !important;
    }
}