:root {

    --primary-color: #D1A617;

    --secondary-color: #081839;

    --tertiary-color: #218BBD;

    --heading-color: #102E7A;

    --text-color: #27374E;

    --text-matte-color: #333333;

    --text-matte-light-color: #555555;

    --mainfont: "Sora", sans-serif;

}



/* Banner Section Styles */

.banner-section {

    position: relative;

    padding: 160px 0 0px 0 !important;

    min-height: 100vh;

    display: flex;

    align-items: center;

    overflow: hidden;

}



.banner-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: -1;

}



.banner-bg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.banner-content {

    position: relative;

    z-index: 2;

    padding: 30px 0;

}



.banner-content .sub-heading {

    font-size: 14px;

    background: var(--secondary-color);

    margin-bottom: 15px;

    font-weight: 500;

    width: fit-content;

    color: #fff;

    padding: 12px 18px;

    border-radius: 4px;

}



.banner-content .heading {

    font-size: 40px;

    line-height: 1.2;

    margin-bottom: 20px;

    color: var(--text-matte-color);

    font-weight: 800;

}



.feature-boxes {

    margin-bottom: 40px;

}



.feature-box {

    background: rgba(255, 255, 255, 0.9);

    padding: 14px;

    border-radius: 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 15px;

    transition: all 0.3s ease;

    text-align: center;

    height: 100%;

    justify-content: center;

    box-shadow: 4px 0 10px 0 rgba(0, 0, 0, 0.2);

}



.feature-box:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);

}



.feature-box .icon {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.feature-box .icon img {

    max-width: 100%;

    height: auto;

}



.feature-box h3 {

    font-size: 14px;

    margin: 0;

    color: var(--secondary-color);

    font-weight: 600;

}



.banner-actions {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

}



/* .banner-actions .btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 24px;

    border-radius: 8px;

    font-weight: 600;

    transition: all 0.3s ease;

} */



.btn-icon {

    width: 18px;

    height: 18px;

    object-fit: contain;

}



.banner-actions .btn-whatsapp {

    background-color: var(--secondary-color);

    color: #fff;

    border: 1px solid transparent;

}



.banner-actions .btn:hover {

    background-color: transparent;

    border: 1px solid var(--secondary-color);

    color: var(--secondary-color);

}



.banner-actions .btn:hover img {

    filter: invert(100%);

}



.banner-actions .btn-services {

    background-color: var(--tertiary-color);

    color: #fff;

}



.banner-actions .btn-services:hover {

    opacity: 0.9;

}



.btn span {

    font-size: 14px;

    font-weight: 500;

}



/* Clinic Snapshot Section */

.clinic-snapshot {

    padding: 100px 0;

    background-color: #fff;

    position: relative;

}



/* Images Grid */

.clinic-images {

    position: relative;

}



.image-grid {

    position: relative;

}



.main-image {

    position: relative;

    z-index: 1;

}





.facility-image {

    position: absolute;

    right: 0;

    bottom: 0;

    z-index: 2;

    object-fit: cover;

}



.facility-image img {

    width: 240px;

    height: 400px;

    object-fit: cover;

}



/* Hours Badge */

.hours-badge {
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--secondary-color);
    color: #fff;
    padding: 20px;
    border-radius: 20px;
    text-align: center;
    z-index: 3;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    width: 192px;
    height: 175px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}



.hours-badge .hours {

    font-size: 48px;

    font-weight: 700;

    line-height: 1;

    display: block;

    margin-bottom: 5px;

}



.hours-badge .text {

    font-size: 18px;

    font-weight: 600;

    line-height: 1.2;

}



.hours-badge small {

    display: block;

    margin-top: 10px;

    opacity: 0.8;

    font-size: 12px;

    line-height: 1.4;

}



/* Content Styles */

.section-tag {

    color: var(--tertiary-color);

    font-weight: 600;

    font-size: 14px;

    margin-bottom: 15px;

    background: rgb(33 139 189 / 10%);

    width: fit-content;

    padding: 10px 20px;

    border-radius: 100px;

    text-transform: uppercase;

}



.clinic-content h2 {

    font-size: 40px;

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: 4px;

    color: var(--heading-color);

}



/* Core Values */

.core-values {

    margin-bottom: 20px;

}



.core-values h3 {

    font-size: 18px;

    font-weight: 600;

    margin-bottom: 14px;

    color: var(--text-matte-color);

}



.values-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.values-list li {

    display: flex;

    align-items: flex-start;

    gap: 4px;

    margin-bottom: 15px;
    color: var(--text-matte-light-color);

}



.values-list li i {

    color: #0891B2;

    font-size: 24px;

    margin-top: 2px;

}



.value-content {

    flex: 1;

}



.value-content strong {

    color: #001538;

    font-weight: 600;

}



/* CTA Button */

.section-cta .btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 30px;

    font-weight: 600;

    background-color: #0891B2;

    border: none;

    transition: all 0.3s ease;

}



