/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : Primecare - Dentist & Dental Clinic HTML Template
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. CTA Box css
06. About Us css
07. Our Services css
08. Our Process css
09. Why Choose Us css
11. We Provide css
12. Our Team css
13. Our Blog Css
14. Contact Us css
15. Footer css
16. About us Page css
17. Services Page css
18. Service Single css
19. Blog Archive css
20. Blog Single css
21. Page Doctor css
22. Doctor Single css
23. Gallery Page css
25. Page FAQs css
26. Contact us Page css
27. Page Book Appointment css
28. 404 Page css
29. responsive css
30. our css
31. Smile Simulation css
-------------------------------------------------------------------------------------- */

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

:root {
  --primary-color: #0e384c;
  --secondary-color: #f9fcff;
  --text-color: #527282;
  --accent-color: #1e84b5;
  --white-color: #ffffff;
  --divider-color: #0e384c12;
  --dark-divider-color: #ffffff1f;
  --error-color: rgb(230, 87, 87);
  --default-font: "Onest", sans-serif;
  --bg-color-dub: #0E384C;
  --bg-dark-white: #fdfdfd;
}

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

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 700;
  line-height: 1.2em;
  color: var(--white-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 {
  max-height: 35rem;
  width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  -webkit-transform-origin: left;
  transform-origin: left;
  border-radius: 40px;
}

.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;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1em;
  text-transform: capitalize;
  background: var(--accent-color);
  color: var(--white-color);
  border-radius: 14px;
  padding: 17px 60px 17px 18px;
  border: none;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
  z-index: 1;
}

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

.btn-default::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-image: url("../images/btn-arrow.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 16px auto;
  transform: translate(-30px, -50%);
  transition: all 0.4s ease-in-out;
}

.btn-default:hover::before {
  transform: translate(-27px, -50%);
}

.btn-default::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 0;
  top: 50%;
  left: 50%;
  background: var(--primary-color);
  opacity: 0;
  z-index: -1;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(90deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(90deg);
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
  transition: all 0.6s ease-in-out;
}

.btn-default:hover:after {
  height: 450%;
  opacity: 1;
}

.btn-default.btn-highlighted {
  border: 1px solid var(--accent-color);
  padding: 16px 60px 16px 18px;
}

.btn-default.btn-highlighted:hover {
  border-color: var(--dark-divider-color);
}

/*#magic-cursor {
  position: absolute;
  width: 10px !important;
  height: 10px !important;
  pointer-events: none;
  z-index: 1000000;
}*/

#ball {
  position: fixed;
  display: block;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  width: 8px !important;
  height: 8px !important;
  background: var(--accent-color);
  margin: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 1 !important;
}

.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(--bg-color-dub) transparent var(--bg-color-dub);
  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: 60px;
}

.section-row .section-title {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 0;
}

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

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

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

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

.section-title h1 {
  font-size: 56px;
  font-weight: 700;
  margin-bottom: 0;
  cursor: none;
}

.section-title h2 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 0;
  cursor: none;
}

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

.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 {
  background-color: var(--primary-color);
  border-bottom: 1px solid var(--bs-secondary-bg-subtle);
  position: relative;
  z-index: 100;
}

header.main-header .header-sticky {
  position: relative;
  top: 0;
  z-index: 100;
}

header.main-header .header-sticky.hide {
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
  border-radius: 0;
}

header.main-header .header-sticky.active {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  border-radius: 0;
  transform: translateY(0);
  background: var(--primary-color);
  border-bottom: 1px solid var(--dark-divider-color);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}

.navbar {
  padding: 24px 0;
  align-items: center;
  background-color: #EFF8FF;
}

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

.navbar-brand img {
  max-width: 10rem;
}

.main-menu .nav-menu-wrapper {
  flex: 1;
  text-align: center;
}

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

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

.main-menu ul li a {
  font-size: 16px;
  font-weight: 600;
  padding: 14px 10px !important;
  color: var(--bg-color-dub);
  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(--accent-color);
}

.main-menu ul ul {
  visibility: hidden;
  opacity: 0;
  transform: scaleY(0.8);
  transform-origin: top;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 220px;
  border-radius: 20px;
  position: absolute;
  left: 0;
  top: 100%;
  overflow: hidden;
  background: rgba(30, 132, 181, 0.80);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(30, 132, 181, 0.39);
  transition: all 0.3s ease-in-out;
  text-align: left;
}

.main-menu ul li.submenu:first-child ul {
  width: 220px;
}

.main-menu ul ul ul {
  left: 100%;
  top: 0;
  text-align: left;
}

.main-menu ul ul li {
  margin: 0;
  padding: 0;
}

.main-menu ul ul li a {
  color: var(--white-color);
  padding: 8px 20px !important;
  transition: all 0.3s ease-in-out;
  border-bottom: 1px solid var(--dark-divider-color);
}

.main-menu ul li:hover>ul {
  visibility: visible;
  opacity: 1;
  transform: scaleY(1);
  padding: 5px 0;
}

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus {
  color: var(--white-color);
  background: rgba(19, 83, 112, 0.8);
  padding: 8px 20px 8px 23px !important;
}

.main-menu ul li.highlighted-menu {
  display: none;
}

.responsive-menu,
.navbar-toggle {
  display: none;
}

.responsive-menu {
  top: 0;
  position: relative;
}

.slicknav_btn {
  background: var(--accent-color);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  border-radius: 8px;
}

.slicknav_icon .slicknav_icon-bar {
  display: block;
  width: 100%;
  height: 3px;
  width: 22px;
  background-color: var(--bg-color-dub);
  border-radius: 6px;
  margin: 4px auto !important;
  transition: all 0.1s ease-in-out;
}

.slicknav_icon .slicknav_icon-bar:first-child {
  margin-top: 0 !important;
}

.slicknav_icon .slicknav_icon-bar:last-child {
  margin-bottom: 0 !important;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 5px);
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(2) {
  opacity: 0;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -5px);
}

.slicknav_menu {
  position: absolute;
  width: 100%;
  padding: 0;
  background: var(--accent-color);
}

.slicknav_menu ul {
  margin: 5px 0;
}

.slicknav_menu ul ul {
  margin: 0;
}

.slicknav_nav .slicknav_row,
.slicknav_nav li a {
  position: relative;
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
  padding: 10px 20px;
  color: var(--bg-color-dub);
  line-height: normal;
  margin: 0;
  border-radius: 0 !important;
  transition: all 0.3s ease-in-out;
}

.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover {
  background-color: transparent;
  color: var(--primary-color);
}

.slicknav_menu ul ul li a {
  padding: 10px 20px 10px 30px;
}

.slicknav_arrow {
  font-size: 0 !important;
}

.slicknav_arrow:after {
  content: "\f107";
  font-family: "FontAwesome";
  font-weight: 900;
  font-size: 12px;
  margin-left: 8px;
  color: var(--bg-color-dub);
  position: absolute;
  right: 15px;
  top: 15px;
  transition: all 0.3s ease-out;
}

.slicknav_open>a .slicknav_arrow:after {
  transform: rotate(-180deg);
  color: var(--primary-color);
}

/*************************************/
/*** 31. Smile Simulation css      ***/
/*************************************/

/* 1. Ana Bölüm Arka Planı ve Genel Renkler */
.smile-simulation {
  padding: 100px 0;
  border-bottom: 1px solid var(--divider-color);
  background-color: var(--white-color);
  /* İstenilen hafif koyu beyaz */
}

/* Genel metin renkleri (Primary Color) */
.smile-simulation h1,
.smile-simulation h2,
.smile-simulation h3,
.smile-simulation p {
  color: var(--primary-color);
}

/* Sol Taraftaki İçerik Düzeni */
.smile-simulation-content {
  margin-right: 30px;
}

.smile-simulation-content h2 {
  font-size: 40px;
  margin-bottom: 20px;
  line-height: 1.2em;
}

.smile-simulation-content p {
  margin-bottom: 30px;
  font-size: 16px;
  opacity: 0.9;
}

/* 2. İletişim Kartı (Contact Card) - Koyu Arka Plan, Beyaz Yazı */
.smile-simulation-contact.card-style-box {
  background-color: var(--primary-color);
  /* Koyu Lacivert Arka Plan */
  padding: 40px;
  border-radius: 30px;
  box-shadow: 0 15px 40px rgba(14, 56, 76, 0.2);
  border: none;
  margin-top: 30px;
  position: relative;
  overflow: hidden;
}

