/*=========================================================

    Design Name       : Klinik Primary Care 4U

    Version           : V1.0

    Design Date       : 23/05/2025

    Developed Comapny : Kadamtech Pvt. Ltd.

	Developed Comapny : https://www.kadamtech.com/

 ============================================================*/





*,

*::before,

*::after {

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}



@media (prefers-reduced-motion: no-preference) {

    :root {

        scroll-behavior: smooth;

    }

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    transition: 0.1s linear;

}



:root {

    --primary-color: #F06739;

    --secondary-color: #12309C;

    --tertiary-color: #7D2498;

    --heading-color: #222;

    --text-color: #27374E;

    --text-matte-color: #333333;

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

}



.bg-secoundary-btn {

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

    box-shadow: 0 0 0 4px rgba(18, 48, 156, 0.1) !important;

}





body {

    margin: 0;

    font-size: 16px;

    font-weight: 500;

    font-family: "DM Sans", sans-serif;

    line-height: normal;

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

    -webkit-text-size-adjust: 100%;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    position: relative;

    overflow-x: visible !important;
}



hr {

    margin: 0;

    border-color: #ddd;

}



hr:not([size]) {

    height: 1px;

}



h1 {

    font-size: 46px;

}



h2 {

    font-size: 40px;

}



h3 {

    font-size: 26px;

}



h4 {

    font-size: 24px;

}



h5 {

    font-size: 20px;

}



h6 {

    font-size: 16px;

}



p {

    font-size: 16px;

    line-height: 28px;

    margin-bottom: 10px;
    font-weight: 500;

}



img {

    width: 100%;

}



ol,

ul {

    padding-left: 34px;

}



ol,

ul,

dl {

    margin-top: 0;

    margin-bottom: 0;

    list-style: none;

    padding: 0;

}



ol ol,

ul ul,

ol ul,

ul ol {

    margin-bottom: 0;

}



blockquote {

    margin: 0 0 14px;

}



b {

    font-weight: 800;

}



strong {

    font-weight: 700;

}



small {

    font-size: 12px;

}



a {

    color: inherit;

    text-decoration: none;

}



a:hover {

    color: #ccc;

    text-decoration: none;

}



button {

    border-radius: 0;

    outline: 0;

    box-shadow: none;

    border: 0;

}



button:focus:not(:focus-visible) {

    outline: 0;

    box-shadow: none;

}



input,

button,

select,

optgroup,

textarea,

.form-control {

    margin: 0;

    font-family: inherit;

    font-size: inherit;

    line-height: inherit;

    background-color: #fff;

    border: 1px solid #DBDBDB;

    padding: 15px 20px;

}



::-moz-selection {

    background-color: #200468;

    color: #FFF;

    text-shadow: none
}



::selection {

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

    color: #fff;

    text-shadow: none
}



/* End By Default Reset */



.header-wrapper {}



.header-wrapper .top-header {

    padding: 8px 0;

    background: linear-gradient(145deg, rgba(125, 36, 152, 1) 0%, rgba(3, 41, 178, 1) 100%);

}



.header-wrapper .top-header .contact-info ul {

    display: flex;

    gap: 30px;

    justify-content: start;

    align-items: center;

}



.header-wrapper .top-header .contact-info ul li a {

    display: flex;

    gap: 4px;

    color: #fff;

    align-items: center;

}



.header-wrapper .top-header .contact-info ul li a p {

    font-size: 14px;

}



.header-wrapper .top-header .contact-info ul li a i {

    font-size: 22px;

    max-height: 30px;

    max-width: 30px;

    min-width: 30px;

    min-height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 100px;

    color: #fff;

}



.header-wrapper .bottom-header {

    border-radius: 0 0 20px 20px;

    background: #fff;

    /* border-bottom: 1px solid #1F2732; */

    box-shadow: 0 10px 10px 0 rgb(51 51 51 / 8%);

}



.header-wrapper .nav-contact-action {

    padding: 10px 20px;

    ;



}





.page-btn a {

    background: var(--primary-color);

    border-radius: 100px;

    color: #fff;

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    gap: 4px;

    font-size: 16px;

    padding: 12px 16px;

    transition: 0.5s ease-in-out;

    line-height: normal;

    box-shadow: 0 0 0 4px #FBD8C3;

}



.page-btn button:hover {

    background: #fff;

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

    color: var(--primary-color);

}



.page-btn i {

    background: #fff;

    color: var(--primary-color);

    margin-left: 6px;

    background: #fff;

    border-radius: 50%;

    font-size: 20px;

    height: 30px;

    width: 30px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transform: rotate(-35deg);

}



.page-btn:hover i {

    background: var(--primary-color);

    color: #fff;

    transform: rotate(0deg);

}



.header-wrapper .top-header .head-info {

    display: flex;

    justify-content: start;

    align-items: center;

    gap: 10px;



}



.header-wrapper .top-header .head-info li {

    font-size: 14px;

    display: flex;

    justify-content: start;

    align-items: center;

    gap: 5px;

}



.header-wrapper .top-header .head-info li a {

    color: #fff;

    transition: all 0.3s ease-in;

}



.header-wrapper .top-header .head-info li i {

    color: #fff;

}



.header-wrapper .top-header .head-info li a:hover {

    color: var(--primary-color);

}



.header-wrapper .top-header .head-social {

    display: flex;

    justify-content: end;

    align-items: center;

    position: relative;

    z-index: 1;

    gap: 10px;

}



.header-wrapper .top-header .head-social li a {

    display: flex;

    justify-items: center;

    align-items: center;

    background: #fff;

    border-radius: 100px;

    padding: 0;

    width: 24px;

    height: 24px;

}



.header-wrapper .top-header .head-social li a img {

    width: 18px;

    height: 18px;

    display: block;

    margin: auto;

}



.header-wrapper .header-lower .logo-box {

    display: flex;

    justify-content: start;

    align-items: center;

    height: 100%;

}



.header-wrapper .header-lower .logo-box img {

    width: 100%;

    max-width: 100px;

    object-fit: contain;

}



.header-wrapper .header-lower .button-primary {

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

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

    padding: 10px 18px;

}



.header-wrapper .header-lower .button-primary:hover {

    color: #fff;

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

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

}



