/* =========================================================
   EODDLEY MEDICALS
   COMPLETE WEBSITE CSS
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {
    --ink: #2b2723;
    --teal: #d81f1a;
    --deep: #7a1113;
    --mint: #fdeeea;
    --paper: #fffaf8;
    --accent: #f2720a;
    --sky: #fdb841;
    --muted: #6b625d;
}


/* =========================================================
   GLOBAL
========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    font-family: Manrope, system-ui, sans-serif;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.65;
    margin: 0;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: Newsreader, Georgia, serif;
    font-weight: 600;
    line-height: 1.2;
    color: var(--deep);
}

a {
    color: var(--teal);
}

img {
    max-width: 100%;
}


/* =========================================================
   TOPBAR
========================================================= */

.topbar {
    background: var(--deep);
    color: #fff;
    font-size: 12px;
    line-height: 1.3;
    padding: 9px 0;
}

.topbar a {
    color: #fff;
    text-decoration: none;
}

.topbar a:hover {
    color: #fff;
}


/* ---------------------------------------------------------
   TOPBAR 3-COLUMN STRUCTURE
--------------------------------------------------------- */

.topbar-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: center;

    column-gap: 25px;
}


/* ---------------------------------------------------------
   EMAIL COLUMN
--------------------------------------------------------- */

.topbar-emails {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;

    min-width: 0;
}

.topbar-emails .top-contact-item {
    display: flex;
    align-items: center;
    gap: 7px;

    min-width: 0;
    max-width: 100%;

    white-space: nowrap;
}

.topbar-emails .top-contact-item span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-emails i {
    flex: 0 0 auto;
    font-size: 13px;
}


/* ---------------------------------------------------------
   SOCIAL ICONS
--------------------------------------------------------- */

.topbar-social {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    flex-shrink: 0;
}

.topbar-social a {
    width: 30px;
    height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, .14);

    color: #fff;

    transition:
        background .2s ease,
        transform .2s ease;
}

.topbar-social a:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-2px);
}

.topbar-social i {
    font-size: 13px;
}


/* ---------------------------------------------------------
   PHONE COLUMN
--------------------------------------------------------- */

.topbar-phones {
    display: flex;
    flex-direction: column;

    align-items: flex-end;

    gap: 5px;

    min-width: 0;
}

.topbar-phones .top-contact-item {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 7px;

    min-width: 0;
    max-width: 100%;

    white-space: nowrap;
}

.topbar-phones .top-contact-item span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-phones i {
    flex: 0 0 auto;
    font-size: 13px;
}


/* =========================================================
   MAIN NAVBAR
========================================================= */

.main-navbar {
    background: #fff;

    padding-top: 9px;
    padding-bottom: 9px;

    border-bottom: 1px solid #e9e9e9;

    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);

    z-index: 1030;
}


/* =========================================================
   LOGO
========================================================= */

.navbar-brand {
    padding: 0;
    margin: 0;

    display: flex;
    align-items: center;

    font-family: Newsreader, serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--deep);
}

.navbar-brand img {
    display: block;
}

.brand-logo {
    display: block;

    width: auto;
    height: 64px;

    max-width: 260px;

    object-fit: contain;
}


/* =========================================================
   NAVIGATION
========================================================= */

.main-navbar .navbar-nav {
    gap: 3px;
}

.main-navbar .nav-link {
    position: relative;

    color: var(--ink);

    font-size: 14px;
    font-weight: 600;

    padding: 11px 13px !important;

    transition:
        color .2s ease,
        background .2s ease;
}

.main-navbar .nav-link::after {
    content: "";

    position: absolute;

    left: 13px;
    right: 13px;
    bottom: 3px;

    height: 2px;

    background: var(--accent);

    transform: scaleX(0);

    transform-origin: center;

    transition: transform .2s ease;
}

.main-navbar .nav-link:hover {
    color: var(--teal);
}

.main-navbar .nav-link:hover::after,
.main-navbar .nav-link.active::after {
    transform: scaleX(1);
}

