@charset "utf-8";
/*
Theme Name:   Noorsa Clinic Theme
Theme URI:    
Description: Beautiful, Powerful & Flexible WordPress Theme for Beauty and Dermatology Clinics.
Author: 
Author URI:   
License: License purchased
Version: 1.2.1
*/
/* === Root Variables === */
:root {
    --color1: #C5A059;
    --color2: #111E38;
    --color3: #FFFFFF;
    --color4: #FFF9ED;
    --color5: #454545;

}

/* === Font Definitions === */
@font-face {
    font-family: PeydaWeb;
    font-style: normal;
    font-weight: 300;
    src: url("assets/fonts/PeydaWebFaNum-Regular.woff") format("woff"), url("assets/fonts/PeydaWebFaNum-Regular.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: PeydaWebextrabold;
    font-style: normal;
    font-weight: 700;
    src: url("assets/fonts/PeydaWebFaNum-ExtraBold.woff") format("woff"), url("assets/fonts/PeydaWebFaNum-ExtraBold.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: PeydaWebbold;
    font-style: normal;
    font-weight: 500;
    src: url("assets/fonts/PeydaWebFaNum-Bold.woff") format("woff"), url("assets/fonts/PeydaWebFaNum-Bold.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: PeydaWebsemibold;
    font-style: normal;
    font-weight: 500;
    src: url("assets/fonts/PeydaWebFaNum-SemiBold.woff") format("woff"), url("assets/fonts/PeydaWebFaNum-SemiBold.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "aghicon";
    src: url("assets/fonts/agh_vakil.ttf") format("truetype"), url("assets/fonts/agh_vakil.woff") format("woff"), url("assets/fonts/agh_vakil.woff2") format("woff2"), url("assets/fonts/agh_vakil.eot") format("embedded-opentype"),
        url("assets/fonts/agh_vakil.svg") format("svg");
}

/* === General Styles === */
body {
    margin: 0;
    font-family: PeydaWeb;
    background: #fff;
    color: var(--color3);
    text-align: right;
    direction: rtl;
    overflow-x: hidden;
}

*:focus,
*:focus-visible,
*:focus-within {
    outline: none !important;
    box-shadow: none !important;
}
a:hover {
    text-decoration: none !important;
}
a, 
button, 
input, 
textarea, 
select {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-select: none; 
    user-select: none;
}

a:active, 
button:active {
    outline: none !important;
    background-image: none !important;
}

img {
    width: 100%;
}

li {
    list-style: none;
}

a {
    color: var(--color2);
    transition: 0.5s;
    text-decoration: none;
}

a:hover,
a:visited,
a:link,
a:active {
    text-decoration: none;
}

.mg-auto {
    margin: 0 auto;
}

ul {
    padding: 0;
    margin: 0;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #c0c0c0;
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--color1) !important;
}

button:focus {
    outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

.containerlf {
    max-width: 1260px;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.lg {
    direction: ltr;
}

.owl-carousel {
    direction: ltr;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 450px) {
  .container {
    max-width: 420px;
  }
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1123px;
  }
}

@media (min-width: 1500px) {
  .container {
    max-width: 1200px;
  }
  .containerlf {
    max-width: 1350px;
  } 
}
/* =========================================
   Header
========================================= */

/* Header Base */
.main-header{
  border-top:3px solid var(--color1);
  padding: 25px 0px;
  background-color: var(--color4);
   position: relative;
   z-index: 9999;
  overflow: visible;
}

/* Header inner layout */
.main-header__inner{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 70px;
}

/* Logo */
.main-header__brand{
  display: flex;
  align-items: center;
}

.header__logo-img{
  height: 43px;
  display: block;
}

/* Navigation */
.main-header__nav{
  display: flex;
  justify-content: center;
}

.nav-list{
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nav item */
.nav-list__item{
  position: relative;
}

/* Nav link */
.nav-list__link{
  font-size: 13px;
  color: var(--color2);
  text-decoration: none;
  display: flex;
  align-items: center;
  transition:color .2s ease;
  font-family: 'PeydaWeb';
}

.nav-list__item--has-dropdown a.nav-list__link:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 30px;
    background: #ff000000;
    bottom: -20px;
}

/* Active state */
.nav-list__link.is-active{
  font-family: peydawebbold;
}
/* Hover state */
.nav-list__link:hover{
  color: var(--color1);
}

/* Dropdown menu */
.dropdowns-menu{
  position:absolute;
  top: 185%;
  right:0;
  min-width: 130px;
  background:#fff;
  border-radius:8px;
  padding: 5px 0;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:all .2s ease;
  border-top: 1px solid var(--color1);
  box-shadow: 0px 2px 4px #0000000a;
}
/* Show dropdown on hover */
.nav-list__item--has-dropdown:hover .dropdowns-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* Dropdown item */
.dropdown-menu__item{
  list-style:none;
}

/* Dropdown link */
.dropdown-menu__link{
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--color2);
  font-size: 13px;
  transition: .2s;
}
.nav-list__icon .arrow-2 {
    padding-top: 6px;
}
/* Dropdown link hover */
.dropdown-menu__link:hover{color: var(--color1);}

/* Actions area */
.main-header__actions{
   margin-right: auto;
   display: flex;
   align-items: center;
   gap: 9px;
}

/* Phone contact */
.header-contact a{
  display:flex;
  align-items:center;
  gap: 10px;
}

.header-contact__number{
  font-size: 14px;
  color: var(--color1);
  letter-spacing: 2px;
  font-family: peydawebsemibold;
}

/* Circular phone icon */
.header-contact__icon-wrapper{
  width: 32px;
  height: 32px;
  border-radius:50%;
  background-color:  rgba(197, 160, 89, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Phone icon svg */
.header-contact__icon-wrapper svg{
  width:11px;
  height:11px;
  display:block;
}

/* Button base */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  font-size: 12px;
}

/* Consultation button style */
.btn--cta {
  position: relative;
  background: var(--color1);
  color: #fff !important;
  padding: 7px 13px;
  border-radius: 36px;
  overflow: hidden;
  transition: background .3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'PeydaWeb';
  overflow: hidden;
}

/* light reflection layer */
.btn--cta::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.45),
    transparent
  );
  transform: rotate(25deg);
  transition: left .6s ease;
  pointer-events: none; 
}

/* hover animation */
.btn--cta:hover::after {
  left: 130%;
}


/* Button arrow container */
.btn__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0; 
}

/* Button icon styling */
.btn__arrow svg {
  display: block;
  width: 11px; 
  height: 11px;
}

/* Base styling for the dropdown arrow icon */
.nav-list__icon {
  display: inline-flex;
  align-items: center;
  transition: transform 0.3s ease;
  margin-right: 6px;
  pointer-events: none;
}

/* Rotate the arrow icon when the parent menu item is hovered */
.nav-list__item:hover .nav-list__icon {
  transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    z-index: 10001;
}

.hero-section,
.hero-wrapper,
#hero-slider {
    position: relative;
    z-index: 1;
}

/* =========================================
   hero-section
========================================= */

.hero-section {
  background-color: var(--color4);
}
.hero-wrapper {
    border-radius: 25px;
    overflow: hidden;
}

.hero-slider__img {
    height: auto;
    display: block;
    width: 100%;
}



/* =========================================
   Stories Section
========================================= */

.stories-section {
    background-color: var(--color4);
    display: flow;
    padding: 20px 10px;
}

.story-item {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 10px 0;
    text-align: center;
}

/* Story circle */
.story-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 3px solid var(--color1);
    padding: 4px;
    background: #fff;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Story image */
.story-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Story hover effect */
.story-item:hover .story-avatar {
    transform: translateY(-5px);
    border-color: #c5a059;
    box-shadow: 0 3px 25px rgba(197, 160, 89, 0.3);
}

/* Image zoom and brightness on hover */
.story-item:hover .story-avatar img {
    transform: scale(1.15);
    filter: brightness(1.1);
}


/*Stories Navigation Styles */

/* Main navigation container using Flexbox */
.stories-section .owl-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    pointer-events: none; 
    z-index: 10;
}

/* Reset Owl default button styles */
.stories-section .owl-nav button.owl-prev,
.stories-section .owl-nav button.owl-next {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 -20px !important;
    pointer-events: all;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* Hover effect for buttons */
.stories-section .owl-nav button:hover {
    transform: scale(1.15);
}

/* Flip arrows to point outwards */
.owl-prev-custom svg { 
    transform: rotate(180deg);
}

.owl-next-custom svg { 
    transform: rotate(180deg);
}

/* Ensure SVG paths maintain the brand color */
.nav-button svg path {
    stroke: #c5a059;
}

/* Handle overflow clipping for hover effects */
.stories-section .owl-stage-outer {
}


/* =========================================
    service-intro
========================================= */

.service-intro {
    margin: 90px 0px;
}


/* ===== Service intro main section layout ===== */
.service-intro__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* gap: 48px; */
}

/* ===== Left and right columns ===== */
.service-intro__visual {
    width: 45%;
}
.service-intro__content {
    width: 65%;
}
/* ===== Visual column alignment ===== */
.service-intro__visual {
    display: flex;
    justify-content: center;
}

/* ===== Composition gallery wrapper ===== */
.composition-gallery {
    position: relative;
    width: 100%;
    height: 500px;
}
/* ===== Shared styles for image layers ===== */
.composition-gallery__layer {
    position: absolute;
    overflow: hidden;
}

/* ===== Primary image layer (top-right) ===== */
.composition-gallery__layer--primary {
    top: 0;
    right: 0;
    width: 380px;
    z-index: 2;
}
/* ===== Secondary image layer (bottom-left) ===== */
.composition-gallery__layer--secondary {
    bottom: -12px;
    left: 0;
    width: 347px;
    z-index: 2;
    border: 11px solid #fff;
    border-radius: 36px;
}

/* ===== Shared image styles ===== */
.composition-gallery__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 25px;
}

/* ===== Floating center badge ===== */
.composition-gallery__badge {
    position: absolute;
    top: 106px;
    left: 80px;
    width: 146px;
    height: 146px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

/* ===== Badge image styles ===== */
.composition-gallery__badge-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    transform-origin: center center;
    animation: badgeRotate 8s linear infinite;
}

/* ===== Rotate logo from its center ===== */
@keyframes badgeRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ==============================================
   SERVICE INTRO - LEFT COLUMN (CONTENT & STATS)
   ==============================================*/

/* Content column layout for the text side */
.service-intro__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 40px;
}

/* Header container for title and description */
.service-intro__header {
    /* margin-bottom: 20px; */
}

/* Wrapper for the main section title */
.c-section-title {
    margin-bottom: 8px;
}

/* Main title styling */
.c-section-title__text {
    font-size: 38px;
    color: var(--color1);
    font-family: peydawebExtraBold;
    line-height: 34px;
    margin: 0;
}

.c-section-title__highlight {
    color: var(--color2);
}

/* Paragraph styling*/
.service-intro__description {
    font-size: 14px;
    line-height: 40px;
    color: var(--color5);
    margin-top: 30px;
    font-family: peydaweb;
    text-align: justify;
}

/* Layout for the info area and statistics */
.service-intro__footer {
    display: flex;
    align-items: flex-end;
    gap: 15px;
    justify-content: space-between;
}
/* List container for services/features */
.c-feature-list {
    margin: 0 0 30px 0;
}

/* Individual list item  */
.c-feature-list__item {
    position: relative;
    padding-right: 25px;
    line-height: 20px;
    margin: 20px 0px;
}
.c-feature-list__title {
   font-family: peydawebbold;
   font-size: 12px;
   color: var(--color1);
   transition: 0.5s;
}
.c-feature-list__text {
    color: var(--color5);
    font-size: 13px;
    display: block;
}
/* Golden dot for list items */
.c-feature-list__item::before {
    content: '';
    position: absolute;
    right: 0;
    top: 14px;
    width: 15px;
    height: 15px;
    background-image: url('data:image/svg+xml,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.9707 7.5C14.9707 8.98041 14.5313 10.4201 13.7 11.6635C13.587 11.8325 13.4014 11.9238 13.2123 11.9238C13.1004 11.9238 12.9872 11.8919 12.8872 11.825C12.6181 11.6452 12.5459 11.2812 12.7257 11.0122C13.4278 9.9622 13.7988 8.74775 13.7988 7.5C13.7988 6.96385 13.7318 6.43135 13.5995 5.91751C13.5188 5.60417 13.7075 5.28465 14.0208 5.20397C14.3344 5.12341 14.6537 5.31201 14.7344 5.62535C14.8912 6.23463 14.9707 6.86531 14.9707 7.5ZM10.7442 12.9168C9.75998 13.513 8.62805 13.8281 7.47071 13.8281C3.9814 13.8281 1.14258 10.9893 1.14258 7.5C1.14258 4.0107 3.9814 1.17188 7.47071 1.17188C8.76263 1.17188 10.0049 1.55846 11.0634 2.28985C11.3295 2.47376 11.6945 2.40704 11.8785 2.14085C12.0624 1.87466 11.9958 1.50971 11.7295 1.32568C10.4743 0.45845 9.0017 0 7.47071 0C5.46742 0 3.58395 0.780144 2.1674 2.19669C0.750847 3.61324 -0.0292969 5.49671 -0.0292969 7.5C-0.0292969 9.50329 0.750847 11.3868 2.1674 12.8033C3.58395 14.2199 5.46742 15 7.47071 15C8.84217 15 10.1841 14.6262 11.3514 13.9191C11.6282 13.7515 11.7167 13.3912 11.549 13.1144C11.3813 12.8375 11.021 12.7492 10.7442 12.9168ZM7.52724 9.19899C7.43443 9.20265 7.3478 9.1697 7.28051 9.10561L4.21177 6.19595C3.97694 5.97325 3.60603 5.98309 3.38345 6.21792C3.16074 6.45275 3.17059 6.82366 3.40542 7.04624L6.47358 9.95545C6.75694 10.2248 7.12349 10.3711 7.5119 10.3711C7.53273 10.3711 7.55356 10.3706 7.57439 10.3698C7.9858 10.3532 8.36369 10.1752 8.63835 9.86836C8.64533 9.86069 8.65197 9.85279 8.65849 9.84467L14.8414 2.15424C15.0442 1.90201 15.0041 1.53317 14.7519 1.33049C14.4998 1.1277 14.1308 1.16776 13.928 1.41998L7.75727 9.09542C7.69661 9.15871 7.61536 9.19545 7.52724 9.19899Z" fill="%23C5A059"/></svg>');
    /* border-radius: 50%; */
}


.btn--outline {
    background-color: transparent;
    border: 1px solid var(--color2);
    color: var(--color2);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 12px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn--outline::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -150%;
    width: 60%;
    height: 200%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 20%,
        rgba(255, 255, 255, 0.8) 50%, 
        rgba(197, 160, 89, 0.5) 70%,  
        rgba(255, 255, 255, 0) 100%
    );
    
    transform: rotate(25deg);
    filter: blur(2px) brightness(1.5); 
    transition: left 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
}

.btn--outline:hover::after {
    left: 150%; 
}

.btn--outline:hover {
    border-color: #C5A059;
    color: #C5A059;
    box-shadow: 0 0 10px rgba(197, 160, 89, 0.1);
}




.service-intro__actions {
    display: flex;
    gap: 10px;
}

/* Stats wrapper */
.service-intro__stats {
    display: flex;
    justify-content: center;
}
/* Stat card */
.c-stat-card {
    padding: 28px 24px;
    background: var(--color1);
    border-radius: 20px;
    text-align: center;
    width: 170px;
}
/* Icon wrapper */
.c-stat-card__icon-wrapper {
    margin-bottom: 18px;
    display: flex;
    justify-content: center;
}
/* Stat content wrapper */
.c-stat-card__content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Stat number */
.c-stat-card__number {
    display: block;
    font-size: 32px;
    color: #fff;
    font-family: 'PeydaWebextrabold';
    direction: ltr;
}
/* Stat label */
.c-stat-card__label {
    display: block;
    font-size: 16px;
    font-family: peydaweb;
}
.c-stat-card__icon-wrapper svg {
    width: 54px;
    height: 54px;
}

/* ==============================================
     s-services
   ==============================================*/
   /* Services section */
  .s-servicesbox {
   margin: 70px 0px;
}

.s-servicesbox {
    position: relative;
    padding: 45px 50px;
    background-color: #FFF9ED;
    border-radius: 25px;
    border: 1px solid transparent;
    background-clip: padding-box;
}

.s-servicesbox::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    margin: -1px; 
    border-radius: 25px;
    background: linear-gradient(to bottom, #ffffff 40%, #C5A059); 
}


.s-servicesbox::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('assets/images/service-bg-shape.svg');
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}


