@import url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css");
@import url('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');
@import url('color.css');
@import url('fonts.css');
@import url('style.css');

/*header page css here*/

header.fixed-bar{background: var(--color-gry-800);}

/*home page css here*/
.error{color: var(--color-status-error-900);}
.banner-inner{background:url(../images/banner.png) no-repeat; background-size: cover; border-radius: 30px;}
.consult-online-list ul li{background: var(--color-gry-800);}
.about-us-section{background: var(--color-gry-800);}

.work-box{background: var(--color-gry-800);}

.products-section{background: url(../images/product-shape.svg) no-repeat top center var(--color-primary-900); background-size: cover;}
.section-head span.bg-white{color: var(--color-primary-900);}
.product-box{background: var(--color-primary-800);}

.doctors-section{background: var(--color-gry-800);}

.why-cutiscity-list li{background: var(--color-gry-800);}
.why-cutiscity-list li p{color: var(--color-gry-200);}
.cutcity-cta-section{background: url(../images/cta-bg.png) no-repeat; background-size: cover;}

.min-date span{color: var(--color-gry-200);}
.min-date span:before{content: ''; width: 6px; display: inline-block; height: 6px; border-radius: 50px; background: var(--color-primary-900); margin-right: 10px;}
.min-date span:first-child::before{display: none;}

.blog-section{background: var(--color-gry-800);}
.blog-box{background: var(--color-gry-700);}

.contact-us-section{background: url(../images/contact-shape.png) no-repeat top center; background-size:100% auto;}

/*footer css here*/

footer{background: var(--color-gry-900); border-color: var(--color-gry-700);}
.footer-bottom{border-top: solid 1px var(--color-gry-700); padding: 20px 0px;}

/*form css here*/

.form-image-box{border-color: var(--color-primary-900);}
.form-footer p{color: var(--color-gry-100);}
.form-footer p a{color: var(--color-primary-900);}
.form-fild-bg h3 a{color: var(--color-primary-900);}

/*about page css here*/

.page-heading-inner{background: var(--color-gry-800); border-radius: 20px;}
.breadcrumb li a{position: relative;}
.breadcrumb li a:after{content: ''; margin-left: 8px; width: 8px; height: 8px; display: inline-block; border-radius: 50px; background: var(--color-primary-900);}
.breadcrumb li:last-child a:after{display: none;}
.breadcrumb li.active a{color: var(--color-primary-900);}
.caring-step-section .section-head p{color: var(--color-gry-100);}
.about-dermatology-des p{color: var(--color-gry-100);}
.our-mission-section{background: var(--color-primary-900);}
.our-mission-des p{color: var(--color-gry-100);}

/*inner-header*/
.inner-header{padding-left: 260px; transition: all 0.3s ease-in-out; background: var(--color-gry-800); z-index: 99;}
.inner-header .header-inner{padding: 15px 30px;}
.notifuction-head-box a span{background: var(--color-status-error-900);}
.user-head-box{background: var(--color-gry-700);}
.user-head-box img{width: 36px; height: 36px; object-fit: cover; border-radius: 12px;}
.dropdown-show{background: var(--color-gry-600);}
.menu-toggel{transition: all 0.3s ease-in-out;}
.notifuction-head-box a{background: var(--color-gry-700);}
.inner-header .dropdown-show{min-width: 200px;}



/*sidebar css here*/

.sidebar-bg{width: 260px; flex:0 0 260px; max-width: 260px; background: var(--color-gry-800); transition: all 0.3s ease-in-out; z-index: 101;}
.sidebar-logo{padding: 15px;}
.sidebar-menu-box ul li a{padding: 10px 15px; border-radius: 8px; display: flex; gap: 10px; align-items: center;}
.sidebar-menu-box ul li a i{font-size: 26px;}
.sidebar-menu-box ul li a:hover{background: var(--color-gry-900);}
.sidebar-menu-box ul li.active a{background: var(--color-primary-900); color: var(--white);}

/*my profile page css here*/

.page-warper-sidebar{padding-left: 260px; padding-right: 0px; padding-bottom: 30px; padding-top: 82px;}
.hide-sidebar .page-warper-sidebar{padding: 82px 30px 30px 30px;}
.hide-sidebar .sidebar-bg{left: -100%;}
.hide-sidebar header{padding-left: 0px;}
.page-content{padding:30px 30px 30px 30px;}
.hide-sidebar .page-content{padding:30px 0 0 0;}
.card{padding: 30px; border-radius: 16px; background: var(--color-gry-800);}

/*my appointment page css here*/

.tab-head button{background: var(--color-gry-700);}
.tab-head button.active{background: var(--color-primary-900); color: var(--white);}

/*select user page css here*/

.select-user-content{background: var(--color-gry-800);}
.patient-box figure{background: var(--color-gry-700);}
.doctor-box figure{background: var(--color-primary-900);}

/*bog page css here*/

.blog-card{background: var(--color-gry-800);}
.pagination a{background: var(--color-gry-700); color: var(--white);}
.pagination a.active{background: var(--color-primary-900);}
.pagination a:hover{background: var(--color-primary-900);}
.blog-tags{border-color: var(--color-gry-600);}

.author-box{background: var(--color-gry-800);}