/*========================= 
    VARIABILI 
=========================*/

:root {
  --background-color: #f5efe6;
  --background-color-opacity: #f5efe6aa;
  --surface-color: #dbceba;
  --surface-color-light: #e8dece;
  --surface-color-hover: #cabea9;
  --accent-color: #9e7e66;
  --accent-color-hover:#ad876e;
  --text-color-dark: #1c2344;
  --text-color-soft: #262e54;
  --text-color-light: #ffffff;
}

/*========================= 
    RESET/BASE 
=========================*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--background-color);
  color: var(--text-color-dark);
  font-size: 16px;
  line-height: 1.5;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

/*========================= 
    TIPOGRAFIA 
=========================*/

h1, h2, h3 {
  font-family: "Playfair Display", sans-serif;
}

h1 {
  font-size: 2.25rem;
}

h2{
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

p, li {
  color: var(--text-color-soft);
  font-size: 1rem;
  font-family: "Open Sans", sans-serif;
}

/*=========================
    LAYOUT GENERALE
=========================*/

/* Container */

/*Section Spacing*/

/* Grid / Flex utilities*/

.flex-center {
  align-items: center;
  display: flex;
  justify-content: center;
}
/* Alignment utilities */

/* ========================= 
    COMPONENTI 
=========================*/

/* Navbar */


nav {
  background-color: var(--surface-color-light);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: var(--background-color);
  -webkit-box-shadow: 4px 5px 27px -2px rgba(0,0,0,0.31); 
  box-shadow: 4px 5px 27px -2px rgba(0,0,0,0.31);
}
.navbar-container {
  background-color: var(--surface-color-light);
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 8px 20px;
}

.logo-navbar {
  width: 100px;
}

.menu-container {
  background-color: var(--surface-color);
  display: flex;
  flex-direction: column;
  left: 0;
  height: 100vh;
  justify-content: flex-start;
  padding-left: 40px;
  padding-right: 40px;
  position: fixed;
  top: 0;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  width: 100vw;
  z-index: 10;
}

.menu-container.is-open {
  transform: translateX(0);
}

.no-scroll {
  overflow: hidden;
}

.menu-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
  margin-bottom: 70px;
  position: relative;
}

.close-btn {
  background-color: var(--surface-color);
  border: none;
  border-radius: 100%;
  cursor: pointer;
  font-size: 1.5rem;
  position: absolute;
  padding: 7px 10px;
  right: -15px;
  top: -45px;
  transition: background 1s ease-in-out;
}

.close-btn:hover {
  background-color: var(--surface-color-hover);
}

.menu-list {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: 1.5rem;
  margin-bottom: 40px;
}

.menu-list li {
  margin-bottom: 30px;
}

.menu-list li a {
  transition: color 0.25s ease, transform 0.25s ease;
  display: inline-block;
}

.menu-list li a:hover,
.menu-list li a:focus {
  color: var(--accent-color);
  transform: translateX(5px);
}

.menu-list li .active {
  color: var(--accent-color);
  font-weight: 600;
}

.call-now-btn, .message-btn {
  background-color: var(--accent-color);
  background: linear-gradient(0deg,rgba(128, 102, 87, 1) 0%, rgba(158, 126, 102, 1) 100%);  
  border-radius: 40px;
  -webkit-box-shadow: 5px 5px 38px 0px rgba(0,0,0,0.27); 
  box-shadow: 5px 5px 38px 0px rgba(0,0,0,0.27);
  color: var(--text-color-light);
  display: inline-block;
  padding: 15px 20px;
  text-align: center;
  transition: background-color 1s ease-in-out;
}

.menu-call-btn {
  font-size: 1.5rem;
  margin-top: 40px;
}

.call-now-btn:hover, 
.message-btn:hover, 
.call-now-btn:active, 
.message-btn:active {
  background-color: var(--accent-color-hover);
  background: linear-gradient(0deg,rgba(138, 109, 91, 1) 0%, rgba(173, 135, 110, 1) 100%);
}

