/* ----------------------------------------------------------------------------------------

* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. About Us css
06. Why Choose Us css
07. Our Services css
08. Intro Video css
09. Latest Project css
10. How We Work css
11. Our Skills css
12. Our Testimonials css
13. Our Blog css
14. Footer css
15. About Us Page css
16. Services Page css
17. Service Single css
18. Blog Archive css
19. Blog Single css
20. Project Page css
21. Project Single css
22. Image Gallery css
23. FAQs Page css
24. Contact Us Page css
25. 404 Error Page css 
26. Responsive css
-------------------------------------------------------------------------------------- */

/************************************/
/*** 	 01. Global Variables	  ***/
/************************************/

:root {
    --primary-color: #192324;
    --main-color: #1f4e5f;
    --secondery-color: #f8f8f8;
    --third-color: #f7e6e2;
    --text-color: #020202;
    --accent-color: #b7cdba;
    --white-color: #ffffff;
    --divider-color: #eaf0ec;
    --dark-divider-color: #ffffff1a;
    --error-color: rgb(230, 87, 87);
    --default-font: "Hanken Grotesk", sans-serif;
}

/************************************/
/*** 	   02. General css		  ***/
/************************************/

body {
    font-family: var(--default-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6em;
    background-color: var(--white-color);
    color: var(--text-color);
}

p {
    line-height: 1.7em;
    margin-bottom: 1.6em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 700;
    line-height: 1.1em;
    color: var(--primary-color);
}

figure {
    margin: 0;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    outline: 0;
}

a:focus {
    text-decoration: none;
    outline: 0;
}

html,
body {
    width: 100%;
    overflow-x: clip;
}

.container {
    max-width: 1300px;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    padding-right: 15px;
    padding-left: 15px;
}

.image-anime {
    position: relative;
    overflow: hidden;
}

.image-anime:after {
    content: "";
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1;
}

.image-anime:hover:after {
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

.reveal {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    visibility: hidden;
    overflow: hidden;
}

.reveal img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform-origin: left;
    transform-origin: left;
}

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.row > * {
    padding-right: 15px;
    padding-left: 15px;
}

.row.no-gutters {
    margin-right: 0px;
    margin-left: 0px;
}

.row.no-gutters > * {
    padding-right: 0px;
    padding-left: 0px;
}

.btn-default {
    position: relative;
    display: inline-block;
    background: var(--main-color);
    color: var(--white-color);
    font-size: 16px;
    font-weight: 700;
    line-height: 1em;
    text-transform: capitalize;
    border: none;
    border-radius: 10px;
    box-shadow: 0 6px 6px rgba(31, 78, 95, 0.15);
    padding: 17px 30px;
    transition: all 0.5s ease-in-out;
    overflow: hidden;
    z-index: 0;
}

.btn-default:hover {
    /* background: transparent; */
    background-color: var(--main-color) !important;
    color: var(--white-color);
}

.btn-default.btn-highlighted {
    background-color: var(--white-color);
    color: var(--main-color);
    border: 1px solid gray;
}

.btn-default.btn-highlighted:hover {
    color: var(--white-color);
}

.cb-cursor:before {
    background: var(--accent-color);
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background-color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-container,
.loading {
    height: 100px;
    position: relative;
    width: 100px;
    border-radius: 100%;
}

.loading-container {
    margin: 40px auto;
}

.loading {
    border: 1px solid transparent;
    border-color: transparent var(--white-color) transparent var(--white-color);
    animation: rotate-loading 1.5s linear 0s infinite normal;
    transform-origin: 50% 50%;
}

.loading-container:hover .loading,
.loading-container .loading {
    transition: all 0.5s ease-in-out;
}

#loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 66px;
    transform: translate(-50%, -50%);
}

@keyframes rotate-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.section-row {
    margin-bottom: 30px;
}

.section-row .section-title {
    margin-bottom: 0;
    margin-right: 30px;
}

.section-btn {
    text-align: end;
}

.section-title-content {
    margin-left: 120px;
}

.section-title-content p {
    margin: 0;
}

.section-title {
    margin-bottom: 40px;
}

.section-title h3 {
    display: inline-block;
    position: relative;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6em;
    text-transform: capitalize;
    color: var(--accent-color);
    padding-left: 35px;
    margin-bottom: 20px;
}

.section-title h3::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: url("../images/icon-sub-heading.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    width: 24px;
    height: 5px;
}

.section-title h1 {
    font-size: 60px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0;
    cursor: none;
}

.section-title h2 {
    font-size: 46px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0;
    cursor: none;
    color: var(--main-color);
}

.section-title h1 span,
.section-title h2 span {
    color: var(--accent-color);
}

.section-title p {
    margin-top: 30px;
    margin-bottom: 0;
}

.section-title-content.dark-section p,
.section-title.dark-section p,
.section-title.dark-section h2,
.section-title.dark-section h3 {
    color: var(--white-color);
}

.help-block.with-errors ul {
    margin: 0;
    text-align: left;
}

.help-block.with-errors ul li {
    color: var(--error-color);
    font-weight: 500;
    font-size: 14px;
}

/************************************/
/**** 	   03. Header css		 ****/
/************************************/

header.main-header {
    position: relative;
    z-index: 999 !important;
    /* Merge seamlessly with the accent-green hero section */
    background-color: #e8f0e98a;
}

header.main-header .header-sticky {
    position: relative;
    top: 0;
    z-index: 999 !important;
    /* background-color: #e8f0e98a; */
    transition:
        background 0.3s ease,
        padding 0.3s ease,
        transform 0.3s ease-in-out,
        box-shadow 0.3s ease;
}

header.main-header .header-sticky.hide {
    transform: translateY(-100%);
    border-radius: 0;
}

header.main-header .header-sticky.active {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999 !important;
    border-radius: 0;
    transform: translateY(0);
    /* Light background so logo renders cleanly */
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--divider-color);
    box-shadow: 0 2px 24px rgba(31, 78, 95, 0.1);
}

.navbar {
    padding: 15px 0;
    align-items: center;
    /* Subtle divider on accent bg; hidden when sticky (overridden below) */
    /* border-bottom: 1px solid rgba(31, 78, 95, 0.15); */
    transition: padding 0.3s ease-in-out;
}

header.main-header .header-sticky.active .navbar {
    padding: 10px 0;
    border-bottom: none;
}

.navbar-brand {
    padding: 0;
    margin: 0;
}

.main-menu .nav-menu-wrapper {
    flex: 1;
    text-align: center;
    margin-left: 20px;
}

.main-menu .nav-menu-wrapper > ul {
    align-items: center;
    display: inline-flex;
}

.main-menu ul li {
    margin: 0 6px;
    position: relative;
}

.main-menu ul li a {
    font-family: var(--accent-font);
    font-size: 17px;
    font-weight: 700;
    padding: 15px 14px !important;
    /* Dark teal on accent-green header */
    color: var(--main-color);
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
}

.main-menu ul li.submenu > a:after {
    content: "\f107";
    font-family: "FontAwesome";
    font-weight: 900;
    font-size: 14px;
    margin-left: 8px;
}

.main-menu ul li a:hover,
.main-menu ul li a:focus {
    color: var(--primary-color);
    opacity: 1;
}

/* Sticky: keep dark teal links (light bg) */
.header-sticky.active .main-menu ul li a {
    color: var(--main-color);
}

.header-sticky.active .main-menu ul li a:hover,
.header-sticky.active .main-menu ul li a:focus {
    color: var(--primary-color);
    opacity: 1;
}

.main-menu ul li.submenu ul {
    visibility: hidden;
    opacity: 0;
    transform: translateY(15px) scale(0.98);
    transform-origin: top left;
    padding: 15px;
    margin: 0;
    list-style: none;
    width: 330px;
    border-radius: 12px;
    position: absolute;
    left: 0;
    top: 100%;
    background-color: var(--white-color);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--divider-color);
    transition:
        opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
        transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
        visibility 0.3s;
    text-align: left;
    display: block;
    /* z-index: 999; */
    z-index: 999999;
}

.main-menu ul li.submenu:hover > ul {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.main-menu ul ul li {
    margin: 0 0 6px 0;
    padding: 0;
    display: block;
}

.main-menu ul ul li:last-child {
    margin-bottom: 0;
}

.main-menu ul ul li a {
    color: var(--text-color) !important;
    padding: 8px 12px !important;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.25s ease-in-out;
}

.main-menu ul ul li a i {
    font-size: 14px;
    color: var(--main-color);
    transition: transform 0.25s ease-in-out;
    width: 18px;
    text-align: center;
}

.main-menu ul ul li a:hover {
    color: var(--main-color) !important;
    background-color: var(--secondery-color);
    padding-left: 18px !important;
}

.main-menu ul ul li a:hover i {
    color: var(--main-color);
    transform: scale(1.15);
}

/* Mobile Toggle Hamburger Button styling */
.insta-mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 101;
}

.insta-mobile-toggle span {
    width: 100%;
    height: 2px;
    /* Dark teal on accent-green header */
    background-color: var(--main-color);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Sticky: dark hamburger on light bg */
.header-sticky.active .insta-mobile-toggle span {
    background-color: var(--main-color);
}

/* Mobile Menu Overlay Container */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Light background so logo and links read cleanly */
    background-color: var(--white-color);
    z-index: 10000;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    opacity: 0;
    transition:
        transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
        opacity 0.4s ease,
        visibility 0.4s;
    display: flex;
    flex-direction: column;
}

.mobile-menu-overlay.open {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
}

/* Mobile Menu Header */
.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--divider-color);
    flex-shrink: 0;
}

.mobile-menu-logo img {
    height: auto;
    width: 130px;
}

.mobile-menu-close {
    background: none;
    border: none;
    /* Dark icon on light bg */
    color: var(--main-color);
    font-size: 22px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--divider-color);
}

.mobile-menu-close:hover {
    color: var(--white-color);
    background-color: var(--main-color);
}

/* Mobile Menu Body */
.mobile-menu-body {
    flex-grow: 1;
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mobile-nav-links {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

.mobile-nav-item {
    margin-bottom: 15px;
    /* Light border on white bg */
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 15px;
}

.mobile-nav-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mobile-nav-link {
    font-size: 18px;
    font-weight: 600;
    /* Dark teal on white bg */
    color: var(--primary-color) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color 0.3s ease;
    text-transform: capitalize;
}

.mobile-nav-link:hover {
    color: var(--main-color) !important;
}

.mobile-nav-link i {
    font-size: 14px;
    color: var(--main-color);
    transition: transform 0.3s ease;
}

.mobile-nav-item.has-submenu.expanded > .mobile-nav-link i {
    transform: rotate(180deg);
    color: var(--main-color);
}

/* Mobile Submenu Accordion */
.mobile-submenu {
    list-style: none;
    padding: 0 0 0 15px;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition:
        max-height 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
        margin 0.4s ease;
}

.mobile-submenu.open {
    max-height: 500px;
    margin-top: 10px;
}

.mobile-submenu li {
    margin: 8px 0;
}

.mobile-submenu li a {
    font-size: 17px;
    font-weight: 500;
    /* Dark text on light bg */
    color: var(--main-color) !important;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    transition: color 0.25s ease;
}

.mobile-submenu li a i {
    font-size: 14px;
    color: var(--main-color);
    width: 18px;
    text-align: center;
}

.mobile-submenu li a:hover,
.mobile-submenu li a:focus {
    color: var(--primary-color) !important;
}

.mobile-menu-cta {
    margin-top: auto;
}

.mobile-menu-cta .btn-default {
    width: 100%;
    text-align: center;
    padding: 16px;
}

/* Background Lock scroll */
body.mobile-menu-active {
    overflow: hidden !important;
    height: 100vh !important;
    position: fixed !important;
    width: 100vw !important;
}

/************************************/
/***        04. Hero css	      ***/
/************************************/

.hero {
    position: relative;
    background: url("../images/hero-bg.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 280px 0 250px;
    min-height: 100vh;
    margin-top: -118px;
}

.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(
        180deg,
        rgba(25, 35, 36, 0) 0%,
        rgba(25, 35, 36, 0.4) 80.94%
    );
    height: 100%;
    width: 100%;
    z-index: 1;
}

.hero.hero-video .hero-bg-video {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.hero.hero-video .hero-bg-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero.hero-slider-layout {
    background: none;
    padding: 0;
}

.hero.hero-slider-layout .hero-slide {
    position: relative;
    padding: 280px 0 250px;
    min-height: 100vh;
}

.hero.hero-slider-layout .hero-slide::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(
        180deg,
        rgba(25, 35, 36, 0.411) 0%,
        rgba(25, 35, 36, 0.4) 80.94%
    );
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero.hero-slider-layout .hero-slide .hero-slider-image {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.hero.hero-slider-layout .hero-slide .hero-slider-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero.hero-slider-layout .hero-pagination {
    position: absolute;
    bottom: 50px;
    text-align: center;
    padding-left: calc(((100vw - 1300px) / 2));
    z-index: 2;
}

.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: var(--white-color);
    opacity: 1;
    transition: all 0.3s ease-in-out;
    margin: 0 5px;
}

.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet-active {
    background-color: var(--accent-color);
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-content .section-title h3,
.hero-content .section-title h1 {
    color: var(--white-color);
}

.hero-content .section-title p {
    font-size: 22px;
    color: var(--white-color);
    width: 100%;
    max-width: 600px;
}

.hero-content .section-title h3::before {
    filter: brightness(0) invert(1);
}

.hero-content .btn-default.btn-highlighted {
    margin-left: 30px;
}

/************************************/
/***   04b. Plain Hero (ph-hero)  ***/
/************************************/

/* ── Section wrapper ── */
.ph-hero-section {
    background-color: #e8f0e98a;
    overflow: hidden;
    position: relative;
}

/* ── Full-width inner container ── */
.ph-hero-container {
    padding: 0;
    max-width: 100%;
}

/* ── Section & row use a flex column approach so the right col fills height ── */
.ph-hero-section {
    background-color: #e8f0e98a;
    overflow: hidden;
    position: relative;
    /* Let section height = image natural height + content, no forced min-height gap */
}

.ph-hero-container {
    padding: 0;
    max-width: 100%;
}

/* Row centers content vertically; columns align to center */
.ph-hero-row {
    display: flex;
    align-items: center;
    min-height: 92vh;
}

/* ── LEFT column – content ── */
.ph-hero-left {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 80px 60px 80px 80px;
}

/* ── Content box ── */
.ph-hero-content {
    /* max-width: 520px; */
    max-width: 90%;
}

/* "Hi, I'm" greeting */
.ph-hero-greeting {
    font-size: 25px;
    font-weight: 700;
    color: var(--main-color);
    opacity: 0.75;
    margin-bottom: 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: var(--default-font);
}

/* "Dr. Priya." name */
.ph-hero-name {
    font-size: clamp(65px, 10vw, 70px);
    font-weight: 700;
    line-height: 1;
    color: var(--main-color);
    letter-spacing: -0.03em;
    margin: 0 0 20px;
    font-family: var(--default-font);
}

/* Sub-tagline */
.ph-hero-tagline {
    font-size: clamp(24px, 3vw, 17px);
    font-weight: 400;
    line-height: 1.45;
    color: var(--main-color);
    opacity: 0.85;
    margin-bottom: 40px;
    font-family: var(--default-font);
}

/* ── CTA Button ── */
.ph-hero-btn-wrap {
    display: flex;
}

.ph-hero-btn {
    display: inline-block;
    background-color: var(--main-color);
    color: var(--white-color);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    padding: 18px 38px;
    border-radius: 50px;
    text-decoration: none;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    transition:
        background-color 0.35s ease,
        transform 0.25s ease,
        box-shadow 0.35s ease;
    box-shadow: 0 6px 24px rgba(31, 78, 95, 0.22);
    font-family: var(--default-font);
}

.ph-hero-btn:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(31, 78, 95, 0.32);
}

/* ── RIGHT column – doctor image ── */
.ph-hero-right {
    display: flex;
    align-items: center; /* center image vertically */
    justify-content: center;
    padding: 40px 60px 40px 40px;
    overflow: hidden;
    align-self: center;
}

.ph-hero-image-wrap {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ph-hero-doctor-img {
    display: block;
    width: 100%;
    max-width: 650px;
    height: auto;
    object-fit: contain;
    object-position: center;
    /* subtle fade-in from the right */
    animation: ph-slideInRight 0.9s ease 0.3s both;
}

@keyframes ph-slideInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── Tablet (≤ 991px) ── */
@media (max-width: 991px) {
    .ph-hero-row {
        min-height: auto;
        flex-direction: column-reverse; /* image on TOP, content below */
    }
    .ph-hero-name {
        font-size: 55px;
    }

    .ph-hero-right {
        width: 100%;
        padding: 0;
        justify-content: center;
        /* On tablet/mobile, let image define its own height */
        height: auto;
        align-self: auto;
    }

    .ph-hero-image-wrap {
        height: auto;
        padding-top: 5px;
    }

    .ph-hero-doctor-img {
        /* Auto height so image is natural, no column height constraint */
        height: auto;
        max-width: 500px;
        width: 75%;
        object-fit: contain;
        object-position: bottom center;
    }

    .ph-hero-left {
        justify-content: center;
        padding: 40px 30px 60px;
    }

    .ph-hero-content {
        max-width: 100%;
        text-align: center;
    }

    .ph-hero-btn-wrap {
        justify-content: center;
    }

    .ph-hero-tagline br {
        display: none;
    }
    .ph-hero-tagline {
        padding: 0 30px;
    }
}

/* ── Mobile (≤ 575px) ── */
@media (max-width: 575px) {
    .ph-hero-doctor-img {
        max-width: 320px;
        width: 80%;
    }

    .ph-hero-left {
        padding: 28px 20px 48px;
    }

    .ph-hero-greeting {
        font-size: 20px;
    }

    .ph-hero-name {
        font-size: 45px;
    }

    .ph-hero-tagline {
        font-size: 17px;
        padding: 0 20px;
    }

    .ph-hero-btn {
        font-size: 16px;
        padding: 15px 28px;
    }
}

/************************************/
/***     CLINIC EXPERIENCE  ***/
/************************************/

.clinic-experience {
    padding: 40px 0;
}

/************************************/
/***       05. About Us css 	  ***/
/************************************/

.about-us {
    /* background-image: url("../gallery/bg-2.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain; */
    padding: 50px 0;
}
.about-us-content {
    /* background-image: url("../gallery/bg-2.png"); */
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}
.about-us-images {
    position: relative;
    background-image: url(../images/about-us-bg-shape.svg);
    background-repeat: no-repeat;
    background-position: right 60px bottom 40px;
    background-size: auto;
    padding-right: 100px;
    padding-bottom: 180px;
    margin-right: 30px;
}

.about-img-1 figure,
.about-img-2 figure {
    display: block;
}

.about-img-1 img {
    width: 100%;
    object-fit: cover;
    /* aspect-ratio: 1 / 0.76; */
}

.about-img-2 {
    position: absolute;
    width: 100%;
    max-width: 385px;
    bottom: 0;
    right: 0;
}

.about-img-2 img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 0.76;
}

.experience-counter {
    position: absolute;
    top: 0;
    left: 0;
    height: 152px;
    width: 152px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    background-color: var(--accent-color);
    border: 2px dotted var(--main-color);

    transform: translate(-50%, -6px);
    border-radius: 50%;
}

.experience-counter h3 {
    font-size: 34px;
    color: var(--main-color);
    text-align: center;
    width: 100%;
    margin-bottom: 5px;
}

.experience-counter p {
    font-weight: 600;
    line-height: 1.4em;
    text-transform: capitalize;
    color: var(--main-color);
    text-align: center;
    margin-bottom: 0;
    padding: 3px;
}

.feedback-counter {
    position: absolute;
    top: 0;
    right: 0;
    transform: rotate(-180deg) translate(20px, -20px);
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
}

.feedback-counter p {
    font-size: 18px;
    font-weight: 700;
    color: var(--main-color);
    height: 65px;
    width: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-color);
    border-radius: 50%;
    margin: 0 0 15px 0;
    transition: all 0.3s ease-in-out;
}

.feedback-counter:hover p {
    background-color: var(--third-color);
    border: 1px solid var(--main-color);
}

.feedback-counter h3 {
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
    width: calc(100% - 75px);
}

.about-us-content-body {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 80px;
}

.about-us-content-body::before {
    content: "";
    position: absolute;
    right: 50%;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    /* border: 1px solid var(--divider-color); */
    width: 1px;
    height: 100%;
}

.about-us-content-info {
    /* width: calc(50% - 40px); */
    width: 100%;
}

.about-us-content-list {
    margin-bottom: 40px;
}

.about-us-content-list ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.about-us-content-list ul li {
    position: relative;
    font-weight: 500;
    color: var(--primary-color);
    padding-left: 30px;
    margin-bottom: 5px;
}

.about-us-content-list ul li:last-child {
    margin-bottom: 0;
}

.about-us-content-list ul li::before {
    content: "\f058";
    position: absolute;
    font-family: "FontAwesome";
    font-size: 20px;
    font-weight: 900;
    line-height: normal;
    color: var(--main-color);
    display: inline-block;
    top: 2px;
    left: 0;
}

.about-us-contact-list {
    width: calc(50% - 40px);
}

.about-contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.about-contact-item:last-child {
    margin-bottom: 0;
}

.about-contact-item .icon-box {
    width: 40px;
    height: 40px;
    background-color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    transition: all 0.3s ease-in-out;
}

.about-contact-item:hover .icon-box {
    background-color: var(--primary-color);
}

.about-contact-item .icon-box figure {
    display: block;
    border-radius: 50%;
    overflow: hidden;
}

.about-contact-item .icon-box img {
    max-width: 40px;
    border-radius: 50%;
}

.about-contact-item .icon-box i {
    font-size: 18px;
    color: var(--white-color);
}

.about-contact-content {
    width: calc(100% - 55px);
}

.about-contact-content h3 {
    font-size: 20px;
    text-transform: capitalize;
}

.about-contact-content p {
    font-weight: 500;
    color: var(--primary-color);
    text-transform: capitalize;
    margin-bottom: 0;
}

/************************************/
/***     06. Why Choose Us css    ***/
/************************************/

.why-choose-us {
    padding: 100px 0;
    background-color: var(--secondery-color);
}

.why-choose-item {
    display: flex;
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.why-choose-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.why-choose-item .icon-box {
    position: relative;
    width: 60px;
    height: 60px;
    background-color: var(--divider-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    transition: all 0.4s ease-in-out;
}

.why-choose-item:hover .icon-box {
    background-color: transparent;
}

.why-choose-item .icon-box::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--primary-color);
    border-radius: 50%;
    height: 100%;
    width: 100%;
    transform: scale(0);
    transition: all 0.3s ease-in-out;
}

.why-choose-item:hover .icon-box::before {
    transform: scale(1);
}

.why-choose-item .icon-box img {
    max-width: 24px;
    z-index: 1;
    transition: all 0.3s ease-in-out;
}

.why-choose-item:hover .icon-box img {
    filter: brightness(0) invert(1);
}

.why-choose-item-content {
    width: calc(100% - 80px);
}

.why-choose-item-content h3 {
    font-size: 20px;
    text-transform: capitalize;
    margin-bottom: 10px;
}

.why-choose-item-content p {
    color: var(--primary-color);
    margin-bottom: 0;
}

.why-choose-images {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-left: 30px;
}

.why-choose-img-box-1,
.why-choose-img-box-2 {
    display: flex;
    gap: 20px;
    width: 100%;
}

.why-choose-img-1 figure,
.why-choose-img-2 figure,
.why-choose-img-3 figure,
.why-choose-img-4 figure {
    display: block;
}

.why-choose-img-1 {
    width: calc(57% - 10px);
}

.why-choose-img-1 img {
    width: 100%;
    aspect-ratio: 1 / 0.756;
    object-fit: cover;
}

.why-choose-img-2 {
    width: calc(43% - 10px);
}

.why-choose-img-2 img {
    width: 100%;
    aspect-ratio: 1 / 1.01;
    object-fit: cover;
}

.why-choose-img-3 {
    width: calc(67% - 10px);
}

.why-choose-img-3 img {
    width: 100%;
    aspect-ratio: 1 / 0.746;
    object-fit: cover;
}

.why-choose-img-4 {
    width: calc(33% - 10px);
}

.why-choose-img-4 img {
    width: 100%;
    aspect-ratio: 1 / 1.55;
    object-fit: cover;
}

/************************************/
/***     07. Our Services css     ***/
/************************************/

.our-services {
    padding: 50px 0;
}

.service-item {
    position: relative;
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.service-image a {
    display: block;
    cursor: none;
}

.service-image a figure {
    border-radius: 10px;
    overflow: hidden;
}

.service-image a figure::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(
        360deg,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0) 105%
    );
    height: 100%;
    width: 100%;
    z-index: 1;
    transition: all 0.3s ease-in-out;
}

.service-image img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1.36;
    border-radius: 10px;
    transition: all 0.4s ease-in-out;
}

