/*------------------------------------------------------------------
Project:  ComingSoon - Layout definitivo (testo sinistra bianco, countdown destra nero con linea divisoria verticale)
Autore:   Giorgio Zanetti
-------------------------------------------------------------------*/

/*=== BASE ===*/
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  line-height: 1.6;
  color: #000;
  background-color: #fff;
  overflow-x: hidden;
}

/*=== STRUTTURA GENERALE ===*/
.size1 {
  display: flex;
  flex-direction: row-reverse; /* countdown a destra */
  width: 100%;
  min-height: 100vh;
}

/*=== COLONNA TESTO (sinistra) ===*/
.size3 {
  flex: 0 0 55%;
  background-color: #fff !important;
  color: #000 !important;
  padding: 80px 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  position: relative;
}

/* linea di separazione verticale */
.size3::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background-color: #000;
  opacity: 0.15;
}

/*=== TESTO ===*/
.size3 h1, .size3 h2, .size3 h3 {
  color: #000 !important;
  margin-top: 0;
  line-height: 1.3;
}

.size3 p {
  color: #111 !important;
  font-size: 16px;
  margin-bottom: 16px;
}

/*=== COLONNA COUNTDOWN (destra) ===*/
.size2 {
  flex: 0 0 45%;
  background-color: #000 !important;
  display: flex;
  justify-content: center;
  align-items: flex-start !important;
  box-sizing: border-box;
  padding-top: 60px !important;
  min-height: 100vh;
}

/*=== CONTAINER COUNTDOWN ===*/
.cd100 {
  display: flex;
  flex-direction: column; /* ora i cerchi tornano in colonna */
  justify-content: flex-start;
  align-items: center;
  gap: 40px;
  margin-top: 0 !important;
  width: 100%;
}

/* singoli blocchi */
.cd100 .flex-col-c-m {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 0;
}

/*=== CERCHI E TESTO ===*/
.bor2 {
  border: 3px solid rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  width: 140px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.cd100 .l2-txt1 {
  font-family: "Lato", sans-serif;
  font-size: 44px;
  font-weight: 700;
  color: #000;
  line-height: 1.2;
}

.cd100 .s2-txt4 {
  font-family: "Lato", sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  color: #000;
  text-transform: uppercase;
  margin-top: 8px;
}

/*=== LOGO ===*/
.wrap-pic1 {
  margin-bottom: 40px; /* era 160px — ora più compatto */
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

.wrap-pic1 img {
  max-width: 280px;
  height: auto;
  display: block;
}


/*=== INPUT E FORM ===*/
.wrap-input100 {
  background-color: #f7f7f7 !important;
  border: 2px solid #ddd !important;
  border-radius: 5px;
  height: 50px;
  margin-bottom: 10px;
}

.input100 {
  width: 100%;
  height: 100%;
  background: transparent !important;
  color: #000 !important;
  padding: 0 20px;
}

.input100::placeholder {
  color: #777 !important;
}

/*=== COLORI GENERALI ===*/
.bg0, .bg1, .bg3, .bg4, .bg5, .bg-img1,
.overlay1, .overlay2, .where1, .where2 {
  background: #fff !important;
  background-image: none !important;
  color: #000 !important;
}

.overlay1::before, .overlay1::after,
.overlay2::before, .overlay2::after {
  content: none !important;
  background: none !important;
}

/*=== RESPONSIVE ===*/
@media (max-width: 992px) {
  .size1 {
    flex-direction: column;
  }

  .size2, .size3 {
    width: 100%;
    flex: 1 1 100%;
  }

  .size3::after {
    display: none; /* rimuove linea su mobile */
  }

  .size3 {
    padding: 50px 30px;
  }

  .size2 {
    padding-top: 40px !important;
  }

  .cd100 {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
  }

  .bor2 {
    width: 100px;
    height: 100px;
  }

  .cd100 .l2-txt1 {
    font-size: 32px;
  }
}