/* Section header */
.s-services__header {
  margin: 0 auto 28px;
  text-align: center;
}
.c-section-title__text2 {
    font-size: 38px;
    color: var(--color1);
    font-family: peydawebExtraBold;
    line-height: 34px;
    margin: 0;
}
.c-section-title__highlight2 {
    color: var(--color2);
     font-size: 38px;
    font-family: peydawebExtraBold;
}
.s-services__subtitle {
  margin: 0 auto;
  color: var(--color5);
  font-size: 14px;
  line-height: 40px;
  width: 70%;
}
/* Carousel wrapper */
.js-services-carousel {
  position: relative;
}

/* Card image wrapper */
.c-service-card__image {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}
.c-service-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  

background: linear-gradient(180deg, rgba(197, 160, 89, 0) 0%, #C5A059 100%);
transform: matrix(-1, 0, 0, 1, 0, 0);

  
  pointer-events: none; 
  z-index: 1;
}

/* Service card */
.c-service-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}
/* Card image */
.c-service-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.c-service-card:hover .c-service-card__image img {
  transform: scale(1.1); 
}

.c-service-card:hover .c-service-card__overlay {
  transform: translateY(-5px);
}





/* Icon wrapper */
.c-service-card__icon {
  width: 41px;
  height: 41px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.55);
}
.c-service-card__icon img {
    width: 27px;
    height: 27px;
    display: block;
}

/* Card title */
.c-service-card__title {
  margin: 0 0 0px;
  color: var(--color3);
  font-size: 20px;
  line-height: 29px;
  font-family: peydawebbold;
  margin-top: 6px;
}
/* Card description */
.c-service-card__desc {
  margin: 0;
  color: var(--color3);
  font-size: 12px;
  line-height: 20px;
}
.c-service-card__overlay {
    position: absolute;
}

.c-service-card {
  position: relative; 
  overflow: hidden;
  border-radius: 28px;
  cursor: pointer;
}


.c-service-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 17px 24px;
  z-index: 2;
  /* background: linear-gradient(to top, rgba(0,0,0,0.9) -66%, rgba(0,0,0,0) 81%); */
  transition: transform 0.4s ease;
}

 /* owl-dot */
.s-services .owl-dots {
    position: relative;
    z-index: 10;
    margin-top: 30px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
}


.s-services .owl-dot span {
    width: 9px !important;
    height: 9px !important;
    background-color: #C5A05966; !important;
    border-radius: 50%;
    display: block;
    transition: all 0.3s ease;
    border: none;
}


.s-services .owl-dot.active span {
    background: var(--color1); !important;
      
}


.s-services .owl-dot {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    outline: none !important;
}

/* ==============================================
     s-testimonials
   ==============================================*/


   /* Text center utility */
.u-text-center {
    text-align: center;
    margin-bottom: 40px;
}

/* Modal base styles */
.c-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

/* Active modal state */
.c-modal.is-active {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Modal container */
.c-modal__container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 800px;
}

/* Testimonials section wrapper */
.s-testimonials {
    position: relative;
    overflow: hidden;
    margin-bottom: 70px;
}

.c-testimonial-card , .c-testimonial-card-p {
    position: relative;
    display: block;
    text-decoration: none;
    outline: none;
}

/* Image figure wrapper */
.c-testimonial-card__figure {
    position: relative;
    margin: 0;
    border-radius: 20px; /* Applied radius here */
    overflow: hidden; /* Crucial: clips the image corners */
}

/* Card image */
.c-testimonial-card__figure img {
    display: block;
    width: 100%;
    height: auto;
}

/* Bottom shadow overlay */
.c-testimonial-card__figure::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(17, 30, 56, 0) 43.25%, #111E38 100%);
} 

/* Content overlay placement */
.c-testimonial-card__overlay {
    position: absolute;
    bottom: 20px;
    right: 20px;
    left: 20px;
    z-index: 2;
    display: flex;
    justify-content: flex-start;
}

/* Action button wrapper */
.c-testimonial-card__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    flex-direction: row-reverse;
}

/* Action text label */
.c-testimonial-card__label {
    color: #ffffff; /* Replaced var for safety */
    font-size: 11px;
    font-family: peydawebbold;
}

/* Play icon circle */
.c-testimonial-card__icon {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.23);
}

/* Actual play icon svg */
.c-testimonial-card__icon svg {
    width: 9px;
    height: 9px;
}

/* Card hover effects */

/* Smooth transition for elements */
.c-testimonial-card__icon, 
.c-testimonial-card__label,
.c-testimonial-card__figure img {
    transition: all 0.3s ease-in-out;
}

/* Image scale on hover */
.c-testimonial-card:hover .c-testimonial-card__figure img {
    transform: scale(1.05);
}

/* Icon circle scale and opacity increase */
.c-testimonial-card:hover .c-testimonial-card__icon , .c-testimonial-card-p:hover .c-testimonial-card__icon  {
    background-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.15); 
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); 
}

/* Play icon (SVG) scale */
.c-testimonial-card:hover .c-testimonial-card__icon svg , .c-testimonial-card-p:hover .c-testimonial-card__icon svg {
    transform: scale(1.1);
}

/* Label text slight shift or color brighten */
.c-testimonial-card:hover .c-testimonial-card__label , .c-testimonial-card-p:hover .c-testimonial-card__label{
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}





/* --- Video Modal Styles --- */

/* Base modal container - Ensures it covers the whole screen */
.c-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
}

/* Active state to show the modal */
.c-modal.is-active {
    display: flex;
    opacity: 1;
}

/* Dark blurred background */
.c-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 16, 28, 0.85); 
    backdrop-filter: blur(12px);
    z-index: -1; 
    cursor: pointer;
}

/* Main content card (The Video Container) */
.c-modal__container {
    position: relative;
    width: 100%;
    max-width: 400px; 
    background: #000;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(-50%);
    top: 50%;
    margin: 0 auto;
}

/* 9:16 Aspect Ratio Wrapper */
.c-modal__video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 177.77%; 
    background: #000;
}

/* Video element positioning */
.c-modal__video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

/* Close button - Styled as a clean 'X' circle */
.c-modal__close {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    line-height: 1;
}

.c-modal__close:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: rotate(90deg);
}

/* Pop-in animation */
.c-modal.is-active .c-modal__container {
    animation: modalScaleIn 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes modalScaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* Lock body scroll when modal is active */
body.u-overflow-hidden {
    overflow: hidden;
}






.s-testimonials .owl-dots {
    text-align: center;
    margin-top: 30px;
    display: block !important;
}

/* Base dot for this section */
.s-testimonials .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px;
    display: block;
    border-radius: 50%;
    /* 40% opacity of #111E38 */
    background: rgba(17, 30, 56, 0.4) !important; 
    transition: all 0.3s ease;
}

/* Active dot for this section */
.s-testimonials .owl-dots .owl-dot.active span {
    /* Full color #111E38 */
    background: #111E38 !important; 
    transform: scale(1.2);
}

/* Hover state for this section */
.s-testimonials .owl-dots .owl-dot:hover span {
    background: rgba(17, 30, 56, 0.7) !important;
}




/* ==============================================
     s-contact-cards
   ==============================================*/

   /* Contact cards wrapper grid */
.contact-cards__wrapper {
    display: flex;
    gap: 20px;
    /* padding: 38px 0; */
    flex-wrap: wrap;
    margin: 50px 0px;
}

/* Base card styles */
.contact-card {
    flex: 1;
    height: 180px;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

/* Hover lift effect */
.contact-card:hover {
    transform: translateY(-5px);
}

/* Gold background card */
.contact-card--gold {
    background-color: var(--color1);
}

/* Navy background card */
.contact-card--navy {
    background-color: var(--color2);
}

/* Icon size and fit */
.contact-card__icon img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}
.contact-card__icon {
    width: 80px;
    height: 80px;
}
/* Content container layout */
.contact-card__content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 40px;
    gap: 80px;
    justify-content: center;
}

/* Text alignment and color */
.contact-card__info {
    text-align: left;
    color: var(--color3);
}

/* Large phone number styling */
.contact-card__number {
    display: block;
    font-size: 38px;
    font-weight: bold;
    letter-spacing: 5px;
}
.number-gold {
    color: var(--color1);
}
/* Support text styling */
.contact-card__text {
    font-size: 18px;
    margin: 0;
    font-family: peydaweb;
}

/* Reverse card structure */
.contact-card--reverse .contact-card__content {
    flex-direction: row;
}
/* Full card decorative pattern */
.contact-card:before{
      content: '';
    position: absolute;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url('assets/images/contact-bg.svg');
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    pointer-events: none;
    z-index: 1;
}

/* ==============================================
     laminate-intro
   ==============================================*/


   /* Main laminate intro section */
.laminate-intro {
    padding: 50px 0;
    background-color: #fff;
}

/* Main wrapper layout */
.laminate-intro__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}
/* Right content section */
.laminate-intro__content {
    width: 55%;
}

/* Left visual section */
.laminate-intro__visual {
    width: 45%;
    position: relative;
}
/* Description text styling */
.laminate-intro__desc {
    font-size: 14px;
    line-height: 40px;
    color: var(--color5);
    margin-top: 20px;
    text-align: justify;
    font-family: peydaweb;
}


/* Main offer container layout */
.laminate-offer {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 7px 0px;
}

/* Base style for both offer boxes */
.laminate-offer__box {
    flex: 1;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    z-index: 1;
}


/* Right box with gray background */
.laminate-offer__box--right {
    position: relative;
    /* margin-left: -25px; */
    box-sizing: border-box;
    background: linear-gradient(90deg, rgba(231, 233, 235, 0) 0%, #E7E9EB 100%);
    border-radius: 15px;
    height: 56px;
    z-index: 1;
}

.laminate-offer__box--right::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 15px;
    background: linear-gradient(to left, #111E38 0%, #ffffff 92%);
    -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}


/* left box with gray background */
.laminate-offer__box--left {
    position: relative;
    /* margin-left: -25px; */
    box-sizing: border-box;
    background: linear-gradient(90deg, #FFF9ED 0%, rgba(255, 249, 237, 0) 100%);
    border-radius: 15px;
    height: 56px;
    z-index: 1;
    /* margin-left: 2px; */
}

.laminate-offer__box--left::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 15px;
    background: linear-gradient(to right, #C5A059 0%, #ffffff 92%);
    -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}
/* Offer box text styling */
.laminate-offer__text {
    font-size: 15px;
    color: var(--color2);
    font-family: 'PeydaWebextrabold';
    line-height: 34px;
}
.laminate-offer__text2 {
    color: var(--color1);
}

/* Central tooth icon wrapper */
.laminate-offer__tooth {
    width: 98px;
    height: 98px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    background-color: transparent;
}

/* Tooth image sizing */
.laminate-offer__tooth img {
    width: 100%;
    margin: 0 auto;
    height: auto;
    display: block;
}



.laminate-features__item::before {
    content: '';
    position: relative;
    right: 0;
    top: 0;
    width: 17px;
    height: 15px;
    background-image: url('data:image/svg+xml,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.9707 7.5C14.9707 8.98041 14.5313 10.4201 13.7 11.6635C13.587 11.8325 13.4014 11.9238 13.2123 11.9238C13.1004 11.9238 12.9872 11.8919 12.8872 11.825C12.6181 11.6452 12.5459 11.2812 12.7257 11.0122C13.4278 9.9622 13.7988 8.74775 13.7988 7.5C13.7988 6.96385 13.7318 6.43135 13.5995 5.91751C13.5188 5.60417 13.7075 5.28465 14.0208 5.20397C14.3344 5.12341 14.6537 5.31201 14.7344 5.62535C14.8912 6.23463 14.9707 6.86531 14.9707 7.5ZM10.7442 12.9168C9.75998 13.513 8.62805 13.8281 7.47071 13.8281C3.9814 13.8281 1.14258 10.9893 1.14258 7.5C1.14258 4.0107 3.9814 1.17188 7.47071 1.17188C8.76263 1.17188 10.0049 1.55846 11.0634 2.28985C11.3295 2.47376 11.6945 2.40704 11.8785 2.14085C12.0624 1.87466 11.9958 1.50971 11.7295 1.32568C10.4743 0.45845 9.0017 0 7.47071 0C5.46742 0 3.58395 0.780144 2.1674 2.19669C0.750847 3.61324 -0.0292969 5.49671 -0.0292969 7.5C-0.0292969 9.50329 0.750847 11.3868 2.1674 12.8033C3.58395 14.2199 5.46742 15 7.47071 15C8.84217 15 10.1841 14.6262 11.3514 13.9191C11.6282 13.7515 11.7167 13.3912 11.549 13.1144C11.3813 12.8375 11.021 12.7492 10.7442 12.9168ZM7.52724 9.19899C7.43443 9.20265 7.3478 9.1697 7.28051 9.10561L4.21177 6.19595C3.97694 5.97325 3.60603 5.98309 3.38345 6.21792C3.16074 6.45275 3.17059 6.82366 3.40542 7.04624L6.47358 9.95545C6.75694 10.2248 7.12349 10.3711 7.5119 10.3711C7.53273 10.3711 7.55356 10.3706 7.57439 10.3698C7.9858 10.3532 8.36369 10.1752 8.63835 9.86836C8.64533 9.86069 8.65197 9.85279 8.65849 9.84467L14.8414 2.15424C15.0442 1.90201 15.0041 1.53317 14.7519 1.33049C14.4998 1.1277 14.1308 1.16776 13.928 1.41998L7.75727 9.09542C7.69661 9.15871 7.61536 9.19545 7.52724 9.19899Z" fill="%23C5A059"/></svg>');
    background-repeat: no-repeat;
}
/* Features grid layout */
.laminate-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px 12px;
    padding: 0;
    margin: 22px 0 30px 0;
    list-style: none;
}

/* Feature item styling */
.laminate-features__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color2);
    font-family: 'PeydaWebsemibold';
}

/* Container for the buttons */
.laminate-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}
/* Primary Dark Button (Solid Navy) */
.btn--dark {
    background-color: var(--color2);
    color: var(--color3) !important;
    border: 1px solid var(--color2);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 11px;
    border-radius: 50px;
    font-size: 12px;
    position: relative;
    overflow: hidden;
}


/* light reflection layer */
.btn--dark::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.45),
    transparent
  );
  transform: rotate(25deg);
  transition: left .6s ease;
  pointer-events: none; 
}

/* hover animation */
.btn--dark:hover::after {
  left: 130%;
}



/* ===== Visual column alignment ===== */
.laminate-intro__visual {
    display: flex;
    justify-content: center;
}

/* ===== Composition gallery wrapper ===== */
.laminate-visual {
    position: relative;
    width: 100%;
    height: 478px;
}

/* ===== Shared styles for image layers ===== */
.laminate-visual__layer {
    position: absolute;
    overflow: hidden;
    border-radius: 20px; /
}

/* ===== Primary image layer (top-right) ===== */
.laminate-visual__layer--primary {
    top: -19px;
    right: 10px;
    width: 313px;
    z-index: 2;
}

/* ===== Secondary image layer (bottom-left) ===== */
.laminate-visual__layer--secondary {
    bottom: -19px;
    left: 0;
    width: 313px;
    z-index: 2;
    border: 10px solid #fff;
}

/* ===== Shared image styles ===== */
.laminate-visual__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* ===== Top logo styling ===== */
.laminate-visual__logo {
    position: absolute;
    top: 25px;
    left: 70px;
    z-index: 4;
    width: 71px; /* Adjust size as needed */
    height: 45px;
}

/* ===== Floating center badge ===== */
.laminate-visual__badge {
    position: absolute;
    right: 135px;
    bottom: 52px;
    width: 135px;
    height: 135px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

/* ===== Badge image styles ===== */
.laminate-visual__badge-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    transform-origin: center center;
    animation: badgeRotate 8s linear infinite;
}

/* Animation keyframes (Keep these globally if you already have them) */
@keyframes badgeRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* ==============================================
     dental-features
   ==============================================*/

   .df-title {
     text-align: center;
   }

   /* ===== Dental features section base ===== */
.dental-features {
    position: relative;
}

/* ===== Background layer wrapper ===== */
.df-bg-layer {
    position: relative;
    padding: 60px 0;
}
/* ===== Intro header section ===== */
.df-intro__desc {
    margin: 0 auto;
    color: var(--color5);
    font-size: 14px;
    line-height: 40px;
    width: 69%;
    text-align: center;
    padding: 25px 0px;
}



/* ===== Side columns flex alignment ===== */
.df-grid__col {
    display: flex;
    flex-direction: column;
    gap: 30px;
}



/* ===== Feature card base layout ===== */
.df-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===== Feature icon box styling ===== */
.df-card__icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 30, 56, 0.07);
    border-radius: 6px;
}

/* ===== Icon image size ===== */
.df-card__icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}


/* ===== Card description text style ===== */
.df-card__text {
    margin: 0;
    font-size: 12px;
    line-height: 25px;
    color: var(--color2);
}