.service-item:hover .service-image img {
    transform: scale(1.1);
}

.service-btn {
    position: absolute;
    top: 40px;
    right: 40px;
    z-index: 1;
}

.service-btn a {
    background-color: var(--accent-color);
    height: 60px;
    width: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease-in-out;
}

.service-btn a:hover {
    background-color: var(--main-color);
}

.service-btn a img {
    max-width: 20px;
    transform: rotate(-45deg);
    transition: all 0.4s ease-in-out;
}

.service-btn a:hover img {
    transform: rotate(0);
}

.service-content {
    position: absolute;
    bottom: 40px;
    left: 40px;
    right: 40px;
    z-index: 1;
}

.service-content h3 {
    font-size: 20px;
    text-transform: capitalize;
    color: var(--white-color);
    margin-bottom: 10px;
}

.service-content h3 a {
    color: inherit;
}

.service-content p {
    color: var(--white-color);
    margin-bottom: 0;
}

.all-services-btn {
    text-align: center;
    margin-top: 20px;
}

/************************************/
/***      08. Intro Video css     ***/
/************************************/

.intro-video .container-fluid {
    padding: 0;
}

.intro-video-box {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.intro-video-image a {
    display: block;
    cursor: none;
}

.intro-video-image figure::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(
        180deg,
        rgba(25, 35, 36, 0) 0%,
        rgba(25, 35, 36, 0.6) 80.94%
    );
    height: 100%;
    width: 100%;
    z-index: 1;
}

.intro-video-image img {
    width: 100%;
    aspect-ratio: 1 / 0.41;
    object-fit: cover;
}

.video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.video-play-button a {
    position: relative;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--white-color);
    border: 1px solid var(--white-color);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: none;
    transition: all 0.3s ease-in-out;
}

.video-play-button a:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/************************************/
/***    09. Latest Project css    ***/
/************************************/

.our-project {
    padding: 100px 0 70px;
}

.our-Project-nav {
    text-align: center;
    margin-bottom: 60px;
}

.our-Project-nav ul {
    list-style: none;
    text-align: center;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 15px 30px;
    padding: 0;
    margin: 0;
}

.our-Project-nav ul li a {
    position: relative;
    display: inline-block;
    color: var(--primary-color);
    font-weight: 500;
    line-height: 1.2em;
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
}

.our-Project-nav ul li a:after,
.our-Project-nav ul li a:before {
    content: "";
    position: absolute;
    left: 0px;
    bottom: -8px;
    width: 100%;
    height: 2px;
    background-color: var(--accent-color);
    transform-origin: bottom right;
    transition: transform 0.4s ease-in-out;
    transform: scaleX(0);
}

.our-Project-nav ul li a:after {
    top: -8px;
    bottom: auto;
    left: 0px;
}

.our-Project-nav ul li a:hover:before,
.our-Project-nav ul li a.active-btn:before,
.our-Project-nav ul li a:hover:after,
.our-Project-nav ul li a.active-btn:after {
    transform-origin: bottom left;
    transform: scaleX(1);
}

.project-item {
    position: relative;
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.project-featured-image figure::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        360deg,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0) 111.33%
    );
    z-index: 0;
}

.project-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(20px);
    border-radius: 50%;
    transform: translate(-50%, -30%);
    transition: all 0.3s ease-in-out;
    z-index: 1;
}

.project-item:hover .project-btn {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
}

.project-btn a {
    width: 100px;
    height: 100px;
    background: var(--dark-divider-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
}

.project-btn img {
    max-width: 24px;
    transform: rotate(-45deg);
    transition: all 0.4s ease-in-out;
}

.project-btn a:hover {
    background: var(--primary-color);
}

.project-btn a:hover img {
    transform: rotate(0deg);
}

.project-featured-image img {
    width: 100%;
    aspect-ratio: 1 / 0.79;
    object-fit: cover;
}

.project-content {
    position: absolute;
    left: 40px;
    bottom: 40px;
    right: 40px;
}

.project-content h3,
.project-content h2 {
    color: var(--white-color);
    text-transform: capitalize;
    position: relative;
    z-index: 1;
}

.project-content h3 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
}

.project-content h2 {
    font-size: 20px;
    font-weight: 700;
}

.project-content h2 a {
    color: inherit;
}

/************************************/
/***      10. How We Work css     ***/
/************************************/

.how-we-work {
    background: var(--primary-color);
    padding: 100px 0;
}

.how-we-work-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.how-we-work-item {
    width: calc(25% - 22.5px);
}

.how-we-work-item .icon-box {
    margin-bottom: 30px;
}

.how-we-work-item .icon-box img {
    max-width: 60px;
}

.how-we-work-content h3 {
    font-size: 20px;
    text-transform: capitalize;
    color: var(--white-color);
    margin-bottom: 10px;
}

.how-we-work-content p {
    color: var(--white-color);
    margin: 0;
}

.how-work-company-slider {
    border-top: 1px solid var(--dark-divider-color);
    margin-top: 60px;
    padding-top: 60px;
}
.logo-img {
    width: 180px;
}
.how-work-company-slider .company-logo {
    text-align: center;
}

.how-work-company-slider .company-logo img {
    width: 100%;
    max-height: 40px;
}

/************************************/
/***      11. Our Skills css      ***/
/************************************/

.our-skill {
    padding: 100px 0;
    background: url("../images/section-bg-shape-2.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.skills-progress-bar {
    margin-bottom: 40px;
}

.skills-progress-bar:last-child {
    margin-bottom: 0;
}

.skillbar .skill-data {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.skill-data .skill-title {
    font-size: 16px;
    text-transform: capitalize;
    color: var(--primary-color);
}

.skill-data .skill-no {
    font-size: 16px;
    color: var(--primary-color);
    margin-left: 20px;
}

.skill-progress {
    width: 100%;
    height: 12px;
    background: var(--divider-color);
    border-radius: 99px;
    position: relative;
}

.skill-progress .count-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: var(--primary-color);
    border-radius: 99px;
}

.our-skill-image {
    position: relative;
    padding-bottom: 155px;
    margin-left: 65px;
}

.our-skill-img-1 {
    width: 333px;
    position: relative;
    background: url("../images/our-skill-img-bg-dot.svg");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 84px auto;
    padding: 30px 0 0 30px;
}

.our-skill-img-1 figure,
.our-skill-img-2 figure,
.our-skill-img-3 figure {
    display: block;
}

.our-skill-img-1 img {
    width: 100%;
    aspect-ratio: 1/1.37;
    object-fit: cover;
}

.our-skill-img-2 {
    width: 202px;
    position: absolute;
    top: 70px;
    right: 0;
}

.our-skill-img-2 img {
    width: 100%;
    aspect-ratio: 1/0.93;
    object-fit: cover;
}

.our-skill-img-3 {
    width: 333px;
    position: absolute;
    bottom: 0;
    right: 0;
}

.our-skill-img-3 img {
    width: 100%;
    aspect-ratio: 1/0.97;
    object-fit: cover;
}

/************************************/
/***   12. Our Testimonials css   ***/
/************************************/

.our-testimonials {
    background: var(--secondery-color);
}

.our-testimonials .container-fluid {
    padding: 0;
}

.our-testimonials-image {
    height: 100%;
}

.our-testimonials-image figure,
.our-testimonials-image figure img {
    width: 100%;
    height: 100%;
    /* aspect-ratio: 1 / 0.82; */
    object-fit: cover;
}

.our-testimonial-content {
    padding: 70px;
}

.our-testimonial-content .section-title {
    background: url("../images/testimonial-quote.svg") no-repeat;
    background-position: top right;
    background-size: 162px auto;
}

.testimonial-slider {
    width: 100%;
    max-width: 620px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--divider-color);
}

.testimonial-slider .swiper-wrapper {
    cursor: none;
}

.testimonial-rating {
    margin-bottom: 20px;
}

.testimonial-rating i {
    font-size: 18px;
    color: goldenrod;
    margin-right: 2px;
}

.testimonial-rating i:last-child {
    margin-right: 0;
}

.testimonial-content {
    margin-bottom: 20px;
}

.testimonial-content p {
    font-size: 17px;
    color: var(--primary-color);
    margin: 0;
}

.testimonial-body {
    display: flex;
    align-items: center;
}

.testimonial-body .author-image {
    margin-right: 15px;
}

.testimonial-body .author-image img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.testimonial-body .author-content {
    width: calc(100% - 75px);
}

.testimonial-body .author-content h3 {
    font-size: 20px;
    text-transform: capitalize;
}

.testimonial-body .author-content p {
    text-transform: capitalize;
    margin: 0;
}

.testimonial-rating-counter {
    display: flex;
    align-items: center;
    gap: 20px;
}

.testimonial-rating-counter .rating-counter h2 {
    font-size: 58px;
}

.testimonial-client-rating {
    display: inline-block;
    /* background: var(--accent-color); */
    padding: 0px 5px 3px 5px;
    line-height: 1em;
}

.testimonial-client-rating i {
    font-size: 20px;
    color: goldenrod;
}

.testimonial-rating-content p {
    color: var(--primary-color);
    font-weight: 500;
    margin: 0;
}

/************************************/
/***       13. Our Blog css       ***/
/************************************/

.our-blog {
    padding: 100px 0;
    background: url("../images/section-bg-shape-2.svg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
}

.post-item {
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.post-featured-image {
    margin-bottom: 20px;
}

.post-featured-image a {
    cursor: none;
}

.post-featured-image figure,
.post-featured-image a {
    display: block;
}

.post-featured-image img {
    width: 100%;
    aspect-ratio: 1 / 0.85;
    object-fit: cover;
    transition: all 0.4s ease-in-out;
}

.post-item:hover .post-featured-image img {
    transform: scale(1.1);
}

.post-item-content {
    margin-bottom: 15px;
}

.post-item-content h3 {
    color: var(--primary-color);
    font-size: 20px;
    line-height: 1.4em;
}

.post-item-content h3 a {
    color: inherit;
}

.post-item-btn a {
    position: relative;
    color: var(--primary-color);
    font-weight: 500;
    text-transform: capitalize;
    padding-right: 0;
}

.our-blog-footer {
    margin-top: 20px;
    text-align: center;
}

/************************************/
/***      	14. Footer css 		  ***/
/************************************/

.main-footer {
    padding: 25px 0 0;
    background: var(--primary-color);
}

.main-footer .footer-header {
    border-bottom: 1px solid var(--dark-divider-color);
    margin-bottom: 30px;
    padding-bottom: 20px;
}

.footer-social-links {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 30px;
}

.footer-social-link-title h3 {
    font-size: 20px;
    text-transform: capitalize;
    color: var(--white-color);
}

.footer-social-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-social-links ul li {
    display: inline-flex;
    margin-right: 10px;
}

.footer-social-links ul li:last-child {
    margin-right: 0;
}

.footer-social-links ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--white-color);
    border-radius: 50%;
    height: 36px;
    width: 36px;
    transition: all 0.3s ease-in-out;
}

.footer-social-links ul li a i {
    font-size: 18px;
    color: var(--main-color);
    transition: all 0.3s ease-in-out;
}

.footer-social-links ul li a:hover {
    background: var(--accent-color);
}

.footer-social-links ul li a:hover i {
    color: var(--white-color);
}

.footer-links h3 {
    font-size: 20px;
    text-transform: capitalize;
    color: var(--white-color);
    margin-bottom: 20px;
}

.footer-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links ul li {
    color: var(--white-color);
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
    margin-bottom: 10px;
}

.footer-links ul li:last-child {
    margin-bottom: 0;
}

.footer-links ul li:hover {
    color: var(--accent-color);
}

.footer-links ul li a {
    display: block;
    color: inherit;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.footer-contact-item:last-child {
    margin-bottom: 0;
}

.footer-contact-item .icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dark-divider-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    transition: all 0.3s ease-in-out;
}

.footer-contact-item:hover .icon-box {
    border-color: var(--white-color);
}

