/* Responsive fixes for Builtz Arabia website */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; line-height: 1.5; }
img { max-width: 100%; height: auto; }

/* Shared layout */
.topbar {
  padding: 10px clamp(16px, 5vw, 60px);
  gap: 12px;
  flex-wrap: wrap;
}

header {
  padding: 18px clamp(16px, 5vw, 60px);
  gap: 24px;
  flex-wrap: wrap;
}

.logo img {
  width: min(320px, 85vw) !important;
  display: block;
}

header > .contact-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  flex-wrap: wrap;
  width: auto;
  margin: 0;
  background: transparent;
  color: inherit;
  padding: 0;
}

header > .contact-box .info {
  width: auto;
  min-width: 180px;
}

.info i { font-size: clamp(24px, 4vw, 45px); }
.info h3 { font-size: clamp(14px, 2vw, 18px); margin: 4px 0 0; }
.info p { margin: 0; }

button,
.contact-box button,
.hero button,
.view-btn {
  border-radius: 6px;
  white-space: nowrap;
}

nav {
  padding: 16px clamp(12px, 4vw, 25px);
  gap: clamp(12px, 4vw, 50px);
  flex-wrap: wrap;
}

nav a { font-size: clamp(14px, 2vw, 20px); }

/* Home hero */
.hero {
  width: 100% !important;
  height: auto !important;
  padding: clamp(70px, 12vw, 180px) clamp(18px, 6vw, 120px) !important;
}

.hero h2 {
  font-size: clamp(34px, 7vw, 70px) !important;
  line-height: 1.12;
  margin: 0 auto 16px !important;
  padding: 0 !important;
  max-width: 1100px;
}

.hero h1 {
  font-size: clamp(28px, 5vw, 54px);
  line-height: 1.2;
}

.hero p {
  font-size: clamp(16px, 3vw, 30px) !important;
  padding: 0 !important;
  max-width: 980px;
  margin: 0 auto 20px !important;
}

.hero button {
  padding: 13px 28px;
  font-size: 16px;
  margin: 8px;
}

/* Home service cards */
.services { padding: clamp(40px, 7vw, 70px) clamp(16px, 5vw, 50px); }
.card {
  display: inline-flex;
  flex-direction: column;
  vertical-align: top;
  width: min(100%, 300px);
  min-height: 230px;
}

.industry {
  padding: clamp(45px, 8vw, 80px) clamp(18px, 7vw, 100px);
  gap: 34px;
  flex-wrap: wrap;
}
.industry .left { width: min(100%, 680px); }
.industry .right { flex: 1 1 300px; text-align: center; }
.industry .right img { width: min(100%, 430px); }

.service { padding: clamp(30px, 5vw, 40px); }
.service h1 { font-size: clamp(34px, 6vw, 60px); }
.service p { font-size: clamp(16px, 3vw, 22px); }

.service-grid,
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 28px;
}

.service-card {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
  font-size: clamp(36px, 8vw, 80px);
}
.stats p { font-size: clamp(16px, 3vw, 30px); padding: 10px; }

.cta { padding: clamp(40px, 7vw, 60px) 18px; font-size: clamp(20px, 4vw, 25px); }
.cta p { display: inline-block; font-size: clamp(18px, 4vw, 30px); padding: 14px 26px; }

/* About page */
.heading h1 { font-size: clamp(34px, 6vw, 50px); }
.heading p { font-size: clamp(16px, 2.6vw, 18px); }
.about { gap: 30px; }
.about-image { margin-right: 0; flex: 1 1 320px; }
.about-content { flex: 1 1 320px; }

/* Contact page */
.contact-section { padding: clamp(28px, 5vw, 50px); }
.contact-form { padding: clamp(22px, 5vw, 40px); }
.input-row { gap: 18px; flex-wrap: wrap; }
.input-row input { width: auto; flex: 1 1 220px; font-size: clamp(16px, 3vw, 28px); padding: 16px; }
textarea { font-size: clamp(16px, 3vw, 28px); min-height: 180px; height: 28vh; padding: 16px; }
.contact-form button { font-size: clamp(18px, 3vw, 30px); padding: 14px 34px; }
section.contact-box {
  width: min(92%, 1000px) !important;
  padding: clamp(32px, 6vw, 60px) clamp(18px, 5vw, 60px) !important;
  margin: clamp(40px, 7vw, 80px) auto !important;
}
section.contact-box h1 { font-size: clamp(32px, 6vw, 55px); }
.contact-info { gap: 24px; flex-wrap: wrap; }
.contact-info .info { width: min(100%, 280px); justify-content: center; }

