@font-face {
  font-family: "Tajawal";
  src: url("/assets/fonts/Tajawal-Regular.ttf");
  font-display: swap;
}

@font-face {
  font-family: "Changa";
  src: url("/assets/fonts/Changa-VariableFont_wght.ttf");
  font-display: swap;
}

@font-face {
  font-family: "Merriweather";
  src: url("/assets/fonts/Merriweather-VariableFont_opsz,wdth,wght.ttf");
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/Montserrat-VariableFont_wght.ttf");
  font-display: swap;
}

:root {
  --main-color: #B4903A;
  --secondery-color: #0A0B5B;
  --third-color: #5FCE80;
  --text-color: #3e1e34;
  --lists-color: #777777;
  --section-bg: #F2F6F9;
  --footer-bg: #0A152F;
  --section-padding: 3rem;
  --heading-dark: #202022;
  --text-dark: #464646;
}


@media (max-width: 1200px) {
  html {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  html {
    font-size: 15px;
  }
}

@media (max-width: 576px) {
  html {
    font-size: 14px;
  }
}

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  font-display: swap;
}

html[lang='en'] *:not(i) {
  font-family: "Merriweather", sans-serif;
  font-weight: 500;
  direction: ltr;
}

html[lang='ar'] *:not(i) {
  direction: rtl;
  font-family: "Tajawal", sans-serif;
  font-weight: 500;

}

*:focus {
  outline: none !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html,
body {
  width: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
}

section {
  width: 100%;
  position: relative;
  margin-top: var(--section-padding);
}

a {
  text-decoration: none !important;
}

ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

h1,
h2,
h3,
h4,
h5,
h6 {}

html[lang='en'] h1,
html[lang='en'] h1 *,
html[lang='en'] h2,
html[lang='en'] h2 *,
html[lang='en'] h3,
html[lang='en'] h3 *,
html[lang='en'] h4,
html[lang='en'] h4 *,
html[lang='en'] h5,
html[lang='en'] h5 *,
html[lang='en'] h6,
html[lang='en'] h6 * {
  font-family: "Merriweather", sans-serif;
  font-weight: 600;
}


html[lang='ar'] h1,
html[lang='ar'] h1 *,
html[lang='ar'] h2,
html[lang='ar'] h2 *,
html[lang='ar'] h3,
html[lang='ar'] h3 *,
html[lang='ar'] h4,
html[lang='ar'] h4 *,
html[lang='ar'] h5,
html[lang='ar'] h5 *,
html[lang='ar'] h6,
html[lang='ar'] h6 * {
  font-family: "Tajawal", sans-serif;
  font-weight: 600;
}

button {
  padding: 0;
  border: none;
}

button:focus {
  outline: none;
}

/* ========== Strat global Styles ========== */
.section-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 12px;
  padding-right: 12px;
}

/* Small devices ≥576px */
@media (min-width: 576px) {
  .section-container {
    width: 96%;
  }
}

/* Medium devices ≥768px */
@media (min-width: 768px) {
  .section-container {
    width: 94%;
  }
}

/* Large devices ≥992px */
@media (min-width: 992px) {
  .section-container {
    width: 93%;
  }
}

/* Extra large devices ≥1200px */
@media (min-width: 1200px) {
  .section-container {
    width: 95%;
  }
}

/* XXL devices ≥1400px */
@media (min-width: 1400px) {
  .section-container {
    width: 98%;
    max-width: 1320px;
  }
}

