@charset "UTF-8";
/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway", sans-serif;
  --nav-font: "Inter", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #313030; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #473d3a; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #ff5821; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #212529; /* The default color of the main navmenu links */
  --nav-hover-color: #ff5821; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #ff5821; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */
.light-background {
  --background-color: #fffaf9;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #1d1918;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #39312f;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}
.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}
.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}
.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Pulsating Play Button
------------------------------*/
.pulsating-play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
  border-radius: 50%;
  display: block;
  position: relative;
  overflow: hidden;
}
.pulsating-play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-play-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}
.pulsating-play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.pulsating-play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  animation: none;
  border-radius: 0;
}
.pulsating-play-btn:hover:after {
  border-left: 15px solid var(--accent-color);
  transform: scale(20);
}

@keyframes pulsate-play-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}
/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  transition: all 0.5s;
  z-index: 997;
  background-color: var(--background-color);
}
.header .topbar {
  background-color: var(--background-color);
  height: 40px;
  padding: 0;
  font-size: 14px;
  transition: all 0.5s;
}
.header .topbar .contact-info i {
  font-style: normal;
  color: var(--accent-color);
}
.header .topbar .contact-info i a,
.header .topbar .contact-info i span {
  padding-left: 5px;
  color: var(--default-color);
}
@media (max-width: 575px) {
  .header .topbar .contact-info i a,
  .header .topbar .contact-info i span {
    font-size: 13px;
  }
}
.header .topbar .contact-info i a {
  line-height: 0;
  transition: 0.3s;
}
.header .topbar .contact-info i a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}
.header .topbar .social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  line-height: 0;
  transition: 0.3s;
  margin-left: 20px;
}
.header .topbar .social-links a:hover {
  color: var(--accent-color);
}
.header .branding {
  background-color: var(--background-color);
  min-height: 60px;
  padding: 10px 0;
}
.header .logo {
  line-height: 1;
}
.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}
.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}
.scrolled .header {
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}
.scrolled .header .topbar {
  height: 0;
  visibility: hidden;
  overflow: hidden;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }
  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }
  .navmenu li {
    position: relative;
  }
  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 12px;
    font-size: 15px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }
  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }
  .navmenu li:last-child a {
    padding-right: 0;
  }
  .navmenu li:hover > a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }
  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }
  .navmenu .dropdown ul li {
    min-width: 200px;
  }
  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }
  .navmenu .dropdown ul a i {
    font-size: 12px;
  }
  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover > a {
    color: var(--nav-dropdown-hover-color);
  }
  .navmenu .dropdown:hover > ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }
  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }
  .navmenu .dropdown .dropdown:hover > ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}
/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }
  .navmenu {
    padding: 0;
    z-index: 9997;
  }
  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }
  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }
  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }
  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }
  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }
  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }
  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }
  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }
  .navmenu .dropdown > .dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }
  .mobile-nav-active {
    overflow: hidden;
  }
  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }
  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }
  .mobile-nav-active .navmenu > ul {
    display: block;
  }
}
/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;
}
.footer .footer-top {
  padding-top: 50px;
}
.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 25px;
}
.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}
.footer .footer-about .logo span {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: var(--heading-font);
  color: var(--heading-color);
}
.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}
.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-right: 10px;
  transition: 0.3s;
}
.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}
.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}
.footer .footer-links {
  margin-bottom: 30px;
}
.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer .footer-links ul i {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}
.footer .footer-links ul li {
  padding: 10px 0;
}
.footer .footer-links ul li:first-child {
  padding-top: 0;
}
.footer .footer-links ul li {
  display: flex;
  align-items: center;
}
.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: inline-block;
  line-height: 1;
}
.footer .footer-links ul a:hover {
  color: var(--accent-color);
}
.footer .footer-contact p {
  margin-bottom: 5px;
}
.footer .footer-newsletter .newsletter-form {
  margin-top: 30px;
  margin-bottom: 15px;
  padding: 6px 8px;
  position: relative;
  border-radius: 50px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  display: flex;
  background-color: var(--surface-color);
  transition: 0.3s;
}
.footer .footer-newsletter .newsletter-form:focus-within {
  border-color: var(--accent-color);
}
.footer .footer-newsletter .newsletter-form input[type=email] {
  border: 0;
  padding: 4px 8px;
  width: 100%;
  background-color: var(--surface-color);
  color: var(--default-color);
}
.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {
  outline: none;
}
.footer .footer-newsletter .newsletter-form input[type=submit] {
  border: 0;
  font-size: 16px;
  padding: 0 20px;
  margin: -8px -9px -8px 0;
  background: var(--accent-color);
  color: var(--contrast-color);
  transition: 0.3s;
  border-radius: 50px;
}
.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}
.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.footer .copyright p {
  margin-bottom: 0;
}
.footer .credits {
  margin-top: 6px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}
#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}
.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}
.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}
.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}
/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 25px 0;
  position: relative;
}
.page-title h1 {
  font-size: 24px;
  font-weight: 700;
}
.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}
.page-title .breadcrumbs ol li + li {
  padding-left: 10px;
}
.page-title .breadcrumbs ol li + li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 118px;
  overflow: clip;
}