.header-wrapper .nav-box nav ul {

    display: flex;

    flex-wrap: wrap;

    flex-direction: row;

    position: relative;

}



.header-wrapper .nav-box nav ul li {

    text-transform: capitalize;

    margin-right: 14px;

    position: relative;



}



.header-wrapper .nav-box nav ul li a {

    font-size: 16px;

    color: var(--meta-black-color);

    font-weight: 600;

    display: inline-block;

    position: relative;

    padding: 20px 0px;

}



.header-wrapper .nav-box nav ul li a:hover {

    color: var(--primary-color);

}



.header-wrapper .nav.main-menu .navbar-nav.navigation li .sub-menu {

    width: 260px;

    max-width: 260px;

    background: #fff;

    position: absolute;
    transform: translateY(0);
    left: -30px;
    top: 90px;
    border-radius: 10px;

    transition: 0.3s ease;

    text-align: center;

    visibility: hidden;

    opacity: 0;

    box-shadow: 0 7px 10px -1px rgb(0 0 0/20%);

    z-index: 999;

    overflow: hidden;

}



.header-wrapper .nav.main-menu .navbar-nav.navigation li .sub-menu li {

    margin: 0;

    margin-right: 0 !important;

    width: 100%;

    position: relative
}



.header-wrapper .nav.main-menu .navbar-nav.navigation li .sub-menu a {

    padding: 10px;

    width: 100%;

    font-weight: 400;

    border-bottom: 1px solid #ddd
}



.header-wrapper .nav-box .navbar-nav.navigation li:hover>.sub-menu {

    transition: .5s ease;

    visibility: visible;

    opacity: 1;

    transform: translateY(0);

    left: -30px;

    top: 90px;

}



.nav.main-menu .navbar-nav.navigation li .sub-menu li a {

    text-align: left
}



.nav.main-menu .navbar-nav.navigation li .sub-menu li:hover {

    background: var(--primary-color);

}



.nav.main-menu .navbar-nav.navigation li .sub-menu li:hover a {

    color: #fff;

    padding-left: 10px
}



.nav.main-menu .navbar-nav.navigation li .sub-menu li:hover a::after {

    color: #fff;

}





.header-wrapper .nav-box .main-menu .navbar-nav .current-menu-item a {

    color: var(--primary-color)
}





/* .main-menu .navigation>li.menu-item-has-children a:after {

    position: absolute;

    right: -10px;

    top: 0px;

    bottom: 0;

    margin: auto;

    font-family: boxicons !important;

    font-weight: 400;

    content: "\ed91";

    font-size: 8px;

    line-height: 1;

    display: flex;

    color: #888;

    z-index: 5;

    align-items: center;

} */

.main-menu .navigation>li.menu-item-has-children a::before {

    content: "";

    position: absolute;

    height: 50px;

    width: 100%;

    left: 0;

    right: 0;

    bottom: -40px;

}



.main-menu .navigation>li.menu-item-has-children>.sub-menu>.menu-item-has-children>a:after {

    position: absolute;

    right: 10px;

    top: 0px;

    font-family: boxicons !important;

    font-weight: 400;

    content: "\ed91";

    font-size: 8px;

    line-height: 1;

    display: flex;

    color: #888;

    z-index: 5;

    align-items: center;

    height: fit-content;

    width: auto;

    transform: rotate(-90deg);

}



.main-menu .navigation>li.menu-item-has-children .sub-menu a:after {

    display: none
}



.header-wrapper .nav.main-menu .navbar-nav.navigation li>.sub-menu li>.sub-menu {

    left: calc(100% + 20px);

    top: 0;

}



.header-wrapper .nav.main-menu .navbar-nav.navigation li>.sub-menu li.darmatology_menu>.sub-menu {

    display: flex;

    min-width: 550px;

}



.header-wrapper .nav.main-menu .navbar-nav.navigation li>.sub-menu li.darmatology_menu>.sub-menu li {

    width: 50%;

}



.header-wrapper .nav.main-menu .navbar-nav.navigation li>.sub-menu li:hover>.sub-menu {

    transform: translate(0);

    visibility: visible;

    opacity: 1;

}



.header-wrapper .nav.main-menu .navbar-nav.navigation li .sub-menu li>.sub-menu a {

    color: var(--meta-black-color);

}



.header-wrapper .nav.main-menu .navbar-nav.navigation li .sub-menu li>.sub-menu a:hover {

    color: #fff;

}



section[class]:not([id]) {

    padding: 80px 0;

    position: relative;

}



header {

    position: fixed;
    top: 0;

    width: 100%;

    z-index: 999;

}


.mm-panel,
.mm-navbar {
    background: var(--secondary-color);
}

.mm-menu a {
    color: #fff !important;
}



/*

.banner-area {

    padding: 240px 0 60px 0 !important;

}



.banner-area .content-box h1 {

    font-size: 20px;

    margin-bottom: 10px;

    font-weight: 600;

    font-style: italic;

}



.banner-area .content-box h2 {

    font-size: 60px;

    margin-bottom: 14px;

    font-weight: 700;

    color: var(--secondary-color);

    margin-bottom: 30px;

} */





footer {

    background: #333333;

    padding: 60px 0 0 0;

}



.footer-wrapper {

    padding-bottom: 30px;

    border-bottom: 1px solid #525252;

}



footer .logo {

    width: 210px;

    background: #fff;

    border-radius: 10px;

    padding: 10px;

}



footer .content-box h3 {

    font-weight: 500;

    font-size: 22px;

}



footer .footer-navigations {

    padding: 60px 0 30px 0;

}



footer .footer-navigations .content-box h4 {

    color: #fff;

    margin-bottom: 16px;

    font-size: 20px;

    font-weight: 600;

}



footer .footer-navigations .content-box ul {

    display: flex;

    flex-direction: column !important;

    gap: 14px;

}



footer .footer-navigations .content-box ul li a {

    display: flex;

    align-items: center;

}



footer .footer-navigations .content-box ul li {

    font-size: 16px;

    color: #fff;

    display: flex;

    align-items: center;

    font-weight: 500;

    padding: 0;

}



footer .footer-navigations .content-box ul li:before {

    display: none;

}



