/**
* Template Name: Gp
* Template URL: https://bootstrapmade.com/gp-free-multipurpose-html-bootstrap-template/
* Updated: Aug 15 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# 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: "Poppins",  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: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #151515; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #ffc451; /* 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: #312f2f; /* 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: rgba(255, 255, 255, 0.905);  /* The default color of the main navmenu links */
  --nav-hover-color: #ffc451; /* 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: #ffc451; /* 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: #f9f9f9;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #060606;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #252525;
  --contrast-color: #2a2727;
}

/* 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: #000000;
  text-align: center;
  /* padding: 15px; */
  margin-bottom: 24px;
  font-weight: 300;
}

.php-email-form .sent-message {
  display: none;
  color: #000000;
  /* background: #059652; */
  text-align: center;
  /* padding: 15px; */
  margin-bottom: 24px;
  font-weight: 300;
}

.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);
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: rgba(0, 0, 0, 0.8);
  --heading-color: #ffffff;
  --contrast-color: #ffffff;
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 10px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

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

.header .logo h1 {
  font-size: 32px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}

.header .logo span {
  color: var(--accent-color);
  font-size: 32px;
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  font-size: 14px;
  padding: 8px 30px;
  margin: 0 0 0 30px;
  border-radius: 4px;
  transition: 0.3s;
  border: 2px solid var(--accent-color);
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--default-color);
  background: var(--accent-color);
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .btn-getstarted {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 15px;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

/* Index Page Header
------------------------------*/
.index-page .header {
  --background-color: rgba(0, 0, 0, 0);
}

/* Index Page Header on Scroll
------------------------------*/
.index-page.scrolled .header {
  --background-color: rgba(0, 0, 0);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/

/* ==========================================================
   AEDEA HEADER + DESKTOP MENU
   Quando un dropdown desktop è attivo, header e pannello
   diventano un unico blocco scuro.
========================================================== */

@media (min-width: 1200px) {

  #header {
    transition:
      background-color .22s ease,
      box-shadow .22s ease,
      backdrop-filter .22s ease,
      -webkit-backdrop-filter .22s ease;
  }

  #header:has(.navmenu > ul > li.dropdown:hover) {
    background: #101010 !important;
    box-shadow: none !important;

    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }


}


/* AEDEA NAV - REMOVE LIST BULLETS ON ALL DEVICES */
.navmenu ul,
.navmenu ul ul,
.navmenu li {
  list-style: none !important;
  list-style-type: none !important;
}

.navmenu li::marker {
  content: "" !important;
  font-size: 0 !important;
}

