/* ============================================================
   AR WEBCRAFTS LLC — Master Global Enhancements & Mobile Responsiveness
   Version: 3.0 | Strict Zero-Touch UI Policy (Desktop preserved 100%)
   ============================================================ */

/* ============================================================
   1. UNIVERSAL BOX-SIZING & OVERFLOW PREVENTION
   Prevents any horizontal scroll / side-cutoff on all devices
   ============================================================ */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-text-size-adjust: 100% !important;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

img, video, embed, object {
  max-width: 100% !important;
  height: auto;
}

iframe {
  max-width: 100% !important;
}

/* ============================================================
   CALENDLY INLINE WIDGET & BOOKING SLOTS FULL HEIGHT
   ============================================================ */
.calendly-inline-widget,
.elementor-widget-html .calendly-inline-widget,
#appointmant .calendly-inline-widget {
  width: 100% !important;
  min-width: 320px !important;
  min-height: 750px !important;
  height: auto !important;
  display: block !important;
  position: relative !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.calendly-inline-widget iframe,
.elementor-widget-html .calendly-inline-widget iframe,
#appointmant iframe {
  width: 100% !important;
  min-width: 320px !important;
  min-height: 750px !important;
  height: 750px;
  display: block !important;
  border: none !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* ============================================================
   FIX "REQUEST A CALL BACK" BANNER OVERLAP & POSITIONING
   Ensures banner sits cleanly below discovery call calendar
   with zero overlap, proper clearance, and visible contrast
   ============================================================ */
#appointmant,
.elementor-element-7629475 {
  position: relative !important;
  z-index: 2 !important;
  margin-bottom: 50px !important;
  clear: both !important;
  overflow: visible !important;
}

.elementor-element-ac3f73a,
section.elementor-element-ac3f73a,
.elementor-section.elementor-element-ac3f73a {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  margin-top: 50px !important;
  margin-bottom: 0 !important;
  clear: both !important;
  z-index: 1 !important;
  transform: none !important;
  float: none !important;
}

.elementor-element-b2cec12,
.elementor-element.elementor-element-b2cec12 {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 auto !important;
  transform: none !important;
  z-index: 1 !important;
  background-color: #011B39 !important;
}

.elementor-element-9be69e0 .elementor-heading-title,
.elementor-element-b2cec12 .elementor-heading-title {
  color: #FFFFFF !important;
}


/* Reviews Section Clean Background & Overlap Prevention (Zero Glitches) */
.elementor-element-78966f9 > .elementor-background-overlay,
.elementor-section[data-id="78966f9"] > .elementor-background-overlay,
.elementor-widget-elementskit-testimonial .elementor-background-overlay,
.ar-google-reviews-section::before,
.ar-google-reviews-section::after {
  background-image: none !important;
  background: none !important;
}
.elementor-element-78966f9 > .elementor-background-overlay {
  display: none !important;
}