/* Kartın içindeki Başlıklar (Beyaz) */
.smile-simulation-contact .smile-simulation-content-box h3 {
  color: var(--white-color) !important;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

/* Kartın içindeki Paragraflar ve Linkler (Hafif Şeffaf Beyaz) */
.smile-simulation-contact .smile-simulation-content-box p,
.smile-simulation-contact .smile-simulation-content-box p a {
  color: rgba(255, 255, 255, 0.8) !important;
  /* Hafif şeffaf beyaz */
  margin: 0;
  font-size: 15px;
  line-height: 1.5em;
  font-weight: 400;
}

.smile-simulation-contact .smile-simulation-content-box p a:hover {
  color: var(--white-color) !important;
  text-decoration: underline;
}

/* İletişim Kartı İçindeki İkon Kutuları */
.smile-simulation-item .icon-box {
  width: 60px;
  height: 60px;
  min-width: 60px;
  background: rgba(255, 255, 255, 0.1);
  /* Koyu zemin üzerinde şeffaf beyaz */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* İkonların Rengi (Beyaz yapıyoruz) */
.smile-simulation-item .icon-box img {
  width: 24px;
  filter: brightness(0) invert(1);
  /* İkonu beyaza çevir */
  transition: all 0.3s ease;
}


/* Genel Öğe Hizalaması */
.smile-simulation-item {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 10px;
}

/* Responsive Düzenlemeler */
@media (max-width: 991px) {
  .smile-simulation-content {
    margin-right: 0;
    text-align: center;
    margin-bottom: 30px;
  }

  .smile-simulation h2 .split-line {
    text-align: center;
  }

  .smile-simulation-contact.card-style-box {
    padding: 30px 20px;
  }

  .smile-simulation-item {
    flex-direction: column;
    text-align: center;
    margin-bottom: 30px;
  }

  .smile-simulation-content.section-btn {
    text-align: center;
  }
}

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

.hero {
  padding: 60px 0;
  background: url("../images/section-bg-shape.svg"), var(--primary-color);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: auto;
  background-color: #EFF8FF;
}

.hero.bg-image {
  position: relative;
  background: url("../images/hero-bg.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.hero.bg-image::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--primary-color);
  opacity: 60%;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero.bg-image.hero-video {
  position: relative;
  overflow: hidden;
}

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

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

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

.hero.bg-image.hero-slider-layout .hero-slide {
  position: relative;
  padding: 120px 0;
}

.hero.bg-image.hero-slider-layout .hero-slide::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--primary-color);
  opacity: 60%;
  width: 100%;
  height: 100%;
  z-index: 1;
}

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

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

.hero.bg-image.hero-slider-layout .hero-pagination {
  position: absolute;
  bottom: 40px;
  text-align: center;
  z-index: 2;
}

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

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

.hero.bg-image .hero-content {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  z-index: 2;
}

.hero.bg-image .hero-content .section-title p {
  color: var(--bg-color-dub);
  max-width: 470px;
  margin: 0 auto;
  margin-top: 20px;
}

.hero.bg-image .hero-content .section-title h1 {
  font-size: 80px;
}

.hero-content {
  margin-right: 8px;
}

.hero-content .section-title h1 {
  color: var(--bg-color-dub);
}

.hero-content .section-title p {
  color: var(--bg-color-dub);
  max-width: 470px;
}

.hero-content-body {
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--dark-divider-color);
}

.hero-images {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-left: 30px;
}

.hero-image-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.hero-img-1 {
  width: 100%;
}


.hero-img-1 figure {
  display: block;
  width: 100%;
  border-radius: 40px;
  transform: scale(1.15);
  transform-origin: center center;
}

/* Hero Mobile Responsive */
@media (max-width: 991px) {
  .hero {
    padding: 40px 0;
  }

  .hero-content {
    text-align: center;
    margin-right: 0;
    margin-bottom: 40px;
  }

  .hero-content .section-title h1 {
    font-size: 36px;
    text-align: center;
  }

  .hero-content .section-title h1 .split-line {
    text-align: center !important;
  }

  .hero-content .section-title p {
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
  }

  .hero-content .section-btn {
    text-align: center;
    display: flex;
    justify-content: center;
  }

  .hero-images {
    margin-left: 0;
    justify-content: center;
  }

  .hero-img-1 figure {
    transform: scale(1);
    max-width: 350px;
    margin: 0 auto;
  }
}

@media (max-width: 575px) {
  .hero-content .section-title h1 {
    font-size: 28px;
  }
}

/*************************************/
/***       05. CTA Box css         ***/
/*************************************/

.cta-contact-box {
  padding: 50px 0;
  border-bottom: 1px solid var(--divider-color);
}

.cta-contact-box .cta-contact-item {
  position: relative;
  padding: 0 35px;
  display: flex;
  align-items: center;
}

.cta-contact-box .cta-contact-item:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: -15px;
  bottom: 0;
  background: var(--divider-color);
  width: 1px;
  height: 100%;
}

.cta-contact-box .col-lg-4:last-child .cta-contact-item:before {
  display: none;
}

.cta-contact-item .icon-box {
  position: relative;
  background-color: var(--accent-color);
  border-radius: 12px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  transition: all 0.4s ease-in-out;
}

.cta-contact-item:hover .icon-box {
  background-color: var(--white-color);
  color: var(--text-color);
}

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

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

.cta-contact-item .icon-box img {
  position: relative;
  max-width: 24px;
  z-index: 1;
}

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

.cta-contact-content h3 {
  font-size: 20px;
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: 5px;
}

.cta-contact-content p {
  margin: 0;
}

/*************************************/
/*** 06. About Us css            ***/
/*************************************/

.about-us {
  padding: 100px 0;
  background-color: #EFF8FF;
  /* Hero bölümüyle aynı açık mavi renk */
}

/* Sol Taraf Resim Alanı */
.about-image {
  position: relative;
  margin-right: 30px;
}

.about-img figure {
  display: block;
  border-radius: 40px;
  box-shadow: 0 15px 40px rgba(14, 56, 76, 0.1);
}

.about-img img {
  aspect-ratio: 1 / 1.11;
  object-fit: cover;
  border-radius: 40px;
}

/* Mutlu Hasta Sayacı (Resim Üzerinde) */
.happy-patients-counter {
  position: absolute;
  bottom: 50px;
  left: -30px;
  /* Hafif dışa taşma efekti */
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(7.9px);
  -webkit-backdrop-filter: blur(7.9px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 20px 30px;
  z-index: 1;
  max-width: 200px;
}

.happy-patients-counter-box {
  display: flex;
  align-items: center;
  gap: 15px;
}

.happy-patients-counter .icon-box {
  width: 50px;
  height: 50px;
  background: var(--bg-section-gray);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.happy-patients-counter .icon-box img {
  width: 24px;
}

.happy-patients-counter-content h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 0;
}

.happy-patients-counter-content p {
  color: var(--text-color);
  font-size: 14px;
  margin: 0;
  font-weight: 500;
}

/* Sağ Taraf İçerik */
.about-us-content {
  padding-left: 20px;
}

/* Başlık ve Paragraf Renkleri (Primary Color) */
.about-us-content .section-title h2 {
  color: var(--primary-color) !important;
}

.about-us-content .section-title p {
  color: var(--primary-color) !important;
  /* Veya okunabilirlik için var(--text-color) */
  opacity: 0.9;
}

/* Liste Yapısı */
.about-content-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.about-content-list ul li {
  position: relative;
  color: var(--primary-color);
  /* Liste yazısı koyu renk */
  font-size: 18px;
  font-weight: 600;
  padding-left: 35px;
  margin-bottom: 20px;
}

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

/* Liste İkonu (FontAwesome Check) */
.about-content-list ul li::before {
  content: "\f00c";
  /* Check ikonu */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 3px;
  left: 0;
  color: var(--accent-color);
  /* İkon mavi */
  font-size: 18px;
}

/* Deneyim Sayacı Kutusu (Sağda Küçük Kutu) */
.experience-counter {
  background: var(--white-color);
  /* Beyaz arka plan */
  padding: 30px;
  border-radius: 30px;
  text-align: center;
  box-shadow: var(--shadow-light);
  border: 1px solid var(--divider-color);
}

.experience-counter .icon-box {
  width: 60px;
  height: 60px;
  background: var(--bg-section-gray);
  /* Gri zemin */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px auto;
  /* Ortala */
  transition: all 0.3s ease;
}

.experience-counter .icon-box img {
  width: 30px;
  transition: all 0.3s ease;
}

/* Hover Efekti */
.experience-counter:hover .icon-box {
  background: var(--accent-color);
}

.experience-counter:hover .icon-box img {
  filter: brightness(0) invert(1);
  /* Beyaz ikon */
}

.experience-counter .experience-counter-content h3 {
  color: var(--accent-color);
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 5px;
}

.experience-counter .experience-counter-content p {
  color: var(--primary-color);
  font-weight: 600;
  margin: 0;
}

.about-content-btn {
  margin-top: 40px;
}

/* Responsive */
@media (max-width: 991px) {
  .about-image {
    margin-right: 0;
    margin-bottom: 50px;
  }

  .happy-patients-counter {
    left: 20px;
    bottom: -30px;
  }

  .about-us-content {
    padding-left: 0;
  }

  .experience-counter {
    margin-top: 30px;
  }
}

/*************************************/
/*** 07. Our Service css         ***/
/*************************************/

.our-service {
  padding: 100px 0 70px;
  background-color: var(--white-color);
  /* Bölüm Arka Planı Beyaz */
}

/* --- BAŞLIK RENGİ DÜZELTMESİ --- */
.our-service .section-title h2 {
  color: var(--primary-color) !important;
  /* Başlığı zorla Koyu Lacivert yap */
}

/* Kart Yapısı - HİZALAMA DÜZELTMESİ (Flexbox) */
.service-item {
  position: relative;
  background-color: var(--white-color);
  border: 1px solid var(--divider-color);
  border-radius: 30px;
  height: 100%;
  /* Yükseklikleri eşitle */
  margin-bottom: 30px;
  padding: 40px 30px;
  overflow: hidden;
  transition: all 0.4s ease;
  box-shadow: var(--shadow-light);

  /* Flexbox ile içerik hizalama */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.service-item:before {
  display: none;
}

/* Hover Efekti: Yükselme ve Mavi Çerçeve */
.service-item:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent-color);
}

/* İkon Kutusu */
.service-item .icon-box {
  position: relative;
  background-color: var(--bg-section-gray);
  /* Normalde Gri Zemin */
  border-radius: 20px;
  width: 70px;
  min-height: 70px;
  /* Sabit yükseklik */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  transition: all 0.4s ease;
}

/* --- İKON RENGİ DÜZELTMESİ --- */
.service-item .icon-box img {
  max-width: 32px;
  transition: all 0.4s ease;
  /* İkon beyaz ise onu Koyu Lacivert'e (Primary) çeviren filtre */
  filter: invert(18%) sepia(34%) saturate(1469%) hue-rotate(167deg) brightness(94%) contrast(96%);
}

/* Hoverda İkon Kutusu */
.service-item:hover .icon-box {
  background-color: var(--accent-color);
  /* Zemin Mavi Olsun */
}

.service-item:hover .icon-box img {
  /* Hoverda ikon Beyaz olsun (Okunabilirlik için en iyisi) */
  filter: brightness(0) invert(1);
}

/* İçerik Alanı */
.service-content {
  border-bottom: 1px solid var(--divider-color);
  padding-bottom: 20px;
  margin-bottom: 20px;
  transition: all 0.3s ease;

  /* Flex-grow ile alanı doldur ve butonu aşağı it */
  flex-grow: 1;
}

.service-content h3 {
  font-size: 22px;
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: 15px;
  color: var(--primary-color);
  transition: color 0.3s ease;
}

.service-item:hover .service-content h3 {
  color: var(--accent-color);
}

