/* Reset */
body, html{ font-family: 'League Spartan', Arial, Helvetica, sans-serif; line-height: 1; font-size: 16px; box-sizing: border-box;margin: 0;padding: 0;}*,*:before,*:after{ box-sizing: border-box; }h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0 0 1rem 0;padding: 0;}ol,ul{padding-left: 20px;line-height: 1.5;}img{height: auto;}h1{font-size: 4rem;} h2{font-size: 3rem;} h3{font-size: 2rem;} h4{font-size: 1rem;} h5{font-size: 0.8rem;} h6{font-size: 0.6rem;}a{text-decoration:none}
body{ background: #FBFBFB;}
.container{overflow: hidden;}
html{scroll-behavior: smooth;}
/* header */
.header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 5%;
background: #C4D9FF;
font-size: 22px;
}
.menu ul{
padding: 0; margin: 0;
}
.menu li{
display: inline-block;
}
.menu a{
padding: 15px 20px;
display: block;
color: #000000; font-weight: normal;
}
.button{
background: #C4D9FF;
display: block;
padding: 15px 20px;
border-radius: 30px;
color: #000000; font-weight: normal;
}
.button:hover{
background: #fbfbfb ;
}
.hamburger{ display: none;}
/* sector1 */
.home{
display: flex;
padding: 8% 5%;
}
.home__text{
width: 100%;
text-align: center;
font-optical-sizing: auto;
font-weight: weight;
font-style: normal;
font-size: 40px;
letter-spacing: 0.1em;
color: #000000;
}
.home__text p{font-size: 33px; letter-spacing: 0.1em;}
/* sector2 */
.sector2{
display: flex;
width: 100%; background: #C4D9FF;
padding: 2rem;
}
.sector2__slide{
position: relative;
max-width: 48rem;
margin: 0 auto;
}
.slide{
box-shadow: 0 0 25px, 0 0 45px hsla(0, 0%, 0%, 0.507);
display: flex;
aspect-ratio: 16 / 9;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
border-radius: 1rem;
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}
.slide::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
.slide img{
flex: 1 0 100%;
scroll-snap-align: start;
object-fit: cover;
}
.slider__nav{
display: flex;
column-gap: 1rem;
position: absolute;
bottom: 1.25rem;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.slider__nav a{
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
background-color: #fff;
opacity: 0.75;
transition: opacity ease 250ms;
}
.slider__nav a:hover{
opacity: 1;
}
/*Intro chi siamo*/
.intro{
margin-top: 3%;
padding: 7% 7%;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.1em;
background: #C4D9FF;
word-spacing: 5px;
font-family: "Literata", serif;
font-style: italic;
box-shadow: 0 0 25px, 0 0 45px hsla(0, 0%, 0%, 0.507);
}
.intro h1{ font-size: 50px;}
.intro p{
font-size: 32px;
letter-spacing: 0.1em;
}
/* Chi siamo */
.chi-siamo{
display: flex;
flex-wrap: wrap;
padding: 7% 10%;
text-align: center;
}
.chi-siamo h2{
margin: 0 auto;
text-align: center;
font-size: 50px;
}
.chi-siamo p{
padding-top: 5%;
font-size: 32px;
letter-spacing: 0.1em;
}
/* intro servizi */
.intro-servizi{
margin-top: 3%;
padding: 4% 4%;
text-align: center;
text-transform: uppercase ;
font-style: italic;
letter-spacing: 0.2em;
word-spacing: 5px;
}
/* Servizi */
.servizi{
margin-top: 7%;
display: flex;
flex-wrap: wrap;
padding: 0 10%;
background: #C4D9FF;
}
.servizi h2{
font-size: 60px;
letter-spacing: 0.1em;
color: #fff;
padding-top: 7%;}
.servizi p{
font-size: 33px;
letter-spacing: 0.1em;
}
.servizi2{
margin-top: 7%;
display: flex;
flex-wrap: wrap;
padding: 0 10%;
background: #C4D9FF;
}
.servizi2 h2{
font-size: 60px;
letter-spacing: 0.1em;
color: #fff;
padding-top: 7%;
}
.servizi2 p{
font-size: 33px;
letter-spacing: 0.1em;
}
.servizi3{
margin-top: 7%;
background: #C4D9FF;
display: flex;
flex-wrap: wrap;
padding: 0 10%;
}
.servizi3 h2{
font-size: 60px;
letter-spacing: 0.1em;
color: #fff;
padding-top: 7%;
}
.servizi3 p{
font-size: 33px;
letter-spacing: 0.1em;
}
.contatti{
min-height: 100vh;
padding: 50px 100px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.contatti h1{
text-align: center;
margin: 0 auto;
font-size: 50px;
color: #C4D9FF;
}
.contatti p{
margin-top: 20px;
font-size: 25px;
}
.contatti .contenitore h2{
font-size: 36px;
}
.contatti .contenitore p{
font-weight: 300;
color: #000000;
}
.contenitore{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 100px;
}
.contenitore .info-contatti{
width: 50%;
display: flex;
flex-direction: column;
}
.contenitore .info-contatti .box{
position: relative;
padding: 20px 0;
display: flex;
}
.contenitore .info-contatti .box .icon{
min-width: 60px;
height: 60px;
background: #C4D9FF;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
font-size: 25px;
}
.contenitore .info-contatti .box .testo{
display: flex;
margin-left: 20px;
font-size: 25px;
color: #C4D9FF;
flex-direction: column;
font-weight: 300;
}
.contenitore .info-contatti .box .testo h3{
font-weight: 500;
color: #C4D9FF;
margin: 0;
}
.contenitore .info-contatti .box .testo p{
margin: 5px;
}
.contact-form{
width: 40%;
padding: 40px;
}
.contact-form h2{
font-size: 30px;
color: #000000;
font-weight: 500;
}
.contact-form .input-box{
position: relative;
width: 100%;
margin-top: 25px;
}
.contact-form .input-box input,
.contact-form .input-box textarea{
width: 100%;
padding: 5px 0;
font-size: 16px;
margin: 10px 0;
border: none;
border-bottom: 2px solid #000000;
outline: none;
resize: none;
}
.contact-form .input-box span{
position: absolute;
left: 0;
padding: 5px 0;
font-size: 16px;
margin: 10px 0;
pointer-events: none;
transition: 0.5s;
}
.contact-form .input-box input:focus ~ span,
.contact-form .input-box input:valid ~ span,
.contact-form .input-box textarea:focus ~ span,
.contact-form .input-box textarea:valid ~ span{
color: #C4D9FF;
font-size: 12px;
transform: translateY(-20px);
}
.contact-form .input-box input[type="submit"]{
width: 100px;
background: #C4D9FF;
border: none;
border-radius: 30px;
cursor: pointer;
padding: 10px;
font-size: 18px;
}
/* utilities */
.img-res{height: auto; width: 100%;}
.img-res-menu{aspect-ratio: 4/3; height: auto; width: 100%; border-radius: 20px; box-shadow: 0 0 25px, 0 0 45px hsla(0, 0%, 0%, 0.507); }
.pt-0{padding-top: 5%;}
.pt-1{padding-top: 10%;}
.pt-2{padding-top: 30%;}
.pt-3{padding-top: 60%;}
.pb-0{padding-bottom: 5%;}
.pb-1{padding-bottom: 10%;}
.pb-2{padding-bottom: 30%;}
.pb-3{padding-bottom: 60%;}
.col-50{width: 50%; padding: 10% 5%;}
.col-40{width: 40%; padding: 10% 5%;}
.col-60{width: 60%; padding: 10% 5%;}
.col-33{width: 33.33%; padding: 10% 5%;}
@media (max-width: 768px) {
.col-50,
.col-40,
.col-60,
.col-33{width: 100%;}
.header{padding-left: 20px; padding-right: 60px; position: relative;}
.menu{position: absolute; top: 103px; width: 100%; right: -100%;}
.menu li{width: 100%; background: #C4D9FF;}
.open .menu{right: 0; transition: all 0.5s cubic-bezier(.215, .61, .355, 1);}
.hamburger{display: block; height: 25px; width: 30px; position: absolute; top: 40px; right: 15px;}
.hamburger span{position: absolute; top: 8px; width: 25px; display: block ; height: 2px; background-color: #000000;}
.hamburger span:nth-child(1){margin-top: -3px;}
.hamburger span:nth-child(2){margin-top: -10px;}
.hamburger span:nth-child(3){margin-top: 4px;}
.home{flex-wrap: wrap;}
.home__text{width: 100%; flex-wrap: wrap;}
.home__text h1{font-size: 40px; padding-top: 10%; letter-spacing: 0.05em; text-transform: uppercase; font-style: italic;}
.home__text p{font-size: 20px; padding-bottom: 10%; font-style: italic; text-transform: uppercase;}
.chi-siamo {width: 100%; flex-wrap: wrap; margin-top: 40px;}
.chi-siamo p{margin-top: 7%; font-size: 25px ;}
.chi-siamo h2{font-size: 35px; flex-wrap: wrap;}
.intro {width: 100%; flex-wrap: wrap; margin-top: 7%; }
.intro h1{font-size: 40px; flex-wrap: wrap;}
.intro p{font-size: 25px; flex-wrap: wrap;}
.intro-servizi {width: 100%; flex-wrap: wrap; margin-top: 7%}
.intro-servizi h1{font-size: 50px;}
.servizi {text-align: center; flex-wrap: wrap; }
.servizi h2{font-size: 35px;}
.servizi p{font-size: 25px; margin-top: 15%;}
.servizi2 {margin-top: 15%; text-align: center; flex-wrap: wrap}
.servizi2 h2{font-size: 35px;}
.servizi2 p{font-size: 25px; margin-top: 15%;}
.servizi3 {margin-top: 15%; text-align: center; flex-wrap: wrap}
.servizi3 h2{font-size: 35px;}
.servizi3 p{font-size: 25px; margin-top: 15%;}
.contatti{padding: 30px 20px;}
.contatti h1{font-size: 40px; margin-top: 50px;}
.contatti p{font-size: 20px;}
.contenitore{flex-direction: column;}
.contenitore .info-contatti{width: 100%; margin-bottom: 30px;}
.contact-form{width: 80%;}
.contact-form h2{font-size: 24px;}
.contact-form .input-box input,
.contact-form .input-box textarea{font-size: 14px;}
.contact-form .input-box input[type="submit"]{ width: 120px;}
}