.section-cta .btn:hover {

    background-color: #001538;

    transform: translateY(-2px);

}



.section-cta .btn i {

    font-size: 20px;

}

/* FAQ Section */

.faq-section {

    padding: 100px 0;

    background-color: #F8FAFC;

}



.section-header {

    margin-bottom: 50px;

}



.section-header h2 {

    font-size: 40px;

    font-weight: 700;

    color: var(--heading-color);

    margin-bottom: 20px;

}



.section-header .section-description {

    color: var(--text-matte-light-color);

    font-size: 16px;

    line-height: 1.6;

    margin: 0 auto;

}



/* FAQ Accordion Styles */

.faq-accordion {

    margin-bottom: 40px;

}



.accordion-item {

    border: none;

    background: transparent;

    margin-bottom: 16px;

}



.accordion-button {

    background-color: #fff;

    border: none;

    border-radius: 12px !important;

    padding: 20px 25px;

    font-weight: 600;

    font-size: 16px;

    color: var(--secondary-color);

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

}



.accordion-button:not(.collapsed) {

    background-color: #fff;

    color: var(--tertiary-color);

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

}



.accordion-button::after {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 15.713L18.01 9.7c.388-.389 1.016-.389 1.404 0s.388 1.017 0 1.406l-6.707 6.707c-.388.388-1.016.388-1.404 0L4.597 11.106c-.388-.389-.388-1.017 0-1.406s1.016-.389 1.404 0L12 15.713z' fill='%23218BBD'/%3E%3C/svg%3E");

    width: 24px;

    height: 24px;

    background-size: 24px;

    transition: transform 0.2s ease;

}



.accordion-button:not(.collapsed)::after {

    transform: rotate(-180deg);

}



.accordion-body {

    background-color: #fff;

    border-radius: 0 0 12px 12px;

    padding: 20px 25px;

    color: var(--text-matte-light-color);

    font-size: 15px;

    line-height: 1.6;

}



/* FAQ Footer */

.faq-footer {

    margin-top: 40px;

}



.faq-footer p {

    color: var(--text-matte-light-color);

    margin-bottom: 20px;

}



.btn-support {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    background-color: var(--tertiary-color);

    color: #fff;

    padding: 12px 30px;

    border-radius: 8px;

    font-weight: 500;

    font-size: 14px;

    transition: all 0.3s ease;

    border: 1px solid transparent;

}



.btn-support:hover {

    background-color: transparent;

    border-color: var(--tertiary-color);

    color: var(--tertiary-color);

}



.btn-support:hover img {

    filter: invert(47%) sepia(65%) saturate(414%) hue-rotate(165deg) brightness(88%) contrast(90%);

}



.btn-support .btn-icon {

    width: 20px;

    height: 20px;

}


.contact-section::after {
    background: #049688;
    content: "";
    width: 300px;
    height: 300px;
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    display: inline-block;
    right: 100px;
    top: 0px;
    bottom: 0;
    filter: blur(80px);
    opacity: 0.2;
    margin: auto;
}


.contact-form {

    background: #fff;

    padding: 30px;

    border-radius: 10px;

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);

}



.contact-form label {

    font-weight: 500;

    margin-bottom: 8px;

    display: block;

}



.contact-form .form-control {

    border: 1px solid #e0e0e0;

    padding: 12px 15px;

    border-radius: 5px;

    font-size: 15px;

}



.contact-form textarea.form-control {

    resize: vertical;

    min-height: 120px;

}



.contact-form .btn-primary {

    width: 100%;

    padding: 12px 20px;

    font-weight: 600;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

}



.contact-info {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}



.quick-contact h3,

.office-info h3 {

    font-size: 20px;

    font-weight: 600;

    margin-bottom: 20px;

    color: var(--secondary-color);

}



.contact-buttons {

    display: flex;

    flex-direction: row;

    gap: 15px;

    justify-content: center;

}



.contact-button {

    display: flex;

    align-items: center;

    padding: 15px 22px;

    border-radius: 8px;

    text-decoration: none;

    transition: transform 0.3s ease;

}



.contact-button:hover {

    transform: translateY(-2px);

}



.contact-button .icon {

    width: 40px;

    height: 40px;

    margin-right: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.contact-button .icon img {

    width: 50px;

    height: 50px;

    min-width: 50px;

    min-height: 50px;

}



.contact-button .button-content {

    flex: 1;

}



.contact-button span {

    display: block;

    font-weight: 600;

    color: #fff;

    font-size: 16px;

    margin-bottom: 2px;

}



.contact-button small {

    display: block;

    color: rgba(255, 255, 255, 0.8);

    font-size: 13px;

}



.call-button {

    background: var(--tertiary-color);

}



.whatsapp-button {

    background: var(--secondary-color);

}



.office-info {

    background: #fff;

    border-radius: 8px;

}



.office-details h4 {

    font-size: 18px;

    margin-bottom: 10px;

    color: #64260C;

}



.office-details p {

    line-height: 1.6;

    margin-bottom: 0;

}



.map-container {

    flex: 1;

    border-radius: 8px;

    overflow: hidden;

}



.map-container iframe {

    width: 100%;

    height: 100%;

    border: none;

}




/* doctor section */



.our-clinic-expert {

    padding: 80px 0;

    background-color: #fff;

}



.doctor-card {

    background: #fff;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);

    height: 100%;

    transition: transform 0.3s ease;

}



.doctor-card:hover {

    transform: translateY(-5px);

}



.doctor-image {

    min-height: 250px;

    height: 250px;

    position: relative;

    overflow: hidden;

}



.doctor-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;
    object-position: top;

}



