body{
  font-family: "Spline Sans", sans-serif;
}


@media (max-width: 768px) {
   #main-menu{
    background-color: #fffdf4db
    
   }
};


h1{
     font-family: "Ojuju", sans-serif;
     font-weight: 600;
     margin-left: 30px;
   
}



#masthead{
    height: 120px;
    background-color: transparent;
}

.hero {
  display: flex;
  align-items: right;
  justify-content: end;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero-destra {
  display: flex;
  flex-direction: column;  /* impila immagine e bottone in verticale */
  align-items: flex-end;   /* li allinea a destra */
  gap: 30px;               /* spazio tra immagine e bottone */
  margin-top: 80px;
  margin-right: 60px;
  margin-bottom: 80px;
}

.hero .btn-primary {
  background-color: #2683C1 !important; /* il colore che vuoi */
  border: 2px #ABDAD5;
  
}

/*separatore*/

.img_hero2 {
  display: flex;
  flex-direction: column;  /* impila immagine e bottone in verticale */
  align-items: flex-start;   /* li allinea a destra */
  gap: 30px;               /* spazio tra immagine e bottone */
  margin-top: 80px;
  margin-right: 60px;
  margin-bottom: 80px;
 
  width: 1000px;
}

/*.img_hero2 {
    transition: transform 0.4s ease;
}

.img_hero2:hover {
    transform: scale(1.10);
}*/

.img_hero2 {
    transition: transform 0.4s ease;
}
.img_hero2:hover {
    transform: rotate(3deg) scale(1.05);
}

/*separatore*/

.intro-categorie {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}



a.nav-link{
    font-weight: 500;
}

/*separatore*/

li#menu{
    text-align: right;
}
/* Stile generale dei menu item */

li#menu{
    text-align: right;
}

li.menu-item {
    position: relative;
    align-items: end;
    justify-content: center;
    display: flex;
}

li.menu-item a.nav-link {
    color: #000000 !important;
}

li.menu-item a.nav-link:hover {
    color: #000000 !important;
}

li.menu-item:after {
    content: '';
    width: 100%;
    height: 5px;
    position: absolute;
    background-color: #000000;
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
}

li.menu-item:hover:after {
    opacity: 1;
}

li#menu-item-18:after { background-color: #2683C1; }
li#menu-item-19:after { background-color: #ABDAD5; }
li#menu-item-20:after { background-color: #D8DB8B; }
li#menu-item-21:after { background-color: #FACDDD; }
li#menu-item-22:after { background-color: #EF6654; }

/*separatore menu*/

.hero-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.img_home_1{
    height: 400px;
    width: 400px;
}


.img_specchio_introabout{
    transform:rotateY(180deg)
}

.intro-about{
    margin-top: 150px;
    margin-bottom: 150px;
}

.intro-about {
    opacity: 1;
    transition: transform 0.4s ease;
    transform: scale(1.08);
}
.intro-about:hover {
    opacity: 0.7;
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: scale(1.10);
}


/*separatore intro-categorie*/

.intro-categorie {
    margin-top: 0 !important;
}

.banner-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.banner-item {
    position: relative;
    display: inline-block;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    margin-bottom: 1.5rem;
}


.banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Ojuju', sans-serif;
    
    color: #2c2c2c;
    z-index: 10;
    white-space: nowrap;
    pointer-events: none;
}

.banner-img {
    display: block;
    transition: none;
}

.banner-link {
    text-decoration: none;
    display: block;
    pointer-events: auto;
}

.banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Ojuju', sans-serif;
    color: #2c2c2c;
    z-index: 10;
    white-space: nowrap;
    pointer-events: auto;
    transition: transform 0.4s ease;
    display: block;
}

.banner-link:hover .banner-text {
    transform: translate(-50%, calc(-50% - 10px));
}


/*separatore*/


.quote{
    display: flex;
    margin-top: 100px;
}

.quote {
    overflow: hidden;
}