.main-navbar .nav-link.active {
    color: var(--teal);
}


/* =========================================================
   APPOINTMENT BUTTON
========================================================= */

.btn-accent {
    background: var(--accent);
    color: #fff;

    font-weight: 700;

    border-radius: 8px;

    padding: .6rem 1.2rem;

    border: 0;

    transition:
        background .2s ease,
        transform .2s ease;
}

.btn-accent:hover {
    background: #c85e08;
    color: #fff;

    transform: translateY(-1px);
}

.appointment-item {
    margin-left: 12px;
}

.main-navbar .btn-accent {
    white-space: nowrap;
}


/* =========================================================
   HAMBURGER
========================================================= */

.navbar-toggler {
    width: 50px;
    height: 46px;

    padding: 0;

    border: 1px solid #d8d8d8;

    border-radius: 9px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: none !important;
}

.navbar-toggler:focus {
    box-shadow:
        0 0 0 3px rgba(242, 114, 10, .15) !important;
}

.navbar-toggler-icon {
    width: 24px;
    height: 24px;
}


/* =========================================================
   FOCUS
========================================================= */

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}


/* =========================================================
   SECTIONS
========================================================= */

.section {
    padding: 4.5rem 0;
}

.section-alt {
    background: var(--mint);
}

.lead-sm {
    color: var(--muted);
    max-width: 60ch;
}


/* =========================================================
   STATS
========================================================= */

.stats {
    background: #fff;
    border-bottom: 1px solid #dbe6ee;
}

.stats .n {
    font-family: Newsreader, serif;

    font-size: 2rem;

    color: var(--teal);

    font-weight: 600;
}

.stats .col-6 {
    padding: 1.4rem 0;
}


/* =========================================================
   PRODUCT CARDS
========================================================= */

.pcard {
    position: relative;

    background: #fff;

    border: 1px solid #d3e2ec;

    border-radius: 12px;

    padding: 1.6rem;

    height: 100%;

    transition:
        border-color .2s,
        box-shadow .2s,
        transform .2s;
}

.pcard:hover {
    border-color: var(--teal);

    box-shadow:
        0 10px 24px rgba(0, 83, 140, .12);
}

.pcard .ic {
    width: 52px;
    height: 52px;

    border-radius: 10px;

    background: var(--mint);

    color: var(--teal);

    display: grid;
    place-items: center;

    font-size: 1.5rem;

    margin-bottom: 1rem;
}

.pcard h3 {
    font-size: 1.25rem;
}

.pcard p {
    color: var(--muted);
    margin: 0;
}

.pcard .media {
    height: 170px;

    margin:
        -1.6rem
        -1.6rem
        1rem;
}

.pcard .media.ph,
.pcard .media img {
    border-radius: 12px 12px 0 0;
}

.plink {
    color: var(--deep);
}

.more {
    color: var(--teal);

    font-weight: 700;

    margin-top: auto;

    padding-top: 1rem;
}

.more i {
    display: inline-block;

    transition: transform .2s;
}

.pcard:hover .more i {
    transform: translateX(4px);
}


/* =========================================================
   QUOTE
========================================================= */

.quote {
    border-left: 3px solid var(--accent);

    padding:
        .2rem
        0
        .2rem
        1.25rem;

    height: 100%;
}

.quote p {
    font-family: Newsreader, serif;

    font-size: 1.15rem;

    color: var(--ink);
}

.quote b {
    font-size: .9rem;
    color: var(--teal);
}


/* =========================================================
   APPOINTMENT
========================================================= */

.appt {
    background: var(--teal);

    color: #fff;

    border-radius: 16px;

    padding: 2.5rem;
}

.appt h2 {
    color: #fff;
}


/* =========================================================
   PAGE HEADER
========================================================= */

.page-head {
    background: var(--deep);

    color: #fff;

    padding: 3.5rem 0;

    border-bottom: 6px solid;

    border-image:
        linear-gradient(
            90deg,
            var(--accent) 0 33.3%,
            var(--sky) 33.3% 66.6%,
            var(--teal) 66.6%
        ) 1;
}

