/* MK Home Header / Hero Style */

.mk-home-hero {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 140px 7% 80px;
  background: #111;
}

.mk-home-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

.mk-home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.48) 38%,
    rgba(0,0,0,.12) 100%
  );
}

.mk-home-content {
  position: relative;
  z-index: 3;
  max-width: 760px;
  color: #fff;
}

.mk-home-label {
  color: #d6ae6c;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 28px;
  display: block;
}

.mk-home-content h1 {
  color: #fff;
  font-size: clamp(56px, 7vw, 115px);
  line-height: .95;
  letter-spacing: -4px;
  margin: 0 0 30px;
  font-weight: 800;
}

.mk-home-line {
  width: 130px;
  height: 2px;
  background: #d6ae6c;
  margin: 0 0 34px;
}

.mk-home-content p {
  color: rgba(255,255,255,.9);
  font-size: 21px;
  line-height: 1.75;
  max-width: 650px;
  margin: 0;
}

.mk-home-buttons {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 42px;
}

.mk-home-buttons a {
  padding: 18px 36px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: .35s ease;
}

.mk-home-primary {
  background: #d6ae6c;
  color: #111;
}

.mk-home-primary:hover {
  background: #fff;
  color: #111;
}

.mk-home-secondary {
  border: 1px solid rgba(255,255,255,.65);
  color: #fff;
  background: rgba(255,255,255,.08);
}

.mk-home-secondary:hover {
  background: #fff;
  color: #111;
}

.mk-home-services {
  position: absolute;
  left: 7%;
  bottom: 45px;
  z-index: 3;
  display: flex;
  gap: 50px;
  color: #fff;
}

.mk-home-service {
  border-left: 1px solid rgba(255,255,255,.22);
  padding-left: 28px;
}

.mk-home-service:first-child {
  border-left: none;
  padding-left: 0;
}

.mk-home-service span {
  color: #d6ae6c;
  font-size: 30px;
  display: block;
  margin-bottom: 12px;
}

.mk-home-service strong {
  display: block;
  font-size: 17px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.mk-home-service p {
  margin: 0;
  color: rgba(255,255,255,.8);
  font-size: 14px;
}

/* Tablet */
@media(max-width: 1024px) {
  .mk-home-hero {
    min-height: 92vh;
    padding: 130px 6% 160px;
  }

  .mk-home-services {
    left: 6%;
    gap: 30px;
  }

  .mk-home-content h1 {
    font-size: 76px;
  }
}

/* Mobile */
@media(max-width: 700px) {
  .mk-home-hero {
    min-height: 92vh;
    align-items: flex-end;
    padding: 115px 22px 55px;
  }

  .mk-home-hero::after {
    background: linear-gradient(
      180deg,
      rgba(0,0,0,.12) 0%,
      rgba(0,0,0,.42) 45%,
      rgba(0,0,0,.86) 100%
    );
  }

  .mk-home-content h1 {
    font-size: 46px;
    letter-spacing: -2px;
  }

  .mk-home-content p {
    font-size: 16px;
  }

  .mk-home-buttons {
    flex-direction: column;
  }

  .mk-home-buttons a {
    width: 100%;
    text-align: center;
  }

  .mk-home-services {
    display: none;
  }
}
/* Main Navigation */

.elementor-nav-menu--main .elementor-item,
.elementor-nav-menu .elementor-item,
.main-header-menu > li > a,
.ast-builder-menu-1 .menu-link{

    color:#111 !important;

}

.elementor-nav-menu--main .elementor-item:hover,
.main-header-menu > li > a:hover,
.ast-builder-menu-1 .menu-link:hover{

    color:#b88a3d !important;

}

.current-menu-item>a,
.current_page_item>a{

    color:#b88a3d !important;

}
/* =========================================================
   MK DECOR SOLUTIONS — GLOBAL MANROPE FONT
   Applies to the full website, Elementor and HTML blocks
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* Global website font */
html,
body,
body *,
.elementor,
.elementor *,
.elementor-widget-html,
.elementor-widget-html *,
.elementor-widget-text-editor,
.elementor-widget-text-editor *,
.elementor-heading-title,
.elementor-button,
.elementor-nav-menu,
.elementor-nav-menu *,
.site,
.site *,
.site-content,
.site-content *,
header,
header *,
main,
main *,
section,
section *,
article,
article *,
footer,
footer *,
nav,
nav *,
form,
form *,
input,
textarea,
select,
button,
label,
a,
p,
span,
div,
li,
ul,
ol,
strong,
small,
blockquote,
table,
th,
td,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Manrope", Arial, sans-serif !important;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.elementor-heading-title {
  font-family: "Manrope", Arial, sans-serif !important;
  font-weight: 800;
}

/* Paragraphs and general text */
body,
p,
li,
span,
div,
label,
input,
textarea,
select,
table,
td,
th {
  font-family: "Manrope", Arial, sans-serif !important;
}