.truncate-1-lines {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.full-width-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gradient-text {
  background: linear-gradient(90deg, #F4E771 0%, #B4903A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-h1 {
  background: linear-gradient(90deg, #B4903A 0%, #CDAE65 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.lavender-btn,
.services-btn {
  background: url('/assets/img/logo-bg.webp') center/cover no-repeat;
  border-radius: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .3rem .5rem;
  gap: .5rem;
  width: fit-content;
  font-size: 1.3rem;
}

.lavender-btn img {
  width: 13%;
}

.services-btn {
  background: none;
  border: 1px solid gold;
}

.services-btn img {
  width: 20%;
}

.text {
  line-height: 1.8;
}

/* ========== Strat Main section ========== */
.main {
  -webkit-overflow-scrolling: touch;
  position: relative;
  background-color: #ffffff;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}

/* ========== Strat Header ========== */
header {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
}

header.unset-header {
  background-color: red;
}

header .header-lang {
  cursor: pointer;
  position: relative;
  width: 30px;
  height: 30px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.35s;
  border-radius: 8px;
  user-select: none;
  background: #f2f2f2;
  font-size: 13px;
}

html[lang='en'] header .header-lang {
  margin-left: 0px;
  margin-right: 10px;
}

header .header-lang i {
  color: var(--main-color);
}

header .navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  transition: all 0.5s ease;
  width: 93%;
  margin: 0px auto;
}

header .navbar__menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: .5rem 2rem .5rem 1rem;
  border-radius: 2rem;
  width: 73%;
}

@media (max-width: 1270px) {
  header .navbar__menu .lavender-btn {
    display: none;
  }

  header .navbar__menu {
    justify-content: center;
  }
}

header .logo-link {
  width: 100px;
}

@media (min-width: 768px) {
  header .logo-link {
    width: 35%;
  }
}

@media (min-width: 992px) {
  header .logo-link {
    width: 15.1%;
  }

}

.mobile-lang {
  display: none !important;
}

@media screen and (max-width: 1024px) {
  .desktop-lang {
    display: none !important;
  }

  .mobile-lang {
    display: flex !important;
  }

  header .navbar__menu {
    position: absolute;
    top: 100%;
    right: -100%;
    width: 280px;
    min-height: calc(100vh - 78px);
    background-color: whitesmoke;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2rem;
    padding: 2rem 1rem;
    transition: all 0.5s ease;
  }

  header .navbar__menu.right-open {
    right: 0;
  }
}

header .navbar__list {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
}

@media screen and (max-width: 1024px) {
  header .navbar__list {
    flex-direction: column;
    flex-grow: 0;
  }
}

header .navbar__list li a{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.5s ease;
  font-size: 1.2rem;
  color: var(--main-color);
}

html[lang='en'] header .navbar__list li a {
  font-size: 1.1rem;
}

header a:not([href]):not([class]),
header a:not([href]):not([class]):hover {
  color: var(--main-color) !important;
  cursor: pointer;
}

header .navbar__list li a:hover {
  opacity: .8;
}

header .navbar__list li .arrow {
  transition: 0.3s ease;
}

header .navbar__list li .arrow.up {
  transform: rotate(180deg);
}

header .navbar__list-drop {
  display: inline-block;
  position: relative;
}

header .navbar__list-drop-menu {
  display: none;
  position: absolute;
  margin-top: 1rem;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.122);
  z-index: 999;
}

@media screen and (max-width: 1024px) {
  header .navbar__list-drop-menu {
    position: inherit;
    background-color: transparent;
    box-shadow: none;
    padding: 0.5rem 1rem;
  }
}

header .navbar__list-drop-menu.open {
  display: flex;
}

header .navbar__list-drop-menu.features {
  right: 0;
}

header .navbar__list-drop-menu.company {
  left: 0;
  width: max-content;
}


header .navbar .menu {
  display: none;
  float: left;
  transition: all 275ms ease;
  cursor: pointer;
}

@media screen and (max-width: 1024px) {
  header .navbar .menu {
    display: block;
  }
}

header .navbar .menu span {
  display: block;
  width: 22px;
  height: 4px;
  background: #000000;
  margin-bottom: 2px;
  border-radius: 1px;
  transition: all 275ms ease;
}

header .navbar .menu.active {
  transform: rotate(-45deg);
}

header .navbar .menu.active .bar1 {
  transform: rotate(0deg) translateY(6px);
}

header .navbar .menu.active .bar2 {
  opacity: 0;
}

header .navbar .menu.active .bar3 {
  transform: rotate(-90deg) translateX(5px);
}

/* ========== Strat hero ========== */
section.hero {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  color: #ffffff;
}

section.hero,
section.hero * {
  font-family: "Changa" !important;
  direction: rtl !important;
}

section.hero .landing {
  background: url('/assets/img/landing-bg.webp') center/cover no-repeat;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 3rem 1rem;
  padding-top: 98px;
  padding-bottom: 2rem;
}

section.hero .landing .section-img,
section.hero .landing .section-text {
  width: 90%;
}

section.hero .landing .section-img .landing-dr {
  display: none;
}

section.hero .landing .section-text h1 img {
  width: 18%;
  margin-bottom: -2%;
}


section.hero .landing .section-text>p {
  font-size: 1.3rem;
  margin-bottom: 2rem;
  font-weight: 400;
}


section.hero .landing ul {
  margin-top: 1rem;
}

section.hero .landing ul,
section.hero .landing ul li {
  display: flex;
}

section.hero .landing ul li {
  gap: 1rem;
  align-items: center;
}

section.hero .landing ul li span {
  background: linear-gradient(90deg, #B4903A 0%, #F4E771 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-size: 1.15rem;
  font-weight: 500;
}

@media (max-width: 500px) {
  section.hero .landing ul li {
    gap: .5rem;
  }

  section.hero .landing ul li span {
    font-size: 1rem;
  }

  section.hero .landing ul li img {
    width: 16%;
  }
}

section.hero .landing ul li img {
  width: 21%;
}




@media (min-width: 992px) {
  section.hero .landing {
    flex-direction: row;
  }

  section.hero .landing .section-img {
    width: 48%;
  }

  section.hero .landing .section-text {
    width: 50%;
  }

  section.hero .landing .section-text {
    padding-right: 4rem;
  }

  section.hero .landing .section-img .landing-dr {
    display: block;
    width: 80.5%;
    margin-right: auto;
  }



  section.hero .landing .section-img .landing-mobile-dr {
    display: none;
  }

  section.hero .landing .section-text h1 {
    font-size: 2rem;
    max-width: 550px;
  }
}

@media (max-width: 991px) {
  html[lang='en'] section.hero .landing .section-text {
    text-align: left;
  }
}

/* ========== Strat hero2 ========== */
section.hero2 {
  margin: 0px;
  padding: 0px;
}

section.hero2 .content {
  background: url('/assets/img/about-bg.webp') center/cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 4rem 2rem;
  color: #ffffff;
  text-align: center;
  height: 50vh;
}

section.hero2 .content h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

section.hero2 .content h1 span {
  margin: 0px .3rem;
}

section.hero2 .content h1 img {
  width: 16%;
}

section.hero2.about-page .content h1 img {
  margin-top: -16px;
  width: 11%;
}

section.hero2.about-page .content h1 {
  gap: .7rem 0rem;
}

/* ========== Strat main-section ========== */
section.main-section .section-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem 1rem;
}

section.main-section .section-content.c-reverse {
  flex-direction: column-reverse;
}

section.main-section .section-text {
  width: 100%;
}

section.main-section .section-subtitle,
section .section-heading>.section-subtitle,
.about-values-section .section-subtitle {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: var(--main-color);
  margin-bottom: 1rem;
  font-size: 1.4rem;
}

section.main-section .section-subtitle img,
section.services-section .section-subtitle img {
  width: 28px;
}

section.main-section .section-text .section-title,
section.services-section .section-title {
  margin-bottom: 1.5rem;
  color: var(--heading-dark);
}

html[lang='ar'] section.main-section .section-text .section-title,
html[lang='ar'] section.services-section .section-title {
  font-size: 2rem;
}


section.main-section .section-text .section-title span.item2,
section.services-section .section-title span.item2 {
  color: var(--main-color);
}

section.main-section .section-text .text,
section.services-section .text {
  color: var(--text-dark);
  margin-bottom: 1.4rem;
}

html[lang='ar'] section.main-section .section-text .text,
html[lang='ar'] .section-heading .text {
  font-size: 1.3rem;
}


section.main-section .section-text .section-ul li,
section.services-section .section-ul li {
  color: var(--main-color);
  position: relative;
  padding-right: 25px;
  color: var(--lists-color);
  transition: transform 0.5s ease;
}

html[lang='ar'] section.main-section .section-text .section-ul li,
html[lang='ar'] section.services-section .section-ul li {
  font-size: 1.275rem;
}

html[lang='en'] section.main-section .section-text .section-ul li,
html[lang='en'] section.services-section .section-ul li {
  padding-right: 0px;
  padding-left: 25px;
}

section.main-section .section-text .section-ul li span,
section.services-section .section-ul li span {
  font-size: 1.5rem;
}

section.main-section .section-text .section-ul li:not(:last-of-type),
section.services-section .section-ul li:not(:last-of-type) {
  margin-bottom: 1rem;
}

section.main-section .section-text .section-ul li::after,
section.services-section .section-ul li::after {
  content: "";
  position: absolute;
  top: 13%;
  right: 0;
  width: 20px;
  height: 20px;
  background: url("/assets/icons/check-mark.png") center/cover no-repeat;
}

html[lang='en'] section.main-section .section-text .section-ul li::after,
html[lang='en'] section.services-section .section-ul li::after {
  left: 0;
  right: unset;
}

section.main-section .section-ul li.active,
section.services-section .section-ul li.active {
  transform: translateX(-10px);
  color: #6b6b6b;
}



section.main-section .section-img {
  width: 90%;
}

section.main-section .section-img img {
  width: 100%;
  object-fit: cover;
}

section.main-section .section-text .section-ul {
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  section.main-section .section-text {
    width: 80%;
  }

  section.main-section .section-img {
    width: 70%;
  }
}

@media (min-width: 992px) {

  section.main-section .section-content,
  section.main-section .section-content.c-reverse {
    flex-direction: row;
    justify-content: space-between;
  }

  html[lang='en'] section.main-section.alpha-delivery,
  html[lang='en'] section.main-section.alpha-delivery * {
    direction: rtl;
  }


  section.main-section .section-img {
    width: 42.5%;
  }

  section.main-section .section-text {
    width: 53%;
  }

  section.main-section .section-text .section-title {
    font-size: 3.15rem;
  }

  html[lang='en'] section.main-section .section-text .section-title {
    font-size: 2.5rem;
  }

}


/* START reviews section */

section.reviews .section-content .reviews-swiper .stars {
  width: 32%;
}

section.reviews .section-content .reviews-swiper .review-text {
  width: 90%;
}

section.reviews .section-content .reviews-swiper .client-img {
  width: 15%;
}

.section-arrows {
  position: absolute;
  top: 50%;
  width: 18%;
  left: 0;
}

html[lang='en'] .section-arrows {
  left: unset;
  right: 0;
}

section.reviews .section-content .reviews-swiper .swiper-button-prev,
section.reviews .section-content .reviews-swiper .swiper-button-next {
  color: var(--main-color);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--main-color);
}

.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 1.5rem;
  content: "" !important;
}