/* ===== Card title  ===== */
.df-card__title {
    margin: 0;
    font-size: 20px;
    line-height: 25px;
    color: var(--color2);
    font-family: 'PeydaWebextrabold';
    transition: color 0.3s ease;
    position: relative;
    text-decoration: none;
    display: inline-block;
}


.df-card__title:hover {
    color: var(--color1); 
}





/* ===== Card content wrapper ===== */
.df-card__content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* ===== Center hero image sizing ===== */
.df-visual .df-visual__img {
    width: 180px;
    height: auto;
    object-fit: contain;
    display: block;
}

.df-container {
    position: relative;
    padding: 65px 50px;
    background-color: #E9EBEC;
    border-radius: 25px;
    border: 1px solid transparent;
    background-clip: padding-box;
}
.df-container::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -1px;
    border-radius: 25px;
    background: linear-gradient(to bottom, #ffffff 40%, #111E38);
}
.df-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #111E38; 
    -webkit-mask-image: url(assets/images/service-bg-shape.svg);
    mask-image: url(assets/images/service-bg-shape.svg);
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: center;
    opacity: 0.3;
    clip-path: inset(0 round 30px);
    pointer-events: none;
    z-index: 0;
}







/* ===== Main layout grid (3 cols) ===== */
.df-grid {
    display: flex;
    margin: 20px auto 0;
    align-items: center;
    column-gap: 30px;
    width: 80%;
}

/* ===== Right column alignment to center ===== */
.df-grid__col--right {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: flex-start;
    text-align: right;
    width: 40%;
}

/* ===== Left column alignment to center ===== */
.df-grid__col--left {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: flex-start;
    text-align: right;
    width: 40%;
}

/* ===== Central visual container ===== */
.df-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    margin: 0 auto;
}

.df-grid__center {
    width: 20%;
}


  /* ==============================================
     artists-section
   ==============================================*/


   /* ===== Artists Section ===== */
.artists-section {
    padding: 35px 0;
}

/* ===== Section Header ===== */
   .artists-title {
    text-align: center;
    margin-bottom: 35px;
   }


   /* ===== Owl Carousel Wrapper ===== */
.artists-carousel {
    position: relative;
}

/* ===== Artist Item Wrapper ===== */
.artist-item {
    padding: 5px;
}

/* ===== Artist Card ===== */
.artist-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
      /* Smooth transition for the card container */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

/* ===== Bottom Gradient Overlay ===== */
.artist-card::before {
    content: "";
    position: absolute;
    inset: 0;
    height: 20%;
    bottom: 0;
    top: unset;
    z-index: 1;
    pointer-events: none;
    /* background: linear-gradient(180deg, rgba(17, 30, 56, 0) 43.25%, #111E38 150%); */

   /* Using your Figma colors with a smooth transition */
    background: linear-gradient(180deg, rgba(17, 30, 56, 0) 43.25%, #111E38 100%);
    transition: opacity 0.5s ease;
}

/* ===== Artist Image ===== */
.artist-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}



/* ===== Hover Effects ===== */

/* ===== Image Zoom Effect ===== */
.artist-card:hover .artist-card__img {
    transform: scale(1.12);
}

/* ===== Gradient Intensify on Hover ===== */
.artist-card:hover::before {
    /* Slightly darkens the bottom on hover for better text readability */
    background: linear-gradient(180deg, rgba(17, 30, 56, 0) 30%, #111E38 100%);
}

/* ===== Card Subtle Lift ===== */
.artist-card:hover {
    /* box-shadow: 0 10px 25px rgba(17, 30, 56, 0.2); */
}



/* ===== Artists Slider Dots ===== */
.artists-carousel .owl-dots {
    text-align: center;
    margin-top: 20px;
    display: block !important;
}

/* ===== Artists Base Dot ===== */
.artists-carousel .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px;
    display: block;
    border-radius: 50%;
    /* 40% opacity of #111E38 */
    background: rgba(17, 30, 56, 0.4) !important; 
    transition: all 0.3s ease;
}

/* ===== Artists Active Dot ===== */
.artists-carousel .owl-dots .owl-dot.active span {
    /* Full color #111E38 */
    background: #111E38 !important; 
    transform: scale(1.2);
}

/* ===== Artists Dot Hover State ===== */
.artists-carousel .owl-dots .owl-dot:hover span {
    background: rgba(17, 30, 56, 0.7) !important;
}



 /* ==============================================
      social-ads
   ==============================================*/

/* ===== Social Ads Section ===== */
.social-ads {
    /* padding: 0px 0; */
    width: 100%;
    direction: rtl;
}

/* ===== Wrapper: Controlling Gap and Alignment ===== */
.social-ads__wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center; 
    justify-content: center;
    width: 100%;
   
    gap: 20px; 
}

/* ===== Individual Ad Item ===== */
.social-ads__item {
    display: block;
    text-decoration: none;
    transition: all 0.3s ease;
    line-height: 0; 
}

/* ===== Ad Image Styling ===== */
.social-ads__item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px; 
}

/* ===== Hover Effect ===== */
.social-ads__item:hover {
    transform: translateY(-8px);
    filter: brightness(1.05);
}



/* ==============================================
      doctors-team
   ==============================================*/

/* ===== Doctors Team Section ===== */
.doctors-team {
    padding: 80px 0;
}
/* ===== Header & Typography ===== */
.doctors-team__desc {
   margin: 0 auto;
   color: var(--color5);
   font-size: 14px;
   line-height: 40px;
   width: 63%;
   text-align: center;
}

.doctors-team__title {
    margin-bottom: 11px;
    text-align: center;
}

/* ===== Grid Wrapper ===== */
.doctors-team__wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px;
    align-items: start;
}

/* ===== Individual Doctor Card ===== */
.doctor-card {
    text-align: center;
    transition: transform 0.3s ease;
    margin-top: 40px;
}
.doctor-card:hover {
    transform: translateY(-10px); 
}
.doctor-card__image {
    width: 100%;
    margin-bottom: 6px;
}

.doctor-card__image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== Doctor Info (Text) ===== */
.doctor-card__info {
    padding-top: 10px;
}

.doctor-card__name {
    font-size: 20px;
    color: var(--color2); 
    font-family: peydawebbold;
    line-height: 40px;
     transition: color 0.3s ease;
     position: relative;
}


.doctor-card :hover .doctor-card__name {
    color: var(--color1); 
}










.doctor-card__specialty {
    font-size: 12px;
    color: var(--color5);
    line-height: 18px;
    font-family: peydaweb;
}

/* ===== Section Separator ===== */
.section-divider {
    width: 100%;
    max-width: 1325px;
    margin: 0px auto;
    border-top: 2px dashed #CACACA;
    opacity: 0.8;
}



/* ==============================================
       dental-blog
   ==============================================*/


/* ===== Dental Blog Section ===== */
.dental-blog {
    padding: 80px 0;
    direction: rtl;
    overflow: hidden;
}

.dental-blog__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
/* ===== Right Content ===== */
.dental-blog__content {
    flex: 0 0 36%;
    max-width: 36%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


.dental-blog__desc {
    text-align: justify;
    font-size: 14px;
    line-height: 30px;
    color: var(--color5);
    margin: 4px 0px;
    font-family: peydaweb;
}
.dental-blog__header {
    margin-bottom: 5px;
}

/* ===== Dental Blog Button Row ===== */
.dental-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%; 
}


.dental-blog__nav {
    display: flex;
    align-items: center;
    gap: 8px; 
    flex-direction: row-reverse; 
}

/* ===== Slider Controls ===== */
.nav-btn {
    width: 31px;
    height: 31px;
    border: 0;
    border-radius: 50%;
    background: #E9EBEC;
    color: var(--color2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    line-height: 1;
}

.nav-btn:hover {
    background: var(--color2);
    color: var(--color3);
}

/* ===== Left Slider Area ===== */
.dental-blog__slider-container {
    flex: 0 0 64%;
    max-width: 64%;
    min-width: 0;
}


/* ===== Blog Card ===== */
.blog-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;

}

.blog-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(17, 30, 56, 0) 0%, #111E38 90.38%);
    transition: opacity 0.5s ease;
}

.blog-card img {
    width: 100%;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    height: auto;
}

.blog-card__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 22px 12px;
    z-index: 1;
}

.blog-card__content h3 {
    margin: 0;
    color: var(--color3);
    font-size: 15px;
    line-height: 30px;
    font-family: 'PeydaWebextrabold';
}



.dental-blog__slider {
    position: relative;
    width: 100%;
}

/* ===== Blog Card ===== */
.dental-blog__slider .owl-dots {
    position: absolute;
    bottom: -60px;
    left: 0;
    right: 0;
    text-align: center;
    margin-top: 0 !important;
}


.dental-blog__slider .owl-dots .owl-dot span {
    width: 9px;
    height: 9px;
    margin: 5px;
    display: inline-block;
    border-radius: 50%;
    background: rgba(17, 30, 56, 0.4) !important;
    transition: all 0.3s ease;
}

.dental-blog__slider .owl-dots .owl-dot.active span {
    background: #111e38 !important;
    transform: scale(1.2);
}


/* ==============================================
       Beauty Blog
   ==============================================*/

/* ===== Beauty Blog Section ===== */
.beauty-blog {
    padding: 10px 0 30px 0;
    direction: rtl;
    overflow: hidden;
}

.beauty-blog__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* ===== Right Slider Area ===== */
.beauty-blog__slider-container {
    flex: 0 0 64%;
    max-width: 64%;
    min-width: 0;
}

/* ===== Left Content ===== */
.beauty-blog__content {
    flex: 0 0 36%;
    max-width: 36%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.beauty-blog__header {
    margin-bottom: 5px;
}

.beauty-blog__desc {
    font-size: 15px;
    line-height: 30px;
    color: var(--color5);
    margin: 13px 0;
    font-family: peydaweb;
    text-align: justify;
}

/* ===== Beauty Blog Button Row ===== */
.beauty-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.beauty-blog__nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: row-reverse;
}

/* ===== Slider Controls ===== */
.beauty-nav-btn {
    width: 31px;
    height: 31px;
    border: 0;
    border-radius: 50%;
    background: #FFF9ED;
    color: var(--color1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    line-height: 1;
}

.beauty-nav-btn:hover {
    background: var(--color1);
    color: var(--color3);
}

/* ===== Beauty Blog Slider ===== */
.beauty-blog__slider {
    position: relative;
    width: 100%;
}

/* ===== Beauty Blog Card ===== */
.beauty-blog-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.beauty-blog-card::before {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(197, 160, 89, 0) 10%, #C5A059 80.38%);
    transition: opacity 0.5s ease;
    height: 50%;
    bottom: 0;
    width: 100%;
}

.beauty-blog-card a {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
}

.beauty-blog-card img {
    width: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    height: auto;
}

.beauty-blog-card__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 22px 12px;
    z-index: 2;
}

.beauty-blog-card__content h3 {
    margin: 0;
    color: var(--color3);
    font-size: 15px;
    line-height: 30px;
    font-family: 'PeydaWebextrabold';
}

/* ===== Owl Dots ===== */
.beauty-blog__slider .owl-dots {
    position: absolute;
    bottom: -60px;
    left: 0;
    right: 0;
    text-align: center;
    margin-top: 0 !important;
}

.beauty-blog__slider .owl-dots .owl-dot span {
    width: 9px;
    height: 9px;
    margin: 5px;
    display: inline-block;
    border-radius: 50%;
    background: #C5A05966 !important;
    transition: all 0.3s ease;
}

.beauty-blog__slider .owl-dots .owl-dot.active span {
    background: #C5A059 !important;
    transform: scale(1.2);
}


/* ==============================================
       footer
   ==============================================*/

   .footer {
    margin-top: 60px;
    margin-bottom: 15px;
   }

   /* ===== Footer Section ===== */
.footer__wrapper {
  background: var(--color2);
  color: var(--color3);
  padding: 40px 165px 12px 167px;
  overflow: hidden;
  border-radius: 25px;
  position: relative;
}

.footer__wrapper::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(assets/images/footer-bg.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
    opacity: 0.1;
}
/* ===== Footer Wrapper ===== */
.footer__wrapper {
  width: 100%;
}

/* ===== Footer Top CTA Row ===== */
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 30px;
  border-bottom: 1px solid #FFFFFF1A;
}

/* ===== Footer Top Title ===== */
.footer-top__title h3 {
  margin: 0;
  font-size: 23px;
  font-family: peydawebbold;
  line-height: 22px;
  color: var(--color1);
}

/* ===== Consultation Form ===== */
.consultation-form {
  width: 260px;
  height: 38px;
  display: flex;
  align-items: center;
  flex-direction: row;
  background: #FFFFFF29;
  border-radius: 38px;
  padding: 6px;
  overflow: hidden;
}

/* ===== Consultation Input ===== */
.consultation-form__input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 10px;
  color: #959AA6;
  font-size: 11px;
  font-family: inherit;
  direction: rtl;
}

/* ===== Consultation Input Placeholder ===== */
.consultation-form__input::placeholder {
  color: #959AA6;
}

/* ===== Consultation Submit Button ===== */
.consultation-form__btn {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border: 0;
  outline: 0;
  border-radius: 50%;
  background: var(--color1);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

/* ===== Consultation Submit Button Hover ===== */
.consultation-form__btn:hover {
  background: #d8b468;
  transform: scale(1.04);
}

/* ===== Arrow Icon ===== */
.arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* ===== Footer Middle Content ===== */
.footer-mid {
  padding: 0 0 28px;
}

/* ===== Footer Middle Row ===== */
.footer-mid__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  /* gap: 72px; */
}

/* ===== Footer Right Column ===== */
.footer-mid__right {
  flex: 0 0 360px;
  padding-top: 35px;
}

/* ===== Footer Logo ===== */
.footer-logo {
  margin-bottom: 24px;
}

/* ===== Footer Logo Image ===== */
.footer-logo img {
  max-width: 160px;
  height: auto;
  display: block;
}

/* ===== Footer Description ===== */
.footer-desc {
  width: 80%;
  color: var(--color3);
  font-size: 13px;
  font-family: peydaweb;
  line-height: 22px;
  text-align: justify;
}

/* ===== Footer Social Links ===== */
.footer-socials {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

/* ===== Footer Social Link Item ===== */
.footer-socials a {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, transform 0.3s ease;
}
/* ===== Footer Social Link Hover ===== */
.footer-socials a:hover {
  transform: translateY(-4px);
}

/* ===== Footer Social Icon ===== */
.footer-socials img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
}


/* ===== Footer Left Column ===== */
.footer-mid__left {
  flex: 1;
  min-width: 0;
}

/* ===== Footer Upper Info Row ===== */
.footer-mid__upper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  border-bottom: 1px solid #FFFFFF1A;
  padding: 21px 0;
}

/* ===== Footer Links Block ===== */
.footer-links-block {
  flex: 1;
}

/* ===== Footer Info Block ===== */
.footer-info-block ul {
  display: flex;
  gap: 20px;
}

/* ===== Footer Column Titles ===== */
.footer-links-block h4,
.footer-info-block h4 {
  margin: 0 0 6px;
  color: var(--color1);
  font-size: 13px;
  font-family: peydawebbold;
  line-height: 22px;
}

/* ===== Footer Links List ===== */
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  gap: 20px;
}


/* ===== Footer Links Anchor ===== */
.footer-links a {
  color: var(--color3);
  font-size: 13px;
  line-height: 22px;
  font-family: peydaweb;
  text-decoration: none;
  transition: color 0.3s ease, padding-right 0.3s ease;
}
/* ===== Footer Links Hover ===== */
.footer-links a:hover {
  color: var(--color1);
  padding-right: 1px;
}

/* ===== Footer Working Hours Text ===== */
.footer-info-block p {
 color: var(--color3);
  font-size: 12px;
  line-height: 22px;
  font-family: peydaweb;
}

/* ===== Footer Lower Contact Row ===== */
.footer-mid__lower {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 17px;
  padding-top: 32px;
}

.working-days {
    display: inline-flex;
    gap: 20px;
}


/* ===== Footer Contact Item ===== */
.footer-contact-item {
  flex: 1;
  min-width: 0;
  position: relative;
}
.footer-contact-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 45px;
  background: #FFFFFF1A;
}

/* ===== Footer Contact Label ===== */
.contact-label {
  display: block;
  line-height: 22px;
  color: var(--color3);
  font-size: 13px;
  font-family: peydawebbold;
  margin-bottom: 10px;
}

/* ===== Footer Contact Value ===== */
.contact-value {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color3);
  font-size: 14px;
  font-family: peydaweb;
  /* line-height: 1.8; */
}

