html{
  font-size: 17px;
}
*{
  margin: 0!important;
  box-sizing: border-box;
  line-height: 30px;
 

}
body{
    word-spacing: 5px;
    letter-spacing: 1px;
    margin: 0!important;
}
:root{
 
    --color1:#000000;
    --color2:#202A44;
    --color3:#202A44;
  /* --color3:#14d5c1;*/
    --color4:#f5f5f5;
    --color5:#000000;
    --color6:#cecbcb1e;
    --color7:#7b0000;
   

}
/*fixed the header bar where logo tel slogan and menu*/
#fixed-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  background-color: white; /* or your header background color */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* optional: for depth */
}


body {
  padding-top: 180px; /* Adjust depending on header height */
}


/* this container that contains page title under menu*/
.title-container{
background-color: var(--color3);
min-height: 120px;
display: flex;
justify-content: flex-start;
align-items: flex-end;
padding: 20px;
}
.title-container h2{
padding: 0 0 30px 30px;
color: var(--color4);
}
.site-logo img {
width: 120px !important;
height: auto;
object-fit: contain;
padding:0;
margin:0;
}
.slogan{
font-size: 1.2rem;
}
.border{
border: 1px solid #000000;
border-radius: 10px;
}


.border-bottom-left-radius{
border-bottom-left-radius:30px;
}
/* this is for detecting img inside product info section */
.product-info>div>div>figure{
display: flex;
justify-content: center;
}
.product-info>div>div>figure>img{
width: 250px !important;
height: auto;
}
.font-s{
font-size: 20px;
}
.font-m{
font-size: 40px;
}
.font-l{
font-size: 60px;
}
.font-xl{
font-size: 80px;
}
.bg-color1{
  background-color: var(--color1);
}
.bg-color2, .bg-color5{
  background-color: var(--color2);
}
.bg-color3{
  background-color: var(--color3);
}


.color1{
  color: var(--color1);
}
.color2{
  color: var(--color2);
}
.color3{
  color: var(--color3);
}
.color4{
  color: var(--color4);
}
.color5{
color:var(--color5)
}
.color-goldenrod{
color: goldenrod;
font-size: 1.2rem;
}
.color-goldenrod:hover,
.color-goldenrod:active,
.color-goldenrod:focus,
.color-goldenrod:visited
{
color: goldenrod;

}
.color7{
color: red;
}
.service-infissi{
border:1px solid var(--color6);
border-radius:10px;
padding: 20px;
transition: 0.4s ease-in-out;
background-color: var(--color6);
}
.service-infissi:hover{
translate: 0 -5px;
}

.a-style{
  text-decoration: none;
}
a, a:visited,  a:hover,  a:focus{
  color: var(--color1);
  text-decoration: none;
}
.btn-link{
  color:var(--color4);
  background-color: var(--color3);
}
.a-btn-link{
color:var(--color1);
background-color: var(--color3);
text-decoration: none;
padding: 10px;
transition: 1s ease-in-out;
border: 1px solid transparent;
border-radius: 10px;
}
.a-btn-link:hover{
color:var(--color1);
background-color: var(--color2);
border: 1px solid var(--color1);
transform: translateY(5px);
}
.landing-page-prodotto-link{
text-decoration: none;
position: relative;
margin-bottom:10px !important ;
color:var(--color4);
background-color: #0000002d;
padding: 10px;
border-radius: 10px;
transition: 1s ease-in-out;
cursor: pointer;
}
.landing-page-prodotto-link:hover{
transform: scale(1.1);
}
/*contatti in menu color change*/
/* #mega-menu-item-144 > a {
color: red !important;
} */


#mega-menu-item-673 > a:hover,
#mega-menu-item-676 > a:hover {
color: var(--color3);
}
/* footer menu*/
.footer-menu {
  display: block;
  list-style-type: none;
  padding: 0;
  text-align: left;

 
}
.footer-menu li {
  margin: 10px 0; /* Space between items */
  text-decoration: none;
  list-style-type: none;
  margin-left: 0;
}
.footer-menu a {
  text-decoration: none; /* Remove underline */
  color: var(--color4);
  display: block;
  transition: color 0.3 ease;
  font-size: 15px;
  margin-left: 0;

}
.footer-menu a:hover {
  color: var(--color4);


}
.website-design,
.website-design:hover{
  color:var(--color4);
}
/* socail media icons*/
.fa {
  padding: 10px;
  font-size: 30px;
  width: 70px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  opacity: 1;
  color: var(--color4);
  transition: 0.5s ease-in-out;
 }
