@import url("dark.css");

:root {
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f4f4f4;
  --color-text-primary: #151515;
  --color-text-secondary: #404040;
  --color-accent-primary: #ff5722;
  --color-accent-hover: #e64a19;
  --color-border: #e0e0e0;
}

body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-secondary);
  transition: background-color 0.5s, color 0.5s;
}

.tf-section,
.header {
  background-color: var(--color-bg-primary);
}
.tf-section.section-faqs,
.footer {
  background-color: var(--color-bg-secondary);
}
h1,
h2,
h3,
h4,
h5,
h6,
.title-parent .title {
  color: var(--color-text-primary);
}
p,
.footer-col ul li a,
.copyright {
  color: var(--color-text-secondary);
}
.btn-action,
a {
  color: var(--color-accent-primary);
}
.btn-action {
  background-color: var(--color-accent-primary);
  color: var(--color-bg-primary);
}
.btn-action:hover {
  background-color: var(--color-accent-hover);
}

.light-mode-container {
  position: fixed;
  bottom: 30px;
  left: 30px;
  height: 44px;
  width: 44px;
  cursor: pointer;
  display: flex;
  border-radius: 50px;
  z-index: 100;
  transition: all 400ms linear;
  justify-content: center;
  background-color: #1b293e;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}
.light-mode {
  background: transparent;
  border: none;
  cursor: pointer;
}

body.dark {
  --color-bg-primary: #121212;
  --color-bg-secondary: #1e1e1e;
  --color-text-primary: #ffffff;
  --color-text-secondary: #b0b0b0;
  --color-accent-primary: #ff9800;
  --color-accent-secondary: #fe8c73;
  --color-border: #333333;

  background-color: var(--color-bg-primary) !important;
  color: var(--color-text-secondary) !important;
}

body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6,
body.dark b,
body.dark strong,
body.dark .title-parent .title,
body.dark .heading-title,
body.dark .main-nav-header a,
body.dark .toggle-title,
body.dark .highlight,
body.dark .ops-item h3,
body.dark .governance-item h3,
body.dark .unique-card-title,
body.dark .list-services-box2 .box-item h3,
body.dark .info-item.hover-card h3,
body.dark .cards-section .card .title,
body.dark .cards-section .card .text span.spann,
body.dark .single-service-style3 h3,
body.dark .single-service-style3 p,
body.dark .single-service-style3 .icon i,
body.dark .contact-form form .input-box label,
body.dark .xoven-video-gallery-2 p {
  color: var(--color-text-primary) !important;
}

body.dark p,
body.dark .text,
body.dark .toggle-content,
body.dark .footer-col p,
body.dark .footer-col ul li,
body.dark .copyright p,
body.dark .unique-card-desc,
body.dark .ops-item .ops-subtitle,
body.dark .cards-section .card .text,
body.dark #distribution .distribution-item p {
  color: var(--color-text-secondary) !important;
}

body.dark a,
body.dark .color,
body.dark .how-we-work .step .icon,
body.dark div.service-item i,
body.dark div.service-item .icon,
body.dark .ops-item .ops-subtitle {
  color: var(--color-accent-primary) !important;
}
body.dark .about-style1-area h3,
body.dark .skill-style1_content-box h3,
body.dark .service-deails-box h3 {
  color: var(--color-accent-secondary) !important;
}

body.dark .header,
body.dark footer,
body.dark .tf-section,
body.dark .main-about,
body.dark #strategies-rtwus,
body.dark .how-we-work,
body.dark #edit-section-background,
body.dark #edit-hww-background,
body.dark .section-contact-modern,
body.dark .cards-section,
body.dark #how-we-work-2,
body.dark #unique-cards-wrapper,
body.dark #distribution,
body.dark #governance,
body.dark #operations-complex,
body.dark .about-style1-area,
body.dark .service-style3-area,
body.dark .skill-style1-area,
body.dark .service-details-area,
body.dark .contact-style1-area,
body.dark .terms-area {
  background-color: var(--color-bg-primary) !important;
  background-image: none !important;
  border-color: var(--color-border) !important;
}