/* Verified Clutch Card & Badge Styles */
.ar-clutch-verified {
  font-size: 11px;
  font-weight: 600;
  color: #17313b;
  background: #f0f4f7;
  padding: 2px 7px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.ar-clutch-verified svg {
  width: 11px;
  height: 11px;
  fill: #ff492c;
}
.ar-clutch-source {
  font-weight: 600;
  color: #17313b;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ar-clutch-source::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ff492c;
}

/* Footer Logo Size & Standardization */
.ekit-template-content-footer .elementor-element-d39b040 img,
.ekit-template-content-footer .elementor-widget-image img {
  max-width: 185px !important;
  width: 185px !important;
  height: auto !important;
  display: block !important;
  margin-bottom: 14px !important;
}

/* Footer Links Section Headings (Services, Company, Contact) */
.ekit-template-content-footer .elementor-element-33a98256 .elementor-heading-title,
.ekit-template-content-footer .elementor-element-1ac2ab32 .elementor-heading-title {
  color: #0A1C2E !important;
  font-weight: 700 !important;
}

/* Call Back Banner Heading - Pure White Guaranteed On Dark Background */
.elementor-element-b2cec12 .elementor-heading-title,
.elementor-element-9be69e0 .elementor-heading-title,
.ekit-template-content-footer .elementor-element-b2cec12 .elementor-heading-title,
.ekit-template-content-footer .elementor-element-9be69e0 .elementor-heading-title,
.ekit-template-content-footer .elementor-element-b2cec12 h3,
.ekit-template-content-footer .elementor-element-9be69e0 h3,
.elementor-element-b2cec12 h3,
.elementor-element-9be69e0 h3 {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

.ekit-template-content-footer .elementor-icon-list-item {
  padding-bottom: 8px !important;
}

/* Marquee containment */
.ar-google-reviews-section,
.ar-google-marquee-wrapper {
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* ============================================================
   2. MOBILE RESPONSIVENESS ENGINE (@media max-width: 768px)
   Applied across ALL pages
   ============================================================ */
@media (max-width: 768px) {
  /* Prevent horizontal container overflow */
  .elementor-section,
  .elementor-section-boxed,
  .elementor-container,
  .elementor-row,
  .elementor-widget-wrap,
  .wrap {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .elementor-section.elementor-section-boxed > .elementor-container {
    padding-inline: 16px !important;
    max-width: 100% !important;
  }

  /* Elementor columns — clean 100% stacking */
  .elementor-column.elementor-col-50,
  .elementor-column.elementor-col-33,
  .elementor-column.elementor-col-66,
  .elementor-column.elementor-col-75 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Counter section on homepage: clean 2x2 grid */
  .elementor-section .elementor-column.elementor-col-25 {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    padding: 12px 6px !important;
    margin-bottom: 16px !important;
  }
  .elementor-counter-number-wrapper {
    font-size: clamp(26px, 7.5vw, 38px) !important;
    line-height: 1.1 !important;
  }
  .elementor-counter-title {
    font-size: 12.5px !important;
    white-space: normal !important;
    line-height: 1.35 !important;
  }

  /* Typography scaling — no text overflows screen */
  h1, h1.elementor-heading-title, .elementor-widget-heading h1.elementor-heading-title {
    font-size: clamp(22px, 6.5vw, 34px) !important;
    line-height: 1.25 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  h2, h2.elementor-heading-title, .elementor-widget-heading h2.elementor-heading-title {
    font-size: clamp(19px, 5.5vw, 26px) !important;
    line-height: 1.3 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  h3, h3.elementor-heading-title, .elementor-widget-heading h3.elementor-heading-title {
    font-size: clamp(16px, 4.5vw, 21px) !important;
    line-height: 1.35 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  p, li, span, a {
    word-break: normal;
    overflow-wrap: break-word;
  }

  .elementor-widget-text-editor {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
  }

  .elementor-widget-text-editor h5 {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  /* Top Bar Header on mobile */
  .elementor-element-011475a {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .elementor-element-011475a .elementor-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 6px 12px !important;
    gap: 4px !important;
  }
  .elementor-element-011475a .elementor-element-8360e7b {
    display: none !important; /* Hide long slogan on mobile header */
  }
  .elementor-element-011475a .elementor-column {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  .elementor-element-011475a .elementor-icon-list-items {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px 12px !important;
  }
  .elementor-element-011475a .elementor-icon-list-item {
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  /* Main Navigation Header */
  .elementor-element-69491ab img,
  .elementor-element-b2cfcaf img {
    max-height: 38px !important;
    width: auto !important;
  }
  .elementor-element-f74cd7b {
    display: none !important; /* Hide desktop consultation button in header row */
  }
  .elementskit-menu-hamburger {
    display: flex !important;
  }

  /* Buttons on mobile */
  .elementor-button,
  .elementor-button-link {
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-break: normal !important;
  }

  /* Footer on mobile */
  .elementor-element-ac3f73a {
    margin-top: 30px !important;
    margin-bottom: 0 !important;
    clear: both !important;
  }
  .elementor-element-b2cec12 {
    padding: 24px 16px !important;
    margin: 0 12px !important;
  }
  .elementor-element-b2cec12 .elementor-heading-title,
  .elementor-element-9be69e0 .elementor-heading-title,
  .ekit-template-content-footer .elementor-element-b2cec12 .elementor-heading-title {
    color: #FFFFFF !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    margin-bottom: 12px !important;
  }
  .elementor-element-ac3f73a .elementor-container,
  .elementor-element-33a98256 .elementor-container {
    flex-direction: column !important;
  }
  .elementor-element-ac3f73a .elementor-column,
  .elementor-element-33a98256 .elementor-column,
  .elementor-element-1ac2ab32 .elementor-column {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .ekit-template-content-footer .elementor-widget-image img {
    max-width: 160px !important;
    margin: 0 auto 14px auto !important;
  }
  .ekit-template-content-footer {
    text-align: center !important;
  }
  .elementor-social-icons-wrapper {
    justify-content: center !important;
  }
  .elementor-element-107d13f9 .elementor-container {
    flex-direction: column !important;
    text-align: center !important;
  }

  /* Form controls */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  textarea,
  select {
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }

  /* Tables */
  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
  }
}

/* ============================================================
   3. CHECKOUT PAGES (/checkout/ & /checkout-2/) MOBILE FIXES
   ============================================================ */
@media (max-width: 768px) {
  .ar-checkout-wrapper {
    padding: 16px 12px 60px !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .ar-checkout-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .ar-checkout-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .ar-summary-card {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .ar-trust-bar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px 14px !important;
  }

  .ar-trust-item {
    font-size: 12px !important;
  }

  .ar-checkout-hero h1 {
    font-size: clamp(20px, 6.5vw, 28px) !important;
    line-height: 1.25 !important;
    word-break: normal !important;
  }

  .ar-checkout-hero p {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
  }

  .ar-card,
  .ar-summary-card {
    padding: 18px 14px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .ar-form-row.two-col {
    grid-template-columns: 1fr !important;
  }

  .ar-service-option {
    padding: 12px 10px !important;
    gap: 8px !important;
  }

  .ar-service-info {
    max-width: calc(100% - 90px) !important;
  }

  .ar-service-name {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .ar-service-desc {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
  }

  .ar-service-price {
    font-size: 13.5px !important;
    white-space: nowrap !important;
  }

  .ar-btn-pay {
    font-size: 15px !important;
    padding: 14px 16px !important;
    width: 100% !important;
  }
}

/* ============================================================
   4. OFFER PAGE (/offer/) MOBILE FIXES
   ============================================================ */
@media (max-width: 768px) {
  .ar-top-bar-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 4px !important;
    padding: 6px 12px !important;
  }

  .ar-top-bar-left {
    display: none !important;
  }

  .ar-top-bar-right {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    font-size: 11px !important;
  }

  .ar-main-navbar {
    padding-block: 8px !important;
  }

  .ar-navbar-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    padding-inline: 14px !important;
  }

  .ar-brand-logo img {
    height: 32px !important;
    max-width: 135px !important;
    width: auto !important;
  }

  .ar-navbar-tagline {
    display: none !important;
  }

  .ar-btn-consultation {
    padding: 7px 12px !important;
    font-size: 11.5px !important;
    white-space: nowrap !important;
  }

  .hero {
    padding-top: 24px !important;
    padding-bottom: 28px !important;
  }

  .hero h1 {
    font-size: clamp(26px, 8vw, 40px) !important;
    line-height: 1.15 !important;
    word-break: normal !important;
  }

  .hero .lede {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
  }

  .compare-grid,
  .price-grid,
  .work-grid,
  .steps,
  .proof-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .wrap {
    padding-inline: 16px !important;
    max-width: 100% !important;
  }

  .dock {
    display: flex !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .dock .btn {
    min-height: 44px !important;
    padding: 8px 10px !important;
    font-size: 12.5px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
  }

  .dock .btn-primary {
    flex: 2 !important;
  }

  .dock .btn-ghost {
    flex: 1 !important;
  }

  #demoForm .ar-form-row {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   5. PORTFOLIO PAGE (/portfolio/) MOBILE FIXES
   ============================================================ */
@media (max-width: 768px) {
  .ar-portfolio-grid-wrapper {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .ar-portfolio-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .ar-card-thumb-wrap {
    height: 200px !important;
  }

  .ar-card-info-wrap {
    padding: 18px 16px !important;
  }

  .ar-card-title {
    font-size: 17px !important;
  }

  .ar-card-subline {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .ar-card-action-bar {
    gap: 8px !important;
  }

  .ar-card-primary-cta {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }

  .ar-card-quick-btn {
    font-size: 12px !important;
    padding: 9px 12px !important;
  }
}

/* Extra small devices (max-width: 480px) */
@media (max-width: 480px) {
  .ar-card-action-bar {
    flex-direction: column !important;
    width: 100% !important;
  }
  .ar-card-primary-cta,
  .ar-card-quick-btn {
    width: 100% !important;
  }
}

/* ============================================================
   6. MOBILE HEADER & HAMBURGER MENU DRAWER (STRICT FIX)
   ============================================================ */
@media (max-width: 1024px) {
  /* 1. Header Container: Single clean flex row */
  .elementor-element-7ec6df1 > .elementor-container,
  .ekit-template-content-header .elementor-section:not(.elementor-element-011475a) > .elementor-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 16px !important;
    box-sizing: border-box !important;
  }

  /* Logo Column: Left aligned, proper size */
  .elementor-element-7ec6df1 .elementor-column.elementor-element-b2cfcaf,
  .ekit-template-content-header .elementor-column:has(.elementor-widget-image) {
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: 65% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .elementor-element-7ec6df1 .elementor-element-69491ab,
  .ekit-template-content-header .elementor-widget-image {
    margin: 0 !important;
    padding: 0 !important;
  }

  .elementor-element-7ec6df1 .elementor-element-69491ab img,
  .ekit-template-content-header .elementor-widget-image img {
    max-width: 175px !important;
    width: 175px !important;
    height: auto !important;
    display: block !important;
  }

  /* Nav Menu Column: Right aligned next to logo */
  .elementor-element-7ec6df1 .elementor-column.elementor-element-59ce085,
  .ekit-template-content-header .elementor-column:has(.elementor-widget-ekit-nav-menu) {
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Hide Desktop CTA in header on mobile */
  .elementor-element-7ec6df1 .elementor-column.elementor-element-f74cd7b {
    display: none !important;
  }

  /* Hamburger Toggle Button: Sharp, modern, touch-friendly */
  button.elementskit-menu-hamburger.elementskit-menu-toggler {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #011B39 !important;
    border: 1.5px solid #BE8C33 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(1, 27, 57, 0.2) !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
    box-sizing: border-box !important;
    z-index: 100 !important;
  }

  button.elementskit-menu-hamburger.elementskit-menu-toggler:hover,
  button.elementskit-menu-hamburger.elementskit-menu-toggler:active {
    background: #BE8C33 !important;
    border-color: #BE8C33 !important;
  }

  button.elementskit-menu-hamburger.elementskit-menu-toggler .elementskit-menu-hamburger-icon {
    display: block !important;
    width: 22px !important;
    height: 2.5px !important;
    background-color: #FFFFFF !important;
    border-radius: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: all 0.25s ease !important;
  }

  /* Offcanvas Drawer: Solid background, right side slide-out */
  .elementskit-menu-container.elementskit-menu-offcanvas-elements {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: min(340px, 86vw) !important;
    max-width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    background: #FFFFFF !important;
    box-shadow: -10px 0 35px rgba(1, 27, 57, 0.25) !important;
    transform: translateX(110%) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
    margin: 0 !important;
    border-left: 2px solid #BE8C33 !important;
    visibility: hidden !important;
  }

  .elementskit-menu-container.elementskit-menu-offcanvas-elements.active,
  body.ar-menu-open .elementskit-menu-container.elementskit-menu-offcanvas-elements {
    transform: translateX(0) !important;
    left: auto !important;
    visibility: visible !important;
  }

  /* Drawer Top Identity / Header Bar */
  .elementskit-menu-container .elementskit-nav-identity-panel {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    background: #011B39 !important;
    border-bottom: 2px solid #BE8C33 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    order: -1 !important;
    flex-shrink: 0 !important;
  }

  .elementskit-nav-identity-panel .ar-drawer-brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #FFFFFF !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
  }

  /* Close Button (X) */
  button.elementskit-menu-close.elementskit-menu-toggler {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    color: #FFFFFF !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
  }

  button.elementskit-menu-close.elementskit-menu-toggler:hover,
  button.elementskit-menu-close.elementskit-menu-toggler:active {
    background: #BE8C33 !important;
    border-color: #BE8C33 !important;
    transform: rotate(90deg) !important;
  }

  /* Navigation Links List */
  .elementskit-menu-container .elementskit-navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    width: 100% !important;
    padding: 6px 0 0 0 !important;
    margin: 0 !important;
    list-style: none !important;
    flex-grow: 1 !important;
  }

  .elementskit-menu-container .elementskit-navbar-nav > li {
    width: 100% !important;
    border-bottom: 1px solid #F1F5F9 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
  }

  .elementskit-menu-container .elementskit-navbar-nav > li > a.ekit-menu-nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 22px !important;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #011B39 !important;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
  }

  .elementskit-menu-container .elementskit-navbar-nav > li > a.ekit-menu-nav-link:hover,
  .elementskit-menu-container .elementskit-navbar-nav > li > a.ekit-menu-nav-link:active {
    background: #F8FAFC !important;
    color: #BE8C33 !important;
  }

  .elementskit-menu-container .elementskit-submenu-indicator {
    color: #94A3B8 !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
    cursor: pointer !important;
  }

  /* Megamenu Panel Dropdown inside Drawer */
  .elementskit-menu-container .elementskit-megamenu-panel {
    display: none !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #F8FAFC !important;
    padding: 10px 16px 14px 20px !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  }

  .elementskit-menu-container .elementskit-dropdown-open > .elementskit-megamenu-panel,
  .elementskit-menu-container li.open > .elementskit-megamenu-panel {
    display: block !important;
  }

  .elementskit-menu-container .elementskit-megamenu-panel h2.elementor-icon-box-title a {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    padding: 8px 6px !important;
    display: block !important;
    text-decoration: none !important;
  }

  .elementskit-menu-container .elementskit-megamenu-panel h2.elementor-heading-title {
    font-size: 11.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #BE8C33 !important;
    font-weight: 700 !important;
    margin-top: 10px !important;
    margin-bottom: 4px !important;
  }

  /* Backdrop Overlay */
  .elementskit-menu-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(1, 27, 57, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 999990 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
  }

  .elementskit-menu-overlay.active,
  body.ar-menu-open .elementskit-menu-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Lock body scroll when menu is active */
  body.ar-menu-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  /* Drawer Bottom Consultation Button */
  .ar-drawer-cta-wrapper {
    margin: 20px 20px 28px 20px !important;
    padding-top: 14px !important;
    flex-shrink: 0 !important;
  }

  .ar-drawer-cta-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 13px 20px !important;
    background: #BE8C33 !important;
    color: #FFFFFF !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(190, 140, 51, 0.3) !important;
    transition: background 0.2s ease !important;
  }

  .ar-drawer-cta-btn:hover {
    background: #a07324 !important;
    color: #FFFFFF !important;
  }
}

/* Prevent any mobile drawer elements from leaking into desktop header */
@media (min-width: 1025px) {
  .elementskit-nav-identity-panel,
  .ar-drawer-cta-wrapper,
  .ar-drawer-brand {
    display: none !important;
  }
}




/* ============================================================
   AR WEBCRAFTS — UNIFORM MODERN PORTFOLIO (9 Clean Projects)
   Spacious, Elegant Grid & Crisp Layout (Zero-Blur & Zero-Overlay)
   ============================================================ */

/* Spacious Grid Container */
.ar-portfolio-grid-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 32px 28px !important;
    max-width: 1240px !important;
    margin: 40px auto 60px auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Uniform Modern Card */
.ar-portfolio-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
    box-shadow: 0 8px 24px rgba(1, 27, 57, 0.05) !important;
    position: relative !important;
}

.ar-portfolio-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(1, 27, 57, 0.12) !important;
    border-color: #BE8C33 !important;
}

/* Card Thumbnail Wrap & Image */
.ar-card-thumb-wrap {
    position: relative !important;
    width: 100% !important;
    height: 230px !important;
    background: #F8FAFC !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: 1px solid #F1F5F9 !important;
}

.ar-card-thumb-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    overflow: hidden !important;
}

.ar-card-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    transition: transform 0.4s ease !important;
    filter: none !important;
    -webkit-filter: none !important;
}

.ar-portfolio-card:hover .ar-card-img {
    transform: scale(1.02) !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* STRICT ZERO-BLUR & ZERO-OVERLAY: Hide hover overlay button and blur completely */
.ar-card-thumb-overlay,
.ar-thumb-hover-btn,
.ar-card-thumb-wrap .ar-card-thumb-overlay,
.ar-portfolio-card:hover .ar-card-thumb-overlay,
.ar-portfolio-card:hover .ar-thumb-hover-btn {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}

/* Card Content Area */
.ar-card-info-wrap {
    padding: 22px 20px 20px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    justify-content: space-between !important;
    background: #FFFFFF !important;
}

.ar-card-title {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin: 0 0 10px 0 !important;
    color: #011B39 !important;
}

.ar-card-title a {
    color: #011B39 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.ar-card-title a:hover {
    color: #BE8C33 !important;
}

.ar-card-subline {
    font-family: 'Poppins', sans-serif !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #64748B !important;
    margin: 0 0 20px 0 !important;
    flex: 1 1 auto !important;
}

/* Action Bar */
.ar-card-action-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding-top: 16px !important;
    border-top: 1px solid #F1F5F9 !important;
    margin-top: auto !important;
}

/* Primary CTA Button (Explore Project Details) - Gold Branded */
.ar-card-primary-cta {
    background: #BE8C33 !important;
    color: #FFFFFF !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 10px 14px !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 14px rgba(190, 140, 51, 0.25) !important;
    flex: 1 1 auto !important;
}

.ar-card-primary-cta:hover {
    background: #a07324 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(190, 140, 51, 0.35) !important;
    color: #FFFFFF !important;
}

/* Secondary Quick View Button */
.ar-card-quick-btn {
    background: #FFFFFF !important;
    color: #011B39 !important;
    border: 1px solid #CBD5E1 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    padding: 9px 12px !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

.ar-card-quick-btn:hover {
    background: #F8FAFC !important;
    border-color: #011B39 !important;
    color: #011B39 !important;
    transform: translateY(-2px) !important;
}

/* Quick View Modal Styles */
.ar-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(1, 27, 57, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    box-sizing: border-box !important;
}

.ar-modal-overlay.ar-active {
    opacity: 1 !important;
    visibility: visible !important;
}

.ar-modal-card {
    background: #FFFFFF !important;
    border-radius: 24px !important;
    max-width: 840px !important;
    width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding: 36px 40px !important;
    position: relative !important;
    box-shadow: 0 30px 80px rgba(1, 27, 57, 0.35) !important;
    transform: translateY(20px) scale(0.97) !important;
    transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

.ar-modal-overlay.ar-active .ar-modal-card {
    transform: translateY(0) scale(1) !important;
}

.ar-modal-close {
    position: absolute !important;
    top: 20px !important;
    right: 22px !important;
    background: #F1F5F9 !important;
    border: none !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    color: #64748B !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.ar-modal-close:hover {
    background: #BE8C33 !important;
    color: #FFFFFF !important;
    transform: rotate(90deg) !important;
}

.ar-modal-badge {
    display: inline-block !important;
    background: rgba(190, 140, 51, 0.12) !important;
    color: #BE8C33 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 5px 14px !important;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin-bottom: 12px !important;
}

.ar-modal-title {
    font-family: inherit !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #011B39 !important;
    line-height: 1.25 !important;
    margin: 0 0 8px 0 !important;
}

.ar-modal-tagline {
    font-size: 15px !important;
    color: #64748B !important;
    margin: 0 0 24px 0 !important;
}

.ar-modal-meta-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    background: #F8FAFC !important;
    padding: 18px 20px !important;
    border-radius: 14px !important;
    border: 1px solid #EEF2F6 !important;
    margin-bottom: 24px !important;
}

.ar-modal-meta-item .ar-lbl {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #94A3B8 !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 4px !important;
}

.ar-modal-meta-item .ar-val {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #011B39 !important;
}

.ar-modal-section-title {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #011B39 !important;
    margin: 20px 0 10px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.ar-modal-overview-text {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: #475569 !important;
    margin-bottom: 20px !important;
}

.ar-modal-features-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 24px 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px 16px !important;
}

.ar-modal-features-list li {
    font-size: 13.5px !important;
    color: #334155 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    line-height: 1.4 !important;
}

.ar-modal-features-list li i {
    color: #BE8C33 !important;
    margin-top: 3px !important;
    font-size: 12px !important;
}

.ar-modal-actions {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding-top: 20px !important;
    border-top: 1px solid #EEF2F6 !important;
}

.ar-modal-primary-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #BE8C33 !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 13px 26px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(190, 140, 51, 0.3) !important;
    transition: all 0.25s ease !important;
}

.ar-modal-primary-btn:hover {
    background: #011B39 !important;
    color: #FFFFFF !important;
}

.ar-modal-verified-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #F8FAFC !important;
    color: #011B39 !important;
    border: 1px solid #E2E8F0 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 12px 22px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.ar-modal-verified-link:hover {
    background: #E2E8F0 !important;
    color: #011B39 !important;
}

/* Modal Internal Sections */
.ar-modal-sec-head {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

.ar-modal-sec-head h3 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #011B39 !important;
}

.ar-modal-sec-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: rgba(190, 140, 51, 0.12) !important;
    color: #BE8C33 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
}

.ar-modal-prose {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: #475569 !important;
    margin: 0 0 12px 0 !important;
}

.ar-modal-prose.ar-prose-sub {
    color: #64748B !important;
    font-size: 13.5px !important;
    margin-bottom: 20px !important;
}

.ar-modal-feature-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 24px 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px 16px !important;
}

.ar-modal-feature-list li {
    display: flex !important;
    align-items: flex-start !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    line-height: 1.4 !important;
}

.ar-modal-tech-stack {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 12px 0 24px 0 !important;
}

.ar-modal-tech-pill {
    display: inline-flex !important;
    align-items: center !important;
    background: #F1F5F9 !important;
    color: #011B39 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
}

.ar-modal-quote-box {
    background: #F8FAFC !important;
    border-left: 4px solid #BE8C33 !important;
    padding: 18px 20px !important;
    border-radius: 0 12px 12px 0 !important;
    margin: 12px 0 24px 0 !important;
}

.ar-modal-stars {
    color: #F59E0B !important;
    font-size: 15px !important;
    margin-bottom: 6px !important;
}

.ar-modal-quote-text {
    font-style: italic !important;
    font-size: 14px !important;
    color: #334155 !important;
    line-height: 1.6 !important;
    margin: 0 0 8px 0 !important;
}

.ar-modal-quote-author {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #011B39 !important;
}

.ar-modal-footer {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding-top: 20px !important;
    border-top: 1px solid #EEF2F6 !important;
}

.ar-modal-live-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #BE8C33 !important;
    color: #FFFFFF !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 12px 22px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(190, 140, 51, 0.25) !important;
    transition: all 0.2s ease !important;
}

.ar-modal-live-btn:hover {
    background: #a07324 !important;
    color: #FFFFFF !important;
}

.ar-modal-full-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #FFFFFF !important;
    color: #011B39 !important;
    border: 1px solid #CBD5E1 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 11px 20px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.ar-modal-full-btn:hover {
    background: #F8FAFC !important;
    color: #BE8C33 !important;
}

.ar-modal-meta-strip {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
}

.ar-modal-live-indicator {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #059669 !important;
    background: rgba(16, 185, 129, 0.1) !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
}

.ar-pulse-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7) !important;
    animation: arPulse 2s infinite !important;
}

@keyframes arPulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Responsive Grid Breakpoints */
@media (max-width: 1080px) {
    .ar-portfolio-grid-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px !important;
    }
}

