/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

:root {
  
  

  --color-neutral-100: oklch(100% 0.00011 271.152);
  --color-neutral-500: oklch(79.113% 0.00361 324.45);
  --color-neutral-500-s: 79.113% 0.00361 324.45;
  --color-neutral-900: oklch(0% 0 0);
    

  --color-accent-500: oklch(45.534% 0.18686 29.223);
  --color-accent-700: oklch(42.454% 0.03977 72.299);

  --ff-primary: "Montserrat", sans-serif;
  --ff-secondary:"Times New Roman", times, serif;



  --fw-light: 100;
  --fw-regular: 400;
  --fw-bold: 700;
  --fw-black: 900;

  --size-100: 0.75rem;
  --size-200: 1rem;
  --size-300: 1.125rem;
  --size-400: 1.25rem;
  --size-500: 1.5rem;
  --size-600: 1.775rem;
  --size-700: 2rem;
  --size-750: 2.5rem;
  --size-800: 3rem;
  --size-900: 5rem;

  --radius: 20px;
  --2px-border: 2px solid var(--color-accent-500);

  --window-height:90vh;


--spring-easing: linear(0, 0.0021 0.51%, 0.0086, 0.0193 1.59%, 0.0346 2.16%, 0.0547, 0.0786 3.35%, 0.1421 4.64%, 0.206 5.75%, 0.2854 6.99%, 0.6 11.52%, 0.7296 13.49%, 0.8489 15.51%, 0.9001 16.48%, 0.9455, 0.9867, 1.0234, 1.0557 20.26%, 1.0844, 1.1086, 1.1285 23.17%, 1.1446, 1.1565 25.17%, 1.1668 26.52%, 1.1709 27.95%, 1.169 29.46%, 1.1609 31.08%, 1.15 32.48%, 1.1345 34.07%, 1.0523 41.14%, 1.0327 43%, 1.0168 44.73%, 1.0013, 0.9891 48.72%, 0.9802 50.75%, 0.9743 52.82%, 0.9708 55.82%, 0.9724 59.22%, 0.9962 72.33%, 1.0036 79.37%, 1.0049 86.55%, 1.0008 99.98%);
--spring-duration: 2.723s;
scroll-behavior: smooth;
}
html{
    background: var(--color-neutral-500);
}
main{
    --opacity:0.9;
}
h1,h2,h3,h4,h5,h6{
  font-family: var(--ff-primary);
}
*:not(h1,h2,h3,h4,h5,h6,button){
  font-family: var(--ff-primary);
}

.container{
  --opacity:0.3;
  width:80vw;
  min-height:var(--window-height);
  margin: var(--size-800) auto;
  outline: 5px solid var(--color-accent-500);
  background: url(bg.webp);
   box-shadow: inset 0 0 0 100vw  oklch(var(--color-neutral-500-s) / var(--opacity));
  
   
  
  background-color: var(--color-neutral-500);
  background-repeat: no-repeat;
  background-position: top;
  background-blend-mode: darken;
  background-size:cover;
  background-attachment: fixed;

  
}
.about__container{
  min-height:calc(var(--window-height) + 50vh);
}

#chiara{
  min-height: calc(var(--window-height) + 50vh);
}

@media (max-width:800px) {
  .container{
    width:90vw;
  }
  
}


a{
    text-decoration: underline transparent;
    color: var(--color-accent-500);
    transition: text-decoration 300ms ease;

    &:hover{
        text-decoration-color: var(--color-accent-500);
    }
}
/* Hero */
.hero__container{
    display:grid;
    place-items: center;
}

.hero__logo{
      width:100%;
    height:100%;
    /* background:radial-gradient(rgba(246, 245, 245, 0.615) 30%, transparent 75%); */
    /* display: grid;
    place-items: center; */

    
    background-image: url(logoghroshu.svg), radial-gradient(oklch(79.113% 0.00361 324.45 / 1) 0%, transparent 50%);
   
    background-size: 25%, 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    >img{
        max-width:25%;
    }

  }
  @media (max-width:800px) {

    .hero__logo{
      background-size: 80% 200%;
       background-image: url(logoghroshu.svg), radial-gradient(oklch(79.113% 0.00361 324.45 / 0.7) 30%, transparent 75%);
    }
    
  }