.footer-contact-item .icon-box i {
    font-size: 16px;
    color: var(--white-color);
}

.footer-contact-content {
    width: calc(100% - 50px);
}

.footer-contact-content p {
    color: var(--white-color);
    margin: 0;
}

.footer-newsletter-form p {
    color: var(--white-color);
    margin-bottom: 30px;
}

.footer-newsletter-form .form-group {
    display: flex;
    background: var(--white-color);
    overflow: hidden;
}

.footer-newsletter-form .form-group .form-control {
    width: 85%;
    border: none;
    border-radius: 0;
    color: var(--text-color);
    background: transparent;
    padding: 13px 10px;
    box-shadow: none;
}

.footer-newsletter-form .form-group .form-control::placeholder {
    color: var(--text-color);
}

.footer-newsletter-form button {
    background-color: transparent;
    width: 15%;
    border: none;
    padding: 0;
}

.footer-newsletter-form button i {
    color: var(--accent-color);
    font-size: 16px;
    transition: all 0.3s ease-in-out;
}

.footer-newsletter-form button:hover i {
    color: var(--primary-color);
}

.footer-copyright {
    border-top: 1px solid var(--dark-divider-color);
    text-align: center;
    margin-top: 25px;
    padding: 10px 0;
}

.footer-copyright-text p {
    color: var(--white-color);
    margin: 0;
}

/************************************/
/***     15. About Us Page css 	  ***/
/************************************/

.page-header {
    position: relative;
    background: url("../images/page-header-bg.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 270px 0 180px;
    margin-top: -118px;
}

.page-header::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(
        180deg,
        rgba(25, 35, 36, 0) 0%,
        rgba(25, 35, 36, 0.4) 80.94%
    );
    width: 100%;
    height: 100%;
    z-index: 0;
}

.page-header-box {
    position: relative;
    text-align: center;
    z-index: 1;
}

.page-header-box h1 {
    display: inline-block;
    font-size: 40px;
    font-weight: 700;
    color: var(--white-color);
    letter-spacing: -0.02em;
    margin-bottom: 10px;
    cursor: none;
}

.page-header-box ol {
    margin: 0;
    padding: 0;
    justify-content: center;
}

.page-header-box ol li.breadcrumb-item {
    font-size: 22px;
    text-transform: capitalize;
    color: var(--white-color);
}

.page-header-box ol li.breadcrumb-item a {
    color: inherit;
}

.page-header-box ol .breadcrumb-item + .breadcrumb-item::before {
    font-size: 20px;
    color: var(--white-color);
}

.about-us.page-about-us {
    background: transparent;
}

