@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Nastaliq+Urdu:wght@400..700&display=swap');

html, body { font-family: "Montserrat", sans-serif; }
body { background-color: #E2E2E2;}

.navbar-brand-img {  width: 170px; }

.navbar-nav .nav-link { padding: 0.5rem 1rem; font-size: 1rem; }

.btn-primary { font-size: 0.9rem; padding: 0.5rem 1rem; }

.btn-success { background-color: #32BD79; font-weight: 500; text-transform: uppercase;font-size: 12px; }
.navbar-nav .nav-item .nav-link { font-weight: 600; text-transform: uppercase; font-size: 12px; }

.hero-section .container { border-radius: 10px; }
.hero-section .container .card{ min-height: 540px; }
.hero-section .container .card .card-body{ display: flex; flex-direction: column; justify-content: center; align-items: center; padding-left: 5px;}

.meet-our-doctors .container .card { border-radius: 12px; height: 600px; }
.meet-our-doctors .container .card .doctor-info { z-index: 1; background: #171717bf; height: calc(100% - 40px); width: calc(100% - 40px); margin: auto; padding: 25px; border-radius: 10px; opacity: 0;}
.meet-our-doctors .container .card:hover .doctor-info { cursor: default; opacity: 1; transition: opacity 0.3s ease-in-out;}
.meet-our-doctors .container .card .doctor-info .doctor-name { color: white; font-size: 32px; font-weight: 600;}
.meet-our-doctors .container .card .doctor-info .doctor-sub { color: white; font-size: 20px; font-weight: 400; line-height: 22px; margin-bottom: 0px;}
.meet-our-doctors .container .card .back-image { height: 100%; width: 100%; position: absolute; z-index: 0; object-position: center; object-fit: cover; border-radius: 10px; }

.payment-section .container { background-color: #213A57; border-radius: 8px; }

.footer-section h5 { height: 30px; }
.footer-section .list-unstyled li { margin-bottom: 10px; }
.footer-section .list-unstyled li a { color: #969696; margin-bottom: 10px; }

.footer-section .input-group .input-group-text,
.footer-section .input-group .form-control  { background-color: #323842; font-size: 14px; }

.footer-section .input-group .form-control::placeholder { color: #969696; }
.footer-section .logo-container p { color: #969696; }


.border-color-gray { border: 1px solid #C2C2C2 !important; }
.background-color-gray { background-color: #F6F6F6 !important; }
.background-color-blue { background-color: #213A57 !important; }
.text-color-white { color: #ffffff !important; }

.reverse-column-mobile .how-works-section .card-body img { height: 270px; }
    
@media (min-width: 768px) {
    .payment-section .container img{ width: 175px; height: auto; }
    .hero-section .box-left h2.card-title { font-size: 52px; font-weight: 600; }
    .hero-section .box-left p.card-text { font-size: 24px; font-weight: 400; }
    .navbar-nav .nav-item .nav-link { padding: 0 20px; }
    .border-color-gray-md { border: 1px solid #C2C2C2 !important; }
    img.border-color-gray { border-radius: 5px; }
}