/* Chi Siamo */

.about__container{
    display: grid;
place-items: center;


}

.about__wrapper{
    position: relative;
    display: flex;
    max-width:80%;
    margin-block:var(--size-300);
    >div{
         background-color: oklch(var(--color-neutral-500-s) / var(--opacity));
    }
}
@media (min-width:801px) {
  .about__grid{
    display:grid;
     --x:15%;
    --y:7%;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.5fr 1fr 0.5fr;
  }

  .about__img{
     grid-area: 1/2/2/1;
  align-self:end;
  }

  .about__img-fran{
  translate:calc(-1 * var(--x)) var(--y);
}

.about__img-chia{
  translate:var(--x) var(--y);
  grid-area: 1/4/2/3;
    justify-self: end;
}
.quote__container{
  align-self:start;
   grid-area: 3/4/4/3;
}
  .quote__fran{
  translate:var(--x) calc(-1.5 * var(--y));
    justify-self: end;
}

.quote__chia{
  translate:calc(-1 * var(--x)) calc(-1.5 * var(--y));
  grid-area:3/2/4/1;
}
  
}

@media (min-width:1450px) {

  .about__grid{
    --y:30%;
    --yq:7%;
  }

   .quote__fran{
  translate:var(--x) calc(-1.5 * var(--yq));
   
}

.quote__chia{
  translate:calc(-1 * var(--x)) calc(-1.5 * var(--yq));
 
}
  
}

.about__text{
  grid-area: 2/4/3/1 ;
  position: relative;
    margin:auto;
    /* width:80%; */
    border:var(--2px-border);
    text-align: center;
    background-color: oklch(var(--color-neutral-500-s) / var(--opacity));
    padding: var(--size-200);
       >h2{
     font-size: var(--size-800);
     color:var(--color-accent-700);
    }
    >h3{
      font-size: var(--size-500);
      text-transform: uppercase;
      color: var(--color-accent-500);
      >span:first-of-type{
        color: var(--color-accent-700);
      }
    }
    
    >p{
        font-size:var(--size-500);
        margin-block:var(--size-100);
    }
}



.about__img{
 
 position: relative;
 
  border:var(--2px-border);
  z-index:1;
    
}

.about__img-chia, .about__img-fran{
  max-width:250px;
}



.quote__container{
  
    border: var(--2px-border);
    font-size: var(--size-400);
    max-width:200px;
    display:flex;
    padding:0.5rem;
    z-index: 3;
    
}
.about__img-mob{
  display:none;
}



.studio__container{
  /* --opacity:0; */
     background-image: url(GhRoValori.webp);
}

@media (max-width:800px) {

  .about__text{
 
       >h2{
     font-size: var(--size-700);
   
    }
    >h3{
      font-size: var(--size-300);
    
    }
    
    >p{
        font-size:var(--size-200);
    }
}


.quote__container{

    font-size: var(--size-200);
   
    
}
  .about__wrapper{
    display:block;
  }
  .about__img-mob{
    margin:auto;
    display:block;
    width:250px;
  }
  .about__img{
    position: initial;
    margin-block:var(--size-100);
  }
  .quote__container{
    position: initial;
    max-width: 100%;
  
    display:block;
    margin: var(--size-100) auto;
  }
  .about__img-fran, .about__img-chia{
    display:none;
  }
  
}

/* Contacts */

.contacts{
  
  background-image: url('contatti-bg-1.webp');
  display:grid;
  place-items: center;
}


.contact__container{
    
    
    
    width:60%;
    height:100%;
    display:grid;
    place-items:center;
    
  
}
.contact__details{
    background-color: oklch(var(--color-neutral-500-s) / var(--opacity));
    border:var(--2px-border);
    
    margin:auto;
    /* height:80%; */
    padding-inline: var(--size-900);
    ul{
    list-style-type: none
    }
    >h2{
        color:var(--color-accent-700);
        font-size: var(--size-800);
        text-align: center;
      margin-block-start: var(--size-200);
    }

   
}