/* ===== Footer Contact Icon ===== */
.contact-value i {
  width: 11px;
  height: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
}
/* ===== Footer Contact Icon Image ===== */
.contact-value i img {
  width: 11px;
  height: 11px;
  object-fit: contain;
  display: block;
}


/* ===== Footer Address Item ===== */
.footer-contact-item:last-child {
  flex: 1.6;
}
/* ===== Footer Bottom Row ===== */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0 5px 0;
  border-top: 1px solid #FFFFFF1A;
}

/* ===== Footer Copyright Text ===== */
.footer-bottom__copy p {
  margin: 0;
  color: var(--color3);
  font-size: 12px;
  font-family: peydaweb;
  line-height: 22px;
}
/* ===== Footer Legal Links ===== */
.footer-bottom__links a {
  color: var(--color3);
  font-size: 12px;
  font-family: peydaweb;
  line-height: 22px;
}
/* ===== Footer Legal Link Hover ===== */
.footer-bottom__links a:hover {
  color: var(--color1);
}


.menumb {
    display: none;
}


/* مدال اصلی */
.story-viewer-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(22 28 79 / 52%);
    z-index: 999999;
    font-family: sans-serif;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease;
}

.story-viewer-modal.active {
    opacity: 1;
    visibility: visible;
}

/* کانتینر محتوای استوری */
.story-viewer-content {
    position: relative;
    width: auto;
    max-width: 450px;
    height: 70%;
    background-color: #00000029;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(0);
    transition: transform 0.3s cubic-bezier(0.1, 0.8, 0.25, 1);
    border-radius: 15px;
}

.story-viewer-modal.active .story-viewer-content {
    transform: scale(1) translateY(0);
}

/* نوارهای پیشرفت در بالا */
.story-progress-container {
    position: absolute;
    top: 12px;
    left: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
    z-index: 10;
    transition: opacity 0.2s ease; /* برای انیمیشن مخفی شدن */
}

.story-progress-item {
    flex: 1;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.35);
    border-radius: 2px;
    overflow: hidden;
}

/* نوار پرکننده (بدون ترانزیشن برای هماهنگی با جاوااسکریپت) */
.story-progress-fill {
    height: 100%;
    width: 0%;
    background-color: #ffffff;
    will-change: width;
}

/* هدر و دکمه بستن */
.story-header {
    position: absolute;
    top: 25px;
    right: 15px;
    z-index: 12;
    transition: opacity 0.2s ease; /* برای انیمیشن مخفی شدن */
}

.story-close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 35px;
    cursor: pointer;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* --- مخفی شدن UI هنگام نگه داشتن دست روی عکس --- */
.story-viewer-modal.hide-ui .story-progress-container,
.story-viewer-modal.hide-ui .story-header {
    opacity: 0;
}

/* --- لودینگ اسپینر --- */
.story-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 20;
    display: none;
}

.story-loader.active {
    display: block;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* عکس اصلی استوری */
.story-image-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.story-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

.story-image-wrapper img.active-img {
    opacity: 1;
    transform: scale(1);
}

/* نواحی لمس/کلیک روی عکس */
.story-nav-area {
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 5;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* 30 درصد سمت چپ برای استوری قبل (راست‌چین شده توسط خودت) */
.story-nav-area.left-area {
    right: 0;
    width: 25%;
}

/* 70 درصد سمت راست برای استوری بعد (راست‌چین شده توسط خودت) */
.story-nav-area.right-area {
    left: 0;
    width: 25%;
}

/* 40 درصد وسط برای لینک */
.story-nav-area.middle-area {
    left: 30%;
    width: 40%;
    z-index: 6;
    display: none;
}

/* دکمه لینک (در صورت استفاده) */
.story-external-link {
    display: none;
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    padding: 12px 28px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 14px;
    z-index: 10;
    border: 1px solid rgba(255,255,255,0.2);
    opacity: 0;
    transition: all 0.3s ease;
}

.story-external-link.active {
    display: block;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

li.c-feature-list__item:hover .c-feature-list__title {color: var(--color2);}


.footer-copyright-links {display: flex;gap: 14px;}
.footer-copyright-links li:not(:last-child)::after {
    content: "/";
    color: inherit; 
    opacity: 0.5; 
    position: relative;
    left: -5px;
    top: 2px;
}

.footer-info-block img {
    height: 70px;
}

.footer-info-block a {
    background: #8A919D;
    display: block;
    padding: 10px;
    border-radius: 10px;
}


/* تنظیمات کلی منو */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgb(255 249 237 / 0%);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  z-index: 9998;
}

.mobile-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-side-menu {
  position: fixed;
  top: 0;
  right: -100%; /* شروع از سمت چپ */
  width: 320px;
  max-width: 85vw; /* برای گوشی‌های خیلی کوچک */
  height: 100vh;
  background-color: #FFF9ED; /* رنگ درخواستی شما */
  z-index: 9999;
  display: flex;
  flex-direction: column;
  transition: right 0.6s cubic-bezier(0.77, 0, 0.175, 1); /* انیمیشن بسیار نرم */
  box-shadow: 15px 0 40px rgba(0,0,0,0.15);
}

.mobile-side-menu.open {
  right: 0; /* باز شدن به سمت راست */
}

/* هدر منو */
.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 17px;
  border-bottom: 1px solid rgba(197, 160, 89, 0.2);
  background: #fff; /* کمی روشن‌تر برای تفکیک */
}

.mobile-brand img {
  max-height: 40px;
  width: auto;
}

.close-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  transition: transform 0.3s;
  position: relative;
  left: -11px;
  top: 4px;
}

.close-menu-btn:hover {
  transform: rotate(90deg) scale(1.1);
}

/* بخش محتوا و اسکرول */
.mobile-menu-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mobile-menu-body::-webkit-scrollbar {
  width: 4px;
}
.mobile-menu-body::-webkit-scrollbar-thumb {
  background: #c5a059;
  border-radius: 4px;
}

/* استایل فهرست وردپرس (آکاردئون) */
.mobile-wp-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-wp-nav li {
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.mobile-wp-nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 15px;
  color: #2c2c2c;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  transition: all 0.3s;
}

.mobile-wp-nav a:hover, .mobile-wp-nav li.active > a {
  color: #c5a059;
  background: rgba(197, 160, 89, 0.05);
}

/* فلش برای منوهای دارای زیرمنو */
.mobile-wp-nav .menu-item-has-children > a::after {
  content: '+';
  font-size: 15px;
  color: #c5a059;
  transition: transform 0.3s;
}

.mobile-wp-nav .menu-item-has-children.active > a::after {
  transform: rotate(45deg);
}

/* زیرمنوها (پنهان به صورت پیش‌فرض برای افکت آکاردئون) */
.mobile-wp-nav .sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background: rgba(0,0,0,0.02);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.mobile-wp-nav .sub-menu a {
  padding: 12px 40px 12px 20px;
  font-size: 14px;
  color: #555;
}

/* بخش بنرها */
.mobile-menu-banners {
  padding: 30px 15px;
}

.banners-title {
  font-size: 14px;
  color: #999;
  margin-bottom: 15px;
  position: relative;
}


a.menu-banner-item.social-ads__item--bale {margin-top: 20px;display: block;}

/* تنظیمات پایه هدر شما (اگر از قبل position دارد نیازی به تغییر نیست) */
.main-header {
  width: 100%;
  z-index: 999;
  transition: background-color 0.3s ease;
}

/* استایل هدر در زمان اسکرول کردن */
.main-header.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  /* در حالت اسکرول حتما باید پس‌زمینه رنگ داشته باشد تا محتوا از زیر آن دیده نشود */
  background-color: #FFF9ED; 
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* سایه بسیار شیک و ملایم */
  /* اجرای انیمیشن حرکت نرم از بالا به پایین */
  animation: slideDownSmooth 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* فریم‌های انیمیشن پایین آمدن */
@keyframes slideDownSmooth {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}


/* مخفی کردن منوی پایین در دسکتاپ (اختیاری اما توصیه شده) */
@media (min-width: 769px) {
  .mobile-bottom-nav, .bottom-search-box {
    display: none !important;
  }
}

/* تنظیمات اصلی منوی پایین */
.mobile-bottom-nav {
  position: fixed;
  bottom: -1px;
  left: 0;
  width: 100%;
  background: #fff9ed;
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.08);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  z-index: 1000;
  padding: 5px 10px 2px;
  
  transform: translateY(150%); /* هل دادن منو به بیرون از کادر پایین */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); /* سرعت هماهنگ با هدر بالا */
}
.mobile-bottom-nav.is-visible {
  transform: translateY(0); /* بازگشت به جای اصلی */
}
.bottom-nav-list {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* آیتم‌های عادی منو */
.nav-item {
  flex: 1;
  text-align: center;
}

.nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #777;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  transition: color 0.3s ease;
}

.nav-link svg {
  margin-bottom: 4px;
  transition: transform 0.3s ease, stroke 0.3s ease;
  width: 21px;
  height: auto;
  fill: var(--color1);
}




/* ==================================
   استایل دکمه دایره‌ای وسط (خدمات)
=================================== */
.nav-item-center {
  flex: 1.2; /* کمی فضای بیشتر برای دکمه وسط */
}

.center-circle {
  position: relative;
  /* top: -20px; */ /* کشیدن دکمه به سمت بالا */
}

.center-circle .circle-btn {
  width: 54px;
  height: 54px;
  background: linear-gradient(135deg, #d4b475, #c5a059);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(197, 160, 89, 0.4);
  /* حاشیه سفید برای ایجاد افکت برش روی منو */
  border: 6px solid #FFF9ED;
  margin-bottom: 5px;
  transition: transform 0.3s ease;
  bottom: 6px;
  position: relative;
}

.center-circle:hover .circle-btn {
  transform: translateY(-5px) scale(1.05);
}

.center-circle span {
  color: var(--color1); /* رنگ متن خدمات */
  font-weight: 700;
  font-size: 13px;
}

/* ==================================
   باکس جستجوی پاپ‌آپ
=================================== */
.bottom-search-box {
  position: fixed;
  bottom: 90px; /* قرارگیری بالای منو */
  left: 5%;
  width: 90%;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  padding: 10px;
  z-index: 999;
  /* انیمیشن مخفی بودن */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* افکت جهش نرم */
}

/* کلاسی که با جاوااسکریپت اضافه می‌شود */
.bottom-search-box.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.bottom-search-form {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 10px;
  padding: 5px 15px;
}

.bottom-search-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 0;
  font-family: inherit;
  font-size: 14px;
  color: #333;
  outline: none;
}

.bottom-search-submit {
  background: none;
  border: none;
  color: #c5a059;
  cursor: pointer;
  padding: 5px;
}
/* ==================================
   انیمیشن نبض برای دکمه تماس با ما
=================================== */
.call-to-action-pulse {
  /* تنظیم انیمیشن برای اجرای بی‌نهایت و نرم */
  animation: ripple-pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes ripple-pulse {
  0% {
    /* شروع از حالت عادی */
    box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.7), 0 8px 20px rgba(197, 160, 89, 0.4);
    transform: scale(1);
  }
  40% {
    /* کمی بزرگ شدن مثل تپش قلب */
    transform: scale(1.06);
  }
  100% {
    /* پخش شدن سایه به بیرون و محو شدن آن */
    box-shadow: 0 0 0 15px rgba(197, 160, 89, 0), 0 8px 20px rgba(197, 160, 89, 0.4);
    transform: scale(1);
  }
}
a.nav-link.center-circle {position: absolute;left: 0;right: 0;bottom: 2px;width: 90px;margin: 0 auto;}

a.nav-link.center-circle svg {
    width: 20px;
    height: 19px;
    position: relative;
    top: 2px;
    fill: #fff;
}
a.nav-link.center-circle svg path {
    fill: #fff;
}
/* تنظیمات بدنه دکمه */
.progress-wrap {
  position: fixed;
  right: 25px; /* فاصله از راست */
  bottom: 25px; /* قرارگیری بالای منوی موبایل */
  height: 50px;
  width: 50px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  box-shadow: inset 0 0 0 2px rgba(197, 160, 89, 0.2); /* هاله کمرنگ طلایی در پس‌زمینه دایره */
  z-index: 999;
  /* انیمیشن محو و ظاهر شدن */
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 200ms linear;
  background-color: #FFF9ED; /* رنگ پس‌زمینه دکمه */
}

/* کلاسی که وقتی اسکرول کردیم اضافه می‌شود تا دکمه دیده شود */
.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* استایل خط دایره‌ای (Progress Bar) */
.progress-wrap path {
  fill: none;
  stroke: #c5a059; /* رنگ نوار پر شونده */
  stroke-width: 4;
  box-sizing: border-box;
  transition: all 200ms linear;
}

/* استایل آیکون فلش وسط */
.progress-wrap .arrow-up-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* وسط چین کردن دقیق */
  color: #c5a059;
  transition: transform 0.3s ease;
}




/* ==============================================
      single-service-page
   ==============================================*/

   /* Bottom border restricted to container width for single service page */

.single-ser header .container {
    border-bottom: 1px solid rgba(197, 160, 89, 0.21);
    padding-bottom: 25px;
}

/* استایل خود هدر */
.single-ser header {
    background-color: #FFF9ED;
    border-bottom: none; 
}
/* ==============================================
      single-intro
   ==============================================*/

/* ===== Single Intro Section Wrapper ===== */
.single-intro__wrapper {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding: 15px 0;
  direction: rtl;
}
.single-intro {
   background-color: #FFF9ED;
   position: relative;
   z-index: 1;
}
/* ===== Content Side 55% Width ===== */
.single-intro__content {
  width: 60%;
}

/* ===== Media Side 45% Width ===== */
.single-intro__media {
  width: 43%;
}

/* ===== Media Frame Container ===== */
.single-intro__media .media-frame {
  position: relative;
  z-index: 1;
  box-shadow: 0px 0px 10px #00000014;
  border-radius: 20px;
}
/* ===== Gold Background Layer for Image ===== */
.single-intro__media .media-frame::before {
  content: "";
  position: absolute;
  top: -4px; 
  left: 13px; 
  width: 98%;
  height: 100%;
  background-color: var(--color1); 
  border-radius: 25px;
  z-index: -1;
}

/* ===== Intro Image Styles ===== */
.intro-img {
  width: 100%;
  display: block;
  border-radius: 25px;
  height: auto;
}
/* ===== Main Title Style ===== */
.single-intro__title {
  color: var(--color2);
  font-family: peydawebExtraBold;
  font-size: 32px;
  margin-bottom: 19px;
}

/* ===== Info Box Styling ===== */
.single-intro__info-box {
  display: flex;
  gap: 30px;
  padding: 3px 11px;
  border-radius: 10px;
  background-color: #F9F0DE;
  margin-bottom: 10px;
  position: relative;
}
.single-intro__info-box::before {
    content: '';
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0;
    z-index: -1;
    margin: -1px;
    border-radius: 10px;
    background: linear-gradient(to left, #C5A059 0%, #fff0d2 50%, #C5A059 100%);
}



/* ===== Info Item Container ===== */
.info-item {
  display: flex;
  align-items: center;
  gap: 5px; 
}

/* ===== Icon Styling ===== */
.info-icon {
  width: 20px;      
  height: 20px;
  object-fit: contain;
}

/* ===== Text Labels and Content ===== */
.info-label {
  font-family: 'PeydaWebsemibold';
  color: var(--color1); 
  font-size: 13px;
  line-height: 40px; 
}

.info-text {
  color: #2c2c2c;
  font-size: 13px;
  font-family: peydaweb;
}

/* ===== Intro Description Text ===== */
.single-intro__text p {
  line-height: 40px;
  font-size: 14px;
  text-align: justify;
  color: #2c2c2c;
}

/* ===== Gold Highlighted Span ===== */
.gold-span {
  color: var(--color1);
  font-family: peydawebBold;
}




/* ==============================================
       cta-bar
   ==============================================*/


/* ===== CTA Bar Section Container ===== */
.cta-bar {
  position: relative;
  margin-bottom: 30px;
}
.cta-bar::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 50%;
  background-color:  #FFF9ED;
  z-index: -1;
}


/* ===== CTA Content Wrapper ===== */
.cta-bar__content {
  background-color: var(--color1);
  border-radius: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  color: var(--color3);
  /* height: 110px; */
}

/* ===== Text Side Styles ===== */
.cta-text {
  font-family: peydawebbold;
  font-size: 20px;
  line-height: 46px;
}

.brand-name {
  font-family: 'PeydaWebextrabold';
  color: var(--color2);
}

/* ===== Phone Side Styles ===== */
.cta-phone {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color3);
  transition: transform 0.3s ease;
  flex-direction: row-reverse;
}

.cta-phone:hover {
}

.cta-phone__icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.cta-phone__number {
  font-family:  'PeydaWebextrabold';
  font-size: 24px;
  color: #fff;
}