body.dark .tf-section.section-faqs,
body.dark .footer-area.style2,
body.dark div.service-item,
body.dark .list-services-box2 .box-item,
body.dark .accordion-toggle,
body.dark .accordion,
body.dark .toggle-content,
body.dark .how-we-work .step,
body.dark .cards-section .card,
body.dark .governance-item,
body.dark .ops-item,
body.dark #unique-cards-wrapper .unique-card,
body.dark #unique-card-1,
body.dark #unique-card-2,
body.dark .service-deails-box,
body.dark .contact-style1_inner-box,
body.dark .cookie-popup {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
}

body.dark .single-service-style3,
body.dark .service-deails-bottom-box .single-support-box {
  background-color: var(--color-accent-secondary) !important;
}

body.dark #site-header {
  background-color: rgba(18, 18, 18, 0.33) !important;
  border-bottom-color: var(--color-border) !important;
}
body.dark .main-nav-header,
body.dark #main-nav .menu .sub-menu {
  background-color: transparent !important;
}

body.dark #main-nav .menu .sub-menu {
  background-color: var(--color-bg-secondary) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) !important;
}
body.dark #main-nav .menu .sub-menu li a {
  color: var(--color-text-primary) !important;
}
body.dark #main-nav .menu .sub-menu li a:hover {
  background-color: #2a2a2a !important;
  color: var(--color-accent-primary) !important;
}

body.dark #strategies-rtwus > div,
body.dark .how-we-work .steps,
body.dark #marketing-sercives-box,
body.dark .marketing-sercives-box > div,
body.dark .cards-section .card .bg,
body.dark .cards-section .card .blob,
body.dark #distribution .distribution-item {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
}
body.dark .mobile-button span,
body.dark .mobile-button span::before,
body.dark .mobile-button span::after {
  background-color: var(--color-text-primary) !important;
}
body.dark img:not(.main-header-logo img) {
  filter: brightness(0.8) contrast(1.1);
  transition: filter 0.5s;
}
body.dark .info-item.hover-card,
body.dark .accordion-toggle {
  background-color: #2a2a2a !important;
}

/* body.dark .info-item.hover-card:hover,
body.dark .accordion-toggle:hover {
  background-color: #2a2a2a !important;
} */

body.dark section#edit-section-background {
  background-color: var(--color-bg-primary) !important;
  background-image: none !important;
}

body.dark
  #edit-section-background
  .services-main
  .services-list-main
  #marketing-sercives-box
  .box-item {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
  background-image: none !important;
}

body.dark #edit-section-background .box-item .title,
body.dark #edit-section-background .box-item .text {
  color: var(--color-text-primary) !important;
}

body.dark #edit-section-background .icon-box {
  background-color: transparent !important;
  background-image: none !important;
}

body.dark #edit-section-background .icon-box .number span {
  color: var(--color-text-primary) !important;
}

.header,
#site-header {
  background-color: #fff !important;

  border-bottom: none !important;
}
.main-nav-header {
  background-color: transparent !important;
}

.light-mode-container {
  color: transparent !important;
}