footer { padding: 42px 18px 20px; }
.footer-container { gap: 28px; flex-wrap: wrap; font-size: clamp(18px, 3vw, 30px); }
.footer-box { flex: 1 1 220px; }

/* Tablet */
@media (max-width: 900px) {
  .topbar { justify-content: center; text-align: center; }
  header { justify-content: center; text-align: center; }
  header > .contact-box { justify-content: center; }
  header > .contact-box .info { justify-content: center; }
  .industry { text-align: center; justify-content: center; }
}

/* Mobile */
@media (max-width: 600px) {
  .topbar { font-size: 14px; }
  .right { width: 100%; text-align: center; }
  nav { flex-direction: column; align-items: center; gap: 12px; }
  header > .contact-box { flex-direction: column; width: 100%; }
  header > .contact-box button { width: 100%; max-width: 260px; }
  .hero button { width: 100%; max-width: 260px; }
  .input-row { flex-direction: column; }
  .input-row input { width: 100%; }
  section.contact-box { border-radius: 0; width: 100% !important; }
  .footer-container { text-align: center; }
}

/* Stronger Contact Us page responsiveness */
body:has(.contact-section) .hero {
  min-height: auto !important;
  padding: clamp(50px, 10vw, 110px) clamp(16px, 6vw, 90px) !important;
}

body:has(.contact-section) .hero h2 {
  font-size: clamp(36px, 9vw, 88px) !important;
  line-height: 1.05 !important;
  word-break: normal;
}

