/* ============================
   GOOGLE FONTS IMPORT
   ============================ */

   @import url('https://fonts.googleapis.com');


@import url('https://fonts.googleapis.com/css2?family=Expletus+Sans:wght@400;500;600;700&family=Colaborate:wght@100;300;400;500;700&family=Exo:wght@400&display=swap');

@import url('https://cdn.jsdelivr.net/fontsource/fonts/expletus-sans@latest/latin-wght-normal.css');

body {
  font-family: 'Expletus Sans Variable', sans-serif;
}
@font-face {
    font-family: 'Poppins';
    src: local('Colaborate'); /* Forza l'uso di Arial localmente */
    font-weight: normal;
    font-style: normal;
}

.strisciaTxt{
  color: white;
  background: none;
  font-family: "Exo";
  font-size: 1.2vw;
  font-weight: 500;
}
/* ============================
   ROOT VARIABLES
   ============================ */

:root {

  /* Font families */
  --colab: "Colaborate", sans-serif;
  --expbold: "Expletus Sans", sans-serif;
  --expreg: "Expletus Sans", sans-serif;
  --exo: "Exo", sans-serif;

  /* Background gradient */
  --bg-gradient: linear-gradient(
    180deg,
    #7ab9dd 0%,
    #bad4e4 20%,
    #fffef5 40%,
    #fffef5 60%,
    #9dc8e0 100%
  );

  /* Footer gradient */
  --ft-gradient: linear-gradient(
    90deg,
    rgba(118, 185, 222, 1) 0%,
    rgba(87, 173, 199, 0.83) 100%,
    rgba(237, 83, 139, 0.65) 50%
  );

  /* Button gradients */
  --btn-gradient: linear-gradient(to right, #0575e6 0%, #021b79 51%, #0575e6 100%);
  --btn-gradient2: linear-gradient(180deg, #0575e6 0%, #021b79 51%, #0575e6 100%);
  --btn-gradient3: linear-gradient(135deg, #0575e6 0%, #021b79 51%, #0575e6 100%);
  --btn-gradient4: linear-gradient(45deg, #0575e6 0%, #021b79 51%, #0575e6 100%);
  --btn-gradient5: linear-gradient(180deg, #0575e6 0%, #0436eb 70%, #0152a3 100%);

  --article: "";
}




/* @font-face {
  font-family: 'ExpletusSans';
  src: url('/font/expletus-sans/ExpletusSans-Bold.ttf') format('woff2');
  font-weight: normal;
  font-style: normal;
} */

@font-face {
  font-family: "ExpletusSansBold";
  src: url("/font/expletus-sans/ExpletusSans-Bold.ttf") format("ttf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "ExpletusSansBoldItalic";
    src: local('ExpletusSansBoldItalic'), url('/font/expletus-sans/ExpletusSans-BoldItalic.ttf') format('ttf');
  
  /* src: url("/font/expletus-sans/ExpletusSans-BoldItalic.ttf") format("ttf"); */
  
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'ExpletusSansBold-Italic';
    font-style: normal;
    font-weight: normal;
    src: local('ExpletusSans-BoldItalic'), url('/font/expletus-sans/ExpletusSans-BoldItalic.ttf') format('ttf');
    }


@font-face {
  font-family: "ExpletusSans-Regular";
  src: url("/font/expletus-sans/ExpletusSans-Regular.ttf") format("ttf");
  font-weight: normal;
  font-style: normal;
}

 @font-face {
    font-family: 'ExpletusSans-Italic';
    font-style: normal;
    font-weight: normal;
    src: local('ExpletusSans-Italic'), url('/font/expletus-sans/ExpletusSans-Italic.ttf') format('ttf');
    }

@font-face {
  font-family: "Colaborate";
  src: url("/Font/Colaborate/Colaborate-Light.woff2");
  font-weight: normal;
  font-style: normal;
}


    @font-face {
    font-family: 'Colaborate-Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Colaborate-Bold'), url('/Font/Colaborate/ColabBol.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Colaborate-Light';
    font-style: normal;
    font-weight: normal;
    src: local('Colaborate-Light'), url('/Font/Colaborate/ColabLig.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Colaborate-Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Colaborate-Medium'), url('/Font/Colaborate/ColabMed.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Colaborate-Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Colaborate-Regular'), url('/Font/Colaborate/ColabReg.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Colaborate-Thin';
    font-style: normal;
    font-weight: normal;
    src: local('Colaborate-Thin'), url('/Font/Colaborate/ColabThi.woff') format('woff');
    }

     @font-face {
    font-family: 'Exo';
    font-style: normal;
    font-weight: normal;
    src: local('Exo-Regular'), url('/Font/exo/Exo-Regular.otf') format('otf');
    }

  
  

:root{
    --colab : font-family: 'Colaborate-Bold';
}

:root{
    --expbold: font-family: 'ExpletusSansBold';

}

:root{
    --expreg: font-family: 'ExpletusSansBold';
    
}

:root{
--bg-gradient: linear-gradient(180deg,#7ab9dd 0%, #bad4e4 20%, #ccd9dc  40% , #ccd9dc 60%,  #9dc8e0  100%);
}
:root{
--bg-gradient2: linear-gradient(180deg,#5d89a2 0%, #9fc2d7 20%, #ccd9dc  40% , #ccd9dc 60%,  #9dc8e0  100%);


--bg-gradient3: linear-gradient(180deg,#308dc3 0%, #82c7f4 20%, #95cad8  40% , #84d6ea 60%,  #b5ddf2  100%);

}
:root{
--ft-gradient: linear-gradient(90deg, rgba(118, 185, 222, 1) 0%, rgba(87, 173, 199, 0.83) 100%, rgba(237, 83, 139, 0.65) 50%);
}

:root{
--btn-gradient : linear-gradient(to right, #0575E6 0%, #021B79  51%, #0575E6  100%);
--btn-gradient2 : linear-gradient(180deg, #0575E6 0%, #021B79  51%, #0575E6  100%);
--btn-gradient3 : linear-gradient(135deg, #0575E6 0%, #021B79  51%, #0575E6  100%);
--btn-gradient4 : linear-gradient(45deg, #0575E6 0%, #021B79  51%, #0575E6  100%);
--btn-gradient5 : linear-gradient(180deg, #0575E6 0%, #0436eb  70%, #0152a3  100%);

}

:root{
    --article : 
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 2.5s ease-in; /* Durata 5s, transizione morbida */
}