.light-mode svg {
  stroke: var(--color-text-primary);
  fill: transparent;
  filter: none;
}
.light-mode-container {
  background-color: #1b293e !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

.light-mode svg {
  stroke: #fff !important;
  fill: transparent !important;
  filter: none !important;
}

.light-mode svg[stroke] {
  stroke: #fff !important;
}
.light-mode-container {
  background-color: #1b293e !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}
.light-mode svg {
  stroke: #fff !important;
  fill: transparent !important;
  filter: none !important;
  width: 30px !important;
  height: 30px !important;
}
body.dark .light-mode-container {
  background-color: var(--color-bg-secondary) !important;
  box-shadow: 0 0 10px rgba(255, 152, 0, 0.5) !important;
}
body.dark .light-mode svg {
  stroke: var(--color-accent-primary) !important;
  fill: var(--color-accent-primary) !important;
  filter: drop-shadow(0 0 7px var(--color-accent-primary)) !important;
}

body.dark footer,
body.dark .footer-area.style2 {
  background-color: #2d2d30 !important;
  border-color: var(--color-border) !important;
}

body.dark .footer-col p * {
  color: #ff9800 !important;
}

.footer {
  background-color: #fff5ed;
}

body.dark .accordion-toggle,
body.dark .toggle-title,
body.dark .toggle-content {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-bg-secondary) !important;
}

.popup-form {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.25s, opacity 0.25s ease-in-out;
}

.popup-form.show {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.popup-content {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(15px);
  padding: 40px 30px;
  max-width: 600px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  color: #001986;
  position: relative;
}

.popup-close {
  position: absolute;
  top: 15px;
  right: 20px;
  cursor: pointer;
  color: #104042;
  font-size: 20px;
  transition: color 0.3s ease;
}

.popup-close:hover {
  color: #104042;
}

.popup-message {
  font-size: 18px;
  margin-bottom: 60px;
  color: #104042;
  text-align: center;
}

.popup-icon {
  font-size: 40px;
  margin-bottom: 20px;
  color: #104042;
  animation: pulse 1.5s infinite;
}

@media (max-width: 768px) {
  #strategies-photo-1 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  #strategies-photo-1 img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
  }
}
@media (max-width: 768px) {
  #strategies-photo-1 {
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
    width: 100%;
  }
  #strategies-photo-1 img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
  }
}
@media (max-width: 768px) {
  .image-top-profile2,
  #strategies-image-3 {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
  }

  .image-top-profile2 img,
  #strategies-image-3 img {
    width: 80% !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 1.5rem !important;
    padding: 0 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 768px) {
  .content-left,
  #digital-marketing-second-photo,
  .image-left-strategies1,
  #strategies-photo-1,
  .image-top-profile2,
  #strategies-image-3,
  [class*="col-md-"] {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  #strategies-photo-1 img,
  .image-top-profile2 img,
  #digital-marketing-first-photo,
  #dm-img-bsop,
  .content-left img[src*="people-working-with-ai-operated-devices"] {
    width: 80% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 1.5rem auto !important;
    padding: 0 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 768px) {
  .service-item {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    margin-left: 0;
    margin-right: 0;
    padding: 1.5rem !important;
    box-sizing: border-box !important;
  }

  .service-item + .service-item {
    margin-top: 1.5rem;
  }
}

body.dark .card .blob {
  background-color: #333333 !important;
  box-shadow: none !important;
}

body.dark .card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.3) !important;
  border-color: var(--color-border) !important;
}

body.dark #unique-card-1,
body.dark #unique-card-2 {
  background: linear-gradient(to bottom, #333333, #1e1e1e) !important;
  transition: all 0.3s ease !important;
}

body.dark #unique-card-1:hover,
body.dark #unique-card-2:hover {
  background: linear-gradient(to bottom, #444444, #2a2a2a) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) !important;
}

body.dark #unique-card-1:hover .unique-card-title,
body.dark #unique-card-2:hover .unique-card-title {
  color: #ffffff !important;
}

body.dark #unique-card-1:hover .unique-card-desc,
body.dark #unique-card-2:hover .unique-card-desc {
  color: #ffffff !important;
}

body.dark #marketing-sercives-box .box-item {
  background: var(--color-bg-secondary) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) !important;
}

body.dark #marketing-sercives-box .box-item .content-box h5 a {
  color: var(--color-text-primary) !important;
}

body.dark #marketing-sercives-box .box-item .content-box p.text {
  color: var(--color-text-secondary) !important;
}

body.dark #marketing-sercives-box .box-item .icon-box .number span {
  color: var(--color-text-secondary) !important;
}

body.dark #about-stage {
  background: var(--color-bg-primary) !important;

  background-color: var(--color-bg-primary) !important;
  background-image: none !important;
}

