@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600');


/*=========================================
   TABLE OF CONTENTS
   1.  Root variables (colors, spacing, font)
   2.  Typography
   3.  General / utility classes
   4.  Unified section system (spacing + bg)
   5.  Preloader
   6.  Top header bar
   7.  Navbar
   8.  Home / hero slider
   9.  Legacy / unused styles (kept, unused)
   10. Team members (legacy card variant)
   11. Service (legacy icon-grid variant)
   12. Appointment form
   13. Footer
   14. Social icons
   15. Responsive breakpoints
   16. Heading underline
   17. Consultation hours
   18. Clinic ("About the practice")
   19. Services
   20. Team
   21. About the doctor / timeline
  ==========================================*/


/*=========================================
   1. ROOT VARIABLES
   Every color/spacing value that is reused
   more than once lives here. Change a value
   once and it updates everywhere it's used.
  ==========================================*/

:root {
    /* Brand */
    --color-primary: #864570;
    /* buttons, links, icons, headings */
    --color-primary-hover: #885176;
    /* hover state for primary elements */

    /* Neutrals */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-bg-light: #F9F9F9;
    /* the ONLY light-grey section background */

    /* Text colors */
    --color-heading-dark: #252525;
    /* h1 / links */
    --color-heading: #272727;
    /* h2 */
    --color-text-medium: #454545;
    /* h4 */
    --color-text-body: #757575;
    /* paragraph text, footer links */
    --color-text-muted: #858585;
    /* small/secondary text */
    --color-text-dark: #393939;
    /* navbar brand, dark buttons */
    --color-text-gray: #555555;
    /* nav links */
    --color-text-light-gray: #747474;
    /* top header bar text */
    --color-clinic-text: #4b5563;
    /* clinic intro paragraph */
    --color-timeline-text: #333333;

    /* Borders / dividers */
    --color-border-light: #f2f2f2;
    --color-border-lighter: #f0f0f0;
    --color-border-e9: #e9e9e9;
    --color-day-card-border: #e5e7eb;

    /* Component-specific accents */
    --color-notice-bg: #E9E1E6;
    --color-placeholder-bg: #d6d6d6;
    /* team image fallback before load */
    --color-day-hours-text: #9ca3af;
    --color-social-icon: #464646;
    --color-facebook: #4267b2;
    --color-service-text: #d9d9d9;
    --color-spinner-border: #575757;
    --color-timeline-line: #e0d3dc;
    --overlay-dark: rgba(20, 20, 20, 0.2);
    --shadow-navbar: 0 2px 8px rgba(0, 0, 0, .075);
    --shadow-day-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);

    /* Typography */
    --font-primary: 'Poppins', sans-serif;

    /* Section spacing (see .site-section, section 4 below) */
    --section-padding-desktop: 100px;
    --section-padding-tablet: 60px;
    --section-padding-mobile: 50px;
}


body {
    background: var(--color-white);
    font-family: var(--font-primary);
    overflow-x: hidden;
}



/*=========================================
   2. TYPOGRAPHY
  ==========================================*/


h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    line-height: inherit;
}


h1,
h2,
h3,
h4 {
    letter-spacing: -1px;
}


h5 {
    font-weight: 500;
}


h1 {
    color: var(--color-heading-dark);
    font-size: 5em;
}


h2 {
    color: var(--color-heading);
    font-size: 3em;
    padding-bottom: 10px;
}


h3 {
    font-size: 1.8em;
    line-height: 1.2em;
    margin-bottom: 0;
}


h4 {
    color: var(--color-text-medium);
    font-size: 1.8em;
    padding-bottom: 2px;
}


h6 {
    letter-spacing: 0;
    font-weight: normal;
}


p {
    color: var(--color-text-body);
    font-size: 14px;
    font-weight: normal;
    line-height: 24px;
}



/*=========================================
   3. GENERAL / UTILITY CLASSES
  ==========================================*/