/* Buttons and links */
button,
input[type="submit"],
input[type="button"],
.elementor-button,
.wp-element-button,
a {
  font-family: "Manrope", Arial, sans-serif !important;
}

/* Navigation */
.elementor-nav-menu a,
.main-header-menu a,
.ast-builder-menu a,
.menu-item a,
.sub-menu a {
  font-family: "Manrope", Arial, sans-serif !important;
}

/* Elementor HTML widgets */
.elementor-widget-html,
.elementor-widget-html *,
.elementor-html,
.elementor-html * {
  font-family: "Manrope", Arial, sans-serif !important;
}

/* Form placeholders */
input::placeholder,
textarea::placeholder {
  font-family: "Manrope", Arial, sans-serif !important;
}

/* WooCommerce, if used */
.woocommerce,
.woocommerce *,
.woocommerce-page,
.woocommerce-page * {
  font-family: "Manrope", Arial, sans-serif !important;
}
/* =========================================================
   MK DECOR SOLUTIONS — MOBILE HORIZONTAL SCROLL FIX
   ========================================================= */

/* Prevent the entire website moving left and right */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

/* Use predictable sizing across the website */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent Elementor containers from exceeding the screen */
.elementor,
.elementor-section,
.elementor-container,
.elementor-column,
.elementor-widget,
.elementor-widget-wrap,
.elementor-widget-container,
.elementor-widget-html,
.e-con,
.e-con-inner {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Custom HTML sections */
.mk-home-hero,
.mk-facebook-section,
.mk-projects-section,
.mk-iphone-projects,
.mk-facebook-inner,
.mk-projects-container,
.mk-iphone-projects-inner {
  width: 100%;
  max-width: 100%;
}

/* Prevent media from creating horizontal overflow */
img,
svg,
video,
iframe,
canvas {
  max-width: 100%;
}

/* Prevent long links and text from stretching containers */
p,
a,
span,
strong,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Mobile-specific protection */
@media (max-width: 767px) {
  body,
  .site,
  .site-content,
  main,
  article,
  section,
  header,
  footer {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Prevent fixed-width buttons from exceeding the viewport */
  a,
  button,
  input,
  textarea,
  select {
    max-width: 100%;
  }

  /* Custom section inner containers */
  .mk-hero-inner,
  .mk-facebook-inner,
  .mk-projects-container,
  .mk-iphone-projects-inner {
    width: calc(100% - 36px) !important;
    max-width: calc(100% - 36px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  /* Full-width buttons remain inside their containers */
  .mk-hero-button,
  .mk-facebook-button,
  .mk-projects-cta,
  .mk-iphone-projects-button {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
  }

  /* Prevent decorative background elements causing overflow */
  .mk-facebook-section::before,
  .mk-projects-section::before,
  .mk-iphone-projects::before {
    max-width: 100%;
    pointer-events: none;
  }
}
/* =========================================================
   MK DECOR SOLUTIONS — MOBILE DROPDOWN MENU FIX
   Add this AFTER the horizontal scroll fix
   ========================================================= */

@media (max-width: 767px) {

  /* Allow dropdowns to extend outside the header */
  header,
  .site-header,
  .elementor-location-header,
  .elementor-location-header .elementor,
  .elementor-location-header .elementor-section,
  .elementor-location-header .elementor-container,
  .elementor-location-header .elementor-column,
  .elementor-location-header .elementor-widget,
  .elementor-location-header .elementor-widget-wrap,
  .elementor-location-header .elementor-widget-container,
  .elementor-location-header .e-con,
  .elementor-location-header .e-con-inner,
  .mk-header,
  .mk-header-inner,
  .mk-site-header,
  .mk-site-header-inner {
    overflow: visible !important;
  }

  /* Keep the header above the rest of the page */
  header,
  .site-header,
  .elementor-location-header,
  .mk-header,
  .mk-site-header {
    position: relative;
    z-index: 99999 !important;
  }

  /* Ensure the mobile menu appears above all page sections */
  .mk-mobile-menu,
  .mk-mobile-nav,
  .mk-mobile-menu-panel,
  .mk-header-mobile-menu,
  .mk-header-mobile-panel,
  .elementor-nav-menu--dropdown,
  .elementor-menu-toggle + .elementor-nav-menu--dropdown {
    z-index: 100000 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    visibility: visible;
  }

  /* Standard dropdown positioning */
  .mk-mobile-menu,
  .mk-mobile-nav,
  .mk-mobile-menu-panel,
  .mk-header-mobile-menu,
  .mk-header-mobile-panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100% !important;
  }

  /* Allow service submenu items to display */
  .mk-mobile-menu .sub-menu,
  .mk-mobile-nav .sub-menu,
  .mk-header-mobile-menu .sub-menu,
  .elementor-nav-menu--dropdown .sub-menu {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    z-index: 100001 !important;
  }
}