.page-head h1 {
    color: #fff;
    margin: 0;
}

.page-head p {
    color: #d3e6f3;
    margin: .5rem 0 0;
}

.crumb {
    font-size: .9rem;
    color: #d3e6f3;
}

.crumb a {
    color: #fff;
}


/* =========================================================
   FORMS
========================================================= */

.form-control,
.form-select {
    border-radius: 8px;
    padding: .7rem .9rem;
}


/* =========================================================
   EMPTY
========================================================= */

.empty {
    background: #fff;

    border: 1px dashed #a5bccb;

    border-radius: 12px;

    padding: 2.5rem;

    text-align: center;

    color: var(--muted);
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
    background: var(--ink);

    color: #b9ccdb;

    padding: 3.5rem 0 1.5rem;

    font-size: .95rem;
}

.footer a {
    color: #e3f0fa;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

.footer h6 {
    color: #fff;

    font-family: Manrope;

    font-weight: 700;
}

.brandf {
    color: #fff;
}

.copy {
    border-top: 1px solid #2c465c;

    margin-top: 2rem;

    padding-top: 1.2rem;

    font-size: .85rem;
}

.footer .social {
    display: inline-flex;
    gap: .55rem;
}

.footer .social a {
    width: 30px;
    height: 30px;

    border-radius: 50%;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: rgba(255, 255, 255, .08);

    color: #e3d8d3;
}

.footer .social a:hover {
    background: var(--accent);
    color: #fff;
}


/* =========================================================
   MEDIA SYSTEM
========================================================= */

.media {
    position: relative;

    overflow: hidden;

    border-radius: 12px;
}

.media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform .5s cubic-bezier(.2, .7, .2, 1);
}

.media:hover img {
    transform: scale(1.08);
}

.media.ph {
    display: grid;
    place-items: center;

    color: #fff;

    font-size: 2.6rem;

    transition:
        transform .5s cubic-bezier(.2, .7, .2, 1);
}

.media.ph i {
    transition: transform .4s ease;
}

.media.ph:hover {
    transform: scale(1.035);
}

.media.ph:hover i {
    transform:
        scale(1.12)
        rotate(-3deg);
}

.media.ph::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(255,255,255,.25),
            transparent 60%
        );
}

.v1 {
    background:
        linear-gradient(
            135deg,
            var(--teal),
            var(--accent)
        );
}

.v2 {
    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--sky)
        );
}

.v3 {
    background:
        linear-gradient(
            135deg,
            var(--deep),
            var(--teal)
        );
}

.v4 {
    background:
        linear-gradient(
            135deg,
            var(--sky),
            var(--accent)
        );
}

.v5 {
    background:
        linear-gradient(
            135deg,
            var(--teal),
            var(--deep)
        );
}

.v6 {
    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--deep)
        );
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.pimg {
    background:
        linear-gradient(
            135deg,
            var(--mint),
            #fff
        );

    border: 1px solid #d3e2ec;

    border-radius: 14px;

    display: grid;
    place-items: center;

    height: 300px;

    color: var(--teal);

    font-size: 5rem;

    overflow: hidden;
}

.pimg .media,
.pimg.media {
    height: 300px;

    border-radius: 14px;
}

.pimg-sm {
    height: 110px;

    border-radius: 10px;

    overflow: hidden;
}


/* =========================================================
   ABOUT
========================================================= */

.about-hero {
    height: 320px;

    border-radius: 16px;

    overflow: hidden;
}

.about-prev {
    background: #fff;

    border: 1px solid #ecd9d4;

    border-radius: 16px;

    padding: 2rem;
}

.about-prev .n {
    font-family: Newsreader, serif;

    color: var(--teal);

    font-size: 1.6rem;

    font-weight: 600;
}


/* =========================================================
   CHECK LIST
========================================================= */

.check {
    list-style: none;

    padding: 0;

    margin: 0;
}

