:root {
    --white: #FFF;
    --primary: #28A838;
    --primaryLight: #50c05f;
    --primaryDarker: #404040;
    --primaryBuble: #CCDAFC;

    --secondaryBlue: #2AA7FF;
    --secondaryYellow: #FFB300;
    --secondaryGreen: #4CD080;
    --secondaryRed: #FF684C;
    --secondaryNavy: #1B3C74;

    --textMine: #1B3C74;
    --textBlack: #404040;
    --textGray: #9D9D9D;
    --textLine: #DDE5E9;
    --textBackground: #F4F4FA;
}

body {
    margin: 0;
    font-family: 'Albert Sans', sans-serif;
    text-rendering: auto;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    cursor: default;
    color: var(--textBlack);
    background: var(--textBackground);
}

img {
    width: 100%;
}

.font-1 {
    font-family: 'DM Serif Display', sans-serif;
}

.text-mine {
    color: var(--textMine);
}

.link {
    cursor: pointer;
}

.rounded-mine {
    border-radius: 16px;
}

.underline {
    text-decoration: none;
    transition: all .3s ease-in-out;
}

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

.navbar {
    z-index: 100;
    position: absolute;
    top: 0;
    width: 100%;
}

.nav-sticky {
    position: sticky;
    z-index: 99;
    box-shadow: 0 2px 5px #00000010;
	background: #f4f4fa50;
    animation: show 1s ease;
}

@keyframes show {
    from {
        transform: translateY(-100px);
    }
    to {
        transform: translateY(0)
    }
}

.navbar-brand {
    color: var(--textBlack);
    display: flex;
    align-items: center;
}

.navbar-brand img {
    width: 40px;
    height: 40px;
    margin-right: 6px;
}

.navbar-brand .title-text {
    position: relative;
    top: 3px;
}

.navbar-brand small {
    display: block;
    position: relative;
    top: -6px;
    font-size: 14px;
}

.navbar-nav.mx-auto .nav-link {
    position: relative;
    overflow: hidden;
    padding: .1rem;
    margin: 0 .5rem;
    font-weight: bold;
    color: var(--textGray);
    transition: all .3s ease-in-out;
}

.navbar-nav.mx-auto .nav-link:before {
    content: "";
    position: absolute;
    top: 4px;
    left: -1px;
    width: 0%;
    height: 16px;
    background-color: #e9e906;
    z-index: -1;
    transition: all .3s ease-in-out;
}

.navbar-nav .nav-link:hover:not(.btn),
.navbar-nav .nav-link.active {
    color: var(--textBlack) !important;
}

.navbar-nav .nav-link:hover::before,
.navbar-nav .nav-link.active::before {
    width: 50%;
}

.icon-live {
    top: 1px;
    position: relative;
    border-radius: 10px;
    margin: 0;
    width: 12px;
    height: 12px;
    background-color: transparent
}

.icon-live:before {
    left: -2px;
    top: -1px;
    position: absolute;
}

.margin-for-top {
    padding-top: 9em !important;
}

.with-bg {
    background-color: var(--white);
    background-image: url('../images/bg_web.png');
    background-size: cover;
}

.style-ol {
    counter-reset: my-awesome-counter;
    list-style: none;
    padding-left: 0;
    position: relative;
}

.style-ol > li {
    counter-increment: my-awesome-counter;
    padding-left: 20px;
}

.style-ol > li::before {
    content: counter(my-awesome-counter) ".";
    position: absolute;
    left: 0;
    font-family: sans-serif;
}

#banner {
    background-color: var(--white);
    background-image: url('../images/bg_web.png');
    background-size: cover;
    overflow: hidden;
}

#banner .carousel {
    padding-top: 15em;
    padding-bottom: 7em;
}

#banner .carousel-control-next,
#banner .carousel-control-prev {
    position: relative;
    top: unset;
    bottom: unset;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 45px;
    font-size: 1.5rem;
    padding: 0;
    color: var(--secondaryYellow);
    background: #ffb30040;
    border: 0;
    border-radius: 8px;
    opacity: 1;
    transition: all .3s ease;
}

#banner .carousel-control-next:hover,
#banner .carousel-control-prev:hover {
    color: var(--white);
    background: var(--secondaryYellow);
}

