/*-----------------------------------------
---------- VARIABILI CSS GLOBALI ---------- 
-------------------------------------------*/

:root {
  /* PALETTE COLORI DEL TEMA */
  --copyright-color: #cfcfcf;

  --white-color: #ffffff;

  --semcars-black-color: #1e1e1e;
  --semcars-light-color: #d3dadd;
  --semcars-first-color: #db0000;
  --semcars-first-color-darker: #a00000;
  --semcars-white-color: whitesmoke;

  --header-height: 88px; /* valore iniziale */
  --section-arrow-size: 42px;
  --section-arrow-offset: 18px;
  --section-horizontal-padding: 1rem;
  /* FONT DEL TEMA */
  --main-font: "Montserrat", sans-serif;
  --fontawesome-font: "Font Awesome 6 Free" !important;
}

/*---------------------------------------------
----------CLASSI FONT GENERALI-----------------
----------------------------------------------*/

* {
  font-family: var(--main-font);
}

* {
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  display: block; /* normale flusso */
}
html,
body {
  height: 100%;
  margin: 0;
}

main {
  flex: 1; /* occupa lo spazio disponibile */
  display: block; /* flusso verticale naturale */
}

footer {
  margin: 0;
  padding: 0;
}

footer:empty {
  display: none;
}

/* header fisso */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 1000;
  display: flex;
  align-items: center;
}

/* il main parte sotto l'header */
.site-main {
  padding-top: var(--header-height);
}

/* sezione base */
.page-section {
  position: relative;
  width: 100%;
}

/* contenitore interno della sezione */
.section-inner {
  position: relative;
  width: 100%;
}

/* desktop: sezione alta quanto viewport meno header */
@media (min-width: 992px) {
  .page-section {
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100dvh - var(--header-height));
    display: flex;
    padding-top: 5vh;
    align-items: stretch;
  }

  .page-section.hero {
    height: 100vh;
    margin-top: calc(-1 * var(--header-height));
  }

  .section-inner {
    display: flex;
    align-items: center; /* cambia in flex-start se vuoi il contenuto in alto */
    width: 100%;
    padding-left: var(--section-horizontal-padding);
    padding-right: var(--section-horizontal-padding);
    padding-bottom: calc(var(--section-arrow-size) + 2rem);
  }

  .section-inner .row {
    width: 100%;
  }
}