footer .footer-navigations .content-box ul li i {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 20px;

    margin-right: 10px;

}



footer .footer-navigations .content-box p {

    color: #fff;

}



.footer-copyright p {

    text-align: center;

    padding: 16px 0px 10px 0;

    font-size: 16px;

    color: #fff;

    background: #444;

    margin-top: 30px;

    background: linear-gradient(145deg, rgba(125, 36, 152, 1) 0%, rgba(3, 41, 178, 1) 100%);

    margin-bottom: 0;

}



.f-social ul {

    display: flex;

    gap: 10px;

}



.f-social ul li a {

    width: 38px;

    height: 38px;

    font-size: 20px;

    color: var(--secoundary-color);

    display: inline-flex;

    align-items: center;

    justify-content: center;

}





/* banner */

.main-banner {

    padding: 200px 0 60px 0 !important;

}



.subtitle span {

    color: var(--primary-color);

    font-size: 18px;

    font-weight: 700;

    display: inline-block;

    margin-bottom: 20px;

    position: relative;

}



.subtitle span:after {

    content: "";

    height: 2px;

    width: 40px;

    background: var(--primary-color);

    position: absolute;

    left: calc(100% + 8px);

    top: 0;

    bottom: 0;

    margin: auto;

}



.content-box .heading h1 {

    font-size: 50px;

    font-weight: 600;

}



.banner-box .box-item {

    display: flex;

    padding: 20px;

    box-shadow: 4px 4px 10px 0 rgb(51 51 51 / 10%);

    border-radius: 10px;
    background: #fff;

    gap: 14px;

    align-items: center;

}



.banner-box .box-item .title h2 {

    font-size: 18px;

    font-weight: 600;

    line-height: normal;

}



.main-banner .banner-img img {

    max-width: 26vw;

    margin: auto;

    display: block;

}



.banner-box .box-item .icon {

    width: 50px;

    height: 50px;

    min-width: 50px;

    min-height: 50px;

    background: linear-gradient(145deg, rgba(125, 61, 145, 0.15) 0%, rgba(54, 121, 185, 0.15) 100%);

    padding: 10px;

    border-radius: 50%;

}





.main-banner a.call-action-btn .icon {

    width: 48px;

    height: 48px;

    background: var(--secondary-color);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 22px;

    vertical-align: middle;

}



.main-banner .banner-action-btn .call-action-btn .title-n span:first-child {

    font-weight: 600;

}



.main-banner .banner-action-btn .call-action-btn .title-n span:last-child {

    font-size: 16px;

    font-weight: 700;

}



.content-box .subtitle h3 {

    color: var(--primary-color);

    font-size: 20px;

    font-weight: 600;

    display: inline-block;

    margin-bottom: 20px;

    position: relative;

}



.content-box .subtitle h3::before {

    content: "";

    height: 2px;

    width: 40px;

    background: var(--primary-color);

    position: absolute;

    right: calc(100% + 8px);

    top: 0;

    bottom: 0;

    margin: auto;

}



.content-box .subtitle h3::after {

    content: "";

    height: 2px;

    width: 40px;

    background: var(--primary-color);

    position: absolute;

    left: calc(100% + 8px);

    top: 0;

    bottom: 0;

    margin: auto;

}



.content-box .heading h4 {

    text-transform: capitalize;

    font-size: 40px;

    font-weight: 600;

}



.content-box ul {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 20px;

}



.content-box ul li {

    padding-left: 26px;

    position: relative;

}



.content-box ul li::before {

    content: "\ea41";

    color: var(--primary-color);

    font-family: boxicons !important;

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    font-size: 24px;

    display: flex;

    align-items: start;

}





.service-items .service-item-box {

    border-radius: 10px;

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

    padding: 20px;

    height: 100%;

}



.service-items .service-item-box:hover {

    transform: scale(0.95);

    transition: 0.3s ease-in-out;

}



.service-items .service-item-box .image {

    position: relative;

}



.service-items .service-item-box .image>img {

    border-radius: 10px;

    border-bottom: 6px solid #333;

}



.service-items .service-item-box .image .icon {

    background: #fff;

    border-radius: 50%;

    height: 60px;

    width: 60px;

    padding: 14px;

    position: absolute;

    left: 20px;

    bottom: -25px;

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

}



.service-items .service-item-box .content-box {

    padding-top: 40px;

}



.service-items .service-item-box .content-box .title h5 {

    font-size: 20px;

    font-weight: 600;

    margin-bottom: 8px;

    line-height: normal;

    color: var(--secondary-color);

}



.service-items .service-item-box .page-btn a {

    font-size: 14px;

    padding: 6px 12px;

}





.call-pitch-inner {

    padding: 20px;

    border-radius: 10px;

    position: relative;

}







.call-pitch-inner .content-box h3 {

    font-size: 34px;

    font-weight: 800;

    margin-bottom: 10px;

    line-height: normal;

}



.call-pitch-inner .content-box h4 {

    font-size: 18px;

    font-weight: 500;

    line-height: normal;

}



.call-pitch-inner .content-image .image img {

    position: absolute;

    bottom: 0;

    width: 20vw;

    right: 40px;

}



.call-ad-pitch .contact-info ul {

    display: flex;

    gap: 40px;

    justify-content: center;

    align-items: center;

    margin-top: 30px;

}





.call-ad-pitch .contact-info ul li a {

    color: #fff;

    display: flex;

    gap: 20px;

    align-items: center;

}



.call-ad-pitch .contact-info ul li a i {

    background: #fff;

    height: 40px;

    width: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #2927aa;

    font-size: 24px;

}



.call-ad-pitch .contact-info ul li a .title span:first-child {

    font-weight: 700;

}



.why-choose {

    background: #EBF2F8;

}



.why-choose .why-box {

    padding: 20px;

    border: 1px solid #ddd;

    border-radius: 10px;

    background: var(--secondary-color);

}



.why-choose .why-box .content-box h5 {

    font-weight: 600;

    font-size: 20px;

}







.symptoms-box {

    padding: 30px 0 0 0;

    border-radius: 10px;

    border-bottom: 2px solid #ddd;

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

    height: 100%;

    border-bottom: 2px solid var(--secondary-color);

}



