@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cantarell:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url(./common.css);

.main-content {
    width: 100%;
    font-family: "Cantarell", sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    font-style: normal;
}

.derma-care {
    width: 100%;
    border: 1px solid gray;
    border-radius: 10px;
    background-image: linear-gradient(to right, #FFF, #C5DBAB);
    margin-bottom: 10px;
    padding-bottom: 10px;

    > h2 {
        text-align: center;
        padding-bottom: 10px;
    }
}

.derma-content {
    display: flex;
    justify-content: center;
}

.derma-pics {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 30%;
    padding-left: 20px;

    img {
        border-radius: 10px;
    }
}

.derma-text {
    width: 70%;
    font-size: large;

    h3 {
        padding-bottom: 10px;
    }

    ul {
        padding-left: 20px;
    }
}

.dental-care {
    width: 100%;
    border: 1px solid gray;
    border-radius: 10px;
    background-image: linear-gradient(to left, #FFF, #C5DBAB);
    margin-bottom: 10px;

    > h2 {
        text-align: center;
        padding-bottom: 10px;
    }
}

.veneer-content {
    width: 100%;
    display: flex;
    background-color: azure;
    padding: 10px;
}

.veneer-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: large;
    padding: 0 20px 0 20px;

    ul {
        padding-left: 20px;
    }

    span {
        font-weight: bold;
    }
}

.veneer-pics {
    display: flex;
    flex-direction: column;
    gap: 10px;

    img {
        border-radius: 10px;
    }
}

.zirconia-content h3 {
    text-align: center;
}

.zirconia {
    display: flex;
    background-color: ghostwhite;
    border: 1px solid #5F7368;
    padding: 10px;
}

.zirconia-pics {
    display: flex;
    flex-direction: column;
    gap: 10px;

    img {
        border-radius: 10px;
    }
}

.zirconia-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: large;
    padding: 0 20px 0 20px;

    ul {
        padding-left: 20px;
    }

    span {
        font-weight: bold;
    }
}

.maryland-content {
    display: flex;
    background-color: azure;
    padding: 10px;
}

.maryland-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: large;
    padding: 0 20px 10px 20px;

    ul {
        padding-left: 20px;
    }

    span {
        font-weight: bold;
    }
}

.footer {
    background-color: #333;
    color: #FFF;
    text-align: center;
    padding: 15px 0;
}

@media (max-width: 767px) {
    .banner {
        width: 100%;
        height: auto;
        aspect-ratio: 9 / 16;
        border: 2px solid blue;
        background-image: url("../images/derma/banner_mobile.jpg");
        background-size: 100% auto;
        background-position: top;
        background-repeat: no-repeat;
    }

    .services {
        flex-direction: column;
    }

    .derma-content {
        flex-direction: column;
        align-items: center;
    }

    .derma-pics {
        align-items: center;
        padding-left: 0;
    }

    .veneer-content {
        flex-direction: column;
    }

    .veneer-text {
        padding-bottom: 10px;
    }

    .veneer-pics {
        flex-direction: row;
        justify-content: center;

        img {
            width: 300px;
            height: auto;
        }
    }

    .zirconia {
        flex-direction: column;
    }

    .zirconia-pics {
        align-items: center;
    }

    .maryland-content {
        flex-direction: column;
        align-items: center;
    }

    .maryland-videos {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
}