/*
Theme Name: Vignola Alan
Author: Alan Vignola
Author URI: https://www.vignolaalan.it
Version: 1.0
Text Domain: jv-ecospurghi
*/

/* WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
  }

  .aligncenter,
  div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
  }

  .alignright {
    float:right;
    margin: 5px 0 20px 20px;
  }

  .alignleft {
    float: left;
    margin: 5px 20px 20px 0;
  }

  a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
  }

  a img.alignnone {
    margin: 5px 20px 20px 0;
  }

  a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
  }

  a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
  }

  .wp-caption.alignnone {
    margin: 5px 20px 20px 0;
  }

  .wp-caption.alignleft {
    margin: 5px 20px 20px 0;
  }

  .wp-caption.alignright {
    margin: 5px 0 20px 20px;
  }

  .wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
  }

  .wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
  }

  /* Text meant only for screen readers. */
  .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
  }

  .screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
    /* Above WP toolbar. */
  }


  /* fine settingsn di wp

/* montserrat-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/montserrat-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-600 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('/fonts/montserrat-v26-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/montserrat-v26-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  :root {
    --maincolor: #3399ff;
    --titlecolor: #3399ff;
    --pcolor: #212121;
    --backcolor: #f8f5f5;
    --white: #ffffff;
    --hover: #13cf35;
    --highlight-color: #93CD19;
    --footer-color: #f1f1f1;
  }

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.clearer {
    clear: both;
}

img{
    max-width: 100%;
    height: auto;
}

input,
select,
textarea,
body{
    font-family: 'Montserrat', sans-serif;
}

.content {
    width: 1160px;
    margin: 0 auto;
}


.divider {
    padding: 20px 0;
}

.spacer {
    padding: 50px 0;
}

.center {
    text-align: center;
}

.responsive {
    width: 100%;
    height: auto;
}

/* Grid system*/

.col-1 {
    width: 8.33333%;
}

.col-2 {
    width: 16.66666%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33333%;
}

.col-6 {
    width: 50%;
}

.col-8 {
    width: 66.66666%;
}

.col-10 {
    width: 83.33333%;
}

/* ANIMATE CSS */
.hidden {
    opacity: 0;
}

.visible {
    opacity: 1;
}

html {
    scroll-behavior: smooth;
}

/******************************** tipografia *****************************************/

h1 {
    font-size: 13px;
    color: var(--titlecolor);
    font-weight: 700;
}

h2 {
    font-size: 12px;
    color: var(--titlecolor);
    font-weight: 700;
}

h3 {
    font-size: 11px;
    color: var(--titlecolor);
    font-weight: 700;
}

h4 {
    font-size: 10px;
    color: var(--titlecolor);
    font-weight: 600;
}

h5 {
    font-size: 10px;
    color: var(--titlecolor);
    font-weight: 400;
}

h6 {
    font-size: 10px;
    color: var(--titlecolor);
    font-weight: 400;
}

p {
    font-size: 10px;
    color: var(--pcolor);
    font-weight: 400;
}


/* Classe per i titoli */
.title {
    font-weight: 700; /* Grassetto per tutti i titoli */
    line-height: 1.2;
    margin: 20px 0;
    color: var(--maincolor); /* Usa il colore principale del sito */
}

/* Imposta la dimensione di base per i titoli */
.title {
    font-size: 2.5rem;
}

/* Personalizza h2 per una dimensione maggiore */
.title.uk-heading-line {
    font-size: 3rem;
    text-align: center;
}

/* Personalizza h3 per una dimensione inferiore */
.title.h3 {
    font-size: 2rem;
}

/* Media query per dispositivi mobili */
@media (max-width: 768px) {
    .title {
        font-size: 1.8rem;
    }

    .title.uk-heading-line {
        font-size: 2.5rem;
    }

    .title.h3 {
        font-size: 1.6rem;
    }
}

@media (max-width: 480px) {
    .title {
        font-size: 1.6rem;
    }

    .title.uk-heading-line {
        font-size: 2rem;
    }

    .title.h3 {
        font-size: 1.4rem;
    }
}