@media (max-width: 1199px) {
  section,
  .section {
    scroll-margin-top: 100px;
  }
}
/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}
.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
}
.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: 100vh;
  padding: 80px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.hero:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 30%);
  position: absolute;
  inset: 0;
  z-index: 2;
}
.hero .container {
  z-index: 3;
}
.hero .welcome h2 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
}
.hero .welcome p {
  font-size: 24px;
  margin: 0;
}
.hero .content {
  margin-top: 40px;
}
.hero .content .why-box {
  color: var(--contrast-color);
  background: var(--accent-color);
  padding: 30px;
  border-radius: 4px;
}
.hero .content .why-box h3 {
  color: var(--contrast-color);
  font-weight: 700;
  font-size: 34px;
  margin-bottom: 30px;
}
.hero .content .why-box p {
  margin-bottom: 30px;
}
.hero .content .why-box .more-btn {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--contrast-color), transparent 80%);
  display: inline-block;
  padding: 6px 30px 8px 30px;
  border-radius: 50px;
  transition: all ease-in-out 0.4s;
}
.hero .content .why-box .more-btn i {
  font-size: 14px;
}
.hero .content .why-box .more-btn:hover {
  background: var(--contrast-color);
  color: var(--accent-color);
}
.hero .content .icon-box {
  background: color-mix(in srgb, var(--surface-color), transparent 20%);
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  padding: 40px 30px;
  width: 100%;
}
.hero .content .icon-box i {
  font-size: 40px;
  color: var(--accent-color);
}
.hero .content .icon-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 10px 0 20px 0;
}
.hero .content .icon-box p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content h3 {
  font-size: 2rem;
  font-weight: 700;
}
.about .content ul {
  list-style: none;
  padding: 0;
}
.about .content ul li {
  display: flex;
  align-items: flex-start;
  margin-top: 10px;
}
.about .content ul i {
  flex-shrink: 0;
  font-size: 15px;
  color: var(--accent-color);
  margin-right: 20px;
  line-height: 0;
}
.about .content ul h5 {
  font-size: 35px;
  font-weight: 500;
  color: var(--contrast-color);
}
.about .content ul p {
  font-size: 1rem;
  padding: 20px 30px 0px 30px;
}
.about .content p:last-child {
  margin-bottom: 0;
}
.about .pulsating-play-btn {
  position: absolute;
  left: calc(50% - 47px);
  top: calc(50% - 47px);
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients .swiper-slide img {
  opacity: 0.5;
  transition: 0.3s;
  filter: grayscale(100);
}
.clients .swiper-slide img:hover {
  filter: none;
  opacity: 1;
}
.clients .swiper-wrapper {
  height: auto;
}
.clients .swiper-pagination {
  margin-top: 20px;
  position: relative;
}
.clients .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  opacity: 1;
  background-color: color-mix(in srgb, var(--default-color), transparent 80%);
}
.clients .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  background-color: var(--surface-color);
  padding: 50px 30px;
  margin-top: 36px;
  transition: all ease-in-out 0.3s;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  text-align: center;
}
.services .service-item .icon {
  background: var(--accent-color);
  color: var(--contrast-color);
  margin: 0;
  width: 72px;
  height: 72px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 28px;
  transition: ease-in-out 0.3s;
  position: absolute;
  top: -36px;
  left: calc(50% - 36px);
  border: 6px solid var(--background-color);
}
.services .service-item h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
  transition: ease-in-out 0.3s;
}
.services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}
.services .service-item:hover {
  background: var(--background-color);
}
.services .service-item:hover h3 {
  color: var(--accent-color);
}
.services .service-item:hover .icon {
  background: var(--surface-color);
  border: 2px solid var(--accent-color);
}
.services .service-item:hover .icon i {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Alt Services Section
--------------------------------------------------------------*/
.alt-services .img {
  border-radius: 8px;
  overflow: hidden;
}
.alt-services .img img {
  transition: 0.6s;
}
.alt-services .details {
  background: color-mix(in srgb, var(--surface-color), transparent 20%);
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  padding: 7px 15px 7px 15px;
  transition: all ease-in-out 0.3s;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0px 0 25px rgba(0, 0, 0, 0.1);
}
.alt-services .details h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
  transition: ease-in-out 0.3s;
}
.alt-services .details p {
  color: color-mix(in srgb, var(--default-color), transparent 10%);
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}
.alt-services .service-item:hover .details h3 {
  color: var(--accent-color);
}
.alt-services .service-item:hover .img img {
  transform: scale(1.2);
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials {
  padding: 80px 0;
  position: relative;
}
.testimonials:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 30%);
  position: absolute;
  inset: 0;
  z-index: 2;
}
.testimonials .testimonials-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.testimonials .container {
  position: relative;
  z-index: 3;
}
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}
.testimonials .testimonial-item {
  text-align: center;
}
.testimonials .testimonial-item .testimonial-img {
  width: 100px;
  border-radius: 50%;
  border: 6px solid color-mix(in srgb, var(--default-color), transparent 85%);
  margin: 0 auto;
}
.testimonials .testimonial-item h3 {
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}
.testimonials .testimonial-item h4 {
  font-size: 14px;
  margin: 0 0 15px 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}
.testimonials .testimonial-item .stars {
  margin-bottom: 15px;
}
.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}
.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 26px;
  line-height: 0;
}
.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}
.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}
.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 auto 15px auto;
}
.testimonials .swiper-wrapper {
  height: auto;
}
.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}
.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 50%);
  opacity: 0.5;
}
.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--default-color);
  opacity: 1;
}
@media (min-width: 992px) {
  .testimonials .testimonial-item p {
    width: 80%;
  }
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}
.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 20px 10px 20px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 5px;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  font-family: var(--heading-font);
}
.portfolio .portfolio-filters li:hover, .portfolio .portfolio-filters li.filter-active {
  color: var(--contrast-color);
  background-color: var(--accent-color);
}
.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}
.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}
@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 0 10px 0;
  }
}
.portfolio .portfolio-item {
  position: relative;
  overflow: hidden;
}
.portfolio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -100%;
  z-index: 3;
  transition: all ease-in-out 0.5s;
  background: color-mix(in srgb, var(--background-color), transparent 10%);
  padding: 15px;
}
.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 18px;
  font-weight: 600;
  padding-right: 50px;
}
.portfolio .portfolio-item .portfolio-info p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  margin-bottom: 0;
  padding-right: 50px;
}
.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
  position: absolute;
  right: 50px;
  font-size: 24px;
  top: calc(50% - 14px);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transition: 0.3s;
  line-height: 0;
}
.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: var(--accent-color);
}
.portfolio .portfolio-item .portfolio-info .details-link {
  right: 14px;
  font-size: 28px;
}
.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
  bottom: 0;
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member {
  background-color: var(--surface-color);
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border-radius: 5px;
}
.team .team-member .member-img {
  position: relative;
  overflow: hidden;
}
.team .team-member .social {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 40px;
  opacity: 0;
  transition: ease-in-out 0.3s;
  background: color-mix(in srgb, var(--background-color), transparent 20%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.team .team-member .social a {
  transition: color 0.3s;
  color: var(--heading-color);
  margin: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.team .team-member .social a i {
  line-height: 0;
}
.team .team-member .social a:hover {
  color: var(--accent-color);
}
.team .team-member .social i {
  font-size: 18px;
  margin: 0 2px;
}
.team .team-member .member-info {
  padding: 25px 15px;
  text-align: center;
}
.team .team-member .member-info h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 18px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}
.team .team-member .member-info span {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}
.team .team-member .member-info p {
  font-style: italic;
  font-size: 14px;
  line-height: 26px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}
.team .team-member:hover .social {
  opacity: 1;
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-item {
  background-color: var(--surface-color);
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}
.pricing .pricing-item h3 {
  font-weight: 400;
  margin: -20px -20px 20px -20px;
  padding: 20px 15px;
  font-size: 16px;
  font-weight: 600;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  background: color-mix(in srgb, var(--default-color), transparent 95%);
}
.pricing .pricing-item h4 {
  font-size: 36px;
  font-weight: 600;
  font-family: var(--heading-font);
}
.pricing .pricing-item h4 sup {
  font-size: 20px;
  top: -15px;
  left: -3px;
}
.pricing .pricing-item h4 span {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 16px;
  font-weight: 300;
}
.pricing .pricing-item ul {
  padding: 15px 0;
  list-style: none;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
}
.pricing .pricing-item ul li {
  padding-bottom: 16px;
}
.pricing .pricing-item ul i {
  color: var(--accent-color);
  font-size: 18px;
  padding-right: 4px;
}
.pricing .pricing-item ul .na {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  text-decoration: line-through;
}
.pricing .btn-wrap {
  background: color-mix(in srgb, var(--default-color), transparent 95%);
  margin: 0 -20px -20px -20px;
  padding: 20px 15px;
  text-align: center;
}
.pricing .btn-buy {
  background: var(--accent-color);
  color: var(--contrast-color);
  display: inline-block;
  padding: 8px 35px 10px 35px;
  border-radius: 4px;
  transition: none;
  font-size: 14px;
  font-weight: 400;
  font-family: var(--heading-font);
  font-weight: 600;
  transition: 0.3s;
}
.pricing .btn-buy:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}
.pricing .featured h3 {
  background: var(--accent-color);
  color: var(--contrast-color);
}
.pricing .advanced {
  background: var(--accent-color);
  color: var(--contrast-color);
  width: 200px;
  position: absolute;
  top: 18px;
  right: -68px;
  transform: rotate(45deg);
  z-index: 1;
  font-size: 14px;
  padding: 1px 0 3px 0;
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .faq-container {
  margin-top: 15px;
}
.faq .faq-container .faq-item {
  background-color: color-mix(in srgb, var(--surface-color), transparent 96%);
  position: relative;
  padding: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  transition: 0.3s;
}
.faq .faq-container .faq-item:last-child {
  margin-bottom: 0;
}
.faq .faq-container .faq-item h3 {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  margin: 0 30px 0 32px;
  transition: 0.3s;
  cursor: pointer;
}
.faq .faq-container .faq-item h3 span {
  color: var(--accent-color);
  padding-right: 5px;
}
.faq .faq-container .faq-item h3:hover {
  color: var(--accent-color);
}
.faq .faq-container .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}
.faq .faq-container .faq-item .faq-content p {
  margin-bottom: 0;
  overflow: hidden;
}
.faq .faq-container .faq-item .faq-icon {
  position: absolute;
  top: 22px;
  left: 20px;
  font-size: 20px;
  line-height: 0;
  transition: 0.3s;
  color: var(--accent-color);
}
.faq .faq-container .faq-item .faq-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  line-height: 0;
  transition: 0.3s;
  cursor: pointer;
}
.faq .faq-container .faq-item .faq-toggle:hover {
  color: var(--accent-color);
}
.faq .faq-container .faq-active {
  background-color: var(--accent-color);
  transition: 0.3s;
}
.faq .faq-container .faq-active h3,
.faq .faq-container .faq-active h3:hover,
.faq .faq-container .faq-active .faq-toggle,
.faq .faq-container .faq-active .faq-icon,
.faq .faq-container .faq-active .faq-content {
  color: var(--contrast-color);
}
.faq .faq-container .faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  padding-top: 10px;
}
.faq .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  padding: 20px 30px;
}
.contact .info-item .icon {
  color: var(--contrast-color);
  background-color: var(--accent-color);
  width: 56px;
  height: 56px;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  border-radius: 50%;
  margin-right: 15px;
}
.contact .info-item h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 2px 0;
}
.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}
.contact .info-item .social-links a {
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  margin: 4px 6px 0 0;
  transition: 0.3s;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}