.about-facility-list {
    margin-top: 100px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.about-facility-item {
    width: calc(33.33% - 20px);
    display: flex;
}

.about-facility-item .icon-box {
    position: relative;
    height: 60px;
    width: 60px;
    background-color: var(--divider-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
}

.about-facility-item .icon-box:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--primary-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.about-facility-item:hover .icon-box:before {
    transform: scale(1);
}

.about-facility-item .icon-box img {
    max-width: 24px;
    z-index: 1;
    transition: all 0.4s ease-in-out;
}

.about-facility-item:hover .icon-box img {
    filter: brightness(0) invert(1);
}

.about-facility-content {
    width: calc(100% - 80px);
}

.about-facility-content h3 {
    font-size: 20px;
    text-transform: capitalize;
    margin-bottom: 10px;
}

.about-facility-content p {
    margin-bottom: 0;
}

.vision-mission {
    padding: 100px 0 50px;
    background: linear-gradient(
        180deg,
        var(--primary-color) 60%,
        var(--white-color) 40%
    );
}

.vision-mission-box {
    background-color: var(--secondery-color);
    padding: 45px 60px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px 150px;
}

.vision-mission-item {
    position: relative;
    width: calc(50% - 75px);
}

.vision-mission-item::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 1px;
    top: 0;
    right: -75px;
    bottom: 0;
    background-color: var(--divider-color);
    z-index: 1;
}

.vision-mission-item:nth-child(2n + 2)::before,
.vision-mission-item:last-child::before {
    display: none;
}

.vision-mission-item .icon-box {
    position: relative;
    width: 95px;
    height: 95px;
    background: var(--divider-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.vision-mission-item .icon-box:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--primary-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.vision-mission-item:hover .icon-box:before {
    transform: scale(1);
}

.vision-mission-item .icon-box img {
    position: relative;
    max-width: 36px;
    z-index: 1;
    transition: all 0.4s ease-in-out;
}

.vision-mission-item:hover .icon-box img {
    filter: brightness(0) invert(1);
}

.vision-mission-content h3 {
    font-size: 20px;
    text-transform: capitalize;
    margin-bottom: 20px;
}

.vision-mission-content p {
    margin: 0;
}

.best-selling {
    background: url(../images/section-bg-shape-1.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    padding: 50px 0 100px;
}

.best-selling-content-img {
    margin-bottom: 80px;
}

.best-selling-iamge figure,
.best-selling-content-img figure {
    display: block;
}

.best-selling-content-img img {
    width: 100%;
    aspect-ratio: 1 / 0.42;
    object-fit: cover;
}

.best-selling-content .section-title {
    margin-bottom: 0;
}

.best-selling-iamge img {
    width: 100%;
    aspect-ratio: 1 / 0.93;
    object-fit: cover;
}

.our-team {
    padding: 100px 0 70px;
}

.team-member-item {
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.team-image {
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
}

.team-image a {
    display: block;
    cursor: none;
}

.team-image figure {
    display: block;
}

.team-image figure img {
    width: 100%;
    aspect-ratio: 1 / 1.11;
    object-fit: cover;
    transition: all 0.4s ease-in-out;
}

.team-member-item:hover .team-image figure img {
    transform: scale(1.1);
}

.team-readmore-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 1;
}

.team-readmore-btn a {
    width: 60px;
    height: 60px;
    background-color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
}

.team-readmore-btn a:hover {
    background-color: var(--primary-color);
}

.team-readmore-btn img {
    max-width: 20px;
    transform: rotate(-45deg);
    transition: all 0.4s ease-in-out;
}

.team-readmore-btn a:hover img {
    transform: rotate(0deg);
}

.team-content {
    text-align: center;
    margin-bottom: 20px;
}

.team-content h3 {
    font-size: 20px;
    text-transform: capitalize;
    margin-bottom: 10px;
}

.team-content p {
    font-weight: 500;
    text-transform: capitalize;
    margin: 0;
}

.team-social-icon ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.team-social-icon ul li {
    display: inline-flex;
    margin-right: 10px;
}

.team-social-icon ul li:last-child {
    margin-right: 0;
}

.team-social-icon ul li a {
    width: 44px;
    height: 44px;
    color: var(--accent-color);
    background: var(--divider-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
}

.team-social-icon ul li a:hover {
    color: var(--white-color);
    background: var(--primary-color);
}

.team-social-icon ul li a i {
    color: inherit;
    font-size: 18px;
}

.our-faqs {
    padding: 50px 0;
}

.our-faqs-content {
    margin-right: 70px;
}

.faq-accordion .accordion-item {
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 30px;
    padding-bottom: 15px;
}

.faq-accordion .accordion-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.faq-accordion .accordion-header .accordion-button {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2em;
    color: var(--primary-color);
    align-items: start;
    padding-right: 35px;
    transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-header .accordion-button span {
    margin-right: 7px;
}

.faq-accordion .accordion-button:not(.collapsed) {
    padding-bottom: 15px;
}

.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after {
    content: "\2b";
    font-family: "Font Awesome 6 Free";
    position: absolute;
    font-size: 18px;
    font-weight: 900;
    color: var(--primary-color);
    text-align: right;
    top: 0;
    right: 0;
    transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-button:not(.collapsed)::after {
    content: "\f068";
}

.faq-accordion .accordion-body {
    padding-right: 35px;
}

.faq-accordion .accordion-body p {
    margin: 0;
}

.our-faqs-image {
    text-align: right;
    position: relative;
}

.our-faqs-image figure {
    display: block;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(31, 78, 95, 0.12);
    transition: all 0.4s ease-in-out;
}

.our-faqs-image figure:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(31, 78, 95, 0.2);
}

.our-faqs-image img {
    width: 100%;
    /* aspect-ratio: 1 / 1.26; */
    object-fit: cover;
    border-radius: 20px;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.our-faqs-image figure:hover img {
    transform: scale(1.04);
}

.our-faqs .description {
    margin-top: 35px;
    padding: 25px;
    background: #fdfaf9;
    border-left: 4px solid var(--main-color);
    border-radius: 0 12px 12px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.our-faqs .description p {
    font-size: 16px;
    color: #1d1d1d;
    line-height: 1.76em;
    margin-bottom: 15px;
}

.our-faqs .description p:last-child {
    margin-bottom: 0;
}

.our-clients {
    background-color: var(--secondery-color);
    padding: 100px 0;
}

.our-clients .our-clients-box {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.our-client-slider .client-logo {
    text-align: center;
}

.our-client-slider .client-logo img {
    width: 100%;
    max-height: 40px;
}

/************************************/
/***     16. Services Page css 	  ***/
/************************************/

.page-services {
    padding: 100px 0 70px;
}

/************************************/
/***    17. Service Single css 	  ***/
/************************************/

.page-service-single {
    padding: 100px 0;
}

.service-sidebar {
    position: sticky;
    top: 30px;
    margin-right: 30px;
}

.service-catagery-list {
    border: 1px solid var(--divider-color);
    padding: 30px;
    margin-bottom: 40px;
    overflow: hidden;
}

.service-catagery-list h3 {
    font-size: 20px;
    text-transform: capitalize;
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.service-catagery-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.service-catagery-list ul li {
    margin-bottom: 20px;
}

.service-catagery-list ul li:last-child {
    margin: 0;
}

.service-catagery-list ul li a {
    position: relative;
    display: block;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--accent-color);
    padding-right: 25px;
    transition: all 0.3s ease-in-out;
}

.service-catagery-list ul li:hover a {
    color: var(--primary-color);
}

.service-catagery-list ul li a::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 18px;
    height: 18px;
    transform: translateY(-50%) rotate(-45deg);
    background-image: url(../images/arrow-accent.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transition: all 0.3s ease-in-out;
}

.service-catagery-list ul li:hover a::before {
    transform: translateY(-50%) rotate(0);
    filter: brightness(0) invert(0);
}

.sidebar-cta-image figure {
    display: block;
}

.sidebar-cta-image img {
    width: 100%;
    aspect-ratio: 1 / 0.57;
    object-fit: cover;
}

.sidebar-cta-Body {
    border: 1px solid var(--divider-color);
    padding: 30px;
}

.sidebar-cta-content {
    margin-bottom: 25px;
}

.sidebar-cta-content h3 {
    font-size: 20px;
    text-transform: capitalize;
    margin-bottom: 10px;
}

.sidebar-cta-content p {
    font-weight: 500;
    margin-bottom: 0;
}

.sidebar-cta-contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.sidebar-cta-contact-item:last-child {
    margin-bottom: 0;
}

.sidebar-cta-contact-item .icon-box {
    position: relative;
    height: 58px;
    width: 58px;
    background-color: var(--divider-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    transition: all 0.4s ease-in-out;
}

.sidebar-cta-contact-item:hover {
    background-color: transparent;
}

.sidebar-cta-contact-item .icon-box::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--primary-color);
    border-radius: 50%;
    height: 100%;
    width: 100%;
    transform: scale(0);
    transition: all 0.3s ease-in-out;
}

.sidebar-cta-contact-item:hover .icon-box::before {
    transform: scale(1);
}

.sidebar-cta-contact-item .icon-box img {
    position: relative;
    max-width: 24px;
    transition: all 0.3s ease-in-out;
    z-index: 1;
}

.sidebar-cta-contact-item:hover .icon-box img {
    filter: brightness(0) invert(1);
}

.cta-contact-item-content {
    width: calc(100% - 78px);
}

.cta-contact-item-content p {
    font-weight: 500;
    margin: 0;
}

.service-feature-image {
    margin-bottom: 40px;
}

.service-feature-image figure {
    display: block;
}

.service-feature-image img {
    width: 100%;
    aspect-ratio: 1 / 0.55;
    object-fit: cover;
}

.service-entry {
    margin-bottom: 60px;
}

.service-entry h2 {
    font-size: 46px;
    margin-bottom: 20px;
}

.service-entry h2 span {
    color: var(--accent-color);
}

.service-entry p {
    margin-bottom: 20px;
}

.service-entry p:last-child {
    margin-bottom: 0;
}

.service-entry ul {
    list-style: none;
    margin-bottom: 20px;
    padding: 0;
}

.service-entry ul li {
    position: relative;
    font-weight: 500;
    color: var(--text-color);
    text-transform: capitalize;
    padding-left: 30px;
    margin-bottom: 15px;
}

.service-entry ul li:last-child {
    margin-bottom: 0;
}

.service-entry ul li::before {
    content: "\f058";
    position: absolute;
    font-family: "FontAwesome";
    font-size: 20px;
    font-weight: 900;
    line-height: normal;
    color: var(--accent-color);
    display: inline-block;
    top: 2px;
    left: 0;
}

.service-entry-list-image {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
}

.service-entry-image,
.service-entry-list {
    width: calc(50% - 15px);
}

.service-entry-image figure {
    display: block;
}

.service-entry-image img {
    width: 100%;
    aspect-ratio: 1 / 0.615;
    object-fit: cover;
}

.service-entry-list ul {
    margin-bottom: 0;
}

.why-choose-content.service-single-why-choose {
    margin-bottom: 60px;
}

/************************************/
/***     18. Blog Archive css 	  ***/
/************************************/

.page-blog {
    padding: 100px 0;
}

.page-pagination {
    margin-top: 20px;
    text-align: center;
}

.page-pagination ul {
    justify-content: center;
    padding: 0;
    margin: 0;
}

.page-pagination ul li a,
.page-pagination ul li span {
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    background: var(--accent-color);
    color: var(--white-color);
    width: 40px;
    height: 40px;
    margin: 0 5px;
    font-weight: 700;
    line-height: 1em;
    transition: all 0.3s ease-in-out;
}

.page-pagination ul li.active a,
.page-pagination ul li a:hover {
    background: var(--primary-color);
    color: var(--white-color);
}

/************************************/
/***     19. Blog Single css 	  ***/
/************************************/

.page-single-post {
    padding: 100px 0;
}

.post-image {
    position: relative;
    margin-bottom: 30px;
}

.post-image figure {
    display: block;
}

.post-image figure,
.post-image img {
    aspect-ratio: 1 / 0.5;
    object-fit: cover;
}

.post-content {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.post-entry {
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.post-entry:after {
    content: "";
    display: block;
    clear: both;
}

.post-entry a {
    color: var(--accent-color);
}

.post-entry h1,
.post-entry h2,
.post-entry h3,
.post-entry h4,
.post-entry h5,
.post-entry h6 {
    font-weight: 700;
    line-height: 1.2em;
    margin: 0 0 0.6em;
}

.post-entry h1 {
    font-size: 80px;
    letter-spacing: -0.02em;
}

.post-entry h2 {
    font-size: 46px;
    letter-spacing: -0.02em;
}

.post-entry h3 {
    font-size: 46px;
}

.post-entry h4 {
    font-size: 30px;
}

.post-entry h5 {
    font-size: 24px;
}

.post-entry h6 {
    font-size: 18px;
}

.post-entry p {
    margin-bottom: 20px;
}

.post-entry p:last-child {
    margin-bottom: 0;
}

.post-entry p strong {
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 600;
}

.post-entry ol {
    margin: 0 0 30px;
}

.post-entry ol li {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
}

.post-entry ul {
    padding: 0;
    margin: 20px 0 20px;
    padding-left: 20px;
}

.post-entry ul li {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-color);
    position: relative;
    margin-bottom: 15px;
}

.post-entry ul li:last-child {
    margin-bottom: 0;
}

.post-entry ul ul,
.post-entry ul ol,
.post-entry ol ol,
.post-entry ol ul {
    margin-top: 20px;
    margin-bottom: 0;
}

.post-entry ul ul li:last-child,
.post-entry ul ol li:last-child,
.post-entry ol ol li:last-child,
.post-entry ol ul li:last-child {
    margin-bottom: 0;
}

.post-entry blockquote {
    background: url(../images/icon-blockquote.svg), var(--accent-color);
    background-repeat: no-repeat;
    background-position: 35px 30px;
    background-size: 58px;
    border-radius: 0;
    padding: 30px 30px 30px 100px;
    margin-bottom: 30px;
}

.post-entry blockquote p {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4em;
    color: var(--white-color);
}

.post-entry blockquote p:last-child {
    margin-bottom: 0;
}

.tag-links {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.post-tags .tag-links a {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    background: var(--accent-color);
    color: var(--white-color);
    border-radius: 0;
    padding: 6px 20px;
    transition: all 0.3s ease-in-out;
}

.post-tags .tag-links a:hover {
    background: var(--primary-color);
}

.post-social-sharing {
    text-align: right;
}

.post-social-sharing ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-social-sharing ul li {
    display: inline-block;
    margin-right: 10px;
}

.post-social-sharing ul li:last-child {
    margin-right: 0;
}

.post-social-sharing ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--accent-color);
    color: var(--white-color);
    border-radius: 0;
    width: 36px;
    height: 36px;
    transition: all 0.3s ease-in-out;
}

.post-social-sharing ul li:hover a {
    background: var(--primary-color);
}

.post-social-sharing ul li a i {
    font-size: 18px;
    color: inherit;
}

/************************************/
/***     20. Project Page css 	  ***/
/************************************/

.page-project {
    padding: 100px 0 70px;
}

/************************************/
/***    21. Project Single css 	  ***/
/************************************/

.page-project-single {
    padding: 100px 0;
}

.project-single-sidebar {
    position: sticky;
    top: 30px;
    margin-right: 30px;
}

.project-detail-list {
    border: 1px solid var(--divider-color);
    padding: 30px;
    margin-bottom: 60px;
}

.project-detail-item {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.project-detail-item:last-child {
    margin-bottom: 0;
}

.project-detail-item .icon-box {
    position: relative;
    background-color: var(--divider-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    transition: all 0.3s ease-in-out;
}

.project-detail-item .icon-box::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--accent-color);
    border-radius: 50%;
    height: 100%;
    width: 100%;
    transform: scale(0);
    transition: all 0.3s ease-in-out;
}

.project-detail-item:hover .icon-box::before {
    transform: scale(1);
}

.project-detail-item .icon-box i {
    font-size: 22px;
    color: var(--accent-color);
    transition: all 0.3s ease-in-out;
    z-index: 1;
}

.project-detail-item:hover .icon-box i {
    color: var(--white-color);
}

.project-detail-content {
    width: calc(100% - 70px);
}

.project-detail-content h3 {
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    margin-bottom: 5px;
}

.project-detail-content p {
    color: var(--accent-color);
    text-transform: capitalize;
    margin-bottom: 0;
}

.project-single-image {
    margin-bottom: 40px;
}

.project-single-image figure {
    display: block;
}

.project-single-image img {
    width: 100%;
    aspect-ratio: 1 / 0.6;
    object-fit: cover;
}

.project-info,
.project-design-info {
    margin-bottom: 60px;
}

.project-entry h2 {
    font-size: 46px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 30px;
}

.project-entry p {
    margin-bottom: 20px;
}

.project-entry p:last-child {
    margin-bottom: 0;
}

.project-entry ul {
    list-style: none;
    margin-bottom: 20px;
    padding: 0;
}

.project-entry ul li {
    position: relative;
    font-weight: 500;
    color: var(--text-color);
    padding-left: 30px;
    margin-bottom: 15px;
}

.project-entry ul li:last-child {
    margin-bottom: 0;
}

.project-entry ul li::before {
    content: "\f058";
    position: absolute;
    font-family: "FontAwesome";
    font-size: 20px;
    font-weight: 900;
    line-height: normal;
    color: var(--accent-color);
    display: inline-block;
    top: 2px;
    left: 0;
}

.project-gallery-images {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.project-gallery-img {
    width: calc(25% - 22.5px);
}

.project-gallery-img a,
.project-gallery-img figure {
    display: block;
    cursor: none;
}

.project-gallery-img figure img {
    width: 100%;
    aspect-ratio: 1 / 0.99;
    object-fit: cover;
}

/************************************/
/***    22. Image Gallery css 	  ***/
/************************************/

.page-gallery {
    padding: 100px 0 70px;
}

.page-gallery-box .photo-gallery {
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.page-gallery-box .photo-gallery a {
    cursor: none;
}

.page-gallery-box .photo-gallery figure {
    display: block;
}

.page-gallery-box .photo-gallery img {
    width: 100%;
    aspect-ratio: 1 / 0.85;
    object-fit: cover;
}

/************************************/
/***    	23. FAQs Page css 	  ***/
/************************************/

.page-faqs {
    padding: 100px 0;
}

.faq-sidebar {
    position: sticky;
    top: 30px;
    margin-right: 30px;
}

.faq-catagery-list {
    border: 1px solid var(--divider-color);
    padding: 30px;
    margin-bottom: 60px;
}

.faq-catagery-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.faq-catagery-list ul li {
    margin-bottom: 20px;
    transition: all 0.3s ease-in-out;
}

.faq-catagery-list ul li:last-child {
    margin-bottom: 0;
}

.faq-catagery-list ul li a {
    position: relative;
    display: block;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--accent-color);
    padding-right: 25px;
    transition: all 0.3s ease-in-out;
}

.faq-catagery-list ul li:hover a {
    color: var(--primary-color);
}

.faq-catagery-list ul li a::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 18px;
    height: 18px;
    transform: translateY(-50%) rotate(-45deg);
    background-image: url(../images/arrow-accent.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transition: all 0.3s ease-in-out;
}

.faq-catagery-list ul li:hover a::before {
    transform: translateY(-50%) rotate(0);
    filter: brightness(0) invert(0);
}

.our-faq-section.page-faq-accordion {
    margin-bottom: 60px;
}

.our-faq-section.page-faq-accordion:last-child {
    margin-bottom: 0;
}

/************************************/
/***   24. Contact Us Page css 	  ***/
/************************************/

.page-contact-us {
    padding: 100px 0 50px;
}

.contact-us-image {
    height: 100%;
}

.contact-us-image figure {
    height: 100%;
    display: block;
}

.contact-us-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 0.962;
}

.contact-us-form {
    margin-left: 30px;
}

.contact-form .form-control {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2em;
    background-color: var(--white-color);
    color: var(--text-color);
    border: 1px solid var(--divider-color);
    border-radius: 0;
    outline: none;
    box-shadow: none;
    padding: 14px 15px;
}

.contact-form .form-control::placeholder {
    font-weight: 400;
}

.google-map {
    padding: 50px 0 100px;
}

.google-map .section-title {
    width: 100%;
    max-width: 560px;
    margin: 0 auto 30px;
    text-align: center;
}

.google-map-iframe,
.google-map-iframe iframe {
    width: 100%;
    height: 500px;
}

.contact-info-box {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 60px;
}

.contact-info-item {
    width: calc(33.33% - 20px);
    display: flex;
}

.contact-info-item .icon-box {
    position: relative;
    height: 60px;
    width: 60px;
    background-color: var(--divider-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
}

.contact-info-item .icon-box:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--primary-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.contact-info-item:hover .icon-box:before {
    transform: scale(1);
}

.contact-info-item .icon-box i {
    position: relative;
    font-size: 20px;
    color: var(--accent-color);
    transition: all 0.3s ease-in-out;
    z-index: 1;
}

.contact-info-item:hover .icon-box i {
    color: var(--white-color);
}

.contact-info-content {
    width: calc(100% - 80px);
}

.contact-info-content h3 {
    font-size: 20px;
    text-transform: capitalize;
    margin-bottom: 10px;
}

.contact-info-content p {
    margin-bottom: 0;
}

/************************************/
/***    25. 404 Error Page css 	  ***/
/************************************/

.error-page {
    background-image: url(../images/error-page-bg.svg);
    background-repeat: no-repeat;
    background-position: top -100px center;
    background-size: auto;
    padding: 100px 0;
}

.error-page-image {
    text-align: center;
    margin-bottom: 30px;
}

.error-page-image img {
    width: 100%;
    max-width: 50%;
}

.error-page-content {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}

.error-page-content .section-title {
    margin-bottom: 20px;
}

.error-page-content-body p {
    font-weight: 500;
    margin-bottom: 20px;
}

/************************************/
/***      26. Responsive css      ***/
/************************************/

@media only screen and (max-width: 1366px) {
    .our-testimonial-content {
        padding: 50px 50px;
    }
}

@media only screen and (max-width: 1024px) {
    .main-menu ul li {
        margin: 0;
    }

    .our-testimonial-content {
        padding: 40px 20px;
    }
}

@media only screen and (max-width: 991px) {
    .navbar {
        padding: 15px 0;
    }

    .insta-mobile-toggle {
        display: flex;
    }

    .header-btn {
        display: none;
    }

    .btn-default {
        padding: 14px 24px;
    }

    .section-row {
        margin-bottom: 20px;
    }

    .section-row .section-title {
        margin-bottom: 0;
        margin-right: 0px;
    }

    .section-title-content {
        margin-left: 0;
        margin-top: 15px;
    }

    .section-btn {
        text-align: left;
        margin-top: 15px;
    }

    .section-title {
        margin-bottom: 30px;
    }

    .section-title h3 {
        margin-bottom: 10px;
    }

    .section-title h1 {
        font-size: 40px;
    }

    .section-title h2 {
        font-size: 36px;
    }

    .section-title p {
        margin-top: 15px;
    }

    .hero {
        min-height: auto;
        padding: 180px 0 140px;
        /* margin-top: -92px; */
    }

    .hero.hero-slider-layout .hero-slide {
        padding: 180px 0 140px;
        min-height: auto;
    }

    .hero.hero-slider-layout .hero-pagination {
        padding-left: 15px;
        bottom: 30px;
    }

    .hero-content .section-title p {
        font-size: 20px;
    }

    .about-us {
        padding: 40px 0;
    }

    .about-us-images {
        margin: 0 0 30px 0;
    }

    .experience-counter {
        height: 137px;
        width: 137px;
    }

    .experience-counter h3 {
        font-size: 28px;
    }

    .about-us-content-list {
        margin-bottom: 30px;
    }

    .about-contact-item {
        margin-bottom: 30px;
    }

    .why-choose-us {
        padding: 50px 0;
    }

    .why-choose-content {
        margin-bottom: 30px;
    }

    .why-choose-item .icon-box {
        margin-right: 10px;
    }

    .why-choose-item-content {
        width: calc(100% - 70px);
    }

    .why-choose-images {
        margin-left: 0;
    }

    .our-services {
        padding: 40px 0;
    }

    .service-image img {
        aspect-ratio: 1 / 1.2;
    }

    .service-btn {
        top: 20px;
        right: 20px;
    }

    .service-btn a {
        height: 50px;
        width: 50px;
    }

    .service-content {
        bottom: 20px;
        left: 20px;
        right: 20px;
    }

    .all-services-btn {
        margin-top: 10px;
    }

    .video-play-button a {
        width: 80px;
        height: 80px;
    }

    .our-project {
        padding: 50px 0 20px;
    }

    .our-Project-nav {
        margin-bottom: 50px;
    }

    .project-featured-image img {
        aspect-ratio: 1 / 0.89;
    }

    .project-btn a {
        width: 80px;
        height: 80px;
    }

    .project-content {
        left: 20px;
        bottom: 20px;
        right: 20px;
    }

    .how-we-work {
        padding: 50px 0;
    }

    .how-we-work-item {
        width: calc(50% - 15px);
    }

    .how-we-work-item .icon-box {
        margin-bottom: 20px;
    }

    .how-work-company-slider {
        margin-top: 40px;
        padding-top: 40px;
    }

    .our-skill {
        padding: 50px 0;
    }

    .our-skill-content {
        margin-bottom: 30px;
    }

    .skills-progress-bar {
        margin-bottom: 30px;
    }

    .our-skill-image {
        max-width: 555px;
        margin: 0 auto;
    }

    .our-testimonials-image {
        height: auto;
    }

    .our-testimonials-image figure,
    .our-testimonials-image figure img {
        height: auto;
        /* aspect-ratio: 1 / 0.65; */
    }

    .our-testimonial-content {
        padding: 40px 15px;
    }

    .our-testimonial-content .section-title {
        background-size: contain;
    }

    .testimonial-slider {
        max-width: 100%;
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .testimonial-rating {
        margin-bottom: 15px;
    }

    .testimonial-content {
        margin-bottom: 20px;
    }

    .testimonial-content p {
        font-size: 16px;
    }

    .testimonial-rating-counter .rating-counter h2 {
        font-size: 48px;
    }

    .our-blog {
        padding: 50px 0;
    }

    .our-blog .section-title {
        margin-right: 0;
    }

    .post-featured-image img {
        aspect-ratio: 1 / 0.75;
    }

    .our-blog-footer {
        margin-top: 10px;
    }

    .main-footer {
        padding: 30px 0 0;
    }

    .main-footer .footer-header {
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .footer-links {
        padding-right: 0;
        margin-bottom: 30px;
    }

    .footer-newsletter-form p {
        margin-bottom: 20px;
    }

    .footer-copyright {
        margin-top: 0px;
        padding: 20px 0;
    }

    .page-header {
        padding: 180px 0 100px;
        margin-top: -92px;
    }

    .page-header-box h1 {
        font-size: 35px;
    }

    .page-header-box ol li.breadcrumb-item {
        font-size: 18px;
    }

    .page-header-box ol .breadcrumb-item + .breadcrumb-item::before {
        font-size: 16px;
    }

    .about-facility-list {
        margin-top: 50px;
        gap: 20px;
    }

    .about-facility-item {
        width: calc(33.33% - 13.33px);
    }

    .about-facility-item .icon-box {
        height: 45px;
        width: 45px;
        margin-right: 10px;
    }

    .about-facility-item .icon-box img {
        max-width: 20px;
    }

    .about-facility-content {
        width: calc(100% - 55px);
    }

    .about-facility-content h3 {
        font-size: 18px;
    }

    .vision-mission {
        padding: 50px 0 25px;
    }

    .vision-mission-box {
        padding: 30px 15px;
        gap: 30px 40px;
    }

    .vision-mission-item {
        width: calc(50% - 20px);
    }

    .vision-mission-item::before {
        right: -20px;
    }

    .vision-mission-item .icon-box {
        width: 70px;
        height: 70px;
    }

    .vision-mission-item .icon-box img {
        max-width: 30px;
    }

    .vision-mission-content h3 {
        margin-bottom: 15px;
    }

    .best-selling {
        padding: 25px 0 50px;
    }

    .best-selling-content {
        margin-bottom: 20px;
    }

    .best-selling-content-img {
        margin-bottom: 20px;
    }

    .our-team {
        padding: 50px 0 20px;
    }

    .team-readmore-btn {
        top: 20px;
        right: 20px;
    }

    .team-readmore-btn a {
        width: 50px;
        height: 50px;
    }

    .team-content {
        margin-bottom: 15px;
    }

    .our-faqs {
        padding: 50px 0;
    }

    .our-faqs-content {
        margin-right: 0;
        margin-bottom: 30px;
    }

    .faq-accordion .accordion-item {
        margin-bottom: 20px;
    }

    .our-faqs-image {
        text-align: center;
        margin-left: 0px;
    }

    .our-faqs-image img {
        /* aspect-ratio: 1 / 0.8; */
    }

    .our-clients {
        padding: 50px 0;
    }

    .our-clients .our-clients-box {
        max-width: 100%;
    }

    .page-services {
        padding: 50px 0 20px;
    }

    .page-service-single {
        padding: 50px 0;
    }

    .service-sidebar {
        position: initial;
        margin-right: 0;
        margin-bottom: 30px;
    }

    .service-catagery-list {
        padding: 20px;
        margin-bottom: 30px;
    }

    .service-catagery-list h3 {
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    .service-catagery-list ul li {
        margin-bottom: 10px;
    }

    .service-catagery-list ul li a::before {
        width: 16px;
        height: 16px;
    }

    .sidebar-cta-Body {
        padding: 20px;
    }

    .sidebar-cta-content {
        margin-bottom: 15px;
    }

    .sidebar-cta-contact-item {
        margin-bottom: 15px;
    }

    .service-feature-image {
        margin-bottom: 30px;
    }

    .service-entry {
        margin-bottom: 30px;
    }

    .service-entry ul li {
        font-size: 14px;
        padding-left: 25px;
        margin-bottom: 10px;
    }

    .service-entry ul li::before {
        font-size: 18px;
    }

    .why-choose-content.service-single-why-choose {
        margin-bottom: 30px;
    }

    .page-blog {
        padding: 50px 0;
    }

    .page-pagination {
        margin-top: 10px;
    }

    .page-single-post {
        padding: 50px 0;
    }

    .post-image {
        margin-bottom: 20px;
    }

    .post-entry blockquote {
        background-position: 25px 25px;
        background-size: 50px;
        padding: 25px 25px 25px 90px;
        margin-bottom: 20px;
    }

    .post-entry blockquote p {
        font-size: 18px;
    }

    .post-entry h2 {
        font-size: 38px;
    }

    .post-entry ul li {
        font-size: 16px;
    }

    .post-tags {
        margin-bottom: 20px;
    }

    .post-social-sharing ul {
        text-align: left;
    }

    .post-tags .tag-links a {
        padding: 6px 15px;
    }

    .page-project {
        padding: 50px 0 20px;
    }

    .page-project-single {
        padding: 50px 0;
    }

    .project-single-sidebar {
        position: initial;
        margin-right: 0px;
        margin-bottom: 30px;
    }

    .project-detail-list {
        padding: 20px;
        margin-bottom: 30px;
    }

    .project-single-image {
        margin-bottom: 30px;
    }

    .project-info,
    .project-design-info {
        margin-bottom: 30px;
    }

    .project-entry h2 {
        font-size: 36px;
        margin-bottom: 20px;
    }

    .page-gallery {
        padding: 50px 0 20px;
    }

    .page-gallery-box .photo-gallery img {
        aspect-ratio: 1 / 0.85;
    }

    .page-faqs {
        padding: 50px 0;
    }

    .faq-sidebar {
        position: initial;
        margin-right: 0;
        margin-bottom: 30px;
    }

    .faq-catagery-list {
        padding: 20px;
        margin-bottom: 30px;
    }

    .faq-catagery-list ul li {
        margin-bottom: 15px;
    }

    .faq-catagery-list ul li a::before {
        width: 16px;
        height: 16px;
    }

    .our-faq-section.page-faq-accordion {
        margin-bottom: 40px;
    }

    .page-contact-us {
        padding: 50px 0 25px;
    }

    .contact-us-image {
        height: auto;
        margin-bottom: 30px;
    }

    .contact-us-image img {
        aspect-ratio: 1 / 0.6;
    }

    .contact-us-form {
        margin-left: 0;
    }

    .contact-form .form-control {
        padding: 12px 15px;
    }

    .google-map {
        padding: 25px 0 50px;
    }

    .google-map-iframe,
    .google-map-iframe iframe {
        height: 400px;
    }

    .contact-info-box {
        gap: 20px;
        margin-top: 40px;
    }

    .contact-info-item {
        width: calc(33.33% - 13.33px);
    }

    .contact-info-item .icon-box {
        height: 50px;
        width: 50px;
        margin-right: 10px;
    }

    .contact-info-item .icon-box i {
        font-size: 16px;
    }

    .contact-info-content {
        width: calc(100% - 60px);
    }

    .contact-info-content h3 {
        font-size: 18px;
    }

    .error-page {
        padding: 50px 0;
    }

    .error-page-image img {
        max-width: 80%;
    }
}

@media only screen and (max-width: 767px) {
    .section-row {
        margin-bottom: 30px;
    }

    .section-title {
        margin-bottom: 30px;
    }

    .section-title h1 {
        font-size: 25px;
    }

    .section-title h2 {
        font-size: 26px;
    }

    .hero-content .section-title p {
        font-size: 18px;
    }

    .hero-content .btn-default {
        margin-right: 40px;
        margin-bottom: 10px;
    }

    .hero-content .btn-default.btn-highlighted {
        margin: 0;
    }

    .about-us-images {
        background-position: left 10px bottom 10px;
        background-size: 20% auto;
        padding: 10px 45px 100px 0;
    }

    .feedback-counter {
        transform: rotate(-180deg) translate(0, 0);
    }

    .feedback-counter p {
        font-size: 12px;
        height: 38px;
        width: 38px;
        margin: 0 0 6px 0;
    }

    .feedback-counter h3 {
        font-size: 12px;
        width: calc(100% - 40px);
    }

    .about-img-2 {
        max-width: 240px;
    }

    .experience-counter {
        height: 102px;
        width: 102px;
    }

    .experience-counter h3 {
        font-size: 22px;
    }

    .experience-counter p {
        font-size: 12px;
        line-height: 1.1em;
    }

    .about-us-content-body {
        gap: 0px;
    }

    .about-us-content-body::before {
        display: none;
    }

    .about-us-content-info {
        width: 100%;
        border-bottom: 1px solid var(--divider-color);
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    .about-us-content-list {
        margin-bottom: 20px;
    }

    .about-us-contact-list {
        width: 100%;
    }

    .about-us-content-list ul li {
        margin-bottom: 10px;
    }

    .about-us-content-list ul li::before {
        font-size: 18px;
        top: 3px;
    }

    .about-contact-item {
        margin-bottom: 20px;
    }

    .about-contact-content h3 {
        font-size: 18px;
    }

    .why-choose-item-content h3 {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .why-choose-img-2 img {
        aspect-ratio: 1 / 1.02;
    }

    .why-choose-img-4 img {
        aspect-ratio: 1 / 1.588;
    }

    .service-content h3 {
        font-size: 18px;
    }

    .intro-video-image img {
        aspect-ratio: 1 / 0.7;
    }

    .project-btn a {
        width: 60px;
        height: 60px;
    }

    .project-btn img {
        max-width: 20px;
    }

    .project-content h2 {
        font-size: 18px;
    }

    .how-we-work-item {
        width: 100%;
    }

    .how-we-work-item .icon-box img {
        max-width: 50px;
    }

    .how-we-work-content h3 {
        font-size: 18px;
    }

    .how-work-company-slider {
        margin-top: 30px;
        padding-top: 30px;
    }

    .our-skill-image {
        padding-bottom: 83px;
    }

    .our-skill-img-1 {
        width: 200px;
        padding: 20px 0 0 20px;
    }

    .our-skill-img-2 {
        width: 130px;
        top: 20px;
    }

    .our-skill-img-3 {
        width: 200px;
    }

    .testimonial-rating {
        margin-bottom: 10px;
    }

    .testimonial-rating i {
        font-size: 16px;
    }

    .testimonial-content {
        margin-bottom: 20px;
    }

    .testimonial-content p {
        font-size: 16px;
    }

    .testimonial-body .author-content h3 {
        font-size: 18px;
    }

    .testimonial-rating-counter .rating-counter h2 {
        font-size: 38px;
    }

    .post-featured-image {
        margin-bottom: 15px;
    }

    .post-item-content {
        margin-bottom: 10px;
    }

    .post-item-content h3 {
        font-size: 18px;
    }

    .footer-logo {
        margin-bottom: 20px;
    }

    .footer-social-links {
        justify-content: start;
        gap: 20px;
    }

    .footer-social-link-title h3 {
        font-size: 18px;
    }

    .footer-links h3 {
        margin-bottom: 15px;
    }

    .footer-links ul li {
        margin-bottom: 5px;
    }

    .footer-copyright {
        padding: 15px 0;
    }

    .page-header-box h1 {
        font-size: 22px;
        margin-bottom: 5px;
    }

    .page-header-box ol li.breadcrumb-item {
        font-size: 16px;
    }

    .page-header-box ol .breadcrumb-item + .breadcrumb-item::before {
        font-size: 14px;
    }

    .about-facility-item {
        width: 100%;
    }

    .vision-mission {
        background: linear-gradient(
            180deg,
            var(--primary-color) 40%,
            var(--white-color) 40%
        );
    }

    .vision-mission-box {
        padding: 20px;
        gap: 40px;
    }

    .vision-mission-item {
        width: 100%;
    }

    .vision-mission-item::before {
        height: 1px;
        width: 100%;
        top: auto;
        right: 0;
        bottom: -20px;
    }

    .vision-mission-item:nth-child(2n + 2)::before {
        display: block;
    }

    .vision-mission-item:last-child::before {
        display: none;
    }

    .vision-mission-content h3 {
        font-size: 18px;
    }

    .team-content h3 {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .faq-accordion .accordion-header .accordion-button {
        font-size: 18px;
        padding-right: 30px;
    }

    .faq-accordion .accordion-item .accordion-button::after,
    .faq-accordion .accordion-item .accordion-button.collapsed::after {
        top: 2px;
    }

    .faq-accordion .accordion-body {
        padding-right: 0;
    }

    .our-faqs-image img {
        /* aspect-ratio: 1 / 1.26; */
    }

    .service-catagery-list h3 {
        font-size: 18px;
    }

    .sidebar-cta-content h3 {
        font-size: 18px;
    }

    .service-entry p {
        margin-bottom: 15px;
    }

    .service-feature-image {
        margin-bottom: 20px;
    }

    .service-feature-image img {
        aspect-ratio: 1 / 0.7;
    }

    .service-entry-list-image {
        gap: 20px;
    }

    .service-entry-image,
    .service-entry-list {
        width: 100%;
    }

    .post-image figure,
    .post-image img {
        aspect-ratio: 1 / 0.7;
    }

    .post-entry blockquote {
        background-position: 20px 20px;
        padding: 70px 20px 20px 20px;
    }

    .post-entry h2 {
        font-size: 26px;
    }

    .project-single-image {
        margin-bottom: 20px;
    }

    .project-single-image img {
        aspect-ratio: 1 / 0.7;
    }

    .project-info,
    .project-design-highlight {
        margin-bottom: 20px;
    }

    .project-entry h2 {
        font-size: 26px;
        margin-bottom: 15px;
    }

    .project-entry p {
        margin-bottom: 15px;
    }

    .project-entry ul li {
        margin-bottom: 10px;
    }

    .project-entry ul li::before {
        font-size: 18px;
        top: 5px;
    }

    .project-gallery-images {
        gap: 20px;
    }

    .project-gallery-img {
        width: calc(50% - 10px);
    }

    .contact-us-image img {
        aspect-ratio: 1 / 0.75;
    }

    .google-map-iframe,
    .google-map-iframe iframe {
        height: 350px;
    }

    .contact-info-item {
        width: 100%;
    }

    .error-page-image img {
        max-width: 100%;
    }
}

/* Custom styles for single about image layout (Miraai Fertility) */
.about-us-images.about-us-single-image {
    padding-right: 40px;
    padding-bottom: 40px;
    margin-right: 0;
    background-position: left 40px bottom 0px;
}
.about-us-images.about-us-single-image .about-img-1 img {
    width: 90%;
    height: auto;
    /* aspect-ratio: 5 / 6; */
    object-fit: cover;
    border-radius: 20px;
    /* box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); */
}
.about-us-images.about-us-single-image .experience-counter-br {
    position: absolute;
    bottom: 0;
    right: 0;
    top: auto;
    left: auto;
    transform: translate(10px, 10px);
    z-index: 10;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.about-us-images.about-us-single-image .feedback-counter {
    right: 40px;
}

/* Clinic Experience Section Styling */
.clinic-experience {
    padding: 40px 0;
    background-color: var(--secondery-color);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.clinic-experience h2 {
    font-size: 38px;
    color: var(--main-color);
    font-weight: 700;
    margin-bottom: 25px;

    letter-spacing: -0.02em;
    position: relative;
    display: inline-block;
}

.clinic-experience p {
    font-size: 18px;
    color: var(--text-color);
    max-width: 820px;
    margin: 0 auto 20px;
    line-height: 1.8;
}

.clinic-experience p:last-child {
    margin-bottom: 0;
}

/* ----------------------------------------------------------------------------------------
   27. Miraai Care Slider css
---------------------------------------------------------------------------------------- */
.miraai-care {
    width: 100%;
    padding: 50px 0;
    background-color: var(--secondery-color);
    position: relative;
    overflow: hidden;
}

.miraai-care .container-fluid {
    padding-left: 30px;
    padding-right: 30px;
}

.miraai-care-slider-container {
    position: relative;
    width: 100%;
    padding: 0 15px;
}

.miraai-care-slider {
    padding: 15px 0 60px 0;
    overflow: hidden;
}

.miraai-care-card {
    background: var(--white-color);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(31, 78, 95, 0.05);
    overflow: hidden;
    height: 100%;
    transition:
        transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
        box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(31, 78, 95, 0.03);
}

.miraai-care-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(11, 99, 229, 0.1);
    border-color: rgba(11, 99, 229, 0.1);
}

.miraai-care-card-content {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 100%;
    min-height: 280px;
}

.miraai-care-card-text {
    flex: 1.2;
    padding: 35px 25px 35px 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.miraai-care-card-heading {
    font-size: 25px;
    font-weight: 700;
    color: var(--main-color);
    margin-bottom: 12px;
    line-height: 1.2em;
    transition: color 0.3s ease;
}

.miraai-care-card:hover .miraai-care-card-heading {
    color: var(--main-color);
}

.miraai-care-card-desc {
    font-size: 18px;
    color: #161616;
    line-height: 1.6em;
    margin-bottom: 0;
}

.miraai-care-card-image {
    /* flex: 0.8; */
    flex: 1;
    position: relative;
    overflow: hidden;
}

.miraai-care-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.miraai-care-card:hover .miraai-care-card-image img {
    transform: scale(1.06);
}

/* Swiper Controls & Navigation */
.miraai-care-prev,
.miraai-care-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: var(--white-color);
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(31, 78, 95, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-color);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    margin-top: -30px;
}

.miraai-care-prev {
    left: -15px;
}

.miraai-care-next {
    right: -15px;
}

.miraai-care-prev:hover,
.miraai-care-next:hover {
    background: var(--main-color);
    color: var(--white-color);
    box-shadow: 0 8px 20px rgba(11, 99, 229, 0.3);
}

.miraai-care-pagination {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 10;
}

.miraai-care-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #c3d1d6;
    opacity: 1;
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
}

.miraai-care-pagination .swiper-pagination-bullet-active {
    background: var(--main-color);
    width: 24px;
    border-radius: 4px;
}

/* Responsive Media Queries */
@media (max-width: 1199px) {
    .miraai-care-card-text {
        padding: 30px 20px 30px 25px;
    }
    .miraai-care-card-heading {
        font-size: 23px;
    }
}

@media (max-width: 991px) {
    .miraai-care {
        padding: 50px 0;
    }
    .miraai-care .container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }
    .miraai-care-slider-container {
        padding: 0;
    }
    .miraai-care-prev,
    .miraai-care-next {
        display: none;
    }
    .miraai-care-slider {
        padding: 15px 0 50px 0;
    }
}

@media (max-width: 767px) {
    .miraai-care-card-content {
        flex-direction: column-reverse;
        min-height: auto;
    }
    .miraai-care-card-text {
        padding: 30px 20px;
        flex: none;
    }
    .miraai-care-card-image {
        /* height: 220px; */
        flex: none;
    }
}

@media (max-width: 575px) {
    .miraai-care {
        padding: 40px 0;
    }
    .miraai-care .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }
    .miraai-care-card-image {
        /* height: 180px; */
    }
}

/*----------------------------------------------------------------------------------------
27. Instagram Videos Section
----------------------------------------------------------------------------------------*/
.insta-videos {
    padding: 50px 0 10px;
    background-color: var(--secondery-color) !important;
    position: relative;
}

.insta-videos-slider-container {
    position: relative;
    padding: 0 45px;
}

.insta-videos-slider {
    padding: 10px 0 50px 0;
    /* overflow: visible !important; */
}

.insta-videos-slide {
    display: flex;
    justify-content: center;
}

.insta-videos-card {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    background-color: var(--white-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--divider-color);
    transition:
        transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
        box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.insta-videos-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(31, 78, 95, 0.15);
    border-color: var(--accent-color);
}

.insta-videos-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    border-radius: 16px;
}

/* Custom Navigation Controls */
.insta-videos-navigation {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    width: 100%;
    z-index: 10;
    pointer-events: none;
    margin-top: -25px;
}

.insta-videos-prev,
.insta-videos-next {
    width: 46px;
    height: 46px;
    background-color: var(--white-color);
    color: var(--main-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: auto;
    font-size: 14px;
    border: 1px solid var(--divider-color);
}

.insta-videos-prev:hover,
.insta-videos-next:hover {
    background-color: var(--main-color);
    color: var(--white-color);
    border-color: var(--main-color);
}

.insta-videos-prev {
    margin-left: -15px;
}

.insta-videos-next {
    margin-right: -15px;
}

/* Custom Pagination Dots */
.insta-videos-pagination {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
}

.insta-videos-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: var(--main-color);
    opacity: 0.25;
    margin: 0 6px;
    border-radius: 50%;
    display: inline-block;
    transition: all 0.3s ease;
    cursor: pointer;
}

.insta-videos-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    width: 26px;
    border-radius: 6px;
    background: var(--main-color);
}

/* Responsiveness */
@media (max-width: 1199px) {
    .insta-videos {
        padding: 50px 0;
    }
    .insta-videos-slider-container {
        padding: 0 30px;
    }
}

@media (max-width: 991px) {
    .insta-videos-slider-container {
        padding: 0;
    }
    .insta-videos-prev,
    .insta-videos-next {
        display: none;
    }
    .insta-videos-slider {
        padding: 10px 0 40px 0;
    }
}

@media (max-width: 767px) {
    .insta-videos {
        padding: 40px 0;
    }
}

/*----------------------------------------------------------------------------------------
28. Back To Top Button
----------------------------------------------------------------------------------------*/
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    background-color: var(--main-color);
    color: var(--white-color) !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 2px solid var(--accent-color);
}

.back-to-top:hover {
    background-color: var(--accent-color);
    color: var(--main-color) !important;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(31, 78, 95, 0.25);
    border-color: var(--main-color);
}

.back-to-top.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/*----------------------------------------------------------------------------------------
29. Header Icon Buttons
----------------------------------------------------------------------------------------*/
.header-btn {
    gap: 12px;
}

.header-icon-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 18px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.header-btn-call {
    background-color: transparent;
    border: 2px solid var(--main-color);
    color: var(--main-color) !important;
}

.header-btn-call:hover {
    background-color: var(--main-color);
    color: var(--white-color) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(31, 78, 95, 0.2);
}

.header-btn-book {
    background-color: var(--main-color);
    border: 2px solid var(--main-color);
    color: var(--white-color) !important;
}

.header-btn-book:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(31, 78, 95, 0.3);
}

/* Sticky header (light bg) – base button styles remain; no overrides needed */

/*----------------------------------------------------------------------------------------
30. CTA Section Custom Styling
----------------------------------------------------------------------------------------*/
.cta-section {
    padding: 30px 0;
}

.cta-box {
    background: linear-gradient(135deg, #f0f8f1 0%, #edf0ed 100%);
    border-radius: 24px;
    padding: 60px 70px 0 70px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(31, 78, 95, 0.05);
}

.cta-content {
    padding-bottom: 10px;
}
.cta-content-last {
    padding-bottom: 60px;
}

.cta-content h2 {
    font-size: 38px;
    font-weight: 700;
    color: var(--main-color);
    margin-bottom: 15px;
    line-height: 1.25em;
}

.cta-content p,
.cta-content-last p {
    font-size: 18px;
    color: #0a0a0a;
    max-width: 90%;
    line-height: 1.6em;
}

.cta-btns {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.cta-btns .btn-default {
    padding: 15px 30px;
}

.cta-image {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 100%;
    margin-top: -60px;
}

.cta-image img {
    max-height: 380px;
    width: auto;
    object-fit: contain;
    vertical-align: bottom;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .cta-box {
        padding: 50px 40px 0 40px;
    }
    .cta-content-last {
        padding-bottom: 40px;
    }
    .cta-content h2 {
        font-size: 32px;
    }
    .cta-image {
        justify-content: center;
        margin-top: 0;
    }
    .cta-image img {
        max-height: 300px;
    }
}

@media (max-width: 767px) {
    .cta-box {
        padding: 40px 25px 0 25px;
    }
    .cta-content-last {
        padding-bottom: 30px;
    }
    .cta-content h2 {
        font-size: 26px;
        text-align: center;
    }
    .cta-content p {
        font-size: 16px;
        text-align: justify;
        max-width: 100%;
    }
    .cta-btns {
        justify-content: center;
        flex-direction: column;
        gap: 10px;
    }
    .cta-btns .btn-default {
        width: 100%;
        text-align: center;
    }
    .cta-image img {
        max-height: 250px;
    }
}

/*----------------------------------------------------------------------------------------
31. Parenthood Journey Banner Custom Styling
----------------------------------------------------------------------------------------*/
.parenthood-journey-section {
    /* padding: 30px 0; */
    padding: 0;
}

.journey-banner {
    background: linear-gradient(90deg, var(--third-color) 0%, #faece9 100%);
    border-radius: 16px;
    padding: 35px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    box-shadow: 0 4px 20px rgba(247, 230, 226, 0.3);
}

.journey-banner-content h2 {
    font-size: 28px;
    font-weight: 400;
    color: var(--main-color);
    margin: 0;
    line-height: 1.3em;
}

.journey-banner-content h2 strong {
    font-weight: 700;
    color: var(--main-color);
}

.journey-banner-btn .btn-default {
    background-color: var(--main-color);
    color: var(--white-color);
    padding: 15px 35px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
}

.journey-banner-btn .btn-default:hover {
    background-color: var(--accent-color) !important;
    color: var(--main-color) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(31, 78, 95, 0.15);
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .journey-banner {
        padding: 30px 40px;
    }
    .journey-banner-content h2 {
        font-size: 24px;
    }
}

@media (max-width: 767px) {
    .journey-banner {
        flex-direction: column;
        text-align: center;
        padding: 30px 25px;
        gap: 20px;
    }
    .journey-banner-content h2 {
        font-size: 20px;
    }
    .journey-banner-btn {
        width: 100%;
    }
    .journey-banner-btn .btn-default {
        width: 100%;
        text-align: center;
    }
}

/*----------------------------------------------------------------------------------------
32. Clinic Experience Custom Column Styling
----------------------------------------------------------------------------------------*/
.clinic-experience-content {
    text-align: left;
    padding-right: 30px;
}

.clinic-experience-content h2 {
    font-size: 38px;
    color: var(--main-color);
    font-weight: 700;
    margin-bottom: 25px;
    letter-spacing: -0.02em;
    line-height: 1.25em;
}

.clinic-experience-content p {
    font-size: 18px;
    color: var(--text-color);
    line-height: 1.8;
    margin: 0;
}

.clinic-experience-video {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.clinic-experience-card {
    position: relative;
    width: 100%;
    max-width: 340px;
    height: 480px;
    background-color: var(--white-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(31, 78, 95, 0.12);
    border: 1px solid var(--divider-color);
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.clinic-experience-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(31, 78, 95, 0.2);
}

.clinic-experience-iframe {
    position: absolute;
    top: -54px;
    left: -1px;
    width: calc(100% + 2px);
    height: 585px;
    border: 0;
    display: block;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .clinic-experience-content {
        text-align: center;
        padding-right: 0;
        margin-bottom: 40px;
    }
    .experience-step {
        justify-content: center;
        text-align: left;
    }
}

/* Clinic Experience Steps styling */
.experience-steps {
    margin-top: 35px !important;
}

.experience-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

.experience-step:last-child {
    margin-bottom: 0;
}

.step-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--third-color);
    color: var(--main-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    margin-right: 18px;
    transition: all 0.3s ease-in-out;
}

.experience-step:hover .step-icon {
    background-color: var(--main-color);
    color: var(--white-color);
    transform: scale(1.05);
}

.step-text h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--main-color);
    margin-bottom: 6px;
    line-height: 1.2em;
}

.step-text p {
    font-size: 16px;
    color: #1b1b1b;
    line-height: 1.5em;
    margin: 0;
}

/************************************/
/***     Doctor Profile Page      ***/
/************************************/

.dr-intro-section {
    padding: 100px 0 80px;
    background-color: var(--white-color);
    position: relative;
}

.dr-frame-container {
    display: flex;
    justify-content: center;
}

.dr-luxury-frame {
    position: relative;
    background-color: var(--accent-color);
    border-radius: 24px;
    padding: 25px 25px 0 25px;
    display: inline-flex;
    justify-content: center;
    align-items: flex-end;
    box-shadow: 0 20px 40px rgba(31, 78, 95, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.dr-profile-img {
    max-width: 320px;
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.dr-floating-badge {
    position: absolute;
    padding: 12px 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(31, 78, 95, 0.15);
}

.badge-exp {
    bottom: 30px;
    left: -25px;
    background-color: var(--main-color);
    color: var(--white-color);
}

.badge-exp .num {
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}

.badge-exp .lbl {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

.badge-role {
    top: 30px;
    right: -25px;
    background-color: var(--white-color);
    color: var(--main-color);
    border: 1px solid rgba(31, 78, 95, 0.1);
}

.badge-role .role {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dr-intro-content {
    padding-left: 20px;
}

.dr-lead-text {
    font-size: 18px;
    line-height: 1.7em;
    color: #333333;
    margin-bottom: 30px;
}

.dr-key-credentials {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.credential-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.credential-item .icon-wrap {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #edf3ef;
    color: var(--main-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.credential-item:hover .icon-wrap {
    background-color: var(--main-color);
    color: var(--white-color);
}

.credential-item .text-wrap h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--main-color);
    margin-bottom: 4px;
}

.credential-item .text-wrap p {
    font-size: 15px;
    color: #555555;
    margin: 0;
}

.dr-grid-section {
    padding: 60px 0;
    background-color: #f7faf8;
}

.dr-grid-card {
    background-color: var(--white-color);
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(31, 78, 95, 0.04);
    border: 1px solid rgba(31, 78, 95, 0.05);
    height: 100%;
    transition: all 0.3s ease;
}

.dr-grid-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(31, 78, 95, 0.08);
}

.dr-grid-card .card-icon {
    font-size: 32px;
    color: var(--main-color);
    margin-bottom: 20px;
}

.dr-grid-card h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--main-color);
    margin-bottom: 20px;
}

.card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card-list li {
    position: relative;
    padding-left: 20px;
    font-size: 15px;
    color: #444444;
    line-height: 1.5;
}

.card-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--main-color);
}

.interests-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.interests-tags .tag {
    background-color: #edf3ef;
    color: var(--main-color);
    font-weight: 600;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 20px;
    transition: all 0.2s;
}

.interests-tags .tag:hover {
    background-color: var(--main-color);
    color: var(--white-color);
}

.card-desc {
    font-size: 15px;
    color: #555555;
    margin-bottom: 15px;
}

.lang-badges {
    display: flex;
    gap: 8px;
}

.lang-badges .lang {
    background-color: #ffffff;
    border: 1.5px solid var(--accent-color);
    color: var(--main-color);
    font-weight: 600;
    font-size: 14px;
    padding: 6px 16px;
    border-radius: 8px;
}

.dr-journey-section {
    padding: 60px 0;
    background-color: var(--white-color);
}

.journey-timeline-layout {
    position: relative;
    padding-left: 30px;
    margin-top: 40px;
}

.journey-timeline-layout::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background-color: var(--accent-color);
}

.timeline-step-block {
    position: relative;
    margin-bottom: 30px;
}

.timeline-step-block:last-child {
    margin-bottom: 0;
}

.step-marker {
    position: absolute;
    left: -30px;
    top: 12px;
}

.step-dot {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--white-color);
    border: 4px solid var(--main-color);
    box-shadow: 0 0 0 3px var(--accent-color);
}

.step-details-card {
    background-color: #ffffff;
    border: 1px solid rgba(31, 78, 95, 0.08);
    border-radius: 16px;
    padding: 25px 30px;
    box-shadow: 0 6px 20px rgba(31, 78, 95, 0.03);
    transition: all 0.3s ease;
}

.step-details-card:hover {
    transform: translateX(5px);
    border-color: var(--main-color);
    box-shadow: 0 8px 24px rgba(31, 78, 95, 0.06);
}

.step-role {
    font-size: 12px;
    font-weight: 700;
    color: var(--main-color);
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 6px;
}

.step-details-card h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--main-color);
    margin-bottom: 8px;
}

.step-details-card p {
    font-size: 15px;
    color: #555555;
    margin: 0;
    line-height: 1.5;
}

.dr-split-section {
    padding: 80px 0;
}

.dr-split-section.bg-light {
    background-color: #f7faf8 !important;
}

.dr-info-panel {
    background-color: var(--white-color);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(31, 78, 95, 0.06);
    box-shadow: 0 10px 30px rgba(31, 78, 95, 0.03);
    height: 100%;
    transition: all 0.3s ease;
}

.dr-info-panel:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(31, 78, 95, 0.06);
}

.panel-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(31, 78, 95, 0.08);
    padding-bottom: 15px;
}

.panel-icon {
    font-size: 24px;
    color: var(--main-color);
}

.panel-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--main-color);
    margin: 0;
}

.panel-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.panel-list li {
    position: relative;
    padding-left: 24px;
    font-size: 16px;
    color: #444444;
    line-height: 1.6;
}

.panel-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--accent-color);
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .dr-intro-content {
        padding-left: 0;
        margin-top: 30px;
    }
    .badge-exp {
        left: -10px;
    }
    .badge-role {
        right: -10px;
    }
    .dr-intro-section {
        padding: 60px 0 40px;
    }
    .dr-journey-section,
    .dr-split-section {
        padding: 50px 0;
    }
    .dr-info-panel {
        padding: 30px;
    }
}

/* Breadcrumb styling */
.dr-breadcrumb {
    display: flex;
    align-items: center;
    padding: 15px 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--main-color);
    width: 100%;
}

.dr-breadcrumb a {
    color: var(--main-color);
    opacity: 0.65;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    position: relative;
}

.dr-breadcrumb a i {
    font-size: 11px;
    margin-right: 6px;
    transition: transform 0.3s ease;
}

.dr-breadcrumb a:hover {
    opacity: 1;
    color: var(--primary-color);
}

.dr-breadcrumb a:hover i {
    transform: scale(1.1);
}

.dr-breadcrumb .separator {
    margin: 0 10px;
    color: var(--accent-color);
    opacity: 0.8;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
}

.dr-breadcrumb .current {
    color: var(--main-color);
    font-weight: 700;
    position: relative;
    padding: 4px 10px;
    background-color: rgba(31, 78, 95, 0.05);
    border-radius: 4px;
}

/* Elegant extending line next to the breadcrumbs */
/* .dr-breadcrumb::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(31, 78, 95, 0.15) 0%,
        rgba(31, 78, 95, 0) 100%
    );
    margin-left: 20px;
} */

/* ----------------------------------------------------------------------------------------
* Fertility Concerns Section
* ---------------------------------------------------------------------------------------- */
.fertility-concerns-section {
    padding: 50px 0;
    background-color: var(--white-color);
}

.fertility-concerns-slider-container {
    position: relative;
    margin-top: 40px;
    /* padding-bottom: 50px;  */
}

.fertility-concern-card {
    display: block;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4/5;
    background-color: var(--secondery-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease-in-out;
}

.fertility-concern-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(31, 78, 95, 0.15);
}

.concern-card-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.concern-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease-in-out;
}