/* Classe base per i titoli */
.title {
    font-weight: 700; /* Grassetto per tutti i titoli */
    line-height: 1.2;
    margin: 20px 0;
    color: var(--maincolor); /* Usa il colore principale del sito */
}

/* Titoli principali (h2 con classi di tipo heading line) */
.title-primary {
    font-size: 3rem;
}

.title-primary.uk-heading-line {
    border-top: 2px solid var(--maincolor);
    padding-top: 20px;
}

/* Titoli secondari (h3, h4, ecc.) */
.title-secondary {
    font-size: 2.5rem;
    color: var(--maincolor); /* Puoi personalizzare il colore */
}

/* Titoli terziari (h5, h6 o per sottotitoli) */
.title-tertiary {
    font-size: 2rem;
    color: var(--secondary-color); /* Colore secondario per i titoli terziari */
}

/* Media query per dispositivi mobili */
@media (max-width: 768px) {
    .title {
        font-size: 1.8rem;
    }

    .title-primary {
        font-size: 2.5rem;
    }

    .title-secondary {
        font-size: 2rem;
    }

    .title-tertiary {
        font-size: 1.6rem;
    }
}

@media (max-width: 480px) {
    .title {
        font-size: 1.6rem;
    }

    .title-primary {
        font-size: 2rem;
    }

    .title-secondary {
        font-size: 1.8rem;
    }

    .title-tertiary {
        font-size: 1.4rem;
    }
}


/* Classe base per i paragrafi */
.text {
    font-size: 1.2rem;
    line-height: 1.6;
    margin: 15px 0;
    color: var(--text-color); /* Colore principale del testo, personalizzabile */
}

.text-excerpt {
  font-size: 14px;
}