.contact .info-item .social-links a:hover {
  color: var(--accent-color);
}
.contact .php-email-form {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-top: 30px;
}
@media (max-width: 575px) {
  .contact .php-email-form {
    padding: 20px;
  }
}
.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
}
.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}
.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}
.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}
.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}
.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}
.portfolio-details .portfolio-info {
  background-color: var(--surface-color);
  padding: 30px;
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
}
.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}
.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}
.portfolio-details .portfolio-info ul li + li {
  margin-top: 10px;
}
.portfolio-details .portfolio-description {
  padding-top: 30px;
}
.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}
.portfolio-details .portfolio-description p {
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
  background-color: var(--surface-color);
  padding: 10px 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 20px;
}
.service-details .services-list a {
  display: block;
  line-height: 1;
  padding: 8px 0 8px 15px;
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  margin: 20px 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}
.service-details .services-list a.active {
  color: var(--heading-color);
  font-weight: 700;
  border-color: var(--accent-color);
}
.service-details .services-list a:hover {
  border-color: var(--accent-color);
}
.service-details .services-img {
  margin-bottom: 20px;
}
.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}
.service-details h4 {
  font-size: 20px;
  font-weight: 700;
}
.service-details p {
  font-size: 15px;
}
.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}
.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}
.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}

/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/
.blog-posts article {
  background-color: var(--surface-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 30px;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}
.blog-posts .post-img {
  max-height: 240px;
  margin: -30px -30px 15px -30px;
  overflow: hidden;
}
.blog-posts .post-category {
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 10px;
}
.blog-posts .title {
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}
.blog-posts .title a {
  color: var(--heading-color);
  transition: 0.3s;
}
.blog-posts .title a:hover {
  color: var(--accent-color);
}
.blog-posts .post-author-img {
  width: 50px;
  border-radius: 50%;
  margin-right: 15px;
}
.blog-posts .post-author {
  font-weight: 600;
  margin-bottom: 5px;
}
.blog-posts .post-date {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Pagination Section
--------------------------------------------------------------*/
.blog-pagination {
  padding-top: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}
.blog-pagination ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}
.blog-pagination li {
  margin: 0 5px;
  transition: 0.3s;
}
.blog-pagination li a {
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--accent-color);
}
.blog-pagination li a.active, .blog-pagination li a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}
.blog-pagination li a.active a, .blog-pagination li a:hover a {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Blog Details Section
--------------------------------------------------------------*/
.blog-details {
  padding-bottom: 30px;
}
.blog-details .article {
  background-color: var(--surface-color);
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.blog-details .post-img {
  margin: -30px -30px 20px -30px;
  overflow: hidden;
}
.blog-details .title {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 700;
  padding: 0;
  margin: 30px 0;
}
.blog-details .content {
  margin-top: 20px;
}
.blog-details .content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}
.blog-details .content blockquote {
  overflow: hidden;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 60px;
  position: relative;
  text-align: center;
  margin: 20px 0;
}
.blog-details .content blockquote p {
  color: var(--default-color);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
}
.blog-details .content blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--accent-color);
  margin-top: 20px;
  margin-bottom: 20px;
}
.blog-details .meta-top {
  margin-top: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}
.blog-details .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}
.blog-details .meta-top ul li + li {
  padding-left: 20px;
}
.blog-details .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}
.blog-details .meta-top a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}
.blog-details .meta-bottom {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.blog-details .meta-bottom i {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  display: inline;
}
.blog-details .meta-bottom a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: 0.3s;
}
.blog-details .meta-bottom a:hover {
  color: var(--accent-color);
}
.blog-details .meta-bottom .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}
.blog-details .meta-bottom .cats li {
  display: inline-block;
}
.blog-details .meta-bottom .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 14px;
}
.blog-details .meta-bottom .tags li {
  display: inline-block;
}
.blog-details .meta-bottom .tags li + li::before {
  padding-right: 6px;
  color: var(--default-color);
  content: ",";
}
.blog-details .meta-bottom .share {
  font-size: 16px;
}
.blog-details .meta-bottom .share i {
  padding-left: 5px;
}