.fertility-concern-card:hover .concern-card-image img {
    transform: scale(1.08);
}

.concern-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to top,
        rgba(31, 78, 95, 0.95) 0%,
        rgba(31, 78, 95, 0.6) 40%,
        rgba(31, 78, 95, 0.1) 75%,
        rgba(31, 78, 95, 0) 100%
    );
    transition: background 0.4s ease;
    z-index: 1;
}

.fertility-concern-card:hover .concern-card-overlay {
    background: linear-gradient(
        to top,
        rgba(31, 78, 95, 1) 0%,
        rgba(31, 78, 95, 0.7) 45%,
        rgba(31, 78, 95, 0.2) 80%,
        rgba(31, 78, 95, 0) 100%
    );
}

.concern-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 24px;
    z-index: 2;
    text-align: center;
}

.concern-card-content h3 {
    color: var(--white-color);
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    transition: transform 0.4s ease;
}

/* Swiper navigation and pagination customization */
.fertility-concerns-pagination {
    position: absolute;
    bottom: 0;
    left: 50% !important;
    transform: translateX(-50%);
    width: auto !important;
    z-index: 10;
}

.fertility-concerns-pagination .swiper-pagination-bullet {
    background: var(--main-color);
    opacity: 0.2;
    width: 10px;
    height: 10px;
    margin: 0 6px !important;
    transition: all 0.3s ease;
}