body.dark .cookie-popup-container {
  --accent-background: #1e1e1e;
  --accent-text-color: #e0e0e0;

  --accent-color: #ff9800;
  --accent-title-color: #f0f0f0;
  --accent-sub-title-color: #f0f0f0;
  --accent-border: #333;
}

body.dark .cookie-popup-container .tab + label {
  background-color: #252525;
  color: var(--accent-text-color);
}
body.dark .cookie-popup-container .tab:checked + label {
  background-color: var(--accent-background);
  box-shadow: 0 -1px 0 var(--accent-background) inset;
}

body.dark .cookie-popup-container a.policy-href {
  color: var(--accent-color) !important;
}

body.dark .cookie-decide ul li.allow {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

body.dark .cookie-decide ul li.allow:hover {
  background-color: #ff9800;
  border-color: #ff9800;
}

body.dark .cookie-cookies-display .cookie-category .choose.active,
body.dark .cookie-consent .cookie-category .choose.active {
  border-color: var(--accent-color);
  background-color: var(--accent-color);
}

body.dark .tab__content,
body.dark .tab-wrap {
  background-color: #333333;
  border-color: #333333;
}

.section-faqs
  .main-faqs
  .main-content
  .intro-content
  .flat-question
  .accordion
  .accordion-toggle
  .toggle-title,
.section-faqs
  .main-faqs
  .main-content
  .intro-content
  .flat-question
  .accordion
  .accordion-toggle
  .toggle-title:hover {
  transition: color 0.3s ease;
}

#edit-hww-background .accordion-toggle * {
  background-color: #fff8ee !important;
  color: #3c4042 !important;
}

.service-icon-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #f0f0f5;
  border: 2px solid #e0e0e0;

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 25px;
}

.fa-icon {
  font-size: 32px;
  color: #000;
  line-height: 1;
  transition: color 0.3s ease;
}

.service-icon-circle .number {
  position: absolute;
  top: -8px;
  right: -8px;

  background-color: #f59e0b;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;

  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.content-box .title {
  margin-top: 0;
  margin-bottom: 8px;
}

.content-box a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

.content-box p.text {
  color: #666;
  line-height: 1.6;
}

.box-item:hover .service-icon-circle {
  background-color: #f0b353;
  border-color: #f0b353;
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
  transform: translateY(-5px);
  transition: all 0.3s ease;
}

.box-item:hover .fa-icon {
  color: white;
}

.service-circle-wrapper {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #e6f7ff;
  border: 1px solid #cceeff;

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 25px;
  transition: all 0.3s ease;
}

.service-icon-new {
  font-size: 45px;
  color: #000;
  line-height: 1;
  transition: color 0.3s ease;
}

.service-circle-wrapper .number {
  position: absolute;
  top: -10px;
  right: -10px;

  background-color: #28a745;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;

  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(40, 167, 69, 0.3);
}

.box-item:hover .service-circle-wrapper {
  background-color: #f0b353;
  border-color: #f0b353;
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4);
}

.box-item:hover .service-icon-new {
  color: white;
}

.content-box .title a {
  color: #333;
  transition: color 0.3s ease;
}

.box-item:hover .content-box .title a {
  color: #fbb03b;
}

body,
#wrapper {
  cursor: default;
}

.dark-mode .img-about:hover {
  transform: scale(1.075) !important;
}

.dark-mode .img-about {
  transition: transform 0.4s ease-in-out !important;
}

.dark-mode .main-nav a.active,
.dark-mode .main-nav .menu-item.current-item > a {
  color: #ffc107 !important;
}

.dark-mode .main-nav a:hover {
  color: #f8d77e;
}

#edit-section-background2 {
  background-color: #fff5e5 !important;
}

.dark-mode #edit-section-background2 {
  background-color: var(--color-bg-primary) !important;
}

#index-services3 {
  background-color: #fff5e5 !important;
}

.dark-mode #index-services3 {
  background-color: var(--color-bg-primary) !important;
}

