@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
@font-face {
  font-family: "Elicit Script";
  src: url(Resources/font/ElicitScript-BoldCasual.otf);
}

:root {
  --primary-color-dark: #997c23;
  --primary-color-light: #b49229;
  --secondary-color-dark: #ebebe1;
  --white: #fff;
  --black: #000;
}

* {
  margin: 0;
  padding: 0;
}

html {
  /* font-size: 12pt; */
  font-family: "Noto Serif", serif;
  font-weight: 300;
  scroll-behavior: smooth;
}

.section {
  width: 100%;
  padding: 30px 0;
}

h2.section-title {
  font-size: 60px;
  text-align: center;
  margin-bottom: 30px;
}

p.section-subtitle {
  font-size: 16px;
  text-align: center;
  font-weight: 400;
  margin: 0 auto 40px auto;
  max-width: 900px;
}

a {
  text-decoration: none;
}

button {
  font-family: "Noto Serif", serif;
}

footer {
  background-color: var(--white);
  box-sizing: border-box;
  height: 120px;
  padding: 20px 0 0 0;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
}

.product-hero {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  max-width: none !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

/*================================================================================================================================*/
/*=========================================================== GENERIC ============================================================*/
/*================================================================================================================================*/

.click-effect {
  transition: transform 0.1s ease-out;
  transform-origin: center center;
  cursor: pointer;
}

.click-effect:active {
  transform: scale(0.9);
}

.footer-logo {
  height: 100%;
  width: auto;
}
/*================================================================================================================================*/
/*====================================================== GENERIC ELEMENTS =========================================================*/
/*================================================================================================================================*/

/*------------------ NAVBAR ------------------*/

nav {
  height: 60px;
  background-color: var(--primary-color-light);
  display: flex;
  justify-content: flex-end;
  align-items: center; /*Will center element vertically*/
}

.sidebar-logo,
.navbar-favicon {
  display: none;
}

.links-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

nav a {
  height: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  color: var(--white);
}

nav img.navbar-logo {
  height: 50px;
  margin-right: auto;
  margin-left: 20px;
}

nav a.navbar-links:hover {
  background-color: var(--primary-color-dark);
  height: auto;
  padding: 10px;
  border-radius: 10px;
  font-weight: 500;
}

nav svg {
  fill: var(--white);
}

nav button {
  background-color: var(--white);
  color: var(--primary-color-light);
  padding: 10px;
  border-radius: 99px;
  font-family: "Libre Caslon Display", serif;
  font-size: 18px;
  font-weight: 600;
  border: none;
  display: flex;
  align-items: center; /* 2. Vertically center the children (img and text) */
  justify-content: center; /* 3. Horizontally distribute/center the children */
  gap: 8px;
  padding-right: 20px;
  padding-left: 20px;
}

nav button:hover {
  background-color: var(--secondary-color-dark);
  cursor: pointer;
  transform: scale(1.02);
}

nav button svg {
  height: 16px;
  width: 16px;
  fill: var(--primary-color-light) !important;
}

#sidebar-active {
  display: none;
}

.open-sidebar-button,
.close-sidebar-button {
  padding: 0 20px;
  display: none;
}

@media (max-width: 830px) {
  .navbar-favicon {
    display: block;
    height: 50px;
    margin-left: 20px;
    margin-right: auto;
  }

  .navbar-logo {
    display: none;
  }

  .links-container {
    flex-direction: column;
    align-items: flex-start;
    position: fixed; /* Changes the element's positioning scheme. The element is removed from the normal document flow and is positioned relative to the viewport (the browser window), not the containing document. This means the element will not move when the user scrolls the page. */
    top: 0; /* Anchors the element's top edge to the very top edge of the viewport (zero distance from the top). */
    right: -100%; /* Anchors the element's right edge to the very right edge of the viewport (zero distance from the right). */
    z-index: 10;
    width: 300px; /*might need to be revised */
    background-color: var(--primary-color-dark);
    box-shadow: -5px 0 5px rgba(255, 255, 255, 0.25);
    transition: 0.75s ease-out;
  }

  .sidebar-logo {
    display: block;
    width: 80%;
    padding-left: 20px;
  }

  nav a {
    box-sizing: border-box; /* Width and height defines the total space the element takes up on the screen. Padding and border are included inside the specified width and height.*/
    height: auto;
    width: 100%;
    padding: 20px 30px;
    justify-content: flex-start;
  }

  .open-sidebar-button,
  .close-sidebar-button {
    padding: 20px;
    display: block;
  }

  #sidebar-active:checked ~ .links-container {
    right: 0;
  }

  #sidebar-active:checked ~ #overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
  }
}