.fertility-concerns-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--main-color);
    width: 25px;
    border-radius: 5px;
}

.fertility-concerns-navigation {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
}

.fertility-concerns-prev,
.fertility-concerns-next {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--secondery-color);
    color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.fertility-concerns-prev:hover,
.fertility-concerns-next:hover {
    background-color: var(--main-color);
    color: var(--white-color);
}

/* ----------------------------------------------------------------------------------------
* Connect & Visit Section
* ---------------------------------------------------------------------------------------- */
.connect-visit-section {
    padding: 80px 0;
    background-color: var(--secondery-color);
}

.connect-card {
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 24px;
    padding: 40px;
    height: 100%;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.connect-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(31, 78, 95, 0.08);
    border-color: var(--accent-color);
}

.connect-card-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 20px;
}

.connect-card-header .icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background-color: var(--third-color);
    color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.3s ease;
}

.connect-card:hover .connect-card-header .icon-wrapper {
    background-color: var(--main-color);
    color: var(--white-color);
}

.connect-card-header .header-text h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 4px;
}

.connect-card-header .header-text p {
    font-size: 14px;
    color: var(--main-color);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.clinic-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.detail-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.detail-item > i {
    font-size: 18px;
    color: var(--main-color);
    margin-top: 4px;
    width: 20px;
    text-align: center;
}

.detail-item h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 4px;
}

.detail-item p {
    font-size: 15px;
    color: #555555;
    margin: 0;
    line-height: 1.5;
}

.connect-card-action {
    margin-top: auto;
}

.connect-card-action .btn-default i {
    font-size: 16px;
}

.community-pitch {
    font-size: 16px;
    color: #555555;
    margin-bottom: 25px;
    line-height: 1.6;
}

.social-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.social-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-radius: 16px;
    background-color: var(--secondery-color);
    border: 1px solid transparent;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    color: inherit;
    text-decoration: none !important;
}

.social-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 15px;
    transition:
        transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
        box-shadow 0.35s ease;
    color: #fff;
    flex-shrink: 0;
}

.social-info {
    flex-grow: 1;
}

.social-info h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 2px;
    transition: color 0.3s ease;
}

.social-info p {
    font-size: 13px;
    color: #777777;
    margin: 0;
}

.social-arrow {
    font-size: 14px;
    color: #aaaaaa;
    transition:
        transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
        color 0.3s ease;
    transform: translateX(0) translateY(0);
    flex-shrink: 0;
}

/* ─── Instagram — gradient by default ─── */
.social-item.instagram {
    border-color: rgba(225, 48, 108, 0.18);
}
.social-item.instagram .social-icon {
    background: linear-gradient(
        45deg,
        #f09433 0%,
        #e6683c 25%,
        #dc2743 50%,
        #cc2366 75%,
        #bc1888 100%
    );
    box-shadow: 0 4px 14px rgba(220, 39, 67, 0.25);
}
.social-item.instagram .social-info h4 {
    color: #d6246e;
}

/* ─── YouTube — red by default ─── */
.social-item.youtube {
    border-color: rgba(255, 0, 0, 0.15);
}
.social-item.youtube .social-icon {
    background-color: #ff0000;
    box-shadow: 0 4px 14px rgba(255, 0, 0, 0.22);
}
.social-item.youtube .social-info h4 {
    color: #cc0000;
}

/* ─── Facebook — blue by default ─── */
.social-item.facebook {
    border-color: rgba(24, 119, 242, 0.18);
}
.social-item.facebook .social-icon {
    background-color: #1877f2;
    box-shadow: 0 4px 14px rgba(24, 119, 242, 0.25);
}
.social-item.facebook .social-info h4 {
    color: #1462c8;
}

/* ─── LinkedIn — blue by default ─── */
.social-item.linkedin {
    border-color: rgba(0, 119, 181, 0.18);
}
.social-item.linkedin .social-icon {
    background-color: #0077b5;
    box-shadow: 0 4px 14px rgba(0, 119, 181, 0.25);
}
.social-item.linkedin .social-info h4 {
    color: #005f93;
}

/* ─── Hover: smooth lift + deeper brand glow ─── */
.social-item:hover {
    transform: translateY(-4px);
    background-color: var(--white-color);
}

.social-item:hover .social-icon {
    transform: scale(1.1);
}

.social-item:hover .social-arrow {
    transform: translateX(4px) translateY(-4px);
}

/* Instagram hover */
.social-item.instagram:hover {
    box-shadow: 0 6px 6px rgba(220, 39, 67, 0.18);
    border-color: rgba(225, 48, 108, 0.38);
}
.social-item.instagram:hover .social-icon {
    box-shadow: 0 6px 6px rgba(220, 39, 67, 0.42);
}
.social-item.instagram:hover .social-arrow {
    color: #d6246e;
}

/* YouTube hover */
.social-item.youtube:hover {
    box-shadow: 0 6px 6px rgba(255, 0, 0, 0.15);
    border-color: rgba(255, 0, 0, 0.34);
}
.social-item.youtube:hover .social-icon {
    box-shadow: 0 6px 6px rgba(255, 0, 0, 0.38);
}
.social-item.youtube:hover .social-arrow {
    color: #cc0000;
}

/* Facebook hover */
.social-item.facebook:hover {
    box-shadow: 0 6px 6px rgba(24, 119, 242, 0.16);
    border-color: rgba(24, 119, 242, 0.36);
}
.social-item.facebook:hover .social-icon {
    box-shadow: 0 6px 6px rgba(24, 119, 242, 0.4);
}
.social-item.facebook:hover .social-arrow {
    color: #1462c8;
}

/* LinkedIn hover */
.social-item.linkedin:hover {
    box-shadow: 0 6px 6px rgba(0, 119, 181, 0.16);
    border-color: rgba(0, 119, 181, 0.36);
}
.social-item.linkedin:hover .social-icon {
    box-shadow: 0 6px 6px rgba(0, 119, 181, 0.4);
}
.social-item.linkedin:hover .social-arrow {
    color: #005f93;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .connect-card {
        padding: 30px 24px;
    }
    .connect-visit-section {
        padding: 60px 0;
    }
}

/* ----------------------------------------------------------------------------------------
* Fertility Community Section
* ---------------------------------------------------------------------------------------- */
.fertility-community-section {
    padding: 100px 0;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(183, 205, 186, 0.08) 0%,
        rgba(255, 255, 255, 1) 80%
    );
    position: relative;
    overflow: hidden;
}

/* Swiper Slider Wrapper */
.community-slider-container {
    position: relative;
    padding: 10px 5px;
}

/* Community Card Style (Based on Reference Image) */
.community-card {
    background: #e1ebe3;
    border-radius: 24px;
    border: 1px solid rgba(183, 205, 186, 0.18);
    padding: 40px 25px;
    text-align: center;
    box-shadow: 0 8px 30px rgba(31, 78, 95, 0.02);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Card Circle Outer Icon Wrapper */
.community-card .card-circle-icon {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 2px solid var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px auto;
    background: #fff;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Centered Icon styling */
.community-card .icon-wrap {
    font-size: 50px;
    color: var(--main-color);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Card Typography */
.community-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
    line-height: 1.35;
    transition: color 0.3s ease;
}

/* Hover Interactive Animations */
.community-card:hover {
    transform: translateY(-8px);
    border-color: rgba(183, 205, 186, 0.45);
    box-shadow:
        0 16px 40px rgba(183, 205, 186, 0.22),
        0 5px 15px rgba(31, 78, 95, 0.04);
}

.community-card:hover .card-circle-icon {
    border-color: #cbdad0;
    transform: scale(1.03);
}

.community-card:hover .icon-wrap {
    color: #173b48;
    transform: scale(1.04) rotate(3deg);
}

.community-card:hover h3 {
    color: var(--main-color);
}

/* Swiper Slider Controls (Navigation Arrows + Pagination Inline) */
.community-slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.community-slider-prev,
.community-slider-next {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--secondery-color);
    color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    border: 1px solid rgba(31, 78, 95, 0.06);
    box-shadow: 0 4px 12px rgba(31, 78, 95, 0.04);
    z-index: 10;
}

.community-slider-prev:hover,
.community-slider-next:hover {
    background-color: var(--main-color);
    color: var(--white-color);
    border-color: var(--main-color);
}

/* Pagination Dots styling */
.community-slider-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto !important;
}

.community-slider-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: rgba(31, 78, 95, 0.2);
    border-radius: 50%;
    opacity: 1;
    transition: all 0.3s ease;
    cursor: pointer;
}