/* ==============================================
       testimonials-service
   ==============================================*/

.testimonials-service {
    position: relative;
    overflow: hidden;
    margin: 70px 0px 19px 0px;
}
.testimonials-sertitle {
    color: var(--color2);
    font-family: peydawebExtraBold;
    font-size: 34px;
    margin-bottom: 0px;
}
.testimonial-gold {
    color: var(--color1);
}

.testimonial-img {
    position: relative;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
}
.testimonial-img::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(17, 30, 56, 0) 43.25%, #111E38 100%);
}
.testimonial-card__img {
 width: 100%;
 height: auto;
  transition: transform 0.4s ease; 
}


.testimonial-img:hover .testimonial-card__img {
 transform: scale(1.08); 
}






.testimonials-service .owl-dots {
    text-align: center;
    margin-top: 30px;
    display: block !important;
}

/* Base dot for this section */
.testimonials-service .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px;
    display: block;
    border-radius: 50%;
    /* 40% opacity of #111E38 */
    background: rgba(17, 30, 56, 0.4) !important; 
    transition: all 0.3s ease;
}

/* Active dot for this section */
.testimonials-service .owl-dots .owl-dot.active span {
    /* Full color #111E38 */
    background: #111E38 !important; 
    transform: scale(1.2);
}

/* Hover state for this section */
.testimonials-service .owl-dots .owl-dot:hover span {
    background: rgba(17, 30, 56, 0.7) !important;
}


/* =========================================================
   Consultation Section
   ========================================================= */

/* ===== Main Section Container ===== */
.consultation-section {
    padding: 45px 0;
    direction: rtl;
}

/* Wrapper for Sidebar + Main Content */
.consultation-wrapper {
    display: flex;
    gap: 20px;
    align-items: stretch;
}


/* ==========================
   Sidebar (Right Side - 30%)
   =========================== */

.consultation-sidebar {
    width: 25%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Form Content Width */
.consultation-form-content {
    width: 63%;
    padding-left: 30px;
}


/* =======================
   Contact Card (Blue Box)
   ======================= */

.contact-cards {
    background-color: var(--color2);
    border-radius: 25px;
    padding: 45px 0px 40px 0px;
    color: var(--color3);
    position: relative;
    gap: 10px;
    display: flex;
    flex-direction: column;
}
.contact-cards:before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url(assets/images/phonelist-bg.svg);
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    pointer-events: none;
    z-index: 1;
}


/* Card Title */
.card-title {
    font-family: peydawebBold;
    font-size: 25px;
    margin-bottom: 0;
    text-align: center;
    line-height: 34px;
}

/* Card Subtitle */
.card-subtitle {
    font-size: 11px;
    margin-bottom: 6px;
    text-align: center;
    margin: 0;
}

/* Brand Gold Text */
.brand-gold {
    color: var(--color1);
}

/* Phone Icon */
.phonimg img {
    width: 22px;
    height: 22px;
}

/* Phone List Container */
.phone-list {
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-content: flex-end;
    align-items: center;
    margin-top: 25px;
}

/* Phone Row */
.phone1,
.phone2 {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

/* Phone Number Text */
.phone-list span {
    font-size: 21px;
    line-height: 20px;
    color: var(--color1);
    font-family: 'PeydaWebextrabold';
    letter-spacing: 3px;
}


/* ============
   Social Icons
   ============= */

/* Social Icons Container */
.social-icons {
    display: flex;
    gap: 15px;
    justify-content: flex-start;
    margin-top: 10px;
}

/* Social Icons Image */
.social-icons img {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

/* Hover Effect */
.social-icons img:hover {
    transform: scale(1.1);
}


/* =======================
   Social Card (Gold Box)
   ========================*/

.social-card {
    background-color: var(--color1);
    border-radius: 25px;
    color: var(--color3);
    display: flex;
    flex-direction: column;
    padding: 20px 15px 14px 15px;
    align-items: center;
    text-align: center;
    position: relative;
    gap: 10px;
}
.social-card:before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url(assets/images/socialcard-bg.svg);
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    pointer-events: none;
    z-index: 1;
}


/* Social Icons Wrapper */
.social-icons-wrapper {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

/* Social Icon Link */
.social-icons-wrapper a {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================
   Consultation Main Section
   ==========================*/

.consultation-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    padding: 20px 33px 0px 33px;
    background-color: #E9EBEC;
    border-radius: 25px;
    position: relative;
    width: 75%;
}

/* Gradient Border Effect */
.consultation-main::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -1px;
    border-radius: 25px;
    background: linear-gradient(to bottom, #ffffff 40%, #111E38);
}


/* ==========================
   Consultation Form Content
   ========================== */

.consultation-form-content {
    flex: 1;
    padding: unset;
    padding: 15px 0 18px 0;
}


/* ==============
   Titles & Text
   =============== */

/* Main Title */
.main-title {
    font-size: 30px;
    color: var(--color2);
    margin-bottom: 5px;
    font-family: 'PeydaWebextrabold';
}

/* Brand Gold Text */
.brand-gold {
    color: var(--color1);
    font-weight: bold;
}

/* Description Text */
.main-desc {
    font-size: 12px;
    color: var(--color5);
    line-height: 27px;
    margin-bottom: 10px;
}


/* ==============
   Form Layout
   =============*/

/* Main Form Container */
.main-form {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

/* Row (Name + Phone) */
.form-row {
    display: flex;
    gap: 15px;
    margin: unset;
}

/* Form Group */
.form-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-bottom: 0;
    gap: 8px;
}

/* Form Label */
.form-group label {
    font-size: 12px;
    color: var(--color2);
    line-height: 19px;
    font-family: peydawebBold;
    margin: 0;
}


/* ============
   Form Inputs
   ============= */

/* Text Inputs */
.form-group input {
    background-color: #C2C6CB;
    border: none;
    border-radius: 50px;
    padding: 9px 20px;
    width: 100%;
    outline: none;
    text-align: right;
    direction: rtl;
}

/* Textarea */
.form-group textarea {
    background-color: #C2C6CB;
    border: none;
    border-radius: 20px;
    padding: 15px 20px;
    width: 100%;
    height: 80px;
    resize: none;
    outline: none;
}

/* Input Text Color */
.form-group input,
.form-group textarea {
    color: #333;
}

/* Placeholder Style */
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #8A8888;
    font-size: 11px;
    font-family: peydaweb;
}


/* ===================
   Consultation Button
   ====================*/

.consultation-btn {
    text-align: right;
    margin-top: 15px;
}


/* =========================
   Consultant Image Section
   ======================== */

/* Image Container */
.consultation-image-box {
    position: relative;
    width: 37%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* Consultant Image */
.consultant-img {
    width: 285px;
    height: auto;
    position: relative;
    z-index: 2;
}

/* Background Shape Behind Image */
.consultation-image-box::before {
 content: "";
 position: absolute;
 bottom: -30px;
 left: 48%;
 transform: translateX(-50%);
 width: 95%;
 height: 103%;
 background: linear-gradient(180deg, rgba(17, 30, 56, 0.2) 0%, rgba(17, 30, 56, 0) 100%);
 border-radius: 200px 200px 0 0;
 z-index: 1;
}


/* ===== Consultation Separator ===== */
.consultation-separator {
    position: relative;
    width: 100%;
    max-width: 1196px;
    height: 24px;
    margin: 30px auto;
}

.consultation-separator::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    transform: translateY(-50%);
    background-image: repeating-linear-gradient(
        to right,
        #C2C6CB 0,
        #C2C6CB 10px,
        transparent 10px,
        transparent 18px
    );
    z-index: 1;
}

.consultation-separator::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 33px;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    background-image: url("assets/images/logoicon.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 46px 33px;
    padding: 0 14px;
    z-index: 2;
}

/* =========================================================
   clinic-details-section
   ========================================================= */


   /* ===== Main Layout ===== */
.clinic-details-section {
    width: 100%;
    padding: 30px 0 40px;
}

.content-layout-wrapper {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* ===== Right Column ===== */
.main-content-column {
    width: 75%;
}

.main-box {
    width: 100%;
    min-height: 850px;
    background: var(--color3);
    border-radius: 20px;
    position: relative;
}
.main-box::before {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: 0;
    left: -1px;
    z-index: -1;
    margin: -1px;
    border-radius: 20px;
    background: linear-gradient(to top, #ffffff 70%, #C5A059);
}
.main-box::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -1px;
    border-radius: 20px;
    background: linear-gradient(to bottom, #ffffff 70%, #C5A059);
}


/* ===== Author Bar ===== */
.author-meta-bar {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    margin-top: 12px;
    background: #fff9ed;
    color: #313131;
    padding: 15px 16px;
    border-radius: 14px;
    font-size: 14px;
    direction: rtl;
    font-family: peydawebsemibold;
}
.author-details,
.post-stats {
    white-space: nowrap;
}

.author-details span, .post-stats span , .post-date span {
    font-family: peydaweb;
    font-size: 13px;
}

.post-stats::before , .post-date::before {
    content: "";
    position: absolute;
    right: -11px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 24px;
    background-color: rgb(197 160 89);
}
.post-stats {
   position: relative; 
}

/* ===== Left Column ===== */
.sidebar-column {
    width: 25%;
    position: sticky;
    top: 110px;
}

/* ===== Common Card ===== */
.recommended-card {
    background: #FFF9ED;
    border-radius: 20px;
    padding: 18px 16px;
    position: relative;
}
.recommended-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -1px;
    border-radius: 20px;
    background: linear-gradient(to bottom, #ffffff 8%, #C5A059);
}

.recommended-card {
    margin-bottom: 20px;
}

.card-title2 {
    margin: 0 0 16px;
    text-align: center;
    font-size: 18px;
    font-family: peydawebbold;
    color: var(--color1);
    position: relative;
    padding-bottom: 20px;
}
.card-title2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 5%; 
    width: 90%; 
    height: 1px;
    background-color: rgba(197, 160, 89, 0.21); 
}

/* ===== Recommended Posts ===== */
.posts-container {
    display: flex;
    flex-direction: column;
    /* gap: 14px; */
}

.sidebar-post-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}
.post-image-wrapper {
    flex: 0 0 58px;
    width: 58px;
    height: 41px;
    border-radius: 6px;
    overflow: hidden;
}

.post-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.post-content-wrapper {
    flex: 1;
}


.post-content-wrapper a {
    margin: 0;
    font-size: 12px;
    line-height: 25px;
    color: var(--color2);
    font-family: 'PeydaWebbold';
}

.post-content-wrapper a:hover {
    color: var(--color1);
}



/* =========================================================
     s-testimonials-text
   ========================================================= */

/* section */
.s-testimonials-text {
    padding: 0px 0;
    /* background: #ffffff; */
}

/* gray wrapper */
.testimonials-textbox {
    background-color: #E9EBEC;
    border-radius: 25px;
    padding: 37px 39px 27px 40px;
    position: relative;
    /* overflow: hidden; */
}
.testimonials-textbox::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -1px;
    border-radius: 25px;
    background: linear-gradient(to bottom, #ffffff 37%, #111E38);
}
.testimonials-textbox::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(assets/images/textbox-bg.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
    border-radius: 25px;
}

/* grid / carousel wrapper */
.t-testimonials-grid {
    margin-top: 40px;
}

/* item wrapper (for spacing) */
.t-card {
    padding: 0 10px;
}

/* inner card (blue box) */
.t-card__inner {
    background: var(--color2);
    border-radius: 20px;
    padding: 20px 28px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* stars */
.t-card__stars {
    margin-bottom: 5px;
    text-align: right;
}

/* stars image */
.t-card__stars img {
    width: 71px !important;
    height: 13px;
    display: inline-block !important;
}

/* testimonial text */
.t-card__content p {
    font-size: 11px;
    line-height: 21px;
    color: var(--color3);
    margin: 0 0 13px 0;
    text-align: justify;
    min-height: 63px;
}

/* footer */
.t-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-direction: row-reverse;
}

/* user info */
.t-card__user {
    display: flex;
    flex-direction: column;
    text-align: right;
}

/* user name */
.t-card__name {
    font-size: 13px;
    color: var(--color1);
}

/* surgery type */
.t-card__type {
    font-size: 10px;
    color: var(--color3);
    line-height: 19px;
}

/* avatar image */
.t-card__avatar img {
    width: 38px !important;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}





/* Dots wrapper only for text testimonials carousel */
.s-testimonials-text .js-t-text-carousel .owl-dots {
    text-align: center;
    margin-top: 20px;
    display: block !important;
}

/* Base dot */
.s-testimonials-text .js-t-text-carousel .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px;
    display: block;
    border-radius: 50%;
    background: rgba(17, 30, 56, 0.4) !important;
    transition: all 0.3s ease;
}

/* Active dot */
.s-testimonials-text .js-t-text-carousel .owl-dots .owl-dot.active span {
    background: #111E38 !important;
    transform: scale(1.2);
}

/* Hover */
.s-testimonials-text .js-t-text-carousel .owl-dots .owl-dot:hover span {
    background: rgba(17, 30, 56, 0.7) !important;
}



.single-ser .s-testimonials {
    margin: 40px 0px 30px 0px;
}


/* =========================================================
     s-faq
   ========================================================= */



/* FAQ Section */

.s-faq{
  padding: 60px 0;
}

.faq-box{
  position:relative;
}

/* accordion container */

.faq-accordion{
  width: 85%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item{
  position: relative;
  border-radius: 15px;
  background: #F9F0DE;
}
.faq-item::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -1px;
    border-radius: 15px;
    background: linear-gradient(to right, #ffffff 37%,  #C5A059);
}


/* header */

.faq-item__header{
  width:100%;
  background:none;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 24px;
  text-align:right;
  font-size: 13px;
  color:var(--color2);
  font-family: 'PeydaWebextrabold';
}


/* question */

.faq-item__question{
  flex:1;
  line-height:1.8;
  color: var(--color2); 
  transition: color 0.3s ease;
}

.faq-item.is-active .faq-item__question {
    color: var(--color1); 
}



/* icon */

.faq-item__icon{
  width:20px;
  height:20px;
  margin-right:16px;
  flex-shrink:0;

  position:relative;
  transition:transform .3s ease;
}

/* rotate when active */

.faq-item.is-active .faq-item__icon{
  transform:rotate(180deg);
  right: -5px;
}


/* body */

.faq-item__body{
   max-height: 0;
    overflow: hidden;
    position: relative;
    transition: max-height 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
    opacity: 0; 
}

.faq-item__body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background-color: #C5A0593D;
}  


/* active state */

.faq-item.is-active .faq-item__body{
     max-height: 400px; 
    opacity: 1; /
}

/* content */

.faq-item__content{
  padding: 10px 24px 10px 24px;
}

.faq-item__content p{
  margin:0;
  line-height: 30px;
  font-size: 13px;
  color: var(--color5);
}




/* ==========================================================================
   User Feedback Section
   ========================================================================== */

.s-feedback {
    padding: 40px 0;
    direction: rtl; /* Ensure RTL layout */
}

/* Section Header Styles */
.s-feedback .c-section-header {
    margin-bottom: 50px;
}

/* Form Layout Grid */
.feedback-form {
    margin: 0 auto;
    width: 85%;
}

.feedback-form__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 18px; 
}

/* Full-width wrapper for the Message textarea */
.feedback-form__group--full {
    grid-column: span 2;
    color: var(--color1);
}

/* Form Label Styling */
.feedback-form__label {
    display: block;
    font-size: 12px;
    color: var(--color2);
    line-height: 30px;
    font-family: 'PeydaWebsemibold';
    margin-bottom: 4px;
}

/* Common Styles for Inputs & Textarea */
.feedback-form__input,
.feedback-form__textarea {
    width: 100%;
    background-color: #C3C7CC;
    border: 2px solid transparent;
    padding: 12px 24px;
    font-size: 12px;
    color: #444; 
    font-family: 'peydaweb';
    outline: none;
    transition: all 0.3s ease-in-out;
}

/* Specific Border Radius for Inputs (Capsule) */
.feedback-form__input {
    border-radius: 50px;
}

/* Specific Border Radius for Textarea (20px as requested) */
.feedback-form__textarea {
    border-radius: 20px;
    min-height: 112px;
    resize: vertical;
}

/* Placeholder color styling */
.feedback-form__input::placeholder,
.feedback-form__textarea::placeholder {
    color: #8A8888;
}

/* Focus State */
.feedback-form__input:focus,
.feedback-form__textarea:focus {
    border-color: var(--color1); 
    background-color: #babfc4;
}

.feedback-form__actions {
    text-align: left;
    margin-top: 10px;
}

.feedback-form__actions .btn {
    display: inline-flex;
    padding: 10px 20px;
}


