/* Reset */ 
body, html{ font-family: 'Rubik', 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}

html{
    scroll-behavior: smooth;
}


body{background-color: #CBE4DA; color: #000;}

/* Dark Mode styles */
body.dark-theme {
  color: #eee;
  background: #000;
}
body.dark-theme a {
  color: #83C3A8;
}
.btn-toggle{background: #83C3A8;display: inline-block;padding: 15px 20px;color: #fff;}
.container{overflow: hidden;}

p{font-size: 20px; line-height: 1.4;}

p, h1, h4, a{
    transition: 0.4s;
    transition-timing-function: ease-in-out;
}

/*button*/
.button{background: #83C3A8; display: inline-block;padding: 15px 20px;color: #000;}
.button:hover{background: #6C5B8F;}

/*header*/
.header{display: flex; justify-content: space-between; align-items: center;padding: 10px 5% 10px 5%;}

/*menu*/
nav ul{
  width: 100%;
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
}
nav li{
  height: 50px;
}
nav a{
  height: 100%;
  padding: 0 30px;
  text-decoration: none;
  display: flex;
  align-items: center;
  color: #000;
}
nav a:hover{
  background-color: #6C5B8F;
}
nav li:first-child{
  margin-right: auto;
}

.sidebar{
  position: fixed;
  top: 0; 
  right: 0;
  height: 100vh;
  width: 250px;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
  list-style: none;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.sidebar li{
  width: 100%;
}
.sidebar a{
  width: 100%;
}
.menu-button{
  display: none;
}

#icon{
    width: 30px;
    cursor: pointer;
}

@media (max-width: 800px) {
  
    .header{padding-left: 20px; padding-right: 60px; position: relative; background: #CBE4DA; color: #000;}
    .menu{ background: #CBE4DA; position: absolute; top: 108px; right:-100%; width: 100%; transition: all 0.5s cubic-bezier(.215, .61, .355, 1);}
    .menu li{width: 100%;}
    .hideOnMobile{
      display: none;
    }
    .menu-button{
      display: block;
    }
    .button{
      display: inline-flex;
    }

}
@media(max-width: 400px){
  .sidebar{
    width: 100%;
  }
}


/*Cover*/
.cover{
    height: 70vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(0deg, rgba(135, 188, 166, 0.344) 0%, rgba(187, 144, 208, 0.425) 100%), url(foto-gruppo-2.jpg) no-repeat center center;
    background-size: cover;
}

.cover__text{text-align: center;max-width: 1000px;padding: 10%;color: #fff;}


/*pagina delle terapie*/
h1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 30px;
  color: #6C5B8F;
  text-decoration: none;
  justify-content: center;
  text-align: center;
  padding-top: 20px;
}
h3{
  font-size: 28px;
}
.col-33{
  padding: 15px;
  width: 100%;
  margin-bottom: 50px;
  transition: transform 0.5s;
}
.col-33 img{
  width: 100%;
}
.col-33 p{
  font-size: 14px;
}
@media (max-width: 800px){
  .grid pt-4{
    justify-content: center;
  }
  .col-33 h3{
    font-size: 20px;
  }
}

/*pagina dei contatti*/
.contatti {
  display: flex;
  padding: 0 10%;
  flex-wrap: wrap;
  width: 100%;
}

.contatti .col-33 h1{
  text-align: left;
}
.contatti .col-33 p{
  font-size: 18px;
  text-align: left;
  color: #000;
}

/*form contatti*/
.contactform{background: #CBE4DA; color: #6C5B8F; padding-bottom: 20px;}
.contactform h1{padding-top: 10px; text-align: center; font-size: 60px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;}
input{
background-color: white;
width: 70%;
margin-left: 12%;
font-size: 20px;
padding: 16px 16px;
border-radius: 30px;
border-color: black;
margin-bottom: 20px;
}

textarea{
background-color: white;
width: 70%;
margin-left: 12%;
font-size: 20px;
padding: 16px 16px;
border-radius: 10px;
border-color: black;
margin-bottom: 20px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

input:focus-within{
outline: none;
border-color: #5bd183;
border-width: 3px;
}
textarea:focus-within{
outline: none;
border-color: #5bd183;
border-width: 3px;
}
.contactform button{
background-color: #5bd183;
border-radius: 20px;
border-color: black;
font-size: 22px;
padding: 10px 18px;
text-align: center;
display: flex;
margin: auto;
margin-bottom: 10px;
}
.contactform button:hover{
opacity: 80%;
cursor: pointer;
}
@media (max-width: 800px){
.contatti{display: flex; justify-content: center; flex-wrap: wrap;}
}

/*whatsapp*/
.whatsapp {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  background-color: #25d366;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 3px 4px 3px #999;
  left: 15px;
  z-index: 150;
  padding-top: 15px;
}

/*BACK-TO-TOP BUTTON*/
#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 15px; /* Place the button 15px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #6C5B8F; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

/* footer */
section{
  padding: 80px 13% 70px;
}
.footer{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, auto));
  gap: 3.5rem;
  left: 0;
  right: 0;
  bottom: 0;
}
.footer-content h4{
  color: #000;
  margin-bottom: 1.5rem;
  font-size: 20px;
}
.footer-content li{
  margin-bottom: 16px;
}
.footer-content li a{
  display: block;
  color: #000;
  font-size: 15px;
  font-weight: 400;
  transition: all .40s ease;
}
.footer-content li a:hover{
  transform: translateY(-3px) translateX(-5px);
  color: #6C5B8F;
}

@media (max-width: 1690px){
  section{
    padding: 50px 5% 40px;
  }
}
@media (max-width: 1120px){
  .footer{
    display: grid;
  }
}

/*utilities*/
.img-res{height: auto; width: 100%;}
.text-center{text-align: center;}

.color-1{color: #FF235D}
.color-2{color: #22C58A;}

.pt-1{padding-top: 10px;}
.pt-2{padding-top: 30px;}
.pt-3{padding-top: 60px;}

.pb-1{padding-bottom: 10px;}
.pb-2{padding-bottom: 30px;}
.pb-3{padding-bottom: 60px;}

.grid{display: flex;padding: 0 10%;flex-wrap: wrap;}

.col-100{width: 100%;padding: 10% 20px;}
.col-60{width: 60%;padding: 10% 20px;}
.col-50{width: 50%; padding: 5% 20px;position: relative;}
.col-40{width: 40%;padding: 10% 20px;}
.col-33{width: 33.33%;padding: 40px 40px;}
.col-25{width: 25%;padding: 30px 25px 15px;}

@media (max-width: 768px) {
    .col-25,
    .col-60,
    .col-50,
    .col-40,
    .col-33,
    .col-100{width: 100%;}

    .reverse{flex-direction: column-reverse;}
}