@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap');

/* Merged styles from style.css and css/style.css */

/* General styles for FAQ and Blog pages */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    font-family: "Barlow", sans-serif;
    color: var(--body);
    line-height: 1.8; /* Increased line height for better readability */
    background-color: #f9f9f9; /* Light background for better contrast */
    padding-top: calc(var(--common-navbar-height, 70px) + 100px); /* Add 100px padding to all screen sizes */
    overflow-x: hidden; /* Added overflow-x: hidden to prevent horizontal scrolling */
}

html {
    height: 100%;
}

#common-footer {
    margin-top: auto;
}

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

.bg-cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

img {
    width: 100%;
}

a {
    color: var(--dark);
    transition: all 0.4s ease;
    font-weight: 500;
}

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

section {
    padding: 1% 0;
    margin-bottom: 40px; /* Add gap between sections */
}

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


.hero-slider .owl-prev,
.hero-slider .owl-next{
    background-color: rgba(24, 194, 216, 0.3) !important;
    width: 60px !important;
    height: 60px !important;
    display: grid;
    place-items: center;
    color: #fff !important;
    border-radius: 100px;
    font-weight: 600 !important;
    font-size: 12px !important;
    transition: all 0.4s ease;
    position: absolute;
    top: 50%;
    margin-top: -30px !important;
}

.owl-prev {
    left: 0;
}

.owl-next {
    right: 0;
}

.hero-slider .owl-prev:hover,
.hero-slider .owl-next:hover {
    background-color: var(--brand) !important; 
}

.owl-dot.active span{
    background-color: var(--brand) !important;
}