.community-slider-pagination .swiper-pagination-bullet-active {
    width: 20px;
    background-color: var(--main-color);
    border-radius: 6px;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .fertility-community-section {
        padding: 70px 0;
    }
    .community-card {
        padding: 35px 17px;
    }
    .community-card .card-circle-icon {
        width: 120px;
        height: 120px;
        border-width: 10px;
        margin-bottom: 24px;
    }
    .community-card .icon-wrap {
        font-size: 32px;
    }
}

@media (max-width: 575px) {
    .fertility-community-section {
        padding: 60px 0;
    }
    .community-card {
        padding: 35px 15px;
    }
}

/* ----------------------------------------------------------------------------------------
* Media & Press Section — Gallery Style
* ---------------------------------------------------------------------------------------- */
.media-press-section {
    padding: 60px 0;
    /* background-color: var(--secondery-color); */
}

/* Gallery Row */
.media-gallery-row {
    gap: 0;
    row-gap: 24px;
    column-gap: 0;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
}

/* Each gallery item link */
.media-gallery-item {
    display: block;
    text-decoration: none;
    padding: 0 12px;
}

/* Image wrapper with overflow hidden for zoom effect */
.media-gallery-img-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(31, 78, 95, 0.1);
    box-shadow: 0 4px 24px rgba(31, 78, 95, 0.07);
    background: #f5f7f8;
    aspect-ratio: 4 / 3;
    cursor: pointer;
    transition:
        box-shadow 0.38s cubic-bezier(0.25, 0.8, 0.25, 1),
        border-color 0.38s ease;
}

.media-gallery-img-wrap:hover {
    box-shadow: 0 12px 40px rgba(31, 78, 95, 0.16);
    border-color: var(--main-color);
}

/* Actual image */
.media-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.media-gallery-img-wrap:hover .media-gallery-img {
    transform: scale(1.07);
}

/* Dark gradient overlay */
.media-gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(31, 78, 95, 0) 0%,
        rgba(31, 78, 95, 0.65) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.38s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 20px;
}

.media-gallery-img-wrap:hover .media-gallery-overlay {
    opacity: 1;
}

/* Inner content of overlay */
.media-gallery-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateY(12px);
    transition: transform 0.38s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.media-gallery-img-wrap:hover .media-gallery-overlay-inner {
    transform: translateY(0);
}

/* Zoom icon circle */
.media-gallery-zoom {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 2px solid rgba(255, 255, 255, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    transition:
        background 0.28s ease,
        transform 0.28s ease;
}

.media-gallery-img-wrap:hover .media-gallery-zoom {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.1);
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .media-press-section {
        padding: 60px 0;
    }
    .media-gallery-item {
        padding: 0 8px;
    }
    .media-gallery-row {
        row-gap: 16px;
    }
}

@media (max-width: 575px) {
    .media-gallery-img-wrap {
        border-radius: 14px;
    }
    .media-gallery-overlay {
        border-radius: 14px;
    }
    .media-press-section {
        padding: 50px 0;
    }
    .media-gallery-zoom {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }
}

/*----------------------------------------------------------------------------------------
30. Floating Contact Buttons (WhatsApp & Call)
----------------------------------------------------------------------------------------*/
.floating-contact-wrapper {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
}

.floating-btn {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #ffffff !important;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
}

/* WhatsApp Button */
.floating-btn.whatsapp-btn {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    animation: wa-pulse 2.5s infinite;
}

.floating-btn.whatsapp-btn:hover {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.6);
    background: linear-gradient(135deg, #28e06f 0%, #107c70 100%);
}

/* Call Button */
.floating-btn.call-btn {
    background: linear-gradient(135deg, #1f4e5f 0%, #0ea5e9 100%);
    box-shadow: 0 6px 20px rgba(31, 78, 95, 0.4);
    animation: call-pulse 2.5s infinite 1.25s;
}

.floating-btn.call-btn:hover {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 10px 25px rgba(31, 78, 95, 0.6);
    background: linear-gradient(135deg, #276277 0%, #0284c7 100%);
}

/* Tooltip Styling */
.floating-btn .btn-tooltip {
    position: absolute;
    right: 64px;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    background: rgba(31, 78, 95, 0.95);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.floating-btn .btn-tooltip::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent transparent rgba(31, 78, 95, 0.95);
}

.floating-btn:hover .btn-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* Pulse Animations */
@keyframes wa-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

@keyframes call-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(31, 78, 95, 0.6);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(31, 78, 95, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(31, 78, 95, 0);
    }
}

/* Adjust Back-to-Top Button position so it sits cleanly above floating buttons */
.back-to-top {
    bottom: 160px !important;
}

/* Responsive Adjustments */
@media (max-width: 575px) {
    .floating-contact-wrapper {
        bottom: 20px;
        right: 20px;
        gap: 10px;
    }
    .floating-btn {
        width: 46px;
        height: 46px;
        font-size: 20px;
    }
    .floating-btn .btn-tooltip {
        display: none;
    }
    .back-to-top {
        bottom: 135px !important;
        right: 20px !important;
        width: 44px !important;
        height: 44px !important;
    }
}

/*----------------------------------------------------------------------------------------
31. Multi-Step Appointment Scheduler UI (Sleek Minimal Edition)
----------------------------------------------------------------------------------------*/

/* Scheduler Container & Base Cards */
.appointment-section {
    background-color: var(--secondery-color);
    min-height: 80vh;
}

.appointment-card-container {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 16px 45px rgba(31, 78, 95, 0.06);
    border: 1px solid rgba(183, 205, 186, 0.35);
    padding: 42px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.scheduler-step {
    display: none;
    opacity: 0;
    transform: translateY(15px);
    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}

.scheduler-step.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.step-header h2 {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.step-header p {
    color: #000000;
    font-size: 15px;
}

.subtitle-sm {
    font-size: 14px;
    color: #161616;
}

/* Ultra-Sleek Sticky Progress Bar */
.appointment-progress-wrapper {
    position: sticky;
    top: 100px;
    /* z-index: 9999; */
    z-index: 1000;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 50px;
    padding: 12px 32px;
    box-shadow: 0 8px 25px rgba(31, 78, 95, 0.1);
    border: 1px solid rgba(183, 205, 186, 0.6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.appointment-progress-wrapper .progress-track {
    position: absolute;
    top: 50%;
    left: 70px;
    right: 70px;
    height: 3px;
    background: #e5ebe7;
    z-index: 1;
    transform: translateY(-50%);
    border-radius: 3px;
}

.appointment-progress-wrapper .progress-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(
        90deg,
        var(--main-color) 0%,
        var(--accent-color) 100%
    );
    border-radius: 3px;
    transition: width 0.4s ease;
}

.step-indicator {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 12px 4px 4px;
    border-radius: 20px;
}

.step-indicator .step-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f0f4f1;
    border: 1px solid #d5e0d7;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    transition: all 0.3s ease;
}

.step-indicator .check-icon {
    display: none;
}

.step-indicator .step-label {
    font-size: 13px;
    font-weight: 600;
    color: #161616;
    transition: color 0.3s ease;
}

.step-indicator.active .step-icon {
    border-color: var(--main-color);
    background: var(--main-color);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(31, 78, 95, 0.25);
}

.step-indicator.active .step-label {
    color: var(--main-color);
    font-weight: 700;
}

.step-indicator.completed .step-icon {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--main-color);
}

.step-indicator.completed .step-num {
    display: none;
}

.step-indicator.completed .check-icon {
    display: inline-block;
    font-size: 12px;
}

.step-indicator.completed .step-label {
    color: var(--primary-color);
}

/* Step 1: Treatment Pill Cards */
.treatment-pill-card {
    background: #ffffff;
    border: 1.5px solid var(--divider-color);
    border-radius: 18px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
}

.treatment-pill-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(31, 78, 95, 0.06);
}

.treatment-pill-card .pill-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--third-color);
    color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.treatment-pill-card .pill-info h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 2px;
    line-height: 1.3;
}

.treatment-pill-card .pill-info p {
    font-size: 13px;
    color: #1d1d1d;
    margin: 0;
    line-height: 1.3;
}

.treatment-pill-card .pill-check {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 18px;
    color: var(--main-color);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.treatment-pill-card.selected {
    background: var(--accent-color);
    border-color: var(--main-color);
    box-shadow: 0 8px 22px rgba(183, 205, 186, 0.45);
}

.treatment-pill-card.selected .pill-icon {
    background: var(--main-color);
    color: #ffffff;
}

.treatment-pill-card.selected .pill-info h3 {
    color: var(--main-color);
}

.treatment-pill-card.selected .pill-info p {
    color: #000000;
}

.treatment-pill-card.selected .pill-check {
    opacity: 1;
    transform: scale(1);
    color: var(--main-color);
}

/* Step Buttons */
.btn-step-action {
    padding: 12px 28px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-step-action.btn-next,
.btn-step-action.btn-pay {
    background: var(--main-color);
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(31, 78, 95, 0.25);
}

.btn-step-action.btn-next:hover:not(:disabled),
.btn-step-action.btn-pay:hover:not(:disabled) {
    background: #143542;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(31, 78, 95, 0.35);
}

.btn-step-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-step-action.btn-prev {
    background: #eef2f0;
    color: var(--primary-color);
}

.btn-step-action.btn-prev:hover {
    background: #dde5e1;
}

/* Step 2: Split Layout & Calendar */
.summary-preview-card {
    background: var(--secondery-color);
    border-radius: 18px;
    border: 1px solid var(--divider-color);
}

.dr-avatar-thumb {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent-color);
}

.badge-role {
    font-size: 12px;
    background: var(--third-color);
    color: var(--main-color);
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
}

.selected-treatment-box {
    background: #ffffff;
    border-radius: 14px;
    border: 1px dashed var(--accent-color);
}

.selected-pill-badge {
    font-weight: 700;
    color: var(--main-color);
    font-size: 14px;
}

.quote-reassurance {
    font-style: italic;
    font-size: 13px;
    color: #111111;
    border-left: 3px solid var(--main-color) !important;
    padding-left: 12px;
}

/* Calendar Component */
.calendar-slot-wrapper {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid var(--divider-color);
}

@media (min-width: 768px) {
    .border-end-md {
        border-right: 1px solid var(--divider-color);
    }
}
.bg-secondary-color {
    background-color: var(--secondery-color);
}
.month-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--divider-color);
    background: #ffffff;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
}

.month-nav-btn:hover {
    background: var(--main-color);
    color: #ffffff;
    border-color: var(--main-color);
}

.grid-7 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    text-align: center;
}

.calendar-weekdays span {
    font-size: 11px;
    font-weight: 700;
    color: #161616;
    text-transform: uppercase;
    padding: 4px 0;
}

.cal-day-cell {
    height: 34px;
    width: 34px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.cal-day-cell:hover:not(.disabled):not(.empty) {
    background: var(--third-color);
    color: var(--main-color);
}

.cal-day-cell.selected {
    background: var(--main-color) !important;
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(31, 78, 95, 0.3);
}

.cal-day-cell.disabled {
    color: #cccccc;
    cursor: not-allowed;
    opacity: 0.5;
}

.cal-day-cell.empty {
    cursor: default;
}

/* Time Slot Buttons */
.slot-group-title {
    font-size: 12px;
    font-weight: 700;
    color: #000000;
}

.time-slot-btn {
    padding: 5px 12px;
    border-radius: 16px;
    border: 1px solid var(--divider-color);
    background: var(--secondery-color);
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.25s ease;
}

.gap-15 {
    gap: 6px;
}

.time-slot-btn:hover {
    border-color: var(--accent-color);
    background: var(--third-color);
}

.time-slot-btn.selected {
    background: var(--accent-color);
    border-color: var(--main-color);
    color: var(--main-color);
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(183, 205, 186, 0.4);
}

/* Step 3: Sleek Minimal Inputs Styling */
.input-field-wrap {
    margin-bottom: 2px;
}

.field-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 6px;
    display: block;
}

.field-input-box {
    position: relative;
    display: flex;
    align-items: center;
    background: #fbfdfb;
    border: 1.5px solid #dbe6dd;
    border-radius: 14px;
    padding: 0 14px;
    transition: all 0.25s ease;
}

.field-input-box:focus-within {
    border-color: var(--main-color);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(31, 78, 95, 0.08);
}

.field-icon {
    color: var(--main-color);
    font-size: 15px;
    margin-right: 10px;
    opacity: 0.75;
}

.phone-prefix {
    font-size: 14px;
    font-weight: 700;
    color: var(--main-color);
    margin-right: 6px;
}

.field-input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    width: 100%;
    padding: 12px 0;
    font-size: 14px;
    color: var(--primary-color);
}

.field-textarea {
    resize: vertical;
    min-height: 70px;
}

.soft-green-info-card {
    background: rgba(183, 205, 186, 0.2);
    border: 1px solid var(--accent-color);
    border-radius: 16px;
}

.info-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--main-color);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.info-card-content h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--main-color);
}

/* Step 4: Minimal Review Card Styling */
.minimal-review-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1.5px solid var(--divider-color);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03);
}

.rev-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--third-color);
    color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.rev-lbl {
    font-size: 12px;
    font-weight: 600;
    color: #888888;
    display: block;
}

.rev-val {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
}

.fee-badge-price {
    font-size: 24px;
    font-weight: 800;
    color: var(--main-color);
}

/* Success Screen UI (Minimalist) */
.success-screen-wrapper {
    max-width: 620px;
    margin: 0 auto;
}

.success-icon-pulse {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.12);
    color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    margin: 0 auto;
    animation: success-pulse 2s infinite;
}

@keyframes success-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(49, 126, 77, 0.4);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.success-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--main-color);
}

.minimal-confirmation-card {
    background: linear-gradient(135deg, #ffffff 0%, #f7faf7 100%);
    border-radius: 18px;
    border: 1.5px solid var(--accent-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
}

.badge-status-confirmed {
    background: #e6f9ed;
    color: #1f4e5f;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 14px;
}

.pass-lbl {
    font-size: 14px;
    color: #181818;
    display: block;
}

.pass-val {
    font-size: 15px;
    color: var(--primary-color);
}

.btn-success-action {
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    text-decoration: none !important;
}

.btn-primary-action {
    background: var(--main-color);
    color: #ffffff !important;
}

.btn-primary-action:hover {
    background: #143542;
    transform: translateY(-2px);
}

.btn-outline-action {
    background: #ffffff;
    border: 1px solid var(--divider-color);
    color: var(--primary-color) !important;
}

.btn-outline-action:hover {
    border-color: var(--main-color);
    color: var(--main-color) !important;
    background: var(--secondery-color);
}

/* Mobile Responsiveness for Appointment Scheduler */
@media (max-width: 767px) {
    .appointment-card-container {
        padding: 24px 18px;
        border-radius: 18px;
    }

    .appointment-progress-wrapper {
        position: sticky !important;
        top: 100px !important;
        z-index: 9999 !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 8px 12px;
        border-radius: 30px;
        box-shadow: 0 4px 18px rgba(31, 78, 95, 0.12);
        border: 1px solid rgba(31, 78, 95, 0.15);
    }

    .appointment-progress-wrapper .progress-track {
        left: 20px;
        right: 20px;
    }

    .step-indicator {
        padding: 0;
        background: transparent;
    }

    .step-indicator .step-icon {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }

    .step-indicator .step-label {
        display: none;
    }

    .treatment-pill-card {
        padding: 14px;
        gap: 10px;
    }

    .treatment-pill-card .pill-icon {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .treatment-pill-card .pill-info h3 {
        font-size: 14px;
    }

    .treatment-pill-card .pill-info p {
        font-size: 12px;
    }

    .cal-day-cell {
        height: 32px;
        width: 32px;
        font-size: 12px;
    }
}

/*----------------------------------------------------------------------------------------
32. PCOS Treatment Page & Custom Educational Video Cards
----------------------------------------------------------------------------------------*/

/* Background & Utility Classes */
.bg-light-section {
    background-color: var(--secondery-color);
}

/* Hero Image Wrap */
.pcod-hero-image-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.pcod-hero-image {
    width: 100%;
    max-width: 400px;
    height: 500px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(31, 78, 95, 0.1);
    margin: 0 auto;
}

.pcod-hero-image figure,
.pcod-hero-image .image-anime,
.pcod-hero-image .reveal {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    display: block !important;
}

.pcod-hero-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

.hero-reassurance-strip .reassurance-item {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
}

/* Featured Instagram Reel Card Strict Containment */
.pcos-featured-insta-card {
    position: relative;
    z-index: 1;
    overflow: hidden;
    contain: layout style;
}

.insta-video-embed-wrap {
    position: relative !important;
    width: 100%;
    height: 490px;
    border-radius: 16px;
    overflow: hidden !important;
    isolation: isolate;
    transform: translateZ(0);
}

.insta-video-embed-wrap iframe.insta-videos-iframe {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 490px !important;
    border: none !important;
    border-radius: 16px !important;
    display: block !important;
    box-shadow: none !important;
    z-index: 1 !important;
}

/* Custom Educational Video Cards (NOT YouTube Embeds) */
.pcos-video-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--divider-color);
    box-shadow: 0 8px 25px rgba(31, 78, 95, 0.05);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
}

.pcos-video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 35px rgba(31, 78, 95, 0.12);
    border-color: var(--accent-color);
}

.video-thumbnail-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.video-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.pcos-video-card:hover .video-thumb-img {
    transform: scale(1.06);
}

.video-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(31, 78, 95, 0.65) 100%
    );
    pointer-events: none;
}

.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--main-color);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    z-index: 2;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    animation: video-play-pulse 2.2s infinite;
}

.video-play-btn i {
    margin-left: 3px;
}

.video-play-btn:hover {
    background: var(--main-color);
    color: #ffffff;
    transform: translate(-50%, -50%) scale(1.1);
}

@keyframes video-play-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }
    70% {
        box-shadow: 0 0 0 16px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.video-duration-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(25, 35, 36, 0.85);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.video-category-tag {
    font-size: 12px;
    font-weight: 700;
    color: var(--main-color);
    background: var(--third-color);
    padding: 3px 10px;
    border-radius: 10px;
}

.video-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.3;
    margin-bottom: 6px;
}

/* PCOS Factors Cards */
.pcos-factor-card {
    transition: all 0.3s ease;
}

.pcos-factor-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-color) !important;
    box-shadow: 0 10px 25px rgba(31, 78, 95, 0.08);
}

.factor-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--third-color);
    color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.pcos-factor-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 8px;
}

/* Stepper / Treatment Journey Timeline */
.pcos-stepper-wrapper {
    position: relative;
}

.pcos-step-item {
    position: relative;
}

.step-badge-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--main-color);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(31, 78, 95, 0.25);
    z-index: 2;
}

