/* ---------------------------------- */
/* ---------- DEPENDENCIES ---------- */
/* ---------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');


/* ---------------------------------- */
/* --------- GLOBAL STYLES ---------- */
/* ---------------------------------- */

/* Palette -------------- */

.text-nero{
    color: #000;
}

.text-bianco{
    color: #fff;
}

.text-giallo-63L{
    color: #C88C00;
}

.text-giallo-77L{
    color: #F5AF00;
}

.text-giallo-85L{
    color: #FFCD46;
}

.text-giallo-91L{
    color: #FFE190;
}

.text-arancione-48L{
    color: #C84100;
}

.text-arancione-60L{
    color: #F55F00;
}

.text-arancione-68L{
    color: #FF821E;
}

.text-arancione-80L{
    color: #FFB478;
}

.text-rosa-34L{
    color: #960073;
}

.text-rosa-62L{
    color: #F555BE;
}

.text-rosa-73L{
    color: #FF91BE;
}

.text-rosa-84L{
    color: #FDC2DA;
}

.text-viola-25L{
    color: #370FC3;
}

.text-viola-50L{
    color: #785FFF;
}

.text-viola-74L{
    color: #B4AFFF;
}

.text-viola-85L{
    color: #D2CFFF;
}

.background-nero{
    background-color: #000;
}

.background-bianco{
    background-color: #fff;
}

.background-giallo-63L{
    background-color: #C88C00;
}

.background-grigio-90L{
    background-color: #E1E1E2;
}


.background-grigio-95L{
    background-color: #F2F2F2;
}

.background-giallo-77L{
    background-color: #F5AF00;
}

.background-giallo-85L{
    background-color: #FFCD46;
}

.background-giallo-91L{
    background-color: #FFE190;
}

.background-arancione-48L{
    background-color: #C84100;
}

.background-arancione-60L{
    background-color: #F55F00;
}

.background-arancione-68L{
    background-color: #FF821E;
}

.background-arancione-80L{
    background-color: #FFB478;
}

.background-rosa-34L{
    background-color: #960073;
}

.background-rosa-62L{
    background-color: #F555BE;
}

.background-rosa-73L{
    background-color: #FF91BE;
}

.background-rosa-84L{
    background-color: #FDC2DA;
}

.background-viola-25L{
    background-color: #370FC3;
}

.background-viola-50L{
    background-color: #785FFF;
}

.background-viola-74L{
    background-color: #B4AFFF;
}

.background-viola-85L{
    background-color: #D2CFFF;
}

.background-nero{
    background-color: #000;
}

.background-bianco{
    background-color: #fff;
}

.border-solid{
    border-style: solid;
}

.border-nero{
    border-color: #000;
}

.border-bianco{
    border-color: #fff;
}

.border-giallo-63L{
    border-color: #C88C00;
}

.border-giallo-77L{
    border-color: #F5AF00;
}

.border-giallo-85L{
    border-color: #FFCD46;
}

.border-giallo-91L{
    border-color: #FFE190;
}

.border-arancione-48L{
    border-color: #C84100;
}

.border-arancione-60L{
    border-color: #F55F00;
}

.border-arancione-68L{
    border-color: #FF821E;
}

.border-arancione-80L{
    border-color: #FFB478;
}

.border-rosa-34L{
    border-color: #960073;
}

.border-rosa-62L{
    border-color: #F555BE;
}

.border-rosa-73L{
    border-color: #FF91BE;
}

.border-rosa-84L{
    border-color: #FDC2DA;
}

.border-viola-25L{
    border-color: #370FC3;
}

.border-viola-50L{
    border-color: #785FFF;
}

.border-viola-74L{
    border-color: #B4AFFF;
}

.border-viola-85L{
    border-color: #D2CFFF;
}







.cyan {
    background-color: #7AF6F1;
}

.light-cyan {
    background-color: #F1FEFD;
}

.grey {
    background-color: #EEEEEE;
}
.white {
    background-color: #ffffff;
}


/* End of Palette ------- */


/* Typography ----------- */

html {
  font-size: 18px;
}

body {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
    font-size: 1rem;
}

h1 {
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: italic;
    font-variation-settings: "wdth" 100;
    font-size: 3rem;
    line-height: 128%;
    letter-spacing: 0.64px;
}

h2 {
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: italic;
    font-variation-settings: "wdth" 100;
    font-size: 2.5rem;
    line-height: 128%;
    letter-spacing: 0.64px;
}

h3 {
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: italic;
    font-variation-settings: "wdth" 100;
    font-size: 2.25rem;
    line-height: 128%;
    letter-spacing: 0.64px;
}

h4 {
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: italic;
    font-variation-settings: "wdth" 100;
    font-size: 2rem;
    line-height: 128%;
    letter-spacing: 0.5px;
}

h4.glyph-label {
    font-size: 2.0rem;
    font-weight: 400;
    text-align: center;
}