/* slide */
.slide {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.slide1, .slide2, .slide3 {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.slide1 {
    background-image: url(../img/post_operative/pcl_rehab.webp);
}

.slide2 {
    background-image: url(../img/post_operative/ACL_rehab.webp);
}

.slide3 {
    background-image: url(../img/shoulder/Tapping_landing.webp);
}

.slide .display-3 {
    text-transform: uppercase;
    color: #fff;
}

/* navbar */
.top-nav {
    /* background-color: #2eb194; Match header background */
    /* color: #fff; */
    /* padding: 10px 0; Consistent padding */
    font-size: 14px; /* Slightly larger font for better visibility */
    flex-wrap: nowrap !important;
    margin-right: 5px;
}


.top-nav p {
    display: inline-block;
    margin-bottom: 0;
    margin-right: 10px;
}

.top-nav span,
.top-nav i {
    vertical-align: middle;
}

.navbar {
    box-shadow: var(--shadow);
}

.navbar .navbar-nav .nav-link {
    color: #ffffff; /* Ensure text is visible */
    font-weight: 500; /* Slightly bolder text */
    /* padding: 10px 15px; Better spacing for clickable area */
    transition: color 0.3s ease; /* Smooth hover effect */
}

.navbar .navbar-nav .nav-link:hover {
    color: #d64022; /* Highlight color on hover */
}

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

.navbar-brand {
    font-size: 24px; /* Larger brand text */
    font-weight: 700;
    color: #fff;
}

.navbar-brand .dot {
    color: var(--brand);
}

.btn {
    padding: 8px 26px;
}

.btn-brand {
    border-color: var(--brand);
    background-color: var(--brand);
    color: #fff;
}

.btn-brand:hover {
    background-color: #d64022;
    border-color: #d64022;
    color: #fff;
}

.intro {margin-bottom: 36px;
text-align: center;}

.intro p {
    max-width: 500px;
}
.intro h6{
    color: var(--brand);
    font-weight: 400;
    text-transform: uppercase;
}

.intro h1 {
    margin-top: 15px;
    margin-bottom: 15px;
}

.info-box {
    align-items: center;
    display: flex;
}

.info-box img {
    width: 90px;
}


#milestone {
    background: linear-gradient(rgba(46, 177, 148, 0.85), rgba(46, 177, 148, 0.85)), url(img/hd-images/knee_pain.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#milestone h1,
#milestone p {
    color: #fff;
}

.service {
    padding: 32px;
    background-color: #fff;
    box-shadow: var(--shadow);
}

.service h5 {
    margin-top: 24px;
    margin-bottom: 14px;
}

.service img {
    width: 100%;
}


.project {
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.project h6 {
    font-weight: 400;
}

.project h6::before {
    content: "";
    height: 2px;
    width: 30px;
    display: inline-block;
    background: var(--brand);
    vertical-align: middle;
    margin-right: 10px;
}


/* .project .overlay {
    width: 100%;
    height: 220px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(255, 76, 41, 0) 0%, var(--dark) 100%);
} */

/* .project .content {
    position: absolute;
    left: 10%;
    bottom: 10%
} */

/* .project h2,
.project h6 {
    color: #fff;
} */

.team-member {
    text-align: center;
}


.team-member .image{
    position: relative;
    z-index: 2;
    overflow: hidden

}
.team-member .image .rounded-circle{
    width: 50%;
    height: 60%;

}

/* .team-member .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: -10%;
    background-color: rgba(255, 77, 41, 0.7);
    opacity: 0;
    transition: all 0.4s ease;  
} */

.team-member h5 {
    margin-top: 16px;
    margin-bottom: 4px;
}

.team-member .social-icons {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    opacity: 0;
    transition: all 0.4s ease;
}

.team-member .social-icons a {
    width: 40px;
    height: 40px;
}

.team-member:hover .social-icons {
    top: 50%;
    opacity: 1;
}

.team-member:hover .overlay {
    top: 0%;
    opacity: 1;
}

#reviews {

    background: linear-gradient(-90deg, rgba(8, 32, 50, 0.8), rgba(8, 32, 50, 0.8)), url(../img/neurological/guillain\ barian\ syndrome.webp), #082032;;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.review {
    text-align: center;
    z-index: 2;
    position: relative;
    margin: 15px;
    max-width: 768px;
    margin: auto;
}

.review .bxs-quote-alt-left {
    font-size: 120px;
    position: absolute;
    opacity: 0.1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
}

.review img {
    width: 80px !important;
    height: 80px;
    border-radius: 100px;
    margin: auto;
}

.review h5 {
    margin-top: 16px;
    margin-bottom: 4px;
    color: #1a69cb;
}

.review h3 {
    margin-top: 26px;
    margin-bottom: 26px;
    font-size: 22px;
    color: #580d44;
    font-weight: 400;
    line-height: 1.7;
}

.review small {
    color: var(--brand);
}

.review .stars {
    color: var(--brand);
}

.blog-post {
    position: relative;
    background-color: #fff;
    box-shadow: var(--shadow);
}

.blog-post .content {
    padding: 32px;
}

.blog-post a {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: var(--brand);
    padding: 2px 12px;
    border-radius: 100px;
    text-decoration: none;
    color: #fff;
}

.blog-post h5 {
    margin-top: 12px;
    margin-bottom: 12px;
}

.blog-post small {
    text-transform: uppercase;
    color: var(--brand);
    text-decoration: underline;
}

footer {
    background-color: #092032; /* Darker footer for contrast */
    color: #adb3b9; /* Softer text color */
    padding: 40px 0; /* Increased padding for better spacing */
    text-align: center;
}

footer .footer-top h4 {
    color: #fff;
    font-size: 20px;
    margin-bottom: 20px;
}

footer .footer-top p {
    font-size: 14px;
    line-height: 1.6;
}

footer .social-icons a {
    width: 40px;
    height: 40px;
    font-size: 18px;
    margin: 0 5px;
    color: #fff;
    background-color: var(--brand);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

footer .social-icons a:hover {
    background-color: #d64022;
}

.loader {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: red;
    z-index: 99999;
    position: fixed;
    left: 0;
    right: 0;
}


input.form-control {
    border-color: transparent;
    height: 44px;
}

.form-control {
    background-color: rgba(33, 153, 209, 0.04);
    border-color: rgba(0, 0, 0, 0.04);
    box-shadow: none;
    border-color: var(--brand);
}


.book-appointment{
    background-color: #5a6b6c00;
    margin: 3%;
    width: 69%;
    /* border:1px solid black; */

}

 .book-appointment input {

    background-color: #fff;
}

.book-appointment textarea {

    background-color: #fff;
}


.book-appointment  .book-input-element {
    padding: 10px;
}
.book-appointment button { 
    /* margin-left: 60%; */
    margin-top: 4.5%;
}

.book-appointment-submit{
    position: relative;
    margin-left: 40%;
}

.header_call_div .fa_phone_div {
    text-align: center;
    padding: 8px;
    transition: all .3s ease;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #3b5998;
    border-radius: 50%;
}

.book-input-element i{
    
    color:red;
  }

.blink-appointment-tag {
    animation: blinker 1s linear infinite;
    color: #e31571;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.condition-heading,.condition-list {
    margin-bottom: 3%;
}
.condition-separator{
    border-top: 2px solid #09aa8f; 
  border-bottom: 2px solid #00a149; 
}

/* .call-booking-child {
    display: inline-block;
    padding: 2%;
} */
.fill-form{
    float: right;
}
/* #call-booking {
    position: fixed;
    z-index: 12;
    background-color: #2eb194;
    width: 100%;
    bottom: 0;
    text-align: -webkit-center;
    padding-top: 0px;
    padding-bottom: 0px;
    display: inline-flex;
   
} */
.top-nav{
    position: fixed;
    z-index: 12;
    background-color: #57636e;
    width: 100%;
    color: #fff;
    top: 0;
}


#carousel-with-form{
    position: relative;
    z-index: 1; /* Ensure it appears above the header */
    margin-top: 70px; /* Add margin to push it below the header */
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* Changed to white for better visibility */
    margin-left: 0; /* Remove left margin */
    margin-right: 0; /* Remove right margin */
    padding: 0; /* Remove any padding */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
} 


#appointmet_form,#formSlider {
    position: absolute;
}

#appointmet_form{
    position: absolute; /* Changed from fixed to absolute */
    top: 20px; /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000; /* Ensure it stays above other elements */
    background-color: transparent; /* Changed background to transparent */
    border-radius: 10px; /* Rounded corners */
}