.hamburger-btn {
  align-items: center;
  border: none;
  background-color: var(--surface-color-light);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.hamburger-btn span {
  background-color: var(--text-color-dark);
  height: 3px;
  margin: 2px;
  width: 20px;

}

/* Titoli sezione */

.section-title {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 50px;
  text-align: center;
}

/* Bottoni */

.approfondimento-btn {
  background-color: var(--surface-color);
  border: 1px solid var(--surface-color);
  border-radius: 40px;
  -webkit-box-shadow: 5px 5px 38px 0px rgba(0,0,0,0.27); 
  box-shadow: 5px 5px 38px 0px rgba(0,0,0,0.27);
  padding: 15px 20px;
  transition: background-color 0.5s ease-in-out;
}

.approfondimento-btn:hover,
.approfondimento-btn:active {
  background-color: var(--surface-color-hover);
}

/* Sections */

.section {
  margin-top: 60px;
  padding: 0 20px;
}

/* Card */

.card {
  align-items: center;
  border: 1px solid var(--surface-color);
  border-radius: 15px;
  background-color: var(--surface-color-light);
  -webkit-box-shadow: 5px 5px 31px -2px rgba(0,0,0,0.25); 
  box-shadow: 5px 5px 31px -2px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;  
  justify-content: center;
  margin-bottom: 50px;
}

.card-servizio {
  height: 180px;
  padding: 10px;
}

.card-servizio h3 {
  margin-bottom: 20px;
}

.card-recensioni {
  height: 150px;
  padding: 10px;
}

.card-recensioni div {
  margin-bottom: 15px;
}

/* Icons */

.call-now-btn i,
.message-btn i {
  color: var(--text-color-light);
  margin-right: 10px;
}

.card-servizio i {
  color: var(--text-color-dark); 
  margin-right: 10px
}

.card-recensioni i {
  color: var(--text-color-dark);
}

.contatti-orari i {
  color: var(--background-color);
}

/* Footer */

footer {
  background-color: var(--accent-color);
  margin-top: 70px;
  padding: 30px 20px;
}

.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

footer h3,
footer p,
footer li,
footer a {
  color: var(--background-color);
}

footer hr {
  color: var(--background-color);
  margin-top: 30px;
  margin-bottom: 30px;
  width: 90%;
}

.info-femia h3 {
  margin-bottom: 5px;
}

.info-femia p {
  margin-bottom: 15px;
}

footer .info-femia  ul {
  list-style: disc;
  list-style-position: inside;
  font-family: "Open Sans", sans-serif;
}

footer ul li .active {
  text-transform: uppercase;
}

footer .privacy-policy {
  margin-top: 20px;
  font-family: "Open Sans", sans-serif;
  font-size: 1rem;
  text-decoration: underline;
  color: var(--text-color-light);
}

.menu-recap ul li {
  margin-bottom: 8px;
}

.contatti-orari h3 {
  margin-bottom: 10px;
}

.contatti, .orari {
  margin-bottom: 15px;
}

.social a i {
  font-size: 2.5rem;
}

.social-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.social-container a {
  text-decoration: underline;
}
/* =========================
    SEZIONI HOME
=========================*/

main {
  margin-top: 69px;
}

/*Hero*/

.hero-img-container {
  height: 300px;
}

.hero-img-container img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.hero-text-container {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 30px;
  padding: 0 15px;
}

.hero-text-container p {
  margin-bottom: 20px;
  text-align: center;
}

.call-now-hero-btn, .message-btn {
  width: 180px;
}

/*Soluzioni*/

.soluzioni-block {
  background-color: var(--surface-color-light);
  margin-top: 40px;
  border: 1px solid var(--surface-color);
  border-radius: 15px;
  -webkit-box-shadow: 5px 5px 31px -2px rgba(0,0,0,0.25); 
  box-shadow: 5px 5px 31px -2px rgba(0,0,0,0.25);
}

.soluzioni-block-text {
  padding: 15px;
}

.soluzioni-block h3 {
  margin-bottom: 15px;
}

.soluzioni-block img {
  margin-top: 30px;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
}

.soluzioni-section a {
  margin-top: 40px;
}

.tappeti-block {
  margin-top: 80px;
}


/*Servizi*/

/*Recensioni*/

/*CTA finale*/

.final-cta-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/*=========================
    PAGINE INTERNE
=========================*/

/* Hero pagine interne */

/* Pagina tende */

.soluzioni-casa-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 40px;
  background-color: var(--surface-color-light);
  border-radius: 15px;
  border: 1px solid var(--surface-color);
}

