/* Urbanist Medium */
@font-face {
    font-family: "Urbanist-Medium";
    src: url("../fonts/Urbanist-Medium.eot");
    src: url("../fonts/Urbanist-Medium.ttf") format("truetype"), url("../fonts/Urbanist-Medium.svg#Urbanist-Medium") format("svg"), url("../fonts/Urbanist-Medium.eot?#iefix") format("embedded-opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* Urbanist Bold */
@font-face {
    font-family: "Urbanist-Bold";
    src: url("../fonts/Urbanist-Bold.eot");
    src: url("../fonts/Urbanist-Bold.ttf") format("truetype"), url("../fonts/Urbanist-Bold.svg#Urbanist-Bold") format("svg"), url("../fonts/Urbanist-Bold.eot?#iefix") format("embedded-opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Urbanist Regular */
@font-face {
    font-family: "Urbanist-Regular";
    src: url("../fonts/Urbanist-Regular.eot");
    src: url("../fonts/Urbanist-Regular.woff2") format("woff2"), url("../fonts/Urbanist-Regular.woff") format("woff"), url("../fonts/Urbanist-Regular.ttf") format("truetype"), url("../fonts/Urbanist-Regular.svg#Urbanist-Regular") format("svg"), url("../fonts/Urbanist-Regular.eot?#iefix") format("embedded-opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* ============================================================== Master Template ============================================================== */
:root {
    --color-1: #00769C;
    --color-2: #00A3A8;
    --color-3: #A6B852;
    --btn-padding:  0.875rem 0.4375rem;
}
body {
    font-family: "Urbanist-Regular", sans-serif;
    font-size: 1.2rem;
    color: #4D4D4F;
    font-weight: normal;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.mobile-only {
    display: none;
}
.container {
    max-width: 1920px;
    padding: 0 70px;
}
.content-brief {
    max-width: 1640px;
    margin: 0 auto 3.75rem;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Urbanist-Medium", sans-serif;
    line-height: 1.2;
    color: #2C2C2C;
    margin: 0 0 .75rem;
}
h1 strong, h1 b, h2 strong, h2 b, h3 strong, h3 b, h4 strong, h4 b, h5 strong, h5 b, h6 strong, h5 b {
    font-family: "Urbanist-Regular", sans-serif;
}
h1, .h1 {
    font-size: 2.813rem;
    margin-bottom: 1.5rem;
}
h2, .h2 {
    font-size: 2.313rem;
    margin-bottom: 1.625rem;
}
.huge-para {
    font-size: 2.8125rem;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    color: #2C2C2C;
}
h3, .h3 {
    font-size: 2rem;
}
p {
    font-size: 1.2rem;
}
p strong, p b, a.btn {
    font-family: "Urbanist-Regular", sans-serif;
}
a {
    color: #4D4D4F;
    cursor: pointer;
}
a.btn {
    font-size: 1.2rem;
    border-radius: .5rem;
    padding: var(--btn-padding);
    color: #FFF;
    max-width: 21.125rem;
}
.btn.color-1 {
    background-color: var(--color-1);
    color: #FFF;
}
.btn.color-2 {
    background-color: var(--color-2);
    color: #FFF;
}
.pb-6 {
    padding-bottom: 5rem;
}
.button-section > ul {
    display: flex;
    gap: 1rem 1.5rem;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
}
.button-section li {
    flex: 1 1 0;
    max-width: 21.125rem;
    list-style-type: none;
}
.button-section .btn {
    width: 100%;   
}
.button-section .appointment {
    position: relative;
}
.appointment .dropdown-item:hover {
    background: revert;
}
.appointment-dropdown {
    position: absolute;
    display: none;
    padding: 0.5rem 0;
    width: 100%;
    background: rgb(256, 256,256, 0.9);
}
.appointment-dropdown .dropdown-item i {
    padding-right: 1.25rem;
    font-size: 1.5rem;
    color: var(--color-1);
}
.button-section .appointment:hover .appointment-dropdown {
    display: block;
}
/* color */
.cerulean           { color: var(--color-1); }
.dark-turquoise     { color: var(--color-2); }
.middle-green       { color: var(--color-3); }
.bkg-cerulean       { background-color: var(--color-1); color: #FFF; }
.bkg-dark-turquoise { background-color: var(--color-2); color: #FFF; }
.bkg-middle-green   { background-color: var(--color-3); color: #FFF; }
.bkg-grey           { background-color: #EDEDED; }

/* ============================================================== Header ============================================================== */
.main-header {
    box-shadow: 0 0 1rem 0.25rem rgb(0, 0, 0, 27%);
    position: sticky;
    z-index: 10;
    top: 0;
    background-color: #FFF;
}
.main-header:has(+ .main-body .error-pg) {
    box-shadow: none;
}
.header {
    max-width: 1920px;
    margin: 0 auto;
}
.navbar {
    padding: 1rem 0;
    justify-content: space-between;
}
.main-menu {
    width: 19%;
}
.main-menu .container {
    padding-right: 0;
}
.sub-menu .container {
    padding-left: 0;
}
.navbar-toggler {
    border: 0;
    padding-right: 70px;
}
.navbar-toggler:focus {
    box-shadow: none;
}
.navbar-brand img {
    width: 75%;
    max-width: 15.5rem;
    min-width: 10rem;
}
.nav-link, .dropdown-menu a {
    color: #4D4D4F;
}
.navbar-nav {
    column-gap: 1.5rem;
    position: relative;
}
.navbar-expand-lg .navbar-nav .nav-link {
    padding: .5rem 0;
}
.sub-menu .navbar-collapse li:has(.btn-close) {
    position: absolute;
    right: 0;
    top: 0;
    display: none;
}
.dropdown-toggle::after, .nav-item.dropdown:not(.appointment) > .nav-link::after {
    border: none;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f078";
    vertical-align: baseline;
    padding-left: 0.5rem;
}
.dropdown-menu {
    border: none;
    background: rgb(256, 256,256, 0.9);
}
.dropdown-menu i {
    padding-right: 1.25rem;
    font-size: 1.5rem;
    color: var(--color-1);
}
.dropdown-item {
    padding: 0.5rem 1rem;
    font-size: 1.2rem;
    width: auto;
}
.nav-item.appointment .btn:active, .appointment .btn:active {
    background-color: var(--color-1);
    color: #FFF;
    border-color: var(--color-1);
}
.nav-item.appointment .dropdown-menu {
    width: 100%;
}
@media (min-width: 992px) {
    .nav-item.dropdown:hover .dropdown-menu                         { display: block; }
    .nav-item.dropdown:not(.appointment):hover > .nav-link::after   { content: "\f077"; }
}
/* ============================================================== Banner ============================================================== */
.home-banner-component {
    position: relative;
}
.home-banner-swiper {
    margin-bottom: 3rem;
}
.home-banner-swiper.swiper {
    overflow-y: visible;
    position: revert;
}
.home-banner-swiper .para-container {
    padding: 2rem 3rem 2rem 0;
}
.home-banner-swiper .primary-btn {
    background: var(--color-1);
    color: #FFF;
    padding: 1rem 2.5rem;
    text-decoration: none;
    border-radius: .5rem;
    display: inline-block;
    font-weight: normal;
}
.home-banner-swiper .img-container {
    height: 100%;
}
.home-banner-swiper .img-container img {
    height: 100%;
    object-fit: cover;
    object-position: left;
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-horizontal {
    position: absolute;
    z-index: 3;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
    background: #EAEAEA;
    opacity: 1;
}
.banner-section {
    position: relative;
}
.banner-section img {
    object-fit: cover;
    max-height: 600px;
    min-height: 383px;
}
.home-banner-component::before,
.banner-section::before,
.contact-us-component + .transports::before {
    content: '';
    position: absolute;
    bottom: 0;
    height: 10%;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 10%, rgba(0,0,0,0.2) 100%);
}
.home-banner-component::before {
    z-index: 2;
}
.carousel-item img {
    object-fit: cover;
    object-position: center 25%;
    max-height: 600px;
    min-height: 305px;
}
.carousel-content-section {
    padding: 3rem 0;
}
.carousel-content-section .container {
    row-gap: 1rem;
    margin: 0 auto;
    justify-content: center;
}
.carousel-content-section .item {
    display: flex;
    align-items: flex-start;
    column-gap: 1.5rem;
    flex: 0 0 auto;
    width: 20%;
}
.carousel-content-section .item img {
    flex: 0 0 17.5%;
    width: 17.5%;
    max-width: 4rem;
}
.contact-us-component {
    position: relative;
}
.contact-us-banner {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.contact-us-banner img {
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}
.container:has(.contact-us-banner-contents) {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.contact-us-banner-contents {
    width: 35rem;
    background: #FFF;
    padding: 2rem 3rem 2rem 1.5rem;
    border-radius: 0.5rem;
}
.contact-us-banner-contents h1 {
    font-size: 1.2rem;
}
.contact-us-banner-contents .contact-links a {
    background-color: #EDEDED;
}
.contact-us-banner-contents .button-section > ul {
    flex-direction: column;
}
/* ============================================================== Breadcrumb ============================================================== */
.breadcrumb {
    margin: 1rem 0 0.75rem;
}
/* ============================================================== Card ============================================================== */
.card.h-100 {
    border: none;
}
.card-body {
    position: relative;
    padding: 1.5rem;
}
.card-title, .card-title a {
    font-family: "Urbanist-Regular", sans-serif;
    font-size: 2rem;
    color: #2C2C2C;
    min-height: 4.75rem;
    text-decoration: none;
}
.card-title a:hover, .card-title a:focus{
    text-decoration: underline;
}
.card-text {
    font-size: 1rem;
}
.card-body .btn {
    position: absolute;
    right: 0;
    bottom: 0;
    background: #00A3A8;
    color: #FFF;
    padding: 1rem;
}
.card-button {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0.516rem 0.926rem;
    background-color: var(--color-2);
    color: #FFF;
}
/* ============================================================== Content ============================================================== */
.contact-links {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    margin-bottom: 1.75rem;
}
.contact-links a {
    background: #FFF;
    padding: 1rem 1.75rem;
    border-radius: .5rem;
    text-decoration: none;
    word-break: break-word;
}
.contact-links a i {
    padding-right: 1.125rem;
    color: var(--color-1);
    display: inline;
}
.transports {
    position: relative;
}
.contact-us-component + .transports::before {
    height: 40%;
    left: 0;
}
.transports .row {
    row-gap: 1.75rem;
}
.transports ul {
    padding-left: 1.25rem;
}
.transport-image {
    background-color: var(--color-1);
    position: relative;
    width: 100%;
    max-width: 100px;
    border-radius: 50%;
    margin: 0 auto;
}
.transport-image::after {
    content: "";
    display: block;
    padding-top: 100%;
}
.transport-image img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 60%;
    width: 60%;
}
.visit-us-section {
    display: flex;
    max-height: 835px;
    overflow: hidden;
    margin-bottom: 2.75rem;
}
.visit-us-section .left-content {
    padding: 2.5rem 4rem 2.5rem 0;
    flex: 0 0 30%;
    min-width: 410px;
}
.visit-us-section .button-section ul {
    flex-direction: column;
}
.visit-us-section img {
    object-fit: cover;
    width: 100%;
}
.curvebox .leftinfo, .curvebox .rightinfo {
    padding: 3.5rem 3rem;
}
.curvebox:has(.leftinfo) {
    border-radius: 0 4.375rem;
    overflow: hidden;
}
.curvebox:has(.rightinfo) {
    border-radius: 4.375rem 0 4.375rem;
    overflow: hidden;
}
.curvebox .photo {
    overflow: hidden;
    padding: 0;
}
.curvebox .photo img {
    height: 100%;
    width: 100%;
    object-position: center;
    object-fit: cover;
}
/* ============================================================== MyHealth360 ============================================================== */
.myhealth360-intro p {
    margin-bottom: 0;
}
.myhealth360 {
    background-image: linear-gradient(to bottom, #55bae4 10%, #88c496);
    overflow: hidden;
    height: 297px;
}
.myhealth360 a {
    display: inline-block;
}
.myhealth360 .text,
.myhealth360 .images {
    width: 72%;
    min-width: 470px;
}
.myhealth360 .text {
    font-size: 1.6875rem;
    color: #13454a;
    letter-spacing: 0.03em;
    line-height: 36px;
    text-align: left;
    margin: 2rem auto;
}
.myhealth360 .text .break {
    display: block;
}
.myhealth360 .images {
    height: 89px;
    text-align: left;
    margin: auto;
}
.myhealth360 img {
    max-width: 100%;
}
.myhealth360 .healthlogo,
.myhealth360 .download,
.myhealth360 .qrcode {
    display: inline-block;
    vertical-align: middle;
}
.myhealth360 .download {
    padding: 0 0.5rem;
}
.myhealth360 .phoneimg {
    height: 297px;
    text-align: center;
}
.myhealth360 .phoneimg img {
    height: 100%;
}
.myhealth360 .phoneimg .for-d {
    display: inline;
}
.myhealth360 .phoneimg .for-m {
    display: none;
}
/* ============================================================== Footer ============================================================== */
.footer {
    background-color: #F8F8F8;
    padding-top: 5rem;
}
.footer-media {
    display: flex;
}
.footer-media-content {
    padding: 2rem 1rem;
    margin-left: auto;
}
.footer-media-content > p:first-child {
    margin-bottom: 0;
}
.footer-media-content p:has(a[analytics-text="social sharing"]) {
    line-height: 1;
}
.footer-media-content a {
    font-size: 3rem;
    color: #2C2C2C;
}
.footer-bottom {
    border-top: 1px solid #707070;
    padding: 2rem 0;
    margin: 0;
}
.footer-bottom > div {
    padding: 0;
}
.footer-bottom .copyright p {
    font-size: 1.125rem;
}
.footer-bottom .footer-links a {
    font-size: 1rem;
}
.footer-bottom .copyright span {
    display: inline-block;
}
.footer-bottom .footer-links {
    text-align: right;
}
.footer-bottom .footer-links ul {
    padding: 0 1rem;
}
.footer-bottom .footer-links li {
    display: inline;
    margin-left: 1.5rem;
}
.footer-bottom .footer-links li:first-child {
    margin-left: 0;
}
/* ============================================================== Our Doctors ============================================================== */
.our-doctors {
    margin-bottom: 6rem;
}
.our-doctors .button-section .btn {
    max-width: 23.25rem;
    background-color: #EDEDED;
    color: #4D4D4F;
}
.our-doctors .button-section a.disabled.btn {
    opacity: 1;
}
.our-doctors .button-section .general-practitioner.disabled,
.profile-section.general-practitioner .profile {
    background-color: var(--color-1);
    color: #FFF;
}
.our-doctors .button-section .pediatricians.disabled, 
.profile-section.pediatricians .profile {
    background-color: var(--color-2);
    color: #FFF;
}
.our-doctors .button-section .specialists.disabled,
.profile-section.specialists .profile {
    background-color: var(--color-3);
    color: #FFF;
}
.doctors-section h1 {
    font-size: 2.313rem;
    margin-bottom: 1.625rem;
}
.doctors-section .profile-section {
    transition: height 1.5s linear 2s;
}
.doctors-section .profile {
    margin: 0;
    border-radius: .5rem;
    -prefix-animation: slide 5s ease;
    animation-duration: 0.25s;
}
.doctors-section .profile:not(:last-child) {
    margin-bottom: 1.875rem
}
.doctors-section .profile.hide {
    display: none;
}
.doctors-section h3 {
    color: #FFF;
    line-height: 1;
    margin-bottom: .625rem;
}
.doctors-section p {
    font-size: 1.125rem;
}
.doctors-section hr {
    opacity: 1;
}
.doctors-section .image-box {
    padding: 2.25rem 2rem;
    min-width: 310px;
}
.doctors-section .details {
    position: relative;
    padding: 2.25rem 2.875rem;
    flex: 1;
}
.doctors-section .doc {
    border-bottom: 1px solid;
    margin-bottom: 1rem;
}
.doctors-section .details:has(.appointment-btn) .doc {
    padding-right: 21.5rem;
}
.doctors-section .appointment-btn {
    position: absolute;
    right: 2.875rem;
    top: 2.25rem;
}
.doctors-section .appointment-btn .btn {
    background-color: #FFF;
    width: 21rem;
}
.doctors-section .general-practitioner .appointment-btn .btn {
    color: var(--color-1);
}
.doctors-section .pediatricians .appointment-btn .btn {
    color: var(--color-2);
}
.doctors-section .specialists .appointment-btn .btn {
    color: var(--color-3);
}
.doctors-section .appointment-btn ul {
    display: none;
    background-color: rgba(256, 256, 256, 0.85);
    list-style-type: none;
    padding: 0.5rem 0.75rem;
}
.doctors-section .appointment-btn:hover ul {
    display: block;
}
.doctors-section .appointment-btn li {
    padding: .25rem 0;
}
.doctors-section .appointment-btn i,
.navbar-nav .appointment em,
.doctors-section .appointment-btn em,
.profile .appointment-btn em {
    padding-right: 1.25rem;
}
.doctors-section .appointment-btn li a {
    text-decoration: none;
}
.doctors-section .appointment-btn li a span {
    text-decoration: underline;
}
.doctors-section .appointment-btn li span.or-call {
    padding-left: 39px;
}
.doctors-section .appointment-btn li a span.phone-number {
    text-decoration: none;
}
.doctors-section .truncate-moreless a {
    color: #FFF;
}
.doctors-section .pagination {
    justify-content: center;
    column-gap: 1.5rem;
}
.doctors-section .pagination li {
    text-align: center;
    width: 3.25rem;
    border-radius: 8px;
}
.doctors-section .pagination li a {
    display: inline-block;
    width: 100%;
    padding: .625rem;
}
.doctors-section .pagination li a:hover {
    text-decoration: underline;
}
.pagination li:not(.prev):not(.next).activated {
    background-color: #00769C;
    color: #fff;
}
.pediatricians + .pager-section .pagination li:not(.prev):not(.next).activated {
    background-color: var(--color-2);
}
.specialists + .pager-section .pagination li:not(.prev):not(.next).activated {
    background-color: var(--color-3);
}
.pagination .prev,
.pagination .next {
    background-color: #EDEDED;
}
.pagination .prev.disabled,
.pagination .next.disabled {
    color: #A9A9AA;
    background-color: #E2E2E3;
    border: none;
}
.pagination .prev.disabled a,
.pagination .next.disabled a {
    pointer-events: none;
    cursor: auto;
}
/* ============================================================== Accordion ============================================================== */
.accordion-actions {
    float: right;
    display: none;
}
.accordion-collapse-all, .accordion-expand-all {
    display: inline-block;
    margin: 20px 0;
    color: #005596;
    cursor: pointer;
}
.accordion-collapse-all::after {
    content: " | ";
    font-size: 18px;
    color: #000;
    padding: 0 5px;
}
.accordion-wrapper {
    margin-bottom: 1.5rem;
}
.accordion-inner-wrap {
    transition: 0.4s;
}
.accordion {
    font-family: "Urbanist-Bold", sans-serif;
    font-size: 1.5rem;
    color: #2C2C2C;
    background: transparent;
    border: none;
    padding: 0 2rem 0 0;
    width: 100%;
    text-align: left;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: center;
    display: flex;
    line-height: 1em;
    min-height: 7.75rem;
}
.accordion-inner-wrap:not(:last-of-type) .accordion {
    border-bottom: 1px solid #838382;
}
.accordion:focus {
    outline: none;
}
.accordion::after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f078";
    font-size: 1.25rem;
    color: #2C2C2C;
    float: right;
    margin: 0 0 0 1rem;
    align-self: center;
}
.accordion-active {
    color: #A6B852;
    border-bottom: 1px solid #838382;
}
.accordion-active::after {
    color: #AAB660;
    content: "\f077";
}
.accordion-note {
    font-family: "Urbanist-Medium", sans-serif;
    display: contents;
    color: #4D4D4F;
    font-size: 1.125rem;
}
.acc-panel {
    padding: 1rem 0;
    margin-top: .5rem;
    border-top: none;
    display: none;
    overflow: hidden;
}
.acc-panel ul {
    font-family: "Urbanist-Bold", sans-serif;
    font-size: 1.5rem;
    padding-left: 1.5rem;
}
.acc-panel ul ul {
    font-family: "Urbanist-Medium", sans-serif;
    list-style-type: inherit;
    padding-left: 1.25rem;
    font-size: 1.25rem;
}
.acc-panel ul ul ul {
    list-style-type: none;
    padding-left: 0;
}
.acc-panel ul ul ul li::before {
    content: "- ";
}
.acc-panel h2:first-child, .acc-panel h3:first-child,
.acc-panel h4:first-child, .acc-panel h5:first-child {
    margin-top: 0;
}
.acc-panel p:last-child,
.acc-panel ul:last-child,
.acc-panel ol:last-child,
.acc-panel div:last-child {
    margin-bottom: 0;
}
.acc-panel > .row > .col-xs-12 {
    margin-bottom: 1rem;
}
.accordion-panel-active {
    display: block;
}
/* ============================================================== Health Screening ============================================================== */
.hs-title {
    font-size: 2.813rem;
    margin-bottom: 1.5rem;
}
.hs-options {
    max-width: 1200px;
    display: flex;
    margin: 0 auto 5.5rem;
    row-gap: 1.5rem;
}
.hs-options > div {
    display: flex;
}
.hs-options a {
    color: #2C2C2C;
    line-height: 1.2;
    display: flex;
    padding: 2rem;
    justify-content: center;
    align-items: center;
    text-decoration: none; 
    border-radius: .75rem;
    flex: 1;
    column-gap: 2rem;
}
.hs-options .selected {
    border: 5px solid #AAB660;
    position: relative;
    cursor: auto;
}
.hs-options .selected h1 {
    color: #AAB660;
    margin-bottom: 0;
}
.hs-options .selected::after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 2.5rem;
    content: "\f00c";
    color: #FFF;
    padding: 1rem 1.25rem;
    background: #A6B852;
    border-radius: 50%;
    position: absolute;
    right: -1.5rem;
    bottom: -2.5rem;
}
.hs-options a img {
    max-width: 120px;
}
.hs-options .selected h1, 
.hs-options a span {
    font-family: "Urbanist-Bold", sans-serif;
    max-width: 295px;
    font-size: 2.313rem;
}
.hs-package {
    display: flex;
}
.hs-features {
    flex: 1;
}
.acc-panel .price-tag p {
    font-family: "Urbanist-Bold", sans-serif;
    font-size: 2.25rem;
    color: #A6B852;
    text-align: right;
}
/* ============================================================== Error Pages ============================================================== */
.error-pg img {
    margin: 3rem 0 4rem;
}
.error-pg .bkg-grey {
    padding: 2rem;
    margin-top: 2rem;
    width: 100%;
}
.error-pg .bkg-grey p a {
    text-decoration: none;
}
.error-pg .bkg-grey p:last-child {
    margin-bottom: 0;
}
/* ============================================================== Mobile Responsiveness (Media) ============================================================== */
/* Large Mobile Landscape, Tablets */
@media (max-width: 991px) {
    body, p, a.btn              { font-size: 1.125rem; }
    .container                  { padding-left: 1.5rem; padding-right: 1.5rem; }
    .pb-6                       { padding-bottom: .5rem; }
    .desktop-only               { display: none; }
    .mobile-only                { display: block; }
    h1, .h1, h2, .h2, .huge-para{ font-size: 2rem; }

    .main-header                                                    { box-shadow: none; }
    .navbar                                                         { padding: 0; position: relative; }
    .main-menu, .navbar .sub-menu                                   { width: 100%; }
    .main-menu                                                      { padding: 1rem 0; box-shadow: 0 0 1rem 0.25rem rgb(0 0 0 / 27%); z-index: 2;}
    .main-menu .container                                           { display: flex; justify-content: space-between; padding-right: 1rem; }
    .navbar-brand                                                   { margin-right: 0; }
    .navbar-brand img                                               { max-width: 170px; min-width: unset; }
    .navbar-toggler                                                 { padding-right: .75rem; }
    .sub-menu                                                       { position: absolute; top: 100%; }
    .sub-menu .navbar-collapse                                      { background: rgba(256, 256, 256, 0.95); height: 93.5vh; padding: 2rem 1.5rem;}
    .sub-menu .navbar-collapse li:has(.btn-close)                   { display: inline-block; }

    .dropdown-toggle, .navbar-nav .nav-link                         { display: inline-block; }
    .dropdown-toggle.show::after                                    { content: "\f077"; }
    .dropdown-menu                                                  { background-color: transparent; }
    .dropdown-item                                                  { display: inline-block; padding: 0.5rem 1rem 0.5rem 0; font-size: 1.125rem; }

    .nav-item.appointment                                           { order: -1; }
    .nav-item.appointment .dropdown-menu                            { display: block; width: auto; }
    .nav-item.appointment .btn                                      { padding: 0.875rem 2rem; margin-right: 2rem; }
    .nav-item:not(.appointment) .dropdown-item                      { font-weight: bold; }
    .nav-item.dropdown:not(.appointment) > .nav-link::after         { content: ""; }

    .home-banner-component::before                                                  { content: none; }
    .home-banner-component .container                                               { padding: 0; }
    .home-banner-swiper .swiper-slide                                               { max-height: unset; }
    .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-horizontal    { bottom: revert; }
    .home-banner-swiper .para-container                                             { padding: 2rem; }
    .home-banner-swiper .img-container                                              { position: relative; }
    .home-banner-swiper .img-container::before  { content: ''; position: absolute; bottom: 0; height: 20%; width: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5) 100%); }

    .card-title, .card-title a                                      { min-height: unset; }
    .card-body                                                      { padding: 1.5rem 1.125rem 3rem; }
    .card-body h5                                                   { font-size: 2rem ; margin-bottom: 1rem; }

    .button-section > ul                                            { flex-direction: column; align-items: center; }
    .button-section li                                              { width: 100%; max-width: 16.125rem; }
    .appointment-dropdown                                           { display: block; position: revert; background: revert; }

    .carousel-content-section .container                            { flex-direction: column; align-items: center; row-gap: 2rem; }
    .carousel-content-section .container .item                      { max-width: 360px; width: revert; }

    .container:has(.contact-us-banner-contents)                             { padding-top: 16.5rem; }
    .contact-us-banner-contents                                             { margin: 0 auto; width: 100%; padding-right: 1.5rem; }
    .contact-us-banner-contents p, .contact-us-banner-contents h1           { text-align: center; }
    .contact-us-banner-contents .button-section > ul                        { align-items: revert; }

    .visit-us-section                                                       { max-height: revert; flex-direction: column-reverse; } 
    .visit-us-section img                                                   { width: 100vw; margin: 0 -1.5rem; }
    .visit-us-section .left-content                                         { padding-right: 0; min-width: revert; }
    .visit-us-section .left-content p, .visit-us-section .left-content h4   { text-align: center; }

    .curvebox .leftinfo, .curvebox .rightinfo                       { padding: 1.75rem 1.75rem 2rem; }
    .curvebox:has(.rightinfo)                                       { border-radius: 0 4.375rem; }
    .curvebox h3                                                    { font-size: 2rem; }
    .curvebox p                                                     { font-size: 1rem; }

    .myhealth360 .row > div:not(.phoneimg)                          { display: flex; flex-direction: column; row-gap: 2rem; margin-top: 2rem; align-items: center; }
    .myhealth360 .text, .myhealth360 .images                        { width: 88%; min-width: unset; margin: 0;}
    .myhealth360 .download img                                      { width: 129px; height: 41px; }
    .myhealth360 .phoneimg                                          { margin-top: 5rem; text-align: center; }

    .footer                                                         { padding-top: 2.5rem; }
    .footer-media-content                                           { padding-left: 0; margin-left: revert; }
    .footer-bottom                                                  { border-top: none; padding-top: 0; }
    .footer-bottom .footer-links                                    { text-align: center; }
    .footer-bottom .copyright p, .footer-bottom .footer-links a     { font-size: .875rem; }
    .footer-bottom .copyright p                                     { border-top: 1px solid #707070; padding-top: 2rem; }
    .footer-bottom .footer-links ul                                 { padding: 0; display: flex; flex-wrap: wrap; column-gap: 5%; justify-content: space-evenly; margin: 0 auto 1rem; max-width: 450px; }
    .footer-bottom .footer-links li                                 { margin-left: 0; }

    .our-doctors .button-section .btn                       { max-width: 20rem; }
    .doctors-section h1                                     { font-size: 2rem; }
    .doctors-section .image                                 { text-align: center; }
    .doctors-section .image-box                             { min-width: unset; text-align: center; padding-bottom: .75rem; }
    .doctors-section .image-box img                         { max-width: 252px; }
    .doctors-section .details                               { padding-top: .75rem; }
    .doctors-section .details a.btn                         { width: 100%; max-width: unset !important; }
    .doctors-section .truncate-moreless                     { margin-bottom: 1rem; }
    .doctors-section .appointment-btn                       { position: unset; padding: 0; }
    .doctors-section .appointment-btn .btn                  { width: 100%; max-width: unset; }
    .doctors-section .appointment-btn .btn + ul             { line-height: 2; background: transparent; }
    .doctors-section .pagination                            { column-gap: .5rem; }
    .doctors-section .pagination li                         { width: 2.75rem; }
    .doctors-section .pagination li a                       { padding: .5rem; }
    .doctors-section .details:has(.appointment-btn) .doc    { padding-right: 0; }

    .accordion                                      { font-size: 1.2rem; min-height: 6rem; padding: 1.5rem 1.25rem 1.5rem 0; }
    .acc-panel ul, .acc-panel ul ul                 { font-size: 1rem; padding-left: 1.25rem; }
    .acc-panel .price-tag p                         { font-size: 2rem; }
    
    .hs-title                                       { font-size: 2rem; }
    .hs-options                                     { margin-bottom: 3rem; }
    .hs-options > div                               { padding: 0; }
    .hs-options a                                   { column-gap: .625rem;}
    .hs-options a img                               { max-height: 82px; width: 100%; }
    .hs-options .selected h1, .hs-options a span    { max-width: revert; font-size: 1.75rem; }
    .hs-options .selected::after                    { font-size: 1.5625rem; padding: .625rem .78125rem; right: -1rem; bottom: -1rem; }

    .hs-features .row                               { row-gap: .75rem; }
    .hs-features ul li:not(:last-child)             { margin-bottom: .75rem; }
    .hs-features ul li li:not(:last-child)          { margin-bottom: 0; }
    .banner-section img                             { max-height: unset; }
}
/* Small Tablet Landscape/Portrait, Mobile Landscape */
@media (max-width: 767px) {
    .myhealth360                                { height: auto; }
    .myhealth360 .text, .myhealth360 .images    { text-align: center; font-size: 1.5rem; width: 100%; }
    .myhealth360 .download a                    { display: block; margin-bottom: .75rem; }
    .myhealth360 .phoneimg .for-d               { display: none; }
    .myhealth360 .phoneimg .for-m               { display: inline; }
    .banner-section img                         { min-height: unset; }
}
/*Very Small*/
@media (max-width: 500px) {
    .doctors-section .appointment-btn li a span.phone-number { display:block; padding-left: 39px;}
}
/*ourservices*/
/* ============================================================== Homepage - Overview Card Slider ============================================================== */
.carouselslider                 { position: relative; }
.carouselslider .slick-list     { padding: 0 5% 0 0; }
.carouselslider .slick-slide 	{ margin: 0 1.5rem 0 0; }
.carouselslider .slide-item     { width: 100%; border-radius: 8px; overflow: hidden; }
.carouselslider .arr-left, .carouselslider .arr-right   { position: absolute; top: 35%; cursor: pointer; z-index: 1; } 
.carouselslider .arr-left       { left: 0; }
.carouselslider .arr-right      { right: 0; width: 80px; }
.slide-item img                 { width: 100%; }
.slide-info	                    { border-radius: 0 0 8px 8px; overflow: hidden; padding: 1.5rem; background-color: #FFF; }
.carouselslider .slide-title	        { font-family: "Urbanist", sans-serif; line-height: 1.2em; font-size: 1.75rem; }
.carouselslider .slide-title a          { text-decoration: none; }
.carouselslider .slide-title a:hover    { color: var(--neutral-1); text-decoration: underline; }
.slide-text	        { height: 280px; overflow: auto; }
.slide-text	 strong, .slide-text p { font-family: "Urbanist", sans-serif !important;}
.slide-link	        { text-align: right; margin-top: auto; }
.slide-link a.btn   { padding: 0.5rem 0.75rem; min-width: 160px; }
@media(max-width:991.5px){ 
    .carouselslider .arr-right      { display: none !important; }
}
/* ============================================================== Homepage - OurServices Card Slider ============================================================== */
.ourservices                    { margin: 0 -16px; }
.ourservices .slide-info        { display: flex; flex-direction: column; height: 240px;}
.ourservices .slide-item img    { max-height: 240px; } 
.slick-color-1  { background-color: #EDEDED;}
.slick-color-2  { background-color: #80BDDD; }
.slick-color-3  { background-color: #EDC647; }
.slick-color-4  { background-color: #A8B852; }
.slick-color-5  { background-color: #EA765F; }
.slick-color-6  { background-color: #ECAA4B; }
.ourservices .slide-title	    { margin-bottom: 1.5rem; } 
.ourservices .slide-text	    { height: unset; overflow: hidden; font-family: "Urbanist", sans-serif; }