html {
    -webkit-font-smoothing: antialiased;
}


a {
    color: var(--color-heading-dark);
    -webkit-transition: 0.5s;
    transition: 0.5s;
    text-decoration: none !important;
}


a:hover,
a:active,
a:focus {
    color: var(--color-primary);
    outline: none;
}


::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}


::-webkit-scrollbar-thumb {
    cursor: pointer;
    background: var(--color-black);
}


section {
    /* background-color: var(--color-bg-light); */
}


/* Shared heading wrapper used at the top of every section (see .site-section below) */
.section-title {
    padding-bottom: 20px;
}


.section-title h2 {
    margin-top: 0;
}


.section-btn {
    background: var(--color-primary);
    border: 0;
    border-radius: 3px;
    color: var(--color-white);
    font-size: inherit;
    font-weight: 500;
    padding: 14px 20px;
    transition: transform 0.1s ease-in;
    transform: translateX(0);
}


.section-btn:hover {
    /* transform: translateY(-5px); */
}


.text-align-right {
    text-align: right;
}


.text-align-center {
    text-align: center;
}


.border-top {
    border-top: 1px solid var(--color-border-light);
    margin-top: 4em;
    padding-top: 2.5em;
}


.btn-gray {
    background: var(--color-text-dark);
}


.btn-blue {
    background: var(--color-facebook);
}


.news-thumb {
    background: var(--color-white);
    border-radius: 10px;
}


.news-thumb img {
    border-radius: 10px 10px 0 0;
}


.news-info {
    padding: 30px;
    text-align: left;
}


.news-info span {
    display: block;
    letter-spacing: 0.5px;
}


.news-info h3 {
    margin-top: 10px;
    margin-bottom: 10px;
}


.author {
    border-top: 1px solid var(--color-border-lighter);
    padding-top: 1.5em;
    margin-top: 2em;
}


.author img,
.author .author-info {
    display: inline-block;
    vertical-align: top;
}


.author-info h5 {
    margin-bottom: 0;
}


.author img {
    border-radius: 100%;
    width: 50px;
    height: 50px;
    margin-right: 10px;
}


/*=========================================
   4. UNIFIED SECTION SYSTEM
   Two rules that every main content section
   (#clinic, #hours, #services, #team, #about,
   #appointment) shares, so spacing AND
   background color are never ad-hoc:

   1) .site-section  -> identical vertical
      padding at every breakpoint, driven by
      the --section-padding-* variables above.
   2) .bg-light / .bg-white -> the ONLY two
      background colors used, alternated
      section-by-section (grey/white/grey...)
      so the page reads as clean, deliberate
      stripes. Apply exactly one of these two
      classes to each section in the HTML.
  ==========================================*/


.site-section {
    position: relative;
    padding-top: var(--section-padding-desktop);
    padding-bottom: var(--section-padding-desktop);
}


@media only screen and (max-width: 768px) {
    .site-section {
        padding-top: var(--section-padding-tablet);
        padding-bottom: var(--section-padding-tablet);
    }
}


@media only screen and (max-width: 600px) {
    .site-section {
        padding-top: var(--section-padding-mobile);
        padding-bottom: var(--section-padding-mobile);
    }
}


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


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



/*=========================================
   5. PRE LOADER
  ==========================================*/


.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background: none repeat scroll 0 0 var(--color-white);
}


.spinner {
    border: 1px solid transparent;
    border-radius: 3px;
    position: relative;
}


.spinner:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 45px;
    height: 45px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border: 1px solid var(--color-spinner-border);
    border-top-color: var(--color-white);
    animation: spinner .9s linear infinite;
}


@-webkit-@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}


@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}




/*=========================================
   6. TOP HEADER BAR
  ==========================================*/


header {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    height: 45px;
}


header .col-md-8 {
    padding-right: 0;
}