.symptoms-box .icon {
    padding: 0px 0 0px 14px;
    margin-bottom: 10px;
    width: 100%;
    background: linear-gradient(145deg, rgba(142, 156, 208, 1) 0%, rgba(255, 255, 255, 1) 100%);
    position: relative;
    height: 60px;

}



.symptoms-box .icon img {

    padding: 10px;
    background: var(--secondary-color);
    width: 60px;
    border-radius: 10px;
    display: block;
    position: absolute;
    width: 70px;
    top: 0;
    bottom: 0;
    margin: auto;

}



.symptoms-box .title-content h5 {

    margin-bottom: 10px;

    font-size: 20px;

    font-weight: 600;

}





.reviews {

    background: linear-gradient(145deg, rgba(18, 48, 156, 0.15) 0%, rgba(125, 61, 145, 0.15) 100%);

}



.reviews .review-box .card {

    padding: 40px 20px 20px 20px;

    height: 100%;

}



.reviews .review-box .card .role {

    color: var(--secondary-color);

}



.reviews .review-box .quotation-mark {

    font-size: 100px;

    vertical-align: top;

    line-height: 0.9;

    padding-right: 20px;

    color: var(--secondary-color);

}



.reviews .review-box {

    height: 100%;

}





.owl-theme .owl-dots .owl-dot.active span,



.owl-theme .owl-dots .owl-dot:hover span {



    width: 20px;



    background: var(--secondary-color);



    transition: 0.3s ease-in-out;



}



.owl-theme .owl-dots {

    margin-top: 30px !important;

}





.reviews .owl-stage {

    display: flex;

    align-items: stretch;

}







.testimonial-btn {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

}







.googleViewbtn {

    display: inline-flex;

    column-gap: 10px;

    padding: 10px;

    font-size: 16px;

    font-weight: 500;

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

    background: #fff;

    border: 1px solid #ddd;

    border-radius: 6px;

    margin: 0;

    align-self: center;

    align-items: center;

    justify-content: center;

    align-content: center;

    line-height: 1.2
}







.googleViewbtn img {

    width: 100px;

    border-right: 1px solid #ddd;

    padding-right: 10px
}







.googleViewbtn.Reviews img {

    width: 24px;

    border: 0;

    padding: 0
}







.googleViewbtn span {

    font-weight: 600;

    font-size: 14px;

}





.contact-us .contact-address-box {

    padding: 20px;

    border-radius: 10px;

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

    height: 100%;

}





.contact-us .contact-address-box h4 {

    font-size: 28px;

    margin-bottom: 10px;

    font-weight: 700;

    color: #020842;

}



.contact-us .contact-address-box h4+p {

    margin-bottom: 8px;

}





.contact-address-box ul li a i {

    width: 40px;
    min-width: 40px;

    height: 40px;

    background: var(--secondary-color);

    display: flex;

    align-items: center;

    color: #fff;

    justify-content: center;

    border-radius: 50%;

}





.contact-address-box ul li a {

    display: flex;

    gap: 10px;

    align-items: center;

    font-size: 18px;

}



.contact-address-box ul {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 20px;

}



.contact-address-box iframe {

    border-radius: 10px;

    height: 250px;

    display: block;

}



.contact-form .contact-head-box h5 {

    font-size: 18px;

    margin-bottom: 20px;

    display: flex;

    align-items: center;

    gap: 10px;

    font-weight: 600;

}



.contact-form .contact-head-box h5 i {

    color: var(--secondary-color);

}





.contact-form .contact-head-box h6 {

    font-size: 30px;

    font-weight: 600;

    margin-bottom: 30px;

    line-height: 42px;

}



.contact-form {

    padding: 30px;

    border-radius: 10px;

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

    height: 100%;

    background: #fff;

}



.contact-form input {

    padding: 10px;

    font-size: 16px;

}



.contact-form textarea {

    height: 100px;

}



.contact-form .input-with-icon {

    padding-left: 2.5rem !important;

}



.contact-form .icon-input {

    position: absolute;

    left: 26px;

    top: 40%;

    transform: translateY(-50%);

    font-size: 1.2rem;

    color: #333;

    z-index: 2;

    pointer-events: none;

}



.contact-form i.bx.bx-message-detail.icon-input {

    top: 28%;

}





.wpcf7-submit {

    background: var(--primary-color);

    border-radius: 100px;

    color: #fff;

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    gap: 4px;

    font-size: 16px !important;

    padding: 12px 16px !important;

    transition: 0.5s ease-in-out;

    line-height: normal;

    box-shadow: 0 0 0 4px #FBD8C3;

    border: none;

}

.wpcf7-submit:hover {
    background: var(--primary-color);
}





.promotions .promotion-box {

    padding: 20px 20px 20px 0;

    border-radius: 10px;

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

    height: 100%;

    border-bottom: 4px solid #000000;

    background: #fff;

}



.promotions .promotion-box .content-box h5 {

    font-size: 24px;

    margin-bottom: 18px;

    padding-left: 20px;

    font-weight: 700;

}



.promotions .promotion-box .content-box h6 {

    font-size: 20px;

    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 10px;

    background: var(--tertiary-color);

    padding: 10px 30px 10px 10px;

    border-radius: 2px 100px 100px 2px;

    color: #fff;

    width: fit-content;

    vertical-align: middle;

    line-height: normal;

}



.promotions .promotion-box .content-box h6 span {

    font-size: 32px;

    font-weight: 700;

}



.promotions .promotion-box .content-box h6+p+ul {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 20px;

}



.promotions .promotion-box .content-box h6+p+ul li {

    padding-left: 26px;

    position: relative;

}



.promotions .promotion-box .content-box h6+p+ul li::before {

    content: "\ea41";

    color: var(--primary-color);

    font-family: boxicons !important;

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    font-size: 24px;

    display: flex;

    align-items: start;

}



.promotions .promotion-box .content-box h6+p,

.promotions .promotion-box .content-box h6+p+ul,

.promotions .promotion-box .content-box .page-btn {

    padding-left: 20px;

}



.promotions .owl-carousel .owl-stage-outer {

    padding: 20px 0;

}