/*------------------ HERO ------------------*/

.hero {
  height: 60vh;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto; /*In order to center it horizontally*/
}

.hero h1,
.hero h2,
.hero h4 {
  color: var(--primary-color-dark);
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

/*================================================================================================================================*/
/*========================================================== HOMEPAGE ============================================================*/
/*================================================================================================================================*/

.hero h1 {
  font-family: "Elicit Script";
  font-size: 120px;
  line-height: 0.5;
  text-shadow: -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white,
    2px 2px 0 white;
}

.hero h2 {
  font-family: "Libre Caslon Display", serif;
  font-weight: 400;
  font-size: 50px;
}

.hero h4 {
  font-family: "Libre Caslon Display", serif;
  font-weight: 400;
  font-size: 18px;
}

.hero-content {
  height: 100%;
  display: flex;
  align-items: center;
}

.hero-text {
  flex-direction: column;
  flex: 1; /* ensures equal distrubution of space between this element and the second one inside the parent .hero-content*/
  max-width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image {
  position: relative;
  flex: 1; /* ensures equal distrubution of space between this element and the second one inside the parent .hero-content*/
  max-width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
}

.hero-text .home-hero-buttons {
  display: flex;
  flex-direction: row;
  gap: 30px;
  padding-top: 20px;
}

.hero-text button {
  background-color: var(--primary-color-light);
  color: var(--white);
  padding: 10px;
  border-radius: 99px;
  font-family: "Libre Caslon Display", serif;
  font-size: 18px;
  font-weight: 600;
  border: none;
  display: flex;
  align-items: center; /* 2. Vertically center the children (img and text) */
  justify-content: center; /* 3. Horizontally distribute/center the children */
  gap: 8px;
  padding-right: 20px;
  padding-left: 20px;
}

.hero-text button:hover {
  background-color: var(--primary-color-dark);
  cursor: pointer;
  transform: scale(1.02);
}

.hero-image .home-hero-img-1 {
  height: 70%;
  position: absolute;
  top: 10%;
  left: 35%;
  border-radius: 12px;
}

.hero-image .home-hero-img-2 {
  height: 50%;
  position: absolute;
  border-radius: 1000px;
  border: solid 5px #fff;
  z-index: 2;
  top: 40%;
  right: 50%;
}

/* @media (max-width: 1199px) {
  .hero.home-hero {
    height: 100vh;
    width: 100vw;
  }
  .hero-content {
    flex-direction: column;
    height: 100%;
    width: 100%;
  }

  .hero-text {
    width: 100%;
    max-width: none;
    height: 50%;
    order: 0;
    text-align: center;
  }
  .hero-image {
    order: -1;
    height: 50%;
    width: 100%;
    max-width: none;
  }

  .hero-image .home-hero-img-1 {
    height: 60%;
    position: absolute;
    top: 20%;
    left: 45%;
    border-radius: 12px;
  }
  .hero-image .home-hero-img-2 {
    height: 50%;
    position: absolute;
    border-radius: 1000px;
    border: solid 5px #fff;
    z-index: 2;
    top: 50%;
    right: 35%;
  }

  .hero h1 {
    font-size: 90px;
  }
  .hero h2 {
    font-size: 35px;
  }
} */

@media (max-width: 450px) {
  .section {
    padding: 0;
  }
  .services,
  .chi-siamo {
    padding: 20px 0;
  }
  .services h2,
  .chi-siamo h2 {
    font-size: 50px;
  }
  .home-hero {
    height: 80vh;
  }
  .hero-content {
    display: flex;
    flex-direction: column-reverse;
    gap: 20px;
  }
  .hero-text,
  .hero-image {
    height: 50%;
    width: 100%;
    max-width: none;
  }
  .hero-image .home-hero-img-1 {
    right: 10%;
  }
  .hero-image .home-hero-img-2 {
    top: 60%;
    right: 30%;
    z-index: 2;
  }

  .hero-text h1 {
    z-index: 3;
  }

  .hero-text h4 {
    text-align: center;
  }
}

/*================================================================================================================================*/
/*=========================================================== #SERVICES ==========================================================*/
/*================================================================================================================================*/

/*⎷*/
.services {
  background: var(--secondary-color-dark);
  font-family: "Roboto", sans-serif !important;
  text-rendering: optimizeLegibility;
}

/*⎷*/
.services h2.section-title,
.services p.section-subtitle {
  color: var(--primary-color-light);
}

/*⎷*/
.services a.btn {
  background: var(--primary-color-light);
  border-radius: 4px;
  box-shadow: 0 2px 0px 0 rgba(0, 0, 0, 0.25);
  color: var(--white);
  display: inline-block;
  padding: 6px 30px 8px;
  position: relative;
  text-decoration: none;
  transition: all 0.1s 0s ease-out;
}

/*⎷*/
.twelve-px-border-radius-bottom {
  transition: border-radius 2s ease-out;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/*⎷*/
.twelve-px-border-radius-top {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/*⎷*/
.services .no-touch a.btn:hover {
  box-shadow: 0px 8px 2px 0 rgba(0, 0, 0, 0.075);
  transform: translateY(-2px);
  transition: all 0.25s 0s ease-out;
}

/*⎷*/
.services .no-touch a.btn:active,
.services a.btn:active {
  box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.25);
  transform: translate3d(0, 1px, 0);
  transition: all 0.025s 0s ease-out;
}

/*⎷*/
.services div.cards {
  margin: 40px auto;
  max-width: 1200px;
  text-align: center;
}

/* ---------------------------------------------------- */
/* --- Parent Selector (Equivalent of: div.card) --- */
/* ---------------------------------------------------- */

/*⎷*/
div.card {
  display: inline-block;
  margin: 8px;
  max-width: 300px;
  perspective: 1000;
  position: relative;
  text-align: left;
  transition: all 0.3s 0s ease-in;
  width: 300px;
  z-index: 1;
}

/* ---------------------------------------------------- */
/* --- Nested Image and Image Holder --- */
/* ---------------------------------------------------- */

/*⎷*/
div.card img {
  max-width: 300px;
}

/*⎷*/
div.card .card__image-holder {
  height: 0;
  padding-bottom: 75%;
}

/* ---------------------------------------------------- */
/* --- Nested Card Title and Toggle Button --- */
/* ---------------------------------------------------- */

/*⎷*/
div.card div.card-title {
  background: #fff;
  padding: 6px 15px 10px;
  position: relative;
  z-index: 0;
}

/*⎷*/
div.card div.card-title a.toggle-info {
  border-radius: 32px;
  height: 32px;
  padding: 0;
  position: absolute;
  right: 15px;
  top: 10px;
  width: 32px;
}

/* Toggle Info Spans (The 'X' lines) */
div.card div.card-title a.toggle-info span {
  background: #fff;
  display: block;
  height: 2px;
  position: absolute;
  top: 16px;
  transition: all 0.15s 0s ease-out;
  width: 12px;
}

div.card div.card-title a.toggle-info span.left {
  right: 14px;
  transform: rotate(45deg);
}

div.card div.card-title a.toggle-info span.right {
  left: 14px;
  transform: rotate(-45deg);
}

/* ---------------------------------------------------- */
/* --- Nested Card Title Headings --- */
/* ---------------------------------------------------- */
div.card div.card-title h2 {
  font-family: "Roboto", sans-serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.05em;
  margin: 0;
  padding: 0;
  color: var(--primary-color-light);
}

div.card div.card-title h2 small {
  font-family: "Roboto", sans-serif;
  display: block;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--primary-color-light);
}

/* ---------------------------------------------------- */
/* --- Nested Description and Actions --- */
/* ---------------------------------------------------- */
div.card div.card-description {
  padding: 0 15px 10px;
  position: relative;
  font-size: 14px;
  color: var(--primary-color-light);
}

div.card div.card-actions {
  box-shadow: 0 2px 0px 0 rgba(0, 0, 0, 0.075);
  padding: 10px 15px 20px;
  text-align: center;
}

/* ---------------------------------------------------- */
/* --- Nested Flap Elements (The 3D Effect) --- */
/* ---------------------------------------------------- */
div.card div.card-flap {
  /*
    SCSS: background: darken(#fff, 15);
    #fff darkened by 15% is #d9d9d9 (a light gray)
  */
  background: #d9d9d9;
  position: absolute;
  width: 100%;
  transform-origin: top;
  transform: rotateX(-90deg);
}

div.card div.flap1 {
  transition: all 0.3s 0.3s ease-out;
  z-index: -1;
}

div.card div.flap2 {
  transition: all 0.3s 0s ease-out;
  z-index: -2;
}

.services div.cards.showing div.card {
  cursor: pointer;
  opacity: 0.6;
  transform: scale(0.88);
}

.services .no-touch div.cards.showing div.card:hover {
  opacity: 0.94;
  transform: scale(0.92);
}

/* --- Base Card in "Show" State --- */
div.card.show {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* --- Nested Card Title Toggle Button --- */
div.card.show div.card-title a.toggle-info {
  background: var(--primary-color-light) !important;
}

/* Toggle Info Spans (Position change) */
div.card.show div.card-title a.toggle-info span {
  top: 15px;
}

div.card.show div.card-title a.toggle-info span.left {
  right: 10px;
}

div.card.show div.card-title a.toggle-info span.right {
  left: 10px;
}

/* --- Nested Flap Elements (The 3D open/close effect) --- */
div.card.show div.card-flap {
  background: #fff;
  transform: rotateX(0deg); /* Flap rotates to be flat/visible */
}

div.card.show div.flap1 {
  transition: all 0.3s 0s ease-out;
}

div.card.show div.flap2 {
  transition: all 0.3s 0.2s ease-out;
}

@media (max-width: 450px) {
.hero-image .home-hero-img-1 { height: 200px; } .hero-image .home-hero-img-2 { height: 160px; }
  .section-subtitle {
    width: 90%;
  }
  div.card {
    margin-bottom: 30px;
  }
  div.card,
  div.card img {
    width: 85%;
    max-width: none;
  }

  div.card img {
    width: 100%;
    max-width: none;
  }
}

/*================================================================================================================================*/
/*=========================================================== #CHI SIAMO =========================================================*/
/*================================================================================================================================*/

.chi-siamo h2.section-title,
.chi-siamo p.section-subtitle,
.contact-section {
  color: var(--primary-color-light);
  font-family: "Roboto", sans-serif !important;
}

.chi-siamo p.section-subtitle {
  max-width: 900px;
  margin: 20px auto;
  font-family: "Roboto", sans-serif !important;
}

.why-choose {
  font-family: "Roboto", sans-serif !important;
  color: var(--primary-color-light);
  padding: 20px 0;
}

/* Central container to limit width (optional, but good practice) */
.container {
  max-width: 1000px;
  margin: 0 auto;
}

/* --- Benefits Grid Layout (Flexbox) --- */
.benefits-grid {
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap on smaller screens */
  gap: 30px; /* Space between the benefit items */
}

/* --- Individual Benefit Item Style --- */
.benefit-item {
  flex: 1 1 200px; /* Grow: 1, Shrink: 1, Initial width: 200px (ensures responsiveness) */
  max-width: 25%; /* Ensures no more than 4 items per row on large screens */
  text-align: left;
}

.benefit-item h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
  /* You may want to use a bold/slightly different color for the benefit titles */
  color: var(--text-light);
}

.benefit-item p {
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.8;
  text-align: justify;
}

/* --- Responsiveness (Optional but recommended) --- */
@media (max-width: 430px) {
  .benefits-grid {
    padding: 0 20px;
    flex-direction: column;
    gap: 40px;
  }

  .benefit-item {
    max-width: 100%; /* One item per row, stacks vertically */
    flex: 0 1 auto; /* Grow: 1, Shrink: 1, Initial width: 200px (ensures responsiveness) */
  }
  .benefit-item svg,
  .benefit-item h3 {
    display: inline-block;
  }

  .benefit-item svg {
    margin-right: 10px;
  }

  .chi-siamo p.section-subtitle {
    width: 90%;
    margin: 20px auto;
    text-align: justify;
  }
}

/*================================================================================================================================*/
/*=========================================================== #CONTATTI ============================================================*/
/*================================================================================================================================*/
.contact-section {
  background-color: var(--secondary-color-dark);
  text-align: center;
}

.contact-grid {
  display: flex;
  justify-content: space-between; /* Evenly spaces the 3 items */
  align-items: flex-start; /* Aligns items to the top (important for vertical centering) */
  gap: 20px;
}

.contact-item {
  flex-basis: 30%; /* Gives each item roughly 1/3 of the space */
  padding: 10px;
}

.icon-circle {
  /* Dimensions and Shape */
  width: 80px;
  height: 80px;
  border-radius: 50%; /* Makes it a perfect circle */
  background-color: var(--primary-color-light);
  margin: 0 auto 15px; /* Centers the circle and adds space below */
  /* Centering the Icon inside the Circle (Flexbox) */
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-grid p,
.contact-grid a {
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 10px;
  /* You may want to use a bold/slightly different color for the benefit titles */
  color: var(--text-light);
}

.contact-grid p:hover,
.contact-grid a:hover {
  color: var(--primary-color-dark);
}

@media (max-width: 450px) {
  .contact-grid {
    flex-direction: column;
    align-items: center;
  }

  .contact-section {
    padding: 30px 0;
  }
}

/*================================================================================================================================*/
/*=========================================================== #FOOTER ============================================================*/
/*================================================================================================================================*/
footer .footer-logo {
  width: 50%;
}

footer .footer-logo-image {
  height: 100%;
  width: auto;
}

footer .socials {
  width: 50%;
  display: flex;
  gap: 20px;
  /* This shifts all child elements to the end of the main axis (the right) */
  justify-content: flex-end;
  align-items: center;
}

.p-iva,
.kleeva {
  color: var(--primary-color-light);
  text-align: center;
  font-family: "Roboto", sans-serif;
}

.p-iva,
.p-iva-contact {
  font-size: 10px;
  padding-bottom: 10px;
}

.kleeva,
.kleeva-contact {
  padding-bottom: 5px;
  font-weight: 500;
}

@media (max-width: 450px) {
  footer {
    max-width: 90%;
  }
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

/*================================================================================================================================*/
/*========================================================== PRODUCT PAGES ============================================================*/
/*================================================================================================================================*/

.tribune {
  background-image: linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)),
    url("Resources/backgrounds/noleggi-tribune-prosti-a-sedere-spalti-per-eventi-teatro-cinema-affitto-attrezzature-sedie-recnilabili-torino-cuneo-piemonte-valle-aosta-lombardia-nord-italia.jpg") !important;
}
.pavimentazioni {
  background-image: linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)),
    url("Resources/backgrounds/lantai-kayu-indonesia-GbHHAszWAzM-unsplash.jpg") !important;
}