.quote img {
    transition: transform 0.4s ease;
}

.quote:hover img {
    transform: scale(1.10);
}



/* =================================================================================================================*/
/*separatore ABOUT*/


.about {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.immagine_assets{
    background-size: cover;
    height: 600px;
}

.about-img {
  width: 600px;
  max-height: 600px;  /* limita l'altezza */
  object-fit: cover;  /* ritagli l'immagine senza deformarla */
  flex-shrink: 0;
  margin-top: 80px;
}


.software-icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
}


.interfaces-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url(https://2025galoppi.iftscnosfapbologna.it/portfolio/wp-content/uploads/2026/04/Group-42.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    min-height: 500px;
}

.software-icons-row {
    min-height: 500px;
}

.software-icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.about_img2 {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 700px;
}

.about_img2{
    height: auto;
    width: auto;
}

/*.aboutInner {
    position: relative;
    background-repeat: no-repeat;
    height: 800px;
}

.aboutInnerText {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}*/

.aboutInnerText {
  margin-left: auto;   /* spinge il blocco a destra */
  width: 50%;          
  display: flex;
  justify-content: flex-end;  /* spinge il contenuto figlio a destra */
}


.p-5{
    font-family:'https://fonts.googleapis.com/css2?family=Ojuju:wght@200..800&family=Spline+Sans:wght@300..700&display=swap';

}

/*QUESTE DUE CLASSI VANNO COPIATE E RIPETUTE PER TUTTE LE MEDIAQUERIES DEI BALOON*/
.cv-desktop {
    display: block;
}

.cv-mobile {
    display: none;
}


/*#cv1{
    background-image: url(https://2025galoppi.iftscnosfapbologna.it/portfolio/wp-content/uploads/2026/05/Vector-157-2-3.png);
    background-size: contain;
    min-height:30vh;
    background-repeat: no-repeat;
   position: relative;
    display: flex;
    align-items: center;
}*/