.social-media .image-box {

    width: 100%;

    height: 320px;

    position: relative;

    border-radius: 10px;

    overflow: hidden;

    border: 1px solid #ddd;

}



.social-media .image-box img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    background: #fff;

}



.social-media .image-box::after {

    position: absolute;

    bottom: 0;

    right: 0;

    left: 0;

    margin: auto;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 15px;

    color: #fff;

    font-size: 24px;

    bottom: 8px;

    transition: all 0.3s ease;

}





.social-media .social-btn {

    display: flex;

    justify-content: center;

    gap: 15px;

}



.social-media .social-btn .btn-smo {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 20px;

    background: #fff;

    color: #333;

    border-radius: 100px;

    text-decoration: none;

    font-weight: 500;

    transition: background 0.3s, transform 0.3s;

    box-shadow: 0px 4px 4px 0 rgb(149 157 165 / 0.25);

    font-size: 16px;

    line-height: 26px;

    text-align: center;

    margin-right: 15px;

}



.social-media .social-btn .btn-smo img {

    width: 20px;

    height: 20px;

}



.social-media .social-btn .btn-smo:hover {

    background: #fff;

    transform: scale(1.05);

    color: #000;

}







/* blogs */





.blog-slider.owl-carousel .owl-stage {

    display: flex
}



.blog-slider .owl-item {

    padding: 10px
}



.blog-sidebar {

    position: sticky;

    top: 30%
}



.blog-card {

    border-radius: 8px;

    position: relative;

    box-shadow: 0 0 12px 1px #ddd;

    height: 100%;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    cursor: pointer;

    padding: 20px;

    background: #fff;

}



.blog-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 20px rgb(0 0 0 / .15)
}



.blog-card .blog-thumbnail {

    height: 160px;

    position: relative;

    overflow: hidden;

    margin-bottom: 30px;

}



.blog-card .blog-thumbnail img {

    border-radius: 8px;

    object-fit: cover;

    height: 100%;

    width: 100%;

    transition: transform 0.4s ease-in-out
}



.blog-card:hover .blog-thumbnail img {

    transform: scale(1.1)
}



.blog-card .blog-thumbnail::after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgb(0 0 0 / .4);

    opacity: 0;

    transition: opacity 0.4s ease-in-out;

    border-radius: 8px
}



.blog-card:hover .blog-thumbnail::after {

    opacity: 1
}



.blog-card .blog-content {

    padding: 0;

    border-radius: 8px;

    width: 100%;

    position: relative;

    background: #fff;

    display: flex;

    align-items: end;

    transition: background 0.3s ease-in-out
}



.blog-card .blog-title h6 {

    line-height: 1.2
}



.blog-card .blog-title a {

    font-size: 18px;

    color: #333;

    font-weight: 600;

    text-decoration: none;

    transition: color 0.3s ease-in-out
}



.blog-card .blog-title>a {

    color: var(--primary-color);

}



.blog-card:hover .blog-title a {

    color: var(--primary-color)
}



.blog-card .post-meta {

    margin-top: auto;

    font-size: 12px;

    transition: color 0.3s ease-in-out;

    width: fit-content;

    background: var(--secondary-color);

    color: #fff;

    padding: 10px;

    border-radius: 100px;

    position: absolute;

    top: 160px;

    left: 30px;

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

}



.blog-card .post-meta li {

    display: flex;

    align-items: center;

    gap: 10px
}



.blog-details {

    padding: 200px 0 60px;

}



.blog-single-post {

    position: relative;

    margin-bottom: 40px
}



.blog-single-post.blog-salah .image img {

    width: auto;

    height: 500px
}



.blog-single-post .image {

    position: relative;

    overflow: hidden;

    margin-bottom: 30px
}



.blog-single-post .image img {

    width: 100%
}



.blog-single-post .lower-content {

    position: relative;

    padding: 30px;

    border: 1px solid #ebf2f3;

    border-top: 0;

    border-radius: 5px
}



.blog-single-post ul.post-meta {

    position: relative;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    font-size: 14px;

    margin-bottom: 13px
}



.blog-single-post .post-meta li {

    margin-right: 15px;

    padding-right: 15px;

    font-weight: 600;

    border-right: 1px solid #ddd
}



.blog-single-post .post-meta li i {

    margin-right: 8px;

    color: var(--primary-color)
}



.blog-single-post .post-meta li:last-child {

    border-right: 0
}