.panche {
  background-image: linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)),
    url("Resources/backgrounds/03.jpg") !important;
}

.chapiteaux {
  background-image: linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)),
    url("Resources/backgrounds/noleggio-tendoni-da-circo-affitto-chapiteaux-.jpg") !important;
  background-position: 10% bottom;
}

.tendoni {
  background-image: linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)),
    url("Resources/backgrounds/noleggio-gazebo-tendone-tensostrutture-capannoni.jpeg") !important;
}

.riscaldamento {
  background-image: linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)),
    url("Resources/impianti-riscaldamento/03.jpg") !important;
  background-position: 5% bottom;
}

.catering {
  background-image: linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)),
    url("Resources/backgrounds/catering-desktop.jpg") !important;
  background-position: 5% bottom;
}

.audio-e-luci {
  background-image: linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)),
    url("Resources/noleggio-affitto-tendoni-tensostruttre-per-eventi-in-torino/affitto-noleggio-impianti-attrezzatura-audio-stereo-casse-discoteca-luci-illuminazione-per-feste-fiere-di-paese-e-concerti-a-torino-e-nord-italia.jpg") !important;
  background-position: 5% bottom;
}

.audio-e-luci {
  background-image: linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)),
    url("Resources/noleggio-affitto-tendoni-tensostruttre-per-eventi-in-torino/affitto-noleggio-impianti-attrezzatura-audio-stereo-casse-discoteca-luci-illuminazione-per-feste-fiere-di-paese-e-concerti-a-torino-e-nord-italia.jpg") !important;
  background-position: 5% bottom;
}