.fa:active, .fa:focus, .fa:visited{
  color: var(--color4);
}

 /* Add a hover effect if you want */
 .fa:hover{
  opacity: 1;
  color: var(--color4);
  background-color: var(--color1);
}
.whatsapp-button {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width:50px;
  height:50px;
  transition: transform 0.3s ease-in-out;
  z-index: 1000;
  border-radius: 50%;
 
}
/* on hover is a class that selected in every div in all products*/
.onhover{
  background-color: #535a5808;
  transition:0.5s ease-in-out;
  border-radius: 20px;
}
.onhover:hover {
  background-color: #3d414016;


}
/*all classes start with scroll-animate us to animate this on various pages are in valoresicurezza.js file*/
.scroll-animate-fade-up


/*all classes start with scroll-animate us to animate this on various pages are in valoresicurezza.js file*/

/* .fa-facebook {
  background: #3B5998;
  color: white;
}
.fa-twitter {
  background: #55ACEE;
  color: white;
}
.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.fa-pinterest {
  background: #cb2027;
  color: white;
}

.fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
  background: #00aff0;
  color: white;
}

.fa-android {
  background: #a4c639;
  color: white;
}

.fa-dribbble {
  background: #ea4c89;
  color: white;
}

.fa-vimeo {
  background: #45bbff;
  color: white;
}

.fa-tumblr {
  background: #2c4762;
  color: white;
}

.fa-vine {
  background: #00b489;
  color: white;
}

.fa-foursquare {
  background: #45bbff;
  color: white;
}

.fa-stumbleupon {
  background: #eb4924;
  color: white;
}

.fa-flickr {
  background: #f40083;
  color: white;
}

.fa-yahoo {
  background: #430297;
  color: white;
}

.fa-soundcloud {
  background: #ff5500;
  color: white;
}

.fa-reddit {
  background: #ff5700;
  color: white;
}

.fa-rss {
  background: #ff6600;
  color: white;
}
.fa-whatsapp{
  color: rgb(0, 128, 0);
  background-color: white;
} */
.privacy-policy-link{
  text-decoration: none;
  font-size: 25px;
}
.privacy-policy-link:hover, .privacy-policy-link:focus, .privacy-policy-link:active{
  color: var(--color3);
}
.notranslate {
  translate: no;
}
/*centrale page click hide and show section also in valoresicurezza.js
*/
.info-section{
margin-bottom: 20px;
border-bottom: 1px double var(--fc);
}




.all-info-title {
cursor: pointer;
margin: 0;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
transition: 1s ease-in-out;


}


.arrow {
font-size: 40px;
color: var(--fc);
transition: transform 0.5s ease;
}
.all-info-title.active{
background-color: var(--fc);
color: var(--bc);
}




.all-info-title.active .arrow {
transform: rotate(-180deg);
color: var(--bc);
}




.all-info-content {
display: none;

}
/*on click show and hide*/
.toggle-arrow {
  float: right;
  font-size: 25px;
  margin-left: 10px;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.toggle-arrow.up {
  transform: rotate(0deg); /* Optional: rotate down to up */
}
.product-info h3.active {
  background-color: var(--color3);
  color:var(--color4);
}
.product-info h3{
  padding: 10px 10px;
}



/*
.site-footer {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
} */
/* Cookie Banner Styling */
.cookie-banner {
  position: fixed;
  bottom: -200px; /* Hidden below the viewport initially */
  left: 50%;
  transform: translateX(-50%); /* Center the banner */
  width: 80%; /* Adjust the width as needed */
  max-width: 400px; /* Maximum width for larger screens */
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 15px;
  border-radius: 10px; /* Rounded corners for the square window */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
  transition: bottom 0.5s ease; /* Smooth transition for sliding */
  display: none; /* Initially hide the banner */
  z-index: 9999;
}
/* Button Styles */
.cookie-banner button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 15px;
  margin-left: 10px;
  cursor: pointer;
  border-radius: 3px;
}
/* Styling for the Reject button */
.cookie-banner button:last-of-type {
  background-color: #f44336; /* Red color for Reject */
}