h5 {
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: italic;
    font-variation-settings: "wdth" 100;
    font-size: 1.75rem;
    line-height: 128%;
    letter-spacing: 0.5px;
}

h6 {
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: italic;
    font-variation-settings: "wdth" 100;
    font-size: 1.5rem;
    line-height: 128%;
}

.text-titil {
    font-family: 'Titillium Web', sans-serif !important; 
    font-weight: 400 !important;
    font-style: normal !important;
}

.text-titil-italic {
    font-family: 'Titillium Web', sans-serif !important; 
    font-weight: 400 !important;
    font-style: italic !important;
}

.text-merri {
    font-family: "Merriweather", serif !important;
    font-weight: 400 !important;
    font-style: italic !important;
}

.text-merri-black {
    font-family: "Merriweather", serif !important;
    font-weight: 900 !important;
    font-style: italic !important;
}

.text-huge {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
}

.text-huge-highlight {
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: italic;
    font-variation-settings: "wdth" 100;
    font-size: 1.5rem;
}

.text-big {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
    font-size: 1.25rem;
}

.text-big-highlight {
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: italic;
    font-variation-settings: "wdth" 100;
    font-size: 1.25rem;
}

.text-medium {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
    font-size: 1rem;
}

.text-medium-highlight {
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: italic;
    font-variation-settings: "wdth" 100;
    font-size: 1rem;
}

.text-small {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
    font-size: 0.75rem;
}

.text-small-highlight {
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: italic;
    font-variation-settings: "wdth" 100;
    font-size: 0.75rem;
}

.caption-small {
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 0.75rem;
}

.caption-small-highlight {
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: italic;
    font-variation-settings: "wdth" 100;
    font-size: 0.75rem;
}

.tag-label-big {
    font-weight: 700;
    font-style: normal;
    font-size: 1.5rem;
    font-variant-caps: titling-caps;
}

.tag-label-small {
    font-weight: 700;
    font-style: normal;
    font-size: 0.75rem;
    font-variant-caps: titling-caps;
}

.key-point {
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 2rem;
}

.quote-huge {
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 1.75rem;
}

.quote-big {
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 1.5rem;
}

/* End of Typography ---- */

/* UI Elements ---------- */

.navbar {
    max-height:6rem;
    border-bottom: 2px solid;
}

.navbar-brand svg {
    max-height: 4rem;
}

a.round-black-button {
    display: inline-block;
    padding: 8px 20px;
    text-align: center;
    text-decoration: none;
    background-color: #000000;
    /* Set the background color */
    color: #fff;
    /* Set the text color */
    border-radius: 50px;
    /* Set the border-radius for rounded corners */
    transition: background-color 0.3s ease;
    /* Add a smooth transition effect */
}

a.round-black-button:hover {
    box-shadow: 0px 0px 5px 1px grey;

}

.round-gray-button {
    margin-right: 5px;
    margin-top: 10px;
    display: inline-block;
    padding: 4px 14px;
    text-align: center;
    text-decoration: none;
    background-color: #ffffff;
    /* Set the background color */
    color: #000000;
    /* Set the text color */
    border-radius: 50px;
    /* Set the border-radius for rounded corners */
    transition: background-color 0.3s ease;
    /* Add a smooth transition effect */
}

input.checkbox-to-hide {
    display: none;
}

.round-gray-button.active {
    background-color: #7AF6F1;
    color: #000000
        /* Set the background color when checkbox is checked */
}

#myTopnav {
    background-color: #fff;
}

.form-section-label {
    float: none;
}

.glyph-card {
    background-color: #fff;

}

.dowload-button {
    font-size: 14px;
    border: none;
    margin-right: 5px;
    margin-top: 10px;
    display: inline-block;
    padding: 4px 14px;
    text-align: center;
    text-decoration: none;
    background-color: #7AF6F1;
    /* Set the background color */
    color: #000000;
    /* Set the text color */
    border-radius: 50px;
    /* Set the border-radius for rounded corners */
    transition: background-color 0.3s ease;
    /* Add a smooth transition effect */
}

.nav-link {
    color: #000000;
}

.active {
    text-decoration: underline;
    color: #000000;
}

/* End of UI Elements --- */


/* Decorations ---------- */

.background-pass-grid {
  background-image: url("../assets/images/griglia_pass_60u.svg");
  background-repeat: repeat;
  background-size: 30rem;
}

/* End of Decorations ---------- */

/* ---------------------------------- */
/* ------ PAGE-SPECIFIC STYLES ------ */
/* ---------------------------------- */


/* HOME PAGE */
#PASS-descrizione {
    display: flex;
    padding: 120px 160px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#Picture-Augmentative-Synsemic-System {
    padding: 120px 160px 60px 160px;
    gap: 10px;
}

#Obiettivi-del-progetto{
    padding: 60px 160px 120px 160px;
    gap: 10px;

}

.cta-card {
    display: flex;
    padding: 80px 258px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}