#banner .big-one {
    position: absolute;
    width: auto;
    height: 590px;
    right: 70px;
    bottom: -7em;
    z-index: 1;
    filter: drop-shadow(1px 0px 10px #00000020) brightness(1.15);
    transform: scaleX(-1);
}

#banner .big-one-text {
    padding: 8px 18px 8px 45px;
    border-radius: 12px;
    color: var(--white);
    background-color: var(--secondaryRed);
    font-size: 1em;
    position: absolute;
    right: 493px;
    bottom: 26em;
    z-index: 2;
}

#banner .big-one-text > i {
    color: var(--secondaryGreen);
    top: 8px;
    left: 16px;
    position: absolute;
    margin-right: 4px;
    font-size: 22px;
}

#services,
#services-list {
    padding-top: 7em;
    padding-bottom: 7em;
}

#services .row > .col-12 i.bx {
    font-size: 36px;
}

#services .row > .col-12:nth-child(1) i.bx {
    color: var(--secondaryBlue);
}

#services .row > .col-12:nth-child(2) i.bx {
    color: var(--secondaryRed);
}

#services .row > .col-12:nth-child(3) i.bx {
    color: var(--secondaryGreen);
}

#services .row > .col-12:nth-child(4) i.bx {
    color: var(--secondaryYellow);
}

#services .img-left {
    width: 90%;
    height: 320px;
    object-fit: cover;
    border-radius: 16px;
}

#services .img-right {
    width: 90%;
    height: 220px;
    object-fit: cover;
    border-radius: 30px 10px 30px 10px;
}

.card-min {
    box-shadow: 0 2px 10px #33333305 !important;
}

.card-custom {
    border-color: transparent !important;
    background-color: transparent !important;
    box-shadow: 0 0 0 transparent !important;
    border-radius: 4px !important;
}

.card-custom:hover {
    border-color: var(--textBackground) !important;
    background-color: #FFF !important;
    box-shadow: 0 2px 8px #33333310 !important;
}

.card-services:hover {
    border-color: #1b3c7480 !important;
    background-color: #c4f4fa50 !important;
    box-shadow: 0 2px 8px #33333320 !important;
}

#emergency {
    background-color: var(--white);
    background-image: url('../images/bg_web.png');
    background-size: cover;
    padding-top: 7em;
    padding-bottom: 25em;
}

.wrap-emergency {
    background-color: var(--secondaryBlue);
    border-radius: 13px;
    padding: 20px;
    display: flex;
    align-items: center;
    width: 72%;
    color: var(--white);
}

.wrap-emergency i {
    background-color: #56b8ff;
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 26px;
    border-radius: 50%;
    text-align: center;
    margin-left: 10px;
    margin-right: 20px;
}

#appointment {
    position: relative;
    margin-top: -220px;
    padding-top: 2em;
    padding-bottom: 3em;
}

#appointment .nav {
    width: fit-content !important;
    border-radius: 14px;
    padding: 3px;
    background-color: #00000015;
    margin: 20px auto 10px;
    border-bottom: 0;
}

#appointment .nav-tabs .link {
    height: 45px;
    padding: 0 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

#appointment .nav-tabs .link.active {
    background-color: var(--secondaryNavy);
    color: var(--white);
}

#appointment .appointment-why {
    width: 90%;
    height: 270px;
    object-fit: cover;
    border-radius: 20px;
    margin-top: 10px;
}

.icon-circle {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    font-size: 22px;
}

#testimonials {
    background-color: var(--white);
    background-image: url('../images/bg_web.png');
    background-size: cover;
    padding-top: 7em;
    padding-bottom: 7em;
}

#testimonials .carousel .card {
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 0;
    border-color: #f1f3ff;
    background-color: var(--white);
    margin-bottom: 14px;
    transition: all .3s ease-in-out;
}

#testimonials .carousel .card:hover {
    border-color: var(--white);
    background-color: var(--white);
}

#testimonials .carousel-control-next,
#testimonials .carousel-control-prev {
    position: relative;
    top: unset;
    bottom: unset;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 45px;
    font-size: 1.5rem;
    padding: 0;
    color: var(--secondaryBlue);
    background: #f1f3ff;
    border: 0;
    border-radius: 8px;
    opacity: 1;
    transition: all .3s ease;
}

#testimonials .carousel-control-next:hover,
#testimonials .carousel-control-prev:hover {
    color: var(--white);
    background: var(--secondaryBlue);
}