.contact__box{
  margin-block:var(--size-200);
    >h3{
        color: var(--color-accent-700);
        font-size:var(--size-600);
        text-align: center;
        margin-block:var(--size-100);
    }

    svg{
        max-width: var(--size-300);
        max-height:var(--size-300);
        display: inline-block;
        margin-inline-end: var(--size-300);
    }

    li{
        display:flex;
        align-items: center;
    }
}

/* .contacts{
    display:flex;
    position: relative;
    align-items: center;
} */

.module__container{
  display: grid;
  place-items: center;
  >div{
    grid-area: 1/1;
  }
}

.module{
    position:absolute;
    top:50%;
    left:60%;
    translate: -30% -50%;
    width: 400px;
    height: 500px;
    scale:0.9;
    border:var(--2px-border);
     background-color: oklch(var(--color-neutral-500-s) / var(--opacity));

     >h3{
      text-align: center;
      color:var(--color-accent-700);
      font-size: var(--size-600);
      margin-block:var(--size-200);
     }

     
}

  .h-captcha{
    margin: var(--size-100) auto;
  }

input[type="checkbox"] {
  width: var(--size-400);
  height: var(--size-400);
  accent-color: var(--color-accent-500);
}


@media (max-width:1000px) {
  .module{
    scale:0.8;
    left:70%;
  }
  
}

form{
    margin: auto;
    display:flex;
    flex-direction: column;
    justify-content: center;
    /* max-width: 70%; */
    /* align-items: center; */
color:var(--color-accent-700);

    >input, textarea{
        margin:0rem 0.5rem 0.5rem 0.5rem;
        font-size: var(--size-400);
    }
    >label{
      margin-inline:0.25rem;
      font-size: var(--size-300);
    }

    >.btn{
      max-width: 50%;
      margin:1.5rem auto;
     }

     >div{
      display:flex;
      gap:5%;
      margin-inline:0.25rem;
     }
}
.image{
width:40vw;
background: url(bg-img2.jpg);
height:calc(var(--window-height) + 20vh);
background-size:cover ;
border-left: var(--2px-border)
/* background-attachment: fixed; */

}

/* .btn {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: var(--color-accent-500);
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  line-height: 1.5;
  margin: 1rem;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;

  &:active{
    transform:scale(0.95);
  }

  
}
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.btn:-moz-focusring {
  outline: auto;
}

.btn [hidden] {
  display: none;
}
.btn {
  box-shadow: inset 0 0 0 2px #fff;
  box-sizing: border-box;
  display: block;
  font-weight: 900;
  padding: 1.2rem 3rem;
  position: relative;
  text-transform: uppercase;
  transition: color 0.1s linear;

  &:active{
      transform:scale(0.95);
    }
}
.btn:after,
.btn:before {
  content: "";
  position: absolute;
}
.btn:before {
  border-bottom: var(--border);
  border-top: var(--border);
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.btn:hover:before {
  --border: 4px solid var(--color-accent-500);
  -webkit-animation: border-top-and-bottom 1s forwards;
  animation: border-top-and-bottom 1s forwards;
}
.btn:after {
  border-left: var(--border);
  border-right: var(--border);
  bottom: 50%;
  right: 0;
  transform: translateY(50%);
  width: 100%;
  z-index: -1;
}
.btn:hover:after {
  --border: 4px solid var(--color-accent-500);
  -webkit-animation: border-right-and-left 1s forwards;
  animation: border-right-and-left 1s forwards;
}
@-webkit-keyframes border-top-and-bottom {
  0% {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes border-top-and-bottom {
  0% {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@-webkit-keyframes border-right-and-left {
  0% {
    height: 0;
  }
  to {
    height: 100%;
  }
}
@keyframes border-right-and-left {
  0% {
    height: 0;
  }
  to {
    height: 100%;
  }
} */
@media (min-width:801px) {
  .hidden-desktop{
    display:none;
  }
  
}
@media (max-width:800px) {
  
.hidden{
  visibility: hidden;
}
  .contacts{
    /* display:block; */
    padding-block-end:var(--size-100);
  }
  .contact__container{
    width:100%;
  position: relative;
  z-index:1;
  padding-block-start:var(--size-100);
  
  margin:var(--size-100) auto;
}
  .contact__details{
    max-width:100%;
    padding:0.25rem var(--size-200);
    
    >h2{
      font-size: var(--size-700);
    }
  }

  .contact__box{
    >h3{
      font-size: var(--size-500);
      
    }
  }

  .module{
  
    margin-inline:var(--size-200);
    
    position: relative;
    inset:0;
    translate: 0 0;
    width:auto;
    height:auto;
    z-index:1;
    >h3{
      margin-inline:var(--size-200);
    }
  }

  form{
    >label{
      font-size: var(--size-200);
    }
  }

  .privacy{
    flex-direction: column;
    align-items: center;
    gap:var(--size-200);
  }

  .image{
    position: absolute;
    width:100%;
    height:60%;
    bottom:0;
    z-index:0;
    border-top: var(--2px-border);
  }
  .hidden-desktop{
    >button{
      position: relative;
      z-index: 1;
      margin:auto;
    }
  }
}

