/* JZ Tech - Clean Stylesheet (stylesheet2.css)
   Final working version with Contact Band + Banner
*/

:root {
      --bg: #ffffff;
      --text: #222222;
      --muted: #5a5a5a;
      --border: #dddddd;
      --maxw: 1200px;
}

* {
      box-sizing: border-box;
}

html, body {
      margin: 0;
      padding: 0;
      background-color: #828282;
      color: var(--text);
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.5;
}

a {
      color: inherit;
      text-decoration: none;
}

a:hover {
      text-decoration: underline;
}

/* ============================= */
/* Banner                         */
/* ============================= */

.topbar {
      background-color: #828282;
}

.banner-bar {
      padding: 0;
}

.banner-wrap {
      position: relative;
      max-width: 1600px;
      margin: 0 auto;
}

.site-banner {
      display: block;
      width: 100%;
      height: auto;
}

/* Contact button on banner */
.contact-btn {
      position: absolute;
      top: 35px;
      left: 1340px;
}

.contact-btn img {
      display: block;
      border-radius: 10px;
}

/* ============================= */
/* Contact Band                   */
/* ============================= */

.contact-band {
      position: relative;
      width: 100%;
      background: url("images/bglights.png") center center / cover no-repeat;
      padding: 70px 0 80px 0;
}



.contact-band::before
{
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
            to right,
            rgba(0,0,0,.55) 0%,
            rgba(0,0,0,.45) 35%,
            rgba(0,0,0,.60) 100%
      );
}


.contact-inner {
      position: relative;
      width: var(--maxw);
      max-width: 92%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      gap: 120px;
      color: #ffffff;
}

/* LEFT */
.contact-left {
      width: 42%;
      min-width: 320px;
}

.contact-title {
      color: #f2c24f;
      font-size: 34px;
      font-weight: 700;
      margin-bottom: 30px;
}

.c-row {
      display: flex;
      align-items: center;
      gap: 18px;
      margin: 18px 0;
}

.c-ico {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #f2c24f;
      color: #1a1a1a;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 18px;
}

.c-txt {
      color: #f2c24f;
      font-size: 18px;
      line-height: 1.35;
}

/* RIGHT */
.contact-right {
      width: 58%;
}

.c-label {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 12px;
      color: #ffffff;
}

.c-req {
      color: #ff2d2d;
      font-weight: 800;
}

.c-two {
      display: flex;
      gap: 30px;
      margin-bottom: 26px;
}

.c-col {
      flex: 1;
}

.c-in {
      width: 100%;
      height: 34px;
      background: #ffffff;
      border: 1px solid rgba(255,255,255,.35);
      border-radius: 0;
      padding: 6px 10px;
      font-size: 14px;
      color: #222222;
}

.c-sub {
      margin-top: 8px;
      font-size: 11px;
      color: rgba(255,255,255,.85);
}

.c-wide {
      width: 80%;
      margin-bottom: 26px;
}
.c-form {
      margin: 0;
}
.c-msg {
	display: block;
      width: 80%;
      height: 160px;
      padding-top: 10px;
      resize: vertical;
      margin-bottom: 26px;
}

.c-btn {
	display: inline-block;
      margin-top: 6px;
      background: #1488c9;
      color: #ffffff;
      border: 0;
      padding: 8px 18px;
      font-size: 13px;
      border-radius: 2px;
      cursor: pointer;
      margin-left: 0;
}

.c-btn:hover {
      filter: brightness(1.06);
}

/* ============================= */
/* Footer                         */
/* ============================= */

.footer {
      padding: 18px 0;
      background-color: #828282;
      color: #ffffff;
      font-size: 12px;
}

.container {
      width: var(--maxw);
      max-width: 92%;
      margin: 0 auto;
}

/* ============================= */
/* Responsive                     */
/* ============================= */

@media (max-width: 980px) {
      .contact-inner {
            flex-direction: column;
            gap: 40px;
      }

      .contact-left,
      .contact-right {
            width: 100%;
      }

      .c-two {
            flex-direction: column;
            gap: 14px;
      }

      .c-wide,
      .c-msg {
            width: 100%;
      }
}