/* freccia navigazione */
.section-arrow {
  position: absolute;
  left: 50%;
  bottom: var(--section-arrow-offset);
  transform: translateX(-50%);
  width: var(--section-arrow-size);
  height: var(--section-arrow-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 5;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

/* hover */
.section-arrow:hover {
  transform: translateX(-50%) translateY(2px);
  opacity: 0.8;
}

/* disegno freccia */
.section-arrow span {
  display: block;
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--semcars-white-color);
  border-bottom: 2px solid var(--semcars-white-color);
  transform: rotate(45deg);
}

.section-arrow.black-arrow span {
  border-right: 2px solid var(--semcars-black-color);
  border-bottom: 2px solid var(--semcars-black-color);
}

/* mobile: la sezione si adatta al contenuto */
@media (max-width: 991.98px) {
  .section-arrow {
    display: none; /* nascondi la freccia su mobile */
  }
  section .col-12 {
    padding: 2rem; /* aggiungi un po' di spazio verticale tra le sezioni su mobile */
  }
  .page-section.hero {
    margin-top: 0;
    display: flex;
    min-height: 100vh;
  }
  .site-main {
    padding-top: calc(var(--header-height) / 3 * 2); /* DA VERIFICARE*/
  }
}

@font-face {
  font-family: "Acens";
  src: url("../fonts/Acens.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

i {
  font-family: var(--fontawesome-font);
}

.fa-classic,
.fa-light,
.fa-regular,
.fa-solid,
.fa-thin,
.fal,
.far,
.fas,
.fat {
  font-family: "Font Awesome 6 Free" !important;
}
.icon-circle {
  width: 80px; /* larghezza cerchio */
  height: 80px; /* altezza cerchio */
  border-radius: 50%; /* cerchio perfetto */
  margin: 0 auto;
  display: flex;
  align-items: center; /* centra verticalmente */
  justify-content: center; /* centra orizzontalmente */
  font-size: 2.5rem; /* dimensione icona */
}

#elenco-step .icon-circle {
  width: 50px; /* larghezza cerchio */
  height: 50px; /* altezza cerchio */
  border-radius: 50%; /* cerchio perfetto */
  display: flex;
  align-items: center; /* centra verticalmente */
  justify-content: center; /* centra orizzontalmente */
  font-size: 1.5rem; /* dimensione icona */
}

@media (max-width: 480px) {
  .icon-circle {
    width: 45px;
    height: 45px;
    font-size: 1.2rem;
  }
}

/*---------------------------------------------
----------CLASSI PER EDITOR DI TESTO-----------
----------------------------------------------*/
.editor {
  font-size: 2.25vh;
}
.editor .conclusione {
  /*text-transform: uppercase;*/
  color: var(--semcars-first-color);
  font-size: 2.5vh;
}
.editor-white {
  /*text-transform: uppercase;*/
  color: var(--semcars-white-color) !important;
  font-size: 2.25vh;
}
.editor {
  color: var(--semcars-black-color);
}

.editor.box-step {
  font-size: 12pt;
}


.editor h2 {
  color: var(--first-color);
  font-size: 32px;
  font-weight: bold;
}

.editor h3 {
  color: var(--third-color);
  font-size: 24px;
  font-weight: bold;
  margin-top: 20px;
}

.editor h4 {
  font-size: 18px;
  font-weight: bold;
}

.editor a {
  color: var(--first-color);
  transition: 0.1s ease-in-out;
}

.editor a:hover {
  opacity: 0.7;
  text-decoration: none;
}

.editor ul {
  padding-left: 25px;
  margin-bottom: 40px;
  text-align: left !important;
}

.editor ul li {
  color: var(--semcars-black-color);
}

.editor ul li::marker {
  color: var(--semcars-first-color);
  font-size: 25px;
  line-height: 25px;
}

.editor blockquote {
  background-color: var(--third-color2);
  padding: 40px;
  border-radius: 15px;
}

.editor blockquote p {
  margin-bottom: 0;
}

/*-------------------------------
-------------BACKGROUND----------
-------------------------------*/
.bg-first {
  background-color: var(--semcars-white-color);
}
.bg-white {
  background-color: #fff;
}
.bg-whitesmoke {
  background-color: whitesmoke;
}
.bg-first-semcars {
  background-color: var(--semcars-first-color);
}

.bg-second {
  background-color: var(--semcars-light-color);
}
.bg-black-semcars {
  background-color: var(--semcars-black-color);
}
.bg-darker {
  background-color: var(--black-color);
}

.bg-second2 {
  background-color: #feedae;
}

.bg-third {
  background-color: var(--third-color);
}

.bg-third2 {
  background-color: var(--third-color2);
}

/*-------------------------------
-----------COLORI TESTO----------
-------------------------------*/

.first-color {
  color: var(--semcars-first-color);
}

.light-color {
  color: var(--semcars-light-color);
}

.black-color {
  color: var(--semcars-black-color);
}

.white-color {
  color: var(--semcars-white-color);
}

.second-color {
  color: var(--second-color);
}

.third-color {
  color: var(--third-color);
}

.grey-color {
  color: var(--grey-color);
}

.copyright-color {
  color: var(--copyright-color);
}

/*-------------------------------
--------DIMENSIONI TESTO---------
-------------------------------*/

.font-acens {
  font-family: "Acens", sans-serif;
}

.h1-size {
  font-size: clamp(32px, 5vw, 60px);
  line-height: 1.13;
}

.h2-size {
  font-size: clamp(26px, 3vw, 32px);
}

.h3-size {
  font-size: clamp(18px, 2.2vw, 22px);
}

.h4-size {
  font-size: clamp(17px, 2vw, 20px);
}

.p-size {
  font-size: clamp(15px, 1.6vw, 16px);
}

.subtitle-size {
  font-size: clamp(15px, 1.6vw, 16px);
}

/*-------------------------------
------FONT WEIGHT TESTO----------
-------------------------------*/

.fw-100 {
  font-weight: 100;
}

.fw-200 {
  font-weight: 200;
}

.fw-300 {
  font-weight: 300;
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.fw-800 {
  font-weight: 800;
}

.fw-900 {
  font-weight: 900;
}

/*-------------------------------
------CLASSI HOVER OPACITY-------
-------------------------------*/
.hover-opacity-5,
.hover-opacity-6,
.hover-opacity-7,
.hover-opacity-8 {
  transition: 0.1s ease-in-out;
}

.hover-opacity-5:hover {
  opacity: 0.5;
}

.hover-opacity-6:hover {
  opacity: 0.6;
}

.hover-opacity-7:hover {
  opacity: 0.7;
}

.hover-opacity-8:hover {
  opacity: 0.8;
}

/*-------------------------------
-------------BOTTONI-------------
-------------------------------*/
.category-badge {
  text-decoration: none;
  padding: 5px 15px;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: 15px;
  box-shadow: 0px 3px 20px #57575652;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1;
}

.category-badge:nth-child(2) {
  top: 55px;
}

.button-small {
  text-decoration: none;
  padding: 13px;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: 15px;
  box-shadow: 0px 3px 20px #57575652;
}

.button-big {
  text-decoration: none;
  padding: 13px;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: 15px;
  box-shadow: 0px 3px 20px #57575652;
}

.button-whatsapp {
  color: var(--semcars-white-color);
  text-decoration: none;
  border-radius: 15px;
  text-decoration: none;
  display: inline-flex; /* 🔴 FIX PRINCIPALE */
  align-items: center; /* allinea icona + testo */
  justify-content: center; /* centra il contenuto */
  text-align: center; /* centra il testo su più righe */
  gap: 8px; /* spazio icona-testo */
  line-height: 1.2;
  padding: 13px;
  font-size: 20px;
  background-color: #00bf63;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.button-whatsapp:hover {
  background-color: #046737;
  color: var(--semcars-white-color);
}

.button-first {
  color: var(--white-color);
  text-decoration: none;
  border-radius: 15px;
  display: inline-flex; /* 🔴 FIX PRINCIPALE */
  align-items: center; /* allinea icona + testo */
  justify-content: center; /* centra il contenuto */
  text-align: center; /* centra il testo su più righe */
  gap: 8px; /* spazio icona-testo */
  line-height: 1.2;
  text-decoration: none;
  padding: 13px;
  font-size: 20px;
  background-color: var(--semcars-first-color);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.button-first:hover {
  background-color: var(--semcars-first-color-darker);
  color: var(--white-color);
}

.button-second {
  color: var(--first-color);
  background: linear-gradient(180deg, #feedae 0%, #fdd19b 100%) 0% 0% no-repeat
    padding-box;
  border: 2px solid var(--first-color);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.button-second:hover {
  color: var(--white-color);
  background: var(--first-color);
}

.button-third {
  color: var(--white-color);
  background: linear-gradient(180deg, #000000 0%, #575756 100%) 0% 0% no-repeat
    padding-box;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  padding: 13px 40px;
}

.button-third:hover {
  color: var(--white-color);
}

/*-------------------------------
------ scroll down -------
-------------------------------*/
.scroll-down {
  margin-top: auto; /* Questo la spinge sempre in fondo al contenitore flex */
  margin-bottom: 20px;
  text-align: center;
  cursor: pointer;
  z-index: 5;
  display: flex;
  justify-content: center;
  width: 100%;
}

.scroll-down .arrow {
  font-size: 3vh;
  color: #000;
  animation: bounce 1.8s infinite;
  display: inline-block;
}

/* animazione */
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(8px);
  }
  60% {
    transform: translateY(4px);
  }
}

.accordion-button::after {
    display: block;
}

.accordion-button:not(.collapsed) {
    background-color: rgba(219, 0,0, 0.10); /* oppure il tuo colore */
    color: var(--semcars-first-color)
}

.accordion-button:focus {
    box-shadow: none;
    outline: none;
}

.accordion-button:not(.collapsed) {
    box-shadow: none;
}

/* opzionale ma consigliato */
.accordion-button:focus-visible {
    box-shadow: none;
    outline: none;
}

.accordion-button::after {
    display: block;
    filter: invert(13%) sepia(99%) saturate(7486%) hue-rotate(0deg) brightness(85%) contrast(120%);
}