.wp-singular .main-header__inner , .category .main-header__inner {
    border-bottom: 1px solid #F3E6CE;
    padding-bottom: 25px;
}
span.doctor-specialty-span {
    font-size: 11px;
    border-right: 1px solid;
    padding-right: 6px;
    margin-right: 4px;
}

.main-header.is-sticky .main-header__inner {
    padding-bottom: 0;
    border-bottom: none;
}



.social-card svg {
    width: 17px;
}

.phone1 .phone-link span {
    letter-spacing: 5px;
}

.social-icons a:hover {  transform: translateY(-4px); }

/* ================== Main Blog Content ================== */
.main-box {
    box-shadow: 0px 3px 13px rgba(232, 232, 232, 0.6);
    border-radius: 20px;
    padding: 22px;
}

.main-box h1, .main-box h2, .main-box h3, .main-box h4, .main-box h5, .main-box h6 {
    font-weight: 700;
    color: var(--color1);
    margin-bottom: 15px;
    margin-top: 20px;
}

.main-box h1 {
    font-size: 30px;
    font-family: 'PeydaWebextrabold';
}

.main-box h2 {
    font-size: 24px;
    font-family: 'PeydaWebextrabold';
    color: #c59632 !important;
}

.main-box h3 {
    font-size: 22px;
    font-family: 'PeydaWebextrabold';
    background: #fff9ed;
    padding: 20px 15px;
    border-radius: 10px;
}

.main-box h4 {
    font-size: 19px;
    font-family: 'PeydaWebextrabold';
}

.main-box h5 {
    font-size: 17px;
    font-family: 'PeydaWebextrabold';
}

.main-box h6 {
    font-size: 15px;
    font-family: 'PeydaWebextrabold';
}

.main-box h4, .main-box h5, .main-box h6 {
     color: var(--color2) !important;
}

.main-box p {
    font-size: 16px;
    line-height: 32px;
    color: #424242;
    text-align: center;
}

.main-box li {
    font-size: 16px;
    line-height: 40px;
    text-align: right;
    color: #424242;
}

.main-box li:before {
    content: '';
    position: relative;
    width: 7px;
    height: 7px;
    background: var(--color1);
    display: inline-block;
    border-radius: 50px;
    margin-left: 10px;
}

.main-box ul {
    margin: 10px 0;
}

.main-box img {
    width: auto;
    clear: both;
    display: block;
    margin: 0 auto 1.75em;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    margin-bottom: 25px;
    border-radius: 20px;
}
  
.main-box a { 
    background-image: linear-gradient(-225deg,#424242 0%,#424242 29%,#c59632 67%,#c59632 100%);
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 2s linear infinite; 
    font-family: 'peydawebsemibold';
}

@keyframes textclip {
    to {
        background-position: 200% center;
    }
}

/* ایجاد فاصله از بالا هنگام اسکرول به لینک‌های لنگر (Anchor) */
h1, h2, h3, h4 { 
  scroll-margin-top: 80px; 
}

/* استایل باکس اصلی آکاردئون */
.toc-accordion {
  background: #fff9ed;
  border-radius: 16px;
  padding: 0px 20px;
  margin-bottom: 30px;
  border: 1px solid var(--color1);
}

/* عنوان آکاردئون (فهرست محتوا) */
.toc-acc-title {
  font-family: 'PeydaWebextrabold';
  font-size: 17px;
  color: var(--color1);
  position: relative;
  top: 2px;
}

/* بخش هدر آکاردئون (بخش قابل کلیک) */
.toc-acc-head {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 0;
}

/* آیکون فلش باز و بسته شدن */
.toc-acc-head::after {
  content: '';
  transition: transform .35s ease;
  opacity: .7;
  transform: rotate(-180deg);
  background: url('data:image/svg+xml,<svg width="102" height="57" viewBox="0 0 102 57" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M50.5498 56.7234C48.7379 56.7234 46.9262 56.0425 45.5448 54.6834L2.07398 11.896C-0.69133 9.17419 -0.691329 4.76124 2.07398 2.04053C4.83818 -0.680177 9.32076 -0.680176 12.0863 2.04053L50.5498 39.9012L89.0136 2.04187C91.7789 -0.678839 96.261 -0.678838 99.025 2.04187C101.792 4.76258 101.792 9.17553 99.025 11.8973L55.5549 54.6848C54.1728 56.044 52.3611 56.7234 50.5498 56.7234Z" fill="%23367061"/></svg>');
  background-size: 100%;
  width: 13px;
  height: 7px;
  filter: brightness(0);
}

/* چرخش آیکون در حالت بسته بودن */
.toc-accordion.is-collapsed .toc-acc-head::after {
  transform: rotate(0deg);
}

/* نگهدارنده لیست لینک‌ها (محتوای آکاردئون) */
.toc-group-content {
  overflow: hidden;
  height: auto;
  transition: height .35s ease;
  will-change: height;
}

/* استایل لیست‌ها و آیتم‌ها */
.toc-list {
  list-style: none;
  padding: 0;
  margin: 0 !important;
}

.toc-li {
  line-height: 40px !important;
}

.toc-link { 
  text-decoration: none; 
  color: #333; 
}

/* تنظیم فاصله‌های زیرشاخه‌ها */
.toc-l2 {
  padding-right: 0;
}

.toc-l3 {
  padding-right: 0;
}

ul.toc-list.toc-l1 {
  border-top: 1px solid #00000014;
  padding-top: 10px;
  padding-bottom: 15px;
}

/* غیرفعال کردن انیمیشن برای کاربرانی که موشن رو بستن */
@media (prefers-reduced-motion: reduce) {
  .toc-group-content, .toc-acc-head::after { 
    transition: none; 
  }
}
.realation-blog__row > h3 {
    text-align: center;
    color: var(--color2);
    font-family: peydawebExtraBold;
    font-size: 34px;
    margin-bottom: 0px;
    margin-bottom: 20px;
}

.realation-blog {
    margin-top: 70px;
    margin-bottom: 70px;
}
/* باکس اصلی هر کامنت */
.custom-comment-box {
    background-color: #EFEFEF; /* رنگ خاکستری روشن پس زمینه */
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 20px;
    direction: rtl;
    text-align: right;
     /* فونت استفاده شده در دیزاین */
    position: relative;
}

/* رنگ متفاوت برای کامنت‌های پاسخ داده شده (رنگ کرم رنگ تصویر) */
.bypostauthor .custom-comment-box, 
.depth-2 .custom-comment-box {
    background-color: #F8F1E4; /* رنگ کرم روشن */
}

/* بخش هدر (نام و تاریخ) */
.custom-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.05); /* خط کمرنگ زیر هدر در صورت نیاز */
    padding-bottom: 12px;
}

.comment-author-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    color: #333;
}

.comment-post-date {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #888;
    font-size: 0.9em;
    flex-direction: row; /* برای اینکه آیکون سمت راست تاریخ بیفتد */
}

/* بخش متن کامنت */
.custom-comment-content p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 14px;
}

/* بخش فوتر (دکمه پاسخ) */
.custom-comment-footer {
    display: flex;
    justify-content: flex-end; /* دکمه پاسخ را میبرد سمت چپ (در حالت RTL) */
}

/* استایل دکمه پاسخ مشابه تصویر */
.custom-comment-footer .comment-reply-link {
    background-color: #1A202C; /* رنگ تیره دکمه */
    color: #fff;
    padding: 5px 26px;
    border-radius: 30px; /* دکمه کپسولی */
    text-decoration: none;
    font-size: 13px;
    transition: all 0.3s ease;
}

.custom-comment-footer .comment-reply-link:hover {
    background-color: #333;
}

/* رنگ دکمه پاسخ در کامنت‌های کرم رنگ */
.depth-2 .comment-reply-link {
    background-color: #CBA572; /* رنگ خردلی/طلایی تصویر برای پاسخ‌ها */
}
ul.comment-list {
    width: 85%;
    margin: 0 auto;
}
i.agh-profile svg {
    display: block;
    width: 22px;
    height: auto;
}

i.agh-calendar svg {
    display: block;
    width: 20px;
    height: auto;
}

.comment-post-date span {
    line-height: 10px;
    position: relative;
    top: 1px;
}
div#reply-title a {
    width: 85%;
    margin: 0 auto;
    background: #fff9ed;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    font-size: 17px;
    display: block;
}

div#reply-title a {
    color: var(--color1);
    font-family: PeydaWebBold;
}

.custom-comment-box:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -1px;
    border-radius: 20px;
    background: linear-gradient(to top, #ffffff 7%, #111E38);
}
ul.children {
    padding-right: 50px;
}

ul.children i.agh-profile svg path {stroke: var(--color1) !important;}

ul.children .comment-author-name {
    color: var(--color1);
}

ul.children  .custom-comment-box:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -1px;
    border-radius: 20px;
    background: linear-gradient(to top, #ffffff 7%, #cba572);
}

ul.children  i.agh-calendar svg path {stroke: var(--color1);}

ul.children  .comment-post-date span {
    color: var(--color1);
}


/* استایل‌های پایه و عمومی جدول */
table, th, td {
  border: 1px solid;
  padding: 0 11px;
  text-align: center;
}

table {
  margin: 0 auto;
  width: 100% !important;
  border-collapse: collapse;
  direction: rtl;
  text-align: right;
  background: #ead9bb2b;
  border: 1px solid color-mix(in srgb, var(--color1) 35%, #ffffff);
  border-radius: 10px;
  overflow: hidden;
  margin: 40px 0;
}


/* استایل هدر جدول (Thead) */
thead th {
  background: var(--color1);
  color: #fff !important;
  font-weight: 700;
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--color1) 30%, #ffffff);
  white-space: nowrap;
}

/* استایل بدنه جدول (Tbody) */
tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--color1) 18%, #ffffff);
  color: #374151;
  vertical-align: top;
  font-size: 15px;
  border-color: #c5a0593d;
}

tbody tr:last-child td { 
  border-bottom: none; 
}

/* افکت هاور روی ردیف‌ها */
tbody tr:hover {
  background: color-mix(in srgb, var(--color1) 55%, #ffffff);
}

/* تنظیم عرض ستون‌ها */
th:nth-child(1), td:nth-child(1) {
  font-weight: 600;
  color: var(--color1);
  text-align: center;
}

th:nth-child(2), td:nth-child(2) {
  text-align: center;
}

th:nth-child(3), td:nth-child(3) {
  text-align: center;
}
blockquote {
    background: #e9ebec;
    padding: 30px 20px;
    border-radius: 20px;
    border: 1px solid var(--color2);
    position: relative;
    color: #111e38;
    background-image: url(assets/images/bq-bg.svg);
    margin: 40px 0 50px 0;
    background-size: cover;
}

blockquote:before {
    content: '';
    position: absolute;
background: url('data:image/svg+xml,<svg width="39" height="31" viewBox="0 0 39 31" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.87624 30.8373C7.802 30.5069 6.92503 29.3179 6.92503 28.1888C6.92503 26.9896 7.95963 25.6583 8.89622 25.6516C9.95167 25.6444 12.7205 24.6842 12.9723 24.2376C13.1084 23.9968 13.2224 23.0806 13.224 22.2027C13.2316 19.706 12.8566 19.5566 6.6889 19.5949C1.01666 19.6322 0.444325 19.4737 0.162955 17.7928C-0.224887 15.4627 0.142574 1.14996 0.606838 0.520194C1.00547 -0.017694 1.70592 -0.0600024 8.77902 0.0475352C16.3636 0.161869 16.5293 0.17939 17.1985 0.933553L17.8817 1.70377V14.6676C17.8817 29.1684 17.955 28.6584 15.6552 30.1728C14.6809 30.8161 10.2239 31.2524 8.87624 30.8373Z" fill="%23111e38"/><path d="M29.6936 30.8373C28.6193 30.5069 27.7424 29.3179 27.7424 28.1888C27.7424 26.9896 28.777 25.6583 29.7136 25.6516C30.769 25.6444 33.5379 24.6842 33.7897 24.2376C33.9257 23.9968 34.0398 23.0806 34.0414 22.2027C34.049 19.706 33.6739 19.5566 27.5062 19.5949C21.834 19.6322 21.2616 19.4737 20.9803 17.7928C20.5924 15.4627 20.9599 1.14996 21.4242 0.520194C21.8228 -0.017694 22.5233 -0.0600024 29.5964 0.0475352C37.181 0.161869 37.3467 0.17939 38.0159 0.933553L38.6991 1.70377V14.6676C38.6991 29.1684 38.7724 28.6584 36.4726 30.1728C35.4983 30.8161 31.0412 31.2524 29.6936 30.8373Z" fill="%23111e38"/></svg>');
    width: 50px;
    height: 40px;
    background-size: 100%;
    background-repeat: no-repeat;
    right: 20px;
    bottom: -15px;
    /* transform: rotate(180deg); */
}

blockquote:after {
    content: '';
    position: absolute;
background: url('data:image/svg+xml,<svg width="39" height="31" viewBox="0 0 39 31" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.87624 30.8373C7.802 30.5069 6.92503 29.3179 6.92503 28.1888C6.92503 26.9896 7.95963 25.6583 8.89622 25.6516C9.95167 25.6444 12.7205 24.6842 12.9723 24.2376C13.1084 23.9968 13.2224 23.0806 13.224 22.2027C13.2316 19.706 12.8566 19.5566 6.6889 19.5949C1.01666 19.6322 0.444325 19.4737 0.162955 17.7928C-0.224887 15.4627 0.142574 1.14996 0.606838 0.520194C1.00547 -0.017694 1.70592 -0.0600024 8.77902 0.0475352C16.3636 0.161869 16.5293 0.17939 17.1985 0.933553L17.8817 1.70377V14.6676C17.8817 29.1684 17.955 28.6584 15.6552 30.1728C14.6809 30.8161 10.2239 31.2524 8.87624 30.8373Z" fill="%23111e38"/><path d="M29.6936 30.8373C28.6193 30.5069 27.7424 29.3179 27.7424 28.1888C27.7424 26.9896 28.777 25.6583 29.7136 25.6516C30.769 25.6444 33.5379 24.6842 33.7897 24.2376C33.9257 23.9968 34.0398 23.0806 34.0414 22.2027C34.049 19.706 33.6739 19.5566 27.5062 19.5949C21.834 19.6322 21.2616 19.4737 20.9803 17.7928C20.5924 15.4627 20.9599 1.14996 21.4242 0.520194C21.8228 -0.017694 22.5233 -0.0600024 29.5964 0.0475352C37.181 0.161869 37.3467 0.17939 38.0159 0.933553L38.6991 1.70377V14.6676C38.6991 29.1684 38.7724 28.6584 36.4726 30.1728C35.4983 30.8161 31.0412 31.2524 29.6936 30.8373Z" fill="%23111e38"/></svg>');
    width: 50px;
    height: 40px;
    background-size: 100%;
    background-repeat: no-repeat;
    left: 20px;
    top: -15px;
    transform: rotate(180deg);
}

blockquote p , blockquote strong {
    color: var(--color2);
    font-family: PeydaWebExtraBold;
}
.home .main-header__inner , .page-template-blog .main-header__inner , .page-template-services .main-header__inner , .single-video  .main-header__inner{
    padding: 0;
    border: none;
}



/* ==============================================
      about-page
   ==============================================*/

   /* Bottom border restricted to container width for single service page */

.about-page header .container {
    border-bottom: 1px solid rgba(197, 160, 89, 0.21);
    padding-bottom: 25px;
}


.about-page header {
    background-color: #FFF9ED;
    border-bottom: none; 
}
/* ============================================
   Common Page Header Component (c-page-header)
   ============================================= */
.c-page-header {
    position: relative;
    background-color: #FFF9ED;
    padding: 30px 0 50px 0; 
    text-align: center;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 180px; 
}
/* Pattern Container */
.c-page-header::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background-image: url(assets/images/pageheader-bg.svg);
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}
/* Content Wrapper to stack above the background */
.c-page-header__content {
    position: relative;
    z-index: 1;
} 

/* Main Page Title */
.c-page-header__title {
    font-size: 34px;
    font-family: 'PeydaWebExtrabold';
    color: var(--color2);
    margin-bottom: 9px;
}
/* Breadcrumb Navigation Styles */
.c-page-header__breadcrumb .breadcrumb-list {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
    gap: 4px;
}

.breadcrumb-list__link, 
.breadcrumb-list__current {
    font-size: 14px;
    font-family: 'peydaweb';
    color: var(--color1);
}
.breadcrumb-list__link {
    color: var(--color1);
    text-decoration: none;
}
.breadcrumb-list__link:hover {
    color: var(--color2);
}
.breadcrumb-list__item--separator {
    color: var(--color1);
    font-size: 15px;
}

.breadcrumb-list__current {
    color: #c29b53;
}

.s-about {
    margin: 40px 0px;
}   

.s-about__wrapper {
    display: flex;
    align-items: center;
    gap: 30px; 
    flex-wrap: wrap; 
}