.blog-single-post h1 {

    position: relative;

    font-size: 30px;

    line-height: 44px;

    font-weight: 700;

    margin-bottom: 15px;

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



.blog-single-post h3 {

    position: relative;

    font-size: 28px;

    line-height: 42px;

    font-weight: 700;

    margin-bottom: 15px;

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



.blog-single-post .text {

    margin-bottom: 40px
}



.blog-single-post .text ul {

    padding-left: 0;

    margin-bottom: 10px;

}



.blog-single-post .text ul li {

    list-style: none;

    margin-bottom: 10px;

    position: relative;

    padding-left: 30px
}



.blog-single-post .text ul li:before {

    content: "\ea41";

    position: absolute;

    top: 0px;

    left: 0;

    width: 18px;

    height: 18px;

    background-size: cover;

    background-position: center;

    opacity: 1
}



.blog-single-post .text ol li {

    list-style: inherit;

    margin-bottom: 10px;

    color: var(--secondary-color)
}



.blog-single-post .text h2 {

    position: relative;

    font-size: 28px;

    line-height: 44px;

    font-weight: 700;

    font-family: inherit;

    margin-bottom: 15px
}



.blog-single-post .text h3 {

    position: relative;

    font-size: 30px;

    line-height: 40px;

    font-weight: 700;

    font-family: inherit;

    margin-bottom: 15px;

    margin-top: 20px;

}



.blog-single-post .text h4 {

    position: relative;

    font-size: 22px;

    line-height: 40px;

    font-weight: 700;

    font-family: inherit;

    margin-bottom: 15px
}



.blog-single-post .text h5 {

    position: relative;

    font-size: 20px;

    line-height: 40px;

    font-weight: 700;

    font-family: inherit;

    margin-bottom: 15px
}



.blog-single-post .text h6 {

    position: relative;

    font-size: 18px;

    line-height: 30px;

    font-weight: 700;

    font-family: inherit;

    margin-bottom: 15px
}



.blog-single-post .text table tr th,

.blog-single-post .text table tr td {

    border: 2px solid #ddd;

    padding: 8px 10px;

    font-size: 14px;

    font-weight: 500
}



.blog-single-post .text table tr th {

    font-weight: 700
}



.blog-single-post blockquote {

    position: relative;

    padding-left: 30px;

    font-size: 14px;

    color: #565872;

    margin-bottom: 30px
}



.blog-single-post blockquote:before {

    position: absolute;

    content: '';

    top: 0;

    width: 8px;

    bottom: 0;

    background: var(--primary-color);

    left: 0;

    border-radius: 5px
}



.widget {

    position: relative;

    margin-bottom: 50px
}



.widget_popular_post {

    position: relative;

    max-width: 350px;

    margin-left: auto
}



.widget .widget-title {

    position: relative;

    font-size: 20px;

    color: var(--primary-color);

    margin-bottom: 20px;

    font-weight: 600
}



.widget_popular_post .post-thumb {

    position: relative;

    margin-right: 15px;

    margin-bottom: 0;

    overflow: hidden
}



.widget_popular_post .post-thumb:before {

    position: absolute;

    top: 50%;

    left: 50%;

    display: block;

    content: '';

    width: 0;

    height: 0;

    background: rgb(16 34 53/59%);

    border-radius: 50%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    opacity: 0;

    z-index: 10;

    pointer-events: none;

    transition: all .3s ease-in
}



.widget_popular_post .post-thumb:hover:before {

    opacity: 1;

    width: 100%;

    height: 100%;

    border-radius: 0;

    -webkit-animation: circle .75s;

    animation: circle .75s
}



.widget_popular_post .post-thumb img {

    border-radius: 5px;

    float: left;

    height: 60px;

    width: 60px;

    object-fit: cover
}



.widget_popular_post .post {

    position: relative;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    margin-bottom: 20px;

    border: 1px solid #e3e3e3;

    padding-bottom: 17px;

    padding: 14px;

    border-radius: 5px
}



.widget_popular_post .post:last-child {

    margin-bottom: 0
}



.widget_popular_post .content {

    position: relative;

    width: calc(100% - 75px)
}



.widget_popular_post .content h5 {

    position: relative;

    font-size: 14px;

    margin-bottom: 3px;

    font-weight: 600;

    font-family: inherit
}



.widget_popular_post .content h5 a {

    transition: .5s
}



.widget_popular_post .content h5 a:hover {

    color: var(--primary-color)
}



.widget_popular_post .content .post-info {

    font-size: 14px;

}



.widget_popular_post .content .post-info i {

    margin-right: 4px;

    color: var(--primary-color)
}





/* faq */



.faq-section .faq-items a.nav-link .icon-title {

    display: flex;

    align-items: center;

    width: 100%;

    gap: 10px;

}





.faq-section .faq-items a.nav-link .icon-title .icon {

    width: 50px;

    height: 50px;

    min-width: 50px;

    min-height: 50px;

    max-width: 50px;

    max-height: 50px;

    background: #fff;

    padding: 8px;

    border-radius: 50%;

}



.faq-section .faq-items a.nav-link.active .icon-title .icon {

    background: #fff;

}



.faq-section .faq-items a.nav-link.active .icon-title .icon img {

    filter: brightness(0) saturate(100%) invert(10%) sepia(87%) saturate(4132%) hue-rotate(230deg) brightness(95%) contrast(96%);

}



.faq-section .faq-items a.nav-link {

    border: 1px solid #ddd;

    border-radius: 6px;

}



.faq-section .faq-items a.nav-link .icon-title span {

    font-size: 16px !important;

    font-weight: 600 !important;

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

}



.faq-section .faq-items a.nav-link.active .icon-title span {

    color: #fff;

}



.faq-section .faq-items a.nav-link.active {

    background: var(--secondary-color);

}





.faq-section .faq-items a.nav-link .icon-title .icon {

    background: var(--secondary-color);

}



.faq-section .faq-items a.nav-link .icon-title .icon img {

    filter: brightness(0) saturate(100%) invert(97%) sepia(99%) saturate(0%) hue-rotate(175deg) brightness(109%) contrast(101%);

}



.faq-section .faq-items .accordion-item .accordion-header {}



.faq-section .accordion-item>.accordion-header .accordion-button {

    font-weight: 700;

    background: none;

}



.faq-section .accordion-item>.accordion-header .accordion-button:not(.collapsed) {

    border-top-left-radius: 0px !important;

    border-top-right-radius: 0px !important;

    background: transparent;

    color: var(--secondary-color);

}



.faq-section .accordion-item>.accordion-header .accordion-button:hover {

    color: var(--secondary-color);

}



.faq-section .accordion-button:not(.collapsed) {

    box-shadow: none !important;

}





.faq-section .accordion-item {

    border: 1px solid #ddd;

    border-radius: 8px;

}



.faq-section .accordion-button::after {

    content: "\ebc0";

    background: none;

    font-family: boxicons !important;

}



.faq-section .accordion-body {

    padding-top: 0;

}







/* blog page */



.banner-top {

    padding: 200px 0 80px 0 !important;

}



.banner-top .content-box>span {

    background: var(--secondary-color);

    padding: 6px 16px;

    border-radius: 100px;

    color: #fff;

    margin-bottom: 20px;

    display: inline-block;

}





.mission-vision .mision-vision-items .image img {

    border-radius: 10px;

}



.mission-vision .mv-items-box .icon img {

    max-width: 60px;

    margin: auto;

    display: block;

}





.mission-vision .mision-vision-items .mv-items-box .content-box h5 {

    font-weight: 700;

    margin-bottom: 10px;

    font-size: 24px;

}





.doctor-sec .content-box .heading h4 {

    font-size: 30px;

    font-weight: 600;

    line-height: 44px;

}



.doctor-sec .subheading h5 {

    font-weight: 600;

    color: var(--secondary-color);

}





.doctor-tabs-section button {

    width: 100%;

    text-align: start;

    padding: 14px;

    border: 1px solid #ddd;

    color: #333;

    font-weight: 600;

}



.doctor-tabs-section button.active {

    border-color: var(--secondary-color) !important;

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

}



.doctor-tabs-section .content-box h3 {

    margin-bottom: 10px;

    font-weight: 600;

}





/* contact */

.location-contact {

    margin-bottom: 150px;

}



.location-contact .inner-box {

    padding: 30px;

    border: 1px solid #ddd;

    border-radius: 10px;

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

    position: absolute;

    left: 0;

    right: 0;

    margin: auto;

    top: -40px;

    background: #fff;

    min-width: 600px;

    max-width: 1000px;

}



.location-contact .location-box iframe {

    border-radius: 10px;

}



.inquiry-form {

    background: linear-gradient(145deg, rgba(18, 48, 156, 0.5), rgba(125, 61, 145, 0.5));

    background-size: 200% 200%;

    animation: gradientMove 2s ease infinite;

}



@keyframes gradientMove {

    0% {

        background-position: 0% 50%;

    }



    50% {

        background-position: 100% 50%;

    }



    100% {

        background-position: 0% 50%;

    }

}





a,

button,

.page-btn a,

.service-item-box,

.blog-card,

.social-btn .btn-smo {

    transition: all 0.3s ease-in-out;

}



@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(20px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes zoomIn {

    from {

        opacity: 0;

        transform: scale(0.9);

    }



    to {

        opacity: 1;

        transform: scale(1);

    }

}



.main-banner .content-box,

.banner-top .content-box {

    animation: fadeInUp 1s ease-out forwards;

}



.service-items .service-item-box {

    animation: zoomIn 0.6s ease-in-out;

}



.page-btn a:hover {

    background: linear-gradient(145deg, #F06739, #e05628);

    color: #fff;

    transform: scale(0.95);

}



.service-item-box .icon:hover,

.f-social ul li a:hover {

    transform: rotate(15deg) scale(1.1);

    transition: transform 0.3s ease-in-out;

}



.nav-box nav ul li a::after {

    content: "";

    display: block;

    height: 2px;

    background: var(--primary-color);

    transition: width 0.3s;

    width: 0;

    margin-top: 5px;

}



.nav-box nav ul li a:hover::after {

    width: 100%;

}



@keyframes pulse {

    0% {

        box-shadow: 0 0 0 0 rgba(240, 103, 57, 0.7);

    }



    70% {

        box-shadow: 0 0 0 10px rgba(240, 103, 57, 0);

    }



    100% {

        box-shadow: 0 0 0 0 rgba(240, 103, 57, 0);

    }

}



.page-btn a:hover {

    animation: pulse 0.5s infinite;

}



/* service */



.services-banner .content-box .heading h1 {
    font-size: 20px;
    color: var(--tertiary-color);
}


.services-banner .content-box .subheading h2 {
    font-size: 38px;
    font-weight: 600;
    line-height: 42px;
    margin-bottom: 14px;
}





.banner-boxes .icon-box {

    background-color: #ffffff;

    border: 1px solid #e0e0e0;

    padding: 20px;

    transition: all 0.3s ease;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;
    height: 100%;

}



.banner-boxes .icon-box img {

    max-width: 34px;

    height: auto;

    margin-bottom: 15px;

}



.banner-boxes .icon-box h6 {

    font-size: 14px;

    margin-bottom: 8px;

    color: #333333;

}



.banner-boxes .icon-box:hover {

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);

    transform: translateY(-4px);

}





.general-consultation-section {

    padding: 120px 0 80px 0 !important;

}



.general-consultation-section .badge {

    background: var(--secondary-color);

}



.we-treat {

    background: #EBF2F8;

}



.we-treat .info-box {

    background: #fff;

    border-radius: 12px;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.we-treat .info-box:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);

}



.we-treat .info-box .icon {

    width: 60px;

    margin: auto;

    margin-bottom: 14px;

}





.we-treat .content-box h6 {

    font-size: 24px;

    text-align: center;

    font-weight: 600;

}





.visit-steps .icon {

    width: 50px;

    margin: auto;

    margin-bottom: 10px;

}



.visit-steps .step {

    border: 1px solid #eee;

    padding: 20px;

    border-radius: 6px;

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

}



.visit-steps .visiting-step-items .step:last-child,

.visit-steps .visiting-step-items .step:nth-child(9),

.visit-steps .visiting-step-items .col-lg-1:nth-child(10) {

    margin-top: 60px;

}



.call-action-pitch .page-btn a {

    background: #fff;

    color: #333;

    box-shadow: none;

}





/* === Vertical Tab Navigation === */

#has-ug .tab-nav .nav-link {

    padding: 12px 20px;

    margin-bottom: 6px;

    border-left: 4px solid transparent;

    background-color: #f1f5f9;

    color: #333;

    font-weight: 500;

    border-radius: 0 8px 8px 0;

    transition: all 0.3s ease;

}



#has-ug .tab-nav .nav-link:hover {

    background-color: #e2e8f0;

    color: var(--secondary-color);

}



