/* ============================================
   Miller's General Construction
   Built by Artificial Heights — In-House Theme
   artificialheights.com
   ============================================ */

@import url('../fonts/roboto.css');

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/ff-font-awesome4.woff') format('woff');
  font-weight: normal; font-style: normal;
}
@font-face {
  font-family: 'simple-line-icons';
  src: url('../fonts/ff-font-simple-line-icons.eot');
  src: url('../fonts/ff-font-simple-line-icons.eot?#iefix') format('embedded-opentype'),
       url('../fonts/ff-font-simple-line-icons.woff') format('woff'),
       url('../fonts/ff-font-simple-line-icons.ttf') format('truetype'),
       url('../fonts/ff-font-simple-line-icons.svg') format('svg');
  font-weight: normal; font-style: normal;
}

.icon-angle-right:before { content: '\f105'; font-family: 'FontAwesome'; }
.icon-wechat:before       { content: '\f1d7'; font-family: 'FontAwesome'; }
.fa-check:before          { content: '\f00c'; font-family: 'FontAwesome'; }

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px; line-height: 1.6; color: #333;
  margin: 0; padding: 0; -webkit-font-smoothing: antialiased;
}
a { color: #001d66; text-decoration: none; transition: color 0.3s; }
a:hover { color: #001d66; opacity: 0.8; }
img { max-width: 100%; height: auto; }
h1,h2,h3,h4,h5,h6 { font-family: 'Roboto', Arial, sans-serif; margin-top: 0; }
p { margin-top: 0; }

.container { max-width: 1170px; margin: 0 auto; padding: 0 15px; }

/* ===== HEADER ===== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: #fff; border-bottom: 1px solid #001d66;
  transition: all 0.4s cubic-bezier(0.7,1,0.7,1);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 145px; transition: height 0.4s;
}
.site-header.shrink .header-inner { height: 70px; }
.logo-link { display: inline-block; line-height: 0; }
.logo-link img { height: 100px; width: auto; transition: height 0.4s; }
.site-header.shrink .logo-link img { height: 45px; }

.main-nav { display: flex; align-items: center; }
.main-nav a {
  color: #001d66; font-size: 14px; font-weight: 400;
  padding: 0 20px; line-height: 145px;
  transition: all 0.3s; text-transform: uppercase; letter-spacing: 0.5px;
}
.site-header.shrink .main-nav a { line-height: 70px; }
.main-nav a:hover { opacity: 0.7; }

.hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; padding: 10px; background: none; border: none;
}
.hamburger span { width: 25px; height: 2px; background: #001d66; transition: 0.3s; }

/* Sidebar */

.sidebar-overlay.active { display: block; }









.header-spacer { height: 145px; }

/* ===== HERO ===== */
.hero {
  position: relative;
  background-image: url('../images/hero-bg.webp');
  background-size: cover; background-position: center; background-attachment: fixed;
  padding: 160px 0 110px; text-align: center;
}
.hero::before {
  content:''; position:absolute; top:0;left:0;right:0;bottom:0;
  background: rgba(255,255,255,0.7);
}
.hero-content { position:relative; z-index:1; }
.hero-logo { max-width:400px;margin:0 auto 30px;animation:fadeInDown 1.5s ease 0.5s both; }
.hero-divider { width:60%;height:2px;background:#001d66;margin:30px auto;animation:fadeIn 2s ease 1s both; }
.hero-tagline { color:#001d66;font-size:17px;font-weight:700;margin-bottom:60px;animation:fadeInDown 1.5s ease 1.5s both; }
.btn-primary-custom {
  display:inline-block;padding:10px 30px;background:#001d66;color:#fff;
  border:2px solid transparent;border-radius:0;font-size:14px;font-weight:500;
  text-transform:uppercase;transition:all 0.3s;cursor:pointer;
}
.btn-primary-custom:hover { background:rgba(0,29,102,0.69);color:#fff; }

/* ===== ABOUT ===== */
.about { padding: 80px 0; }
.about-row { display:flex;flex-wrap:wrap;margin:0 -15px; }
.about-logo-col { flex:0 0 25%;max-width:25%;padding:0 15px; }
.about-spacer-col { flex:0 0 8.333%;max-width:8.333%;padding:0 15px; }
.about-content-col { flex:0 0 66.666%;max-width:66.666%;padding:0 15px; }
.about-logo-col img { width:100%;margin-top:100px; }
.about h2 { font-size:24px;font-weight:500;margin-bottom:20px; }
.about-text { font-size:20px;line-height:1.6;margin-bottom:40px; }
.about-info-row { display:flex;flex-wrap:wrap;font-size:20px;font-weight:600; }
.about-info-row .info-col { flex:0 0 50%;max-width:50%; }
.about-info-row ul { list-style:none;padding:0;margin:0; }
.about-info-row li { margin-bottom:5px; }

/* ===== CONTACT ===== */
.contact {
  position:relative;
  background-image:url('../images/contact-bg.jpg');
  background-size:cover;background-position:center top;background-attachment:fixed;
  padding:80px 0;
}
.contact::before { content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7); }
.contact-content { position:relative;z-index:1; }
.contact-wrapper { border:1px solid rgba(255,255,255,0.3);padding:40px 0 0; }
.contact h2 { color:#fff;text-align:center;margin-bottom:0; }
.contact-divider { text-align:center;margin:20px 0 40px;position:relative; }
.contact-divider::before,.contact-divider::after {
  content:'';position:absolute;top:50%;width:40%;height:1px;background:#fff;
}
.contact-divider::before { left:5%; }
.contact-divider::after { right:5%; }
.contact-divider i { color:#fff;font-size:20px;position:relative;z-index:1; }
.contact-form-wrapper { padding:20px 60px 20px; }
.form-row { display:flex;gap:20px; }
.form-input {
  width:100%;background:transparent;border:none;
  border-bottom:1px solid rgba(119,119,119,0.4);
  padding:12px 0;color:#fff;font-size:16px;
  font-family:'Roboto',Arial,sans-serif;margin-bottom:30px;
  outline:none;transition:all 0.3s;
}
.form-input::placeholder { color:#fff; }
.form-input:focus { color:#001d66;background:rgba(255,255,255,0.05); }
.form-input:focus::placeholder { color:#001d66; }
textarea.form-input { resize:vertical;min-height:120px;margin-bottom:40px; }
.btn-contact {
  display:inline-block;padding:12px 35px;background:transparent;color:#fff;
  border:2px solid #fff;border-radius:50px;font-size:16px;font-weight:700;
  cursor:pointer;transition:all 0.3s;
}
.btn-contact:hover { background:#000;border-color:transparent;color:#fff; }
.contact-btn-wrapper { text-align:center;margin-bottom:20px; }
.form-message { display:none;text-align:center;padding:15px;margin-top:15px;border-radius:4px; }
.form-message.success { display:block;background:#d4edda;color:#155724; }
.form-message.error { display:block;background:#f8d7da;color:#721c24; }

/* ===== FOOTER ===== */
.site-footer { background:#000;color:#fff;padding:50px 0 0; }
.footer-top { display:flex;flex-wrap:wrap;margin:0 -15px; }
.footer-logo-col { flex:0 0 100%;max-width:100%;padding:0 15px 40px;text-align:center; }
.footer-logo-col img { max-width:400px; }
.footer-services-col { flex:0 0 50%;max-width:50%;padding:0 15px; }
.footer-contact-col { flex:0 0 50%;max-width:50%;padding:0 15px; }
.site-footer h3 { color:#fff;font-size:18px;margin-bottom:25px; }
.services-list { display:flex;flex-wrap:wrap; }
.services-list .services-col { flex:0 0 50%; }
.services-list ul { list-style:none;padding:0;margin:0; }
.services-list li { font-size:15px;line-height:26px;color:#fff; }
.services-list .list-icon { color:#001d66;margin-right:8px; }
.footer-contact-info p { color:#e6e6e6;margin-bottom:20px;font-size:14px; }
.footer-divider { height:20px;border-top:1px solid rgba(255,255,255,0.3);margin:20px 0; }
.footer-bottom { display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:10px 0 20px; }
.footer-copyright { font-size:13px;color:#ccc; }
.footer-copyright a { color:#ccc; }
.footer-copyright a:hover { color:#001d66; }
.footer-links { font-size:13px; }
.footer-links a { color:#ccc; }
.footer-links a:hover { color:#001d66; }

/* ===== BACK TO TOP ===== */
.back-to-top {
  position:fixed;bottom:30px;right:30px;width:40px;height:40px;
  background:#001d66;color:#fff;text-align:center;line-height:40px;
  font-size:20px;cursor:pointer;opacity:0;visibility:hidden;
  transition:all 0.3s;z-index:999;border:none;
}
.back-to-top.visible { opacity:1;visibility:visible; }
.back-to-top:hover { background:#000; }

/* ===== ANIMATIONS ===== */
@keyframes fadeInDown { from{opacity:0;transform:translateY(-30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ===== SIDEBAR FORM ===== */






/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
  .header-inner { height:90px; }
  .header-spacer { height:90px; }
  .logo-link img { height:45px; }
  .site-header.shrink .header-inner { height:90px; }
  .site-header.shrink .logo-link img { height:45px; }
  .main-nav { display:none; }
  .main-nav.active {
    display:flex;flex-direction:column;position:absolute;
    top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid #001d66;box-shadow:0 5px 20px rgba(0,0,0,0.1);
  }
  .main-nav.active a { line-height:50px;border-bottom:1px solid #f0f0f0;padding:0 20px; }
  .hamburger { display:flex; }
  .about { padding:40px 0; }
  .about-logo-col { flex:0 0 100%;max-width:100%;text-align:center; }
  .about-logo-col img { max-width:200px;margin-top:0;margin-bottom:20px; }
  .about-spacer-col { display:none; }
  .about-content-col { flex:0 0 100%;max-width:100%; }
  .hero { padding:100px 0 80px;background-attachment:scroll; }
  .hero-tagline { font-size:17px;margin-bottom:40px; }
  .contact { background-attachment:scroll;padding:40px 0; }
  .contact-form-wrapper { padding:20px 10px; }
  .form-row { flex-direction:column;gap:0; }
  .footer-services-col,.footer-contact-col { flex:0 0 100%;max-width:100%; }
  .footer-bottom { flex-direction:column;gap:10px;text-align:center; }
}
@media (min-width:768px) {
  .hero-tagline { font-size:24px; }
  .about h2 { text-align:left; }
  .about-text { text-align:left; }
}
@media (min-width:992px) {
  .about-text { margin-bottom:60px; }
}

/* ═══════════════════════════════════════════════════════
   SIDEBAR PANEL — Redesigned v3
═══════════════════════════════════════════════════════ */

/* Overlay */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 1040;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: opacity .3s;
}
.sidebar-overlay.active { display: block; }

/* Drawer */
.sidebar-panel {
  position: fixed;
  top: 0; right: -460px;
  width: 440px; max-width: 96vw;
  height: 100vh;
  background: #001d66;
  background-image: linear-gradient(160deg, #001d66 0%, #00287a 60%, #001550 100%);
  z-index: 1050;
  overflow-y: auto;
  transition: right .35s cubic-bezier(.4,0,.2,1);
  box-shadow: -6px 0 40px rgba(0,0,0,.4);
  display: flex;
  flex-direction: column;
  padding: 0 0 40px;
}
.sidebar-panel.active { right: 0; }

/* Header bar */
.sp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.15);
}
.sp-logo {
  height: 44px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.sidebar-close {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s;
  line-height: 1;
}
.sidebar-close:hover {
  background: rgba(255,255,255,.25);
  transform: rotate(90deg);
}

/* Contact info cards */
.sp-info {
  padding: 20px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sp-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 12px 14px;
  transition: background .2s;
}
.sp-info-item:hover { background: rgba(255,255,255,.1); }
.sp-icon {
  width: 36px; height: 36px;
  min-width: 36px;
  background: rgba(255,255,255,.15);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  color: #fff;
}
.sp-info-item > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sp-info-item strong {
  color: rgba(255,255,255,.6);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.sp-info-item span, .sp-info-item span a {
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  line-height: 1.4;
}
.sp-info-item span a:hover { text-decoration: underline; opacity: .85; }

/* Divider */
.sp-divider {
  margin: 4px 24px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sp-divider::before,.sp-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.2);
}
.sp-divider span {
  color: rgba(255,255,255,.85);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
}

/* Form */
.sidebar-form {
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sp-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sp-field label {
  color: rgba(255,255,255,.7);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.sp-field input,
.sp-field select,
.sp-field textarea {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  color: #fff;
  font-size: 13.5px;
  padding: 10px 13px;
  outline: none;
  transition: border-color .2s, background .2s;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.sp-field input::placeholder,
.sp-field textarea::placeholder { color: rgba(255,255,255,.35); }
.sp-field input:focus,
.sp-field select:focus,
.sp-field textarea:focus {
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.13);
}
.sp-field select option { background: #001d66; color: #fff; }
.sp-field textarea { resize: vertical; min-height: 80px; }

/* Submit button */
.btn-sp-submit {
  background: #fff;
  color: #001d66;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  padding: 13px 20px;
  cursor: pointer;
  transition: background .2s, transform .1s, box-shadow .2s;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  letter-spacing: .02em;
  margin-top: 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.btn-sp-submit:hover {
  background: #f0f0f0;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  transform: translateY(-1px);
}
.btn-sp-submit:active { transform: translateY(0); }

/* Privacy note */
.sp-form-note {
  text-align: center;
  color: rgba(255,255,255,.45);
  font-size: 11px;
}

/* Scrollbar */
.sidebar-panel::-webkit-scrollbar { width: 4px; }
.sidebar-panel::-webkit-scrollbar-track { background: transparent; }
.sidebar-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 4px; }

/* Mobile */
@media (max-width: 480px) {
  .sp-row { grid-template-columns: 1fr; }
  .sp-head { padding: 16px 18px; }
  .sp-info, .sidebar-form { padding-left: 18px; padding-right: 18px; }
}