header p,
header span {
    font-size: 12px;
    line-height: 24px;
    padding-top: 12px;
}


header a,
header span {
    color: var(--color-text-light-gray);
}


header span {
    font-weight: 500;
    display: inline-block;
    padding: 11px 15px;
}


header span.date-icon {
    border-left: 1px solid var(--color-border-light);
    border-right: 1px solid var(--color-border-light);
    padding-right: 19px;
    padding-left: 19px;
}


header span i {
    color: var(--color-primary);
    margin-right: 5px;
}




/*=========================================
   7. NAVBAR
  ==========================================*/


.navbar-default {
    background: var(--color-white);
    box-shadow: var(--shadow-navbar);
    border: none;
    margin-bottom: 0;
    padding: 10px;
}


.navbar-default .navbar-brand {
    color: var(--color-text-dark);
    font-weight: 500;
    padding: 0;
}


.navbar-default .navbar-brand .fa {
    color: var(--color-primary);
}


.navbar-default .navbar-nav li.appointment-btn {
    margin: 3px 0 0 20px;
}


.navbar-default .navbar-nav li.appointment-btn a {
    background: var(--color-primary);
    border-radius: 3px;
    color: var(--color-white);
    font-weight: 600;
    padding-top: 12px;
    padding-bottom: 12px;
    border: 1px solid transparent;
}


.navbar-default .navbar-nav li.appointment-btn a:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-white) !important;
}


.navbar-default .navbar-nav li a {
    color: var(--color-text-gray);
    font-size: 14px;
    font-weight: 500;
    padding-right: 20px;
    padding-left: 20px;
    -webkit-transition: all ease-in-out 0.4s;
    transition: all ease-in-out 0.4s;
}


.navbar-default .navbar-nav>li a:hover {
    color: var(--color-primary) !important;
}


.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
    color: var(--color-text-gray);
    background-color: transparent;
}


.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
    color: var(--color-text-dark);
    background-color: transparent;
}


.navbar-default .navbar-toggle {
    border: none;
    padding-top: 10px;
}


.navbar-default .navbar-toggle .icon-bar {
    background: var(--color-text-dark);
    border-color: transparent;
}


.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: transparent;
}


/* Base default state: only the full-size logo shows */
.navbar-brand.logo-sticky {
    display: none;
}


.navbar-brand.logo-default {
    display: inline-block;
}


/* Swap logos once the navbar becomes "sticky" on scroll */
.is-sticky .navbar-brand.logo-default {
    display: none;
}


.is-sticky .navbar-brand.logo-sticky {
    display: inline-block;
}


/* Swap on screens smaller than 758px, regardless of sticky state */
@media (max-width: 767px) {
    .navbar-brand.logo-default {
        display: none;
    }


    .navbar-brand.logo-sticky {
        display: inline-block;
        width: 175px;
    }
}


/*=========================================
   8. HOME / HERO SLIDER
   (kept outside the .site-section /
   background-rhythm system on purpose)
  ==========================================*/


#home h1 {
    color: var(--color-white);
    padding-bottom: 10px;
    margin-top: 0;
}


#home h3 {
    color: var(--color-white);
    font-size: 14px;
    font-weight: normal;
    line-height: inherit;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0;
}


.slider .container {
    width: 100%;
}


.slider .caption {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    background-color: var(--overlay-dark);
    height: 100%;
    color: var(--color-white);
    cursor: e-resize;
}


.slider .item {
    background-position: inherit;
    background-repeat: no-repeat;
    background-attachment: local;
    background-size: cover;
    height: 650px;
}


.slider .item-first {
    background-image: url(../images/slider1.jpg);
}


.slider .item-second {
    background-image: url(../images/slider2.jpg);
}


.slider .item-third {
    background-image: url(../images/slider3.jpg);
}



/*=========================================
   9. LEGACY / UNUSED PROFILE STYLES
   (no matching markup in index.html —
   left in place in case a future
   "profile" block reuses them)
  ==========================================*/