.doctor-name {

    font-size: 24px;

    font-weight: 600;

    color: var(--secondary-color);

    margin-bottom: 8px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.doctor-name i {

    font-size: 24px;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    color: #555555;

    background: #F7F7F7;

    border-radius: 50%;

    height: 40px;

    width: 40px;

    min-width: 40px;

    min-height: 40px;

}



.doctor-card:hover .doctor-name i {

    opacity: 1;

    transform: rotate(-45deg);

    background: var(--secondary-color);

    color: #fff;

}



.doctor-position {

    color: var(--text-matte-color);

    font-size: 18px;

    font-weight: 600;

    margin: 14px 0 10px 0;

}



.doctor-description {

    line-height: 1.6;

    color: var(--text-matte-light-color);

    margin-bottom: 0;

}



.doctor-specialties {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.doctor-qualifications {

    background: rgba(33, 139, 189, 0.1);

    color: var(--tertiary-color);

    padding: 6px 12px;

    border-radius: 50px;

    font-weight: 600;

    width: fit-content;

    font-size: 14px;

    margin-bottom: 10px;

}



.doctors-footer-text {

    font-size: 16px;

    color: var(--text-matte-color);

    margin-bottom: 0;

}



span.specialty-badge {

        background: rgb(8 24 57 / 6%);
    padding: 10px 14px;
    border-radius: 100px;
    font-size: 14px;

}



span.specialty-badge:hover {

    background: rgb(8 24 57 / 100%);

    color: #fff;

}

/* Facilities section */

.facilities {

    padding: 80px 0;

    background: #f6fbfd;

}



.facilities .section-header {

    margin-bottom: 40px;

}



.facilities .section-tag {

    background: rgba(3, 133, 177, 0.08);

    display: inline-block;

    padding: 10px 20px;

    border-radius: 30px;

    color: #0b9fb6;

    font-weight: 600;

    font-size: 13px;

}



.facilities h2 {

    color: #0b2b66;

    font-size: 36px;

    margin-top: 18px;

    margin-bottom: 10px;

    font-weight: 700;

}



section.facilities h4 {

    margin-bottom: 30px;

    font-weight: 600;

    font-size: 20px;

}



.facilities .section-description {

    color: #6b7280;

    max-width: 760px;

    margin: 0 auto;

}



.facilities-features {

    margin-top: 10px;

    padding-left: 0;

}



.facilities-features .feature-item {

    gap: 18px;

    align-items: flex-start;

    margin-bottom: 22px;

}



.facilities-features .feature-icon {

    width: 24px;

    height: 24px;

    background: var(--heading-color);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.facilities-features .feature-icon img {

    width: 26px;

    height: auto;

    display: block;

}



.facilities-features .feature-icon i {

    color: #fff;

    font-size: 20px;

}



.facilities-features .feature-title {

    display: block;

    color: #152b57;

    font-size: 16px;

    margin-bottom: 6px;

}



.facilities-features .feature-desc {

    margin: 0;

    font-size: 14px;

    line-height: 1.6;

}



/* CTA button */

.btn-explore {

    background: #0b9fb6;

    color: #fff;

    padding: 12px 28px;

    border-radius: 40px;

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    box-shadow: 0 6px 18px rgba(11, 159, 182, 0.14);

}



/* Gallery grid */

.facilities-gallery {

    display: flex;

    gap: 18px;

    align-items: stretch;

}



.facility-card {

    position: relative;

    overflow: hidden;

    flex: 1 1 0;

}







.facility-card.card-medium {

    flex-basis: 32%;

}



.facility-card.card-large {

    flex-basis: 32%;

}



.facility-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    border-radius: 12px;

    box-shadow: 0 10px 30px rgba(20, 30, 60, 0.06);

}



/* Overlay */

.facility-card .overlay {

    border-radius: 10px;

    width: 100%;

    height: 100%;

    background-color: rgb(35 36 36 / 50%);

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    opacity: 0;

    padding: 15px;

    transform: scale(.5);

    transition: all .4s ease-in-out;

    margin: auto;

}



.facility-card:hover .overlay {

    opacity: 1;

    transform: scale(1);

}



.facility-card .overlay i {

    font-size: 40px;

    color: #fff;

    margin-bottom: 10px;

}



.facility-card .overlay span {

    font-size: 14px;

    font-weight: 600;

    color: #fff;

}