/*--------------------------------------------------------------
# Blog Author Section
--------------------------------------------------------------*/
.blog-author {
  padding: 10px 0 40px 0;
}
.blog-author .author-container {
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.blog-author img {
  max-width: 120px;
  margin-right: 20px;
}
.blog-author h4 {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 0px;
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}
.blog-author .social-links {
  margin: 0 10px 10px 0;
}
.blog-author .social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  margin-right: 5px;
}
.blog-author p {
  font-style: italic;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Comments Section
--------------------------------------------------------------*/
.blog-comments {
  padding: 10px 0;
}
.blog-comments .comments-count {
  font-weight: bold;
}
.blog-comments .comment {
  margin-top: 30px;
  position: relative;
}
.blog-comments .comment .comment-img {
  margin-right: 14px;
}
.blog-comments .comment .comment-img img {
  width: 60px;
}
.blog-comments .comment h5 {
  font-size: 16px;
  margin-bottom: 2px;
}
.blog-comments .comment h5 a {
  font-weight: bold;
  color: var(--default-color);
  transition: 0.3s;
}
.blog-comments .comment h5 a:hover {
  color: var(--accent-color);
}
.blog-comments .comment h5 .reply {
  padding-left: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}
.blog-comments .comment h5 .reply i {
  font-size: 20px;
}
.blog-comments .comment time {
  display: block;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 5px;
}
.blog-comments .comment.comment-reply {
  padding-left: 40px;
}

/*--------------------------------------------------------------
# Comment Form Section
--------------------------------------------------------------*/
.comment-form {
  padding-top: 10px;
}
.comment-form form {
  background-color: var(--surface-color);
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.comment-form form h4 {
  font-weight: bold;
  font-size: 22px;
}
.comment-form form p {
  font-size: 14px;
}
.comment-form form input {
  background-color: var(--surface-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  font-size: 14px;
  border-radius: 4px;
  padding: 10px 10px;
}
.comment-form form input:focus {
  color: var(--default-color);
  background-color: var(--surface-color);
  box-shadow: none;
  border-color: var(--accent-color);
}
.comment-form form input::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}
.comment-form form textarea {
  background-color: var(--surface-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
  height: 120px;
}
.comment-form form textarea:focus {
  color: var(--default-color);
  box-shadow: none;
  border-color: var(--accent-color);
  background-color: var(--surface-color);
}
.comment-form form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}
.comment-form form .form-group {
  margin-bottom: 25px;
}
.comment-form form .btn-primary {
  border-radius: 4px;
  padding: 10px 20px;
  border: 0;
  background-color: var(--accent-color);
  color: var(--contrast-color);
}
.comment-form form .btn-primary:hover {
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widgets-container {
  background-color: var(--surface-color);
  padding: 30px;
  margin: 60px 0 30px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.widget-title {
  color: var(--heading-color);
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.widget-item {
  margin-bottom: 40px;
}
.widget-item:last-child {
  margin-bottom: 0;
}

.search-widget form {
  background: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  padding: 3px 10px;
  position: relative;
  transition: 0.3s;
}
.search-widget form input[type=text] {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  width: calc(100% - 40px);
  background-color: var(--background-color);
  color: var(--default-color);
}
.search-widget form input[type=text]:focus {
  outline: none;
}
.search-widget form button {
  background: var(--accent-color);
  color: var(--contrast-color);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  font-size: 16px;
  padding: 0 15px;
  margin: -1px;
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
  line-height: 0;
}
.search-widget form button i {
  line-height: 0;
}
.search-widget form button:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}
.search-widget form:is(:focus-within) {
  border-color: var(--accent-color);
}

.categories-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.categories-widget ul li {
  padding-bottom: 10px;
}
.categories-widget ul li:last-child {
  padding-bottom: 0;
}
.categories-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}
.categories-widget ul a:hover {
  color: var(--accent-color);
}
.categories-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.recent-posts-widget .post-item {
  display: flex;
  margin-bottom: 15px;
}
.recent-posts-widget .post-item:last-child {
  margin-bottom: 0;
}
.recent-posts-widget .post-item img {
  width: 80px;
  margin-right: 15px;
}
.recent-posts-widget .post-item h4 {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}
.recent-posts-widget .post-item h4 a {
  color: var(--default-color);
  transition: 0.3s;
}
.recent-posts-widget .post-item h4 a:hover {
  color: var(--accent-color);
}
.recent-posts-widget .post-item time {
  display: block;
  font-style: italic;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.tags-widget {
  margin-bottom: -10px;
}
.tags-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tags-widget ul li {
  display: inline-block;
}
.tags-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  padding: 6px 14px;
  margin: 0 6px 8px 0;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
  display: inline-block;
  transition: 0.3s;
}
.tags-widget ul a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 1px solid var(--accent-color);
}
.tags-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  font-size: 14px;
}

/* ========================================
   PERSONNALISATION
======================================== */
:root {
  scroll-behavior: smooth;
  --bs-body-font-size: 1.2rem;
  /* =========
     COULEURS
     (identité du client : 2 couleurs seulement — fixées dynamiquement par
     inc/colors.php, selon couleur_principale / couleur_dynamique dans
     data-client.json)
  =========== */
  /* =========
     SÉPARATEURS DE TITRES
     (largeur pilotable indépendamment par groupe de titres)
  =========== */
  /*commun à tous les séparateurs*/
  --separator-color: var(--dynamic-color);
  --separator-height: 1px;
  /*groupe : blocs métiers (hero)*/
  --separator-blocs-metiers-width: 40px;
  /*groupe : h3/h4 de contenu (index, prestations, mentions légales)*/
  --separator-contenu-width: 120px;
  /*groupe : titres des cartes de prestations*/
  --separator-cartes-prestations-width: 120px;
  /*groupe : h4 du footer*/
  --separator-footer-width: 60px;
  /* =========
     POLICES
     (--heading-font et --default-font sont fixées dynamiquement par
     inc/fonts.php, selon police_titre / police_texte dans data-client.json —
     voir inc/fonts-catalog.php pour les polices disponibles)
  =========== */
  --nav-font: var(--default-font);
  /* ========================================
     COULEURS FIXES
  ======================================== */
  /*Textes*/
  --text-white-color: #ffffff;
  --text-neutral-color: #303030;
  /*Fonds*/
  /* léger dérivé automatiquement de la couleur dynamique, pas d'un 3e champ admin */
  --background-light: color-mix(in srgb, var(--dynamic-color) 12%, white);
  --background-white: #ffffff;
  /*Action*/
  --action-color: #fc542a;
}

/* ========================================
   UPDATE TEMPLATE
======================================== */
/* Général */
body .main {
  background-color: var(--background-white) !important;
}

a {
  color: var(--primary-color);
}

a:hover, .footer .footer-links ul a:hover {
  color: var(--primary-color);
}

.scroll-top {
  background-color: var(--action-color);
  width: 55px;
  height: 55px;
}

.scroll-top i {
  color: var(--text-white-color);
  font-size: 40px;
}

.cta-button {
  color: var(--text-white-color);
  background: var(--action-color);
  display: inline-block;
  padding: 15px 30px 15px 30px;
  border-radius: 6px;
  transition: all ease-in-out 0.4s;
  margin-top: 10px;
  font-size: 16px;
}

.cta-button:hover {
  color: var(--text-white-color);
  background: var(--action-color);
}

.mobile-nav-toggle {
  color: var(--dynamic-color);
  font-size: 50px;
  line-height: 0;
  margin-right: 10px;
  cursor: pointer;
  transition: color 0.3s;
}

/* ========================================
   DEFINITIONS FONDS
======================================== */
.light-background {
  --background-color: #ffffff; /* Fond : Toutes sections "light" */
  --surface-color: #fcfbf4;
}

/*Fond blanc*/
.white-background {
  background-color: var(--background-white);
}

/*Fond principale*/
.primary-background {
  background-color: var(--primary-color);
}
.primary-background h3 {
  color: var(--text-white-color);
}

/*Fond secondaire*/
.secondary-background {
  background-color: var(--dynamic-color);
}
.secondary-background h3 {
  color: var(--text-white-color);
}

/*Fond clair (remplace primary-complementary-background et secondary-complementary-background)*/
.background-light {
  background-color: var(--background-light);
}
.background-light h3 {
  color: var(--text-neutral-color);
}

/* ========================================
   BOUTONS D'ACCÈS
======================================== */
/*Bouton info faq*/
.access-button-major {
  color: var(--text-white-color);
  background: var(--primary-color);
  display: inline-block;
  padding: 6px 30px 8px 30px;
  border-radius: 10px;
  transition: all ease-in-out 0.4s;
  margin-right: 10px;
}

.access-button-major:hover {
  color: var(--text-white-color);
  background: var(--primary-color);
}

/*Bouton info prestations*/
.access-button-minor {
  color: var(--text-white-color);
  background: var(--primary-color);
  display: inline-block;
  padding: 6px 30px 8px 30px;
  border-radius: 10px;
  transition: all ease-in-out 0.4s;
  margin-right: 10px;
}

.access-button-minor:hover {
  color: var(--text-white-color);
  background: var(--primary-color);
}

/* ========================================
   IMAGES
======================================== */
/*images*/
img {
  border-radius: 10px;
}

/* ========================================
   PAGES
======================================== */
/* Pages */
.page-title {
  background-color: var(--background-white);
}

.page-title h1 {
  font-size: 23px;
  font-weight: 700;
  color: var(--primary-color);
  font-family: var(--heading-font);
}

.content h2 {
  font-size: 35px;
}

.content h3 {
  font-size: 35px;
}

.content h4 {
  font-size: 32px;
}

/* ========================================
   SECTIONS
======================================== */
/*sections*/
section, .section {
  padding: 60px 0;
  color: var(--text-neutral-color);
}

section h3 {
  color: var(--primary-color);
}

.section-title {
  padding: 0px;
}

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

.about .section-title h3,
.alt-services .section-title h3,
.faq .section-title h3,
.contact .section-title h3 {
  font-size: 45px;
  font-weight: 500;
  margin-bottom: 20px;
  margin-top: 14px;
}

.about .section-title h3::after,
.alt-services .section-title h3::after,
.faq .section-title h3::after,
.contact .section-title h3::after {
  content: "";
  display: block;
  width: var(--separator-contenu-width);
  height: var(--separator-height);
  margin: 30px auto 30px auto;
  background-color: var(--separator-color);
}

.about {
  margin-top: 24px;
}

.about .content p {
  display: block; /* évite l'effet retour à la ligne des balises <strong>*/
}

@media only screen and (max-width: 768px) {
  .about {
    margin-top: 0;
    padding-top: 0;
  }
}
.indications {
  padding-bottom: 0px;
}

/* ========================================
   TOP BAR
======================================== */
/*Top Bar*/
@media only screen and (min-width: 768px) {
  .header .topbar {
    display: none !important;
  }
}
.header .topbar {
  height: 60px;
}

.header .topbar .contact-info i a:hover {
  text-decoration: none;
}

.header .topbar .contact-info i {
  font-size: 22px;
  background-color: var(--primary-color);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: var(--text-white-color);
  justify-content: center;
}

@media only screen and (max-width: 768px) {
  .header .topbar {
    height: 80px;
  }
  .header .topbar .contact-info i {
    font-size: 22px;
    background-color: var(--primary-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    color: var(--text-white-color);
    justify-content: center;
  }
  .header .topbar .container .contact-info {
    width: 100%;
    justify-content: space-around;
  }
}
/* ========================================
   HEADER
======================================== */
/* Header */
.header .branding {
  background-color: var(--primary-color);
  min-height: 80px;
}

.header .logo .sitename {
  font-size: 12px;
  margin: 0;
  font-weight: 700;
  color: var(--text-neutral-color);
}

.header .logo {
  line-height: 1;
  font-family: var(--heading-font);
  font-size: 25px;
  color: var(--text-white-color);
}

.header .logo img {
  max-height: 68px;
  margin-right: 8px;
}

/* ========================================
   MENU / NAVIGATION
======================================== */
/* Menu */
.navmenu li a {
  color: var(--text-white-color);
}

.navmenu li:hover > a, .navmenu .active, .navmenu .active:focus {
  color: var(--dynamic-color);
}

.navmenu .dropdown ul a:hover, .navmenu .dropdown ul .active:hover, .navmenu .dropdown ul li:hover > a {
  color: var(--dynamic-color);
}

@media (max-width: 1199px) {
  .navmenu a i, .navmenu a:focus i, .navmenu .active i, .navmenu .active:focus i {
    background-color: var(--dynamic-color);
    color: var(--text-white-color);
  }
}
@media (max-width: 1199px) {
  .navmenu a i:hover, .navmenu a:focus i:hover {
    background-color: var(--dynamic-color);
    color: var(--text-white-color);
  }
  .navmenu li a {
    color: var(--primary-color);
  }
  .navmenu .dropdown ul a {
    white-space: normal;
  }
}
/* Quick access buttons */
.quick-access-button-div {
  display: none;
}

/* ========================================
   HERO
======================================== */
/* Hero */
.hero {
  --background-color: none;
}

.why-box .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--text-white-color), transparent 50%);
  font-size: 30px;
  background-color: color-mix(in srgb, var(--text-white-color), transparent 30%);
  margin-right: 10px;
  transition: 0.3s;
}