.profile img,
.profile figcaption {
    display: inline-block;
    vertical-align: top;
    margin-top: 1em;
}


.profile img {
    border-radius: 100%;
    width: 65px;
    height: 65px;
    margin-right: 1em;
}


.profile figcaption h3 {
    margin-top: 0;
}


#about h6 {
    color: var(--color-text-muted);
    margin: 0;
}




/*=========================================
   10. TEAM MEMBERS
   (legacy thumb/card variant — not used by
   the current Team section markup, kept
   for reuse)
  ==========================================*/


.team-thumb {
    background-color: var(--color-bg-light);
    border-radius: 0 0 10px 10px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}


.team-info {
    padding: 20px 30px 0 30px;
}


.team-contact-info {
    border-top: 1px solid var(--color-border-e9);
    padding-top: 1.2em;
    margin-top: 1.5em;
}


.team-contact-info .fa {
    margin-right: 5px;
    display: inline-block;
}


.team-contact-info p {
    margin-bottom: 2px;
}


.team-contact-info a {
    color: var(--color-text-body);
}


.team-thumb .social-icon li {
    font-weight: 500;
}


.team-thumb .social-icon li a {
    background: var(--color-white);
    border-radius: 100%;
    font-size: 20px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin: 0 2px 0 2px;
}


.team-thumb .social-icon {
    opacity: 0;
    transform: translateY(100%);
    transition: 0.5s 0.2s;
    text-align: center;
    position: relative;
    top: 0;
}


.team-thumb:hover .social-icon {
    opacity: 1;
    transition-delay: 0.3s;
    transform: translateY(0px);
    top: -22em;
}




/*=========================================
   11. SERVICE
   (legacy icon-grid variant — not used by
   the current markup, kept for reuse)
  ==========================================*/


#service {
    background: var(--color-primary);
}


#service h2,
#service h4 {
    color: var(--color-white);
}


#service p {
    color: var(--color-service-text);
}


#service .service-thumb {
    padding: 0 22px;
}


#service .fa {
    font-size: 50px;
    margin-bottom: 10px;
    background: var(--color-white);
    color: var(--color-primary);
    width: 120px;
    height: 120px;
    line-height: 120px;
    border-radius: 100%;
}


/*=========================================
   12. APPOINTMENT FORM
   (background/spacing come from
   .site-section + .bg-white in the HTML)
  ==========================================*/


#appointment .appointment__heading {
    color: var(--color-primary);
    display: grid;
    place-items: center;
}


#appointment label {
    font-weight: 500;
}


#appointment .form-control {
    background: var(--color-bg-light);
    border: none;
    border-radius: 3px;
    box-shadow: none;
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 15px;
    transition: all ease-in-out 0.4s;
}


#appointment input,
#appointment select {
    height: 45px;
}


#appointment button#cf-submit {
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
    height: 55px;
}


#appointment button#cf-submit:hover {
    background: var(--color-primary-hover);
    color: var(--color-white);
}



/*=========================================
   13. FOOTER
   Keeps its own permanent light-grey
   background (still the shared --color-bg-light
   variable) since it always needs to look
   "closed off" from the section above it.
  ==========================================*/


footer {
    padding-top: 80px;
    padding-bottom: 40px;
    background-color: var(--color-bg-light);
}


footer h4 {
    padding-bottom: 5px;
}


footer a {
    color: var(--color-text-body);
}


footer a:hover {
    color: var(--color-primary);
}


footer .footer-link {
    display: flex;
    justify-content: flex-end;
}

@media only screen and (max-width: 767px) {
    footer .footer-link {
    justify-content: center;
}
}


.contact-info {
    padding-top: 10px;
}


.contact-info .fa {
    background: var(--color-primary);
    border-radius: 100%;
    color: var(--color-white);
    font-size: 15px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    margin-right: 5px;
    margin-bottom: 2px;
}


