@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');

* {
    vertical-align: baseline;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

:root {
  --nero: #1C1C1C;
  --grigio: #F6F6F6;
  --giallo: #FBEB4B;
  --left: white;
  --right: black
}

/* TIPOGRAFIA ED ELEMENTI GLOBALI */

body {
  font-family: "Inter Tight", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.5em, 2vw, 4em); 
  padding: 0;
  cursor: none;
}

h1, h2, h3, h4 {
  font-family: "Inter Tight", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  margin: 0;
}

p {
  padding: 0;
  margin: 0;
}

a {
  cursor: none;
}




/* PADDING - MARGINI */
.pd-top-200 {
  padding-top: 200px;
}

.pd-top-100 {
  padding-top: 100px;
}

.pd-top-50 {
  padding-top: 50px;
}

.pd-top-25 {
  padding-top: 25px;
}

.pd-top-10 {
  padding-top: 10px;
}

.pd-top-btm-100 {
  padding: 100px 0;
}

.pd-btm-50 {
  padding-bottom: 50px;
}

.pd-btm-25 {
  padding-bottom: 25px;
}

.pd-btm-10 {
  padding-bottom: 10px;
}

.mg-top-100 {
  margin-top: 100px;
}

/* ------------------------------------------------ CURSORE PERSONALIZZATO ------------------------------------------------ */

.outline {
  width: 30px;
  height: 30px;
  border-radius: 0%;
  background: var(--nero);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99998;
  transform: translate(-50px, -50px);
  transition: all .2s cubic-bezier(.215, .61, .355, 1);
  pointer-events: none;
  mix-blend-mode: difference;
}

.cursore {
  width: 5px;
  height: 5px;
  border-radius: 0%;
  background: var(--giallo);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  transform: translate(-5px, -5px);
  pointer-events: none;
  transition: all .3s cubic-bezier(.215, .61, .355, 1);
}

.outline.hover {
  width: 350px;
  height: 350px;
  border-radius: 100%;
}




/* ------------------------------------------------ CTA ------------------------------------------------ */




/* ------------------------------------------------ HOME PAGE ------------------------------------------------ */

.container-fluid {
  padding: 35px 35px;
}

.bordo-sopra {
  display: block;
  width: 100%;
  height: 35px;
  background: white;
}

.row {
  padding: 25px 35px;
  margin-left: 0;
  margin-right: 0;
}

#hero .row {
  background: var(--nero);
  color: white;
  padding: 25vw 35px 35px;
}


#hero .container-fluid {
  padding: 0 35px;
}


.nome.due {
  text-align: right;
}

#hero h2 {
  font-size: 7vw;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1em;
  margin-bottom: 0;
}

#hero .cont-descr {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: end;
}

#presentazione .container-fluid {
  padding: 0 35px;
}

#presentazione .row {
  background: var(--giallo);
}

#presentazione h3 {
  font-size: 15vw;
  padding: 10% 0;
  overflow: hidden;
}

#presentazione h4 {
  font-size: 3.5vw;
  font-weight: 400;
  padding-left: 15%;
}

#presentazione p {
  font-size: 3.5vw;
  font-weight: 400;
  padding-left: 15%;
  line-height: 1.2em;
  padding-top: 100px;
}

#presentazione a {
  margin-left: 15%;
  margin-top: 100px;
  margin-bottom: 10%;
  background: var(--nero);
  color: white;
  padding: 25px 50px;
  text-transform: uppercase;
  font-size: 2.5vw;
  transition: all .5s cubic-bezier(.215, .61, .355, 1);
}

#presentazione a:hover {
  background: white;
  color: var(--nero);
  text-decoration: none;
}

#contatti .container-fluid {
  padding: 0 35px;
}

#contatti .row {
  background: var(--grigio);
}

#contatti h2 {
  font-size: 10vw;
  padding: 10% 0;
  text-transform: uppercase;
}

#contatti p {
  padding-left: 15%;
  width: 80%;
}

.link {
  padding-left: 15%;
  padding-top: 50px;
  padding-bottom: 10%;
}

.link a {
  display: block;
  font-size: 3vw;
  color: var(--nero);
  text-decoration: underline;
  font-weight: 600;
}

