@import url('fonts/intelo/stylesheet.css');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css");

:root {
    --primary-color: #426879;
    --secondary-color: #e2f1f8;
    --grey-color: #efefef;
    --brown-color: #a68962;
}

* {
    font-family: 'Intelo', sans-serif;
}

.color-white {
    color: #fff;
}

.primary-color {
    color: var(--primary-color);
}

.brown-color {
    color: var(--brown-color) !important;
}

.secondary-color {
    color: var(--secondary-color);
}

.bg-primary-color {
    background-color: var(--primary-color);
}

.bg-secondary-color {
    background-color: var(--secondary-color);
}

.bg-grey-color {
    background-color: var(--grey-color);
}

.btn-primary {
    background-color: var(--brown-color);
    border: none;
    color: #fff !important;
}

#header {
    padding: 16px 0;
    border-bottom: #efefef solid 1px;
}

#header ul {
    padding: 0;
    margin: 0;
}

#header li {
    list-style: none;
    text-transform: uppercase;
    margin-left: 16px;
}

#header a {
    color: var(--primary-color);
    font-weight: bold;
    text-decoration: none;
}

#banner {
    padding-top: 60px;
    padding-bottom: 60px;
    min-height: 600px;
    background-size: cover;
    background-repeat: no-repeat;
}

#banner h1 {
    font-size: 60px;
    line-height: 100%;
    font-weight: lighter;
}

#about, #mission, #visions, #values, #vision {
    padding-top: 60px;
}

#about h2, #specialties h2, #doctors h2, #testimonials h2, #plans h2, #contact h2, #mission h2, #visions h2, #values h2, #vision h2 {
    font-weight: 100;
    font-size: 48px;
}

#about p, #mission p, #vision p {
    font-weight: 300;
}

.value {
    border: var(--primary-color) solid 1px;
    border-radius: 16px;
    padding: 32px 16px;
    color: var(--primary-color);
    height: 100%;
}

#specialties, #doctors {
    padding: 60px 0;
}

.specialty {
    position: relative;
    margin-top: 32px;
}

.specialty img {
    display: block;
    width: 100%;
    border-radius: 16px;
}

.specialty b {
    position: absolute;
    left: 28px;
    bottom: 16px;
    color: #fff;
    font-size: 24px;
}

.doctor {
    margin-top: 32px;
    cursor: pointer;
}

.doctor p {
    font-size: 24px;
    color: #fff;
    line-height: 120%;
}

#testimonials {
    padding: 60px 0;
}

.testimonial {
    background-color: #fff;
    border-radius: 32px;
    padding: 16px;
    box-shadow: rgba(0,0,0,.1) 0px 0px 16px;
    margin-top: 32px;
}

#plans {
    padding: 60px 0;
}

#contact {
    padding-top: 60px;
    border-bottom: var(--primary-color) solid 16px;
}

@media (max-width: 991px) {
    #banner h1 {
        font-size: 48px;
    }
}

@media (max-width: 767px) {
    .container {
        padding-left: 32px;
        padding-right: 32px;
    }
    #banner, #about, #mission, #visions, #values, #vision {
        padding: 32px 0;
    }
    #banner h1 {
        font-size: 40px;
    }
    #banner {
        min-height: 300px;
    }
    #about h2, #specialties h2, #doctors h2, #testimonials h2, #plans h2, #contact h2, #mission h2, #visions h2, #values h2, #vision h2 {
        font-size: 24px;
    }
    #specialties, #doctors, #testimonials, #plans {
        padding: 32px 0;
    }
}