.testimoni-foto {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    padding: 0;
    margin: 0;
    border-radius: 12px;
    object-fit: cover;
}

.rating {
    display: flex;
    align-items: center;
}

.rating i {
    font-size: 20px;
    margin-right: 4px;
    color: var(--textLine);
}

.rating i.check {
    color: var(--secondaryYellow);
}

#doctor {
    padding-top: 7em;
    padding-bottom: 10em;
}

#doctor .doctor-img {
    position: absolute;
    bottom: 0;
    width: 90%;
    height: 340px;
    object-fit: contain;
    object-position: bottom;
    opacity: .9;
}

#doctor .card {
    background-color: var(--white);
    background-image: url('../images/bg_web.png');
    background-size: cover;
    overflow: hidden;
    height: 450px;
}

#doctor .card:hover > .doctor-bio {
    opacity: .9;
    bottom: 0;
}

.doctor-bio {
    position: absolute;
    left: 0;
    bottom: -50px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity .7s ease-in-out, bottom .3s linear;
    background-image: linear-gradient(to top, #00000020 17%, transparent);
}

.bio-darker {
    background: #00000070;
    height: 100%;
    padding-top: 100px;
    line-height: 1.7;
    color: white;
    bottom: -460px;
    transition: opacity .7s ease-in-out, bottom .4s linear;
    overflow: auto;
}

.doctor-bio a {
    font-size: 22px;
    color: var(--secondaryBlue);
    background-color: var(--white);
    margin: 0 5px 25px;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 2px 8px #00000020;
    transition: all .3s ease-in-out;
}

.doctor-bio a:hover {
    background-color: var(--secondaryBlue);
    color: var(--white);
}

#location .wrap-maps {
    overflow: hidden;
    border-radius: 20px;
    height: 450px;
    box-shadow: 0 2px 8px #00000010;
}

/* Captcha */
#captcha-image {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 10px;
    user-select: none;
    font-family: 'Consolas', Courier, monospace;
    font-style: italic;
    font-size: x-large;
    font-weight: 400;
    letter-spacing: 3px;
    border: red 1px solid;
}

/* Footer */
footer {
    padding-top: 8em;
    background: linear-gradient(to top, #E8FCFE, #FFFFFF00);
}

.footer-logo {
    width: 52px;
    height: 52px;
    margin-right: 10px;
}

.social a {
    font-size: 20px;
    color: var(--secondaryBlue);
    background-color: var(--white);
    margin: 0 15px 0 0;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 2px 8px #00000010;
    transition: all .3s ease-in-out;
}

.social a:hover {
    background-color: var(--secondaryBlue);
    color: var(--white);
}

.quick-link i.bx {
    position: relative;
    margin-left: -4px;
    top: 1px;
}

/* Custom css bootstrap */
.btn {
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
}

.card {
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px #33333310;
    border-color: var(--textBackground);
    background-color: #FFF;
    transition: all .3s ease-in-out;
}

.card.active {
    box-shadow: 0 3px 10px #33333350;
    border-color: #9eb1cc;
    background-color: #c4d9f8;
}

.form-control,
.form-select {
    font-size: 15px;
    border-radius: 12px;
    border-color: #E5E5E5;
    transition: all .3s ease-in-out;
}

.form-control:hover,
.form-select:hover {
    border-color: #83cbff;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--secondaryBlue);
    box-shadow: 0 0 0 0.20rem #2AA7FF40;
}

.form-control[readonly] {
    background-color: unset;
}

.form-select {
    color: #6C757D;
    transition: all .15s ease-in-out;
}

.form-floating > .form-control,
.form-floating > .form-select {
    border-radius: 10px;
    font-weight: bold;
}

.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 1.65rem;
    padding-bottom: 0.3rem;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    transform: scale(.80) translateY(-.4rem) translateX(.15rem);
}

.carousel-inner {
    z-index: 10;
}

.btn-password {
	position: absolute;
	right: 10px;
	top: 12px;
	width: 34px;
	height: 34px;
	line-height: 34px;
	font-size: 18px;
	color: #666;
	background-color: transparent;
	border: 0;
	border-radius: 12px;
	z-index: 110;
}

.btn-password + label.error {
	padding-right: 55px;
}