.palco {
  background-image: linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)),
    url("Resources/backgrounds/palco-phone.webp") !important;
  background-position: 25% bottom;
}

.product-hero h1,
.product-hero h4 {
  font-family: "Libre Caslon Display", serif;
  text-align: center;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black,
    1px 1px 0 black;
}

.product-hero h4 {
  font-size: 32px;
  max-width: 1200px;
}

.product-details {
  display: flex;
  max-width: 900px;
  margin: 0 auto;
  gap: 40px;
}

.product-details-carousel,
.product-details-text {
  padding: 40px 0;
  width: 50%;
}

/*------------------------ SWIPER ------ */

.swiper {
  border-radius: 20px;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  height: auto;
  width: 100%;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Removing the default buttons */
.swiper-button-next::after,
.swiper-button-prev::after {
  content: none !important;
}

/* Redefining the buttons*/
.swiper-button-next::after {
  content: "→" !important;
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-color-dark);
  padding: 10px;
  border-radius: 50%;
  background: var(--secondary-color-dark);
  margin-right: 10px;
  animation: pulse-shadow 1s infinite ease-out;
}

.swiper-button-prev::after {
  content: "←" !important;
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-color-dark);
  padding: 10px;
  border-radius: 50%;
  background: var(--secondary-color-dark);
  margin-left: 10px;
}