/* Navmenu - Desktop */
@media (min-width: 1200px) {

  /* ==========================================================
     AEDEA DESKTOP MENU
     Full-width semplice con HOVER stabile.
     I pannelli non attivi sono display:none, quindi non
     possono intercettare il mouse.
  ========================================================== */

  .navmenu {
    padding: 0;
  }

  .navmenu > ul {
    display: flex;
    align-items: center;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .navmenu > ul > li {
    position: static;
  }

  /* ---------------- TOP LEVEL ---------------- */

  .navmenu > ul > li > a,
  .navmenu > ul > li > a:focus {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 30px 12px 28px;
    color: rgba(255,255,255,.78);
    font-family: var(--nav-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: color .22s ease;
  }

  .navmenu > ul > li > a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 18px;
    height: 1px;
    background: var(--accent-color);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .22s ease;
  }

  .navmenu > ul > li:hover > a,
  .navmenu > ul > li > a.active,
  .navmenu > ul > li > a.active:focus {
    color: #fff;
  }

  .navmenu > ul > li:hover > a::after,
  .navmenu > ul > li > a.active::after {
    transform: scaleX(1);
  }

  .navmenu > ul > li > a > i,
  .navmenu > ul > li > a:focus > i {
    margin: 0;
    color: rgba(255,255,255,.38);
    font-size: 9px;
    transition:
      color .22s ease,
      transform .22s ease;
  }

  .navmenu > ul > li.dropdown:hover > a > i {
    color: var(--accent-color);
    transform: rotate(180deg);
  }


  /* ---------------- FULL WIDTH PANEL ---------------- */

  /*
   * Punto chiave:
   * di default il pannello NON ESISTE nell'area interattiva.
   * Niente opacity/visibility su elementi fixed invisibili.
   */
  .navmenu > ul > li.dropdown > ul {
    display: none !important;

    position: fixed !important;
    top: 78px !important;
    left: 0 !important;
    right: 0 !important;

    width: 100vw !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: calc(100vh - 78px);

    margin: 0 !important;
    padding: 38px max(34px, calc((100vw - 1180px) / 2)) 30px !important;

    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 16px 28px;

    overflow-x: hidden;
    overflow-y: auto;

    list-style: none;

    background: linear-gradient(
      180deg,
      #101010 0%,
      #0c0c0c 100%
    );

    border: 0 !important;
    border-top: 0 !important;

    box-shadow:
      0 28px 65px rgba(0,0,0,.34);

    animation: aedea-desktop-menu-in .20s ease both;
  }

  .navmenu > ul > li.dropdown:hover > ul {
    display: flex !important;
  }

  @keyframes aedea-desktop-menu-in {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }


  /* ---------------- FIRST LEVEL ITEMS ---------------- */

  .navmenu > ul > li.dropdown > ul > li {
    position: static !important;
    flex: 1 1 220px;
    width: auto;
    min-width: 190px;
    max-width: 270px;
    margin: 0 !important;
    padding: 0 !important;
  }

  .navmenu > ul > li.dropdown > ul > li > a,
  .navmenu > ul > li.dropdown > ul > li > a:focus {
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px 0;

    color: rgba(255,255,255,.68);
    background: transparent !important;
    border: 0 !important;

    font-family: var(--nav-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    white-space: normal;

    transition:
      color .18s ease,
      transform .18s ease;
  }

  .navmenu > ul > li.dropdown > ul > li > a:hover,
  .navmenu > ul > li.dropdown > ul > li > a.active {
    color: #fff;
    transform: translateX(3px);
  }

  .navmenu > ul > li.dropdown > ul > li > a > i {
    display: none;
  }


  /* ---------------- CATEGORY GROUPS ---------------- */

  .navmenu > ul > li.dropdown > ul > li.dropdown {
    background: transparent !important;
    border: 0 !important;
  }

  .navmenu > ul > li.dropdown > ul > li.dropdown > a,
  .navmenu > ul > li.dropdown > ul > li.dropdown > a:focus {
    margin: 0 0 8px;
    padding: 0 0 9px;

    color: #fff;

    border-bottom: 1px solid rgba(255,255,255,.11) !important;

    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;

    transform: none !important;
  }

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


  /* ---------------- NESTED LISTS ---------------- */

  /*
   * Anche i sotto-menu interni non sono flyout:
   * restano visibili dentro la stessa area nera.
   */
  .navmenu > ul > li.dropdown > ul > li.dropdown > ul,
  .navmenu > ul > li.dropdown > ul > li.dropdown:hover > ul {
    position: static !important;
    inset: auto !important;

    display: block !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: none !important;
  }

  .navmenu > ul > li.dropdown > ul > li.dropdown > ul > li {
    margin: 0;
    padding: 0;
  }

  .navmenu > ul > li.dropdown > ul > li.dropdown > ul > li > a,
  .navmenu > ul > li.dropdown > ul > li.dropdown > ul > li > a:focus {
    display: block;

    padding: 4px 0;

    color: rgba(255,255,255,.47);
    background: transparent !important;
    border: 0 !important;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    white-space: normal;

    transition:
      color .18s ease,
      transform .18s ease;
  }

  .navmenu > ul > li.dropdown > ul > li.dropdown > ul > li > a:hover,
  .navmenu > ul > li.dropdown > ul > li.dropdown > ul > li > a.active {
    color: var(--accent-color);
    transform: translateX(4px);
  }


  /* ---------------- SIMPLE MENUS ---------------- */

  .navmenu > ul > li.dropdown > ul > li:not(.dropdown) > a {
    padding-top: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(255,255,255,.055) !important;
  }



  /* ---------------- PREMIUM DENSITY ---------------- */

  .navmenu > ul > li.dropdown > ul > li.dropdown {
    padding-top: 2px !important;
  }

  .navmenu > ul > li.dropdown > ul > li.dropdown > a {
    line-height: 1.25;
  }

  .navmenu > ul > li.dropdown > ul > li.dropdown > ul {
    columns: 1;
  }

  .navmenu > ul > li.dropdown > ul > li.dropdown > ul > li > a {
    letter-spacing: .005em;
  }

  /* Per i menu con sole voci semplici, creiamo blocchi compatti */
  .navmenu > ul > li.dropdown > ul > li:not(.dropdown) {
    flex: 0 1 235px;
  }

  .navmenu > ul > li.dropdown > ul > li:not(.dropdown) > a {
    min-height: 34px;
    display: flex;
    align-items: center;
  }

  /* ---------------- SCROLLBAR ---------------- */

  .navmenu > ul > li.dropdown > ul {
    scrollbar-width: thin;
    scrollbar-color:
      rgba(255,196,81,.32)
      transparent;
  }

  .navmenu > ul > li.dropdown > ul::-webkit-scrollbar {
    width: 6px;
  }

  .navmenu > ul > li.dropdown > ul::-webkit-scrollbar-track {
    background: transparent;
  }

  .navmenu > ul > li.dropdown > ul::-webkit-scrollbar-thumb {
    background: rgba(255,196,81,.32);
  }


  /* ---------------- MEDIUM DESKTOP ---------------- */

  @media (max-width: 1399px) {

    .navmenu > ul > li > a,
    .navmenu > ul > li > a:focus {
      padding-left: 9px;
      padding-right: 9px;
      font-size: 12px;
    }

    .navmenu > ul > li.dropdown > ul {
      padding-top: 30px !important;
      padding-left: 30px !important;
      padding-right: 30px !important;
      gap: 14px 22px;
    }

    .navmenu > ul > li.dropdown > ul > li {
      flex-basis: 205px;
      min-width: 180px;
      max-width: 250px;
    }

  }

}


/* ==========================================================
   AEDEA MOBILE MENU - REMOVE LIST BULLETS
========================================================== */
@media (max-width: 1199px) {

  .navmenu ul,
  .navmenu ul ul,
  .navmenu li,
  .navmenu li::before,
  .navmenu li::after {
    list-style: none !important;
  }

  .navmenu ul,
  .navmenu ul ul {
    list-style-type: none !important;
    padding-left: 0;
  }

  .navmenu li::marker {
    content: "" !important;
    font-size: 0 !important;
  }

}

/* Navmenu - Mobile */
@media (max-width: 1199px) {

  /* -----------------------------------------------------------
     AEDEA MOBILE MENU
     Full-screen premium navigation
  ------------------------------------------------------------ */

  .mobile-nav-toggle {
    position: relative;
    z-index: 10001;
    width: 46px;
    height: 46px;
    margin-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 29px;
    line-height: 1;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition:
      background-color 0.3s ease,
      border-color 0.3s ease,
      color 0.3s ease,
      transform 0.3s ease;
  }

  .mobile-nav-toggle:hover {
    color: #111;
    background: var(--accent-color);
    border-color: var(--accent-color);
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  /* Il menu non è più un riquadro/popup:
     diventa un pannello full-screen */
  .navmenu > ul {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding:
      calc(104px + env(safe-area-inset-top))
      max(24px, calc((100vw - 720px) / 2))
      calc(46px + env(safe-area-inset-bottom));
    list-style: none;
    overflow-x: hidden;
    overflow-y: auto;

    background:
      radial-gradient(
        circle at 82% 12%,
        rgba(255, 196, 81, 0.10),
        transparent 28%
      ),
      linear-gradient(
        145deg,
        #0b0b0b 0%,
        #111111 58%,
        #171717 100%
      );

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-18px);
    transition:
      opacity 0.42s cubic-bezier(.2,.7,.2,1),
      transform 0.42s cubic-bezier(.2,.7,.2,1),
      visibility 0.42s ease;
  }

  /* sottile decorazione premium */
  .navmenu > ul::before {
    content: "AEDEA GROUP";
    display: block;
    flex: 0 0 auto;
    margin: 0 0 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--accent-color);
    font-family: var(--nav-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
  }

  .navmenu > ul > li {
    position: relative;
    flex: 0 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity 0.36s ease,
      transform 0.36s ease;
  }

  .navmenu a,
  .navmenu a:focus {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 64px;
    padding: 15px 2px;
    color: rgba(255, 255, 255, 0.92);
    background: transparent !important;
    font-family: var(--nav-font);
    font-size: clamp(18px, 4.5vw, 24px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    white-space: normal;
    transition:
      color 0.25s ease,
      padding-left 0.25s ease;
  }

  .navmenu > ul > li > a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 1px;
    background: var(--accent-color);
    transition: width 0.35s ease;
  }

  .navmenu > ul > li > a:hover::before,
  .navmenu > ul > li > a.active::before {
    width: 58px;
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--accent-color);
    background: transparent !important;
  }

  /* freccia dropdown */
  .navmenu a i,
  .navmenu a:focus i {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    margin-left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
    transition:
      transform 0.35s ease,
      color 0.25s ease,
      background-color 0.25s ease,
      border-color 0.25s ease;
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    color: #111;
    background: var(--accent-color);
    border-color: var(--accent-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    transform: rotate(180deg);
  }

  /* -----------------------------------------------------------
     DROPDOWN MOBILE
  ------------------------------------------------------------ */

  .navmenu .dropdown ul {
    position: static;
    display: none;
    width: 100%;
    margin: 0;
    padding: 4px 0 18px 22px;
    border: 0;
    border-left: 1px solid rgba(255, 196, 81, 0.32);
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .navmenu .dropdown ul li {
    border: 0;
  }

  .navmenu .dropdown ul a,
  .navmenu .dropdown ul a:focus {
    min-height: auto;
    padding: 9px 0 9px 16px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active,
  .navmenu .dropdown ul li:hover > a {
    color: var(--accent-color);
    padding-left: 22px;
    background: transparent !important;
  }

  .navmenu .dropdown ul a i,
  .navmenu .dropdown ul a:focus i {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    margin-left: 10px;
    font-size: 10px;
    background: rgba(255, 255, 255, 0.045);
  }

  /* terzo livello */
  .navmenu .dropdown ul ul {
    margin-top: 4px;
    margin-left: 8px;
    padding-left: 16px;
    background: transparent;
    border-left-color: rgba(255, 255, 255, 0.12);
  }

  .navmenu .dropdown > .dropdown-active {
    display: block;
    animation: aedea-mobile-dropdown-in 0.32s ease both;
  }

  @keyframes aedea-mobile-dropdown-in {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* -----------------------------------------------------------
     STATO APERTO
  ------------------------------------------------------------ */

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .navmenu {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    z-index: 9997;
    overflow: visible;
    background: transparent;
  }

  .mobile-nav-active .navmenu > ul {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-nav-active .navmenu > ul > li {
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-nav-active .navmenu > ul > li:nth-child(1) { transition-delay: 0.05s; }
  .mobile-nav-active .navmenu > ul > li:nth-child(2) { transition-delay: 0.08s; }
  .mobile-nav-active .navmenu > ul > li:nth-child(3) { transition-delay: 0.11s; }
  .mobile-nav-active .navmenu > ul > li:nth-child(4) { transition-delay: 0.14s; }
  .mobile-nav-active .navmenu > ul > li:nth-child(5) { transition-delay: 0.17s; }
  .mobile-nav-active .navmenu > ul > li:nth-child(6) { transition-delay: 0.20s; }
  .mobile-nav-active .navmenu > ul > li:nth-child(7) { transition-delay: 0.23s; }
  .mobile-nav-active .navmenu > ul > li:nth-child(8) { transition-delay: 0.26s; }

  .mobile-nav-active .mobile-nav-toggle {
    position: fixed;
    top: calc(22px + env(safe-area-inset-top));
    right: 22px;
    z-index: 10002;
    width: 48px;
    height: 48px;
    margin: 0;
    color: #111;
    background: var(--accent-color);
    border-color: var(--accent-color);
    font-size: 31px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.26);
    transform: rotate(0deg);
  }

  /* evita che il logo/header creino un secondo layer sopra al menu */
  /*
     IMPORTANTE:
     quando l'header è in stato "scrolled", alcune pagine AEDEA
     applicano backdrop-filter. Su Safari/Chrome mobile questo può
     trasformare l'header nel containing block degli elementi fixed,
     facendo diventare il menu alto quanto il solo header.
     Durante l'apertura del menu neutralizziamo quindi tutti gli
     effetti che possono creare un nuovo containing block.
  */
  .mobile-nav-active #header,
  body.mobile-nav-active #header,
  .mobile-nav-active #header.scrolled,
  body.mobile-nav-active #header.scrolled {
    background: transparent !important;
    box-shadow: none !important;

    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;

    filter: none !important;
    transform: none !important;
    perspective: none !important;
    contain: none !important;
    isolation: auto !important;
  }
}


/* telefoni piccoli */
@media (max-width: 575px) {

  .navmenu > ul {
    padding:
      calc(92px + env(safe-area-inset-top))
      22px
      calc(34px + env(safe-area-inset-bottom));
  }

  .navmenu > ul::before {
    margin-bottom: 18px;
  }

  .navmenu a,
  .navmenu a:focus {
    min-height: 58px;
    font-size: 19px;
  }

  .navmenu .dropdown ul {
    padding-left: 14px;
  }

  .navmenu .dropdown ul a,
  .navmenu .dropdown ul a:focus {
    padding-left: 13px;
    font-size: 14px;
  }

  .mobile-nav-active .mobile-nav-toggle {
    top: calc(17px + env(safe-area-inset-top));
    right: 17px;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  position: relative;
}

.footer .footer-top {
  padding: 50px 0;
  background-color: color-mix(in srgb, var(--footer-background-color) 90%, white 10%);
}

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 10px;
}

.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 {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  background-color: color-mix(in srgb, var(--default-color) 5%, white 10%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  font-size: 16px;
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--contrast-color);
  background-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 {
  margin-right: 4px;
  font-size: 12px;
  line-height: 0;
  color: var(--accent-color);
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.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: 4px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  display: flex;
  background-color: color-mix(in srgb, var(--footer-background-color) 90%, white 15%);
  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;
  width: 100%;
  background-color: color-mix(in srgb, var(--footer-background-color) 90%, white 15%);
  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: -7px -8px -7px 0;
  background: var(--accent-color);
  color: var(--contrast-color);
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
}

.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.footer .copyright {
  padding: 30px 0;
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 5px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: #000;
  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: 40px;
  height: 40px;
  border-radius: 4px;
  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;
}

/*--------------------------------------------------------------
# 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 {
  color: var(--default-color);
  background-color: var(--background-color);
  position: relative;
}

.page-title .heading {
  padding: 80px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.page-title .heading h1 {
  font-size: 38px;
  font-weight: 700;
}

.page-title nav {
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 20px 0;
}

.page-title nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title nav ol li+li {
  padding-left: 10px;
}

.page-title nav 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: 80px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 58px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  line-height: 1px;
  margin: 0;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  position: relative;
}

.section-title h2::after {
  content: "";
  width: 120px;
  height: 1px;
  display: inline-block;
  background: var(--accent-color);
  margin: 4px 10px;
}

.section-title p {
  color: var(--heading-color);
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  text-transform: uppercase;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 120px 0 80px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.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 {
  position: relative;
  z-index: 3;
}

.hero h2 {
  margin: 0;
  font-size: 56px;
  font-weight: 700;
  font-family: var(--nav-font);
}

.hero h2 span {
  color: var(--accent-color);
}

.hero p {
  margin: 10px 0 0 0;
  font-size: 24px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.hero .icon-box {
  padding: 30px 20px;
  transition: ease-in-out 0.3s;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero .icon-box i {
  font-size: 32px;
  line-height: 1;
  color: var(--accent-color);
}

.hero .icon-box h3 {
  font-weight: 700;
  margin: 10px 0 0 0;
  padding: 0;
  line-height: 1;
  font-size: 20px;
  line-height: 26px;
}

.hero .icon-box h3 a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: ease-in-out 0.3s;
}

.hero .icon-box:hover {
  border-color: var(--accent-color);
}

.hero .icon-box:hover h3 a {
  color: var(--accent-color);
}

@media (max-width: 768px) {
  .hero h2 {
    font-size: 32px;
  }

  .hero p {
    font-size: 18px;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content h3 {
  font-size: 1.75rem;
  font-weight: 700;
}

.about .content .fst-italic {
  color: color-mix(in srgb, var(--default-color), var(--contrast-color) 50%);
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding: 10px 0 0 0;
  display: flex;
}

.about .content ul i {
  color: var(--accent-color);
  margin-right: 0.5rem;
  line-height: 1.2;
  font-size: 1.25rem;
}

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

/*--------------------------------------------------------------
# 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);
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features .features-image {
  position: relative;
  min-height: 400px;
}

.features .features-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.features .features-item h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 5px 0;
}

.features .features-item i {
  font-size: 48px;
  color: var(--accent-color);
  margin-right: 20px;
  line-height: 0;
}

.features .features-item p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  background-color: var(--surface-color);
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  padding: 80px 20px;
  height: 100%;
  transition: all ease-in-out 0.3s;
}

.services .service-item .icon {
  background: var(--accent-color);
  color: var(--contrast-color);
  margin: 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: 0.3s;
}

.services .service-item .icon i {
  font-size: 28px;
  transition: ease-in-out 0.3s;
}

.services .service-item h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
  transition: 0.3s;
}

.services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .service-item:hover {
  box-shadow: 0px 0 25px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-10px);
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  padding: 80px 0;
  position: relative;
  clip-path: inset(0);
}

.call-to-action img {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.call-to-action:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 50%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.call-to-action .container {
  position: relative;
  z-index: 3;
}

.call-to-action h3 {
  font-size: 28px;
  font-weight: 700;
  color: var(--default-color);
}

.call-to-action p {
  color: var(--default-color);
}

.call-to-action .cta-btn {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 5px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid var(--default-color);
  color: var(--default-color);
}

.call-to-action .cta-btn:hover {
  background: var(--accent-color);
  color: var(--background-color);
  border: 2px solid var(--accent-color);
}

/*--------------------------------------------------------------
# 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: 4px;
  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;
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .stats-item {
  padding: 10px;
}

.stats .stats-item i {
  font-size: 44px;
  color: var(--accent-color);
  line-height: 0;
  margin-right: 15px;
}

.stats .stats-item .purecounter {
  color: var(--heading-color);
  font-size: 40px;
  display: block;
  font-weight: 700;
  line-height: 40px;
}

.stats .stats-item p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 15px 0 0 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 14px;
}

/*--------------------------------------------------------------
# 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;
}

.portfolio-details-slider .swiper-slide img {
  max-width: 50%;
  height: auto;
  margin: 0 auto;
  display: block;
}



@media (max-width: 1199px) {
 .portfolio-details-slider .swiper-slide img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}
}

.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%;
  }
}

@media (max-width: 1199px) {
  #header {
 padding: 20px 0 ;
  }
  .sitename {
    font-size: 1.5em !important;
  }
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/

 /* Link wrapper */
.team-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Card base */
.team-member {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

/* Hover zoom */
.team-link:hover .team-member {
  transform: scale(1.04);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* Immagine più fluida */
.member-img img {
  transition: transform 0.3s ease;
}

/* Micro zoom immagine */
.team-link:hover .member-img img {
  transform: scale(1.05);
}

/* Titolo come link */
.member-info h4 {
  cursor: pointer;
  transition: color 0.2s ease;
}

/* Hover titolo */
.team-link:hover h4 {
  color: var(--accent-color); /* blu bootstrap, cambia se vuoi */
  /* text-decoration: underline; */
}


.team .team-member {
  background-color: var(--surface-color);
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  height: 100%;
}

.team .team-member .member-img {
  position: relative;
  overflow: hidden;
}

.team .team-member .social {
  position: absolute;
  left: 0;
  bottom: 30px;
  right: 0;
  opacity: 0;
  transition: ease-in-out 0.3s;
  text-align: center;
}

.team .team-member .social a {
  background: color-mix(in srgb, var(--contrast-color), transparent 25%);
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0 3px;
  border-radius: 4px;
  width: 36px;
  height: 36px;
  transition: ease-in-out 0.3s;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.team .team-member .social a:hover {
  color: var(--contrast-color);
  background: var(--accent-color);
}

.team .team-member .social i {
  font-size: 18px;
  line-height: 0;
}

.team .team-member .member-info {
  padding: 25px 15px;
}

.team .team-member .member-info h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 18px;
}

.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:hover .social {
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item+.info-item {
  margin-top: 40px;
}

.contact .info-item i {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.contact .info-item h3 {
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .php-email-form {
  height: 100%;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  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%);
}

.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: 4px;
}

.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 .service-box {
  background-color: var(--surface-color);
  padding: 20px;
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
}

.service-details .service-box+.service-box {
  margin-top: 30px;
}

.service-details .service-box h4 {
  font-size: 20px;
  font-weight: 700;
  border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 92%);
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.service-details .services-list {
  background-color: var(--surface-color);
}

.service-details .services-list a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  display: flex;
  align-items: center;
  padding: 12px 15px;
  margin-top: 15px;
  transition: 0.3s;
}

.service-details .services-list a:first-child {
  margin-top: 0;
}

.service-details .services-list a i {
  font-size: 16px;
  margin-right: 8px;
  color: var(--accent-color);
}

.service-details .services-list a.active {
  color: var(--contrast-color);
  background-color: var(--accent-color);
}

.service-details .services-list a.active i {
  color: var(--contrast-color);
}

.service-details .services-list a:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  color: var(--accent-color);
}

.service-details .download-catalog a {
  color: var(--default-color);
  display: flex;
  align-items: center;
  padding: 10px 0;
  transition: 0.3s;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .download-catalog a:first-child {
  border-top: 0;
  padding-top: 0;
}

.service-details .download-catalog a:last-child {
  padding-bottom: 0;
}

.service-details .download-catalog a i {
  font-size: 24px;
  margin-right: 8px;
  color: var(--accent-color);
}

.service-details .download-catalog a:hover {
  color: var(--accent-color);
}

.service-details .help-box {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  margin-top: 30px;
  padding: 30px 15px;
}

.service-details .help-box .help-icon {
  font-size: 48px;
}

.service-details .help-box h4,
.service-details .help-box a {
  color: var(--contrast-color);
}

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

.service-details h3 {
  font-size: 26px;
  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
--------------------------------------------------------------*/




.handle-colors {
  margin-top: 40px;
  text-align: center;
}

.handle-colors-title {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
  opacity: 0.6;
}

.handle-colors-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.handle-color-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 500;
}

.handle-color {
  width: 34px;
  height: 34px;
  display: block;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.12),
    0 4px 10px rgba(0, 0, 0, 0.12);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.handle-color-item:hover .handle-color {
  transform: scale(1.12);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.15),
    0 6px 16px rgba(0, 0, 0, 0.18);
}

/* Colori */

.handle-color.silver {
  background: linear-gradient(
    135deg,
    #eeeeee 0%,
    #a7a7a7 45%,
    #dddddd 70%,
    #8c8c8c 100%
  );
}

.handle-color.white {
  background: #ffffff;
}

.handle-color.gold {
  background: linear-gradient(
    135deg,
    #f5df9c 0%,
    #c49a36 45%,
    #f0cf73 70%,
    #9c741d 100%
  );
}

.handle-color.bronze {
  background: linear-gradient(
    135deg,
    #b77a4c 0%,
    #714326 45%,
    #a9683d 70%,
    #4c2c1a 100%
  );
}

.handle-color.black {
  background: linear-gradient(
    135deg,
    #444 0%,
    #111 50%,
    #292929 100%
  );
}









/* =======================================================
   COOKIE CONSENT
======================================================= */

.cookie-consent {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.cookie-consent.is-visible {
  display: flex;
}

.cookie-consent__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(4px);
}

.cookie-banner,
.cookie-settings {
  position: relative;
  z-index: 2;
  background: #111;
  color: #fff;
}

.cookie-banner {
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -15px 60px rgba(0, 0, 0, 0.25);
}

.cookie-banner__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 34px 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 50px;
}

.cookie-banner__content {
  max-width: 760px;
}

.cookie-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: #ffc451;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cookie-banner h2,
.cookie-settings h2 {
  color: #fff;
  font-family: "Raleway", sans-serif;
  font-weight: 800;
}

.cookie-banner h2 {
  margin: 0 0 12px;
  font-size: 30px;
}

.cookie-banner p {
  margin: 0;
  max-width: 720px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 14px;
  line-height: 1.7;
}

.cookie-links {
  display: flex;
  gap: 18px;
  margin-top: 14px;
}

.cookie-links a {
  color: #ffc451;
  font-size: 12px;
  font-weight: 700;
}

.cookie-links a:hover {
  color: #fff;
}

.cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cookie-btn {
  border: 0;
  padding: 13px 18px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.25s ease;
}

.cookie-btn--primary {
  background: #ffc451;
  color: #111;
}

.cookie-btn--primary:hover {
  background: #fff;
}

.cookie-btn--secondary {
  background: #272727;
  color: #fff;
}

.cookie-btn--secondary:hover {
  background: #333;
}

.cookie-btn--outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.cookie-btn--outline:hover {
  border-color: #ffc451;
  color: #ffc451;
}


/* SETTINGS */

.cookie-settings {
  width: min(680px, calc(100% - 30px));
  max-height: 88vh;
  overflow-y: auto;
  margin: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.4);
}

.cookie-settings__header {
  padding: 28px 30px 22px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cookie-settings__header h2 {
  margin: 0;
  font-size: 26px;
}

.cookie-settings__close {
  width: 40px;
  height: 40px;
  border: 0;
  background: #222;
  color: #fff;
  cursor: pointer;
}

.cookie-settings__body {
  padding: 10px 30px;
}

.cookie-category {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 25px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cookie-category__title {
  margin-bottom: 7px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.cookie-category p {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12.5px;
  line-height: 1.6;
}

.cookie-always-active {
  color: #ffc451;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.cookie-settings__footer {
  padding: 24px 30px 30px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}


/* SWITCH */

.cookie-switch {
  position: relative;
  width: 48px;
  height: 26px;
  display: inline-block;
}

.cookie-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-switch__slider {
  position: absolute;
  inset: 0;
  background: #353535;
  cursor: pointer;
  transition: 0.25s;
  border-radius: 50px;
}

.cookie-switch__slider::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.25s;
}

.cookie-switch input:checked + .cookie-switch__slider {
  background: #ffc451;
}

.cookie-switch input:checked + .cookie-switch__slider::before {
  transform: translateX(22px);
}


/* MOBILE */

@media (max-width: 991px) {

  .cookie-banner__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cookie-banner__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 576px) {

  .cookie-banner__inner {
    padding: 25px 20px;
  }

  .cookie-banner h2 {
    font-size: 24px;
  }

  .cookie-banner__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cookie-btn {
    width: 100%;
  }

  .cookie-settings {
    width: calc(100% - 20px);
  }

  .cookie-settings__header,
  .cookie-settings__body,
  .cookie-settings__footer {
    padding-left: 20px;
    padding-right: 20px;
  }

  .cookie-settings__footer {
    display: grid;
    grid-template-columns: 1fr;
  }
}


















      /* =========================================================
       FOOTER
    ========================================================== */

      .footer-premium {
        background: #0c0c0c;
        color: rgba(255, 255, 255, 0.55);
        padding: 80px 0 0;
      }

      .footer-brand img {
        max-width: 80px;
        margin-bottom: 20px;
      }

      .footer-brand p {
        max-width: 380px;
        font-size: 13px;
        line-height: 1.8;
      }

      .footer-premium h4 {
        color: #fff;
        font-size: 14px;
        margin-bottom: 22px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }

      .footer-premium ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .footer-premium li {
        margin-bottom: 12px;
        font-size: 13px;
      }

      .footer-premium a {
        color: rgba(255, 255, 255, 0.52);
        font-size: 13px;
        transition: 0.25s ease;
      }

      .footer-premium a:hover {
        color: var(--aedea-yellow);
      }

      .footer-social {
        display: flex;
        gap: 10px;
        margin-top: 25px;
      }

      .footer-social a {
        width: 38px;
        height: 38px;
        border: 1px solid rgba(255, 255, 255, 0.13);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
      }

      .footer-social a:hover {
        background: var(--aedea-yellow);
        border-color: var(--aedea-yellow);
        color: #111;
      }

      .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding: 22px 0;
        margin-top: 65px;
        font-size: 12px;
      }