.why-box h4 {
  color: color-mix(in srgb, var(--text-white-color), transparent 15%);
  font-size: 25px;
}

.hero .content .icon-box {
  background: color-mix(in srgb, #ffffff, transparent 20%);
  border-radius: 10px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  padding: 15px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
}

.hero .content .icon-box-icon {
  flex: 1 1 100%;
}

.hero .content .icon-box-icon img {
  width: 100px;
  object-fit: contain;
  position: relative;
  margin: 0 auto;
}

.hero .content .icon-box-icon img.picto-1 {
  transform: rotate(0deg);
}

.hero .content .icon-box-icon img.picto-2 {
  transform: rotate(0deg);
}

.hero .content .icon-box-icon img.picto-3 {
  transform: rotate(0deg);
}

.hero .content .icon-box i {
  color: var(--primary-color);
}

.hero .content .icon-box-title {
  flex: 1;
  padding-top: 9px;
}

.hero .content .icon-box .icon-box-title h4 {
  font-size: 18px;
  color: var(--heading-color);
  font-family: var(--default-font);
  margin: 0px;
}

.hero .content .icon-box .icon-box-title h4::after {
  content: "";
  display: block;
  width: var(--separator-blocs-metiers-width);
  height: var(--separator-height);
  margin: 15px auto 0 auto;
  background-color: var(--separator-color);
}

.hero .content .icon-box-text {
  flex: 0 0 100%;
  padding: 5px;
  margin-top: 15px;
  text-align: center;
}

.hero .content .icon-box p {
  margin-bottom: 0px;
  font-size: 16px;
}

.hero img {
  object-position: top;
  border-radius: 0;
}

.hero .welcome {
  display: inline-block;
  border-radius: 6px;
  background-color: var(--background-white);
  opacity: 1 !important;
  margin: 82px 0px 15px 0px;
  padding: 35px 30px 40px 30px;
  text-align: center;
}

.hero .plaque {
  background: color-mix(in srgb, #ffffff, transparent 5%);
}

.hero .plaque .plaque-logo {
  position: static;
  display: block;
  width: auto;
  max-width: 120px;
  height: auto;
  object-fit: contain;
  z-index: auto;
  margin: 0px auto 0px auto;
}

.hero .plaque h1 {
  font-size: 20px;
  font-family: var(--default-font);
}

.hero .plaque .nom {
  color: var(--primary-color);
  font-family: var(--heading-font);
  margin: 0;
  font-size: 35px;
  font-weight: 500;
  display: block;
  margin-bottom: 26px;
}

.hero .plaque .metier {
  color: var(--dynamic-color);
  font-weight: 300;
}

.hero .container .welcome .telephone {
  display: block;
  font-size: 25px;
  margin: 20px 0px 15px 0px;
}

.hero .container .welcome .specialites {
  font-size: 18px;
  display: block;
  margin-top: 30px;
}

.hero .container .welcome .specialites ul {
  list-style-type: none;
  padding: 0;
  color: var(--primary-color);
}

.hero .welcome .cta-button {
  margin-top: 25px;
}

.hero .content .why-box {
  color: var(--text-white-color);
  background: var(--primary-color);
}

.hero .content .why-box h2 {
  color: var(--dynamic-color);
  font-weight: 500;
  font-size: 35px;
  margin-bottom: 30px;
}

@media only screen and (max-width: 768px) {
  .hero img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 320px;
    object-fit: cover;
    object-position: center;
    z-index: 1;
  }
  .alt-services .details h3 {
    font-weight: 500;
    margin: 10px 0 15px 0;
    font-size: 35px;
    transition: ease-in-out 0.3s;
  }
  .hero {
    padding: 112px 0 65px 0 !important;
    margin-top: 0px;
  }
  .hero .cta-div {
    margin: 0px 0px 0px 0px;
  }
  .hero .welcome {
    width: 100%;
    box-shadow: 0px 0px 17px #d7d4d4;
    margin-top: 225px;
  }
  .hero .welcome .nom {
    margin: 0 0 25px 0;
    font-size: 35px;
    font-weight: 500;
  }
  .hero .welcome .metier {
    font-size: 18px;
    margin: 8px 0px 20px 0px;
  }
  .hero .welcome ul {
    font-size: 19px;
  }
  .hero .content .icon-box .icon-box-icon {
    width: 80px;
  }
  .hero .content .icon-box-icon img {
    height: 120px;
    margin-bottom: 20px;
    width: 170px;
  }
  .hero .content .icon-box-title {
    padding-top: 0px;
    margin-left: 12px;
  }
  .hero .content .icon-box .icon-box-title h4 {
    font-size: 20px;
    text-align: center;
  }
  .hero .content .icon-box-text {
    margin-top: 24px;
    margin-bottom: 25px;
  }
  .hero .content .icon-box p {
    font-size: 18px;
  }
  .hero .content .why-box .more-btn {
    display: none;
  }
  .quick-access-button-div {
    display: none;
  }
  .access-button-minor {
    margin-right: 0px;
  }
  .quick-access-button-div a {
    width: 180px;
    text-align: center;
  }
}
/* ========================================
   PARCOURS
======================================== */
/* parcours */
@media (min-width: 1199px) {
  .about .container .content {
    padding: 40px;
  }
}
/* ========================================
   ITEMS ACCORDEON
======================================== */
/* ITEMS ACCORDEON */
.accordion-item {
  background-color: color-mix(in srgb, var(--surface-color), transparent 96%);
  position: relative;
  overflow: hidden; /* Masque le contenu qui dépasse */
  transition: 0.3s;
  border-radius: 10px;
  height: auto; /* Hauteur automatique par défaut */
}

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

.accordion-title-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: var(--primary-color);
  padding: 20px;
  border-radius: 10px;
}