.service-content p {
  margin: 0;
  color: var(--primary-color) !important;
  line-height: 1.6em;
  opacity: 0.9;
}

.service-item:hover .service-content p {
  color: var(--primary-color) !important;
}

/* Buton Alanı */
.service-btn {
  position: relative;
  z-index: 1;
  margin-top: auto;
  /* Garanti olsun diye butonu en alta it */
}

.redmore-btn {
  position: relative;
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--accent-color);
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease-in-out;
}

.redmore-btn:hover {
  color: var(--primary-color);
}

.redmore-btn::after {
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: 10px;
  transition: margin-left 0.3s ease;
}

.redmore-btn:hover::after {
  margin-left: 15px;
}

/*************************************/
/*** 08. FAQ Section css         ***/
/*************************************/

.faq-section {
  padding: 100px 0;
  background-color: #EFF8FF;
}

/* --- SOL TARAF GÖRSEL (ZOOM EFEKTİ) --- */
.faq-image figure {
  border-radius: 40px;
  overflow: hidden;
  /* Taşmayı engelle */
  box-shadow: 0 20px 50px rgba(14, 56, 76, 0.15);
  height: 100%;
}

.faq-image .zoomed-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Resmi biraz yakınlaştırarak odakla */
  transform: scale(1.1);
  transition: transform 0.5s ease;
}

/* Opsiyonel: Hoverda biraz daha yakınlaşsın */
.faq-image:hover .zoomed-image {
  transform: scale(1.15);
}

/* Sağ Taraf İçerik */
.faq-content {
  padding-left: 30px;
}

/* Başlık Renkleri */
.faq-content .section-title h3 {
  color: var(--accent-color) !important;
}

.faq-content .section-title h2 {
  color: var(--primary-color) !important;
  margin-bottom: 20px;
}

.faq-content .section-title p {
  color: var(--primary-color) !important;
  opacity: 0.9;
  margin-bottom: 40px;
}

/* --- ACCORDION TASARIMI (BOŞLUKSUZ) --- */
.accordion {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--divider-color);
  /* Dış çerçeve */
}

.accordion-item {
  background-color: var(--white-color);
  border: none;
  /* Varsayılan border'ı kaldır */
  border-bottom: 1px solid var(--divider-color);
  /* Sadece alt çizgi */
  margin-bottom: 0;
  /* Boşlukları kaldır */
  border-radius: 0 !important;
  /* Köşeleri düzleştir (dış hariç) */
}

/* Son elemanın alt çizgisini kaldır */
.accordion-item:last-child {
  border-bottom: none;
}

.accordion-header {
  margin: 0;
}

/* Accordion Butonu */
.accordion-button {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-color);
  background-color: var(--white-color);
  padding: 25px 30px;
  box-shadow: none !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Açık Olan Butonun Stili */
.accordion-button:not(.collapsed) {
  color: var(--accent-color);
  background-color: rgba(30, 132, 181, 0.05);
  /* Hafif mavi arka plan */
}

/* Accordion Oku (Icon) */
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230e384c'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transition: transform 0.3s ease-in-out;
  /* Oku yumuşakça döndür */
}

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

/* Accordion İçeriği (Smooth Açılma) */
.accordion-collapse {
  transition: height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  /* Daha yumuşak geçiş */
}

.accordion-body {
  padding: 0 30px 25px 30px;
  /* Üst boşluğu kaldırdık, butonla birleşik dursun */
  color: var(--primary-color);
  font-size: 16px;
  line-height: 1.7em;
  opacity: 0.85;
}

/* Responsive */
@media (max-width: 991px) {
  .faq-content {
    padding-left: 0;
    margin-top: 30px;
  }
}

/*************************************/
/*** 09. Why Choose Us css      ***/
/*************************************/

.why-choose-us {
  padding: 100px 0;
  /* Hero bölümüyle aynı açık mavi arka plan */
  background-color: #EFF8FF;
}

/* Sol Taraf Video Alanı */
.why-choose-media {
  position: relative;
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(14, 56, 76, 0.1);
  margin-bottom: 30px;
  background: #000;
  /* Video yüklenene kadar siyah zemin */
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Sağ Taraf İçerik ve Renk Düzeltmeleri */
.why-choose-content {
  padding-left: 50px;
}

/* 1. Başlık Renklerini Zorla (Koyu Lacivert) */
.why-choose-us .section-title h2 {
  color: var(--primary-color) !important;
  margin-bottom: 25px;
}

/* 2. Alt Başlık Rengi (Mavi) */
.why-choose-us .section-title h3 {
  color: var(--accent-color) !important;
  margin-bottom: 15px;
}

/* 3. Paragraf Renklerini Zorla (Koyu Gri/Lacivert) */
.why-choose-us .doctor-bio p {
  color: var(--primary-color) !important;
  /* veya var(--text-color) */
  opacity: 0.9;
  font-size: 16px;
  line-height: 1.8em;
  margin-bottom: 20px;
  font-weight: 400;
}

/* 4. Liste ve Sertifika Renklerini Zorla */
.doctor-certificates ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.doctor-certificates ul li {
  position: relative;
  padding-left: 35px;
  margin-bottom: 15px;
  font-weight: 600;
  color: var(--primary-color) !important;
  /* Liste yazısı koyu renk */
  font-size: 16px;
}

.doctor-certificates ul li::before {
  content: "\f058";
  /* Check İkonu */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--accent-color) !important;
  /* İkon mavi */
  font-size: 20px;
}

/* Mobil Uyumluluk */
@media (max-width: 991px) {
  .why-choose-content {
    padding-left: 0;
    margin-top: 30px;
  }

  .why-choose-media {
    margin-bottom: 0;
  }
}


/*************************************/
/*** 12. Our Team css            ***/
/*************************************/

.our-team {
  padding: 100px 0 70px;
  background-color: var(--white-color);
  /* Zebra deseni için Beyaz */
}

/* Kart Yapısı */
.team-member-item {
  margin-bottom: 30px;
  text-align: center;
  /* İçeriği ortala */
}

/* Görsel Alanı */
.team-image {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  /* Yumuşak köşeler */
  margin-bottom: 25px;
  box-shadow: var(--shadow-light);
  /* Hafif gölge */
}

/* Görsel Boyutlandırma (400x480px Mantığı) */
.team-image img {
  width: 100%;
  height: 480px;
  /* Sabit yükseklik */
  object-fit: cover;
  /* Resmi bozmadan doldur */
  object-position: top center;
  /* Yüz kısmına odaklan */
  transition: all 0.5s ease-in-out;
}

/* Sadece Zoom Efekti (Sosyal Medya Yok) */
.team-member-item:hover .team-image img {
  transform: scale(1.05);
}

/* Metin Alanı */
.team-content h3 {
  font-size: 24px;
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 5px;
  color: var(--primary-color) !important;
  /* İsim Koyu Lacivert */
}

.team-content p {
  font-size: 18px;
  text-transform: capitalize;
  margin: 0;
  font-weight: 500;
  color: var(--primary-color) !important;
  /* Unvan Koyu Lacivert */
  opacity: 0.8;
}

/* Başlık Renkleri */
.our-team .section-title h3 {
  color: var(--accent-color) !important;
  /* Üst başlık Mavi */
}

.our-team .section-title h2 {
  color: var(--primary-color) !important;
  /* Ana başlık Koyu Lacivert */
}

/* Responsive Düzeltme */
@media (max-width: 767px) {
  .team-image img {
    height: 400px;
    /* Mobilde biraz daha kısa olabilir */
  }
}

/*************************************/
/***   	  14. Contact Us css       ***/
/*************************************/

.contact-us {
  padding: 100px 0;
  background-color: var(--secondary-color);
}

.contact-info-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
  margin-bottom: 30px;
}

.contact-info-item {
  width: calc(33.33% - 20px);
  background-color: var(--bg-color-dub);
  border: 1px solid var(--divider-color);
  border-radius: 30px;
  display: flex;
  align-items: center;
  padding: 20px;
}

.contact-info-item .icon-box {
  position: relative;
  background-color: var(--accent-color);
  border-radius: 12px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  transition: all 0.4s ease-in-out;
}

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

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

.contact-info-item .icon-box img {
  position: relative;
  max-width: 24px;
  z-index: 1;
}

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

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

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

/*************************************/
/*** 15. Footer css              ***/
/*************************************/

.main-footer {
  background-color: var(--primary-color);
  /* Koyu Lacivert Arka Plan */
  padding: 80px 0 0;
  position: relative;
  color: var(--white-color);
}

/* --- ORTAK BAŞLIK STİLLERİ --- */
.footer-links h3,
.footer-contact-info h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--white-color);
  text-transform: uppercase;
  margin-bottom: 25px;
  position: relative;
  display: inline-block;
}

/* Başlık altı çizgi efekti (Opsiyonel estetik) */
.footer-links h3::after,
.footer-contact-info h3::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background-color: var(--accent-color);
  /* Mavi Çizgi */
  margin-top: 10px;
}

/* Sağ taraftaki çizgi sağa yaslansın */
.text-lg-end .footer-contact-info h3::after {
  margin-left: auto;
}

/* Mobilde ortada kalsın */
@media (max-width: 991px) {
  .text-lg-end .footer-contact-info h3::after {
    margin: 10px auto 0;
  }

  .footer-links h3::after {
    margin: 10px auto 0;
  }
}

/* --- SOL TARAF: LİNKLER --- */
.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links ul li {
  margin-bottom: 12px;
}

.footer-links ul li a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.footer-links ul li a:hover {
  color: var(--white-color);
  transform: translateX(5px);
  color: var(--accent-color);
}

/* --- ORTA TARAF: LOGO & BRAND --- */
.footer-brand-box {
  padding: 0 20px;
}

.footer-logo img {
  max-width: 200px;
  height: auto;
  filter: brightness(0) invert(1);
  /* Logoyu beyaza çevirir (eğer siyahsa) */
}

.footer-slogan p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6em;
}

/* Sosyal Medya İkonları */
.footer-social-links ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 15px;
}

.footer-social-links ul li a {
  width: 45px;
  height: 45px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white-color);
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.05);
}