/* Plusing effect to the buttons */

/* --- KEYFRAME DEFINITIONS (Should be first) --- */
@keyframes pulse-shadow {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(153, 124, 35, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(153, 124, 35, 0);
  }
}

/* --- ELEMENT STYLING (Calls the animation) --- */
.swiper-button-prev::after {
  /* ... other styles ... */

  /* The browser will look up the definition above */
  animation: pulse-shadow 2s infinite ease-out;
}

.swiper-pagination:active {
  background-color: var(--primary-color-dark);
}

.swiper-pagination-bullet {
  background-color: var(--white);
  opacity: 0.7; /* Make them slightly faded */
}

.swiper-pagination-bullet-active {
  background-color: var(--primary-color-dark);
  opacity: 1; /* Make it fully visible */
  border: solid 1px white;
}

/*------------------------ PRODUCT DETAILS TEXT ------ */
.product-details-text h2,
.product-details-text p {
  text-align: center;
  font-family: "Roboto", sans-serif !important;
  color: var(--primary-color-dark);
}

.product-details-text h2 {
  margin-bottom: 20px;
  font-size: 40px;
}

.product-details p {
  font-size: 18px;
  text-align: justify;
}

@media (max-width: 600px) {
  .product-hero h1 {
    font-size: 60px;
    line-height: 80px;
  }

  .product-hero h4 {
    font-size: 30px;
  }
  .product-hero {
    background-size: auto 100%;
  }

  .tribune {
    background-image: linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)),
      url("Resources/backgrounds/tribune.jpg") !important;
    background-position: 20% bottom;
  }

  .panche {
    background-image: linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)),
      url("Resources/backgrounds/03.jpg") !important;
  }

  .chapiteaux {
    background-image: linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)),
      url("Resources/backgrounds/chapiteaux.jpg") !important;
  }

  .tendoni {
    background-image: linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)),
      url("Resources/backgrounds/tendone.jpg") !important;
    background-position: center;
  }

  .riscaldamento {
    background-image: linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)),
      url("Resources/backgrounds/riscaldamento-phone.jpg") !important;
  }

  .catering {
    background-image: linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)),
      url("Resources/backgrounds/catering-phone.jpg") !important;
  }

  .audio-e-luci {
    background-image: linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)),
      url("Resources/noleggio-affitto-tendoni-tensostruttre-per-eventi-in-torino/affitto-noleggio-impianti-attrezzatura-audio-stereo-casse-discoteca-luci-illuminazione-per-feste-fiere-di-paese-e-concerti-a-torino-e-nord-italia.jpg") !important;
  }

  .palco {
    background-image: linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)),
      url("Resources/backgrounds/palco-desk.webp") !important;
    background-position: top;
  }

  .product-details {
    flex-direction: column-reverse;
    gap: 0px;
    padding: 20px 0;
  }

  .product-details-carousel,
  .product-details-text {
    width: 90%;
    margin: 0 auto;
    padding: 20px 0;
  }
}