.badge {
    padding: .25em .4em .32em;
}

.modal-content {
    border-radius: 10px;
}

.modal-title {
    color: var(--textGray);
}

.modal-body h6 {
    line-height: 1.6;
}

.toast {
    width: auto;
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1em;
    border-radius: 10px;
    background-color: #FFF;
    overflow: hidden;
    z-index: -1;
}

.toast.show,
.toast.hide {
    z-index: 1111;
}

.toast-body {
    padding: 1em 2em 1em 1.6em;
    font-weight: 600;
}

.toast .btn-close {
    width: 5px;
    height: 5px;
    box-shadow: none;
}

.toast-body:before {
    content: "";
    width: 6px;
    height: 42px;
    background-color: var(--primary);
    border-radius: 6px;
    position: absolute;
    left: 6px;
    top: 5px;
}

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .show > .nav-link {
    color: unset;
}

/* Light Custom */
.bg-light-light {
    color: #181c32;
    background-color: #f3f6f9;
}

.btn-light {
    color: #181c32;
    background-color: #f3f6f9;
    border-color: #f3f6f9;
    box-shadow: none;
}

.btn-light:hover,
.btn-light:focus {
    color: #181c32;
    background-color: #dae3ec;
    border-color: #d1dde8;
}

.btn-light:focus {
    box-shadow: 0 0 0 .2rem rgba(210, 213, 219, .5);
}

.bg-light-success {
    color: #0bb783;
    background-color: #d7f9ef !important;
}

.btn.btn-light-success {
    color: #0bb783;
    background-color: #d7f9ef;
    border-color: transparent;
}

.btn.btn-light-success:hover,
.btn.btn-light-success:focus {
    color: #fff;
    background-color: #0bb783;
}

.btn.btn-light-success:focus {
    box-shadow: 0 0 0 .2rem rgba(11, 183, 131, .3);
}

.bg-light-primary {
    color: #2AA7FF;
    background-color: #e6f5ff;
}

.btn.btn-light-primary {
    color: #2AA7FF;
    background-color: #e6f5ff;
    border-color: transparent;
}

.btn.btn-light-primary:hover,
.btn.btn-light-primary:focus {
    color: #fff;
    background-color: #2AA7FF;
}

.btn.btn-light-primary:focus {
    box-shadow: 0 0 0 .2rem #2AA7FF50;
}

.bg-light-info {
    color: #8950fc;
    background-color: #eee5ff;
}

.btn.btn-light-info {
    color: #8950fc;
    background-color: #eee5ff;
    border-color: transparent
}

.btn.btn-light-info:hover,
.btn.btn-light-info:focus,
.btn.btn-light-info.hovered {
    color: #fff;
    background-color: #8950fc;
}

.btn.btn-light-info:focus {
    box-shadow: 0 0 0 .2rem #8950fc50;
}

.bg-light-warning {
    color: #ffa800;
    background-color: #fff4de;
}

.btn.btn-light-warning {
    color: #ffa800;
    background-color: #fff4de;
    border-color: transparent
}

.btn.btn-light-warning:hover,
.btn.btn-light-warning:focus {
    color: #fff;
    background-color: #ffa800;
}

.btn.btn-light-warning:focus {
    box-shadow: 0 0 0 .2rem #ffa80050;
}

.bg-light-danger {
    color: #f64e60;
    background-color: #ffe2e5;
}

.btn.btn-light-danger {
    color: #f64e60;
    background-color: #ffe2e5;
    border-color: transparent
}

.btn.btn-light-danger:hover,
.btn.btn-light-danger:focus {
    color: #fff;
    background-color: #f64e60;
}

.btn.btn-light-danger:focus {
    box-shadow: 0 0 0 .2rem #f64e6050;
}

.pulse {
    animation: pulse 2s infinite;
}

.pulse-danger {
    animation: pulseDanger 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 #4ae2b5;
    }
    70% {
        box-shadow: 0 0 0 14px #2cc79800;
    }
    100% {
        box-shadow: 0 0 0 0 #2cc79800;
    }
}

@keyframes pulseDanger {
    0% {
        box-shadow: 0 0 0 #fc7481;
    }
    70% {
        box-shadow: 0 0 0 14px #fc748100;
    }
    100% {
        box-shadow: 0 0 0 0 #fc748100;
    }
}