.check li {
    padding:
        .45rem
        0
        .45rem
        1.9rem;

    position: relative;
}

.check li:before {
    content: "\F633";

    font-family: bootstrap-icons;

    position: absolute;

    left: 0;

    color: var(--accent);
}


/* =========================================================
   ACCORDION
========================================================= */

.accordion-button {
    font-family: Newsreader, serif;

    font-weight: 600;

    color: var(--deep);
}

.accordion-button:not(.collapsed) {
    background: var(--mint);
    color: var(--teal);
}

.accordion-button:focus {
    box-shadow:
        0 0 0 .2rem rgba(216, 31, 26, .15);
}


/* =========================================================
   TIMELINE
========================================================= */

.timeline {
    border-left: 3px solid var(--mint);

    padding-left: 1.5rem;
}

.timeline .yr {
    color: var(--teal);

    font-weight: 700;

    font-family: Newsreader, serif;
}


/* =========================================================
   VALUE
========================================================= */

.value {
    background: #fff;

    border: 1px solid #ecd9d4;

    border-radius: 12px;

    padding: 1.4rem;

    height: 100%;
}

.value .ic {
    width: 46px;
    height: 46px;

    border-radius: 10px;

    background: var(--mint);

    color: var(--teal);

    display: grid;
    place-items: center;

    font-size: 1.3rem;

    margin-bottom: .7rem;
}


/* =========================================================
   JOBS
========================================================= */

.job {
    background: #fff;

    border: 1px solid #d3e2ec;

    border-radius: 12px;

    padding: 1.6rem;

    border-left: 5px solid var(--accent);
}

.job:nth-child(2) {
    border-left-color: var(--sky);
}

.job:nth-child(3) {
    border-left-color: var(--teal);
}


/* =========================================================
   TAG
========================================================= */

.tag {
    display: inline-block;

    background: var(--mint);

    color: var(--teal);

    border-radius: 20px;

    padding:
        .15rem
        .8rem;

    font-size: .85rem;

    margin:
        0
        .4rem
        .4rem
        0;

    font-weight: 500;
}


/* =========================================================
   BLOG
========================================================= */

.post {
    background: #fff;

    border: 1px solid #d3e2ec;

    border-radius: 12px;

    overflow: hidden;

    height: 100%;

    position: relative;

    transition:
        box-shadow .2s,
        transform .2s;
}

.post:hover {
    box-shadow:
        0 12px 26px rgba(0, 83, 140, .14);

    transform: translateY(-3px);
}

.thumb {
    height: 150px;

    display: grid;
    place-items: center;

    font-size: 3rem;

    color: #fff;

    background:
        linear-gradient(
            120deg,
            var(--teal),
            var(--sky)
        );
}

.post:nth-child(2) .thumb,
.col-lg-4:nth-child(2) .thumb {
    background:
        linear-gradient(
            120deg,
            var(--accent),
            #f7b95f
        );
}

.col-lg-4:nth-child(3) .thumb {
    background:
        linear-gradient(
            120deg,
            var(--deep),
            var(--teal)
        );
}

.post .thumb {
    height: 160px;

    margin: 0;

    border-radius: 0;
}

.post .body {
    padding: 1.4rem;
}

.post h3 {
    font-size: 1.25rem;
}

.meta {
    font-size: .85rem;
    color: var(--muted);
}

.post-hero {
    height: 340px;

    border-radius: 14px;

    overflow: hidden;
}

.article p {
    font-size: 1.1rem;

    max-width: 68ch;
}


/* =========================================================
   SIDE
========================================================= */

.side {
    background: #fff;

    border: 1px solid #d3e2ec;

    border-radius: 14px;

    padding: 1.6rem;

    position: sticky;

    top: 96px;
}

.side-thumb {
    width: 64px;
    height: 64px;

    flex: 0 0 auto;

    border-radius: 10px;

    overflow: hidden;
}