.latest-stories {
    margin-bottom: 20px;
}


.stories-image,
.stories-info {
    display: inline-block;
    vertical-align: top;
}


.stories-image img {
    border-radius: 100%;
    width: 65px;
    height: 65px;
}


.stories-info {
    margin-left: 15px;
}


.stories-info h5 {
    margin-bottom: 2px;
}


.stories-info span {
    color: var(--color-text-muted);
    font-size: 12px;
}


.opening-hours p {
    line-height: 18px;
}


.opening-hours span {
    font-weight: 500;
    display: inline-block;
    padding-left: 10px;
}


.copyright-text p,
.footer-link a {
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 500;
}


.footer-link a {
    font-size: 12px;
    display: inline-block;
    padding: 0 10px;
    margin-top: 4px;
}


.angle-up-btn {
    position: relative;
    bottom: 4em;
    display: block;
}


.angle-up-btn a {
    background: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: 3px;
    font-size: 20px;
    color: var(--color-text-dark);
    display: inline-block;
    text-align: center;
    width: 40px;
    height: 40px;
    line-height: 38px;
    transition: transform 0.1s ease-in;
    transform: translateX(0);
    background: var(--color-white);
}


.angle-up-btn a:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-5px);
}



/*=========================================
   14. SOCIAL ICONS
  ==========================================*/


.social-icon {
    position: relative;
    padding: 0;
    margin: 0;
}


.social-icon li {
    display: inline-block;
    list-style: none;
}


.social-icon li a {
    border-radius: 100px;
    color: var(--color-social-icon);
    font-size: 15px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-decoration: none;
    text-align: center;
    transition: all 0.4s ease-in-out;
    position: relative;
}


.social-icon li a:hover {
    background: var(--color-primary);
    color: var(--color-white);
}



/*=========================================
   15. RESPONSIVE BREAKPOINTS
   (typography + layout only — section
   spacing/background responsiveness lives
   in .site-section, section 4 above)
  ==========================================*/


@media only screen and (max-width: 1200px) {
    h1 {
        font-size: 4em;
    }


    h2 {
        font-size: 2.5em;
    }


    h3 {
        font-size: 1.5em;
    }


    header {
        height: inherit;
    }


    header span.date-icon {
        border: 0;
        padding-right: 0;
        padding-left: 0;
    }


    header span.email-icon {
        padding-top: 0;
    }


    .navbar-default .navbar-nav li a {
        padding-right: 15px;
        padding-left: 15px;
    }
}


@media only screen and (max-width: 992px) {
    .slider .item {
        background-position: center;
    }


    header {
        padding-bottom: 10px;
    }


    header .text-align-right {
        text-align: left;
    }


    header span {
        padding-top: 0;
        padding-left: 0;
        padding-bottom: 0;
    }
}


@media only screen and (max-width: 767px) {


    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
        border-color: transparent;
    }


    .navbar-default .navbar-nav li.appointment-btn {
        margin-left: 15px;
    }


    .navbar-default .navbar-nav li a {
        display: inline-block;
        padding-top: 8px;
        padding-bottom: 8px;
    }


    .news-sidebar {
        margin-top: 2em;
    }


    #appointment-form {
        padding-top: 4em;
        padding-bottom: 4em;
    }


    footer {
        padding-top: 60px;
        padding-bottom: 0;
    }


    .footer-thumb {
        padding-bottom: 10px;
    }


    .border-top {
        text-align: center;
    }


    .copyright-text {
        margin-top: 10px;
    }


    .angle-up-btn {
        bottom: 10em;
    }
}


@media only screen and (max-width: 639px) {
    h1 {
        font-size: 3em;
        line-height: 1.2em;
    }


    h2 {
        font-size: 2.1em;
    }


    h4 {
        font-size: 1.4em;
    }


    #home h3 {
        font-size: 11px;
        letter-spacing: 1px;
    }


}