.step-content-card {
    transition: all 0.3s ease;
    border-left: 4px solid var(--main-color) !important;
}

.step-content-card:hover {
    border-color: var(--accent-color) !important;
    box-shadow: 0 8px 25px rgba(31, 78, 95, 0.06);
}

.step-content-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 6px;
}

/* Feature Care Cards */
.feature-care-card {
    transition: all 0.3s ease;
}

.feature-care-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-color) !important;
    box-shadow: 0 10px 25px rgba(31, 78, 95, 0.08);
}

.care-icon-circle {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--third-color);
    color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: all 0.3s ease;
}

.feature-care-card:hover .care-icon-circle {
    background: var(--main-color);
    color: #ffffff;
}

.feature-care-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 8px;
}

/* PCOS Accordion Styling */
.pcos-accordion .accordion-item {
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.pcos-accordion .accordion-button {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
    padding: 18px 20px;
    background: #ffffff;
    box-shadow: none;
}

.pcos-accordion .accordion-button:not(.collapsed) {
    background: var(--secondery-color);
    color: var(--main-color);
}

.pcos-accordion .accordion-button:focus {
    box-shadow: none;
}

/* Video Modal */
.pcos-video-modal .modal-content {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

/*----------------------------------------------------------------------------------------
33. Global UI Elegance & Polished Section Enhancements
----------------------------------------------------------------------------------------*/

/* Breadcrumb Styling */
.dr-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--secondery-color);
    padding: 8px 18px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    border: 1px solid var(--divider-color);
}

.dr-breadcrumb a {
    color: var(--main-color);
    transition: color 0.2s ease;
}

.dr-breadcrumb a:hover {
    color: var(--primary-color);
}

.dr-breadcrumb .separator {
    color: #a0b2a4;
    font-size: 10px;
}

.dr-breadcrumb .current {
    color: var(--primary-color);
}

/* Takeaway List Cards on Treatment Pages */
.pcos-video-takeaways-list .d-flex {
    background: #ffffff;
    padding: 16px 20px;
    border-radius: 16px;
    border: 1px solid var(--divider-color);
    box-shadow: 0 4px 18px rgba(31, 78, 95, 0.04);
    transition: all 0.3s ease;
}

.pcos-video-takeaways-list .d-flex:hover {
    transform: translateY(-3px);
    border-color: var(--accent-color);
    box-shadow: 0 8px 24px rgba(31, 78, 95, 0.09);
}

.takeaway-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #eef7f1;
    color: var(--main-color) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Can Conceive Info Cards */
.info-badge-card {
    background: #ffffff;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 16px rgba(31, 78, 95, 0.04);
    height: 100%;
}

.info-badge-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-color) !important;
    box-shadow: 0 10px 25px rgba(31, 78, 95, 0.09);
}

.info-badge-card .badge-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--third-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.info-badge-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 4px;
}

/* Treatment Journey Stepper Vertical Line */
.pcos-stepper-wrapper {
    position: relative;
}

.pcos-stepper-wrapper::before {
    content: "";
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 21px;
    width: 3px;
    background: linear-gradient(
        180deg,
        var(--main-color) 0%,
        var(--accent-color) 100%
    );
    border-radius: 2px;
    z-index: 1;
}

.step-badge-num {
    background: linear-gradient(
        135deg,
        var(--main-color) 0%,
        var(--primary-color) 100%
    );
}

.step-content-card {
    box-shadow: 0 4px 16px rgba(31, 78, 95, 0.04);
}

/* Accent top hover indicator on factor cards */
.pcos-factor-card {
    border-top: 3px solid transparent !important;
}

.pcos-factor-card:hover {
    border-top-color: var(--main-color) !important;
}

.feature-care-card {
    border-top: 3px solid transparent !important;
}

.feature-care-card:hover {
    border-top-color: var(--main-color) !important;
}

/* Accordion Smooth Polish */
.pcos-accordion .accordion-item {
    border-radius: 16px !important;
    margin-bottom: 12px;
    border: 1px solid var(--divider-color) !important;
}

.pcos-accordion .accordion-button:not(.collapsed) {
    background: #f0f6f2 !important;
    color: var(--main-color) !important;
}

/* Button Elevation */
.btn-default {
    box-shadow: 0 6px 6px rgba(31, 78, 95, 0.15);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-default:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(31, 78, 95, 0.22);
}

/*----------------------------------------------------------------------------------------
34. Treatment Sidebar Styling & Navigation
----------------------------------------------------------------------------------------*/

.treatment-sidebar-wrapper {
    z-index: 10;
}

.treatment-nav-link {
    background: var(--secondery-color);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 14px;
    border: 1px solid transparent;
    transition: all 0.25s ease;
    cursor: pointer;
    text-decoration: none !important;
}

.treatment-nav-link .nav-icon {
    color: var(--main-color);
    font-size: 15px;
    transition: color 0.25s ease;
}

.treatment-nav-link .arrow-icon {
    color: #a4b5a8;
    font-size: 12px;
    transition:
        transform 0.25s ease,
        color 0.25s ease;
}

.treatment-nav-link:hover {
    background: #eef6f1;
    color: var(--main-color);
    border-color: var(--accent-color);
    transform: translateX(4px);
}

.treatment-nav-link:hover .arrow-icon {
    transform: translateX(3px);
    color: var(--main-color);
}

.treatment-nav-link.active {
    background: var(--main-color) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(31, 78, 95, 0.22);
    border-color: var(--main-color) !important;
}

.treatment-nav-link.active .nav-icon,
.treatment-nav-link.active .arrow-icon {
    color: #ffffff !important;
}

.bg-light-green {
    background-color: #ebf5ee;
}

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

.sidebar-widget {
    transition: all 0.3s ease;
}

.sidebar-widget:hover {
    box-shadow: 0 10px 30px rgba(31, 78, 95, 0.08) !important;
}

/*----------------------------------------------------------------------------------------
35. Comprehensive Mobile & Tablet Responsive Optimization for Treatment Pages
----------------------------------------------------------------------------------------*/

/* Desktop Sticky Adjustments (> 992px) */
@media (min-width: 992px) {
    .treatment-sidebar-wrapper.sticky-top {
        top: 110px !important;
    }
}

/* Tablet & Mobile Screens (<= 991px) */
@media (max-width: 991px) {
    /* Unset sticky sidebar so it flows naturally when stacked */
    .treatment-sidebar-wrapper {
        position: static !important;
        top: 0 !important;
        margin-top: 30px;
    }

    .pcod-hero-section {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .pcod-hero-content .main-title {
        font-size: 34px !important;
        line-height: 1.25 !important;
    }

    .insta-video-embed-wrap {
        height: 440px !important;
    }

    .insta-video-embed-wrap iframe.insta-videos-iframe {
        height: 440px !important;
    }

    .experience-counter.experience-counter-br {
        right: 15px;
        bottom: 15px;
        padding: 12px 18px;
    }

    .experience-counter.experience-counter-br h3 {
        font-size: 26px;
    }

    .experience-counter.experience-counter-br p {
        font-size: 11px;
    }
}

/* Mobile Screens (<= 767px) */
@media (max-width: 767px) {
    .pcod-hero-content .main-title {
        font-size: 28px !important;
    }

    .pcod-hero-content .lead-text {
        font-size: 15px !important;
    }

    .hero-reassurance-strip {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .insta-video-embed-wrap {
        height: 380px !important;
    }

    .insta-video-embed-wrap iframe.insta-videos-iframe {
        height: 380px !important;
    }

    .treatment-block h2.section-heading {
        font-size: 22px !important;
    }

    /* Stepper Mobile Layout */
    .pcos-stepper-wrapper::before {
        left: 17px;
        top: 15px;
        bottom: 15px;
    }

    .step-badge-num {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .step-content-card {
        padding: 16px !important;
        border-radius: 16px !important;
    }

    .step-content-card h3 {
        font-size: 16px;
    }

    /* Sidebar Mobile Polish */
    .treatment-sidebar-wrapper .sidebar-widget {
        padding: 20px 16px !important;
        border-radius: 18px !important;
    }

    .treatment-nav-link {
        padding: 12px 14px !important;
        font-size: 13px !important;
    }

    .pcos-factor-card,
    .info-badge-card {
        padding: 18px !important;
    }

    .pcos-accordion .accordion-button {
        font-size: 15px !important;
        padding: 14px 16px !important;
    }

    .pcod-hero-btns {
        flex-direction: column;
        width: 100%;
    }

    .pcod-hero-btns .btn-default {
        width: 100%;
        text-align: center;
    }

    /* Justify paragraphs in mobile view */
    p {
        text-align: justify;
    }
}

/* Small Mobile Screens (<= 480px) */
@media (max-width: 480px) {
    .insta-video-embed-wrap {
        height: 340px !important;
    }

    .insta-video-embed-wrap iframe.insta-videos-iframe {
        height: 340px !important;
    }

    .dr-breadcrumb {
        font-size: 11px;
        gap: 2px;
        padding: 2px 8px;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }
    .dr-breadcrumb .separator {
        margin: 0 2px;
    }
    .dr-breadcrumb .current {
        background-color: transparent !important;
        padding: 2px;
    }
}
.icons-color {
    color: var(--main-color);
}

/* ======================== instagram footer css =========================== */

.instagram-container {
    width: 100%;
    max-width: 450px;
    height: 400px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(31, 78, 95, 0.12);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.instagram-container:hover {
    box-shadow: 0 12px 30px rgba(31, 78, 95, 0.14);
}

.instagram-container iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 575px) {
    .instagram-container {
        max-width: 100%;
        height: 380px;
        aspect-ratio: 1 / 1;
    }
}
/* =============== footer insta end ==================== */

/* ================= Health Talks Responsive Grid CSS ================= */
.health-talks-grid {
    margin-top: 15px;
}

.health-talks-grid .insta-videos-card {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    background-color: var(--white-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--divider-color);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.health-talks-grid .insta-videos-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 32px rgba(31, 78, 95, 0.15);
    border-color: var(--accent-color);
}

.health-talks-grid .insta-videos-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    border-radius: 16px;
}

@media (max-width: 575px) {
    .health-talks-grid .insta-videos-card {
        max-width: 320px;
        margin: 0 auto;
    }
}

/* ================= Treatment Page Helper CSS ================= */
.max-w-600 {
    max-width: 600px;
}
.max-w-700 {
    max-width: 700px;
}

/* ================= Miraai Brand Color System Styles ================= */
.text-brand-main {
    color: var(--main-color) !important;
}
.text-brand-primary {
    color: var(--primary-color) !important;
}
.bg-brand-secondary {
    background-color: var(--secondery-color) !important;
}
.bg-brand-third {
    background-color: var(--third-color) !important;
}
.border-brand-main {
    border-color: var(--main-color) !important;
}

/* Stepper Customization */
.step-badge-num {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background-color: var(--main-color);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(31, 78, 95, 0.25);
}

.step-tag {
    background-color: var(--third-color);
    color: var(--main-color);
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.step-content-card {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
    border-left: 4px solid var(--main-color) !important;
}

.step-content-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(31, 78, 95, 0.1) !important;
}

/* Treatment Condition Cards */
.condition-card {
    background-color: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 16px;
    padding: 24px;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    border-bottom: 4px solid var(--main-color);
}

.condition-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(31, 78, 95, 0.12);
}

.condition-card .card-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background-color: var(--third-color);
    color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 16px;
}

/* Outcome Badges */
.outcome-pill-badge {
    background-color: var(--third-color);
    color: var(--primary-color);
    border: 1px solid rgba(31, 78, 95, 0.15);
    padding: 10px 18px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

.outcome-pill-badge:hover {
    background-color: var(--accent-color);
}

.outcome-pill-badge i {
    color: var(--main-color);
}

/* Custom Brand Accordion */
.pcos-accordion .accordion-button {
    font-weight: 700;
    color: var(--primary-color);
    background-color: var(--white-color);
    padding: 18px 24px;
    font-size: 16px;
    border: 0;
    box-shadow: none !important;
}

.pcos-accordion .accordion-button:not(.collapsed) {
    color: var(--white-color);
    background-color: var(--main-color);
}

.pcos-accordion .accordion-button::after {
    transition: transform 0.3s ease;
}

.pcos-accordion .accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}

.pcos-accordion .accordion-item {
    border: 1px solid var(--divider-color);
    border-radius: 12px !important;
    overflow: hidden;
    margin-bottom: 12px;
}

/* Checkmark List Items */
.brand-check-list li {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: 10px;
}

.brand-check-list li i {
    color: var(--main-color);
    font-size: 18px;
}

/* Address Card */
.clinic-address-card {
    background-color: var(--secondery-color);
    border-left: 4px solid var(--main-color);
    border-radius: 12px;
    padding: 20px;
}

/* Start Journey Banner */
.start-journey-banner {
    background: linear-gradient(
        135deg,
        var(--main-color) 0%,
        var(--primary-color) 100%
    );
    color: var(--white-color);
    border-radius: 20px;
    padding: 40px;
}
.main-color {
    color: var(--main-color) !important;
}
.text-color {
    color: var(--text-color) !important;
}

/* Redesigned IVF Journey Section */
.ivf-journey-card {
    background: linear-gradient(135deg, #f8fafb 0%, #edf4f6 100%);
    border: 1px solid #d4e3e7;
    transition: all 0.3s ease;
}
.ivf-journey-card:hover {
    box-shadow: 0 10px 30px rgba(31, 78, 95, 0.08) !important;
}
.journey-info-divider {
    border-top: 1px solid rgba(31, 78, 95, 0.12);
    border-bottom: 1px solid rgba(31, 78, 95, 0.12);
}
@media (min-width: 768px) {
    .border-start-md {
        border-left: 1px solid rgba(31, 78, 95, 0.12) !important;
    }
}

/* Sidebar Doctor Quick Profile Card Redesign */
.doctor-profile-card {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(240, 248, 245, 0.95) 100%
    );
    backdrop-filter: blur(10px);
    border: 1px solid rgba(31, 78, 95, 0.12);
    transition: all 0.3s ease;
}
.doctor-profile-card:hover {
    box-shadow: 0 12px 30px rgba(31, 78, 95, 0.12) !important;
    transform: translateY(-3px);
}
.doctor-bg-glow {
    top: 30px;
    width: 170px;
    height: 170px;
    background: radial-gradient(
        circle,
        rgba(183, 205, 186, 0.65) 0%,
        rgba(31, 78, 95, 0.08) 70%,
        transparent 100%
    );
    filter: blur(8px);
    z-index: 1;
    pointer-events: none;
}
.doctor-portrait-wrap {
    height: 190px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.doctor-portrait-img {
    max-height: 190px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(31, 78, 95, 0.18));
    transition: transform 0.3s ease;
}
.doctor-profile-card:hover .doctor-portrait-img {
    transform: scale(1.04);
}
.badge-exp-pill {
    background: #ffffff;
    color: var(--main-color);
    border: 1px solid rgba(31, 78, 95, 0.15);
    font-size: 12px;
}

/* Responsive Comparison Cards */
.comparison-card {
    transition: all 0.3s ease;
    border-top: 4px solid var(--main-color) !important;
}
.comparison-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(31, 78, 95, 0.1) !important;
}

/* Modern Premium Fertility Assessment Table */
.modern-table-container {
    border-radius: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(31, 78, 95, 0.15);
    box-shadow: 0 10px 30px rgba(31, 78, 95, 0.06);
    background: #ffffff;
}

.modern-fertility-table {
    margin-bottom: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 580px;
}

.modern-fertility-table thead tr {
    background: linear-gradient(135deg, var(--main-color) 0%, #133a47 100%);
    color: #ffffff;
}

.modern-fertility-table thead th {
    padding: 18px 24px !important;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    border: none !important;
    color: #ffffff !important;
    white-space: nowrap;
}

.modern-fertility-table tbody tr {
    transition: all 0.25s ease;
    border-bottom: 1px solid rgba(31, 78, 95, 0.08);
}

.modern-fertility-table tbody tr:nth-child(even) {
    background-color: rgba(31, 78, 95, 0.02);
}

.modern-fertility-table tbody tr:last-child {
    border-bottom: none;
}

.modern-fertility-table tbody tr:hover {
    background-color: rgba(31, 78, 95, 0.06) !important;
}

.modern-fertility-table tbody td {
    padding: 16px 24px !important;
    vertical-align: middle;
    border: none !important;
}

.test-icon-badge {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    background: rgba(31, 78, 95, 0.08);
    color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.modern-fertility-table tbody tr:hover .test-icon-badge {
    background: var(--main-color);
    color: #ffffff;
    transform: scale(1.08);
}

.test-title {
    font-weight: 700;
    color: var(--main-color);
    font-size: 0.95rem;
}

.test-desc {
    color: #4a5568;
    font-size: 0.92rem;
    line-height: 1.5;
}

/* Custom Scrollbar for Mobile Table Container */
.modern-table-container::-webkit-scrollbar {
    height: 6px;
}
.modern-table-container::-webkit-scrollbar-track {
    background: rgba(31, 78, 95, 0.05);
}
.modern-table-container::-webkit-scrollbar-thumb {
    background: var(--main-color);
    border-radius: 10px;
}

/* Responsive Table Adjustments for Small Screens */
@media (max-width: 767.98px) {
    .modern-fertility-table thead th {
        padding: 14px 16px !important;
        font-size: 0.88rem;
    }

    .modern-fertility-table tbody td {
        padding: 12px 16px !important;
    }

    .test-icon-badge {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 0.95rem;
    }

    .test-title {
        font-size: 0.85rem;
    }

    .test-desc {
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   Google Reviews & Patient Stories CSS
   ========================================================================== */
.google-review-card {
    background: #ffffff;
    border: 1px solid #eaf0ec;
    border-radius: 16px;
    padding: 24px;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.google-review-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(31, 78, 95, 0.1) !important;
    border-color: var(--accent-color);
}
.google-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--main-color) 0%, #2a697f 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.read-more-btn {
    color: var(--main-color);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.read-more-btn:hover {
    text-decoration: underline;
    color: var(--primary-color);
}
.google-summary-box {
    background: #ffffff;
    border: 1px solid #eaf0ec;
    border-radius: 16px;
    padding: 20px 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.google-logo-img {
    height: 50px;
    width: auto;
    object-fit: contain;
}

.use-it {
    background: radial-gradient(
        circle at 50% 50%,
        rgba(183, 205, 186, 0.08) 0%,
        rgba(255, 255, 255, 1) 80%
    );
}