#has-ug .tab-nav .nav-link.active {

    background-color: #e0f0ff;

    border-left-color: var(--secondary-color);

    color: var(--secondary-color);

    font-weight: 600;

}



/* === Tab Content Area === */

#has-ug .tab-content>div {

    scroll-margin-top: 100px;

    background-color: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 8px;

    padding: 30px;

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

    transition: all 0.2s ease-in-out;

    border-bottom: 4px solid var(--secondary-color);

}



#has-ug .tab-content h4 {

    font-size: 1.5rem;

    font-weight: 600;

    margin-bottom: 1rem;

    color: #111827;

}



#has-ug .tab-content p {

    font-size: 1rem;

    line-height: 1.7;

    margin-bottom: 1rem;

}

#has-ug .tab-content ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0;
}

#has-ug .tab-content ul li {
    padding-left: 30px;
    position: relative;
    font-weight: 500;
    line-height: 28px;
}

#has-ug .tab-content ul li::before {
    content: "\ea41";
    color: var(--primary-color);
    font-family: boxicons !important;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    font-size: 24px;
    display: flex;
    align-items: start;
}




/* === Responsive Adjustments === */

@media (max-width: 767px) {

    #has-ug .tab-nav {

        margin-bottom: 30px;

    }



    #has-ug .tab-nav .nav-link {

        border-left: none;

        border-radius: 6px;

        padding: 10px 15px;

    }

}