@media (max-width: 768px) {
    .ar-portfolio-grid-wrapper {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 !important;
        margin: 24px auto 40px auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .ar-portfolio-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .ar-card-thumb-wrap {
        height: 200px !important;
    }
    .ar-card-info-wrap {
        padding: 18px 16px !important;
    }
    .ar-card-title {
        font-size: 17px !important;
    }
    .ar-card-subline {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
    .ar-card-action-bar {
        flex-direction: row !important;
        gap: 8px !important;
    }
    .ar-card-primary-cta {
        font-size: 12px !important;
        padding: 10px 14px !important;
    }
    .ar-card-quick-btn {
        font-size: 11px !important;
        padding: 9px 12px !important;
    }
    .ar-modal-card {
        padding: 24px 18px !important;
        border-radius: 18px !important;
    }
    .ar-modal-title {
        font-size: 22px !important;
    }
    .ar-modal-meta-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .ar-modal-feature-list {
        grid-template-columns: 1fr !important;
    }
    .ar-modal-footer {
        flex-direction: column !important;
    }
    .ar-modal-footer a {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    .ar-card-action-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }
    .ar-card-primary-cta,
    .ar-card-quick-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}


/* ============================================================
   AR WEBCRAFTS — EDITORIAL ALTERNATING PORTFOLIO LAYOUT
   Matching Reference Layout (Image <-> Content Zigzag)
   ============================================================ */

.ar-portfolio-grid-wrapper.ar-portfolio-alt-layout,
.ar-portfolio-alt-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 84px !important;
    max-width: 1180px !important;
    margin: 48px auto 84px auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

.ar-portfolio-grid-wrapper.ar-portfolio-alt-layout *,
.ar-portfolio-alt-layout * {
    box-sizing: border-box !important;
}

/* Individual Portfolio Row */
.ar-portfolio-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
    gap: 64px !important;
    align-items: center !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Alternating Zigzag for Even Rows (Content Left, Image Right) */
.ar-portfolio-row:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
}

.ar-portfolio-row:nth-child(even) .ar-row-media {
    order: 2 !important;
}

.ar-portfolio-row:nth-child(even) .ar-row-content {
    order: 1 !important;
}

/* Media / Mockup Column */
.ar-row-media {
    position: relative !important;
    width: 100% !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #F8FAFC !important;
    box-shadow: 0 14px 36px rgba(1, 27, 57, 0.08) !important;
    border: 1px solid #E2E8F0 !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease !important;
}

.ar-row-media:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 24px 50px rgba(1, 27, 57, 0.15) !important;
    border-color: #BE8C33 !important;
}

