@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 {
  font-family: "Inter Tight", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

p {
  padding: 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;
}