.accordion-title-container h4 {
  font-family: var(--default-font);
  font-size: 19px;
  line-height: 28px;
  margin: 0;
  transition: 0.3s;
  cursor: pointer;
}

.accordion-toggle {
  margin-left: auto;
  font-size: 15px;
  transition: 0.3s;
  cursor: pointer;
}

.accordion-title-container h4 {
  color: var(--text-white-color);
}

.accordion-toggle {
  color: var(--dynamic-color);
}

.accordion-intro {
  margin: 0px 0px 30px 0px;
}

.accordion-content {
  display: grid;
  grid-template-rows: 0fr; /* Contenu masqué par défaut */
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
  padding: 0px 30px 0px 30px;
  margin: 0;
  height: 0; /* Hauteur nulle par défaut */
  overflow: hidden; /* Masque le contenu */
  margin-top: 10px;
}

.accordion-content a {
  display: contents;
}

.accordion-item.accordion-active {
  background-color: var(--background-light);
  transition: 0.3s;
  margin-bottom: 10px;
}

.accordion-item.accordion-active .accordion-content {
  grid-template-rows: 1fr; /* Contenu visible */
  visibility: visible;
  opacity: 1;
  padding: 20px;
  height: auto; /* Hauteur automatique pour afficher le contenu */
  display: block;
}

.accordion-item.accordion-active .accordion-toggle {
  transform: rotate(90deg);
}

/* FIN ITEMS ACCORDEON */
/* ========================================
   CITATIONS
======================================== */
/* CITATIONS */
.blog-details {
  padding: 0px;
  border-radius: 10px;
}

.blog-details .content img {
  position: absolute;
  margin-top: -65px;
  margin-left: -30px;
  transform: rotate(10deg);
  z-index: 1;
  height: 320px;
}

.blog-details .content blockquote {
  background-color: var(--dynamic-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 60px 0px 60px;
}

.blog-details .content blockquote:after {
  display: none;
}

.blog-details .content blockquote p {
  max-width: 750px;
  position: relative;
  padding: 0 45px;
}

.blog-details .content blockquote p::before,
.blog-details .content blockquote p::after {
  font-family: var(--heading-font);
  font-size: 70px;
  line-height: 1;
  color: var(--dynamic-color);
  position: absolute;
}

.blog-details .content blockquote p::before {
  content: "“";
  top: -15px;
  left: 0;
}

.blog-details .content blockquote p::after {
  content: "”";
  bottom: -35px;
  right: 0;
}

/* Citations (index + prestations) : présentation allégée, traits fins + guillemets, pas d'aplat */
.blog-details.section {
  padding: 0;
}

.blog-details.section .content blockquote {
  background-color: transparent;
  margin: 0;
  padding: 15px 20px;
}

.blog-details.section .content blockquote::before,
.blog-details.section .content blockquote::after {
  content: "";
  display: block;
  position: static;
  width: 80px;
  height: 1px;
  background-color: var(--dynamic-color);
}

.blog-details.section .content blockquote::before {
  margin: 0 auto 20px auto;
}

.blog-details.section .content blockquote::after {
  margin: 20px auto 0 auto;
}

.blog-details.section .content figcaption {
  padding-bottom: 50px;
}

.blog-details .content figcaption {
  font-family: var(--heading-font);
  font-size: 16px;
  text-align: center;
  padding-bottom: 50px;
}

@media only screen and (max-width: 768px) {
  .blog-details .content img {
    margin-top: -75px;
    margin-left: -182px;
    height: 438px;
    transform: rotate(25deg);
  }
}
/* ========================================
   APPROCHE METIER (Vision, mission, valeurs)
======================================== */
/* APPROCHE METIER (Vision, mission, valeurs)*/
.approach-item {
  width: 100%;
}

.approach-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-5px);
  transition: max-height 0.3s ease, transform 0.3s ease;
}