.progress-wrap {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 44px;
  height: 44px;
  border-radius: 50%;

  display: grid !important;
  place-items: center !important;

  box-shadow: inset 0 0 0 2px rgba(130, 130, 130, 0.2);

  z-index: 100;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: opacity 0.4s linear, visibility 0.4s linear;
  cursor: pointer;
}

.progress-wrap svg.progress-circle {
  width: calc(100% - 4px);
  height: calc(100% - 4px);

  grid-column: 1 / 1;
  grid-row: 1 / 1;
  display: block;
  z-index: 0;
}

.progress-wrap svg.progress-circle path {
  stroke: #8c6f3f;
  stroke-width: 4;
  fill: none;
  box-sizing: border-box;
  transition: stroke-dashoffset 400ms linear;
}

.progress-wrap::after {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: static !important;
  font-family: "Font Awesome 5 Free";
  content: "\f077";
  font-size: 13px;
  font-weight: 900;
  color: #8c6f3f;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: color 400ms linear;
}

.progress-wrap.active-progress {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.dark-mode .toggle-title {
  color: #000 !important;
}

.dark-mode .accordion-toggle-title *,
.dark-mode .accordion-toggle-title span {
  color: #000 !important;
}

.contact-info .info-item .contact-line {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

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

.contact-info .info-item .contact-line i {
  font-size: 1.8rem !important;
  color: #f0b353 !important;

  width: 40px;
  text-align: center;

  margin-right: 15px !important;
  flex-shrink: 0;
  vertical-align: middle;
}

.contact-info .info-item .contact-line > div {
  flex-grow: 1;
}

.contact-info .info-item .contact-line p {
  margin: 0 !important;
  font-size: 1rem;
  line-height: 1.4;
}

.contact-info .info-item {
  margin-bottom: 0 !important;
  padding: 20px !important;
}

body.dark .contact-info .info-item .contact-line {
  border-bottom: 1px solid var(--color-border);
}

.section-faqs
  .main-faqs
  .main-content
  .flat-question
  .accordion
  .accordion-toggle
  .toggle-title
  span {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  vertical-align: middle;
}

.section-faqs
  .main-faqs
  .main-content
  .flat-question
  .accordion
  .accordion-toggle
  .toggle-title
  span::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f055";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #fbb03b;
}

.section-faqs
  .main-faqs
  .main-content
  .flat-question
  .accordion
  .accordion-toggle.active
  .toggle-title
  span::before {
  content: "\f056";
}

.section-faqs
  .main-faqs
  .main-content
  .flat-question
  .accordion
  .accordion-toggle
  .toggle-title
  span::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f055";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #fbb03b;
}

.section-faqs
  .main-faqs
  .main-content
  .flat-question
  .accordion
  .accordion-toggle.active
  .toggle-title
  span::before {
  content: "\f056";
}

.section-faqs
  .main-faqs
  .main-content
  .flat-question
  .accordion
  .accordion-toggle
  .toggle-title
  span {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  vertical-align: middle;
}

