/* ==============================
   RESET & FONT
============================== */
@font-face {
  font-family: Montserrat-Regular;
  src: url('../fonts/Montserrat/Montserrat-Regular.ttf'); 
}
@font-face {
  font-family: Montserrat-Light;
  src: url('../fonts/Montserrat/Montserrat-Light.ttf'); 
}
@font-face {
  font-family: Montserrat-Bold;
  src: url('../fonts/Montserrat/Montserrat-Bold.ttf'); 
}
@font-face {
  font-family: Montserrat-Black;
  src: url('../fonts/Montserrat/Montserrat-Black.ttf'); 
}

/* ==============================
   BODY & BACKGROUND
============================== */
body, html {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat-Regular', sans-serif;
  width: 100%;
  height: 100%;
  background: #0f0016; /* fallback */
}

.bg-g1 {
  background: linear-gradient(-45deg, #0f0016, #37353a, #ff0101);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 100px 20px;
  box-sizing: border-box;
  text-align: center;
}

/* ==============================
   TEXT STYLES
============================== */
.l1-txt1 { font-family: Montserrat-Black; font-size: 50px; color: #fff; line-height: 1.2; text-transform: uppercase; }
.l1-txt2 { font-family: Montserrat-Light; font-size: 30px; color: #fff; line-height: 1.2; margin-bottom: 40px; }

.how-countdown {
  display: inline-block;
  background-color: #fff;
  border-radius: 18px;
  width: 80px;
  height: 80px;
  margin: 10px;
  text-align: center;
  line-height: 80px;
  font-family: Montserrat-Bold;
  font-size: 24px;
  color: #333;
}

.how-countdown span.s1-txt1 {
  display: block;
  font-size: 12px;
  line-height: normal;
  color: #7d8da6;
}

/* ==============================
   BUTTONS
============================== */
.how-btn {
  padding: 12px 25px;
  background-color: transparent;
  border-radius: 25px;
  border: 2px solid #fff;
  color: #fff;
  font-family: Montserrat-Bold;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  margin-top: 20px;
}

.how-btn:hover {
  background: linear-gradient(45deg, #ac32e4, #7918f2, #4801ff);
  border-color: transparent;
}

/* ==============================
   MODAL
============================== */
.modal-subscribe {
  width: 90%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 10px;
  padding: 40px 20px;
  margin: auto;
  position: relative;
  text-align: center;
}

.modal-subscribe h3 { font-family: Montserrat-Black; font-size: 22px; margin-bottom: 20px; }
.modal-subscribe p { font-family: Montserrat-Regular; font-size: 14px; color: #555; margin-bottom: 30px; }

.wrap-input100 {
  width: 100%;
  height: 45px;
  border: 2px solid #e6e6e6;
  border-radius: 25px;
  margin-bottom: 15px;
  padding: 0 15px;
  font-family: Montserrat-Bold;
}

/* ==============================
   RESPONSIVE
============================== */

/* Tablets */
@media (max-width: 992px) {
  .l1-txt1 { font-size: 40px; }
  .l1-txt2 { font-size: 25px; }
  .how-countdown { width: 70px; height: 70px; line-height: 70px; font-size: 20px; }
  .how-btn { font-size: 15px; padding: 10px 20px; }
}

/* Mobile */
@media (max-width: 576px) {
  .l1-txt1 { font-size: 32px; }
  .l1-txt2 { font-size: 20px; }
  .how-countdown { width: 60px; height: 60px; line-height: 60px; font-size: 18px; margin: 5px; }
  .how-btn { font-size: 14px; padding: 8px 18px; }
  .bg-g1 { padding: 60px 15px; }
  .modal-subscribe { padding: 30px 15px; }
  .wrap-input100 { height: 40px; padding: 0 10px; }
}