/* Make form fields responsive */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select {
  width: 100%; /* Full width on all devices */
  max-width: 100%; /* Avoid overflow */
  box-sizing: border-box;
  height: 40px;
  border: 1px solid var(--color3);
  border-radius: 10px;
}
/* Adjust submit button */
.wpcf7-form input[type="submit"] {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
  display: block;
}
.wpcf7-form input[type="submit"] {
  background-color: var(--color3); /* Default color */
  color: #fff; /* Text color */
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.wpcf7-form input[type="submit"]:hover {
  transition: 0.3 ease-in-out;
  background-color: var(--color2);
}
.wpcf7-form textarea{
width: 100%;
border: 1px solid var(--color3);
border-radius: 10px;
}
.flex-column-reverse {
  flex-direction: row;
}
/*on home page header*/
.h1-on-home{
font-size: 100px !important;
}
/* contact btn on home  */
.btn-contatti-on-home{
width:auto;
font-weight: bold;
text-shadow: none;
padding: 15px 10px;
}
/* lascia il ricapito in footer*/
.a-btn-link-recapiti,
.a-btn-link-recapiti:active,
.a-btn-link-recapiti:focus{
color: var(--color4) !important;
background-color: var(--color7);
border: 1px solid var(--color4);
border-radius: 40px;
min-width: 200px;
height: auto;
padding: 15px;
transition: 1s ease;
margin:0;
}
/* lascia il ricapito in footer*/
.a-btn-link-recapiti:hover{
color: var(--color7);
background-color: var(--color4);
border: 1px solid var(--color7);
border-radius: 40px;
}
.landing-page-chiedi-info{
color:red;
background-color:var(--color5);
border:1px solid #000000 ;
border-radius: 50px;
transition: 1s ease-in-out;
}
.landing-page-chiedi-info:hover{
color:red;
background-color:var(--color5);
transition: 1s ease-in-out;
}
/* amination on home page for dovi cambiare infissi div */
.text-main {
position: absolute;
bottom: -50px; /* Start from below the visible area */
left: 50%;
transform: translateX(-50%);
color: white;
font-size: 2rem;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
opacity: 0;
animation: moveToCenter 2s ease-out forwards;
}
@keyframes moveToCenter {
0% {
  bottom: -50px; /* Start position */
  opacity: 0;
}
50% {
  opacity: 1;
}
100% {
  bottom: 30%; /* Center vertically */
  opacity: 1;
  transform: translate(-50%, 50%);
}
}
/* marquee with brands on home page*/
.marquee-container {
width: 100%;
background-color: #7a7b7c22;
padding: 15px 0;
}
.marquee-content {
display: flex;
animation: marquee 20s linear infinite;

}
.marquee-item {
flex: 0 0 auto;
padding: 0 20px;
font-size: 1.2rem;
cursor: pointer;
}
.marquee-item>a>img{
filter:grayscale(10);
}
.marquee-item>a>img:hover{
filter:grayscale(0);
}
.marquee-item>img{
filter:grayscale(10);
}
.marquee-item>img:hover{
filter:grayscale(0);
}

@keyframes marquee {
0% {
  transform: translateX(20%);
}
 50% {
  transform: translateX(-5%);
}
100% {
  transform: translateX(20%);
}
}
/* Optional: Pause animation on hover */
.marquee-container:hover .marquee-content {
animation-play-state: paused;
}
.text-news-p {
font-size: 20px;
color: #dfdcdc;
transition: 1s ease-in-out;
cursor:pointer;
}
.text-news-p:hover {
transform: scale(1.1);
color: var(--color3);
background-color: #00000066;
}
 /* Media query per schermi piccoli */
@media (max-width: 768px) {
/*on home page header*/
  .h1-on-home{
    font-size: 30px !important;
  }
  .title-container{
    background-color: var(--color3);
    min-height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    padding:0;
    margin: 0 !important;
  }
  .title-container>h2{
   color: var(--color4);
  }

  .site-logo img {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain;
    padding:0;
    margin:0;
}
  /* contact btn on home  */
  .btn-contatti-on-home{
    width:100%;
    padding: 15px 10px;
    margin-left: 100px;
    margin-bottom:auto;
 
  }
  .a-btn-link-recapiti{
color: var(--color1) !important;
background-color: var(--color3);
border: 1px solid var(--color1);
border-radius: 40px;
font-size: 15px;
padding: 5px;
height: auto;
transition: 1s ease;

}

      .flex-column-reverse {
          flex-direction: column-reverse;
      }
      .carousel-height-on-mobile{
         display: none;
      }
      .carousel-show-on-mobile{
          display: flex;
          padding: 0;
          margin: 0;
      }
      .whatsapp-button {
        position: fixed;
        bottom: 20px;
        left: 20px;
        width:50px;
        height:50px;
        transition: transform 0.3s ease-in-out;
        z-index: 1000;
        border-radius: 50%;
       
      }
      .slogan{
        font-size: 1rem;
      }
     }
    @media (max-width: 468px) {
      .a-btn-link-recapiti{
    color: var(--color1);
    background-color: var(--color3);
    border: 1px solid var(--color1);
    border-radius: 40px;
    font-size: 10px;
    font-weight: 800;
    padding: 20px 15px;
    margin: 0;
    height: auto;
    transition: 1s ease;
   
  }
  .whatsapp-button {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width:50px;
    height:50px;
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
    border-radius: 50%;
   
  }
}