.side-thumb .media,
.side-thumb.media {
    height: 64px;

    font-size: 1.4rem;

    border-radius: 10px;
}


/* =========================================================
   FEATURES
========================================================= */

.feat {
    list-style: none;

    padding: 0;
}

.feat li {
    padding:
        .4rem
        0
        .4rem
        1.8rem;

    position: relative;
}

.feat li:before {
    content: "\F26A";

    font-family: bootstrap-icons;

    position: absolute;

    left: 0;

    color: var(--sky);
}


/* =========================================================
   HERO CAROUSEL
========================================================= */

.hero-carousel {
    border-bottom: 6px solid;

    border-image:
        linear-gradient(
            90deg,
            var(--accent) 0 33.3%,
            var(--sky) 33.3% 66.6%,
            var(--teal) 66.6%
        ) 1;
}

.hero-carousel .carousel-item {
    min-height: 560px;

    display: flex;

    align-items: center;

    position: relative;

    overflow: hidden;

    color: #fff;
}

.hero-carousel .kb {
    position: absolute;

    inset: -5%;

    background-size: cover;

    background-position: center;

    animation:
        kenburns
        14s
        ease-in-out
        infinite
        alternate;
}

@keyframes kenburns {

    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }

}

.hero-carousel .carousel-item::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        repeating-radial-gradient(
            circle at 85% 40%,
            rgba(255,255,255,.08) 0 2px,
            transparent 2px 34px
        );
}

.hero-carousel .carousel-item::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            100deg,
            rgba(20,8,6,.82) 0%,
            rgba(20,8,6,.55) 35%,
            rgba(122,17,19,.35) 60%,
            rgba(122,17,19,.15) 100%
        );
}

.slide-1 {
    background:
        linear-gradient(
            135deg,
            var(--deep),
            var(--teal)
        );
}

.slide-2 {
    background:
        linear-gradient(
            135deg,
            var(--teal),
            var(--accent)
        );
}

.slide-3 {
    background:
        linear-gradient(
            135deg,
            var(--deep),
            var(--accent)
        );
}

.hero-carousel .content {
    position: relative;

    z-index: 2;

    max-width: 640px;
}

.hero-carousel h1 {
    color: #fff;

    font-size:
        clamp(
            2.1rem,
            4.6vw,
            3.4rem
        );

    max-width: 15ch;

    margin-bottom: 1rem;
}

.hero-carousel p {
    color: #fbe6db;

    max-width: 46ch;

    font-size: 1.1rem;

    margin-bottom: 1.75rem;
}

.hero-carousel .carousel-indicators [data-bs-target] {
    background: #fff;

    opacity: .5;

    width: 9px;
    height: 9px;

    border-radius: 50%;
}

.hero-carousel .carousel-indicators .active {
    opacity: 1;
}

.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
    width: 5%;

    opacity: .6;
}

.hero-carousel .carousel-control-prev:hover,
.hero-carousel .carousel-control-next:hover {
    opacity: 1;
}


/* =========================================================
   HERO ANIMATION
========================================================= */

@keyframes rise {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: none;
    }

}

.hero-carousel .content h1,
.hero-carousel .content p,
.hero-carousel .content .btn {
    animation:
        rise
        .7s
        cubic-bezier(.2,.7,.2,1)
        both;
}

.hero-carousel .content p {
    animation-delay: .12s;
}

.hero-carousel .content .btn {
    animation-delay: .24s;
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.js .rv {
    opacity: 0;

    transform: translateY(22px);

    transition:
        opacity .7s cubic-bezier(.2,.7,.2,1),
        transform .7s cubic-bezier(.2,.7,.2,1);

    transition-delay: var(--d, 0s);
}

.js .rv.in {
    opacity: 1;

    transform: none;
}

.js .section-alt.rv,
.js .stats.rv {
    transform: none;
}


/* =========================================================
   TESTIMONIAL MARQUEE
========================================================= */

.tmarquee {
    overflow: hidden;

    position: relative;

    padding: .5rem 0 1rem;
}

.tmarquee::before,
.tmarquee::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    width: 70px;

    z-index: 2;

    pointer-events: none;
}

