@charset "utf-8";
/* CSS sezione globale sito */
/* Diego Bosco 
---------------------------------
0) sezione globale*/
body.no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* 1) sezione mylist
*/

#ListContainer {position: fixed;bottom: 100px;left: 20px;background-color:bisque;border-radius: 10px; box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.5);padding-bottom: 15px; display: none;z-index: 1500;max-height: 630px; min-height: 410px;}
.listcontens {width: 320px;max-height: 570px;min-height: 410px;overflow-y: auto;padding: 5px;padding-bottom: 50px;}
.chat-header {background:#585858;color: white;padding: 6px;text-align: center; font-weight: bold; position: relative;border-top-left-radius: 10px;border-top-right-radius: 10px;}
.close-btn { position: absolute; top: -15px; right: -15px; background:#C95A5C;color: white;border: none;width: 35px;height: 35px;border-radius: 50%;font-size: 18px;display: flex;align-items: center;justify-content: center;cursor: pointer;z-index: 1051;box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);}

/* fine sezione mylist
---------------------------------
2) sezione index home
*/
.cky-btn-revisit-wrapper.cky-revisit-bottom-left {right: 5px !important;left: auto !important;}
.logo-finanziaria {width: 100%; max-width: 220px; height: auto;}
@media (max-width: 768px) {.logo-finanziaria {max-width: 120px; }}
@media (max-width: 480px) {.logo-finanziaria {max-width: 100px;}}

/* fine sezione index home
---------------------------------

/* =========================
   BANNER / SLIDER
========================= */
#banner{margin-top:70px}#banner .carousel-item{position:relative}#banner .carousel-item img,.carousel-video{width:100%;height:93vh;object-fit:cover;object-position:center;display:block}.carousel-inner{overflow:hidden}#banner .carousel-caption{position:absolute;top:90px;left:60px;color:#fff;font-weight:700;font-size:clamp(24px,4vw,48px);z-index:10;text-shadow:2px 2px 6px rgba(0,0,0,.7)}.top-title{position:absolute;top:120px;left:60px;z-index:10;color:#fff;text-shadow:2px 2px 8px rgba(0,0,0,.8)}#banner .carousel-item:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:35%;background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,0));z-index:2}.hero-bottom{position:absolute;bottom:0;left:0;width:100%;padding:25px 20px;background:rgba(61,60,60,.25);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;justify-content:center;border-top:1px solid rgba(255,255,255,.1);z-index:5}.hero-content{text-align:center;color:#fff;max-width:800px}.hero-content h4{margin-bottom:5px}.hero-content h5{margin-bottom:15px;font-weight:300}.img_size{width:5vw}.carousel-control-prev,.carousel-control-next{width:auto}.carousel-control-prev-icon,.carousel-control-next-icon{background-color:darkgrey;border-radius:50%;width:50px;height:50px;background-size:50% 50%;background-position:center;background-repeat:no-repeat;box-shadow:0 2px 8px rgba(0,0,0,.3)}@media(max-width:768px){#banner{margin-top:72px}#banner .carousel-caption{top:80px;left:20px;font-size:clamp(20px,8vw,32px)}.top-title{top:80px;left:20px}.img_size{width:12vw}.carousel-video{height:59vh}#banner .carousel-item img{height:50vh}.hero-bottom{position:relative;background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border-top:none;padding:20px 15px}.hero-content{color:#000}.hero-content h4,.hero-content h5{color:#000!important;text-shadow:none}.hero-content .btn{width:100%;padding:14px;font-size:18px;border-radius:8px}}
/* fine sezione slider

/* =========================
4) sezione categorie home
============================*/

.custom-button { background: transparent; border: none;padding: 10px; display: flex;flex-direction: column; align-items: center; width: 170px;  height: 120px; cursor: pointer; margin-top: 95px;}
.button-text {font-size: 16px;font-weight: bold; color: black; margin-bottom: 25px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);}
.btn-glow:hover {box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);transition: box-shadow 0.3s ease-in-out; }
.uploadable-image {max-width: 100%; height: auto; }
.sfondo {background-color: #AAAAAA; background-image: url('images/skiline.webp'); background-position: top; display: flex;flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; margin-top: -50px; }
/* fine sezione categorie Home
---------------------------------

5) sezione blackroom
*/
.background-container-promo {position: relative; width: 100%; height: 740px; background-image: url("../images/sfondi/sfondo_blackroom.webp"); background-size: cover; background-position: left;}
.W_100img{ width: 100% !important;}
.carousel-promo {position: absolute; bottom: 38px; left: 33px; max-height: 560px; max-width: 460px; overflow: hidden;}
.carousel-promo img { width: auto; height: 100%; border-radius: 10px; }
.blocconotes { font-family: 'Rock Salt', cursive; color: black; position: absolute; left: 55px; top: 100px; width: 400px; font-size: clamp(18px, 2vw, 60px); z-index: 999; text-align: center;}
.appunti{ font-family: 'Rock Salt', cursive; color: black; font-size: 12px;	display: block;}	
.lavagna {font-family: 'Rock Salt', cursive; color: white; position: absolute; left: 850px; top: 50px; max-width: 800px;font-size: clamp(18px, 2vw, 60px); }
.social-icons img {width: 100px; height: auto; }
@media (max-width: 1200px) { .social-icons img {width: 80px;} }
@media (max-width: 1050px) {.lavagna {display: none;} .background-container-promo {width: 100%;	height: 520px;} .carousel-promo {max-height: 460px; max-width: 380px; overflow: hidden;} .blocconotes {left: 15px; top: 65px; width: 320px; } .W_100img{ width: 94% !important;} }

/* fine sezione blackroom
---------------------------------
6) sezione testimonial 
*/

.center-carusel { background: linear-gradient(to bottom, #cccccc, #777777); min-height: 60vh; display: flex; flex-direction: column;padding-top: 20px; align-items: center; text-align: center; color: white;}
.carousel-container { width: 90%; max-width: 1000px; background: white; padding: 20px; border-radius: 10px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); }
#photoCarousel .carousel-item img { width: 100%; height: 400px; object-fit: cover; border: 10px solid white; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); }

/*---------------------------------
7) sezione consensi GDPR 
---------------------------------*/
#cookieBanner { backdrop-filter: blur(10px);} .modal-content{animation: fadeInScale 0.2s ease;} @keyframes fadeInScale {from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }}



.modal {
  display: none; /* hidden di default */
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}

.modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;*/
  position: relative;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  animation: fadeIn 0.3s ease;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
}

.hidden {
  display: none;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/*---------------------------------
8) Rotazione Testo in catalogo usato
---------------------------------*/
.text-rotator {
  min-width: 260px;
  text-align: center;
  font-weight: 600;
  color: #325487;
}

#dynamicText {
  display: inline-block;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-out {
  opacity: 0;
  transform: translateY(8px);
}

.fade-in {
  opacity: 1;
  transform: translateY(0);
}