.s-about__content, 
.s-about__image {
    flex: 1 1 45%; 
}
.s-about__text {
    font-size: 13px;
    line-height: 40px; 
    color: var(--color5);
    text-align: justify;
}

.s-about__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
}
.page-template-about .s-servicesbox {
    background: transparent;
    margin-top: 70px;
    padding: 0;
}

.page-template-about .s-servicesbox:after , .page-template-about .s-servicesbox:before  {display:none}

.page-template-about  .doctors-team {
    padding-top: 10px;
}

.page-template-contact .consultation-separator {/* display: none; */}


/* ===============================================
   s-address-box
   ===============================================*/

   /* Main Section Wrapper */
.s-address-box {
    width: 100%;
    margin: 30px 0 30px 0px;
}

/* Inner Container with background, rounded corners, and flex layout */
.s-address-box__container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FFF9ED;
    padding: 26px 45px;
    border-radius: 25px;
}

.s-address-box__container::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -1px;
    border-radius: 25px;
    background: linear-gradient(to right, #ffffff -18%, #C5A059);
}


/* Right Side: Icon + Text Wrapper */
.s-address-box__right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Location Pin SVG/Image style */
.s-address-box__icon {
    width: 33px;
    height: 33px;
    flex-shrink: 0;
}
/* Address text wrapper */
.s-address-box__text {
    font-size: 20px;
    color: var(--color1);
    font-family: 'PeydaWebsemibold';
}

/* Specific styling for the label */
.s-address-box__label {
    color: var(--color2);
    font-family: peydawebbold;
}

/* Left Side: Navigation Map Icons Container */
.s-address-box__left {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Navigation Links & App Icons styling */
.s-address-box__nav-link {
    display: inline-flex;
    transition: var(--transition-smooth);
}
.s-address-box__nav-link img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* Interactive Hover Effects */
.s-address-box__nav-link:hover {
    transform: translateY(-4px) scale(1.08);
    filter: drop-shadow(0 4px 8px rgba(196, 155, 85, 0.25));
}





   /* ===============================================
        Map Section Styles
   ===============================================*/

/* Main container for the map section */
.s-map {
    width: 100%;
    padding: 10px 0 30px 0px;
}

/* Wrapper to control aspect ratio, border-radius, and clipping */
.s-map__wrapper {display: flex;gap: 20px;}

/* Target the iframe inside the wrapper to override fixed attributes */
.s-map__wrapper iframe {
    width: 100%; 
    height: 100%; 
    border: none;
    filter: grayscale(0.2); 
    transition: filter 0.3s ease; 
}

/* Interactive hover effect: bring color back on mouse-over */
.s-map__wrapper iframe:hover {
    filter: grayscale(0);
}
.s-address-box__right svg {
    width: 27px;
    height: auto;
}

.page-template-contact .consultation-section {
    padding-bottom: 8px;
}

.page-template-contact .social-ads {
    margin-top: 40px;
}
.blog-section-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
}
.beauty-blog-section {
    margin-top: 50px;
}
 .dental-blog-section {
    margin-top: 50px;
    margin-bottom: 70px;
}
/* انیمیشن جذاب ورود کارت‌های جدید */
.c-animated-load {
    animation: smoothRise 0.6s;
    /* opacity: 0; */
}

@keyframes smoothRise {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* استایل آیکون لودینگ داخل دکمه */
.js-load-more-btn .btn-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
}

.js-load-more-btn.is-loading .btn-text {
    display: none;
}

.js-load-more-btn.is-loading .btn-spinner {
    display: inline-block;
}

@keyframes spin {
    to { transform: rotate(30deg); }
    from { transform: rotate(390deg); }
}
.blogdescpage {
    font-size: 14px;
    line-height: 40px;
    color: var(--color5);
    margin-top: 20px;
    text-align: justify;
    font-family: peydaweb;
}
.page-template-services .s-services {margin-top: 60px;margin-bottom: 70px;}
.services-section-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
}

/* ======================
   Gallery Section Styles
   ====================== */

.s-gallery-category {
    width: 100%;
    padding: 56px 0 25px 0;
}

/* Header Row: Flexbox for Title and Button */
.s-gallery-category__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    direction: rtl; /* Ensuring RTL layout for Persian */
}
.s-gallery-category__title {
    color: var(--color1);
    font-size: 30px;
    font-family: 'PeydaWebbold';
}

/* Gallery Grid: Flexbox for Images */
.s-gallery-category__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
}

.s-gallery-category__item {
    flex: 1 1 calc(20% - 20px);
     position: relative;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
}
.s-gallery-category__item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(17, 30, 56, 0) 43.25%, #111E38 100%);
}



.s-gallery-category__img {
    width: 100%;
    height: auto;
    border-radius: 20px; 
    display: block;
    transition: transform 0.3s ease;
}

/* Hover Effect for Images */
.s-gallery-category__item:hover .s-gallery-category__img {
    transform: scale(1.02);
}



.s-gallery-category__title--navy {
    color: var(--color2);
    font-family: peydawebextrabold;
}


.gallery-page  .c-page-header {
    margin-bottom: 40px;
}

.c-divider {
    width: 100%;
    max-width: 1200px;
    margin: 60px auto;
    height: 2px;
    background: repeating-linear-gradient(
        to right,
        #CACACA 0,
        #CACACA 10px,      
        transparent 6px,  
        transparent 17px  
    );
}
.s-servicesbox-p h2 {
    color: var(--color2);
    font-family: PeydaWebBold;
    margin-bottom: 40px;
    display: block;
}