.tmarquee::before {
    left: 0;

    background:
        linear-gradient(
            90deg,
            var(--paper),
            transparent
        );
}

.tmarquee::after {
    right: 0;

    background:
        linear-gradient(
            270deg,
            var(--paper),
            transparent
        );
}

.tmarquee-track {
    display: flex;

    gap: 1.5rem;

    width: max-content;

    animation:
        marquee
        38s
        linear
        infinite;
}

.tmarquee:hover .tmarquee-track {
    animation-play-state: paused;
}

.tmarquee-track .quote {
    width: 320px;

    flex: 0 0 auto;

    background: #fff;

    border: 1px solid #ecd9d4;

    border-radius: 12px;

    padding:
        1.4rem
        1.4rem
        1.4rem
        1.6rem;
}

@keyframes marquee {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* =========================================================
   SPECS
========================================================= */

.table.specs th {
    width: 34%;

    color: var(--muted);

    font-weight: 600;

    background: var(--mint);

    border-color: #f0d9d2;
}

.table.specs td {
    border-color: #f0d9d2;
}

.pullquote {
    border-left: 3px solid var(--accent);

    margin: 1.5rem 0;

    padding:
        .3rem
        0
        .3rem
        1.4rem;

    font-family: Newsreader, serif;

    font-size: 1.3rem;

    color: var(--deep);

    font-style: italic;
}


/* =========================================================
   CONTACT PAGE
========================================================= */

.index {
    background: #fff;

    border: 1px solid #ecd9d4;

    border-radius: 14px;

    padding: 1.6rem 1.8rem;
}

.index h2 {
    font-size: 1.25rem;

    margin-bottom: .5rem;
}

.index a {
    display: flex;

    align-items: center;

    gap: .9rem;

    padding: .75rem 0;

    border-top: 1px solid #f0e0da;

    color: var(--ink);

    text-decoration: none;

    font-weight: 500;
}

.index a:hover {
    color: var(--teal);
}

.index i {
    color: var(--teal);

    font-size: 1.2rem;

    flex: 0 0 auto;
}

.index em {
    margin-left: auto;

    font-style: normal;

    color: var(--muted);

    font-size: .85rem;

    white-space: nowrap;
}


/* =========================================================
   COMPANY PROFILE
========================================================= */

.text-teal {
    color: var(--teal);
}

.statement {
    border-radius: 16px;

    padding: 1.8rem;

    color: #fff;

    position: relative;

    overflow: hidden;

    height: 100%;
}

.statement-red {
    background:
        linear-gradient(
            160deg,
            var(--teal),
            var(--deep)
        );
}

.statement-orange {
    background:
        linear-gradient(
            160deg,
            var(--accent),
            #c85e08
        );
}

.statement h2 {
    color: #fff;
}

.statement .quote-mark {
    position: absolute;

    top: .4rem;
    left: 1.2rem;

    font-family: Newsreader, serif;

    font-size: 4rem;

    opacity: .35;

    line-height: 1;
}

.statement p {
    position: relative;

    z-index: 1;
}

.statement-img {
    height: 150px;

    border-radius: 12px;

    margin-bottom: 1rem;
}

.statement-img img {
    opacity: .92;
}

.strengths-banner {
    height: 220px;

    border-radius: 16px;

    overflow: hidden;

    margin-top: .5rem;
}

.strategy-item {
    display: flex;

    gap: 1rem;

    background: #fff;

    border: 1px solid #ecd9d4;

    border-radius: 12px;

    padding: 1.4rem;

    height: 100%;
}

.strategy-item .num {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: var(--deep);

    color: #fff;

    display: grid;

    place-items: center;

    font-family: Newsreader, serif;

    font-weight: 600;
}

.reach-map {
    height: 260px;

    border-radius: 16px;

    background: var(--mint);

    display: grid;

    place-items: center;

    color: var(--teal);

    font-size: 5rem;
}

.csr-img {
    height: 280px;

    border-radius: 14px;
}

.director-card {
    background: #fff;

    border: 1px solid #ecd9d4;

    border-radius: 18px;

    padding: 2.2rem;
}

.director-quote {
    font-size: 6rem;

    color: var(--mint);
}

.dept-chip {
    background: #fff;

    border: 1px solid #ecd9d4;

    border-radius: 12px;

    padding: .8rem;

    text-align: center;

    height: 100%;
}

.dept-thumb {
    height: 80px;

    border-radius: 8px;

    margin-bottom: .6rem;

    font-size: 1.6rem;
}

.dept-chip span {
    display: block;

    font-size: .82rem;

    font-weight: 600;

    color: var(--deep);

    line-height: 1.25;
}

.culture-card {
    background: #fff;

    border: 1px solid #ecd9d4;

    border-radius: 14px;

    padding: 1.5rem;

    height: 100%;
}

.culture-img {
    height: 170px;

    border-radius: 10px;
}


/* =========================================================
   PAGE / BODY ANIMATION
========================================================= */

body {
    opacity: 0;

    animation:
        pagein
        .5s
        ease
        forwards;
}

@keyframes pagein {

    to {
        opacity: 1;
    }

}

body.leaving {
    animation:
        pageout
        .28s
        ease
        forwards;
}

@keyframes pageout {

    to {
        opacity: 0;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

    .topbar {
        font-size: 11px;
    }

    .topbar-layout {
        column-gap: 12px;
    }

    .topbar-social {
        gap: 5px;
    }

    .topbar-social a {
        width: 28px;
        height: 28px;
    }

    .brand-logo {
        height: 58px;
        max-width: 230px;
    }

    .main-navbar .nav-link {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    .appointment-item {
        margin-left: 5px;
    }

}


/* =========================================================
   TABLET / MOBILE NAVIGATION
========================================================= */

@media (max-width: 991px) {

    /* ---------------------------------------------
       TOPBAR
    --------------------------------------------- */

    .topbar {
        padding: 8px 0;
        font-size: 10px;
    }

    .topbar-layout {
        column-gap: 8px;
    }

    .topbar-emails {
        gap: 4px;
    }

    .topbar-phones {
        gap: 4px;
    }

    .topbar-emails .top-contact-item,
    .topbar-phones .top-contact-item {
        gap: 5px;
    }

    .topbar-social {
        gap: 4px;
    }

    .topbar-social a {
        width: 26px;
        height: 26px;
    }

    .topbar-social i {
        font-size: 11px;
    }


    /* ---------------------------------------------
       NAVBAR
    --------------------------------------------- */

    .main-navbar {
        padding: 9px 0;
    }

    .brand-logo {
        height: 55px;
        max-width: 220px;
    }


    /* ---------------------------------------------
       COLLAPSED MENU
    --------------------------------------------- */

    .main-navbar .navbar-collapse {
        margin-top: 12px;

        padding-top: 8px;

        border-top: 1px solid #eeeeee;
    }

    .main-navbar .navbar-nav {
        gap: 0;

        align-items: stretch !important;
    }

    .main-navbar .nav-item {
        width: 100%;
    }

    .main-navbar .nav-link {
        display: block;

        width: 100%;

        padding:
            11px
            4px !important;

        border-bottom: 1px solid #f0f0f0;

        font-size: 15px;
    }

    .main-navbar .nav-link::after {
        display: none;
    }

    .appointment-item {
        margin: 12px 0 4px;
    }

    .main-navbar .btn-accent {
        display: block;

        width: 100%;

        text-align: center;

        padding: 12px 18px;
    }


    /* Hero */

    .section {
        padding: 3rem 0;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {


    /* =====================================================
       TOPBAR MOBILE
    ===================================================== */

    .topbar {
        padding: 8px 0 7px;

        font-size: 8.8px;
    }

    .topbar .container {
        padding-left: 12px;
        padding-right: 12px;
    }


    /*
       IMPORTANT:

       LEFT  = Emails
       CENTER = Social
       RIGHT = Phones
    */

    .topbar-layout {

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto
            minmax(0, 1fr);

        align-items: center;

        column-gap: 5px;

        width: 100%;
    }


    /* ---------------------------------------------
       EMAILS LEFT
    --------------------------------------------- */

    .topbar-emails {
        min-width: 0;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 4px;
    }

    .topbar-emails .top-contact-item {
        width: 100%;

        min-width: 0;

        display: flex;

        align-items: center;

        gap: 4px;

        white-space: nowrap;
    }

    .topbar-emails .top-contact-item span {
        min-width: 0;

        overflow: hidden;

        text-overflow: ellipsis;
    }

    .topbar-emails i {
        font-size: 9px;
    }


    /* ---------------------------------------------
       SOCIAL CENTER
    --------------------------------------------- */

    .topbar-social {

        display: flex;

        flex-direction: row;

        align-items: center;

        justify-content: center;

        gap: 3px;

        min-width: 0;

        flex-shrink: 0;
    }

    .topbar-social a {

        width: 23px;
        height: 23px;

        flex: 0 0 23px;
    }

    .topbar-social i {
        font-size: 9px;
    }


    /* ---------------------------------------------
       PHONES RIGHT
    --------------------------------------------- */

    .topbar-phones {

        min-width: 0;

        display: flex;

        flex-direction: column;

        align-items: flex-end;

        gap: 4px;
    }

    .topbar-phones .top-contact-item {

        width: 100%;

        min-width: 0;

        display: flex;

        align-items: center;

        justify-content: flex-end;

        gap: 4px;

        white-space: nowrap;
    }

    .topbar-phones .top-contact-item span {

        min-width: 0;

        overflow: hidden;

        text-overflow: ellipsis;
    }

    .topbar-phones i {
        font-size: 9px;
    }


    /* =================================================
       NAVBAR MOBILE
    ================================================= */

    .main-navbar {
        padding: 8px 0;
    }

    .brand-logo {

        height: 48px;

        max-width: 190px;

        width: auto;
    }

    .navbar-toggler {

        width: 45px;
        height: 42px;

        border-radius: 8px;
    }

    .navbar-toggler-icon {

        width: 22px;
        height: 22px;
    }


    /* Mobile menu */

    .main-navbar .navbar-collapse {

        margin-top: 10px;

        padding-top: 7px;
    }

    .main-navbar .nav-link {

        font-size: 14px;

        padding:
            10px
            4px !important;
    }


    /* Appointment */

    .main-navbar .btn-accent {

        font-size: 14px;

        padding:
            11px
            15px;
    }


    /* Hero */

    .hero-carousel .carousel-item {

        min-height: 460px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .topbar {
        font-size: 8px;
    }

    .topbar .container {
        padding-left: 9px;
        padding-right: 9px;
    }

    .topbar-layout {
        column-gap: 3px;
    }

    .topbar-social {
        gap: 2px;
    }

    .topbar-social a {
        width: 21px;
        height: 21px;

        flex-basis: 21px;
    }

    .topbar-social i {
        font-size: 8px;
    }

    .topbar-emails .top-contact-item,
    .topbar-phones .top-contact-item {
        gap: 3px;
    }

    .topbar-emails i,
    .topbar-phones i {
        font-size: 8px;
    }

    .brand-logo {
        height: 45px;

        max-width: 175px;
    }

    .navbar-toggler {
        width: 43px;
        height: 40px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    * {
        transition: none !important;
        animation: none !important;
    }

    html {
        scroll-behavior: auto;
    }

    body {
        opacity: 1;
    }

    body.leaving {
        animation: none;
    }

    .js .rv {
        opacity: 1;

        transform: none;

        transition: none;
    }

    .hero-carousel .kb {
        animation: none;
    }

    .tmarquee-track {
        animation: none;

        overflow-x: auto;

        padding-bottom: 1rem;
    }

}