.link__mob{
  display:none;
}
@media (max-width:450px) {

  .link__desk{
    display:none;
  }
  .link__mob{
    display:inline;
  }
  
}
/* Side menu */
div{
    --opacity:0.9;
}

.hamburger{
  display:none;
 }
 .mobile-menu{
  display:none;
 }
.lateral {
  height: auto;
  width: fit-content;
  position: fixed;
  left: 0;
  z-index: 1;
  top: 50%;
  transform: translate(0, -50%);
  
  
}

ul{
    padding:0;
}



.site-navigation {
    
   padding-inline-end:var(--size-100);
  /* margin-inline-end:2rem;  */

 
}
.site-navigation a{
    font-size: var(--size-300);
  text-decoration: none;
  color:black;
  transition:all 0.5s ease;
}
.site-navigation li{
 list-style:none;
 display:flex;
 align-items:center;
}

.site-navigation svg{
  fill:none;
  
  max-width:var(--size-300);
  max-height:var(--size-300);
  margin-inline-start:10px;
  margin-inline-end:5px;
  
}
.site-navigation svg{
  fill:transparent;
  transition: fill 1000ms ease;
}

.site-navigation a:hover{
color: var(--color-accent-500);
fill: var(--color-accent-500);
scale:1.1;

}

.lateral-right {
  right: 0;
  
}

.rotate{
  
  fill:var(--color-accent-500) !important;
  animation: rotate 2s linear infinite;
  /* transform: scale(1.3) rotate(5deg); */
}

.contact__svg{
  stroke:black;

}

.enlarge{
  stroke:var(--color-accent-500) !important;
   transition: all 200ms ease;
  scale:1.5;
}

@keyframes rotate {
  0%{
    scale:1;
    transform:rotate(0deg);
  }

  50%{
    scale:1.2;
  }
100%{
  scale:1;
  transform:rotate(360deg);
}
  
}
@keyframes enlarge {
  0%{
    scale:1;
  
  }

  50%{
    scale:1.2;
  }
100%{
  scale:1.2;
 
}
  
}

@media (max-width:1250px) {
 .lateral{  background: oklch(var(--color-neutral-500-s) / 0.9);
    border:var(--2px-border);
  border-left:0px;
 }

 
}

@media (max-width:800px){
  .lateral{
    display:none;
  }

   .hamburger{
    display:grid;
    place-items: center;
    position: fixed;
    top:10%;
    right:7%;
    width: 60px;
    aspect-ratio: 1;
    z-index: 1001;
    fill: var(--color-accent-500);
    border:5px solid var(--color-accent-500);
    /* border-radius: 10px; */
    background: oklch(var(--color-neutral-500-s) / var(--opacity));
    padding:calc(var(--size-100) / 2);
  }

  .mobile-menu{
    display:block;
    position: fixed;
    top:0;
    border-bottom: var(--2px-border);
background: oklch(var(--color-neutral-500-s) / var(--opacity));
    z-index: 1000;
    width:100%;
    text-align: center;
    font-size: var(--size-600);

    >ul{
      >li{
        margin-block:var(--size-200);
      }
    }
  }
}


footer{
  width:100%;
  
  background:var(--color-accent-500);
  color:white;
  display:grid;
  place-items:center;
  >p{
    padding-block:var(--size-300);
  }
}