.footer-social-links ul li a:hover {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  transform: translateY(-3px);
}

.footer-social-links ul li a i {
  font-size: 18px;
}

/* --- SAĞ TARAF: İLETİŞİM --- */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-list li {
  margin-bottom: 15px;
}

.contact-list li a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.contact-list li a:hover {
  color: var(--accent-color);
}

.contact-list li a i {
  color: var(--accent-color);
}

/* --- COPYRIGHT --- */
.footer-copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 25px 0;
  margin-top: 50px;
  text-align: center;
}

.footer-copyright-text p {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

/************************************/
/***     Page Header Css	  ***/
/************************************/

.page-header {
  /* Zebra deseni: Hero ve Why Choose Us ile aynı açık renk */
  background-color: #EFF8FF;
  background-image: url(../images/section-bg-shape.svg);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  padding: 120px 0 100px;
  /* Biraz daha ferah boşluk */
  position: relative;
  z-index: 1;
}

/* Arka plan şeklinin görünür olması için opsiyonel ayar */
.page-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Arka plan desenini hafifletmek için */
  background: linear-gradient(180deg, rgba(239, 248, 255, 0.8) 0%, rgba(239, 248, 255, 1) 100%);
  z-index: -1;
}

.page-header-box {
  text-align: center;
}

/* Ana Başlık (H1) */
.page-header-box h1 {
  display: inline-block;
  font-size: 64px;
  /* Daha büyük ve iddialı */
  font-weight: 800;
  text-align: center;
  color: var(--primary-color);
  /* Koyu Lacivert */
  margin-bottom: 15px;
  letter-spacing: -1px;
  line-height: 1.2em;
}

/* Breadcrumb (Navigasyon Yolu) */
.page-header-box ol.breadcrumb {
  margin: 0;
  padding: 0;
  display: inline-flex;
  justify-content: center;
  background: var(--white-color);
  /* Kutucuk görünümü */
  padding: 10px 25px;
  border-radius: 50px;
  /* Tam yuvarlak kenarlar */
  box-shadow: 0 10px 30px rgba(14, 56, 76, 0.08);
  /* Hafif gölge */
  border: 1px solid var(--divider-color);
}

/* Linkler */
.page-header-box ol li.breadcrumb-item {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  text-transform: capitalize;
  display: flex;
  align-items: center;
}

.page-header-box ol li.breadcrumb-item a {
  color: var(--primary-color);
  transition: all 0.3s ease;
}

.page-header-box ol li.breadcrumb-item a:hover {
  color: var(--accent-color);
  /* Hoverda Mavi */
}

/* Aktif Sayfa */
.page-header-box ol li.breadcrumb-item.active {
  color: var(--accent-color);
  /* Mavi */
}

/* Ayırıcı (Divider) */
.page-header-box ol .breadcrumb-item+.breadcrumb-item::before {
  content: "\f105";
  /* FontAwesome Ok İkonu */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--text-color);
  font-size: 14px;
  padding: 0 10px;
}

/* Responsive */
@media (max-width: 767px) {
  .page-header {
    padding: 80px 0 60px;
  }

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

  .page-header-box ol.breadcrumb {
    padding: 8px 20px;
  }
}

/************************************/
/*** 26. Contact us Page css      ***/
/************************************/

.page-contact-us {
  padding: 100px 0;
  background-color: var(--white-color);
  /* Arka plan Beyaz */
}

/* --- SOL TARAFTAKİ BİLGİ KUTUSU --- */
.contact-info-box.page-contact-info-box {
  background-color: var(--bg-section-gray);
  /* Hafif Gri Zemin */
  border: 1px solid var(--divider-color);
  border-radius: 40px;
  padding: 40px;
  height: 100%;
  /* Sayfa kayarken takip etmesi için sticky özellik */
  position: sticky;
  top: 100px;
  box-shadow: var(--shadow-light);
}

.page-contact-info-box .contact-info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(14, 56, 76, 0.1);
  /* Hafif çizgi */
}

.page-contact-info-box .contact-info-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* İkonlar */
.page-contact-info-box .icon-box {
  width: 60px;
  height: 60px;
  min-width: 60px;
  background-color: var(--white-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.page-contact-info-box .contact-info-item:hover .icon-box {
  background-color: var(--accent-color);
}

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

/* Metinler */
.page-contact-info-box .contact-info-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 5px;
  text-transform: capitalize;
}

.page-contact-info-box .contact-info-content p,
.page-contact-info-box .contact-info-content p a {
  color: var(--text-color);
  margin: 0;
  font-size: 16px;
  line-height: 1.6em;
  transition: all 0.3s ease;
}

.page-contact-info-box .contact-info-content p a:hover {
  color: var(--accent-color);
}

/* Sosyal Medya Listesi */
.contact-info-social-list {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid rgba(14, 56, 76, 0.1);
  display: flex;
  align-items: center;
}

.contact-info-social-list span {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-color);
  margin-right: 15px;
}

.contact-info-social-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
}

.contact-info-social-list ul li a {
  width: 40px;
  height: 40px;
  background-color: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white-color);
  transition: all 0.3s ease;
}

.contact-info-social-list ul li a:hover {
  background-color: var(--accent-color);
  transform: translateY(-3px);
}

/* --- SAĞ TARAFTAKİ FORM --- */
.contact-us-form {
  background-color: var(--white-color);
  border: 1px solid var(--divider-color);
  border-radius: 40px;
  padding: 50px;
  box-shadow: var(--shadow-light);
}

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

.contact-us-form .section-title h3 {
  color: var(--accent-color);
  padding-left: 0;
  /* İkonu kaldırdıysak paddingi sıfırla */
  margin-bottom: 10px;
}

.contact-us-form .section-title h3::before {
  display: none;
}

.contact-us-form .section-title h2 {
  color: var(--primary-color);
  font-size: 36px;
  margin-bottom: 15px;
}

.contact-us-form .section-title p {
  color: var(--text-color);
}

/* Form Elemanları */
.contact-us-form label {
  font-size: 16px;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 10px;
  display: block;
  text-transform: capitalize;
}

.contact-us-form .form-control {
  background-color: #f9f9f9;
  border: 1px solid transparent;
  border-radius: 15px;
  padding: 15px 20px;
  height: auto;
  font-size: 16px;
  color: var(--primary-color);
  transition: all 0.3s ease;
}

.contact-us-form textarea.form-control {
  height: 150px;
  resize: none;
}

/* Input Focus Efekti */
.contact-us-form .form-control:focus {
  background-color: var(--white-color);
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px rgba(30, 132, 181, 0.1);
  /* Hafif mavi glow */
  outline: none;
}

/* Placeholder Rengi */
.contact-us-form .form-control::placeholder {
  color: #999;
  opacity: 1;
}

/* Hata Mesajları */
.help-block.with-errors {
  color: #dc3545;
  font-size: 13px;
  margin-top: 5px;
  font-weight: 500;
}

/* Mobil Uyumluluk */
@media (max-width: 991px) {
  .page-contact-info-box {
    position: static;
    /* Mobilde sticky olmasın */
    margin-bottom: 30px;
  }

  .contact-us-form {
    padding: 30px;
  }

  .contact-us-form .section-title h2 {
    font-size: 28px;
  }
}

/************************************/
/***     16. About us Page css	  ***/
/************************************/

.vision-mission {
  background: var(--secondary-color);
  padding: 100px 0;
}

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

.our-projects-nav .nav-tabs {
  padding: 0;
  margin: 0;
  list-style: none;
  display: inline-flex;
  background-color: var(--bg-color-dub);
  border: 1px solid var(--divider-color);
  border-radius: 40px;
  padding: 25px;
}

.our-projects-nav ul li {
  margin-right: 30px;
}

.our-projects-nav ul li:last-child {
  margin-right: 0;
}

.our-projects-nav ul li .nav-link {
  background-color: var(--bg-color-dub);
  border: 1px solid var(--divider-color);
  color: var(--primary-color);
  border-radius: 14px;
  font-size: 18px;
  font-weight: 600;
  text-transform: capitalize;
  padding: 15px 20px;
  transition: all 0.4s ease-in-out;
}

.our-projects-nav ul li .nav-link.active {
  background-color: var(--primary-color);
  color: var(--bg-color-dub);
}

.vision-mission-content .section-title {
  margin-bottom: 0;
}

.vision-image {
  text-align: right;
  margin-left: 30px;
}

.vision-image figure {
  display: block;
  border-radius: 40px;
}

.vision-image img {
  aspect-ratio: 1 / 1.06;
  object-fit: cover;
  border-radius: 40px;
}

.interactive-process-layout .interactive-process-item {
  width: 25%;
  border: 1px solid var(--dark-divider-color);
  position: relative;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  overflow: hidden;
}

.interactive-process-layout .interactive-inner-process {
  padding: 490px 55px 55px 55px;
  position: relative;
  z-index: 3;
}