@supports (backdrop-filter: none) {
	.nav-sticky {
        backdrop-filter: saturate(180%) blur(20px);
	}

    .bio-darker {    
        backdrop-filter: blur(8px);
    }
}

@supports not (backdrop-filter: none) {
    .nav-sticky {
        background-color: #06183670;
        box-shadow: 0 0 0;
    }

    .nav-sticky .navbar-nav.mx-auto .nav-link::before {
        background-color: #1B3C74;
    }

    .nav-sticky .navbar-nav.mx-auto .nav-link,
    .nav-sticky .navbar-brand .title-text {
        color: #FFF;
    }
}

/* Jquery Validate */
.form-control.error:focus,
.form-select.error:focus {
	box-shadow: 0 0 0 0.2rem rgba(253, 7, 7, 0.2);
	border-color: #fe8686;
}

.form-check > label.error {
	position: absolute;
	top: 0;
	margin: 2px;
	right: 13px;
}

label.error {
	position: relative;
	margin: 5px 0 10px 0;
	font-size: 12px;
	color: #c32c27;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	display: block;
	transform: none !important;
}

.form-floating label.error {
	position: absolute;
	top: -3px;
	right: 0;
	left: unset;
	width: auto;
	z-index: 110;
}

select + label.error,
.form-select + label.error {
	right: 20px;
}

.form-password + label.error {
    right: 32px;
}

/* custom toast */
.custom-toast-container {
    font-family: 'Albert Sans', sans-serif;
    font-size: 1em
}

.custom-toast-container:before {
    position: fixed;
    content: "";
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #00000070;
    left: 0;
    top: 0;
}

.custom-toast {
    width: 350px;
}

.custom-toast > button {
    top: -1px;
    right: -8px;
}

/* scribble img */
.scribble_1 {
    position: absolute;
    width: 120px;
    right: 5em;
    top: -3em;
    opacity: .8;
}

.scribble_2 {
    position: absolute;
    width: 70px;
    left: 23em;
    bottom: 5em;
}

.scribble_4 {
    position: absolute;
    width: 50px;
    left: -9em;
    top: 2em;
}

.wrap_scribble_4 {
    position: absolute;
    left: -11em;
    top: 3em;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #ddf3ff;
}

.scribble_5 {
    position: absolute;
    width: 70px;
    left: 2em;
    top: 30em;
}

.wrap_scribble_6 {
    position: absolute;
    right: -8em;
    top: 40em;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: #ffe7e590;
}

.scribble_6 {
    position: absolute;
    width: 80px;
    right: -8em;
    top: 39em;
}

.scribble_7 {
    position: absolute;
    width: 80px;
    right: 8em;
    top: -2em;
}

.scribble_8 {
    position: absolute;
    width: 120px;
    left: 11em;
    top: 27em;
    opacity: .6;
}

.scribble_9 {
    position: absolute;
    width: 80px;
    right: 1em;
    top: 2em;
}

.scribble_10 {
    position: absolute;
    width: 100px;
    left: 1em;
    top: 20em;
    filter: saturate(2) brightness(.8);
    opacity: .4;
}

.scribble_11 {
    position: absolute;
    width: 100px;
    right: 11em;
    top: 23em;
    z-index: -1;
}

.scribble_12 {
    position: absolute;
    width: 70px;
    right: -8em;
    top: 58em;
    filter: invert(1);
    opacity: .6;
}

.scribble_13 {
    position: absolute;
    width: 120px;
    left: 4em;
    top: 60em;
    filter: invert(1);
    opacity: .2;
}

.scribble_14 {
    position: absolute;
    width: 140px;
    right: 2em;
    top: 31em;
}

.scribble_15 {
    position: absolute;
    width: 100px;
    left: -6em;
    top: 3em;
    filter: invert(1);
    opacity: .5;
}

.scribble_16 {
    position: absolute;
    width: 60px;
    right: -8em;
    top: -2em;
    transform: rotate(190deg);
    filter: saturate(2);
}

.scribble_17 {
    position: absolute;
    width: 90px;
    left: -8em;
    top: 28em;
    opacity: .6;
}

.scribble_18 {
    position: absolute;
    width: 100px;
    right: -2em;
    top: -6.5em;
    transform: rotate(4deg);
}

.scribble_19 {
    position: absolute;
    width: 110px;
    left: 0em;
    top: -1em;
    z-index: -1;
}