.section-faqs .main-faqs .main-content {
  gap: 0px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.section-faqs .main-faqs .main-content .intro-content,
.section-faqs .main-faqs .main-content .img-faq {
  padding-left: 50px !important;
  padding-right: 0 !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  width: 50% !important;
  max-width: none !important;
}

.section-faqs .main-faqs .main-content .img-faq img {
  width: 70% !important;
}

@media (max-width: 768px) {
  .section-faqs
    .main-faqs
    .main-content
    .intro-content
    .flat-question
    .accordion
    .accordion-toggle
    .toggle-content {
    padding: 15px 15px 1px 15px !important;

    width: 100% !important;

    text-align: left;
  }

  .section-faqs
    .main-faqs
    .main-content
    .intro-content
    .flat-question
    .accordion
    .accordion-toggle
    .toggle-content
    p {
    padding-right: 0 !important;
  }
}

@media (max-width: 768px) {
  .section-faqs .container {
    max-width: 100% !important;
    width: 100% !important;
  }

  .section-faqs .main-faqs .main-content .intro-content,
  .section-faqs .main-faqs .main-content .img-faq {
    width: 100% !important;

    padding-left: 15px !important;
  }

  .section-faqs .main-faqs h2.heading-title {
    font-size: 36px;
    text-align: center;
    word-break: break-word;
  }

  .section-faqs .main-faqs .main-content .intro-content h3.title {
    font-size: 28px;
    text-align: center;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .section-faqs
    .main-faqs
    .main-content
    .intro-content
    .flat-question
    .accordion
    .accordion-toggle
    .toggle-content {
    padding: 15px 15px 1px 15px !important;
  }
}

.section-faqs .container {
  max-width: 1500px;
  width: 95%;
}

.section-faqs h2.heading-title {
  padding-left: 45px;
}
.section-faqs
  .main-faqs
  .main-content
  .intro-content
  .flat-question
  .accordion
  .accordion-toggle
  .toggle-content {
  padding: 20px 20px 20px 20px !important;
  width: 100%;
}
body.dark img:not(.main-header-logo img) {
  filter: brightness(0.8) contrast(1.1);
  transition: filter 0.5s;
}
body.dark img:not(.main-header-logo img) {
  filter: brightness(0.8) contrast(1.1);

  transition: filter 0.4s ease-in-out, transform 0.4s ease-in-out;
}

.img-about {
  transition: transform 0.4s ease-in-out;
}

#our-profile-img1,
#our-profile-img2 {
  transition: transform 0.4s ease-in-out;
}

.flat-question .accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.flat-question .accordion-toggle {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.flat-question .accordion-toggle:hover {
  border-color: #ccc;
}

.flat-question .toggle-title {
  padding: 16px 20px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  background: #f8f8f8;
  transition: all 0.3s ease;
  position: relative;
  user-select: none;
}

.flat-question .toggle-title:hover {
  background: #f0f0f0;
}

.flat-question .toggle-title::after {
  content: "▼";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transition: transform 0.3s ease;
  font-size: 12px;
  color: #666;
}

.flat-question .toggle-title.active::after {
  transform: translateY(-50%) rotate(0deg);
}

.flat-question .toggle-title.active {
  background: #e8e8e8;
  color: #000;
}

.flat-question .toggle-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 20px;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
  background: #fff;
  line-height: 1.6;
}

.flat-question .accordion-toggle.active .toggle-content {
  max-height: 500px;
  opacity: 1;
  padding: 16px 20px 20px 20px;
}

.flat-question .accordion-toggle.active {
  border-color: #999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#governance .governance-item {
  padding: 20px;
}

#profile-partner-section,
#index-services,
#index-services2,
#edit-section-background,
#unique-cards-wrapper,
#about-stage,
#edit-hww-background,
#how-we-work-2,
#quality-standards {
  padding-bottom: 0px !important;
}

#index-services {
  padding-bottom: 74px !important;
}

.header .main-header .main-nav-header .mobile-button span {
  text-indent: 0 !important;
}

body.dark .mobile-button:before,
body.dark .mobile-button:after,
body.dark .mobile-button span {
  background-color: var(--color-text-primary) !important;
}

#main-nav-mobi .menu-main .icofont-hand-drawn-down {
  display: none !important;
}

.section-faqs .main-faqs .main-content {
  align-items: flex-start;
}

#hello-button {
  margin-top: 35px !important;
}

body.dark .accordion {
  background-color: var(--ccolor-border) !important;
}

/*  */

#services-accordion .accordion-toggle {
  padding-bottom: 0px !important;
}

#services-accordion .accordion-toggle .toggle-content {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

#services-accordion .accordion-toggle.active .toggle-content {
  padding-top: 16px !important;
  padding-bottom: 20px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.color {
  color: #fbb03b !important;
}
#marketing-sercives-box .box-item {
  cursor: pointer;
}
/* 0 */