/* Adjusted the position of formSlider to be relative to the slider section */
#formSlider {
    position: relative; /* Ensure slider is positioned relative to the form */
    margin-top: 0; /* Removed unnecessary spacing */
}

header {
    height: 70px; /* Default height of the header */
    /* background: linear-gradient(90deg, #1E88E5, #1565C0); Match the navbar background */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

@media (max-width: 768px) {
    header {
        height: 60px; /* Adjust header height for smaller screens */
    }

    body {
        padding-top: 60px; /* Adjust padding to match the header height */
    }

    #formSlider {
        bottom: 15%; /* Adjusted for smaller screens */
        left: 50%;
        transform: translateX(-50%);
        width: 100%; /* Ensure it fits within smaller screens */
    }
}

@media (max-width: 480px) {
    header {
        height: 50px; /* Further adjust header height for very small screens */
    }

    body {
        padding-top: 50px; /* Adjust padding to match the header height */
    }

    #formSlider {
        bottom: 10%; /* Further adjustment for very small screens */
        left: 50%;
        transform: translateX(-50%);
        width: 100%; /* Full width for very small screens */
    }
}

 @media (max-width: 668px) {

#bootstrap-overrides .slide1 {
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(../img/hd-images/tkr_1.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


#bootstrap-overrides #common-navbar .container {
    display: block;
    align-items: center;
    justify-content: space-between;
}

#bootstrap-overrides #common-navbar .navbar-toggler {
    background-color: #eef5f69e;
    position: relative;
    /* margin-left: 15%; */

    
 }

.top-nav{
    position: fixed;
    z-index: 12;
    background-color: #57636e;
    width: 100%;
    color: #fff;
}

}

/* Adjusting image width to match the navbar width */
.navbar img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.navbar-brand {
    animation: slideInLeft 1s ease-in-out;
}

.navbar-nav {
    animation: slideInRight 1s ease-in-out;
}

/* Media query for extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
    body {
        padding-top: calc(50px + 1%); /* Adjust padding for extra small devices */
    }
    header {
        height: 50px; /* Adjust header height for extra small devices */
    }

    nav {
        flex-wrap: nowrap !important;
        margin-right: 5px;
    }

    #menu-on-appointment-form {
        position: fixed;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    #appointmet_form .row>* {
        margin-top: 0 !important;
    }
}

/* Media query for small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    body {
        padding-top: calc(60px + 1%); /* Adjust padding for small devices */
    }
    header {
        height: 60px; /* Adjust header height for small devices */
    }
    nav {
        flex-wrap: nowrap !important;
        
    }
    nav a {
        padding: 10px 15px; /* Adjust padding for smaller screens */
    }
    .navbar-toggler {
        margin-left: 0; /* Adjust margin for smaller screens */
    }
    .navbar-collapse {
        flex-grow: 1; /* Allow the navbar to grow */
        justify-content: space-between; /* Space out items */
    }
    
}

/* Media query for medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    body {
        padding-top: calc(70px + 1%); /* Adjust padding for medium devices */
    }
    header {
        height: 70px; /* Adjust header height for medium devices */
    }
}

/* Media query for large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    body {
        padding-top: calc(70px + 1%); /* Maintain padding for large devices */
    }
    header {
        height: 70px; /* Maintain header height for large devices */
    }
}

#common-navbar {
    height: var(--common-navbar-height, 70px); /* Default height of the common-navbar */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}


.accordion-item {
    border: none;
    border-bottom: 1px solid #e0e0e0;
}

.accordion-button {
    padding: 20px 0;
    font-weight: 600;
    color: #333;
    background-color: transparent;
}

