/* Responsive Fix - javidwebify - overrides inline fixed heights and overflow issues */
html, body {
  overflow-x: hidden !important;
}

/* Ensure all images are responsive */
img {
  max-width: 100%;
  height: auto;
}

/* Hero section fixes - desktop keeps original sizing, only constrain overflow */
.hero-3 {
  overflow-x: hidden !important;
}
.hero-3 .hero-img,
.hero-3 .hero-img-phone {
  max-width: 100%;
}
.hero-3 .hero-img img {
  max-width: 100%;
  height: auto;
}

/* Team / project images - override any remaining fixed */
.team-img img,
.project-grid_img img {
  width: 100% !important;
  height: 280px !important;
  object-fit: cover;
  max-width: 100%;
}

/* Service grid content should grow with text */
.service-grid_content {
  padding-bottom: 20px;
}

/* Fix hero text overflow on small screens */
.hero-title {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.hero-text {
  max-width: 100%;
  line-height: 1.6;
}

/* Carousel / slider shadow overflow */
.slider-shadow,
.as-carousel {
  overflow: hidden;
}

/* Desktop hero layout - prevent overlap with vertical social */
.hero-3 .hero-social {
  left: 20px;
}
@media (min-width: 1400px) {
  .hero-style3 {
    padding-left: 60px;
  }
}
@media (max-width: 1400px) {
  .hero-3 .hero-social {
    display: none !important;
  }
}
.hero-style3 {
  position: relative;
  z-index: 5;
}

/* Blog / cards */
.blog-card,
.project-grid,
.team-card {
  max-width: 100%;
  overflow: hidden;
}

/* Fix two-column checklist on mobile */
.two-column {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.two-column .checklist {
  flex: 1 1 250px;
}

/* Button groups should wrap */
.btn-group,
.project-grid_content .row {
  flex-wrap: wrap;
}

/* Ensure iframe / video not overflow */
iframe, video {
  max-width: 100%;
}

/* Mobile breakpoint enhancements */
@media (max-width: 991px) {
  /* Make cards auto height only on mobile - keep desktop uniform */
  .project-grid,
  .process-card,
  .service-grid_content,
  .testi-grid {
    height: auto !important;
    min-height: unset !important;
  }
  .process-card {
    padding: 30px 20px !important;
  }
  .hero-style3 {
    padding: 20px 0 60px 0 !important;
    margin: 0 auto !important;
    text-align: center !important;
    max-width: 100% !important;
    padding-left: 0 !important;
  }
  .hero-3 .hero-img {
    display: none !important;
  }
  .hero-3 .hero-img-phone {
    display: block !important;
    margin: 80px 15px 20px 15px !important;
  }
  .hero-3 .hero-img-phone img {
    width: 100% !important;
    max-width: 500px;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    display: block;
  }
  .hero-title {
    font-size: 42px !important;
    line-height: 1.2 !important;
  }
  .hero-subtitle {
    font-size: 16px !important;
  }
  .img-half.img-left.as-video2 {
    position: relative !important;
    width: 100% !important;
    margin-bottom: 20px;
  }
  .img-half img {
    width: 100%;
    height: auto;
  }
  .space, .space-top {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .process-card {
    height: auto !important;
    min-height: auto !important;
  }
}

@media (max-width: 767px) {
  .hero-title {
    font-size: 32px !important;
  }
  .sec-title {
    font-size: 28px !important;
    line-height: 1.3 !important;
  }
  .shadow-title {
    font-size: 36px !important;
  }
  .project-grid_img img,
  .team-img img {
    height: 220px !important;
  }
  .col-md-6 .btn {
    width: 100%;
    margin-bottom: 8px;
  }
  .project-grid_content .row > div {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .footer-wrapper .widget {
    margin-bottom: 30px;
  }
}

@media (max-width: 575px) {
  .hero-title {
    font-size: 28px !important;
  }
  .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .as-menu-wrapper .as-menu-area {
    width: 100% !important;
    max-width: 350px;
  }
}

/* Fix header logo responsive */
.header-logo img {
  max-width: 240px;
  width: 100% !important;
  height: auto;
  object-fit: contain;
}

/* Prevent horizontal scroll from absolute positioned blur shapes */
.shape-blur,
.hero-shape1,
.shape-mockup {
  max-width: 100vw;
  overflow: hidden;
  pointer-events: none;
}

@media (max-width: 991px) {
  .hero-shape1 {
    display: none !important;
  }
  .shape-blur {
    display: none !important;
  }
}

/* Slick carousel dots/arrows should not cause overflow */
.slick-list {
  overflow: hidden !important;
}
.slick-track {
  display: flex;
}

/* === Fix: Logo overlap with header background (header-layout1) === */
.header-layout1 .menu-area .container {
  position: static;
}
.header-layout1 .header-logo {
  position: relative;
  z-index: 3;
  padding-right: 20px;
}
.header-layout1 .header-logo img {
  max-width: 170px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  display: block;
}
/* Use percentage + dynamic calc so wedge always covers centered container margin */
.header-layout1 .logo-bg {
  width: 36% !important;
}
.header-layout1 .logo-bg:before {
  -webkit-clip-path: polygon(0 0, calc(100% - 60px) 0%, 100% 100%, 0% 100%) !important;
  clip-path: polygon(0 0, calc(100% - 60px) 0%, 100% 100%, 0% 100%) !important;
}
.header-layout1 .logo-bg:after {
  width: calc(100% - 14px) !important;
  -webkit-clip-path: polygon(0 0, calc(100% - 45px) 0%, 100% 100%, 0% 100%) !important;
  clip-path: polygon(0 0, calc(100% - 45px) 0%, 100% 100%, 0% 100%) !important;
}
@media (min-width: 1922px) {
  .header-layout1 .logo-bg {
    width: 38% !important;
  }
}
@media (max-width: 1500px) {
  .header-layout1 .logo-bg {
    width: 34% !important;
  }
}
@media (max-width: 1399px) {
  .header-layout1 .logo-bg {
    width: 33% !important;
  }
}
@media (max-width: 1199px) {
  .header-layout1 .logo-bg {
    width: 32% !important;
  }
  .header-layout1 .header-logo img {
    max-width: 155px !important;
  }
}
@media (max-width: 991px) {
  .header-layout1 .logo-bg {
    width: 52% !important;
  }
  .header-layout1 .header-logo img {
    max-width: 145px !important;
  }
}
@media (max-width: 575px) {
  .header-layout1 .logo-bg {
    width: 62% !important;
  }
  .header-layout1 .header-logo img {
    max-width: 130px !important;
  }
}

/* === UK LAUNCH: equal cards + full-site responsive audit === */
/* Service / pricing / concept / process equal heights (desktop) */
#service-sec .row.gy-4 > [class*="col-"],
#pricing-sec .row.gy-4 > [class*="col-"] {
  display: flex;
}
.service-grid,
#pricing-sec .uk-pricing-card,
section.space .project-grid {
  width: 100%;
}
/* Fix unreadable title when card hovered (keep dark text until hover bg turns blue) */
.service-grid .box-title { color: var(--title-color); }
.service-grid:hover .box-title { color: #fff !important; }
.service-grid:hover .service-grid_text { color: #fff !important; }

/* UK hero floats must not cause horizontal scroll */
.uk-hero { overflow: hidden; }
.uk-hero .uk-float { max-width: calc(100% - 16px); }
.uk-hero .uk-browser-url { max-width: 55%; }

/* CTA section buttons stack cleanly */
.bg-bottom-right .as-btn { margin-bottom: 10px; }
.bg-bottom-right .as-btn.ms-2 { margin-left: 0 !important; }

/* Contact + map */
.map-sec iframe { width: 100%; height: 380px; border: 0; display: block; }
.contact-form .form-control, .contact-form .form-select { width: 100%; }
.newsletter-form { display: flex; gap: 8px; }
.newsletter-form .form-group { flex: 1; margin-bottom: 0; }

/* Footer */
.footer-wrapper { overflow: hidden; }
.footer-wrapper img { max-width: 220px; }

@media (max-width: 991px) {
  /* Stack equal cards naturally on tablet/mobile */
  #service-sec .row.gy-4 > [class*="col-"],
  #pricing-sec .row.gy-4 > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .service-grid { padding-top: 40px; }
  .uk-hero .uk-f1 { left: 8px !important; }
  .uk-hero .uk-f2 { right: 8px !important; }
  .uk-hero .uk-f3 { left: 8px !important; }
  .map-sec iframe { height: 300px; }
  .cta-box_content { padding: 40px 24px !important; }
  .as-btn { white-space: normal; text-align: center; }
}

@media (max-width: 767px) {
  .uk-trust-bar .trust-items { gap: 8px 16px; font-size: 13px; }
  .uk-price { font-size: 34px; }
  .uk-pricing-card { padding: 24px 20px; }
  .bg-bottom-right .as-btn { width: 100%; }
  .contact-info { text-align: center; }
  .breadcumb-title { font-size: 30px !important; }
}

/* === UK HEADER: match dark hero (#080E1C) for seamless banner === */
.as-header.header-layout3,
.as-header.header-layout3 .sticky-wrapper,
.as-header.header-layout3 .menu-area,
.as-header.header-layout3.sticky .menu-area {
  background: #080E1C !important;
}
/* Legacy inner-page headers (layout1) -> force same dark look as home */
.as-header.header-layout1 .header-top,
.as-header.header-layout1 .logo-bg {
  display: none !important;
}
.as-header.header-layout1,
.as-header.header-layout1 .sticky-wrapper,
.as-header.header-layout1 .menu-area {
  background: #080E1C !important;
}
.as-header.header-layout1 .main-menu > ul > li > a {
  color: #fff !important;
}
.as-header.header-layout1 .header-logo img {
  background: #fff;
  border-radius: 8px;
  padding: 4px 10px;
  max-width: 170px !important;
}
.as-header.header-layout3 .main-menu > ul > li > a {
  color: #fff !important;
}
.as-header.header-layout3 .main-menu > ul > li > a:hover {
  color: #9DB4FF !important;
}
.as-header.header-layout3 .header-logo img {
  background: #fff;
  border-radius: 8px;
  padding: 4px 10px;
}
.as-header.header-layout3 .as-menu-toggle {
  color: #fff !important;
}
.as-header.header-layout3 .sub-menu {
  background: #0E1830 !important;
  border: 1px solid rgba(255,255,255,.1);
}
.as-header.header-layout3 .sub-menu a {
  color: #fff !important;
}

/* === UK BREADCRUMB: matches dark hero === */
.uk-crumb{background:radial-gradient(800px 300px at 50% 0%,rgba(62,102,243,.35),transparent 65%),#080E1C;border-bottom:1px solid rgba(255,255,255,.08);padding:56px 0;text-align:center;position:relative;overflow:hidden;}
.uk-crumb h1{color:#fff;font-size:42px;font-weight:900;margin:0 0 10px;letter-spacing:-.5px;}
.uk-crumb ul{display:flex;gap:10px;justify-content:center;align-items:center;list-style:none;margin:0;padding:0;font-size:14px;color:#9AA6C2;}
.uk-crumb ul a{color:#B9C6FF;text-decoration:none;}
.uk-crumb ul a:hover{color:#fff;}
.uk-crumb ul i{font-size:10px;color:#3E66F3;}
/* === UK CONTACT: dark modern form === */
.uk-contact-wrap{background:#080E1C;padding:70px 0;}
.uk-contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:stretch;}
.uk-form-card{background:#0F1B36;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:40px;box-shadow:0 25px 70px rgba(0,0,0,.45);}
.uk-form-card .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#B9C6FF;background:rgba(62,102,243,.16);border:1px solid rgba(62,102,243,.4);padding:7px 14px;border-radius:100px;margin-bottom:14px;}
.uk-form-card h2{color:#fff;font-weight:900;margin:0 0 8px;}
.uk-form-card p.sub{color:#9AA6C2;font-size:14.5px;margin:0 0 24px;}
.uk-form-card .row{margin-left:-8px;margin-right:-8px;}
.uk-form-card .row>[class*="col-"]{padding-left:8px;padding-right:8px;}
.uk-field{position:relative;margin-bottom:16px;}
.uk-field .form-control,.uk-field .form-select{background:#0B1428 !important;border:1px solid rgba(255,255,255,.14) !important;color:#fff !important;border-radius:12px !important;padding:14px 44px 14px 16px !important;font-size:14.5px;width:100%;}
.uk-field .form-control::placeholder{color:#7C8AA8;}
.uk-field .form-control:focus,.uk-field .form-select:focus{border-color:#3E66F3 !important;box-shadow:0 0 0 3px rgba(62,102,243,.25) !important;outline:0;}
.uk-field>i{position:absolute;right:15px;top:50%;transform:translateY(-50%);color:#3E66F3;font-size:14px;pointer-events:none;}
.uk-field.textarea>i{top:20px;transform:none;}
.uk-field .form-select option{background:#0B1428;color:#fff;}
.uk-side-card{background:radial-gradient(500px 300px at 100% 0%,rgba(62,102,243,.35),transparent 60%),#0B1428;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:36px 32px;color:#fff;display:flex;flex-direction:column;justify-content:center;}
.uk-side-card h3{color:#fff;font-weight:900;margin:0 0 10px;}
.uk-side-card p{color:#9AA6C2;font-size:14px;}
.uk-mini{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px;margin-top:14px;}
.uk-mini .ic{width:44px;height:44px;border-radius:12px;background:#3E66F3;color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;box-shadow:0 8px 20px rgba(62,102,243,.4);}
.uk-mini small{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#7C8AA8;}
.uk-mini a,.uk-mini span.val{color:#fff;font-weight:700;font-size:14.5px;text-decoration:none;}
.uk-info-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.uk-info-card{background:#0F1B36;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:26px 22px;display:flex;gap:14px;align-items:flex-start;box-shadow:0 15px 40px rgba(0,0,0,.35);}
.uk-info-card .ic{width:48px;height:48px;border-radius:13px;background:#3E66F3;color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;box-shadow:0 8px 22px rgba(62,102,243,.45);}
.uk-info-card h4{color:#fff;font-size:15.5px;margin:0 0 4px;}
.uk-info-card p,.uk-info-card a{color:#9AA6C2;font-size:13.5px;text-decoration:none;margin:0;}
.uk-info-card a:hover{color:#fff;}
@media(max-width:991px){.uk-contact-grid{grid-template-columns:1fr;}.uk-info-row{grid-template-columns:1fr;}.uk-form-card{padding:28px 20px;}.uk-crumb h1{font-size:32px;}}

/* === FULL DARK SITE === */
body { background: #080E1C !important; color: #C6CFE6; }
.bg-smoke { background-color: #0B1428 !important; }
.space, .space-top, .space-bottom { background-color: transparent; }
p { color: #9AA6C2; }
h1, h2, h3, h4, .sec-title, .box-title, .page-title { color: #fff !important; }
.sec-text { color: #9AA6C2 !important; }
/* Inner pages: about / contact / blog / hosting */
.breadcumb-wrapper { background-color: #0B1428 !important; }
.breadcumb-title { color: #fff !important; }
.blog-card, .accordion-card, .accordion-body, .contact-info, .faq-widget,
.contact-form, .project-inner-box, .service-feature, .price-card_content {
  background-color: #0F1B36 !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #C6CFE6 !important;
}
.blog-card .box-title a, .accordion-button { color: #fff !important; }
.contact-form .form-control, .contact-form .form-select,
.newsletter-form .form-control, input.form-control, textarea.form-control, select.form-select {
  background: #0B1428 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
}
.contact-form .form-control::placeholder { color: #7C8AA8; }
.checklist li { color: #C6CFE6 !important; }
.checklist li i { color: #6D8DFF !important; }

@media (max-width: 575px) {
  .uk-hero .uk-float { position: static; margin-top: 10px; width: 100%; }
  .uk-hero .uk-float + .uk-float { margin-top: 8px; }
  .service-grid_content { padding-left: 16px; padding-right: 16px; }
  .container { overflow-wrap: break-word; }
}
