/* ==========================================================
   KAR SOLUTIONS - custom overrides (loaded last)
   Primary: #121c22   Secondary: #e35302
   ========================================================== */
:root {
  --kar-primary: #121c22;
  --kar-secondary: #e35302;
  /* Responsive type scale (mobile -> desktop) */
  --rs-fs-body: clamp(15px, 0.9vw + 11px, 18px);
  --rs-fs-p: clamp(15px, 0.6vw + 11px, 17px);
  --rs-fs-h1: clamp(30px, 4.4vw + 8px, 68px);
  --rs-fs-h2: clamp(25px, 3vw + 8px, 52px);
  --rs-fs-h3: clamp(21px, 1.8vw + 10px, 38px);
  --rs-fs-h4: clamp(19px, 1vw + 12px, 28px);
  --rs-fs-h5: clamp(17px, 0.7vw + 12px, 24px);
  --rs-fs-h6: clamp(15px, 0.4vw + 12px, 20px);
}
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* ---- Header ---- */
.rs-header-top.rs-header-top-eight { background: var(--kar-primary); }
.site-logo-text { color: var(--kar-primary); font-size: clamp(19px, 1.2vw + 14px, 26px); }
.site-logo-text:hover { color: var(--kar-secondary); }
.rs-btn.has-theme-bright-green { background: var(--kar-primary); }
.rs-btn.has-theme-bright-green:hover { background: var(--kar-secondary); }
.main-menu > ul > li > a { font-size: 16px; }
.main-menu .submenu { min-width: 330px; max-height: 70vh; overflow-y: auto; }
.main-menu .submenu li a { font-size: 15px; line-height: 1.4; white-space: normal; padding-top: 8px; padding-bottom: 8px; }
.main-menu .submenu li a:hover { color: var(--kar-secondary); }
@media (max-width: 1199px) {
  .rs-header-top.rs-header-top-eight { display: none; }
  .rs-header-btn { display: none; }
}

/* ---- Footer ---- */
.rs-footer-two.has-theme-bright-green.has-space { background: var(--kar-primary); padding-top: clamp(60px, 8vw, 120px); }
.rs-footer-widget-links ul li a { font-size: 15px; line-height: 1.5; }
.rs-footer-widget-links ul li { margin-bottom: 8px; }
.rs-footer-widget-links ul li a:hover { color: var(--kar-secondary); }
.rs-footer-widget-description, .rs-footer-widget-address a, .rs-footer-widget-email a, .rs-footer-widget-number a { font-size: 15px; }
.rs-footer-stroke-text { font-size: clamp(34px, 4vw, 60px); }

/* ---- Mobile / tablet sizing ---- */
@media (max-width: 991px) {
  .rs-banner-title, .rs-banner-ten .rs-banner-title { line-height: 1.2; }
  .rs-section-title { line-height: 1.2; }
  .rs-services-title, .rs-portfolio-title { font-size: 19px; line-height: 1.35; }
  .container { padding-left: 16px; padding-right: 16px; }
  .rs-contact-item { width: 100%; }
}
@media (max-width: 575px) {
  .rs-btn { font-size: 15px; padding: 12px 20px; }
  .rs-footer-copyright p { font-size: 14px; }
}

/* ==========================================================
   Floating Enquiry / WhatsApp / Call
   ========================================================== */