#cv2{
    background-image: url(https://2025galoppi.iftscnosfapbologna.it/portfolio/wp-content/uploads/2026/05/Vector-158-3.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

#cv3{
    background-image: url(https://2025galoppi.iftscnosfapbologna.it/portfolio/wp-content/uploads/2026/04/Vector-159.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

#cv4{
    background-image: url(https://2025galoppi.iftscnosfapbologna.it/portfolio/wp-content/uploads/2026/04/Vector-160.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

#cv5{
    background-image: url(https://2025galoppi.iftscnosfapbologna.it/portfolio/wp-content/uploads/2026/05/Vector-161.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

#cv6{
    background-image: url(https://2025galoppi.iftscnosfapbologna.it/portfolio/wp-content/uploads/2026/05/Vector-162.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

#cv7{
    background-image: url(https://2025galoppi.iftscnosfapbologna.it/portfolio/wp-content/uploads/2026/05/Vector-163.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

#cv8{
    background-image: url(https://2025galoppi.iftscnosfapbologna.it/portfolio/wp-content/uploads/2026/05/Vector-164.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

#cv9{
    background-image: url(https://2025galoppi.iftscnosfapbologna.it/portfolio/wp-content/uploads/2026/05/Vector-165.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

.cv-text {
    position: absolute;
    top: 0;
    left: 40px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 3rem;
    font-size: 0.85rem;
    line-height: 1.5;
    box-sizing: border-box;
}


@import url('https://fonts.googleapis.com/css2?family=Ojuju:wght@200..800&display=swap');

.cv-text strong {
    font-family: 'Ojuju', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    display: block;
    margin-bottom: 0.3rem;
}




.accordion-button{
    background-color: #FACDDD;
}
@media (max-width: 768px) {
    .interfaces-wrapper {
        min-height: 300px;
        padding: 2rem 0;
    }

    .software-icons-row {
        min-height: 300px;
    }
};


/*
.about{
    height: 100vh;
    width: 100vw;
    background-color: #ABDAD5;
    
}*/


/* =================================================================================================================*/
/*separatore LOOP PROGETTI home*/


.bg_pink{
    background-color: #FACDDD;
}

.categorie{
    background-color: #D8DB8B;
    max-height: fit-content;
    padding: 4rem;
}

.categorie img{
     height: fit-content;
}

.about{
    background-color: #ABDAD5;
    /*padding: 4rem;*/
    max-height: max-content;
    align-items: center;
}

/* ============================================
   RESPONSIVE TABLET (max-width: 992px)
============================================ */
@media (max-width: 992px) {

    /* sezione about-img e testo */
    .aboutInner {
        flex-direction: column;
    }

    .about-img {
        width: 100%;
        max-width: 400px;
        height: auto;
        margin: 2rem auto;
    }

    .aboutInner .about-img,
    .aboutInner .aboutInnerText {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .aboutInnerText {
        width: 100%;
        margin-left: 0;
        text-align: center;
        justify-content: center;
        padding: 0 1.5rem;
    }

    .about-hero {
        padding-bottom: 150px;
    }

    /* forma rosa + icone software */
    .about_img2 {
        max-width: 450px;
    }

    .software-icon {
        width: 50px;
        height: 50px;
    }

    .software-icons-row {
        margin-bottom: -150px;
        gap: 0.5rem;
    }

    /* baloon curriculum */
    #cv1, #cv2, #cv3, #cv4, #cv5, #cv6, #cv7, #cv8, #cv9 {
        width: 100% !important;
    }

    .curriculum .d-flex.flex-column {
        align-items: center !important;
    }

    .cv-text {
        font-size: 0.8rem;
        padding: 1.5rem 2rem;
        left: 0;
    }
}



/* ============================================
   RESPONSIVE MOBILE (max-width: 576px)
============================================ */
@media (max-width: 576px) {

    .about-hero {
        padding-bottom: 80px;
    }

    .about-img {
        max-width: 100%;
    }

    .aboutInnerText {
        padding: 0 1rem;
    }

    /* forma rosa + icone software */
    .about_img2 {
        max-width: 260px;
    }

    .software-icon {
        width: 35px;
        height: 35px;
    }

    .software-icons-row {
        margin-bottom: -80px;
        gap: 0.3rem;
    }

    /* baloon curriculum */
    #cv1, #cv2, #cv3, #cv4, #cv5, #cv6, #cv7, #cv8, #cv9 {
        background-size: 100% auto;
        background-position: center;
    }

    .cv-text {
        font-size: 0.7rem;
        padding: 1rem 1.2rem;
    }

    .cv-text strong {
        font-size: 0.85rem;
    }

    .curriculum {
        margin-bottom: 1.5rem;
    }
}


 /* =================================================================================================================*/
/*separatore loop progetti*/

.titolo_progetti{
    background-color: #FACDDD;
}

.section_hero_progetti{
    background-color: #FACDDD;
}

.sfondo_card{
    background-color: #FACDDD;
}


.cardImgProgetto {
    object-fit: cover;
}

.cardTitle {
    font-family: 'Ojuju', sans-serif;
}

/* colori in ordine come Figma: blu, giallo, viola, bianco, nero, rosso, verde, marrone, nero */
.card-grafica .card { background-color: #ABDAD5; }
.card-stage .card { background-color: #EF6654; }
.card-ifts .card { background-color: #D8DB8B; }
.card-g-cup .card { background-color: #af9ad8; }

/* ombra sotto le card */
.card {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}


/* bottone solo testo nero senza sfondo */
.card .btn {
    background-color: transparent;
    color: #000000;
    border: none;
    padding-left: 0;
    text-decoration: underline;
}

.card .btn:hover {
    background-color: transparent;
    color: #000000;
    opacity: 0.7;
}

.card .btn::after {
    content: ' →';
    display: inline-block;
    transition: transform 0.3s ease;
}

.card .btn:hover::after {
    transform: translateX(5px) scale(1.2);
}


.reveal-left{
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s ease, transform 0.8s ease
}

.reveal-left.visible{
    opacity: 1;
    transform: translateX(0);
}


 /* =================================================================================================================*/
/*separatore progetto singolo*/

@import url('https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300..700&display=swap');

.singolo-progetto p {
    font-family: 'Spline Sans', sans-serif;
}

/* testo 1 — bandiera a destra */
.blocco-1 p {
    text-align: left;
}

/* testo 2 — bandiera a sinistra */
.blocco-2 p {
    text-align: left;
}

/* testo 3 — bandiera a destra */
.blocco-3 p {
    text-align: left;
}


/* =================================================================================================================*/
/*separatore CONTATTI*/

/* contenitore form */
.modulo-form {
    max-width: 600px;
    margin: 0 auto;
    background-color: #FFFDF4;
    border-radius: 16px;
    padding: 2.5rem;
}

/* label */
.modulo-form .wpcf7 label,
.modulo-form .wpcf7 p {
    font-family: 'Ojuju', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.3rem;
}

/* input e textarea */
.modulo-form .wpcf7 input[type="text"],
.modulo-form .wpcf7 input[type="email"],
.modulo-form .wpcf7 textarea,
.modulo-form .wpcf7 select {
    width: 100%;
    background-color: #FFFDF4;
    border: none;
    border-bottom: 2px solid #000000;
    border-radius: 0;
    padding: 0.5rem 0;
    font-family: 'Ojuju', sans-serif;
    font-size: 1rem;
    outline: none;
    margin-bottom: 1.5rem;
}

.modulo-form .wpcf7 input[type="text"]:focus,
.modulo-form .wpcf7 input[type="email"]:focus,
.modulo-form .wpcf7 textarea:focus,
.modulo-form .wpcf7 select:focus {
    border-bottom: 2px solid #000000;
    background-color: transparent;
}

/* textarea */
.modulo-form .wpcf7 textarea {
    min-height: 100px;
    resize: none;
}

/* bottone invia */
.modulo-form .wpcf7 input[type="submit"] {
    background-color: #000000;
    color: #ffffff;
    border: none;
    border-radius: 50px;
    padding: 0.8rem 2.5rem;
    font-family: 'Ojuju', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    width: 100%;
    margin-top: 1rem;
    transition: opacity 0.3s ease;
}

.modulo-form .wpcf7 input[type="submit"]:hover {
    opacity: 0.8;
}


.titolo_contatti img {
    max-width: 280px;
    width: 40%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.disegno-contatti{
    transition: transform 0.4s ease;
}
.disegno-contatti:hover {
    transform: rotate(3deg) scale(1.05);
}




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

footer {
    background-color: #fffdf4;
}

.torna-alto {
    grid-area: torna;
    justify-self: center;
    border: 1.5px solid #2683C1;
    border-radius: 20px;
    padding: 4px 16px;
    font-size: 14px;
    text-decoration: none;
    color: #2683C1;
}

.torna-alto:hover {
    background-color: #2683C1;
    color: #ffffff;
}

.footer-logo {
    grid-area: logo;
    justify-self: start;
}

.footer-logo img {
    height: 60px;
    width: auto;
}

.footer-contatti {
    grid-area: contatti;
    justify-self: end;
    text-align: right;
}

.footer-contatti h4 {
    font-family: "Ojuju", sans-serif;
    font-style: italic;
    margin-bottom: 8px;
    text-decoration: underline;
    color: #2683C1;
}

.footer-contatti a {
    display: block;
    color: #000;
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 4px;
}

.footer-contatti a:hover {
    text-decoration: underline;
}



.form{
    background-color: #FFFDF4;
}


.form-contatti-section {
    background-color: #D8DB8B;
    min-height: 100vh;
}

.modulo-form {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 2.5rem;
}

.titolo_contatti img {
    max-width: 280px;
    width: 40%;
    height: auto;
    display: block;
    margin: 0 auto;
}