/* JZ Tech - stylesheet2.css
   Desktop layout unchanged
   Mobile:
   - show ONLY banner.png (max 900px) at top
   - Welcome text ABOVE logos
   - Logos reduced ~40%
   - Two photos stacked, full width
*/

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

* {
      box-sizing: border-box;
}

html, body {
      margin: 0;
      padding: 0;
      background-color: #828282;  /*med gray*/
      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 (Desktop)              */
/* ============================= */
.tit {
	text-align: center;
	font-family:Times New Roman;
	font-size: 50px;
	text-shadow: 4px 4px 4px black;
	letter-spacing: 4px;
	font-weight: bold;
	color:white;
	margin: auto 0;
	padding-top:30px;
}
.tit-under {
	line-height: 80px;`
	text-align: center;
	position: relative;
	top:-30px;
	font-family:Times New Roman;
	font-size: 24px;
	text-shadow: 2px 2px 2px black;
	letter-spacing: 2px;
	font-weight: bold;
	color:gold;
}
.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-btn-wrap {
      margin-top: -30px;
      text-align: center;
}

.contact-btn-wrap img {
      width: 260px;
      border-radius: 10px;
}

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

/* ============================= */
/* Mobile Banner (Desktop OFF)   */
/* ============================= */

.mobile-banner {
      display: none !important;
}

/* ============================= */
/* 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;
}

.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;
}

.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);
      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;
}

.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 + Mobile Layout    */
/* ============================= */

@media (max-width: 980px) {

      img {
            max-width: 100%;
            height: auto;
      }

      /* Mobile: hide the desktop banner section */
      .topbar {
            display: none !important;
      }

      /* Mobile: show simple banner */
      .mobile-banner {
            display: block !important;
            text-align: center;
            margin: 10px 0 0 0;
      }

      .mobile-banner img {
            width: 100%;
            max-width: 900px;
            height: auto;
      }

    .tit {
	    font-size: clamp(22px, 5vw, 40px);
	}  


      .tit-under {
            font-size: 16px !important;
            line-height: 1.4;
            top: 0 !important;
      }

      .contact-btn-wrap img {
      width: 180px !important;
      margin-top: 50px;
      }



      /* ===== Home intro (Welcome above logos) ===== */

      .home-intro {
            width: 92% !important;
            max-width: 92% !important;
            margin: 0 auto;
      }

      .home-intro tr {
            display: flex !important;
            flex-direction: column !important;
      }

      .home-intro td {
            display: block !important;
            width: 100% !important;
      }

      .home-intro td.spacer {
            display: none !important;
      }

      .home-intro .welcome-cell {
            order: 1;
            text-align: left;
            padding: 0 10px;
            font-size: 20px !important;
            line-height: 1.6;
            margin-bottom: 18px;
      }

      .home-intro .welcome-cell span {
            display: block;
            text-align: center;
            margin-bottom: 10px;
      }

      .home-intro .logo-cell {
            order: 2;
            text-align: center;
      }

      /* Reduce logo size ~40% */
      .home-intro .logo-cell img {
            width: 60% !important;
            height: auto;
            margin-bottom: 14px;
      }

      /* ===== Home photos (stacked, full width) ===== */

      .home-photos {
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 auto;
      }

      .home-photos tr {
            display: block !important;
      }

      .home-photos td {
            display: block !important;
            width: 100% !important;
            text-align: center;
      }

      .home-photos td.spacer {
            display: none !important;
      }

      .home-photos .photo-cell {
            margin: 0 0 18px 0;
            padding: 0 10px;
      }

      .home-photos .photo-cell img {
            width: 100% !important;
            max-width: 100% !important;
            height: auto;
      }

      /* ===== Contact band stacks ===== */

      .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%;
      }
}