/*=========================================
   16. HEADING UNDERLINE
   Small colored bar centered under a heading.
   Pair with .heading-underline in the HTML.
  ==========================================*/


.heading-underline {
    position: relative;
    display: inline-block;
    padding-bottom: 20px;
}


.heading-underline::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: var(--color-primary);
    border-radius: 2px;
}



/*=========================================
   17. CONSULTATION HOURS
   (background comes from .bg-white on the
   <section> in HTML — see section 4 above)
  ==========================================*/


.consultation-hours-header {
    text-align: center;
    margin: 0 auto 40px auto;
}


.consultation-hours-header__title {
    color: var(--color-primary);
}


.consultation-hours-header__text {
    margin-top: 0;
    line-height: 1.5;
}


.day-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}


@media (max-width: 900px) {
    .day-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 560px) {
    .day-card-grid {
        grid-template-columns: 1fr;
    }
}


/* Each weekday card stays white with a border/shadow so it still reads
   clearly whether the section behind it is .bg-light or .bg-white */
.day-card {
    position: relative;
    display: block;
    width: 100%;
    background: var(--color-white);
    border: 1px solid var(--color-day-card-border);
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: var(--shadow-day-card);
}


.day-card__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px 0;
    padding-right: 16px;
}


.day-card__hours {
    list-style: none;
    margin: 0;
    padding: 0;
}


.day-card__hours li {
    font-size: 14px;
    color: var(--color-day-hours-text);
    line-height: 1.5;
}


.notice-box {
    background: var(--color-notice-bg);
    border: 1px solid var(--color-primary);
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 30px;
}


.notice-box__title {
    margin: 0 0 8px 0;
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-primary);
}


.notice-box__text {
    margin: 0;
    font-size: 14px;
    color: var(--color-primary);
    line-height: 1.5;
}


.consultation-hours-cta {
    text-align: center;
}



.consultation-hours-cta__btn {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 28px;
    border-radius: 8px;
    transition: background 0.2s ease;
    margin: 1rem 0;
}


.consultation-hours-cta__btn:hover,
.consultation-hours-cta__btn:focus {
    background: var(--color-primary-hover);
    color: var(--color-white);
}


/*=========================================
   18. CLINIC ("About the practice")
   (background comes from .bg-light on the
   <section> in HTML)
  ==========================================*/


.clinic-header {
    text-align: center;
}


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


.clinic-header__text {
    margin: 0;
    color: var(--color-clinic-text);
    font-size: 16px;
    line-height: 1.85;
}


@media (max-width: 600px) {
    .clinic-header__title {
        font-size: 1.7rem;
    }


    .clinic-header__text {
        font-size: 14px;
        line-height: 1.7;
    }
}


/*=========================================
   19. SERVICES
   (background comes from .bg-light on the
   <section> in HTML — rows no longer set
   their own background so nothing clashes
   with it)
  ==========================================*/


.service-row {
    display: flex;
    flex-wrap: wrap;
    min-height: 480px;
}


.service-row>.col-sm-6 {
    display: flex;
    align-items: center;
    padding: 60px 60px;
}


.service-row--image {
    padding: 0 !important;
    min-height: 480px;
    background-size: cover;
    background-position: center;
}


.service-content {
    max-width: 480px;
}


.service-content__heading {
    color: var(--color-primary);
    font-weight: 700;
    margin: 0;
    font-size: 2.75rem;
}


.service-content__subheading {
    color: var(--color-primary);
    font-weight: 400;
    margin: 0 0 20px 0;
    font-size: 2rem;
}


.service-content__list {
    padding-left: 20px;
    margin: 0;
}


.service-content__list li {
    font-size: 1.5rem;
    line-height: 1.7;
}