.kar-float { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 9990; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.kar-float-enquiry {
  border: 0; cursor: pointer; background: var(--kar-secondary); color: #fff;
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding: 18px 11px; border-radius: 0 8px 8px 0;
  font: 600 15px/1 var(--rs-ff-body, sans-serif); letter-spacing: .5px;
  box-shadow: -3px 3px 14px rgba(0,0,0,.25); transition: background .25s, padding .25s;
}
.kar-float-enquiry:hover { background: var(--kar-primary); padding-left: 16px; }
.kar-float-btn {
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 24px; border-radius: 8px 0 0 8px; text-decoration: none;
  box-shadow: -3px 3px 14px rgba(0,0,0,.25); transition: width .25s;
}
.kar-float-btn:hover { width: 54px; color: #fff; }
.kar-float-wa { background: #25d366; }
.kar-float-call { background: #1a6fe0; font-size: 20px; }

/* Mobile: bottom action bar (Enquiry | WhatsApp | Call) so nothing covers the content */
@media (max-width: 767px) {
  .kar-float { top: auto; bottom: 0; left: 0; right: 0; transform: none; flex-direction: row; align-items: stretch; gap: 0; box-shadow: 0 -3px 14px rgba(0,0,0,.22); }
  .kar-float-enquiry { writing-mode: horizontal-tb; transform: none; flex: 1 1 auto; border-radius: 0; padding: 0 12px; height: 52px; font-size: 16px; box-shadow: none; }
  .kar-float-enquiry:hover { padding-left: 12px; }
  .kar-float-btn { width: 25%; max-width: 110px; height: 52px; border-radius: 0; font-size: 24px; box-shadow: none; }
  .kar-float-btn:hover { width: 25%; }
  body { padding-bottom: 52px; }
  .backtotop-wrap { bottom: 66px !important; }
}

/* ---- Modal ---- */
.kar-modal { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(18,28,34,.72); }
.kar-modal.is-open { display: flex; }
.kar-modal-box { position: relative; width: 100%; max-width: 640px; max-height: 94vh; overflow-y: auto; background: #fff; border-radius: 12px; padding: 30px 28px 26px; border-top: 5px solid var(--kar-secondary); box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.kar-modal-close { position: absolute; top: 8px; right: 12px; border: 0; background: none; font-size: 32px; line-height: 1; color: var(--kar-primary); cursor: pointer; }
.kar-modal-close:hover { color: var(--kar-secondary); }
.kar-modal-title { font-size: clamp(21px, 1.5vw + 14px, 28px); color: var(--kar-primary); margin: 0 0 4px; }
.kar-modal-sub { font-size: 15px; line-height: 1.5; margin: 0 0 18px; color: #616161; }
.kar-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.kar-field-full { grid-column: 1 / -1; }
.kar-field label { display: block; font-size: 14px; font-weight: 600; color: var(--kar-primary); margin-bottom: 5px; }
.kar-field label b { color: var(--kar-secondary); }
.kar-field input, .kar-field select, .kar-field textarea {
  width: 100%; font: 400 15px/1.4 var(--rs-ff-body, sans-serif); color: var(--kar-primary);
  border: 1px solid #cfd4d7; border-radius: 6px; padding: 11px 12px; background: #fff; outline: 0; box-sizing: border-box;
}
.kar-field textarea { resize: vertical; min-height: 84px; }
.kar-field input:focus, .kar-field select:focus, .kar-field textarea:focus { border-color: var(--kar-secondary); box-shadow: 0 0 0 3px rgba(227,83,2,.15); }
.kar-field .has-error { border-color: #d92d20; }
.kar-error { color: #d92d20; font-size: 14px; min-height: 20px; margin: 10px 0 4px; }
.kar-submit { width: 100%; border: 0; cursor: pointer; background: #25d366; color: #fff; font: 600 17px/1 var(--rs-ff-body, sans-serif); padding: 15px; border-radius: 6px; transition: background .25s; }
.kar-submit:hover { background: #1ebe5a; }
.kar-submit i { margin-right: 6px; font-size: 19px; vertical-align: -1px; }
@media (max-width: 575px) {
  .kar-modal-box { padding: 26px 18px 20px; }
  .kar-form-grid { grid-template-columns: 1fr; }
}

/* equal field heights */
.kar-field input, .kar-field select { height: 46px; }

/* stack phone numbers / emails in the mobile menu */
.offcanvas-contact-text a { display: block; }

/* footer products: clean single-column list */
.rs-footer-widget-links ul { display: block; padding: 0; }
.rs-footer-widget-links ul li { width: 100%; margin: 0 0 9px; }

/* ---- Product / service photos: keep every image the same shape ---- */
.rs-services-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #f3f4f5; }
.rs-portfolio-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.rs-about-thumb img { object-fit: cover; }