.approach-title-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: var(--primary-color);
  padding: 16px;
  border-radius: 10px;
}

.approach-title {
  color: var(--text-white-color);
  font-size: 32px;
}

.about .content ul i.approach-toggle {
  margin-left: auto;
  font-size: 15px;
  transition: transform 0.3s ease;
  color: var(--dynamic-color);
}

.approach-item.approach-active .approach-content {
  max-height: 800px; /* assez grand pour contenir tout le texte */
  opacity: 1;
  transform: translateY(0);
  background-color: var(--surface-color);
  border-radius: 15px;
}

.approach-item.approach-active .approach-toggle {
  transform: rotate(90deg);
}

.approach-item.approach-active .approach-content {
  background-color: var(--surface-color);
  transition: 0.3s;
}

/* FIN APPROCHE METIER (Vision, mission, valeurs)*/
/* ========================================
   CARTES PRESTATIONS
======================================== */
/* Cartes prestations */
.alt-services .img,
.alt-services .img img {
  border-radius: 8px 8px 0px 0px;
}

/* Desktop (cartes en col-lg-6, deux par ligne) : l'image en hauteur
   naturelle devient trop haute — on la limite et on recadre proprement. */
@media (min-width: 992px) {
  .alt-services .img img {
    height: 220px;
    width: 100%;
    object-fit: cover;
  }
}
.lien-carte {
  display: block;
  padding: 5px;
  color: var(--action-color);
  font-weight: 600;
}

.service-item:hover {
  color: var(--primary-color);
}

.alt-services .container .row .section-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.alt-services .container .row .section-title h3 {
  margin-top: 47px;
}

.alt-services .picto {
  margin-bottom: 5px;
  width: 100px;
  transform: rotate(10deg);
}

.alt-services .service-item {
  height: auto;
}

.alt-services .details {
  height: auto;
  background-color: white;
  position: relative;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 15px;
  transition: all ease-in-out 0.3s;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0px 0 25px rgba(0, 0, 0, 0.1);
}

/* Carte avec image : les coins du haut de .details reviennent à 0 pour
   que l'image (déjà arrondie en haut via .img img) se fonde dans la carte
   sans double arrondi à la jonction. */
.alt-services .service-item:has(.img) .details {
  border-radius: 0 0 8px 8px;
}

.alt-services .details h3 {
  color: var(--text-neutral-color);
}

.alt-services .details h3::after {
  content: "";
  display: block;
  width: var(--separator-cartes-prestations-width);
  height: var(--separator-height);
  margin: 15px auto 0 auto;
  background-color: var(--separator-color);
}

.alt-services .details p {
  color: var(--text-neutral-color);
  font-size: 18px;
  margin-top: 30px;
}

.alt-services .details h3 a {
  color: var(--text-neutral-color);
  font-weight: 500;
  margin: 10px 0 15px 0;
  font-size: 20px !important;
  font-family: var(--default-font);
  transition: ease-in-out 0.3s;
}

.alt-services .details h3 a:hover {
  color: var(--primary-color);
}

/* ========================================
   TÉMOIGNAGES
======================================== */
/* Témoignages */
.testimonials:before {
  background-color: var(--background-light);
}

.testimonial-item {
  padding: 20px;
}

.testimonials .testimonial-item h3 {
  color: var(--text-neutral-color);
  font-size: 35px;
  font-weight: 500;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item .stars i {
  color: var(--primary-color);
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  background-color: var(--background-white);
  opacity: 1;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--primary-color);
}

.testimonials .container img {
  position: absolute;
  bottom: -69px;
  right: -255px;
  height: 483px;
  transform: rotate(-11deg);
}

@media only screen and (max-width: 768px) {
  .testimonials .container img {
    display: none;
  }
}
/* ========================================
   FAQ
======================================== */
/* Faq */
.faq {
  margin-bottom: 0px;
  padding-bottom: 110px;
}

.faq .container .picto {
  border: 1px solid red;
}

.faq .faq-container .faq-item {
  background-color: var(--primary-color);
  position: relative;
  padding: 0px;
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
  transition: 0.3s;
  cursor: pointer;
}

.faq .faq-container .faq-item h4 {
  color: var(--text-white-color);
  font-weight: 300;
  font-size: 18px;
  line-height: 24px;
  margin: 0 30px 0 0px;
  transition: 0.3s;
  cursor: pointer;
  font-family: var(--default-font);
  padding: 15px;
}

.faq .faq-container .faq-active .faq-content {
  background-color: var(--background-light);
  padding: 15px;
}

.faq .faq-container .faq-active h3, .faq .faq-container .faq-active h3:hover, .faq .faq-container .faq-active .faq-toggle, .faq .faq-container .faq-active .faq-icon, .faq .faq-container .faq-active .faq-content {
  color: var(--text-neutral-color) !important;
}

.faq .faq-container .faq-item .faq-toggle,
.faq .faq-container .faq-item .faq-toggle:hover,
.faq .faq-container .faq-active .faq-toggle {
  color: var(--dynamic-color) !important;
}

/* ========================================
   CONTACT
======================================== */
/* Contact */
#contact .section-title h3 {
  margin: 0px 0px 50px 0px;
}

.contact .map-title {
  font-family: var(--default-font);
  color: var(--text-white-color);
  font-size: 18px;
  margin: 20px 0px 0px 0px;
  text-align: center;
  background-color: var(--primary-color);
  padding: 12px 15px 9px 15px;
  border-radius: 10px 10px 0px 0px;
  width: 240px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}

.contact .info-item {
  background-color: var(--primary-color);
  border-radius: 6px;
  box-shadow: none;
  padding: 15px 30px;
  transition: all ease-in-out 0.4s;
}

.contact .info-item h3 {
  font-weight: 400;
  margin: 0 0 2px 0;
}

.contact .info-item .icon {
  color: var(--dynamic-color) !important;
  background-color: transparent;
  width: auto;
  height: auto;
  border-radius: 0;
  font-size: 22px;
  margin-right: 15px;
}

.contact a .info-item h3, #mail-display {
  font-family: var(--default-font);
  color: var(--text-white-color);
  font-size: 18px;
}

/* ========================================
   PRESTATIONS
======================================== */
/* PRESTATIONS */
/* Informations pratiques */
.prestation .section .row {
  align-items: stretch;
}

.prestation .info-item {
  background-color: var(--background-white);
  border-radius: 10px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  padding: 30px 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 200px; /* garde un minimum visuel si un bloc est très court */
  height: 100%; /* s'étire pour matcher le plus grand bloc de la row */
}

.prestation .info-item h3 {
  font-weight: 500;
  font-size: 33px;
  width: 100%;
  text-align: center;
  margin: 0 0 20px 0;
}