.gallery-image img {

    margin: auto;

    height: 300px !important;

    object-fit: cover !important;

    display: block;

    object-position: top;

}



.gallery-image .overlayer {

    border-radius: 10px;

    width: 100%;

    height: 100%;

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

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    opacity: 0;

    padding: 15px;

    transform: scale(.5);

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

    margin: auto;

}



.gallery-image:hover .overlayer {

    opacity: 1;

    transform: scale(1);

}



.gallery-image .overlayer i {

    font-size: 50px;

    color: #fff;

    rotate: 45deg;

    margin-bottom: 10px;

}



.gallery-image .lightbox-image {

    position: relative;

}





.fixed-action-buttons {

    position: fixed;

    bottom: 20px;

    right: 20px;

    z-index: 777;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    animation: slideInRight 0.6s ease-out both;

}



.fixed-action-buttons .btn {

    width: 160px;

    text-align: left;

    border-radius: 50px;

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

    transition: transform 0.3s;

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 18px;

    color: #fff;



}



.fixed-action-buttons .btn i {

    font-size: 22px;

}



.fixed-action-buttons .btn:hover {

    transform: scale(1.05);

}


@media (max-width:767px) {
    .fixed-action-buttons {
        bottom: 80px;
    }

    .fixed-action-buttons a span {
        display: none;
    }

    .fixed-action-buttons .btn {
        width: 50px;
        height: 50px;
        justify-content: center;
    }

    .fixed-action-buttons .btn i {
        margin: 0 !important;
    }
}



@keyframes slideInRight {

    from {

        transform: translateX(100%);

        opacity: 0;

    }



    to {

        transform: translateX(0);

        opacity: 1;

    }

}






.promo-box {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 10px;
}

.promo-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    border: 1px solid transparent;
}

.promo-box .price {
    color: var(--secondary-color);
    font-size: 20px;
}

.promo-box .image img {
    border-radius: 6px;
}

.promo-box .plan-overlay-box {
    position: relative;
}

.promo-box .plan-overlay-box .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.promo-box .plan-overlay-box:hover .overlay {
    opacity: 1;
}




/* Modal Styling */
#appointmentModal .modal-content {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 30px 50px rgba(0, 0, 0, 0.3);
    background: #fefefe;
}

/* Left Side (Content) */
#appointmentModal .modal-content .col-md-5 {
    background: linear-gradient(135deg, var(--secondary-color), var(--tertiary-color));
    color: #fff;
    padding: 40px 30px;
}

#appointmentModal .modal-content .col-md-5 h3 {
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 15px;
}

#appointmentModal .modal-content .col-md-5 p {
    font-size: 0.95rem;
    line-height: 1.6;
}

#appointmentModal .appointment-left {
    background: linear-gradient(135deg, #007bff, #004aad);
    color: #fff;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

#appointmentModal .feature-box {
    font-size: 0.95rem;
    font-weight: 500;
    color: #fff;
}

#appointmentModal .icon-box {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
}

#appointmentModal .icon-box i {
    color: var(--secondary-color);
}


/* Right Side (Form) */
#appointmentModal .modal-header {
    background: transparent;
    border: none;
    padding-bottom: 0;
}

#appointmentModal .modal-title {
    font-weight: 600;
    color: #333;
    font-size: 1.4rem;
}

#appointmentModal .btn-close {
    background-color: #e9ecef;
    border-radius: 50%;
    padding: 6px;
}

#appointmentModal .modal-body {
    padding-top: 0;
}

/* Form Container */
#appointmentModal .modal-body .wpcf7-form {
    padding-top: 10px;
}

/* Input with Icon */
.input-with-icon {
    padding-left: 40px;
    border-radius: 8px;
    border: 1px solid #ccc;
    transition: border-color 0.3s ease;
}

.input-with-icon:focus {
    border-color: #007bff;
    outline: none;
}


/* Icons inside input */
.icon-input {
    position: absolute;
    top: 44%;
    left: 22px;
    transform: translateY(-50%);
    color: #333;
    font-size: 20px;
    pointer-events: none;
    z-index: 4;
}

.icon-input.bx-message-detail {
    top: 20%;
}

/* Textarea styling */
.wpcf7-form textarea {
    resize: none;
    height: 140px;
}

/* Spinner hidden until needed */
.wpcf7-spinner {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}

/* Response output style */
.wpcf7-response-output {
    margin-top: 15px;
    font-size: 0.95rem;
}

/* Optional: animate field focus */
.wpcf7-form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(30, 144, 255, 0.2);
}

.healthcare-box {
    /* background: url('/wp-content/uploads/2025/06/modal-healthcare-bg.webp') no-repeat center center; */
    background-size: cover;
    border-radius: 12px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    margin-top: 8px;
}

.healthcare-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    border-radius: 12px;
}

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

.healthcare-box h4 {
    font-size: 1.5rem;
}

.healthcare-box p {
    font-size: 0.95rem;
    opacity: 0.9;
}


.mobile-banner .doctor-image {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    background: #fff;
    margin: 60px auto 0 auto;
    display: block;
    overflow: hidden;
    border: 2px solid var(--primary-color);
}

.mobile-banner .doctor-image img {
    transform: scale(1.3) translateX(-4px);
}

section.mobile-banner .content-box h1 {
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    margin-top: 10px;
    color: var(--primary-color);
}

.mobile-banner .content-box h2 {
    text-align: center;
    font-weight: 500;
    font-size: 22px;
    margin-top: 10px;
}

.mobile-banner .content-box h3 {
    font-size: 16px;
    font-weight: 800;
    text-align: center;
    margin-top: 10px;
}

.mobile-banner .content-box span {
    text-align: center;
    font-weight: 800;
    font-size: 16px;
    color: var(--secondary-color);
    margin-top: 10px;
    display: inline-block;
}

.mobile-banner .banner-box .box-item {
    flex-direction: column;
    gap: 4px;
    padding: 14px;
}

.mobile-banner .banner-box .box-item .title h4 {
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
    text-align: center;
    margin-top: 8px;
}