/* استایل باکس نگه‌دارنده (اختیاری برای حاشیه و استایل بیرونی) */
.afterbefore { margin: 30px 0 90px 0; }
.afterbeforebox { background: #FFFFFF; box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.1); border-radius: 20px; padding: 0 10px; text-align: center; position: relative; }
.afterbeforebox img { border-radius: 15px 70px; position: relative; display: block; padding: 0px; border: 5px solid var(--color2); }

/* استایل اصلی اسلایدر مقایسه */
.ly-compare {position: relative;width: 100%;overflow: hidden;border-radius: 25px;background: #000;user-select: none;-webkit-user-select: none;touch-action: none;}
.ly-compare__img { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; max-width: 100%; }

/* ماسک برای عکسِ رویی (قبل) */
.ly-compare__img--before { clip-path: inset(0 50% 0 0); -webkit-clip-path: inset(0 50% 0 0); }

/* استایل لیبل‌ها (متن قبل و بعد) */
.ly-compare__label { position: absolute; bottom: 12px; padding: 6px 10px; border-radius: 10px; font-size: 13px; line-height: 1; color: #fff; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 6; pointer-events: none; white-space: nowrap; }
.ly-compare__label--after { right: 42px; }
.ly-compare__label--before { left: 12px; }

/* استایل خط جداکننده */
.ly-compare__line { position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background: #fff; transform: translateX(-1px); z-index: 5; pointer-events: none; }

/* استایل دستگیره وسط */
.ly-compare__handle { position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 46px; cursor: ew-resize; z-index: 7; }
.ly-compare__handle:before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; transform: translateX(-50%); background: rgb(234 217 187); }

/* دایره توخالی وسط دستگیره */
.ly-compare__handle:after { content: ''; width: 40px; height: 40px; background: transparent; position: absolute; left: 0; right: 0; margin: 0 auto; top: 50%; transform: translateY(-50%); border-radius: 50px; border: 1px solid #ead9bb; }

/* فلش‌های چپ و راست داخل دستگیره */
.ly-compare__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.ly-compare__arrow--l { left: 12px; border-right: 10px solid rgb(234 217 187); }
.ly-compare__arrow--r {right: -21px;border-left: 10px solid rgb(234 217 187);}

/* مدیا کوئری برای موبایل */
@media (max-width: 576px) {
  .ly-compare__label { bottom: 10px; font-size: 12px; }
  .ly-compare__handle { width: 40px; }
  .ly-compare__arrow--l { left: 10px; }
  .ly-compare__arrow--r { right: 10px; }
}
.single-gallery .single-intro__wrapper {
    padding-bottom: 40px;
}
/* تنظیمات گرید ۵ ستونه برای گالری */
.gallery-grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    width: 100%;
}

/* استایل‌دهی پایه به آیتم‌های گالری */
.gallery-grid-container .gallery-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 20px;
    /* aspect-ratio: 1 / 1; */ /* برای مربع و یکدست شدن تمام عکس‌ها */
    background: #f8f8f8;
}

.gallery-grid-container .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* استایل دکمه بزرگنمایی روی عکس */
.gallery-grid-container .gallery-zoom-btn {
    position: absolute;
    bottom: -40px; /* مخفی در حالت عادی */
    left: 50%;
    transform: translateX(-50%);
    background: rgb(255 249 237);
    color: var(--color1);
    padding: 6px 22px;
    border-radius: 6px;
    font-size: 13px;
    transition: all 0.4s ease;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}

/* افکت هاور */
.gallery-grid-container .gallery-item:hover img {
    transform: scale(1.08);
}

.gallery-grid-container .gallery-item:hover .gallery-zoom-btn {
    bottom: 15px;
    opacity: 1;
}

/* ریسپانسیو برای لپ‌تاپ (۴ ستون) */
@media (max-width: 1200px) {
    .gallery-grid-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ریسپانسیو برای تبلت (۳ ستون) */
@media (max-width: 992px) {
    .gallery-grid-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
}

/* ریسپانسیو برای موبایل (۲ ستون) */
@media (max-width: 768px) {
    .gallery-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}
.author-meta-bar:before {
    content: '';
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0;
    z-index: -1;
    margin: -1px;
    border-radius: 15px;
    background: linear-gradient(to left, #C5A059 0%, #ffffff 50%, #C5A059 100%);
}
.post-date {
    position: relative;
}


/* ===================
   layout-videos__sidebar
   ==================== */


   .c-sidebar-box {
    background: #FFF9ED;
    border-radius: 20px;
    padding: 18px 16px;
    position: relative;
}
.c-sidebar-box::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -1px;
    border-radius: 20px;
    background: linear-gradient(to bottom, #ffffff 8%, #C5A059);
}

.c-sidebar-box__title {
    margin: 0 0 16px;
    text-align: center;
    font-size: 16px;
    font-family: peydawebbold;
    color: var(--color1);
    position: relative;
    padding-bottom: 20px;
}

.c-sidebar-box__title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 5%;
    width: 90%;
    height: 1px;
    background-color: rgba(197, 160, 89, 0.21);
}
.c-sidebar-box__count {
    color: var(--color5);
}

.c-sidebar-box__link {
    display: grid;
    grid-template-columns: 1fr auto; 
    align-items: center;
    column-gap: 8px;
    padding: 10px 15px; 
    box-sizing: border-box;
    width: 100%;
    text-decoration: none;                 
    font-size: 14px;
    font-family: peydaweb;
    color: var(--color2);
    transition: color 0.2s ease, background-color 0.2s ease, padding 0.2s ease;
    border-radius: 20px; 
}

.c-sidebar-box__link:hover {

    color: var(--color1);
}
.video-page .recommended-card {
    margin-top: 30px;
}
.video-page .social-card {
    margin-top: 10px;
}
.video-page .contact-cards__wrapper {
    margin: 10px;
}
.s-video-layout {
    display: flex;
    gap: 35px;
}

.layout-videos__sidebar {
    width: 25%;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

main.s-video-layout__main {
    width: 75%;
}

.page-template-video-php .recommended-card {
    margin: 0;
}

.s-video-page {
    margin: 30px 0;
}

   /* Main video page wrapper */
.s-video-page {
    padding-top: 60px;
    /* padding-bottom: 20px; */
    direction: rtl;
}


/* Style for the section title */
.-video-title {
    font-size: 24px;
    font-family: peydawebbold;
    color: var(--color2);
    margin: 0;
}

/* Grid container for video cards */
.s-short-videos__grid {
    display: grid;
    /* Create 4 equal columns */
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.short-video-title {
    font-size: 15px;
    display: block;
    position: absolute;
    margin-top: 13px;
    font-family: peydawebbold;
    transition: 0.5s;
}

a.c-testimonial-card-p:hover .short-video-title {
    color: var(--color1);
}
.s-short-videos {margin-bottom: 100px;}
.page-template-shortvideo .s-short-videos__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.page-template-shortvideo .c-testimonial-card-p {
    margin-bottom: 60px;
}


/* =======================
   Latest Videos Component
   ======================= */

   .s-gallery-category__header2 {
    text-align: center;
    margin-bottom: 30px;
   }
   .video-title2 {
    font-size: 34px;
    color: var(--color1);
    font-family: peydawebbold;
   }
   .video-title3 {
    color: var(--color2);
   }

   /* Main wrapper for latest videos section */
.s-latest-videos {
    margin-top: 30px;
}

/* Grid layout for latest video cards */
.s-latest-videos__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* Thumbnail figure reset */
.c-video-card__figure {
    margin: 0;
    width: 100%;
    height: 100%;
}

/* Horizontal video thumbnail image */
.c-video-card__img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    object-fit: cover;
    transition: transform 0.35s ease;
}
/* Small duration badge positioned at top */
.c-video-card__time {
    position: absolute;
    top: 16px;
    left: 10px;
    z-index: 2;
    padding: 7px 9px;
    border-radius: 30px;
    background-color: #111E38C9;
    color: var(--color3);
    font-size: 12px;
    font-family: 'PeydaWebbold';
    line-height: 1;
    direction: ltr;
}

/* Content overlay placed at the bottom */
.c-video-card__content {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 18px 16px 14px;
}
/* Video title text */
.c-video-card__title {
    margin: 0;
    color: var(--color3);
    font-size: 19px;
    font-family: peydawebbold;
    line-height: 1.7;
    text-align: right;
}

/* Image zoom effect on hover */
.c-video-card:hover .c-video-card__img {
    transform: scale(1.04);
}

.c-video-card {
    position: relative;
    display: block;
}
.c-video-card__figure {
    position: relative;
}

/* Inner wrapper for positioning overlays */
.c-video-card__inner {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
   
}

/* Bottom shadow overlay for better text readability */
.c-video-card__inner::before {
   content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(17, 30, 56, 0) 43.25%, #111E38 100%);

}
.s-short-videos-page {
    margin-top: 70px;
}
.s-video-page {
    margin-top: 0;
}
/* ==========================================================================
   Immersive Short Videos / Reels System
   ========================================================================== */

/* ایزوله‌سازی کامل بدنه صفحه در حالت ریلز برای جلوگیری از تداخل استایل قالب */
body.immersive-reels-page {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background-color: #000 !important;
}

/* پنهان‌سازی قطعی هدر و فوتر قالب در زمان لود شورت‌ویدیو */
body.immersive-reels-page header, 
body.immersive-reels-page footer, 
body.immersive-reels-page #header, 
body.immersive-reels-page #footer, 
body.immersive-reels-page .site-header, 
body.immersive-reels-page .site-footer {
    display: none !important;
}

/* کانتینر اصلی ریلز - پوشش ۱۰۰ درصدی لایه رویین سایت */
.reels-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important; /* حذف باگ نوار آدرس مرورگرهای موبایل */
    z-index: 999999 !important; /* قرارگیری بالاتر از تمام المان‌های ثابت پوسته */
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    background-color: #000;
    -webkit-overflow-scrolling: touch;
}

/* مخفی کردن کامل نوار اسکرول در تمامی مرورگرها برای حس اپلیکیشن نیتیو */
.reels-container::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
.reels-container {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* استایل هر اسلاید ویدیو */
.reel-slide {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always; /* جلوگیری از پرش همزمان چند ویدیو در اسکرول سریع */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

/* تگ ویدیو - فیت شدن کامل در صفحه مشابه اینستاگرام */
.reel-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* لودینگ هوشمند و نرم وسط صفحه با رنگ طلایی برند */
.reel-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: #C5A059; /* رنگ طلایی */
    border-radius: 50%;
    animation: reelSpin 0.75s linear infinite;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

@keyframes reelSpin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* فعال‌سازی انیمیشن لودینگ در زمان بافرینگ از طریق کلاس جاوااسکریپت */
.reel-slide.is-buffering .reel-loading {
    opacity: 1;
    visibility: visible;
}

/* باکس اطلاعات روی ویدیو (عنوان و متن اصلی درخواست) */
.reel-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 140px 24px 20px 24px;
    /* ایجاد گرادیانت مشکی نرم برای خوانایی بی‌نقص متون روی ویدیوهای روشن */
    background: linear-gradient(to top, #111E38 0%, #111e3861 50%, rgba(0, 0, 0, 0) 100%);
    color: #fff;
    z-index: 2;
    pointer-events: none; /* عبور دادن کلیک‌ها از روی متن جهت پلی/پاز راحت ویدیو */
    direction: rtl;
}

.reel-title {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 10px 0;
    color: #fff;
    line-height: 1.4;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.reel-desc {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    opacity: 0.92;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.reel-desc p {
    margin: 0;
}
/* دکمه بازگشت */
.reel-back-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    cursor: pointer;
    transition: background 0.3s;
}
.reel-back-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}
.reel-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 10;
    direction: ltr !important; 
}

.reel-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: #C5A059;
    transition: width 0.1s linear;
}
.reel-mute-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.reel-mute-icon.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.reel-mute-icon svg {
    width: 30px;
    height: 30px;
}

.reel-slide {
    width: 500px;
    margin: 0 auto;
}
.single-post .s-faq {
    padding: 20px 0 0 0;
}

.single-post .comment_section {
    margin-top: 30px;
}
.single-doctor .single-intro__media {
    width: 35%;
}

.single-doctor .single-intro__content {
    width: 65%;
}
.single-doctor .single-intro__media .media-frame::before {
    display: none;
}
.single-doctor .single-intro__info-box {
    padding: 13px;
    gap: 10px;
}

.single-doctor  .info-item span {
    color: var(--color1);
}

.single-doctor  .info-item {
    border-right: 1px solid var(--color1);
    padding-right: 12px;
}

.single-doctor  .info-item:first-child {
    border: none;
    padding: 0;
}
.doctor-more-details { 
    margin-top: 50px;
}
.single-doctor .consultation-separator{
   display: none; 
}

.lefterrorpage img {
    position: relative;
    top: 10px;
}

.row.errorpagebox {
}

.righterrorpage h1 {
    font-weight: 700;
    font-size: 205px;
    height: 190px;
    color: var(--color1);
    margin-bottom: 20px;
}

.righterrorpage {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.righterrorpage h2 {
    font-size: 35px;
    margin-top: 10px;
    font-family: peydawebextrabold;
    color: var(--color2);
}

.righterrorpage p {
    font-size: 19px;
    margin-top: 20px;
    color: #454545;
}

.righterrorpage ul li {
    position: relative;
    display: inline-block;
    padding: 0 12px;
    font-size: 17px;
}

.righterrorpage ul li a {
    padding: 0px 10px;
    color: var(--color2);
}

.righterrorpage ul {
    margin-top: 25px;
}

.righterrorpage ul li:before {
    content: '';
    position: absolute;
    background: var(--color2);
    width: 5px;
    height: 5px;
    left: -3px;
    border-radius: 50px;
    top: 10px;
}

.righterrorpage ul li:last-child:before {
    display: none;
}
.row.errorpagebox {
    display: flex;
    align-content: center;
    margin: 75px 15px 110px 15px;
}
.errorpage.singlepage .lyam-consult-wrap {
    margin-top: 90px;
}

/* تنظیمات نگهدارنده اصلی جستجو */
.header-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 0px; /* فاصله از دکمه‌ها (در صورت نیاز تغییر دهید) */
}

/* دکمه آیکون جستجو */
.header-search__toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.header-search__toggle:hover {
    opacity: 0.7;
}

/* کادر کشویی (Dropdown) */
.header-search__dropdown {
    position: absolute;
    top: 150%; /* نمایش در زیر هدر */
    left: 50%; /* وسط‌چین کردن نسبت به آیکون */
    transform: translateX(-50%) translateY(15px);
    background: #ffffff;
    padding: 9px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    min-width: 280px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
}

/* کلاس فعال برای نمایش کادر */
.header-search__dropdown.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* استایل‌های فرم جستجو */
.search-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-field {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 36px;
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color 0.3s ease;
}

.search-field:focus {
    border-color: #C5A059; /* رنگ طلایی قالب شما */
}

.search-submit {
    background-color: #C5A059;
    border: none;
    border-radius: 36px;
    padding: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    position: absolute;
    left: 13px;
}

.search-submit:hover {
    background-color: #a88647; /* کمی تیره‌تر برای هاور */
}
.single-intro__text.main-box {
    background: transparent;
    box-shadow: none;
    padding: 0;
    min-height: unset;
}

.single-intro__text.main-box::before {
    display: none;
}

.single-intro__text.main-box::after {
    display: none;
}

.archive-h-card {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    color: #454545;
    background: #fff9ed;
    padding: 15px;
    border-radius: 25px;
    position: relative;
}

.archive-h-card__media img {
    height: auto;
    border-radius: 20px;
}

.archive-h-card__media {
    width: 40%;
}

.archive-h-card__body {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: space-between;
}

.archive-h-card__title {
    font-size: 21px;
    font-family: 'PeydaWebextrabold';
    line-height: 32px;
}
span.archive-h-card__title a {
    color: var(--color2);
}

.archive-h-card__meta {
    font-size: 14px;
    display: flex;
    gap: 11px;
    margin-bottom: 5px;
    margin-top: 5px;
}

.archive-h-card__excerpt {
    font-size: 14px;
    line-height: 28px;
}

article.archive-h-card:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -1px;
    border-radius: 25px;
    background: linear-gradient(to right, #ffffff 8%, #C5A059);
}
a.archive-h-card__btn {
    color: var(--color1);
    font-family: 'PeydaWebextrabold';
    font-size: 12px;
    gap: 7px;
    display: flex;
}

a.archive-h-card__btn:after {
    content: '';
    position: relative;
    display: inline-block;
    background: url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.87499 5.62499H1.27499L3.59999 3.29999C3.74999 3.14999 3.74999 2.84999 3.67499 2.69999C3.59999 2.54999 3.29999 2.54999 3.14999 2.69999L0.14999 5.69999C-9.61125e-06 5.84999 -9.61125e-06 6.14999 0.0749904 6.29999L3.07499 9.29999C3.14999 9.37499 3.22499 9.37499 3.37499 9.37499C3.52499 9.37499 3.59999 9.37499 3.67499 9.29999C3.82499 9.14999 3.82499 8.92499 3.67499 8.77499L1.27499 6.37499H7.87499C8.09999 6.37499 8.24999 6.22499 8.24999 5.99999C8.24999 5.77499 8.09999 5.62499 7.87499 5.62499Z" fill="%23C5A059"/><path d="M11.625 6.375H9.375C9.15 6.375 9 6.225 9 6C9 5.775 9.15 5.625 9.375 5.625H11.625C11.85 5.625 12 5.775 12 6C12 6.225 11.85 6.375 11.625 6.375Z" fill="%23C5A059"/></svg>');
    width: 17px;
    height: 13px;
    background-size: 100%;
}
span.meta-item:before {
    content: '';
    position: relative;
    display: inline-block;
    background: url('data:image/svg+xml,<svg height="300" viewBox="0 0 32 32" width="300" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs"><g width="100%" height="100%" transform="matrix(1,0,0,1,0,0)"><g id="User"><circle cx="16" cy="7" r="7" fill="%23c5a059" fill-opacity="1" data-original-color="%23000000ff" stroke="none" stroke-opacity="1"/><path d="m28.95117 26.75146a12.9806 12.9806 0 0 0 -12.95117-10.75146 12.9806 12.9806 0 0 0 -12.95117 10.75146 4.48672 4.48672 0 0 0 1.05078 3.58985 4.82372 4.82372 0 0 0 3.66602 1.65869h16.46875a4.82372 4.82372 0 0 0 3.666-1.65869 4.48672 4.48672 0 0 0 1.05079-3.58985z" fill="%23c5a059" fill-opacity="1" data-original-color="%23000000ff" stroke="none" stroke-opacity="1"/></g></g></svg>');
    width: 15px;
    height: 16px;
    background-size: 16px;
    background-repeat: no-repeat;
    top: 2px;
}
span.meta-date:before {
    background: url('data:image/svg+xml,<svg id="Layer_1" enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" width="300" height="300" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs"><g width="100%" height="100%" transform="matrix(1,0,0,1,0,0)"><g id="Layer_2_00000055675975162524939410000001125890218345916819_"><g id="Layer_2_copy_3"><g id="_3"><path d="m437.8 66h-12.8v44.8c0 15.6-12.6 28.2-28.2 28.2h-24.6c-15.6 0-28.2-12.6-28.2-28.2v-44.8h-48v44.8c0 15.6-12.6 28.2-28.2 28.2h-24.6c-15.6 0-28.2-12.6-28.2-28.2v-44.8h-48v44.8c0 15.6-12.6 28.2-28.2 28.2h-24.6c-15.6 0-28.2-12.6-28.2-28.2v-44.8h-11.8c-41 0-74.2 33.2-74.2 74.2v297.5c0 41 33.2 74.2 74.2 74.2h363.5c41 0 74.2-33.2 74.2-74.2v-297.5c.1-41-33.1-74.2-74.1-74.2zm-379.3 188.5c0-13.5 11-24.5 24.5-24.5h44c13.5 0 24.5 11 24.5 24.5 0 13.5-11 24.5-24.5 24.5h-44c-13.5 0-24.5-11-24.5-24.5zm93.5 112c0 13.5-11 24.5-24.5 24.5h-44c-13.5 0-24.5-11-24.5-24.5 0-13.5 11-24.5 24.5-24.5h44c13.5 0 24.5 11 24.5 24.5zm57.5-112c0-13.5 11-24.5 24.5-24.5h44c13.5 0 24.5 11 24.5 24.5 0 13.5-11 24.5-24.5 24.5h-44c-13.5 0-24.5-11-24.5-24.5zm93.5 112c0 13.5-11 24.5-24.5 24.5h-44c-13.5 0-24.5-11-24.5-24.5 0-13.5 11-24.5 24.5-24.5h44c13.5 0 24.5 11 24.5 24.5zm57.5-112c0-13.5 11-24.5 24.5-24.5h44c13.5 0 24.5 11 24.5 24.5 0 13.5-11 24.5-24.5 24.5h-44c-13.5 0-24.5-11-24.5-24.5zm93.5 112c0 13.5-11 24.5-24.5 24.5h-44c-13.5 0-24.5-11-24.5-24.5 0-13.5 11-24.5 24.5-24.5h44c13.5 0 24.5 11 24.5 24.5z" fill="%23c5a059" fill-opacity="1" data-original-color="%23000000ff" stroke="none" stroke-opacity="1"/><path d="m114.2 0h24.6c7.3 0 13.2 5.9 13.2 13.2v97.6c0 7.3-5.9 13.2-13.2 13.2h-24.6c-7.3 0-13.2-5.9-13.2-13.2v-97.6c0-7.3 5.9-13.2 13.2-13.2z" fill="%23c5a059" fill-opacity="1" data-original-color="%23000000ff" stroke="none" stroke-opacity="1"/><path d="m243.2 0h24.6c7.3 0 13.2 5.9 13.2 13.2v97.6c0 7.3-5.9 13.2-13.2 13.2h-24.6c-7.3 0-13.2-5.9-13.2-13.2v-97.6c0-7.3 5.9-13.2 13.2-13.2z" fill="%23c5a059" fill-opacity="1" data-original-color="%23000000ff" stroke="none" stroke-opacity="1"/><path d="m372.2 0h24.6c7.3 0 13.2 5.9 13.2 13.2v97.6c0 7.3-5.9 13.2-13.2 13.2h-24.6c-7.3 0-13.2-5.9-13.2-13.2v-97.6c0-7.3 5.9-13.2 13.2-13.2z" fill="%23c5a059" fill-opacity="1" data-original-color="%23000000ff" stroke="none" stroke-opacity="1"/></g></g></g></g></svg>');
    background-size: 16px;
    height: 15px;
    background-repeat: no-repeat;
    width: 16px;
    height: 17px;
    top: 0;
}

span.meta-item {
    display: flex;
    gap: 2px;
    font-size: 12px;
}
/* ==================================================
   استایل‌های اختصاصی مگامنو (فقط برای آیتم li.services)
================================================== */

/* نگهدارنده اصلی (آیتم خدمات) */
li.services {
    position: relative;
}

/* فضای مخفی زیر منو برای اینکه موقع هاور کردن موس، منو بسته نشه */
li.services::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 80%;
    height: 54px;
    z-index: 9999;
}

/* باکس اصلی مگامنو */
li.services > ul.dropdowns-menu {
    position: absolute;
    background: #fff;
    width: 500px;
    top: 52px;
    z-index: 999999;
    border-radius: 20px;
    padding: 30px 15px 19px 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    right: -104px;
}

/* نمایش مگامنو هنگام هاور */
li.services:hover > ul.dropdowns-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* آیتم‌های لیست (li) داخل مگامنو */
li.services ul.dropdowns-menu li.dropdown-menu__item {
    width: 25%;
    display: flex;
    align-content: center;
    border: none; /* حذف بردرهای پیش‌فرض در صورت وجود */
}

/* لینک‌های داخل مگامنو */
li.services ul.dropdowns-menu a.dropdown-menu__link {
    color: var(--color2) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    width: 100%;
    font-size: 14px;
    background: transparent; /* حذف بکگراند پیش‌فرض در صورت وجود */
    border: none;
    padding: 0;
}

/* استایل آیکون (SVG) داخل مگامنو */
li.services ul.dropdowns-menu span.nav-custom-svg {
    background: var(--color1);
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border-radius: 15px;
    padding: 7px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

li.services ul.dropdowns-menu span.nav-custom-svg svg {
    display: flex;
    height: 27px;
    width: auto;
    fill: #fff; /* در صورت نیاز به رنگ سفید برای آیکون */
    filter: brightness(0) invert(1);
}

/* افکت کادر خطی اطراف آیکون */
li.services ul.dropdowns-menu span.nav-custom-svg:before {
    content: '';
    position: absolute;
    width: 62px;
    height: 62px;
    border: 1px solid var(--color1);
    left: -6.5px;
    top: -6px;
    border-radius: 15px;
}

.formpagespcial .s-about__content.s-about__text {
    text-align: center !important;
    margin-top: 50px;
    width: 81%;
    margin: 30px auto 0px;
    font-size: 15px;
}

.formpagespcial .s-about__content.s-about__text li {
}

/* تنظیمات کلی محفظه */
.c-page-main {
     /* رنگ پس‌زمینه بسیار ملایم */
    padding: 50px 20px 10px 20px;
    direction: rtl; /* راست‌چین کردن استاندارد */
}

/* باکس اصلی محتوا */
.c-privacy-content {
    background: #ffffff;
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.04); /* سایه بسیار ملایم و مدرن */
    line-height: 1.9;
    color: #555555;
    font-size: 16px;
    border: 1px solid #f0f0f0;
}

/* استایل تیترهای اصلی (h2) */
.c-privacy-content h2 {
    color: var(--color2);
    font-size: 24px;
    font-weight: 800;
    margin-top: 50px;
    margin-bottom: 25px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f1f2f6;
    position: relative;
    font-family: peydawebextrabold;
}

/* خط رنگی زیر تیترهای اصلی برای زیبایی بیشتر (رنگ طلایی/شامپاینی ملایم) */
.c-privacy-content h2::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 70px;
    height: 3px;
    background: var(--color1); 
}

/* استایل تیترهای فرعی (h3) */
.c-privacy-content h3 {
    color: var(--color2);
    font-size: 20px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 20px;
}

/* استایل پاراگراف‌ها */
.c-privacy-content p {
    margin-bottom: 18px;
    text-align: justify;
}

/* بولد کردن متن‌های مهم */
.c-privacy-content strong {
    color: var(--color2);
    font-weight: 700;
}

/* استایل باکس راه‌های ارتباطی (لیست‌ها) */
.c-privacy-content ul { 
    list-style: none;
    padding: 0;
    margin: 30px 0;
    background: #f8f9fa; /* پس‌زمینه متفاوت برای تماس با ما */
    border-radius: 12px;
    padding: 25px;
    border-right: 4px solid #c5a880; /* خط رنگی کناری */
}

.c-privacy-content ul li {
    margin-bottom: 12px;
    font-size: 16px;
    display: flex;
    align-items: center;
}

.c-privacy-content ul li:last-child {
    margin-bottom: 0;
}

/* ریسپانسیو برای موبایل */
@media (max-width: 768px) {
    .c-page-main {
        padding: 30px 15px;
    }
    
    .c-privacy-content {
        padding: 30px 20px;
        border-radius: 16px;
    }

    .c-privacy-content h2 {
        font-size: 21px;
    }

    .c-privacy-content h3 {
        font-size: 18px;
    }
}
.owl-dots .owl-dot {
    position: relative !important;
}
.owl-dots .owl-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    z-index: 1;
}
.mobile-menu-banners .menu-banner-item img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}
.story-text {
    font-size: 14px;
    margin-top: 5px;
    color: #454545;
}

.mapboxsd {
    width: 75%;
    border-radius: 20px;
    overflow: hidden;
}
.page-template-contact .consultation-section aside.consultation-sidebar {display: none;}



.page-template-contact .consultation-section .consultation-main {
    width: 100%;
}