@media (max-width: 768px) {
    .service-row {
        min-height: auto;
        flex-direction: column;
        /* was column-reverse before, now consistent for all rows */
    }


    .service-row>.col-sm-6 {
        padding: 40px 24px;
    }


    .service-row--image {
        min-height: 280px;
        order: -1;
        /* forces image to top regardless of HTML source order */
    }
}


/*=========================================
   20. TEAM
   (background comes from .bg-white on the
   <section> in HTML — the info column no
   longer sets its own grey, so it matches
   the section instead of creating a
   half-grey/half-white row)
  ==========================================*/


.team-section .team-header__title {
    display: flex;
    justify-content: center;
    color: var(--color-primary);
    margin: 0;
}


.team-row {
    display: flex;
    flex-wrap: wrap;
    min-height: 480px;
}


.team-row>.col-sm-6 {
    display: flex;
    align-items: center;
    padding: 60px 60px;
}


.team-row--image {
    padding: 0 !important;
    min-height: 480px;
    background-color: var(--color-placeholder-bg);
    /* fallback color shown until the background-image loads */
    background-size: cover;
    background-position: center;
}


.team-content {
    max-width: 480px;
    width: 100%;
}


.team-content--right {
    text-align: right;
}


.team-content__name {
    color: var(--color-primary);
    font-weight: 700;
    margin: 0 0 8px 0;
    font-size: 2rem;
}


.team-content__role {
    color: var(--color-primary);
    font-weight: 400;
    margin: 0;
    font-size: 1.5rem;
}


@media (max-width: 768px) {
    .team-row {
        min-height: auto;
        flex-direction: column;
    }


    .team-row>.col-sm-6 {
        padding: 40px 24px;
    }


    .team-row--image {
        min-height: 280px;
        order: -1;
    }


    .team-content--right {
        text-align: left;
    }
}


/*=========================================
   21. ABOUT THE DOCTOR / TIMELINE
   (background comes from .bg-light on the
   <section> in HTML)
  ==========================================*/


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


.timeline {
    position: relative;
    padding-left: 40px;
}


.timeline::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 8px;
    width: 2px;
    height: calc(100% - 12px);
    background: var(--color-timeline-line);
}


.timeline__item {
    position: relative;
    padding-bottom: 48px;
}


.timeline__item:last-child {
    padding-bottom: 0;
}


.timeline__marker {
    position: absolute;
    top: 6px;
    left: -40px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-white);
    border: 3px solid var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-white);
    z-index: 1;
}


.timeline__title {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1.4rem;
    margin: 0 0 12px 0;
}


.timeline__list {
    margin: 0;
    padding: 0;
    color: var(--color-timeline-text);
    list-style: none;
}


.timeline__list li {
    position: relative;
    font-size: 1.5rem;
    line-height: 1.75;
    margin-bottom: 8px;
    padding-left: 22px;
}


.timeline__list li:last-child {
    margin-bottom: 0;
}


.timeline__list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}


.timeline__link {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
    margin-left: 4px;
    transition: transform 0.15s ease;
    display: inline-block;
}


.timeline__link:hover {
    transform: translateX(4px);
}


@media (max-width: 768px) {
    .about-doctor__heading {
        /* font-size: 1.75rem; */
    }


    .timeline {
        padding-left: 28px;
    }


    .timeline::before {
        left: 5px;
    }


    .timeline__marker {
        left: -28px;
        width: 14px;
        height: 14px;
    }


    .timeline__title {
        font-size: 1.2rem;
    }
}

/*  */

/* Force the mobile toggle menu to activate earlier than Bootstrap's
   default 768px, up to 991px, overriding bootstrap.min.css */
@media (max-width: 991px) {
    .navbar-default .navbar-toggle {
        display: block;
    }

    .navbar-default .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-default .navbar-collapse.collapse.in {
        display: block !important;
    }

    .navbar-default .navbar-nav {
        float: none !important;
    }

    .navbar-default .navbar-nav > li {
        float: none;
    }
}