@media (max-width: 1199px) {
  .panche {
    background-position: 60% center;
  }
}

/*================================================================================================================================*/
/*======================================================== CONTACT PAGE ==========================================================*/
/*================================================================================================================================*/

.contact-qr-code {
  display: flex;
  flex-direction: column;
  max-width: 750px;
  margin: 0 auto;
  font-family: "Roboto", sans-serif !important;
  padding: 30px 0;
}

.contact-qr-code h1 {
  text-align: center;
  color: var(--primary-color-light);
  margin-bottom: 30px;
}

.contact-qr-code img {
  width: 600px;
  max-width: 80%;
  margin: 0 auto;
}

.footer-contact {
  background-color: var(--primary-color-light);
  padding: 20px 20px;
  width: 100%;
  max-width: none;
}

.kleeva-contact,
.p-iva-contact {
  color: var(--white) !important;
  background-color: var(--primary-color-light);
  text-align: center;
  font-family: "Roboto", sans-serif;
}

/*================================================================================================================================*/
/*========================================================== 404 PAGE ============================================================*/
/*================================================================================================================================*/

.site-header {
  color: var(--primary-color-light);
}

.button-404 {
  font-size: 20px;
  background-color: var(--primary-color-light);
  border: none;
  font-family: "Roboto", sans-serif !important;
  padding: 10px;
  color: var(--white);
  border-radius: 100px;
}

.thank-you-page img {
  height: 200px;
  margin: 30px;
}

.thank-you-page h1 {
  font-size: 40px;
}
p.main-content__body {
  color: var(--primary-color-light);
  margin-bottom: 20px;
}

.thank-you-page footer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.thank-you-page footer p {
  color: var(--primary-color-light);
}