.ar-media-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    overflow: hidden !important;
}

.ar-media-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ar-row-media:hover .ar-media-img {
    transform: scale(1.025) !important;
}

/* Content Column */
.ar-row-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 8px 0 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

.ar-row-title {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 0 0 16px 0 !important;
    color: #011B39 !important;
    letter-spacing: -0.3px !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

.ar-row-title a {
    color: #011B39 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.ar-row-title a:hover {
    color: #BE8C33 !important;
}

.ar-row-desc {
    font-family: 'Poppins', sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    color: #64748B !important;
    margin: 0 0 32px 0 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* Subtle Hairline Divider */
.ar-row-divider {
    width: 100% !important;
    height: 1px !important;
    background: #E2E8F0 !important;
    margin: 0 0 20px 0 !important;
}

/* Meta Footer Row */
.ar-row-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.ar-row-category {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    letter-spacing: 0.2px !important;
}

.ar-row-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.ar-row-quick-btn {
    background: #F8FAFC !important;
    color: #011B39 !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 20px !important;
    padding: 7px 16px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.ar-row-quick-btn:hover {
    background: #011B39 !important;
    color: #FFFFFF !important;
    border-color: #011B39 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(1, 27, 57, 0.15) !important;
}

.ar-row-arrow-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #011B39 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.ar-row-arrow-btn svg {
    transition: transform 0.25s ease !important;
}

.ar-row-arrow-btn:hover {
    background: #BE8C33 !important;
    color: #FFFFFF !important;
    border-color: #BE8C33 !important;
    box-shadow: 0 6px 16px rgba(190, 140, 51, 0.35) !important;
    transform: translateY(-2px) !important;
}

.ar-row-arrow-btn:hover svg {
    transform: translate(2px, -2px) !important;
}

/* Tablet & Mobile Responsiveness */
@media (max-width: 900px) {
    .ar-portfolio-grid-wrapper.ar-portfolio-alt-layout,
    .ar-portfolio-alt-layout {
        gap: 56px !important;
        padding: 0 16px !important;
        margin: 32px auto 60px auto !important;
    }

    .ar-portfolio-row,
    .ar-portfolio-row:nth-child(even) {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .ar-portfolio-row .ar-row-media,
    .ar-portfolio-row:nth-child(even) .ar-row-media {
        order: 1 !important;
    }

    .ar-portfolio-row .ar-row-content,
    .ar-portfolio-row:nth-child(even) .ar-row-content {
        order: 2 !important;
        padding: 0 !important;
    }

    .ar-row-title {
        font-size: 24px !important;
        margin-bottom: 12px !important;
    }

    .ar-row-desc {
        font-size: 14.5px !important;
        line-height: 1.65 !important;
        margin-bottom: 22px !important;
    }
}

@media (max-width: 480px) {
    .ar-portfolio-grid-wrapper.ar-portfolio-alt-layout,
    .ar-portfolio-alt-layout {
        gap: 48px !important;
        padding: 0 12px !important;
        margin: 24px auto 48px auto !important;
    }

    .ar-row-title {
        font-size: 21px !important;
        line-height: 1.3 !important;
    }

    .ar-row-desc {
        font-size: 13.5px !important;
        line-height: 1.6 !important;
        margin-bottom: 18px !important;
    }

    .ar-row-footer {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .ar-row-category {
        font-size: 13px !important;
    }

    .ar-row-actions {
        width: 100% !important;
        justify-content: space-between !important;
    }
}

/* ============================================================
   AR WEBCRAFTS — MASTER SITESTYLE FLOATING WHATSAPP BUTTON
   ============================================================ */
.ar-whatsapp-floating-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: #FFFFFF !important;
  text-decoration: none !important;
  padding: 12px 18px 12px 14px;
  border-radius: 50px;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.42), 0 4px 10px rgba(0, 0, 0, 0.15);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.ar-whatsapp-floating-btn:hover {
  background: #20BD5A;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 30px rgba(37, 211, 102, 0.55), 0 6px 14px rgba(0, 0, 0, 0.2);
  color: #FFFFFF !important;
}

.ar-whatsapp-floating-btn svg {
  display: block;
  flex-shrink: 0;
}

.ar-whatsapp-floating-btn .ar-wa-pulse {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: #10B981;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  animation: arWaPulse 2s infinite;
}

@keyframes arWaPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

@media (max-width: 768px) {
  .ar-whatsapp-floating-btn {
    bottom: 84px; /* clearance above mobile dock or navigation */
    right: 16px;
    width: 54px;
    height: 54px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .ar-whatsapp-floating-btn span {
    display: none;
  }
}