@media (max-width: 991px) {
  .section-arrows .swiper-button-prev {
    display: none;
  }
}

/* start services-section */
.section-heading {
  width: 95%;
  margin: 0px auto 1rem auto;
}

.services-section .section-content .section-subtitle {
  font-weight: bold;
}

@media (min-width: 992px) {
  .section-heading {
    width: 60%;
  }
}

section.services-section .swiper-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem 4rem;
}

@media (min-width: 992px) {
  section.services-section .swiper-content {
    flex-direction: row;
    justify-content: center;
  }

  section.services-section .swiper-content .section-text {
    width: 50%;
  }

  section.services-section .swiper-content .section-img {
    width: 35%;
  }

}

section.services-section .swiper-button-next img,
section.services-section .swiper-button-prev img {
  width: 40px;
}

section.services-section .btns-container {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
}

@media (max-width: 991px) {
  section.services-section .btns-container {
    top: 36%;
  }
}

/* start videos-section */
section.videos-section .videos-swiper .swiper-slide .swiper-content {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}

section.videos-section .videos-swiper .swiper-slide .swiper-content .item-swiper-img {
  width: 40%;
  position: relative;
}

section.videos-section .videos-swiper .swiper-slide .swiper-content .item-swiper-img .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--main-color);
  width: 80px;
  height: 80px;
  border-radius: 50%;
}



section.videos-section .videos-swiper .swiper-slide .swiper-content .item-swiper-img .iphone {
  pointer-events: none;
  position: relative;
  z-index: 1;
}

section.videos-section .videos-swiper .swiper-slide .swiper-content .item-swiper-text {
  width: calc(60% - 1rem);
}

section.videos-section .videos-swiper .swiper-slide .swiper-content video,
section.videos-section .videos-swiper .swiper-slide .swiper-content .video-poster {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  height: 93%;
  object-fit: cover;
}

section.videos-section .videos-swiper .swiper-slide .swiper-content video {
  display: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}