.accordion-button:not(.collapsed) {
    color: #333;
    background-color: transparent;
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-body {
    padding: 0 0 20px 0;
}

.media.media-news {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    padding-bottom: 210px;
}
@media (min-width: 768px) {
    .media.media-news {
        padding-bottom: 0;
        margin-bottom: 0;
    }
}
@media (min-width: 1200px) {
    .media.media-news {
        padding-bottom: 25px;
        margin-bottom: 0;
    }
}
.media.media-news .media-body {
    padding: 20px;
    box-shadow: 0 22px 28px 0 rgba(0, 0, 0, 0.06);
    background: #fff;
    position: absolute;
    width: 85%;
    right: 0;
    bottom: 0;
}
@media (min-width: 768px) {
    .media.media-news .media-body {
        position: relative;
        padding: 46.5px 35px;
        right: 0;
    }
}
@media (min-width: 992px) {
    .media.media-news .media-body {
        right: 40px;
        bottom: 0;
    }
}
@media (min-width: 1200px) {
    .media.media-news .media-body {
        position: absolute;
        right: 35px;
        width: 60%;
        padding: 20px;
    }
}
.media.media-news .media-body .media-date {
    font-family: "Open Sans", sans-serif;
    color: #848484;
    margin-bottom: 10px;
}
.media.media-news .media-body h5 {
    font-size: 22px;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.media.media-news .media-body h5.small {
    font-size: 16px;
}
.media.media-news .media-body p {
    font-family: "Open Sans", sans-serif;
    color: #848484;
}
.media.media-news .media-body .common-btn {
    margin-top: 10px;
}

.read-more {
    color: #007bff;
    text-decoration: none;
    cursor: pointer;
}

.read-more:hover {
    color: #0056b3;
    text-decoration: underline;
}

.more-text {
    color: #333;
}

/* Carousel with Form Styles */
#carousel-with-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    background-color: #ffffff; /* Changed to white for better visibility */
    border-radius: 10px; /* Add rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a soft shadow for depth */
    border: 1px solid #ced4da; /* Added border for better definition */
}

#carousel-with-form h2 {
    font-size: 2rem;
    color: #343a40; /* Darker text for better readability */
    margin-bottom: 15px;
}

#carousel-with-form .form-control {
    margin-bottom: 10px;
    border-radius: 5px; /* Rounded input fields */
    border: 1px solid #ced4da; /* Subtle border */
}

#carousel-with-form .btn {
    background-color: #007bff; /* Primary button color */
    color: #fff;
    border-radius: 5px;
    padding: 10px 20px;
    transition: background-color 0.3s ease;
}

#carousel-with-form .btn:hover {
    background-color: #0056b3; /* Darker shade on hover */
}

/* Moved styles from index.html */
body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
.text-center { text-align: center; }
.text-primary { color: #007bff; }
.text-warning { color: #ffc107; }
.text-success { color: #28a745; }
.btn { display: inline-block; padding: 0.5rem 1rem; font-size: 1rem; text-align: center; text-decoration: none; border-radius: 0.25rem; }
.btn-info { background-color: #17a2b8; color: white; }
.btn-lg { font-size: 1.25rem; padding: 0.75rem 1.25rem; }

#formSlider .slide {
    position: relative;
    color: #fff; /* Default text color */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Add shadow for better readability */
}

#formSlider .slide1 {
    background-image: url('../img/post_operative/pcl_rehab.webp');
    color: #ffffff; /* Ensure text is readable on this image */
}

#formSlider .slide2 {
    background-image: url('../img/post_operative/ACL_rehab.webp');
    color: #f8f9fa; /* Slightly lighter text for better contrast */
}

#formSlider .slide3 {
    background-image: url('../img/shoulder/Tapping_landing.webp');
    color: #e9ecef; /* Adjusted for better readability */
}

/* Ensure all images with the class 'rounded-circle' are displayed as circular dynamically */
.rounded-circle {
    border-radius: 50% !important;
    object-fit: cover;
}

#menu-on-appointment-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: fixed; /* Changed to fixed to keep it at the right edge of the screen */
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: auto; /* Adjust width to fit the content */
}

#menu-on-appointment-form a {
    background-color: #c2d0e1 !important; /* Light red background */
    color: #000 !important; /* Ensure text is visible */
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    margin: 5px 0;
}

@media (max-width: 575.98px) {
    #menu-on-appointment-form {
        position: fixed;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    #appointmet_form .row>* {
        margin-top: 0 !important;
    }
}

@media (min-width: 576px) {
    #menu-on-appointment-form {
        display: none;
    }
}

 /* Adjust the height of the map dynamically based on the screen height */
        gmp-map {
            width: 100%;
            height: calc(100vh - 200px); /* Adjust height dynamically, leaving space for header and footer */
            max-height: 500px;
            margin-bottom: 50px;
        }

        @media (max-width: 768px) {
            gmp-map {
                height: calc(100vh - 150px); /* Adjust height for smaller screens */
            }
        }

        @media (max-width: 576px) {
            gmp-map {
                height: calc(100vh - 100px); /* Further adjust height for very small screens */
            }