.prestation .info-item h3::after {
  content: "";
  display: block;
  width: var(--separator-cartes-prestations-width);
  height: var(--separator-height);
  margin: 15px auto 0 auto;
  background-color: var(--separator-color);
}

.prestation .info-item p {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  line-height: 1.5;
  text-align: left;
}

.prestation .info-item-list {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  margin: 0;
  padding-left: 1.1em;
}

.prestation .info-item-list li::marker {
  color: var(--dynamic-color);
}

@media (max-width: 1199px) {
  .prestation .info-item {
    width: 100%;
  }
}
.prestation .cab .content .section-title h3 {
  margin: 0px 0px 20px 0px;
}

.prestation .cab .content .section-title h3::after {
  content: "";
  display: block;
  width: var(--separator-contenu-width);
  height: var(--separator-height);
  margin: 15px auto 0 auto;
  background-color: var(--separator-color);
}

.prestation .cab .text {
  padding: 35px 0px 0px 35px;
}

@media only screen and (max-width: 768px) {
  .prestation .cab .text {
    padding: 20px;
  }
}
/* ========================================
   INDICATIONS
======================================== */
.indications .titre {
  padding: 0px;
}

.indications .titre h2 {
  text-align: center;
  color: var(--primary-color);
  font-size: 35px;
  padding-bottom: 50px;
}

.indications .content {
  padding: 0px 25px 45px 25px;
}

.indications .content .cta-button {
  margin: 25px 0px 0px 0px;
}

/* Grille de cartes (situations) */
.situations-grid {
  margin-top: 30px;
}

.situations-grid .info-item {
  min-height: 100%;
}

.situations-grid .info-item h3 {
  color: var(--primary-color);
  font-family: var(--default-font);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  padding-top: 6px;
  text-align: center;
}

/* Tuile de situation cliquable — le titre devient le lien vers une page
   indication qui approfondit ce point précis (pyramide de contenu SEO).
   Couleur héritée du titre (--primary-color, déjà garantie lisible) plutôt
   que --dynamic-color : cette dernière est parfois un ton très clair choisi
   pour un fond, pas pour du texte (ex. beige pâle chez certains clients),
   ce qui casse le contraste. Le soulignement, toujours visible sans survol,
   suffit à signaler le lien — utile aussi sur mobile, sans état hover. */
.situations-grid .info-item h3 a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, var(--primary-color), transparent 55%);
  text-underline-offset: 3px;
}

.situations-grid .info-item h3 a:hover {
  text-decoration-color: var(--primary-color);
}

.situations-grid .info-item h3::after {
  content: "";
  display: block;
  width: var(--separator-cartes-prestations-width);
  height: var(--separator-height);
  margin: 15px auto 0 auto;
  background-color: var(--separator-color);
}

.situations-grid .info-item p {
  font-weight: 400;
  font-size: 18px;
  margin-top: 12px;
}

.background-light .situations-group-titre {
  color: var(--primary-color);
  font-family: var(--default-font);
  font-size: 1.2rem;
  font-weight: 400;
  margin: 60px 0px 15px 0px;
  text-align: center;
}

.background-light .situations-group-titre strong {
  font-weight: 700;
}

.situations-note {
  font-size: 18px;
  color: var(--text-neutral-color);
  margin-top: 30px;
}

/* ========================================
   DÉCLENCHEUR
======================================== */
/* Déclencheur */
.declencheur-texte {
  background-color: var(--background-white);
  max-width: 1000px;
  margin: auto;
  padding: 50px;
  border-radius: 10px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}

.declencheur-texte .cta-button {
  margin-top: 35px;
}

.declencheur-titre {
  text-align: center;
  padding: 0px 0px 25px 0px;
}

.declencheur-titre h2 {
  font-size: 35px;
  color: var(--text-white-color);
  padding: 0px 25px;
}

@media (max-width: 1199px) {
  .declencheur-texte {
    width: 90%;
    padding: 35px;
  }
}
/* ========================================
   FOOTER
======================================== */
/* Footer */
.footer .footer-top {
  padding: 50px 20px;
}

.footer .footer-about .logo {
  margin-bottom: 0;
}

.footer .footer-about .logo span {
  font-size: 35px;
  font-weight: 500;
  letter-spacing: 1px;
  font-family: var(--heading-font);
  color: var(--heading-color);
}

.footer h4 {
  color: var(--primary-color);
  font-size: 25px;
  font-weight: 500;
  position: relative;
  padding-bottom: 12px;
  text-align: center;
}

.footer h4::after {
  content: "";
  display: block;
  width: var(--separator-footer-width);
  height: var(--separator-height);
  margin: 8px auto;
  background-color: var(--separator-color);
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--content-font);
}

.footer .footer-about .footer-contact {
  text-align: center;
}

.footer .copyright {
  padding: 25px 20px;
}

.footer .footer-links ul li {
  padding: 5px 0;
  justify-content: center;
}

.footer .footer-links ul a {
  text-align: center;
}

.footer .footer-contact p a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/* ========================================
   MENTIONS LEGALES
======================================== */
.mentions-legales .container .content h4 {
  font-family: var(--default-font);
  font-size: 24px;
  margin-bottom: 24px;
  font-weight: 600;
}

.mentions-legales .container .content h4::after {
  content: "";
  display: block;
  width: var(--separator-contenu-width);
  height: var(--separator-height);
  margin: 15px 0 0 0;
  background-color: var(--separator-color);
}

.blog-details .content img {
  display: none;
}

/* ========================================
   GALERIE DE REALISATIONS (PRESTATION)
   Un seul carrousel Swiper pour mobile et desktop (config "breakpoints" dans
   le JSON de prestation.php) : 1 photo à la fois en dessous de 768px (swipe),
   4 photos avec flèches de navigation à partir de 768px — cohérent avec le
   reste du fichier. Ratio des vignettes portrait sur mobile, plus large une
   fois 4 par ligne.
======================================== */
.prest-gallery {
  padding: 10px 0;
}

.prest-gallery-item {
  display: block;
  position: relative;
  aspect-ratio: 9/16;
  overflow: hidden;
  border-radius: 8px;
}
.prest-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.prest-gallery-item:hover img {
  transform: scale(1.05);
}

@media (min-width: 768px) {
  .prest-gallery-item {
    aspect-ratio: 16/9;
  }
}
.prest-gallery-swiper {
  padding-bottom: 10px;
}
.prest-gallery-swiper .swiper-pagination {
  margin-top: 20px;
  position: relative;
}
.prest-gallery-swiper .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}
.prest-gallery-swiper .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}
.prest-gallery-swiper .swiper-button-prev,
.prest-gallery-swiper .swiper-button-next {
  display: none;
  align-items: center;
  justify-content: center;
  background-color: var(--surface-color, #fff);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  color: var(--accent-color);
  font-size: 18px;
}
.prest-gallery-swiper .swiper-button-prev::after,
.prest-gallery-swiper .swiper-button-next::after {
  content: none;
}

@media (min-width: 768px) {
  .prest-gallery-swiper .swiper-button-prev,
  .prest-gallery-swiper .swiper-button-next {
    display: flex;
  }
}

/*# sourceMappingURL=main.css.map */