.interactive-process-layout .process-content-wap {
  transform: translateY(90%);
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.interactive-process-item:hover .interactive-inner-process.activate .process-content-wap,
.interactive-process-item .interactive-inner-process.activate .process-content-wap {
  transform: translateY(0);
}

.process-content-wap .process-title {
  font-size: 22px;
  text-transform: capitalize;
  color: var(--bg-color-dub);
  font-weight: 600;
  line-height: 1.2em;
  margin-bottom: 15px;
}

.process-content-wap .process-title a {
  color: inherit;
}

.process-content-wap .content {
  opacity: 0;
  visibility: hidden;
  color: var(--bg-color-dub);
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.interactive-process-layout .interactive-inner-process.activate .process-content-wap .content {
  opacity: 1;
  visibility: visible;
}

.interactive-process-layout .interactive-process-item:hover .content {
  opacity: 1;
  visibility: visible;
}

.interactive-process-layout .interactive-con {
  position: relative;
  z-index: 1;
  padding-bottom: 0 !important;
}

.interactive-process-layout .interactive-con-inner {
  display: flex;
  position: relative;
  z-index: 2;
}

.interactive-process-layout .interactive-con-inner:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(48, 55, 62, 0) 0%, #363738 100%);
  opacity: 0.5;
  z-index: 1;
}

.interactive-process-layout .interactive-process-list-image {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
}

.interactive-process-layout .interactive-process-list-image .interactive-process-image {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  z-index: -1;
  -ms-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}

.interactive-process-layout .interactive-process-list-image .interactive-process-image:first-child {
  z-index: 1;
}

.interactive-process-layout .interactive-process-list-image .interactive-process-image.show {
  z-index: 2;
  opacity: 1;
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

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

.our-faqs-accordion {
  margin-right: 30px;
}

.our-faqs-accordion .accordion-item {
  position: relative;
  background: none;
  border-bottom: 1px solid var(--divider-color);
  padding-bottom: 20px;
  margin-bottom: 20px;
}

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

.our-faqs-accordion .accordion-item .accordion-button {
  position: relative;
  font-size: 20px;
  font-weight: 600;
  text-transform: capitalize;
  border: none;
  box-shadow: none;
  padding: 5px 30px 5px 0px;
}

.our-faqs-accordion .accordion-header .accordion-button::after,
.our-faqs-accordion .accordion-header .accordion-button.collapsed::after {
  content: "\f068";
  position: absolute;
  top: 50%;
  right: 0;
  font-family: "Font Awesome 6 Free";
  font-size: 20px;
  font-weight: 900;
  color: var(--primary-color);
  transform: translate(0px, -50%);
  transition: all 0.3s ease-in-out;
}

.our-faqs-accordion .accordion-header .accordion-button.collapsed::after {
  content: "\2b";
}

.our-faqs-accordion .accordion-item .accordion-body {
  padding: 5px 30px 0px 0px;
}

.our-faqs-accordion .accordion-item .accordion-body p {
  margin: 0;
}

.faq-cta-box {
  position: relative;
  overflow: hidden;
  border-radius: 40px;
}

.faq-cta-image img {
  width: 100%;
  border-radius: 40px;
  aspect-ratio: 1 / 1.3;
  object-fit: cover;
  transition: all 0.5s ease-in-out;
}

.faq-cta-box:hover .faq-cta-image img {
  transform: scale(1.1);
}

.faq-cta-item {
  position: absolute;
  bottom: 30px;
  left: 50px;
  right: 50px;
  background: var(--dark-divider-color);
  border: 1px solid var(--dark-divider-color);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 40px;
  padding: 25px;
  transition: all 0.4s ease-in-out;
}

.faq-cta-box:hover .faq-cta-item {
  bottom: 40px;
}

.faq-cta-item .icon-box {
  position: relative;
  background-color: transparent;
  border: 1px solid var(--dark-divider-color);
  border-radius: 14px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
  z-index: 1;
}

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

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

.faq-cta-item .icon-box img {
  position: relative;
  max-width: 24px;
  z-index: 1;
}

.faq-cta-item-content p {
  color: var(--bg-color-dub);
  margin-bottom: 5px;
}

.faq-cta-item-content h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--bg-color-dub);
}

/************************************/
/***     17. Page Services css	  ***/
/************************************/

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

/************************************/
/***   18. Service Single css	  ***/
/************************************/

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

.service-single-content {
  margin-right: 30px;
}

.service-single-slider {
  position: relative;
  margin-bottom: 40px;
}

.service-single-btn .service-single-button-prev::before {
  transform: rotate(225deg);
}

.service-slider-image {
  border-radius: 40px;
  overflow: hidden;
}

.service-slider-image img {
  border-radius: 40px;
  overflow: hidden;
  aspect-ratio: 1 / 0.6;
  object-fit: cover;
}

.service-single-slider .swiper-pagination {
  position: absolute;
  text-align: center;
  bottom: 20px;
  z-index: 1;
}

.service-single-slider .swiper-pagination .swiper-pagination-bullet {
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background-color: var(--bg-color-dub);
  opacity: 1;
  margin: 0px 4px;
}

.service-single-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
  opacity: 1;
}

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

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

.service-entry h3 {
  font-size: 20px;
  text-transform: capitalize;
  margin-bottom: 20px;
}

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

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

.service-entry ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.service-entry ul li {
  position: relative;
  width: 100%;
  color: var(--primary-color);
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
  padding-left: 30px;
}

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

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

.service-entry-img img {
  border-radius: 40px;
}

.service-single-faqs .our-faq-section .accordion-item {
  border: 1px solid var(--divider-color);
}

.service-sidebar {
  position: sticky;
  top: 20px;
}

.service-catagery-list {
  background-color: var(--secondary-color);
  border-radius: 40px;
  padding: 40px;
  margin-bottom: 40px;
}

.service-catagery-list h3 {
  font-size: 20px;
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: 30px;
}

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

.service-catagery-list ul li {
  background-color: var(--bg-color-dub);
  border: 1px solid var(--divider-color);
  border-radius: 14px;
  padding: 15px;
  margin-bottom: 15px;
  transition: all 0.3s ease-in-out;
}

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

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

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

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

.service-catagery-list ul li a::after {
  content: "\f061";
  font-family: "FontAwesome";
  display: block;
  position: absolute;
  top: 0;
  right: 0px;
  font-size: 18px;
  color: var(--primary-color);
  width: 18px;
  height: 18px;
  transition: all 0.3s ease-in-out;
}

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

.working-time-box {
  background-color: var(--primary-color);
  border-radius: 40px;
  padding: 40px;
  margin-bottom: 40px;
}

.working-box-title {
  border-bottom: 1px solid var(--dark-divider-color);
  padding-bottom: 30px;
  margin-bottom: 30px;
}

.working-box-title h3 {
  font-size: 20px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--bg-color-dub);
}

.working-time-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.working-time-list ul li {
  font-weight: 600;
  color: var(--bg-color-dub);
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.working-time-list ul li:last-child {
  margin-bottom: 0;
}

.working-time-list ul span {
  margin-right: 10px;
}

.section-cta-box {
  display: flex;
  background-color: var(--bg-color-dub);
  box-shadow: 0px 10px 30px 0px #00000008;
  border: 1px solid var(--divider-color);
  border-radius: 40px;
  padding: 25px;
}

.section-cta-box .icon-box {
  margin-right: 30px;
}

.section-cta-box .icon-box img {
  max-width: 60px;
}

.section-cta-content {
  width: calc(100% - 90px);
}

.section-cta-content p {
  margin-bottom: 10px;
}

.section-cta-content h3 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px;
}

/************************************/
/***      19. Blog Archive css	  ***/
/************************************/

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

.page-blog .blog-item {
  display: block;
}