footer p {
  font-size: 1.4vw;
  margin-bottom: 0;
}

footer a {
  color: var(--nero);
  text-decoration: underline;
}

footer a:hover {
  color: var(--nero);
}

.nome {
	overflow: hidden;
	font-size: 80px;
}
.nome span {
	transform: translate(0, 100%);
	display: block;
  font-size: 15vw;
  text-transform: uppercase;
  font-weight: 500;
  width: 100%;
}

.text-rev-2 {
  color: blue;
  background-image: linear-gradient(
    90deg,
    var(--left) 0%,
    var(--left) 0%,
    var(--right) 0%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#progetti {
  padding: 100px 0;
  
  .cont-titolo {
    display: flex;
    justify-content: space-between;

    h3 {
      font-size: 5rem;
      text-transform: uppercase;
    }
  }
}

#progetti .cont-prog {
  display: flex;
  width: 100%;

  .dati {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    align-items: center;

    p {
      width: 100%;
    }

    h4 {
      font-size: 3.5rem;
      text-transform: uppercase;
      width: 100%;
    }

    p.partner {
      font-size: 60%;
    }

    p.data {
      text-decoration: underline;
    }
  }
  .progetto {
    width: 100%;
    height: 600px;
    border-right: solid 2px black;
    padding-right: 30px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top;
      padding: 30px 0;
      transition: all .5s cubic-bezier(.215, .61, .355, 1);

      &:hover {
        filter: saturate(.01);
        opacity: .5;
      }
    }
  }
}

.swiper-slide {
  width: 70%!important;
}

p.partner a {
  color: black;
  font-size: 1em;
}

#progNuovo {
  padding: 300px 0 0;
}



#clients {
  padding: 200px 0 35px;

  .container-fluid {
    padding: 0 35px;
  }

  h2 {
    font-size: 15vw;
    text-transform: uppercase;
  }

  h3 {
    color: var(--bianco);
  }

  .clienti {
    
    .box-clienti {
      border-bottom: solid 1px white;
      cursor: pointer;
      position: relative;

      &:hover {
        z-index: 10;
      }
      
      .titolo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 15px 4px;
        transition: all .5s cubic-bezier(.215, .61, .355, 1);
        background: var(--nero);
        position: relative;

        &:hover {
          background: #FBEB4B;
          color: var(--nero);

          h4 {
            color: var(--nero);
          }

          .hover-img {
            opacity: 1;
            transform: translate(65%, -50%) scale(1.5);
          }
        }

        .hover-img {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(65%, -50%) scale(0.9);
          width: 300px;
          height: auto;
          max-height: 200px;
          object-fit: cover;
          opacity: 0;
          pointer-events: none;
          transition: opacity .5s cubic-bezier(.215, .61, .355, 1),
                      transform .5s cubic-bezier(.215, .61, .355, 1);
          z-index: 100;
        }

        h4, p {
          position: relative;
          z-index: 1;
          color: white;
          text-transform: uppercase;
          line-height: normal;
          font-size: 1.2em;
        }

        p {
          font-size: 1.2em;
          font-weight: 200;
          line-height: 0;
        }
      }

      .contenuto {
        
        p {
          padding-left: 10px;
          padding-top: 20px;
          padding-bottom: 50px;
          width: 50%;
          font-size: .7em;
        }

        a {
          color: var(--nero);
          text-transform: uppercase;
          text-decoration: underline;
        }
      }
    }
  }

  .box-clienti.primo {
    border-top: solid 1px white;
  }
}

.dettagli-prog {
  display: flex;
  justify-content: space-between;
  padding-top: 25px;
  align-items: end;

  .dettagli {
    display: flex;
    width: 50%;
    gap: 50px;

    .cont.uno, .cont.due {
      width: 50%;
    
      h5 {
        text-transform: uppercase;
        font-size: .6em;
        border-bottom: solid 2px var(--giallo);
        margin-bottom: 0;
      }

      h6 {
        font-size: .8em;
        font-weight: 600;
        margin-bottom: 0;
        text-transform: uppercase;
        padding-top: 10px;
      }

      a {
        font-size: .8em;
        margin: 0!important;
        padding-left: 0!important;
        font-weight: 600;
        text-decoration: none!important;
        line-height: 0;
      }
    }
  }
}