/* Font */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800;900;1000&display=swap");

/* Variables */
:root {
    /* Brand Colors */
    --mhd-brand-color: #00913c;
    --mhd-brand-color-rgb: 0, 145, 60;
    --mhd-brand-color-hover: #007a33;
    --mhd-brand-color-active: #006428;
    --mhd-brand-color-muted: #80caa6;
    --mhd-brand-color-disabled: #d5eadd;

    /* Light Mode Colors */
    --mhd-bg-color: #f6f6f6;
    --mhd-text-primary: #18191a;
    --mhd-text-secondary: #65676b;
    --mhd-card-bg: #f0f2f5;

    /* Dark Mode Colors */
    --mhd-dark-bg-color: #18191a;
    --mhd-dark-text-primary: #e4e6eb;
    --mhd-dark-text-secondary: #b0b3b8;
    --mhd-dark-card-bg: #242526;

    --mhd-transition: all 0.3s ease-out;
    --mhd-font-family-main: "Montserrat", sans-serif;
    --mhd-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Reset & Helpers */
body {
    font-family: var(--mhd-font-family-main);
    color: var(--mhd-text-secondary);
    line-height: 1.7;
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4 {
    font-weight: 700;
    color: var(--mhd-text-primary);
}

a {
    text-decoration: none;
    color: var(--mhd-text-primary);
    transition: var(--mhd-transition);
}

a:hover {
    color: var(--mhd-brand-color);
}

img {
    width: 100%;
}

.section-padding {
    padding-top: 100px;
    padding-bottom: 100px;
}

.text-brand {
    color: var(--mhd-brand-color);
}

.section-title {
    max-width: 560px;
    margin: 0 auto 60px auto;
}

.section-title .line {
    width: 60px;
    height: 2px;
    background-color: var(--mhd-brand-color);
    display: inline-block;
}

/* Navbar */
.navbar {
    padding-top: 30px;
    padding-bottom: 30px;
    transition: var(--mhd-transition);
}

.navbar.scrolled {
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: var(--mhd-dark-text-primary);
    box-shadow: var(--mhd-shadow);
}

.navbar-toggler {
    border-color: transparent;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 145, 60, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler:focus {
    box-shadow: none;
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 16px;
        padding-left: 16px;
    }
}

.navbar .navbar-nav .nav-link {
    font-weight: 700;
    color: var(--mhd-text-primary);
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--mhd-brand-color);
}

.navbar-brand {
    font-size: 24px;
    font-weight: 700;
    color: var(--mhd-brand-color);
}

/* Btn */
.btn {
    padding: 10px 24px;
    border-radius: 0.75rem;
    border-width: 2px;
    font-weight: 500;
}

.btn-brand,
.btn-brand:focus {
    background-color: var(--mhd-brand-color);
    color: var(--mhd-dark-text-primary);
    border-color: var(--mhd-brand-color);
}

.btn-brand:hover {
    background-color: transparent;
    color: var(--mhd-brand-color);
    border-color: var(--mhd-brand-color);
}

/* Home */
#home {
    background-image: url(../images/hero.png);
    background-position: center;
    background-size: cover;
}

/* About */
.about-section {
    background-color: var(--mhd-bg-color);
}

.about-section .line {
    width: 60px;
    height: 2px;
    background-color: var(--mhd-brand-color);
    display: inline-block;
}

.iconbox {
    width: 80px;
    height: 80px;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--mhd-brand-color-rgb), 0.1);
    color: var(--mhd-brand-color);
    font-size: 34px;
    flex: none;
}

#healthcare-network {
    background: linear-gradient(rgba(0, 145, 60, 0.85), rgba(0, 145, 60, 0.85)),
        url(../images/manila.jpg);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
}

#healthcare-network h1,
#healthcare-network p {
    color: var(--mhd-dark-text-primary);
}

/* Services */
.services-section {
    background-color: var(--mhd-bg-color);
}

.services-card {
    position: relative;
    background-color: var(--mhd-card-bg);
    box-shadow: var(--mhd-shadow);
}

.services-card-img {
    overflow: hidden;
    border-radius: 1rem 1rem 0 0;
}

.services-card-img img {
    transition: all 0.5s ease;
}

.services-card-img:hover img {
    transform: scale(1.1);
}

.services-link {
    display: inline-flex;
    align-items: center;
}

.services-link span {
    font-weight: 700;
}

.services-link i {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mhd-brand-color);
    border-radius: 100px;
    color: var(--mhd-bg-color);
    margin-left: 6px;
    transition: var(--mhd-transition);
}

.services-link:hover i {
    transform: translateX(6px);
}

/* Footer */
footer {
    background: linear-gradient(rgba(24, 25, 26, 1), rgba(24, 25, 26, 1)),
        url(/assets/images/kartilya.jpg);
    padding-top: 100px;
    padding-bottom: 30px;
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
}

.footer-top {
    margin-bottom: 30px;
}

footer p,
footer a {
    color: rgba(255, 255, 255, 0.75);
}

footer .social-links a {
    font-weight: normal;
    font-size: 24px;
    margin-right: 10px;
}

.footer img {
    max-width: 175px;
}

.footer-bottom {
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
}

/* Scroll to top */
.scroll-to-top {
    text-decoration: none;
    border-radius: 100px;
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 9999;

    width: 60px;
    height: 60px;
    background-color: var(--mhd-brand-color);
    display: grid;
    align-content: center;
    text-align: center;
    font-size: 32px;
    color: var(--mhd-dark-text-primary);
    transition: var(--mhd-transition);
}

.scroll-to-top:hover {
    background-color: var(--mhd-brand-color-hover);
    color: var(--mhd-dark-text-primary);
}