@media (max-width: 576px) {
  section.videos-section .videos-swiper .swiper-slide .swiper-content .item-swiper-text p {
    display: none;
  }

  section.videos-section .videos-swiper .swiper-slide .swiper-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  section.videos-section .videos-swiper .swiper-slide .swiper-content .item-swiper-img,
  section.videos-section .videos-swiper .swiper-slide .swiper-content .item-swiper-text {
    width: 80%;
    margin: 0px auto;
  }

  section.videos-section .videos-swiper .swiper-slide .swiper-content .item-swiper-text {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
}



/* strat comparison section  */
section.comparison-section .section-container {
  background: url('/assets/img/comparison-bg.webp') center/cover no-repeat;
  border-radius: 2.5rem;
  width: 90% !important;
}

@media (min-width: 992px) {
  section.comparison-section .section-container {
    padding: 1.5rem 3rem;
  }
}

@media (max-width: 991px) {
  section.comparison-section .section-container {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

@media (max-width: 576px) {
  .comparison-container .comparison-card {
    width: 90% !important;
    margin: 0px auto !important;
  }

}

section.comparison-section #nextBtn {
  background: linear-gradient(270.07deg, #B4903A 2.29%, #CDAE65 96.3%);
  color: #ffffff;
  padding: .2rem 1rem;
  border-radius: 1rem;
  margin-top: 1rem;
  display: block;
  margin: 1rem auto 0px auto;
}

section.comparison-section .section-heading {
  color: #ffffff;
  gap: 1rem;
}

.comparison-container {
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 95%;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 3rem 1rem;
}

.comparison-container .comparison-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 321px;
  cursor: grab;
  user-select: none;
  border-radius: 2rem;
  overflow: hidden;
}


@media (min-width: 768px) {
  .comparison-container {
    flex-direction: row;
  }

  .comparison-container .comparison-card {
    width: 48%;
  }

}

.comparison-container .comparison-card:active {
  cursor: grabbing;
}

.comparison-container .image-before,
.comparison-container .image-after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.comparison-container .image-after {
  z-index: 2;
  clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
  transition: clip-path 0s linear;
}


.comparison-container .divider {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background: white;
  transform: translateX(-50%);
  cursor: ew-resize;
  z-index: 10;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.comparison-container .divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  background: white;
  border: 3px solid #4299e1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.comparison-container .divider::after {
  content: '⟷';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #4299e1;
  font-size: 18px;
  font-weight: bold;
  z-index: 1;
}

.comparison-container .labels {
  position: absolute;
  top: 20px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 5;
}

.comparison-container .label {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  backdrop-filter: blur(10px);
}

@media (max-width: 768px) {
  .comparison-container {
    margin: 10px;
    border-radius: 12px;
  }

  .comparison-container .comparison-card {
    height: 300px;
  }

  .comparison-container .divider::before {
    width: 36px;
    height: 36px;
  }

  .comparison-container .divider::after {
    font-size: 16px;
  }

  .comparison-container .labels {
    padding: 0 16px;
    top: 16px;
  }

  .comparison-container .label {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .comparison-container .comparison-card {
    height: 250px;
  }
}

.comparison-card.hidden {
  display: none;
}

.comparison-tooth-1,
.comparison-tooth-2 {
  position: absolute;
  width: 9.5%;
  z-index: 1;
}

.comparison-tooth-1 {
  left: -5%;
  top: 12%;
}

.comparison-tooth-2 {
  right: -5%;
  bottom: 5%;
}

/* start why choose */
section.why-choose,
section.why-choose * {
  direction: rtl !important;
}

html[lang='en'] section.main-section.why-choose .section-text .section-ul li,
html[lang='en'] section.main-section.about-section .section-text .section-ul li,
html[lang='en'] section.services-section.about-section .section-ul li,
html[lang='en'] section.services-section.why-choose .section-ul li {
  padding-right: 25px;
  padding-left: 0px;
}

html[lang='en'] section.main-section.about-section .section-text .section-ul li::after,
html[lang='en'] section.main-section.why-choose .section-text .section-ul li::after {
  left: unset;
  right: 0;
}



section.why-choose .desktop-img {
  display: none;
}

@media (max-width: 991px) {
  section.why-choose .section-content {
    background: url('/assets/img/why-choose-bg.webp') center/cover no-repeat;
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-top: 3rem;
  }

  section.why-choose .section-content .section-ul {
    display: none;
  }

  section.why-choose .section-content h2,
  section.why-choose .section-content p {
    color: #ffffff !important;
    align-items: center;
    text-align: center;
  }

  section.why-choose .section-content .section-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

@media (min-width: 992px) {
  section.why-choose .desktop-img {
    display: block;
  }

  section.why-choose .mobile-img {
    display: none;
  }

  section.why-choose .section-content.section-container {
    margin-left: 0px;
    padding-left: 0px;
  }
}

/* start footer */

/*FOOTER*/

footer {
  background: var(--main-color);
  background: url('/assets/img/footer-bg.webp') center/cover no-repeat;
  color: white;
  margin-top: var(--section-padding);
  position: relative;
}

footer::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #00000054;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

@media (min-width: 992px) {

  footer::after {
    position: absolute;
    content: "";
    background: url(/assets/icons/footer-top.png) center / cover no-repeat;
    width: 250px;
    height: 259px;
    z-index: 1;
    left: 3%;
    top: -10%;
    width: 12.4%;
    height: 37%;
  }

  html[lang='en'] footer::after {
    left: unset;
    right: 3%;
  }
}

footer a {
  color: #fff;
  font-size: 1.1rem;
  transition-duration: 0.2s;
}

footer a:hover {
  color: var(--main-color);
  text-decoration: none;
}

footer li a>img {
  width: 22px;
}

.copy {
  font-size: 12px;
  padding: 10px;
  border-top: 1px solid #FFFFFF;
}

.footer-middle {
  padding-top: 2em;
  color: white;
  position: relative;
  z-index: 1;
}

.footer-middle .columns-container {
  gap: 2rem 0rem;
}

footer h3 {
  margin-bottom: 2rem;
  position: relative;
  width: fit-content;
}

footer .tree img {
  position: absolute;
  top: -50px;
  left: 50%;
  width: 40px;
  transform: translateX(-50%) scale(0);
  transition: transform .4s ease-in-out;
}

footer .tree:hover img {
  transform: translateX(-50%) scale(1) rotate(360deg);
}

footer h3::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  background-color: whitesmoke;
  top: 108%;
  right: 0;
}

footer ul li {
  margin-bottom: 1rem;
}

.footer-logo {
  width: 300px;
  width: 75%;
}

footer ul li a {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}

footer .footer-center {
  width: 121%;
}

@media (max-width: 768px) {

  footer .footer-center,
  section.contact-section .contact-logo {
    display: none;
  }

}

@media (max-width: 767px) {
  footer .box-logo {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  footer .box-logo>p {
    max-width: 530px;
  }
}

ul.lavender-social-network {
  display: flex;
}

ul.lavender-social-network li {
  list-style: none;
}

ul.lavender-social-network li a {
  width: 50px;
  height: 50px;
  background-color: #fff;
  text-align: center;
  line-height: 80px;
  font-size: 1.3rem;
  margin: 0 10px;
  display: block;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 3px solid #fff;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

ul.lavender-social-network li a .icon {
  position: relative;
  color: #262626;
  transition: .5s;
  z-index: 3;
}

ul.lavender-social-network li a:hover .icon {
  color: #fff;
  transform: rotateY(360deg);
}

ul.lavender-social-network li a:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f00;
  transition: .5s;
  z-index: 2;
}

ul.lavender-social-network li a:hover:before {
  top: 0;
}

ul.lavender-social-network li:nth-child(1) a:before {
  background: #3b5999;
}

ul.lavender-social-network li:nth-child(2) a:before {
  background: #000000;
}

ul.lavender-social-network li:nth-child(3) a:before {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

ul.lavender-social-network li:nth-child(4) a:before {
  background: #dd4b39;
}


/* start section contact  */
section.contact-section .section-content .section-img {
  background: url('/assets/img/contact-bg.webp') center/cover no-repeat;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.contact-form {
  padding: 20px;
  width: 100%;
  margin: auto;
}

section.contact-section .contact-logo {
  position: absolute;
  width: 8% !important;
  bottom: -2%;
  right: 39%;
  z-index: 1;
  object-fit: cover;
}

html[lang='en'] section.contact-section .contact-logo {
  right: unset;
  left: 39%;
}

.contact-form h2 {
  text-align: center;
  margin-bottom: 15px;
  font-size: 20px;
  color: #333;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  border-radius: 1rem;
  background-color: #ffffff;
}

.contact-form textarea {
  resize: none;
  height: 200px;
}

.contact-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

.contact-list li {
  display: flex;
  align-items: flex-start;
  padding: 12px;
}

.contact-list li img {
  width: 32px;
  height: 32px;
  margin-left: 10px;
}

html[lang='en'] .contact-list li img {
  margin-left: 0px;
  margin-right: 10px;
}

.contact-list li .info span {
  display: block;
  font-weight: bold;
  margin-bottom: 4px;
  color: #333;
}

@media (max-width: 768px) {
  .contact-list {
    grid-template-columns: 1fr;
  }
}

/* start lavender section */
section.lavender-section {
  margin-top: 4rem;
}

section.lavender-section .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
}

section.lavender-section .content .item {
  position: relative;
  z-index: 1;
  color: #ffffff;
}

section.lavender-section .content .section-subtitle {
  color: #ffffff !important;
}

@media (min-width: 992px) {
  section.lavender-section .content {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0rem 0rem;
    padding: 1.5rem 2rem 0px 1.5rem;
  }

  section.lavender-section .content .item {
    width: 30%;
  }

  section.lavender-section .content .item1 {
    width: 38%;
  }

  section.lavender-section .content .item1 p {
    width: 84%;
    line-height: 1.8;
    font-size: 1.13rem;
  }

  section.lavender-section .content .item2 {
    width: 22.4%;
  }

  section.lavender-section .content .item1,
  section.lavender-section .content .item3 {
    align-self: center;
    padding: 1rem 0px;
  }

}

.lavender-bg,
.mobile-lavender-bg {
  border-radius: 2.5rem;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  position: absolute;
  left: 0px;
  top: 0px;
  height: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

section.lavender-section .content .lavender-ul li:not(:last-of-type) {
  margin-bottom: 1.3rem;
}

section.lavender-section .content .lavender-ul li img {
  width: 15%;
  width: 52px;
}

section.lavender-section .content .lavender-ul li h4 {
  font-weight: 500;
  color: var(--main-color);
}

.lavender-logo {
  position: absolute;
  left: 3%;
  top: 4%;
  width: 15%;
  z-index: 1;
}

section.lavender-section .content .lavender-top {
  position: absolute;
  top: -16%;
  right: 26%;
  width: 120px;
  z-index: 1;
}

@media (max-width: 991px) {

  .lavender-top,
  .lavender-logo {
    display: none;
  }
}

.gold-logo,
.mobile-lavender-bg {
  display: none;
}

@media (max-width: 768px) {

  .gold-logo {
    z-index: 1;
    width: 75%;
    margin: 0px auto;
  }

  .gold-logo,
  .mobile-lavender-bg {
    display: block;
  }

  .lavender-top,
  .lavender-bg {
    display: none;
  }

  section.lavender-section .content .item2 {
    order: 1;
    margin: 1.5rem auto;
  }

  section.lavender-section .content .item1 {
    order: 2;
    margin-bottom: 3rem;
  }

  section.lavender-section .content .item1 .lavender-btn {
    display: none;
  }

  section.lavender-section .content .item3 {
    order: 3;
  }

}

/* start about section */
html[lang='ar'] section.main-section.about-section .section-text .text {
  font-size: 1.5rem;
  line-height: 1.8;
}

section.about-section .section-text .text img {
  width: 19px;

}

/* ========== Strat main-about ========== */

section.main-about li::after {
  display: none;
}

section.main-about li {
  padding: 0px !important;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}

/* ========== Strat about-values-section ========== */
section.about-values-section .banner {
  color: #ffffff;
  background: url('/assets/img/about-values-section.webp') center/cover no-repeat;
  height: 50vh;
  padding: 1.5rem 2.5rem;
}

section.about-values-section .cards-container {
  width: 80%;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  gap: 3rem 1rem;
  margin-top: -103px;
}

@media (min-width: 992px) {
  section.about-values-section .cards-container {
    flex-direction: row;
  }
}

section.about-values-section .lavender-btn {
  background: linear-gradient(90deg, #BD914D 0%, #EDDB94 100%) !important;

}

section.about-values-section .lavender-btn span {
  color: var(--heading-dark) !important;
}

section.about-values-section .cards-container .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-radius: 0rem 2rem 2rem 2rem;
}

section.about-values-section .cards-container .card img {
  width: 30%;
  margin-top: -12px;

}

section.about-values-section .cards-container .card img {}

section.about-values-section .cards-container .card h5 {
  font-size: 2rem;
  background: linear-gradient(270.07deg, #B4903A 2.29%, #CDAE65 96.3%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}



section.about-values-section .cards-container .card p {
  color: #868686;
  text-align: center;
  padding: 0px 1rem;

}

/* start contact-about */
section.contact-about ul,
section.contact-about ul li {
  display: flex;
  align-items: center;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}

section.contact-about ul li {
  background: url('/assets/img/contact4.png') center/cover no-repeat;
  border-radius: 2rem;
  padding: .5rem 1rem;
  gap: 1rem;
  color: #ffffff;
  min-width: 255px;
  min-width: 255px;

  justify-content: unset;
}

section.contact-about ul li img {
  width: 51px;
}

.iframe-container {
  width: 90%;
  border-radius: 2rem;
  overflow: hidden;
  margin: 0px auto;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}


/* start blogs and blog page */

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

/* Pagination container */
.pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 50%;
  height: auto;
  margin-top: 20px;
  gap: 10px;
}

/* Style each page number as a circle */
.page-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  background-color: #e2e2e2;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
  font-size: 14px;
  padding: 5px;
}

.page-number.active {
  background-color: #007bff;
  color: white;
}

.page-number:hover {
  background-color: #007bff;
  color: white;
}

.blogs {
  padding: 30px 0;
  padding-top: 60px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blogs h2 {
  margin: 0;
  position: relative;
  font-size: 35px;
  color: var(--main-color);
}

.blogs h2::before {
  content: "";
  position: absolute;
  width: 25%;
  height: 3px;
  right: 0;
  bottom: 0;
  background-color: var(--secondery-color);
}


.blog .blogs {
  padding: 60px 0;
}

html[lang='en'] .blogs h2::before,
html[lang='en'] .blogs .b-c .popular-blogs h3::before,
html[lang='en'] .blog-details .b-s-e .popular-blogs h3::before {
  right: unset !important;
  left: 0 !important;
}

.blogs .b-t {
  max-width: calc(100% - 30px);
  width: 800px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.blog-details {
  text-align: start;
}

.blog-details h1,
.blog-details h2,
.blog-details h3,
.blog-details h4,
.blog-details h5,
.blog-details h6 {
  width: 100%;
  text-align: start;
}

.blog-details {
  text-align: start;
}

.blog-details h1,
.blog-details h2,
.blog-details h3,
.blog-details h4,
.blog-details h5,
.blog-details h6 {
  width: 100%;
  text-align: start;
}

.blogs .b-t .blog-search,
.blog-details .b-s-e .blog-search {
  width: 55%;
  display: flex;
  flex-direction: row;
  border-radius: 25px;
  overflow: hidden;
}

.blogs .b-t .blog-search input,
.blog-details .b-s-e .blog-search input {
  color: #444;
  flex-shrink: 1;
  flex-grow: 1;
  min-width: 0;
  border: none;
  padding: 7.5px 20px;
  font-size: 17px;
  background-color: #ffffff;
  transition: background 0.5s;
}

.blogs .b-t .blog-search input:focus,
.blog-details .b-s-e .blog-search input:focus {
  background-color: #efecf4;
}

.blogs .b-t .blog-search button,
.blog-details .b-s-e .blog-search button {
  border-radius: 0;
  padding: 7.5px 25px;
  box-shadow: none;
  background-color: var(--main-color);
  transition: background 0.5s;
}

.blogs .b-t .blog-search button:hover,
.blog-details .b-s-e .blog-search button:hover {
  background-color: var(--secondery-color);
}

.blogs .b-c {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 1200px;
  max-width: calc(100% - 30px);
}

.blogs .b-c .popular-blogs,
.blog-details .b-s-e .popular-blogs {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  width: 100%;
  max-width: 100%;
}

.blogs .b-c .popular-blogs h3,
.blog-details .b-s-e .popular-blogs h3 {
  align-self: flex-start;
  position: relative;
  margin: 0;
  margin-bottom: 15px;
  color: var(--main-color);
  font-size: 22px;
}

.blogs .b-c .popular-blogs h3::before,
.blog-details .b-s-e .popular-blogs h3::before {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 40%;
  height: 3px;
  background-color: var(--secondery-color);
}

.blogs .b-c .popular-blogs .popular-blog,
.blog-details .b-s-e .popular-blogs .popular-blog {
  border-radius: 25px;
  padding: 15px;
  box-sizing: border-box;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  transition: box-shadow 0.5s;
}

.blogs .b-c .popular-blogs .popular-blog:hover,
.blog-details .b-s-e .popular-blogs .popular-blog:hover {
  box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;
}

.blogs .b-c .popular-blogs .popular-blog img,
.blog-details .b-s-e .popular-blogs .popular-blog img {
  margin-left: 15px;
  width: 80px;
  height: auto;
  border-radius: 15px;
}

.blogs .b-c .popular-blogs .popular-blog .p-b,
.blog-details .b-s-e .popular-blogs .popular-blog .p-b {
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  flex-grow: 1;
}

.blogs .b-c .popular-blogs .popular-blog .p-b h4,
.blog-details .b-s-e .popular-blogs .popular-blog .p-b h4 {
  margin: 0;
  color: var(--main-color);
  font-weight: bold;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blogs .blogs-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  width: 800px;
  max-width: 100%;
}

.blogs .blogs-container .blog-item {
  margin-top: 30px;
  width: 100%;
}

.blogs .blogs-container .blog-item a {
  align-self: flex-start;
  display: flex;
  width: 100%;
}

.blogs .blogs-container .blog-item a img {
  align-self: flex-start;
  display: flex;
  width: 100%;
  height: auto;
  border-radius: 25px;
}

.blogs .blogs-container .blog-item .blog-info {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  padding: 30px 25px;
  box-sizing: border-box;
  margin-top: 25px;
  width: 100%;
  border-radius: 25px;
  background-color: #ffffff;
  color: var(--main-color);
  transition: box-shadow 0.5s;
}

.blogs .blogs-container .blog-item .blog-info:hover {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.blogs .blogs-container .blog-item .blog-info h3 {
  margin: 0;
  line-height: 1.25;
  font-size: 20px;
  font-weight: bold;
}

.blogs .blogs-container .blog-item .blog-info p {
  margin: 30px 0;
  line-height: 1.8;
  font-size: 15px;
  color: #9e9e9e;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blogs .blogs-container .blog-item .blog-info .b-i,
.blogs .b-c .popular-blogs .popular-blog .p-b .b-i,
.blog-details .b-s-e .popular-blogs .popular-blog .p-b .b-i {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.blogs .blogs-container .blog-item .blog-info .b-i span,
.blogs .b-c .popular-blogs .popular-blog .p-b .b-i span,
.blog-details .b-s-e .popular-blogs .popular-blog .p-b .b-i span {
  line-height: 1;
  color: #c0c7c5;
  font-weight: bold;
  font-size: 14px;
}

.blogs .blogs-container .blog-item .blog-info .b-i span.author,
.blogs .b-c .popular-blogs .popular-blog .p-b .b-i span.author,
.blog-details .b-s-e .popular-blogs .popular-blog .p-b .b-i span.author {
  color: var(--secondery-color);
}


.breadcrumbs {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  width: 100%;
  color: var(--main-color);
  background-color: #f4edfd;
  font-size: 17px;
  margin-top: 0px;
}


.breadcrumbs div {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: var(--main-color);
}

.breadcrumbs i {
  color: var(--main-color);
  font-size: 13px;
  font-weight: bold;
  margin: 0 7.5px;
}

.breadcrumbs a,
.breadcrumbs h1 {
  font-weight: bold;
  color: var(--main-color);
  transition: color 0.5s;
}

.breadcrumbs h1 {
  margin-bottom: 0px;
}

.breadcrumbs a:hover,
.breadcrumbs h1:hover {
  color: var(--secondery-color);
}

.breadcrumbs a.active,
.breadcrumbs h1.active {
  color: #444;
}

.breadcrumbs h1.active {
  font-size: 1rem;
}


.blog-details {
  padding: 40px 0;
  width: 1200px;
  max-width: calc(100% - 30px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.b-d-c a {
  color: var(--main-color) !important;
}

.blog-details .b-d-c,
.blog-details .b-s-e {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.blog-details .b-d-c {
  width: 100%;
}

.blog-details .b-d-c img {
  display: flex;
  width: 100%;
  height: auto;
  border-radius: 15px;
}

.blog-details .b-d-c .b-d-i {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.blog-details .b-d-c .b-d-i div {
  margin-left: 15px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: bold;
  color: var(--main-color);
}

html[lang="en"] .blog-details .b-d-c .b-d-i div {
  margin-left: 0px;
  margin-right: 15px;
}

.blog-details .b-d-c .b-d-i div a {
  color: var(--secondery-color);
  transition: color 0.5s;
}

.blog-details .b-d-c .b-d-i div a:hover {
  cursor: pointer;
  color: #a8003b;
}

.blog-details .b-d-c .b-d-i div:last-child {
  margin: 0;
}

.blog-details .b-d-c .b-d-i .icon {
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--main-color);
  color: #ffffff;
  font-size: 16px;
  border-radius: 50%;
}

html[lang="en"] .blog-details .b-d-c .b-d-i .icon {
  margin-left: 0px;
  margin-right: 10px;
}

.blog-details .b-d-c p {
  margin: 0;
  margin-top: 35px;
  color: #2b1552;
}

.blog-details .b-d-c h1,
.blog-details .b-d-c h2 {
  margin-top: 1rem !important;
}

.blog-details .b-d-c h1,
.blog-details .b-d-c h2,
.blog-details .b-d-c h3,
.blog-details .b-d-c ul {
  margin: 0;
  color: #2b1552;
}

.blog-details .b-d-c h3 {
  margin-top: 30px;
  margin-bottom: 10px;
}



.blog-details .b-s-e {
  margin-top: 40px;
  width: 100%;
}

.blog-details .b-s-e .blog-search {
  width: 100%;
}


@media only screen and (min-width: 500px) {

  .blog-details .b-d-c,
  .blog-details .b-s-e {
    width: 400px;
  }
}

@media only screen and (min-width: 767px) {
  .blogs .blogs-container .blog-item {
    width: calc((100% / 2) - (5px * 2));
  }

  .blogs .b-t .blog-search {
    width: 40%;
  }

  .blogs .b-c .popular-blogs {
    width: 600px;
  }
}

@media only screen and (min-width: 767px) {
  .blogs .blogs-container .blog-item {
    width: calc((100% / 2) - (10px * 2));
  }

}

@media only screen and (min-width: 900px) {
  .blog-details {
    width: 850px;
    flex-direction: row;
    align-items: flex-start;
  }

  .blog-details .b-d-c {
    width: 450px;
  }

  .blog-details .b-s-e {
    margin: 0;
    width: 350px;
  }
}

@media only screen and (min-width: 1250px) {

  .blogs .b-t {
    width: 1200px;
  }

  .blogs .b-t .blog-search {
    width: 30%;
  }

  .blogs .b-c {
    flex-direction: row;
    align-items: flex-start;
  }

  .blogs .b-c .popular-blogs {
    width: 350px;
  }

  .blog-details {
    width: 1200px;
  }

  .blog-details .b-d-c {
    width: 750px;
  }

  .blog-details .b-d-c .b-d-i {
    flex-direction: row;
  }

  .blog-details .b-d-c .b-d-i div {
    margin-bottom: 0;
  }

  .blog-details .b-s-e {
    width: 350px;
  }
}

/* start gallery */
.gallery {
  padding: 30px 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gallery .gallery-options {
  max-width: calc(100% - 40px);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.gallery .gallery-options button {
  cursor: pointer;
  width: 100%;
  display: flex;
  flex-direction: row;
  border-radius: 25px;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  margin-bottom: 15px;
  padding: 10px 15px;
  box-shadow: unset;
  background-color: transparent;
  color: var(--main-color);
  font-weight: bold;
  border: 1px solid #e6e0f0;
  transition: background 0.5s;
}

@media only screen and (min-width: 500px) {
  .gallery .gallery-options button {
    width: unset;
    margin: 0;
    margin-left: 15px;
  }
}

.gallery .gallery-options i.clinic {
  background-image: url(/assets/icons/clinic.png);
}

.gallery .gallery-options i.surgery {
  background-image: url(/assets/icons/surgery.png);
}

.gallery .gallery-options i {
  margin-left: 7.5px;
  width: 22.5px;
  height: 22.5px;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.gallery .gallery-container.show {
  display: grid;
}

@media only screen and (min-width: 500px) {
  .gallery .gallery-container {
    grid-template-columns: auto auto;
  }
}

@media only screen and (min-width: 767px) {
  .gallery .gallery-container {
    grid-template-columns: auto auto auto;
  }
}

@media only screen and (min-width: 1250px) {
  .gallery .gallery-container {
    grid-template-columns: auto auto auto auto;
  }
}


.gallery .gallery-container {
  display: none;
  margin-top: 30px;
  width: calc(100% - 40px);
  grid-template-columns: auto;
  grid-gap: 20px;
}

.gallery .gallery-container .photo {
  cursor: pointer;
  position: relative;
  width: 100%;
  display: flex;
  overflow: hidden;
  border-radius: 5px;
}

.gallery .gallery-container .photo img {
  display: flex;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.gallery .gallery-container .photo .type {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 5px 10px;
  background-color: rgba(233, 79, 132, 0.7);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  border-radius: 7.5px;
}

.gallery .gallery-container .photo .type span {
  color: #f8f3ff;
}

.gallery .gallery-container .photo .caption {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.gallery .gallery-container .photo .caption .caption-container {
  padding-right: 10px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 20px;
  width: calc(100% - 40px);
  border-right: 4px solid var(--secondery-color);
}

.gallery .gallery-container .photo .caption .caption-container h4 {
  line-height: 1.35;
  margin: 0;
  color: #f8f3ff;
  font-size: 17px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gallery .gallery-container .photo .caption .caption-container .caption-author {
  margin-top: 12.5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.gallery .gallery-container .photo .caption .caption-container .caption-author img {
  margin-left: 7.5px;
  display: flex;
  width: 22.5px;
  height: 22.5px;
  border-radius: 50%;
}

.gallery .gallery-container .photo img {
  display: flex;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.gallery .gallery-container .photo .caption .caption-container .caption-author span {
  font-size: 12px;
  color: #c9c9c9;
}


@media only screen and (min-width: 500px) {
  .gallery .gallery-container {
    grid-template-columns: auto auto;
  }
}

@media only screen and (min-width: 767px) {
  .gallery .gallery-container {
    grid-template-columns: auto auto auto;
  }
}

@media only screen and (min-width: 1250px) {
  .gallery .gallery-container {
    grid-template-columns: auto auto auto auto;
  }
}

.gallery-slideshow {
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000001;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.gallery-slideshow .prev-btn {
  right: 20px;
}

.gallery-slideshow .prev-btn,
.gallery-slideshow .next-btn {
  position: absolute;
  padding: 0;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  left: 0;
  width: 50px;
  height: 50px;
  background-color: var(--secondery-color);
  color: #ffffff;
  border-radius: 50%;
  box-shadow: none;
  transition: opacity 0.5s;
}

.gallery-slideshow .prev-btn::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f101";
}

.gallery-slideshow .next-btn::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f100";
}

.gallery-slideshow .next-btn {
  left: 20px !important;
}

.gallery-slideshow .prev-btn {
  right: 20px !important;
}

.gallery-slideshow .prev-btn::before,
.gallery-slideshow .next-btn::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.gallery-slideshow .g-s-i {
  position: relative;
  display: flex;
  max-width: calc(100% - 40px);
  max-height: calc(100% - 40px);
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 15px;
}

.gallery-slideshow .g-s-i img {
  display: flex;
  width: auto;
  height: auto;
  max-width: 80vw;
  max-height: 80vh;
  object-fit: contain;
}

@media only screen and (min-width: 500px) {
  .gallery-slideshow .g-s-i .type {
    top: 20px;
    right: 20px;
  }
}

.gallery-slideshow .g-s-i .type {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
  background-color: rgba(233, 79, 132, 0.7);
  color: #ffffff;
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  border-radius: 7.5px;
  transition: opacity 0.3s;
}


.gallery-slideshow .g-s-i .caption {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: opacity 0.3s;
}

@media only screen and (min-width: 500px) {
  .gallery-slideshow .g-s-i .caption {
    display: flex;
  }
}

@media only screen and (min-width: 500px) {
  .gallery-slideshow .g-s-i .caption .caption-container {
    margin: 30px;
    width: calc(100% - 60px);
  }
}

.gallery-slideshow .g-s-i .caption .caption-container {
  padding-right: 10px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 20px;
  width: calc(100% - 40px);
  border-right: 4px solid var(--secondery-color);
}

@media only screen and (min-width: 767px) {
  .gallery-slideshow .g-s-i .caption .caption-container h4 {
    font-size: 24px;
  }
}

.gallery-slideshow .g-s-i .caption .caption-container h4 {
  line-height: 1;
  margin: 0;
  color: #f8f3ff;
  font-size: 18px;
}

@media only screen and (min-width: 767px) {
  .gallery-slideshow .g-s-i .caption .caption-container .caption-author {
    margin-top: 15px;
  }
}

.gallery-slideshow .g-s-i .caption .caption-container .caption-author {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

@media only screen and (min-width: 767px) {
  .gallery-slideshow .g-s-i .caption .caption-container .caption-author img {
    width: 30px;
    height: 30px;
  }
}

.gallery-slideshow .g-s-i .caption .caption-container .caption-author img {
  margin-left: 7.5px;
  display: flex;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.gallery-slideshow .g-s-i img {
  display: flex;
  width: auto;
  height: auto;
  max-width: 80vw;
  max-height: 80vh;
  object-fit: contain;
}

@media only screen and (min-width: 767px) {
  .gallery-slideshow .g-s-i .caption .caption-container .caption-author span {
    font-size: 16px;
  }
}

.gallery-slideshow .g-s-i .caption .caption-container .caption-author span {
  font-size: 14px;
  color: #c9c9c9;
}

.gallery-slideshow .prev-btn {
  right: 20px;
}

.gallery-slideshow .prev-btn,
.gallery-slideshow .next-btn {
  position: absolute;
  padding: 0;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  left: 0;
  width: 50px;
  height: 50px;
  background-color: var(--secondery-color);
  color: #ffffff;
  border-radius: 50%;
  box-shadow: none;
  transition: opacity 0.5s;
  cursor: pointer;
  border: none;
}

@media only screen and (min-width: 1400px) {
  .videos .videos-container .video {
    margin: 50px 25px 0;
    width: calc((100% / 4) - 50px);
  }
}

.videos {
  padding: 30px 0;
  padding-top: 60px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.videos h2 {
  margin: 0;
  position: relative;
  font-size: 35px;
  color: var(--main-color);
}

.videos h2::before {
  content: "";
  position: absolute;
  width: 25%;
  height: 3px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  background-color: var(--secondery-color);
}

.videos .h-v-s .swiper-wrapper {
  align-items: baseline;
  align-items: center;
}

.videos .h-v-s {
  padding-bottom: 0;
}

.videos .h-v-s .h-v-c {
  margin-top: 0;
}

.videos .h-v-s .h-v-c .swiper-slide .mobile-button {
  display: none;
}

.reserve-form,
.message-form,
.videos {
  padding: 60px 0;
}

.videos {
  padding: 0;
}

.videos .videos-container {
  width: 90%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.videos .videos-container .video {
  cursor: pointer;
  margin: 0;
  margin-top: 50px;
  width: 100%;
}

.videos .videos-container .video .v-i {
  position: relative;
  display: flex;
  width: 100%;
  height: 440px;
  border-radius: 25px;
  overflow: hidden;
}

.videos .videos-container .video .v-i video {
  display: none;
  opacity: 0;
  transition: opacity 0.5s;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.videos .videos-container .video .v-i img {
  display: flex;
  width: 100%;
  height: auto;
}

.videos .videos-container .video .v-i .v-i-c {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  transition: background 0.5s;
}

.videos .videos-container .video .v-i .v-i-c .play {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size: 25px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--secondery-color);
  transition: transform 0.5s;
}

.videos .videos-container .video .v-i .v-i-c:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.4);
}

.videos .videos-container .video .v-i .v-i-c:hover .play {
  transform: translate(-50%, -50%) scale(1.15);
  -ms-transform: translate(-50%, -50%) scale(1.15);
}

.videos .videos-container .video .v-t {
  margin-top: 20px;
  box-sizing: border-box;
  padding: 15px;
  width: 100%;
  background-color: transparent;
  box-shadow: rgb(100 100 111 / 10%) 0px 7px 29px 0px;
  border-radius: 25px;
  transition: box-shadow 0.5s;
}

.videos .videos-container .video .v-t:hover {
  cursor: pointer;
  box-shadow: rgb(100 100 111 / 25%) 0px 7px 29px 0px;
}

.videos .videos-container .video .v-t h4 {
  margin: 0;
  line-height: 1.4;
  color: #372061;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.videos .videos-container .video .v-t .v-e-i {
  margin-top: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.videos .videos-container .video .v-t .v-e-i i {
  margin-right: 20px;
  font-size: 25px;
  color: #0e8df1;
}

.videos .videos-container .video .v-t .v-e-i .v-e-i-i {
  display: flex;
  flex-shrink: 1;
  flex-direction: row;
  align-items: center;
}

.videos .videos-container .video .v-t .v-e-i .v-e-i-i span {
  color: #444;
  font-weight: bold;
  font-size: 14px;
  margin-right: 7.5px;
  flex-shrink: 1;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.videos .videos-container .video .v-t .v-e-i .v-e-i-i img {
  width: 35px;
  height: auto;
  border-radius: 50%;
}

@media only screen and (max-width: 442px) {

  .videos .h-v-s .h-v-c {
    width: 77%;
  }

  .videos .h-v-s .h-v-c .swiper-slide .h-v-t p,
  .videos .h-v-s .h-v-c .swiper-slide .h-v-t a,
  .videos .h-v-s .h-v-c .swiper-slide .h-v-t ul {
    display: none;
  }

  .videos .h-v-s .h-v-c .swiper-slide .h-v-i {
    margin-bottom: 25px;
    width: 100%;
    border-radius: 30px;
  }

  .videos .h-v-s .h-v-c .swiper-slide .h-v-t h3 {
    line-height: 30px;
    font-size: 19px;
  }

  .videos h2 {
    margin-bottom: 16px;
  }

  .videos .h-v-s .swiper .swiper-button-prev,
  .videos .h-v-s .swiper .swiper-button-next {
    width: 30px;
    height: 30px;
  }

  .videos .h-v-s .swiper .swiper-button-next {
    right: -38.5px;
  }

  .videos .h-v-s .swiper .swiper-button-prev {
    left: -38.5px;
  }

  .videos .h-v-s .h-v-c .swiper-slide .mobile-button {
    display: block;
    margin-bottom: 15px;
  }

}

@media only screen and (max-width: 1400px) {
  .videos .videos-container .video {
    margin: 50px 25px 0;
    width: calc((100% / 4) - 50px);
  }
}

@media only screen and (max-width: 900px) {
  .videos .videos-container .video {
    margin: 30px 15px 0;
    width: calc((100% / 3) - 30px);
  }
}

@media only screen and (max-width: 767px) {
  .videos .videos-container .video {
    margin: 50px 25px 0;
    width: calc((100% / 2) - 50px);
  }

  .videos .videos-container .video .v-t {
    margin-top: 30px;
    padding: 25px;
  }
}

@media only screen and (max-width: 500px) {
  .videos .videos-container .video {
    margin: 25px 12.5px 0;
    width: calc((100% / 1) - 25px);
  }
}







/* start experience-section */
html[lang='en'] .experience-section .section-ul li img {
  scale: -1;
}

/* start blogs */

.custom-blog-swiper {
  padding: var(--section-padding) 20px 0px 20px;
  background: #fff;
}

.custom-blog-swiper .swiper {
  padding-bottom: 2rem;
}

.custom-blog-swiper .special-small-title,
.custom-blog-swiper .special-title {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.custom-blog-swiper .custom-blog-read {
  background: linear-gradient(90deg, #B4903A 0%, #CDAE65 100%);
  padding: .5rem .8rem;
  border-radius: .5rem;
  color: #fff;
}

.custom-blog-swiper .custom-blog-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.custom-blog-swiper .custom-blog-card:hover {
  transform: translateY(-5px);
}

.custom-blog-swiper .custom-blog-image {
  position: relative;
}

.custom-blog-swiper .custom-blog-image img.main-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.custom-blog-swiper .custom-blog-tag {
  position: absolute;
  bottom: -15px;
  left: 20px;
  background: var(--heading-dark);
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-blog-swiper .custom-blog-content {
  padding: 20px;
}

.custom-blog-swiper .custom-blog-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  min-height: 43.19px;
  color: var(--main-color);
}

.custom-blog-swiper .custom-blog-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

.custom-blog-swiper .custom-blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: #555;
  align-items: center;
  justify-content: space-between;
}

.custom-blog-swiper .custom-blog-author {
  color: var(--heading-dark);
  font-weight: 600;
}

/* start team-section */
section.team-section .section-title,
section.team-section .text {
  color: #ffffff !important;
}

section.team-section .section-title {
  margin-bottom: 1rem !important;
}

section.team-section .section-text {
  margin-bottom: 1.5rem;
}

section.team-section .lavender-bg {
  display: block !important;
}

section.team-section .content {
  padding-bottom: 0px !important;
}

@media (max-width:1199px) {
  section.team-section .text {
    font-size: 1rem !important;
  }
}