body:has(.contact-section) .hero p,
body:has(.contact-section) .hero h1 {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

body:has(.contact-section) .contact-form {
  max-width: 1180px;
  margin: 0 auto;
}

body:has(.contact-section) .contact-form .input-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body:has(.contact-section) .contact-form .input-row input {
  width: 100% !important;
  min-width: 0;
}

body:has(.contact-section) .contact-form textarea {
  display: block;
  width: 100% !important;
}

body:has(.contact-section) section.contact-box {
  max-width: 1100px;
  overflow: hidden;
}

body:has(.contact-section) section.contact-box .contact-info {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

body:has(.contact-section) section.contact-box .contact-info .info {
  width: 100% !important;
  min-width: 0;
  overflow-wrap: anywhere;
}

body:has(.contact-section) section.contact-box .contact-info .info p {
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.5;
}

@media (max-width: 900px) {
  body:has(.contact-section) .contact-form .input-row,
  body:has(.contact-section) section.contact-box .contact-info {
    grid-template-columns: 1fr !important;
  }

  body:has(.contact-section) section.contact-box .contact-info .info {
    max-width: 420px;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  body:has(.contact-section) .contact-section {
    padding: 22px 14px !important;
  }

  body:has(.contact-section) .contact-form {
    padding: 18px !important;
    border-radius: 14px;
  }

  body:has(.contact-section) .contact-form button {
    width: 100%;
  }

  body:has(.contact-section) section.contact-box {
    width: calc(100% - 28px) !important;
    margin: 32px auto !important;
    border-radius: 14px !important;
    padding: 28px 16px !important;
  }

  body:has(.contact-section) section.contact-box h1 {
    font-size: clamp(28px, 10vw, 40px) !important;
  }

  body:has(.contact-section) section.contact-box h2 {
    margin-bottom: 26px !important;
    font-size: clamp(20px, 7vw, 28px);
  }

  body:has(.contact-section) section.contact-box .contact-info .info i {
    font-size: 34px !important;
    margin-bottom: 12px;
  }

  body:has(.contact-section) footer .footer-box button {
    width: 100%;
  }
}

/* FINAL CONTACT PAGE FIX - prevent header .contact-box styles from breaking orange section */
section.contact-box {
  display: block !important;
  width: min(1100px, calc(100% - 32px)) !important;
  margin: clamp(36px, 6vw, 80px) auto !important;
  padding: clamp(30px, 6vw, 60px) clamp(18px, 5vw, 60px) !important;
  background: #f47a20 !important;
  color: #fff !important;
  text-align: center !important;
  border-radius: 10px !important;
  overflow: visible !important;
}

section.contact-box > h1,
section.contact-box > p,
section.contact-box > h2 {
  display: block !important;
  width: 100% !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
}

section.contact-box > h1 {
  font-size: clamp(34px, 6vw, 56px) !important;
  line-height: 1.15 !important;
  margin-bottom: 18px !important;
}

section.contact-box > p {
  font-size: clamp(16px, 2.2vw, 21px) !important;
  line-height: 1.55 !important;
  color: #fff !important;
  margin-bottom: 18px !important;
}

section.contact-box > h2 {
  font-size: clamp(24px, 4vw, 34px) !important;
  line-height: 1.25 !important;
  margin-bottom: clamp(28px, 5vw, 50px) !important;
}

section.contact-box .contact-info {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(20px, 4vw, 42px) !important;
  align-items: start !important;
  justify-content: center !important;
  width: 100% !important;
}

section.contact-box .contact-info .info {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  text-align: center !important;
}

section.contact-box .contact-info .info i {
  font-size: clamp(32px, 5vw, 48px) !important;
  color: #0d5a9c !important;
  margin: 0 !important;
}

section.contact-box .contact-info .info p {
  width: 100% !important;
  color: #fff !important;
  font-size: clamp(15px, 2vw, 18px) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
}

@media (max-width: 768px) {
  section.contact-box .contact-info {
    grid-template-columns: 1fr !important;
  }

  section.contact-box .contact-info .info {
    max-width: 360px !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 480px) {
  section.contact-box {
    width: calc(100% - 24px) !important;
    padding: 28px 14px !important;
  }

  section.contact-box > h1 {
    font-size: 32px !important;
  }
}


















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

@media (max-width: 992px) {
  .footer-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 25px;
  }

  .footer-col {
    width: 100%;
  }

  .logo-area {
    justify-content: center;
  }

  .footer-col ul {
    padding: 0;
    list-style: none;
  }

  .footer-col ul li {
    margin-bottom: 10px;
  }

  .footer-col h3 {
    margin-bottom: 15px;
  }

  .footer-col p,
  .footer-col a {
    font-size: 14px;
    line-height: 1.7;
  }

  .footer-bottom {
    font-size: 13px;
    padding: 15px 10px;
  }
}

@media (max-width: 480px) {
  .footer {
    padding: 40px 20px;
  }

  .logo {
    font-size: 28px;
  }

  .footer-col h3 {
    font-size: 18px;
  }

  .footer-col p,
  .footer-col a {
    font-size: 13px;
  }

  .footer-bottom {
    font-size: 12px;
  }
}







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

@media (max-width: 992px) {

  .header-contact{
    display:none;
  }

  .main-header{
    justify-content:center;
    text-align:center;
    padding:20px;
  }

  .intro-content,
  .contact-container{
    grid-template-columns:1fr;
    gap:30px;
  }

  .pm-features{
    grid-template-columns:1fr 1fr;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
  }

  .hero-content h1{
    font-size:45px;
  }
}

@media (max-width: 768px) {

  .top-bar{
    display:none;
  }

  .logo{
    font-size:32px;
  }

  .navbar{
    flex-direction:column;
    gap:15px;
    padding:15px;
  }

  .mega-menu{
    position:static;
    transform:none;
    width:100%;
    grid-template-columns:1fr;
    padding:20px;
  }

  .service-hero{
    height:300px;
    padding:20px;
  }

  .hero-content h1{
    font-size:30px;
    line-height:1.4;
  }

  .service-intro,
  .why-section,
  .faq-section,
  .contact-section,
  .cta{
    padding:60px 20px;
  }

  .intro-text,
  .intro-image{
    width:100%;
  }

  .intro-image img,
  .contact-image img{
    width:100%;
    height:auto;
  }

  .pm-features{
    grid-template-columns:1fr;
  }

  .footer-grid{
    grid-template-columns:1fr;
    text-align:center;
  }

  .contact-form button{
    width:100%;
  }
}

@media (max-width: 480px) {

  .logo{
    font-size:28px;
  }

  .hero-content h1{
    font-size:24px;
  }

  .faq-question{
    font-size:15px;
    padding:18px 10px;
  }

  .section-title h2,
  .faq-section h2,
  .contact-form h2,
  .cta h2{
    font-size:24px;
  }

  .intro-text p,
  .why-section p,
  .footer-col p{
    font-size:14px;
    line-height:1.8;
  }

  .btn,
  .quote-btn{
    font-size:14px;
    padding:12px 20px;
  }

  .copyright{
    font-size:12px;
    padding:15px;
  }
}