/* Media query per dispositivi mobili */
@media (max-width: 768px) {
    .text {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .text {
        font-size: 0.5rem;
    }
}


.wpcf7-list-item-label {
  font-size: 16px;
}




/* Global style*/

/******************************** HEADER *****************************************/


/*  l'abbiamo risolta in header.php tramite la funzione
.logged-in .header {
    top: 32px;
} */


.header {
    height: 90px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99998;
    transition: .7s;
    display: flex;
    align-items: center;
    justify-content: space-around;
    /* background-color: rgba(0, 0, 0, .25); */
}

.top-scroll {
    height: 70px;
    background-color: rgba(0, 0, 0, .50);
    box-shadow:  1px 1px 6px  var(--maincolor);
    width: 100%;
    transition: .7s;
}

header {
    width: 100%;
    transition: .7s;
}

header .header img {
    box-shadow: none;
}

.header ul li {
    list-style-type: none;
    margin: 0 10px;
    padding: 10px;
    color: var(--pcolor);
    transition: all .4s;
}

.header ul li:hover {
    transform: translatey(-5px);

}

.header ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header a {
    text-decoration: none;
    color: var(--white);
    transition: .4s;
    padding: 10px;
    font-size: 20px;
    text-transform: uppercase;
}

.header a:hover {
    color: var(--maincolor);
}

/* .main-button {
    background-color: rgba(0, 0, 0, .3);
    border-radius: 25px;
    box-shadow: 1px 1px 4px var(--maincolor);
    padding: 10px 15px;
    transition: .4s ease-in-out;
    opacity: 0;
    animation: slideRight 2s ease forwards;
}

.main-button:hover {
    transform: scale(1.1);
    box-shadow: 2px 2px 6px 6px var(--maincolor);
} */

.icon-custom {
  padding: 10px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: var(--maincolor);
  margin-right: 10px;
}

.icon-custom:hover {
  padding: 10px;
  border: 1px solid var(--maincolor);
  border-radius: 50%;
  background: #fff;
  margin-right: 10px;
}

.icon-navbar-container {
  display: block;
}

@media (max-width: 500px) {
  .icon-navbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .icon-custom {
    padding: 5px;
  }

  .icons {
    flex: 1;
    text-align: center;
  }

  .navbar {
    margin-left: auto;
  }
}


.icon-bar {
    width: 18px;
    height: 2px;
    background-color: #fff;
    cursor: pointer;
    display: block;
    margin: 5px;
}

.navbar {
    display: none;
    cursor: pointer;
}

.logo {
    opacity: 0;
    animation: slideRight 1s ease forwards;
}

@keyframes slideRight {
    0% {
        opacity: 0;
        transform: translateX(-100px);

    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

nav .menu li a{
    transition: .3s;
    opacity: 0;
    animation: slideTop .5s ease forwards;
    animation-delay: calc(.3s * var(--i));
}

.current-menu-item > a {
    color: var(--maincolor);
}

@keyframes slideTop {
    0% {
        transform: translatex(100px);
        opacity: 0;
    }
    100% {
        transform: translatex(0);
        opacity: 1;
    }
}

.float {
    opacity: 0;
   animation: zoomIn 1s ease forwards;  /* , floatImg 2s ease-in-out infinite; */
    animation-delay: 2s;
}

@keyframes zoomIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* @keyframes floatImg {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }

    100% {
        transform: translateY(0);
    }
} */

address, dl, fieldset, figure, ol, p, pre, ul {
    margin: 0;
}

/* Desktop version */
.uk-visible@m {
    font-size: 18px; /* Impostiamo una dimensione di font più grande per il desktop */
}

/* Mobile version */
.mobile-button {
    width: 100%; /* Il bottone occupa il 100% della larghezza nel mobile */
    font-size: 14px; /* Testo più piccolo su dispositivi mobili */
    padding: 10px; /* Più padding per il mobile per migliorare l'aspetto */
    position: fixed; /* Fisso in basso */
    bottom: 10px; /* Distanza dal basso */
    left: 0; /* Allineamento a sinistra */
    right: 0; /* Allineamento a destra */
}

/* Versione mobile: adatta l'altezza e la larghezza per migliorare la leggibilità */
.uk-visible@s {
    font-size: 14px; /* Impostiamo una dimensione di font più piccola per il mobile */
    text-align: center; /* Centro il testo per mobile */
    padding: 12px; /* Aggiungi più padding per una visibilità migliore */
}


/******************************** hero
*****************************************/
/* Sezione Hero */
.hero {
    background:
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), /* Overlay nero semitrasparente */
        url('img/Spurghi-a-Pordenone-e-dintorni-JV-Ecospurghi.jpeg'); /* Immagine di sfondo */
    background-size: cover; /* L'immagine copre tutta l'area */
    background-position: center center; /* Centra l'immagine */
    background-repeat: no-repeat; /* Evita la ripetizione */
    height: 100vh; /* Altezza della sezione Hero */
    width: 100%; /* Larghezza completa */
    position: relative; /* Necessario per posizionamenti relativi */
    color: #ffffff;
}

/* Stile per il contenuto all'interno della Hero */
.hero .content {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    z-index: 2;
    padding: 20px;
    max-width: 600px;
    text-align: left;
}

/* Titoli e testo */
.hero h1 {
    font-size: 3rem;
    margin-bottom: 10px;
}

.hero h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Media Queries per schermi piccoli */
@media (max-width: 768px) {
    /* Allineamento e dimensioni per schermi più piccoli */
    .hero .content {
        left: 5%;
        text-align: center;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero h2 {
        font-size: 1.8rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .uk-position-fixed.uk-position-bottom-right {
        right: 15px;
        bottom: 15px;
        padding: 10px 14px;
    }
}

/* Gestione della posizione dell'immagine nelle slides */

/* Stili aggiuntivi per la visualizzazione e interazione */

.uk-link.uk-button.uk-border-rounded {
    background-color: #fff;
    color: var(--maincolor);
    padding: 12px 18px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    border-radius: 50%;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.uk-link.uk-button.uk-border-rounded .uk-icon {
    color: var(--maincolor);
}

.uk-link.uk-button.uk-border-rounded .uk-visible@s {
    display: inline-block;
    margin-left: 8px;
}



/* Main Button */
.main-button {
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    color: var(--white);
    background-color: var(--maincolor); /* Usa il colore principale del tuo progetto */
    border: 2px solid var(--maincolor);
    border-radius: 30px; /* Angoli arrotondati */
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.main-button:hover {
    background-color: var(--white); /* Sfondo bianco al passaggio */
    color: var(--maincolor); /* Colore del testo uguale al colore principale */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px); /* Solleva il pulsante */
}

/* Inverse Button */
.inverse-button {
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    color: var(--maincolor); /* Colore principale per il testo */
    background-color: var(--white); /* Sfondo bianco */
    border: 2px solid var(--maincolor); /* Bordo con il colore principale */
    border-radius: 30px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.inverse-button:hover {
    background-color: var(--maincolor); /* Sfondo colore principale */
    color: var(--white); /* Colore del testo bianco */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px); /* Solleva il pulsante */
}




/* Additional slides can follow */

/******************************** services *****************************************/

.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid transparent;
    padding: 30px;
    text-align: center;
}

.service-card:hover {
    transform: translateY(-5px); /* Solleva la card */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Ombreggiatura visibile */
    border-color: var(--maincolor); /* Aggiungi il bordo colorato al passaggio del mouse */
}

.service-card .uk-icon {
    margin-bottom: 15px;
    color: var(--maincolor); /* Colore dell'icona */
}

.service-card h3 {
    font-size: 18px;
    color: var(--maincolor);
    font-weight: bold;
}

.uk-section {
    background-color: #f7f7f7; /* Colore di sfondo per la sezione */
}

.service-card a {
    display: block; /* Assicura che l'intera card sia cliccabile */
    text-decoration: none; /* Rimuove la sottolineatura del link */
}

.service-card:hover {
    text-decoration: none; /* Rimuove la sottolineatura durante l'hover */
}

/* Aggiungi la transizione alla card */
.service-card {
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Transizione di ingrandimento e ombra */
}

.service-card:hover {
    transform: scale(1.05); /* Aumenta la dimensione della card quando l'utente ci passa sopra */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Aggiungi un'ombra morbida per l'effetto di "elevazione" */
}

.service-card .uk-icon {
    transition: transform 0.2s ease; /* Transizione per l'icona */
}

.service-card:hover .uk-icon {
    transform: scale(1.2); /* Ingrandisce l'icona durante il passaggio del mouse */
}

.service-card h3 {
    transition: color 0.2s ease; /* Transizione per il titolo */
}

.service-card:hover h3 {
    color: var(--highlight-color); /* Cambia il colore del titolo al passaggio del mouse */
}

.service-card {
    background-color: #f9f9f9; /* Colore di sfondo chiaro */
    border-radius: 8px; /* Angoli arrotondati */
    border: 2px solid #eee; /* Bordo sottile per la card */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombra leggera per la card */
}

.service-card:hover {
    border-color: var(--highlight-color); /* Cambia il colore del bordo al passaggio del mouse */
    background-color: #fff; /* Aggiungi un leggero cambiamento di sfondo al passaggio del mouse */
}


/* .custom-section {
    position: relative;
    min-height: 300px;
    background-color: #f7f7f7;
}

.custom-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.1));
    animation: shimmer 2s infinite linear;
    z-index: -1;
    transform: translateY(-50%);
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
} */
/******************************** grid *****************************************/


.uk-divider-icon {
  background-color: transparent;
}


.uk-card {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition:  0.3s ease;
}

.uk-card:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.uk-border-circle {
    width: 120px;
    height: 120px;
    object-fit: cover;
}

.uk-heading-line span {
    background-color: var(--maincolor);
    padding: 0 10px;
}
/******************************** portfolio *****************************************/

/* Aggiungi un po' di stile per lo slider */
.image-slider img {
    object-fit: cover;
}

/* Aggiungi un po' di spazio per l'area slider */
.image-slider {
    position: relative;
    overflow: hidden;
}

/* Se vuoi aggiungere un po' di ombra alle immagini */
.image-slider img {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.about-us {
    background: var(--white);
}

.section-about {
    padding: 20px;
}

.about-us h2 {
    font-weight: bold;
    margin-bottom: 20px;
    color: var(--maincolor);
    transition: color 0.3s ease;
}

.about-us h2:hover {
    color: var(--highlight-color); /* Cambia il colore del titolo al passaggio del mouse */
}

.about-us .title-secondary {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

.about-us .title-secondary:hover {
    transform: scale(1.05); /* Leggera animazione al passaggio del mouse */
}

.about-us .text {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    transition: color 0.3s ease;
}

.about-us .text:hover {
    color: var(--maincolor); /* Cambia colore del testo quando l'utente ci passa sopra */
}

.uk-grid-small {
    margin-bottom: 30px;
}

.uk-grid-small .uk-grid-item {
    position: relative;
}

/* Effetto hover per l'immagine */
.about-us img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px;
}

.about-us img:hover {
    transform: scale(1.05); /* Zoom dell'immagine */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Ombra durante hover */
}

.about-us .uk-align-center {
    text-align: center;
}

/* Animazione al caricamento */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.about-us .uk-grid {
    animation: fadeInUp 1s ease-out;
}

/* Creazione di un bordo animato sulla sezione */
/* .about-us::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--maincolor);
    animation: slideIn 1.5s ease-out ;
}

@keyframes slideIn {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
} */


/******************************** footer *****************************************/



.footer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

footer {
    background: ;
}

/* .circle1 {
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--maincolor);
    border-radius: 50%;
    /* animation: load 3s infinite; */


footer img {
    box-shadow: none;
    animation: load 5s infinite;
}

@keyframes load {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }


}

.contact {
    color: var(--pcolor);
    border-left: 1px solid var(--maincolor);
    padding-left: 25px;
}

.contact h4 {
    font-size: 2rem;
    color: var(--titlecolor);
    font-weight: 700;
}

.contact p {
    font-size: 1rem;
    color: var(--pcolor);
    font-weight: 400;
}

.contact a {
    margin: 10px;
    display: block;
    text-decoration: none;
    transition: .5s;
    color: var(--pcolor);
}

.contact a:hover {
    transform: translatey(-5px);
    color: var(--maincolor);
}

.icon {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}

.icon .fa-brands {
    color: #fff;
    transition: .5s;
    font-size: 24px;
    box-shadow: 2px 2px 12px var(--maincolor);
}

.icon .fa-brands:hover {
    color: #40A2E3;
    transform: translateY(-5px);

}

footer .divider {
    border-bottom: 1px solid var(--maincolor);
}

footer .center p {
    padding: 25px;
    color: var(--pcolor);
    font-size: 1rem;
}

/******************************** Pagina servizio *****************************************/




/******************************** Pagina formazione *****************************************/

/* .formazione {
    height: 50vh;
    width: 100%;
    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url(./img/alan-attestato-veneto-dormazione.png) center center no-repeat;
    background-size: cover;
    box-shadow: 2px 2px 12px #000;

}

.flex-formazione {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 50vh;
}

.flex-formazione h1 {
    color: var(--titlecolor);
    font-weight: 700;
    font-size: 4rem;
}
 */
.breadcrumbs a {
    text-decoration: none;
    color: var(--pcolor);
    font-size: 22px;
    transition: all .5s;
}

.breadcrumbs a:hover {
   color: var(--white);
}

.breadcrumbs span {
    color: var(--white);
    font-size: 22px;
    font-weight: 400;
}
/*

.percorso h2 {
    font-size: 2.5rem;
}

.flex-story {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}


.card-story {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 20px;
}

.card-story-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
    padding: 20px;
}

.line {
    border-left: 1px solid var(--maincolor);
}

.card-story p,
.card-story-left p {
    margin: 20px 0;
    font-size: 20px;
    color: var(--white);
}

.card-story p span {
    color: var(--maincolor);
    font-weight: 600;
}

.attestati h3 {
    font-size: 2.5rem;
}
 */

/******************************** Pagina PORTFOLIO *****************************************/

/* .hero-portfolio {
    height: 50vh;
    width: 100%;
    background-color: var(--pcolor);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 12px #000;

}

.portfolio h2 {
    font-size: 2.5rem;
    font-weight: 700;
}
 */

/******************************** Pagina CONTACT *****************************************/

/* .hero-contact {
    height: 50vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--pcolor);
    box-shadow: 2px 2px 12px #000;
}

.flex-contact {
    display: flex;
}

.form {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    box-shadow: 2px 2px 6px var(--maincolor);
    border-radius: 25px;
    margin-left: 10px;
}

.info {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    box-shadow: 2px 2px 6px var(--maincolor);
    border-radius: 25px;
    margin-right: 10px;
    gap: 20px;
}

.info h2 {
    font-size: 2.5rem;
}

.info a {
    text-decoration: none;
    color: var(--maincolor);
    transition: all .5s;
    font-size: 22px;
}

.info a:hover {
    transform: translateY(-5px);
    color: var(--white);
}

.form label {
    display: block;
    color: var(--white);
    margin: 10px 0;
}

.form input[type=text],
.form input[type=email],
.form input[type=tel],
.form textarea {
    background-color: transparent;
    padding: 10px;
    border: none;
    box-shadow: 2px 2px 6px var(--maincolor);
    color: var(--white);
    border-radius: 20px;
}

.form input[type=checkbox] {
    color: var(--white);
    margin: 10px 0;
}

.form input[type=submit] {
    display: block;
    border: none;
    color: var(--white);
    margin-top: 15px;
    cursor: pointer;
}


.form input[type=submit]:hover {
    color: var(--maincolor);
}

.form input[type=text]:focus {
    border: var(--maincolor);
}


.form h2 {
    font-size: 2.5rem;
}

.form span {
    color: var(--white);
}

.form a {
    text-decoration: none;
    color: var(--maincolor);
    transition: all .5s;
}

.form a:hover {
    color: var(--white);
} */

/******************************** Pagina SERVIZI *****************************************/

.hero-services {
    height: 45vh;
    width: 100%;
    background-color: var(--maincolor);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 12px #000;
}
.hero-services h1 {
    font-size: 3rem;
    color: var(--backcolor);
}

.servizio-thumbnail img {
    width: 100%;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .typography h2 {
        padding: 15px 0;
        font-weight: 700;
        font-size: 38px;
        color: var(--maincolor);
    }

    .typography h3 {
        padding: 15px 0;
        font-weight: 700;
        font-size: 30px;
        color: #FF9843;
    }


    .typography h4 {
        padding: 15px 0;
        font-size: 24px;
        font-weight: 400;
        color: var(--maincolor);
    }

    .typography h5 {
        padding: 15px 0;
        font-size: 20px;
        font-weight: 400;
        color: var(--maincolor);
    }

    .typography h6 {
        padding: 15px 0;
        font-size: 18px;
        font-weight: 400;
        color: var(--maincolor);
    }

    strong {
        font-weight: 700;
        padding: 15px 0;
    }

    .typography p {
        font-size: 22px;
        color: var(--pcolor);
        font-weight: 400;
        padding: 15px 0;
    }

    .typography p a {
        color: #FF9843;
        transition: all .4s;
    }

    .typography p a:hover {
        color: #000;
    }

    .typography {
      padding: 20px 0
    }

/*
.flex-servizi {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    gap: 20px;
    padding: 30px;
}


.flex-servizi h2 {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
}

.flex-servizi p {
    font-size: 1.6rem;
    color: var(--white);
    font-weight: 400;
    text-align: center;
    margin: 0 50px;
    margin-bottom: 10px;
}

.flex-servizi a {
    text-decoration: none;
    color: var(--white);
    text-transform: uppercase;
    text-align: center;
}

.flex-servizi a:hover {
    color: var(--maincolor);
}

.flex-servizi span {
    color: var(--maincolor);
}

.flex-card-servizi {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}


.card-servizi {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 15px;
    border-radius: 20px;
    box-shadow: 2px 2px 12px #000;
    padding: 20px;
}


.card-servizi h3 a {
    text-decoration: none;
    font-size: 2rem;
    color: var(--maincolor);
    transition: all .3s;
    padding: 20px;
}

.card-servizi h3 a {
    transform: translateY(-5px);
    color: var(--white);
}

.card-servizi p {
    color: var(--white);
    font-size: 1.2rem;
    text-align:center;
    padding: 0 15px;
}

.card-servizi  a {
    text-decoration: none;
    color: var(--white);
    font-size: 20px;
    text-transform: uppercase;
    transition: all .3s;
}

.card-servizi  a:hover {
    transform: translateY(-5px);
    color: var(--maincolor);
}

.separatore {
    text-align: center;
    height: 1px;
    width: 80%;
    margin: 15px 10%;
    background-color: var(--maincolor);
}

.grid-servizi {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr ;
    grid-auto-rows: auto;
    /* grid-template-rows: repeat(6, 100px); */
/*}

.grid-card {
    padding: 20px;

}

.first {
    grid-column: 1;
    grid-row: 1 / 3;
    border-radius: 20px;
    box-shadow: 2px 2px 12px #000;

}

.second {
    grid-column: 2;
    grid-row: 2 / 4;
    border-radius: 20px;
    box-shadow: 2px 2px 12px var(--maincolor);

}

.third {
    grid-column: 3;
    grid-row: 3 / 5;
    border-radius: 20px;
    box-shadow: 2px 2px 12px #000;

}

.four {
    grid-column: 4;
    grid-row: 4 / 6;
    border-radius: 20px;
    box-shadow: 2px 2px 12px var(--maincolor);

}

.grid-card p {
    color: var(--white);
    font-size: 1rem;
    margin: 7px 0;
}

.grid-card h4 {
    font-size: 1.3rem;
} */

/******************* 404 ***************/

.error {
    height: 70vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    box-shadow: 2px 2px 12px #000;
}

.error p {
    color: var(--white);
    font-size: 1.2rem;
    text-transform: capitalize;
}

.error h1 {
    color: var(--maincolor);
    font-size: 4rem;
    font-weight: 700;
    text-transform: capitalize;
}


/* Break point*/
/* Dekstop, Ipad pro*/
@media only screen and (min-width: 1024px) and (max-width:1200px) {
    .content {
        margin: 0 2%;
        width: 96%;
    }
}

/* Tablet */
@media only screen and (max-width: 1024px) {
    .content {
        margin: 0 2%;
        width: 96%;
    }

    .hero {
        height: 60vh;
    }

    .flex-row {
        height: 60vh
    }

    .grid {
        grid-auto-rows: minmax(100px, auto) auto;
    }

    .description {
        grid-column: 1/4;
    }

    h1 {
        font-size: 38px;
    }

    .inner::before {
        height: 100px;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        font-size: 2rem;
    }

    .card-info {
        opacity: 1;
    }

    .info a {
        font-size: 16px;
    }

    /* .grid-servizi {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 15px;
    } */

    .grid-servizi {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
        /* grid-template-rows: repeat(6, 100px); */
        gap: 15px;
    }


    .first {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .second {
        grid-column: 2;
        grid-row: 2 / 4;
    }

    .third {
        grid-column: 1;
        grid-row: 3 / 5;
    }

    .four {
        grid-column: 2;
        grid-row: 4 / 6;
    }

        /* menu responsive */
/* Stile per il burger button */
/* Stile per il burger button */
/* Stile per il burger button */
.navbar {
    display: initial;
    position: absolute;
    top: 50%;
    right: 5%;
    z-index: 99999;
    transform: translate(-5%, -50%);
    border-radius: 20px;
    background-color: #000;
    box-shadow: 2px 2px 12px #000;
    padding: 5px 6px;
    transition: all .5s;
    margin-left: 5px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Aggiungi questo per centrare la X */
}

/* Barre del burger */
.icon-bar {
    width: 25px;
    height: 3px;
    background-color: #fff;
    display: block;
    margin: 3px auto;
    transition: all .3s ease;
}

/* Menu */
.menu {
    position: fixed;
    top: -100%; /* Menu nascosto sopra lo schermo */
    left: 0;
    width: 100%;
    background-color: rgba(34, 34, 34, 0.9);
    z-index: 99999;
    transition: all 0.5s ease;
    padding: 20px 0;
    box-shadow: 0px 4px 12px var(--maincolor);
    display: flex;
    flex-direction: column; /* Aggiungi questa riga per il layout in colonna */
    align-items: center; /* Allinea gli elementi al centro */
}

/* Menu visibile quando la classe "wide" è aggiunta */
.menu.wide {
    top: 0; /* Menu scende al suo posto */
}

/* Trasformazione del burger in "X" */
.navbar.open .icon-bar:nth-child(1) {
    transform: rotate(45deg); /* Prima barra ruota a 45° */
    position: absolute;
    top: 12px; /* Regoliamo il posizionamento della prima barra */
}

.navbar.open .icon-bar:nth-child(2) {
    opacity: 0; /* Nasconde la seconda barra */
}

.navbar.open .icon-bar:nth-child(3) {
    transform: rotate(-45deg); /* Terza barra ruota a -45° */
    position: absolute;
    top: 12px; /* Posizioniamo la terza barra per centrarla */
}
.open {
    padding: 10px 8px;
}

/* Menu Items */
.menu li a {
    display: block;
    text-align: center;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    padding: 10px;
    transition: color 0.3s ease;
    width: 100%; /* Assicura che i link occupino tutta la larghezza */
    text-transform: uppercase;
}

.menu li a:hover {
    color: var(--maincolor);
}




}

/* Smartphone */
@media only screen and (max-width: 768px)  {
    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-6,
    .col-8,
    .col-10 {
        width: 100%;
    }

    /* Prove del bottone */


    .grid figure {
        grid-column: 1/4;
    }

    h1 {
        font-size: 28px;
    }

    .flex__works {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }

    .header.header .main-button {
        margin-right: 45px;
    }


    .flex-row {
        gap: 20px;
    }

    .footer {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .icon {
        padding: 0 30px;
    }

    .flex-column {
        align-items: center;
        justify-content: center;
    }

    .flex-column p {
        margin: 0;
        padding: 20px;
        text-align: center;
    }

    .flex-column h1 {
        margin: 25px 0 0 0 ;
        padding: 0;
    }

    /* hero section*/
    .hero {
        height: 80vh;
    }

    .card {
        aspect-ratio: 1.5 / 2;
    }

    .skill h2,
    .hero h2 {
        font-size: 2.5rem;
        text-align: center;
    }

    .flex-column p {
        font-size: 2rem;
    }

    .hero p span {
        font-size: 16px;
        padding: 5px;
        margin: 5px;
    }

    .hero  span {
        font-size: 16px;
        padding: 5px 0;
        margin: 5px 0;
    }

   .hero  a {
        font-size: 20px;
    }


    .hero p {
        font-size: 16px;
        padding: 5px;
        margin: 5px;
    }

    .hero h2 {
        font-size: 18px;
        padding: 5px;
        margin: 5px;
    }

    .flex-services {
        flex-direction: column;
        gap: 30px;
    }

    .header .main-button {
        padding: 7px 8px;
        font-size: 16px;
    }

    .flex-contact {
        flex-direction: column;
    }

    .form,
    .info {
        margin: 10px;
    }

    .flex-servizi p {
        margin: 0;
    }


    .grid-servizi {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        /* grid-template-rows: repeat(6, 100px); */
        gap: 20px;
    }


    .first {
        grid-column: 1;
        grid-row: auto;
    }

    .second {
        grid-column: 1;
        grid-row: auto;
    }

    .third {
        grid-column: 1;
        grid-row: auto;
    }

    .four {
        grid-column: 1;
        grid-row: auto;
    }

}

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