/* Responsive */
@media screen and (max-width: 992px) {
    .navbar-dark .navbar-toggler {
        color: #28146e;
        border-color: #28146e60;
        border-width: 1px;
        border-radius: 10px;
    }

    .navbar-dark .navbar-toggler:focus {
        box-shadow: 0 0 0 0.2rem #00000020;
    }

    .navbar-dark .navbar-toggler-icon {
        filter: invert(1);
    }

    .navbar-collapse {
        padding: 10px;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 2px 8px #33333310;
        margin-top: 10px;
        margin-bottom: 15px;
    }

    .navbar-nav.mx-auto .nav-link {
        padding: 10px 0;
        text-align: center;
    }

    .navbar-dark .navbar-nav .nav-link.active,
    .navbar-dark .navbar-nav .show > .nav-link {
        color: var(--secondaryNavy);
        text-decoration: underline;
    }

    .navbar-nav .nav-link.btn {
        width: fit-content;
        margin: 0 auto 8px;
    }

    #banner .big-one {
        right: 0;
        height: 420px;
    }

    #banner .big-one-text {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    #emergency .w-75 {
        margin-bottom: 70px;
    }
}

@media screen and (max-width: 460px) {
    #banner .big-one {
        /* display: none; */
        opacity: 0.3;
        filter: blur(1px);
    }

    #banner .carousel {
        padding-top: 13em;
    }

    #banner .carousel-item,
    #banner .banner-stats {
        text-align: center;
    }

    #banner .carousel-inner .w-50 {
        width: 100% !important;
    }

    #banner .banner-stats .justify-content-end {
        margin-top: 40px;
        justify-content: center !important;
    }

    #services .col-md-3 .card {
        border-color: var(--textBackground) !important;
        background-color: #FFF !important;
        box-shadow: 0 2px 8px #33333310 !important;
    }

    #services .img-left {
        width: 90%;
        height: 220px;
    }

    #services .img-right {
        width: 60%;
        height: 330px;
    }

    #emergency .w-75 {
        width: 100% !important;
    }

    #emergency .w-50,
    #emergency .w-50 + .w-75 {
        width: 100% !important;
    }

    #emergency .wrap-emergency {
        width: 100%;
        margin-top: 100px;
    }

    #appointment .card.card-custom {
        border-color: var(--textBackground) !important;
        background-color: #FFF !important;
    }

    #appointment .appointment-why {
        height: 220px;
    }

    #doctor .card {
        margin-bottom: 30px;
    }

    footer .col-12.col-md-4,
    footer .col-12.col-md-3 {
        margin-bottom: 50px !important;
    }

    .toast {
        width: 90%;
        left: 5%;
        transform: unset;
    }

    .toast .btn-close {
        position: absolute;
        right: 0;
    }
    
    .custom-toast-container {
        width: 100%;
    }

    .custom-toast {
        width: calc(100% - 1rem);
    }

    .scribble_2 {
        left: unset;
        right: 22px;
        bottom: -2em;
    }

    .scribble_5 {
        width: 43px;
        left: unset;
        right: 2em;
        top: 24em;
        transform: scaleX(-1);
    }

    .scribble_6 {
        right: 2em;
        top: 82em;
    }

    .scribble_7 {
        width: 60px;
        right: 2em;
        top: -5em;
    }

    .scribble_10 {
        top: 44em;
    }

    .scribble_13 {
        width: 100px;
        left: unset;
        right: 2em;
        top: 78em;
        transform: scaleX(-1);
    }

    .scribble_14 {
        right: 1em;
        top: 34em;
    }

    .scribble_15 {
        width: 85px;
        left: 1em;
        top: -2em;
        opacity: 0.3;
    }

    .scribble_18 {
        right: .5em;
    }
}

@media screen and (max-width: 390px) {
    #appointment .nav-tabs .link {
        width: 100%;
    }

    #appointment .nav-tabs .link:first-child {
        margin-bottom: 5px;
    }
}

/* new scrollbar */
::-webkit-scrollbar {
    background-color: #FFF;
    width: 10px
}

::-webkit-scrollbar-track {
    background-color: #FFF;
}

::-webkit-scrollbar-thumb {
    background-color: #AAA;
    border-radius: 16px;
    border: 3px solid #FFF;
}