.page-blog .post-featured-image {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.page-blog .post-item-body {
  width: 100%;
  display: block;
  padding: 0;
}

.page-pagination {
  margin-top: 30px;
  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(--secondary-color);
  border: 1px solid var(--divider-color);
  color: var(--accent-color);
  border-radius: 10px;
  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(--accent-color);
  color: var(--bg-color-dub);
}

/************************************/
/***      20. 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;
  border-radius: 40px;
}

.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 {
  margin: 0 0 0.6em;
}

.post-entry h1 span,
.post-entry h2 span {
  font-weight: 400;
}

.post-entry h1 {
  font-size: 56px;
}

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

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

.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(--primary-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: var(--secondary-color) url(../images/icon-blockquote.svg) no-repeat 35px 40px;
  border: 1px solid var(--divider-color);
  background-size: 50px;
  border-radius: 40px;
  padding: 30px 30px 30px 120px;
  margin-bottom: 30px;
}

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

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

.tag-links {
  font-size: 22px;
  font-weight: 600;
  color: var(--primary-color);
  display: inline-block;
}

.post-tags .tag-links a {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
  background-color: var(--primary-color);
  color: var(--bg-color-dub);
  border-radius: 10px;
  padding: 8px 20px;
  margin-left: 10px;
  margin-bottom: 10px;
  transition: all 0.3s ease-in-out;
}

.post-tags .tag-links a:hover {
  background: var(--accent-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-color: var(--primary-color);
  color: var(--bg-color-dub);
  border-radius: 10px;
  width: 38px;
  height: 38px;
  transition: all 0.3s ease-in-out;
}

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

.post-social-sharing ul li a i {
  font-size: 18px;
  color: inherit;
  transition: all 0.3s ease-in-out;
}

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

/************************************/
/***      21. Page Doctor css 	  ***/
/************************************/

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

/************************************/
/***    22. Doctor Single css 	  ***/
/************************************/

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

.about-doctor-info {
  margin-bottom: 50px;
}

.about-doctor-info p {
  margin-bottom: 20px;
}

.about-doctor-info p:last-child {
  margin-bottom: 0;
}

.about-doctor-info h2 {
  font-size: 40px;
  margin-bottom: 20px;
}

.team-member-skills {
  margin-bottom: 30px;
}

.team-member-skills .skills-progress-bar {
  margin-bottom: 25px;
}

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

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

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

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

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

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

.doctor-feature-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.doctor-feature-list ul li {
  position: relative;
  width: calc(50% - 10px);
  color: var(--primary-color);
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
  padding-left: 30px;
}

.doctor-feature-list ul li:before {
  content: "\f14a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 20px;
  color: var(--accent-color);
  display: inline-block;
  line-height: normal;
  position: absolute;
  top: 2px;
  left: 0;
}

.doctor-details-sidebar {
  position: sticky;
  top: 20px;
  margin-left: 30px;
}

.doctor-details-box {
  background-color: var(--bg-color-dub);
  box-shadow: 0px 10px 30px 0px #00000008;
  border: 1px solid var(--divider-color);
  border-radius: 40px;
  padding: 20px;
  margin-bottom: 40px;
}

.doctor-details-box .doctor-image {
  position: relative;
  overflow: hidden;
  border-radius: 40px;
  margin-bottom: 30px;
}

.doctor-details-box .doctor-image img {
  width: 100%;
  aspect-ratio: 1/1.18;
  object-fit: cover;
  border-radius: 40px;
  transition: all 0.5s ease-in-out;
}

.doctor-details-box:hover .doctor-image img {
  transform: scale(1.1);
}

.doctor-details-box .doctor-content {
  text-align: center;
  margin-bottom: 20px;
}

.doctor-details-box .doctor-content h3 {
  font-size: 20px;
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: 5px;
}

.doctor-details-box .doctor-content h3 a {
  color: inherit;
}

.doctor-details-box .doctor-content p {
  text-transform: capitalize;
  margin: 0;
}

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

.doctor-social-list ul li {
  display: inline-block;
  text-align: center;
  margin-right: 10px;
}

.doctor-social-list ul li:last-child {
  margin-right: 0;
}

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

.doctor-social-list ul li a i {
  color: var(--bg-color-dub);
  font-size: 16px;
  transition: all 0.3s ease-in-out;
}

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

.get-touch-box {
  background-color: var(--secondary-color);
  border: 1px solid var(--divider-color);
  border-radius: 40px;
  padding: 30px;
}

.get-touch-title {
  border-bottom: 1px solid var(--divider-color);
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.get-touch-title h3 {
  font-size: 20px;
  font-weight: 600;
  text-transform: capitalize;
}

.get-touch-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.get-touch-box ul li {
  border-bottom: 1px solid var(--divider-color);
  margin-bottom: 15px;
  padding-bottom: 15px;
}

.get-touch-box ul li:last-child {
  border-bottom: none;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.get-touch-box ul li span {
  font-size: 18px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--primary-color);
}

/************************************/
/***     23. Gallery Page css	  ***/
/************************************/

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

.photo-gallery {
  margin-bottom: 30px;
  border-radius: 40px;
  overflow: hidden;
}

.photo-gallery a {
  cursor: none;
}

.photo-gallery img {
  position: relative;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 40px;
}

.mfp-arrow-left:before,
.mfp-arrow-right:before {
  border: none;
}

.mfp-arrow-left:after {
  border-right: 13px solid var(--accent-color);
  opacity: 1;
}

.mfp-arrow-right:after {
  border-left: 13px solid var(--accent-color);
  opacity: 1;
}


/************************************/
/***       25. FAQs Page css      ***/
/************************************/

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

.page-faqs-catagery {
  margin-right: 30px;
}

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

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

.page-faqs .faq-accordion-title {
  margin-bottom: 30px;
}

.page-faqs .faq-accordion-title h2 {
  font-size: 40px;
}

.page-faq-accordion .accordion-item {
  border: 1px solid var(--divider-color);
  border-radius: 20px;
  margin-bottom: 25px;
  padding: 0;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

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

.page-faq-accordion .accordion-header .accordion-button {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2em;
  background-color: var(--accent-color);
  color: var(--bg-color-dub);
  padding: 20px 50px 20px 20px;
  transition: all 0.3s ease-in-out;
}

.page-faq-accordion .accordion-button:not(.collapsed) {
  background-color: var(--accent-color);
  color: var(--bg-color-dub);
  border-bottom: 1px solid var(--dark-divider-color);
}

.page-faq-accordion .accordion-header .accordion-button.collapsed {
  background-color: var(--bg-color-dub);
  color: var(--primary-color);
}

.page-faq-accordion .accordion-item .accordion-button::after,
.page-faq-accordion .accordion-item .accordion-button.collapsed::after {
  content: "\f068";
  font-family: "Font Awesome 6 Free";
  position: absolute;
  right: 20px;
  top: 50%;
  bottom: auto;
  transform: translate(0px, -10px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 20px;
  width: 20px;
  height: 20px;
  padding: 5px;
  color: var(--bg-color-dub);
}

.page-faq-accordion .accordion-item .accordion-button.collapsed::after {
  content: "\f067";
  color: var(--primary-color);
}

.page-faq-accordion .accordion-item .accordion-body {
  background-color: var(--accent-color);
  padding: 20px 50px 20px 20px;
}

.page-faq-accordion .accordion-item .accordion-body p {
  color: var(--bg-color-dub);
  margin: 0;
}

.faq-sidebar {
  position: sticky;
  top: 20px;
}

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

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

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

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

.faq-catagery-list ul li a {
  display: block;
  position: relative;
  background-color: var(--bg-color-dub);
  border: 1px solid var(--divider-color);
  color: var(--text-color);
  border-radius: 14px;
  text-transform: capitalize;
  padding: 15px;
  transition: all 0.3s ease-in-out;
}

.faq-catagery-list ul li:hover a {
  background-color: var(--accent-color);
  color: var(--bg-color-dub);
}

.faq-catagery-list ul li a::after {
  content: "\f061";
  font-family: "FontAwesome";
  display: block;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: normal;
  color: var(--primary-color);
  width: 18px;
  height: 18px;
  transition: all 0.3s ease-in-out;
}

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

/************************************/
/*** 10. Contact Us css          ***/
/************************************/

.contact-us {
  padding: 100px 0;
  background-color: var(--white-color);
  /* Arka plan Beyaz */
}

/* Kutu Düzeni */
.contact-info-box {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

/* İletişim Kartı Tasarımı */
.contact-info-item {
  flex: 1;
  background: var(--white-color);
  padding: 40px 30px;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  /* İçeriği dikey hizala */
  align-items: center;
  /* Ortala */
  text-align: center;
  border: 1px solid var(--divider-color);
  box-shadow: var(--shadow-light);
  transition: all 0.3s ease;
  min-width: 250px;
  /* Mobilde çok küçülmesin */
}

.contact-info-item:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent-color);
}

/* İkon Kutusu */
.contact-info-item .icon-box {
  width: 70px;
  height: 70px;
  background: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.contact-info-item .icon-box img {
  width: 30px;
  transition: all 0.3s ease;
}

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

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

/* Metin Alanı */
.contact-info-content h3 {
  font-size: 20px;
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 10px;
  color: var(--primary-color);
}

.contact-info-content p,
.contact-info-content p a {
  margin: 0;
  font-size: 16px;
  color: var(--primary-color);
  /* Metin Rengi Primary */
  font-weight: 500;
  line-height: 1.6em;
}

.contact-info-content p a:hover {
  color: var(--accent-color);
}

/*************************************/
/*** Google Map Section css        ***/
/*************************************/

.google-map {
  padding: 100px 0;
  /* Zebra deseni için Açık Mavi Arka Plan */
  background-color: #EFF8FF;
}

/* Başlık Renkleri */
.google-map .section-title h3 {
  color: var(--accent-color) !important;
  /* Üst başlık Mavi */
}

.google-map .section-title h2 {
  color: var(--primary-color) !important;
  /* Ana başlık Koyu Lacivert */
  margin-bottom: 20px;
}

.google-map .section-title p {
  color: var(--primary-color) !important;
  /* Açıklama metni */
  opacity: 0.9;
  max-width: 800px;
  margin: 0 auto;
}

/* Harita Çerçevesi */
.google-map-iframe {
  width: 100%;
  height: 500px;
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(14, 56, 76, 0.1);
  /* Hafif gölge */
  background-color: var(--white-color);
  border: 5px solid var(--white-color);
  /* Beyaz çerçeve efekti */
}

/* Iframe Ayarları */
.google-map-iframe iframe {
  width: 100%;
  height: 100%;
  border: none;
  /* Başlangıçta siyah-beyaz (Modern görünüm) */
  filter: grayscale(100%);
  transition: all 0.5s ease-in-out;
  display: block;
}

/* Hover Yapınca Renklenme Efekti */
.google-map-iframe:hover iframe {
  filter: grayscale(0%);
}

/* Mobil Uyumluluk */
@media (max-width: 767px) {
  .google-map {
    padding: 60px 0;
  }

  .google-map-iframe {
    height: 350px;
    border-radius: 20px;
  }

  .google-map .section-title h2 {
    font-size: 28px;
  }
}

/* Başlık Renkleri */
.contact-us .section-title h3 {
  color: var(--accent-color) !important;
}

.contact-us .section-title h2 {
  color: var(--primary-color) !important;
}

.contact-us .section-title p {
  color: var(--primary-color) !important;
  opacity: 0.8;
}

/* Responsive */
@media (max-width: 991px) {
  .contact-info-box {
    flex-direction: column;
  }

  .contact-info-item {
    width: 100%;
    margin-bottom: 20px;
  }
}

/*************************************/
/*** 27. Page Book Appointment css ***/
/*************************************/

.page-book-appointment {
  padding: 100px 0;
}

.appointment-form {
  box-shadow: 0px 10px 30px 0px #00000008;
  border: 1px solid var(--divider-color);
  background-color: var(--bg-color-dub);
  border-radius: 40px;
  padding: 50px;
}

.appointment-form-content {
  margin-bottom: 40px;
}

.appointment-form-content p {
  margin: 0;
}

.appointment-form .form-control {
  padding: 15px 20px;
  background-color: transparent;
  border: 1px solid var(--divider-color);
  border-radius: 40px;
  color: var(--text-color);
  box-shadow: none;
}

.appointment-form-title {
  margin-bottom: 20px;
}

.appointment-form-title h3 {
  font-size: 20px;
  font-weight: 600;
  text-transform: capitalize;
}

.appointment-reason {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 40px;
}

.appointment-reason .reason-box {
  width: calc(33.33% - 20px);
}

.appointment-reason .reason-box input[type="radio"]:checked {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.appointment-reason .reason-box label {
  cursor: pointer;
  text-transform: capitalize;
  margin-left: 5px;
}

.appointment-reason .reason-box input:checked~label {
  color: var(--accent-color);
}

.our-faqs.appointment-faqs {
  background-color: var(--bg-color-dub);
}

/************************************/
/*** 	   28. 404 Page css       ***/
/************************************/

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

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

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

.error-page .error-page-content {
  text-align: center;
}

.error-page-content-heading {
  margin-bottom: 30px;
}

.error-page-content-heading h2 {
  font-size: 40px;
}

.error-page-content-body p {
  margin-bottom: 30px;
}

/************************************/
/***     29. responsive css       ***/
/************************************/

@media only screen and (max-width: 1366px) {
  .interactive-process-item .interactive-inner-process {
    padding: 490px 30px 30px 30px;
  }

  .interactive-process-layout .process-content-wap {
    transform: translateY(80%);
  }

  .process-content-wap .process-title {
    font-size: 20px;
  }
}

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

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

  .why-choose-box {
    padding: 60px 30px;
    max-width: 100%;
  }

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

  .why-choose-content .section-title {
    margin-bottom: 50px;
  }

  .interactive-process-item .interactive-inner-process {
    padding: 400px 20px 20px 20px;
  }

  .process-content-wap .process-title {
    font-size: 18px;
  }

  .process-content-wap .content {
    font-size: 14px;
  }
}

@media only screen and (max-width: 991px) {
  /*  #magic-cursor {
    display: none !important;
  }*/

  .slicknav_nav li,
  .slicknav_nav ul {
    display: block;
  }

  .responsive-menu,
  .navbar-toggle {
    display: block;
  }

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

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

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

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

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

  .hero {
    padding: 60px 0;
  }

  .hero.bg-image.hero-slider-layout .hero-slide {
    padding: 80px 0;
  }

  .hero.bg-image.hero-slider-layout .hero-pagination {
    bottom: 30px;
  }

  .hero.bg-image .hero-content .section-title h1 {
    font-size: 60px;
  }

  .hero.bg-image .hero-content .section-title p {
    max-width: 100%;
  }

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

  .hero-content .section-title p {
    max-width: 100%;
  }

  .hero-content-body {
    margin-bottom: 30px;
    padding-bottom: 30px;
  }

  .hero-images {
    margin-left: 0px;
  }


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

  .about-content-list ul li {
    font-size: 18px;
    padding-left: 35px;
    margin-bottom: 15px;
  }

  .about-content-list ul li::before {
    width: 20px;
    height: 20px;
  }

  .experience-counter {
    padding: 20px;
    width: auto;
  }

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

  .about-image {
    margin-right: 0;
    margin-bottom: 30px;
  }

  .about-img img {
    aspect-ratio: 1 / 0.8;
  }

  .happy-patients-counter {
    bottom: 30px;
    left: 30px;
    height: 160px;
    width: 160px;
    padding: 20px;
  }

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

  .service-item .icon-box {
    margin-bottom: 20px;
  }

  .service-content {
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

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

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

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

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

  .why-choose-counter-no {
    margin-bottom: 20px;
  }

  .why-choose-counter-content h2 {
    font-size: 34px;
    margin-bottom: 10px;
  }

  .why-choose-counter-content h3 {
    font-size: 18px;
  }

  .why-choose-image {
    padding: 0 15px;
    margin-top: 30px;
  }

  .why-choose-box {
    padding: 30px;
  }

  .why-choose-item {
    margin-bottom: 20px;
    padding-bottom: 20px;
  }

  .why-choose-item .icon-box {
    width: 76px;
    height: 76px;
    border-radius: 20px;
  }

  .why-choose-item .icon-box::before {
    border-radius: 20px;
  }

  .why-choose-item .icon-box img {
    max-width: 40px;
  }

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


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

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

  .team-image img {
    aspect-ratio: 1 / 1.1;
  }

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

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

  .blog-item {
    padding: 15px;
  }

  .blog-item .post-featured-image img {
    aspect-ratio: 1 / 0.7;
  }

  .contact-us {
    padding: 50px 0;
    background-color: var(--secondary-color);
  }

  .contact-info-item {
    width: calc(50% - 15px);
    padding: 15px;
  }

  .contact-info-content p {
    font-size: 14px;
  }

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

  .footer-booking-box {
    margin-bottom: 30px;
    padding-bottom: 30px;
  }

  .footer-booking-title {
    margin-bottom: 20px;
  }

  .footer-booking-title h2 {
    font-size: 34px;
  }

  .footer-booking-btn {
    text-align: left;
  }

  .about-footer {
    margin-bottom: 30px;
  }

  .footer-logo {
    margin-bottom: 20px;
  }

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

  .footer-links {
    max-width: 100%;
    margin: 0;
  }

  .footer-links h3 {
    margin-bottom: 20px;
  }

  .footer-links ul li {
    margin-bottom: 11px;
  }

  .footer-contact-box .footer-info-box {
    margin-bottom: 25px;
  }

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

  .page-header {
    padding: 80px 0;
  }

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

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

  .our-projects-nav {
    margin-bottom: 30px;
  }

  .our-projects-nav .nav-tabs {
    padding: 20px;
  }

  .our-projects-nav ul li {
    margin-right: 20px;
  }

  .our-projects-nav ul li .nav-link {
    font-size: 18px;
    padding: 10px 20px;
  }

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

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

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

  .interactive-process-layout .interactive-con-inner {
    flex-wrap: wrap;
  }

  .interactive-process-layout .interactive-process-item {
    width: 50%;
  }

  .interactive-process-item .interactive-inner-process {
    padding: 300px 20px 20px 20px;
  }

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

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

  .our-faqs-accordion .accordion-item {
    padding-bottom: 15px;
    margin-bottom: 15px;
  }

  .faq-cta-box {
    width: 100%;
    max-width: 410px;
    margin: 0 auto;
  }

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

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

  .service-single-content {
    margin-right: 0px;
    margin-bottom: 30px;
  }

  .service-single-slider {
    margin-bottom: 30px;
  }

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

  .service-entry h2 {
    font-size: 32px;
  }

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

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

  .working-time-box {
    padding: 30px;
    margin-bottom: 30px;
  }

  .working-box-title {
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  .working-time-list ul li {
    margin-bottom: 20px;
  }

  .section-cta-box {
    padding: 30px;
  }

  .section-cta-box .icon-box {
    margin-right: 20px;
  }

  .section-cta-box .icon-box img {
    max-width: 50px;
  }

  .section-cta-content {
    width: calc(100% - 70px);
  }

  .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: var(--secondary-color) url("../images/icon-blockquote.svg") no-repeat 30px 35px;
    background-size: 45px;
    padding: 25px 25px 25px 90px;
    margin-bottom: 20px;
  }

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

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

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

  .post-tag-links {
    padding: 0 0px;
  }

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

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

  .post-tags .tag-links a {
    font-size: 16px;
    padding: 8px 15px;
  }

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

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

  .doctor-details-sidebar {
    position: initial;
    margin-left: 0px;
    margin-bottom: 30px;
  }

  .about-doctor-info {
    margin-bottom: 40px;
  }

  .doctor-details-box {
    margin-bottom: 30px;
  }

  .doctor-details-box .doctor-image {
    max-width: 80%;
    margin: 0 auto;
    margin-bottom: 20px;
  }

  .doctor-details-box .doctor-image img {
    aspect-ratio: 1 / 0.99;
  }

  .about-doctor-info h2 {
    font-size: 32px;
  }

  .team-member-skills .skills-progress-bar {
    margin-bottom: 20px;
  }

  .skillbar .skill-data {
    margin-bottom: 10px;
  }

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

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

  .testimonial-box-item {
    padding: 30px;
  }

  .testimonial-box-header {
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  .testimonial-box-item .testimonial-box-body {
    margin-bottom: 20px;
  }

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

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

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

  .page-faqs-catagery {
    margin-right: 0px;
  }

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

  .page-faqs .faq-accordion-title {
    margin-bottom: 20px;
  }

  .page-faqs .faq-accordion-title h2 {
    font-size: 32px;
  }

  .page-faq-accordion .accordion-header .accordion-button {
    padding: 15px 45px 15px 15px;
  }

  .page-faq-accordion .accordion-item .accordion-body {
    padding: 15px 45px 15px 15px;
  }

  .page-faq-accordion .accordion-item .accordion-button::after,
  .page-faq-accordion .accordion-item .accordion-button.collapsed::after {
    right: 15px;
  }

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

  .contact-info-box.page-contact-info-box {
    position: initial;
    padding: 30px;
    margin-bottom: 30px;
  }

  .contact-us-form {
    padding: 30px;
  }

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

  .page-book-appointment {
    padding: 50px 0;
  }

  .appointment-form {
    padding: 40px;
  }

  .appointment-form-content {
    margin-bottom: 30px;
  }

  .appointment-reason {
    margin-bottom: 30px;
  }

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

  .error-page-image {
    margin-bottom: 20px;
  }

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

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

  .error-page-content-heading h2 {
    font-size: 32px;
  }

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

@media only screen and (max-width: 767px) {
  .section-title h1 {
    font-size: 32px;
  }

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

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

  .hero.bg-image .hero-content .section-title h1 {
    font-size: 34px;
  }

  .hero-content .section-title {
    text-align: center;
  }

  .hero-content-body {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
  }

  .hero-content-footer {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .hero-content-footer .hero-footer-box {
    width: calc(33.33% - 6.66px);
  }

  .hero-footer-box .icon-box {
    display: none;
  }

  .hero-footer-box .hero-footer-box-content {
    width: 100%;
  }

  .hero-footer-box .hero-footer-box-content p {
    font-size: 14px;
  }

  .hero-images {
    gap: 15px;
    justify-content: center;
  }

  .hero-image-box {
    gap: 15px;
  }

  .hero-img-5 figure,
  .hero-img-4 figure,
  .hero-img-3 figure,
  .hero-img-2 figure,
  .hero-img-1 figure {
    border-radius: 20px;
  }

  .hero-img-5 img,
  .hero-img-4 img,
  .hero-img-3 img,
  .hero-img-2 img,
  .hero-img-1 img {
    border-radius: 20px;
  }

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

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

  .experience-counter {
    float: left;
  }

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

  .about-img img {
    aspect-ratio: 1 / 1.11;
  }

  .happy-patients-counter {
    bottom: 20px;
    left: 20px;
  }

  .service-item {
    padding: 20px;
  }

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

  .process-item-content {
    width: calc(100% - 108px);
  }

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

  .process-item-content p {
    font-size: 14px;
  }

  .why-choose-counter-box {
    padding-right: 0px;
    margin-bottom: 15px;
  }

  .why-choose-counter-box:before {
    display: none;
  }

  .why-choose-counter-no {
    margin-bottom: 10px;
  }

  .why-choose-counter-content h2 {
    font-size: 28px;
    margin-bottom: 5px;
  }

  .why-choose-box {
    padding: 20px;
  }

  .why-choose-item .icon-box {
    width: 66px;
    height: 66px;
    margin-right: 15px;
  }

  .why-choose-item .icon-box img {
    max-width: 34px;
  }

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

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

  .why-choose-item-content p {
    font-size: 14px;
  }


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


  .provide-item-no h3 {
    border-radius: 10px;
    font-size: 20px;
    width: 34px;
    height: 34px;
  }

  .provide-item-content {
    padding-left: 50px;
  }

  .provide-item-content h3 {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .blog-item {
    display: block;
  }

  .blog-item .post-featured-image {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }

  .post-item-body {
    width: 100%;
    display: block;
    padding: 0 10px;
  }

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

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

  .contact-info-item {
    width: 100%;
  }

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

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

  .footer-booking-title h2 {
    font-size: 28px;
  }

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

  .footer-links h3 {
    font-size: 18px;
    margin-bottom: 15px;
  }

  .footer-info-box .icon-box i {
    font-size: 18px;
  }

  .footer-contact-box .footer-info-box {
    margin-bottom: 15px;
  }

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

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

  .our-projects-nav .nav-tabs {
    padding: 15px;
    border-radius: 25px;
  }

  .our-projects-nav ul li {
    margin-right: 10px;
  }

  .our-projects-nav ul li .nav-link {
    font-size: 14px;
    padding: 8px 12px;
  }

  .vision-image img {
    aspect-ratio: 1 / 0.9;
  }

  .interactive-process-layout .interactive-process-item {
    width: 100%;
  }

  .interactive-process-item .interactive-inner-process {
    padding: 80px 20px 20px 20px;
  }

  .our-faqs-accordion .accordion-item .accordion-button {
    font-size: 18px;
    padding: 5px 25px 5px 0px;
  }

  .our-faqs-accordion .accordion-item .accordion-body {
    padding: 5px 5px 0px 0px;
  }

  .our-faqs-accordion .accordion-header .accordion-button::after,
  .our-faqs-accordion .accordion-header .accordion-button.collapsed::after {
    font-size: 18px;
  }

  .faq-cta-box {
    max-width: 100%;
  }

  .faq-cta-item {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    border-radius: 20px;
    padding: 15px;
  }

  .faq-cta-item-content h3 {
    font-size: 18px;
  }

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

  .service-single-slider .swiper-pagination {
    bottom: 10px;
  }

  .service-entry h2 {
    font-size: 24px;
  }

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

  .service-entry ul {
    display: block;
  }

  .service-entry ul li {
    width: 100%;
    font-size: 16px;
    margin-bottom: 10px;
  }

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

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

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

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

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

  .service-catagery-list ul li {
    padding: 12px;
  }

  .working-time-box {
    padding: 20px;
  }

  .working-box-title {
    padding-bottom: 15px;
    margin-bottom: 15px;
  }

  .working-box-title h3 {
    font-size: 18px;
  }

  .section-cta-box {
    padding: 18px;
  }

  .section-cta-box .icon-box {
    margin-right: 10px;
  }

  .section-cta-box .icon-box img {
    max-width: 40px;
  }

  .section-cta-content {
    width: calc(100% - 50px);
  }

  .section-cta-content h3 {
    font-size: 20px;
  }

  .post-image figure,
  .post-image img {
    aspect-ratio: 1 / 0.7;
  }

  .post-entry blockquote {
    background: var(--secondary-color) url(../images/icon-blockquote.svg) no-repeat 20px 20px;
    background-size: 35px;
    padding: 55px 20px 20px 20px;
  }

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

  .tag-links {
    font-size: 20px;
  }

  .doctor-details-box .doctor-image {
    max-width: 100%;
    margin: auto;
    margin-bottom: 20px;
  }

  .doctor-details-box .doctor-image img {
    aspect-ratio: 1 / 1.18;
  }

  .doctor-details-box .doctor-content {
    margin-bottom: 15px;
  }

  .doctor-details-box .doctor-content h3 {
    font-size: 18px;
  }

  .get-touch-title h3 {
    font-size: 18px;
  }

  .about-doctor-info {
    margin-bottom: 30px;
  }

  .about-doctor-info h2 {
    font-size: 24px;
  }

  .skillbar .skill-data .skill-no,
  .skillbar .skill-data .skill-title {
    font-size: 16px;
  }

  .doctor-feature-list ul {
    gap: 15px;
  }

  .doctor-feature-list ul li {
    padding-left: 25px;
    width: 100%;
  }

  .doctor-feature-list ul li:before {
    font-size: 18px;
    top: 3px;
  }

  .photo-gallery img,
  .photo-gallery {
    border-radius: 20px;
  }

  .testimonial-box-item {
    padding: 20px;
  }

  .testimonial-box-header {
    padding-bottom: 15px;
    margin-bottom: 15px;
  }

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

  .testimonial-box-item .testimonial-box-body {
    margin-bottom: 15px;
  }

  .page-faqs .page-faq-accordion {
    margin-bottom: 30px;
  }

  .page-faqs .faq-accordion-title h2 {
    font-size: 24px;
  }

  .page-faq-accordion .accordion-header .accordion-button {
    font-size: 18px;
  }

  .page-faq-accordion .accordion-item .accordion-body {
    padding: 15px;
  }

  .faq-catagery-list ul li a {
    padding: 12px;
  }

  .faq-catagery-list ul li a::after {
    right: 12px;
  }

  .contact-info-box.page-contact-info-box {
    padding: 20px;
  }

  .contact-us-form {
    padding: 20px;
  }

  .appointment-form {
    padding: 30px 20px;
  }

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

  .appointment-form-title h3 {
    font-size: 18px;
  }

  .appointment-reason {
    gap: 10px;
  }

  .appointment-reason .reason-box {
    width: 100%;
  }

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

  .error-page-content-heading h2 {
    font-size: 24px;
  }
}

/************************************/
/***     30. our css       ***/
/************************************/
.about-img .reveal img {
  max-height: 40rem;
}

.btn-pulse-light {
  animation: pulse-glow-light 1s infinite;
}

.btn-pulse-light:hover {
  animation: none;
}

@keyframes pulse-glow-light {
  0% {
    box-shadow: 0 0 0 0 #b8b8b8;
  }

  70% {
    box-shadow: 0 0 0 15px transparent;
  }

  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

.btn-pulse-dark {
  animation: pulse-glow-dark 1s infinite;
}

.btn-pulse-dark:hover {
  animation: none;
}

@keyframes pulse-glow-dark {
  0% {
    box-shadow: 0 0 0 0 var(--accent-color);
  }

  70% {
    box-shadow: 0 0 0 15px transparent;
  }

  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

.justify-self-center {
  justify-self: center;
}


.blog-accordion {
  margin-bottom: 60px;
}

.blog-accordion:last-child {
  margin-bottom: 0;
}

.blog-accordion .accordion-item {
  border: 1px solid var(--divider-color);
  border-radius: 20px;
  margin-bottom: 25px;
  padding: 0;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  background-color: transparent;
}

.blog-accordion .accordion-header {
  margin: 0;
}

.blog-accordion .accordion-item:last-child {
  margin-bottom: 0;
}

.blog-accordion .accordion-header .accordion-button {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2em;
  background-color: var(--accent-color);
  color: var(--bg-color-dub);
  padding: 20px 50px 20px 20px;
  transition: all 0.3s ease-in-out;
  box-shadow: none !important;
}

.blog-accordion .accordion-button:not(.collapsed) {
  background-color: var(--white-color);
  color: var(--bg-color-dub);
  border-bottom: 1px solid var(--dark-divider-color);
}

.blog-accordion .accordion-header .accordion-button.collapsed {
  background-color: var(--white-color);
  color: var(--primary-color);
}

.blog-accordion .accordion-item .accordion-button::after {
  content: "\f067";
  font-family: "Font Awesome 6 Free";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 20px;
  width: 20px;
  height: 20px;
  color: var(--primary-color);
  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
}


.blog-accordion .accordion-button:not(.collapsed)::after {
  content: "\f068";
  transform: translateY(-50%) rotate(180deg);
  color: var(--bg-color-dub);
}

.blog-accordion .accordion-item .accordion-body {
  background-color: var(--white-color);
  padding: 20px 50px 20px 20px;
}

.blog-accordion .accordion-item .accordion-body p {
  color: var(--primary-color);
  margin: 0;
}


.blog-accordion .accordion-collapse {
  transition: height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}


.blog-accordion .accordion-collapse.collapsing .accordion-body {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.blog-accordion .accordion-collapse.show .accordion-body {
  opacity: 1;
  transition: opacity 0.4s ease-in;
}

/* 1. BAŞLIK VE BUTONU EN ÜSTE TAŞIMA (KRİTİK) */
/* İçerik açıldığında butonun altında kalmasını engeller, böylece her zaman tıklanabilir olur. */
.blog-accordion .accordion-header,
.blog-accordion .accordion-button {
  position: relative;
  z-index: 10;
  /* İçerikten (body) daha yüksek bir katman */
}

/* 2. AÇILAN İÇERİĞİN KATMANINI DÜZENLEME */
.blog-accordion .accordion-collapse {
  position: relative;
  z-index: 1;
  /* Butonun altında kalmalı */
}

/* 3. İKONUN TIKLAMAYI ENGELLEMESİNİ ÖNLEME */
/* Tıklarken yanlışlıkla ::after (ikon) üzerine gelirseniz tıklama algılanmayabilir. Bunu engelliyoruz. */
.blog-accordion .accordion-button::after {
  pointer-events: none;
  /* Tıklamayı yoksay, arkasındaki butona geçir */
}

/* 4. BOOTSTRAP ÇAKIŞMASI KONTROLÜ */
/* Eğer daha önce display:block verdiyseniz, Bootstrap'ın kapanma (display:none) özelliğini eziyor olabilir. */
.accordion-collapse.collapse:not(.show) {
  display: none !important;
  /* Kapalıyken kesinlikle gizle */
}

/* WhatsApp Sticky Button */
.whatsapp-sticky {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 35px;
  line-height: 60px;
  z-index: 9999;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  animation: pulse-green 2s infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

.whatsapp-sticky:hover {
  transform: scale(1.1);
  text-decoration: none;
  color: #fff;
}

@keyframes pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* Mobile Adjustment */
@media (max-width: 767px) {
  .whatsapp-sticky {
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    font-size: 28px;
    line-height: 50px;
  }
}