.soluzioni-casa-card .titolo-card {
  padding: 10px 20px;
}

.soluzioni-casa-card .titolo-card h3 {
  margin-bottom: 10px;
}

.soluzioni-casa-card img {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.card-soluzioni-tecniche .testo-card,
.card-soluzioni-professionali .testo-card,
.card-cura-dettagli .testo-card {
  padding: 15px 20px;
}

.soluzioni-tecniche-section .testo-card ul,
.card-soluzioni-professionali ul,
.card-cura-dettagli ul {
  margin-top: 15px;
  list-style-type: disc;
  list-style-position: inside;
  margin-bottom: 20px;
}

.card-soluzioni-tecniche img,
.card-soluzioni-professionali img,
.card-cura-dettagli img{
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}




/* Pagina tappeti */
.tappeti-persiani-block,
.tappeti-moderni-block {
  display: flex;
  flex-direction: column;
  background-color: var(--surface-color-light);
  margin-top: 60px;
  border-radius: 15px;
  -webkit-box-shadow: 5px 5px 31px -2px rgba(0,0,0,0.25); 
  box-shadow: 5px 5px 31px -2px rgba(0,0,0,0.25);
}

.tappeti-persiani-block-text,
.tappeti-moderni-block-text {
  padding: 15px;
  margin-bottom: 30px;
}

.tappeti-persiani-block img,
.tappeti-moderni-block img {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;  
}

.lavori h3 {
  text-align: center;
  margin-bottom: 30px;
}

.lavoro-card {
  margin-bottom: 20px;
  border-radius: 15px;
  -webkit-box-shadow: 5px 5px 31px -2px rgba(0,0,0,0.25); 
  box-shadow: 5px 5px 31px -2px rgba(0,0,0,0.25);
}

.lavoro-card img {
  border-radius: 15px;
}
/* Pagina servizi */

.consulenza-domicilio-block,
.montaggio-block,
.lavaggio-block {
  display: flex;
  flex-direction: column;
  background-color: var(--surface-color-light);
  margin-top: 60px;
  border-radius: 15px;
  -webkit-box-shadow: 5px 5px 31px -2px rgba(0,0,0,0.25); 
  box-shadow: 5px 5px 31px -2px rgba(0,0,0,0.25);
}

.consulenza-domicilio-block-text,
.montaggio-block-text,
.lavaggio-block-text {
  padding: 15px;
  margin-bottom: 30px;
}

.consulenza-domicilio-block img,
.montaggio-block img,
.lavaggio-block img {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;  
}
/* Pagina chi siamo */
.chi-siamo-container {
  background-color: var(--surface-color-light);
  margin: 60px 10px;
  padding: 20px;
  border-radius: 15px;
  -webkit-box-shadow: 5px 5px 31px -2px rgba(0,0,0,0.25); 
  box-shadow: 5px 5px 31px -2px rgba(0,0,0,0.25);
}

.chi-siamo-container p {
  margin-bottom: 15px;
}
/* Pagina contatti */
.contatti-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.btn-container {
  margin-top: 30px;
}

/*Privacy Policy*/
.privacy-container {
  max-width: 800px;
  margin: 0 auto;
  background-color: var(--surface-color-light);
  padding: 30px;
  border-radius: 15px;
  box-shadow: 5px 5px 31px -2px rgba(0,0,0,0.25);
}

.privacy-container h2 {
  margin-bottom: 20px;
  text-align: center;
}

.privacy-container h3 {
  margin-top: 25px;
  margin-bottom: 10px;
}

.privacy-container p {
  margin-bottom: 15px;
  line-height: 1.6;
}

.privacy-container ul {
  list-style: disc;
  list-style-position: inside;
}
/* =========================
    MEDIA QUERIES 
=========================*/

/* Mobile (default) */

/* Tablet */

@media (min-width: 768px) {

  .menu-container {
    padding: 100px 100px;
    justify-content: center;
    gap: 50px;
  }

  .menu-list li {
  margin-bottom: 40px;
}

  .hero-img-container {
    height: 500px;
  }

  .hero-img-container img {
    object-position: center;
  }
  
  .section {
  margin-top: 100px;
  padding: 0 80px;
}

/*TENDE*/

 .titolo-card h3 {
  text-align: center;
 }

 /*TAPPETI*/

 .tappeti-persiani-block img {
  width: 100%;
 }

}


/* Tablet large / deskstop */

@media (min-width: 1024px) {

  .hamburger-btn {
    display: none;
  }

  .menu-header {
    display: none;
  }

  .menu-container {
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    transform: translateX(0);
    position: static;
    padding: 0;
    height: auto;
    width: auto;
    z-index: 0;
    background-color: var(--surface-color-light);
  }

  .menu-list {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
  }

  .menu-list li {
    font-size: 1.35rem;
    margin-bottom: 0;
    padding-left: 20px;
  }

  .menu-call-btn {
  font-size: 1.2rem;
  margin-top: 0;
  padding: 5px 18px;
}

 .navbar-container {
  padding: 0 20px;
 }

 main {
  padding: 0 50px;
  margin-top: 53px;
 }
 
 .hero {
  position: relative;
  margin-left: 150px;
  margin-right: 150px;
 }

 .hero-text-container {
  gap: 10px;
  position: absolute;
  bottom: 30px;
  left: 30px;
  background-color: var(--background-color-opacity);
  padding: 15px 25px;
 }

 
 h1 {
  font-size: 2.5rem;
  }

 .call-now-hero-btn,
 .message-btn {
  font-size: 1.2rem;
 }

 .soluzioni-block {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 0 0 10px;
  max-height: 500px;
  overflow: hidden;
 }

 .tappeti-block {
  flex-direction: row-reverse;
  padding: 0;
 }

 h2 {
  font-size: 2.25rem;
 }

 h3 {
  font-size: 1.8rem;
 }

 p {
  font-size: 1.25rem;
 }

 li {
  font-size: 1.25rem;
 }
 
 .soluzioni-block-text {
  flex: 0 0 45%;
 }

 .soluzioni-block img {
  border-bottom-left-radius: 0;
  border-top-right-radius: 15px;
  margin-top: 0;
  flex: 0 0 55%;
 }

 .card-servizi-container {
  display: flex;
  gap: 20px;
 }

 .card-servizio {
  flex: 0 0 33.33%;
  height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 0 10px 80px 10px;
 }

 .card-servizio h3 {
  text-align: center;
 }

 .card-recensioni-container {
  display: flex;
  gap: 20px;
 }

 .card-recensioni {
  height: 250px;
  flex: 0 0 33.33%;
 }

  .footer-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }

  .menu-recap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  }


  .footer-container > div {
    flex: 1;
    padding: 0 20px;
  }

  .footer-container > div:not(:last-child) {
    border-right: 1px solid var(--background-color);
  }

  footer hr {
    display: none;
  }

  footer .social {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /*TENDE*/
  
 .soluzioni-casa-container {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
  max-width: none;
 }

 .soluzioni-casa-card {
  min-width: 0;
 }

 .soluzioni-casa-card h3 {
  word-wrap: break-word;
 }

 .soluzioni-tecniche-section, 
 .soluzioni-professionali-section,
 .cura-dettagli-section {
  padding: 0 150px;
 }

 .card-soluzioni-tecniche {
  display: flex;
  flex-direction: row;
 }

 .card-soluzioni-tecniche img {
  border-bottom-left-radius: 0;
  border-top-right-radius: 15px;
 }

 .professionali1,
 .cura-dettagli1 {
  display: flex;
  flex-direction: row-reverse;
 }

 .professionali2,
 .cura-dettagli2 {
  display: flex;
  flex-direction: row;
 }

 .professionali1 img,
 .cura-dettagli1 img{
  border-top-left-radius: 15px;
  border-bottom-right-radius: 0;
 }

 .professionali2 img,
 .cura-dettagli2 img{
  border-top-right-radius: 15px;
  border-bottom-left-radius: 0;
 }

 .card-soluzioni-professionali .testo-card,
 .card-cura-dettagli .testo-card {
  min-width: 300px;
 }

 /* Tappeti */

 .hero-text-container-tappeti {
  right: 30px;
  left: auto;
 }

 .tappeti-persiani-section,
 .tappeti-moderni-section {
  padding: 0 100px;
 }

 .tappeti-persiani-block,
 .tappeti-moderni-block {
  flex-direction: row;
  min-height: 400px;
 }

 .tappeti-persiani-block img,
 .tappeti-moderni-block img {
  border-bottom-left-radius: 0;
  border-top-right-radius: 15px;
  width: 100%;
  height: 100%;
  object-fit: cover;
 }

 .tappeto-block-img {
  flex: 1;
  display: flex;
  flex: 0 0 45%;
}

.tappeti-persiani-block-text,
.tappeti-moderni-block-text {
  flex: 0 0 55%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.tappeti-persiani-block-text h3,
.tappeti-moderni-block-text h3 {
  margin-bottom: 30px;
}

.lavori-container {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.lavoro-card {
  width: 300px;
}

.lavoro-card img {
  width: 100%;
  height: 100%;
}

/*Servizi*/

 .consulenza-domicilio-section,
 .montaggio-section,
 .lavaggio-section {
  padding: 0 100px;
 }

  .consulenza-domicilio-block,
  .montaggio-block,
  .lavaggio-block {
  flex-direction: row;
  min-height: 400px;
 }

 .montaggio-block {
  flex-direction: row-reverse;
 }

  .consulenza-domicilio-block img,
  .montaggio-block img,
  .lavaggio-block img {
  border-bottom-left-radius: 0;
  border-top-right-radius: 15px;
  width: 100%;
  height: 100%;
  object-fit: cover;
 }

 .montaggio-block img {
  border-bottom-left-radius: 15px;
  border-top-left-radius: 15px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
 }

  .consulenza-domicilio-img,
  .montaggio-img,
  .lavaggio-img {
  flex: 1;
  display: flex;
  flex: 0 0 45%;
}

.consulenza-domicilio-block-text,
.montaggio-block-text,
.lavaggio-block-text {
  flex: 0 0 55%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.consulenza-domicilio-block-text h3,
.montaggio-block-text h3,
.lavaggio-block-text h3 {
  margin-bottom: 30px;
}

/*Chi siamo*/
 .chi-siamo-container {
  padding: 50px;
 }

 /*Contatti*/
  .contatti-container {
    flex-direction: row;
  }

  .contatti-info,
  .contatti-mappa {
    flex: 1;
  }
}

/* Deskstop large */

@media (min-width: 1200px) {
 main {
  padding: 0 100px;
 }

 .chi-siamo-container {
  margin: 0 150px;
 }

}