/*
Theme Name:    xstore-child
Theme URI:     https://xstore.8theme.com
Description:   XStore is a multi-purpose theme that offers the ultimate WordPress and WooCommerce synergy, providing a comprehensive, all-in-one solution.
Author:        8theme
Author URI:    https://www.8theme.com
Template:      xstore
Version:       1.0
Text Domain:   xstore-child
Tags: e-commerce, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, custom-logo, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options, translation-ready, ecommerce, woocommerce, shop, elementor, business, corporate, blog, news, light, dark
*/
/* Space Grotesk */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

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


/* Font Awesome 6 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');


/* Body & Form Elements - Inter */
body,
input,
button,
textarea,
select {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}


/* Headings - Space Grotesk */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}
/* Force Font Families for Font Awesome Icons */
.fa, .fas, .fa-solid {
  font-family: "Font Awesome 6 Free", "FontAwesome" !important;
  font-weight: 900 !important;
}

.far, .fa-regular {
  font-family: "Font Awesome 6 Free", "FontAwesome" !important;
  font-weight: 400 !important;
}

.fab, .fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
}

*:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fa-solid):not(.fa-regular):not(.fa-brands):not([class*="fa-"]):not([class*="et-icon"]):not([class*="elementor-icon"]):not([class*="eicon-"]), body, input, button, textarea, select {
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
}
/* ==========================================================================
   2. Text Alignment Utility
   ========================================================================== */
.bc-type-left2 .a-center {
  text-align: center !important;
}


/* ==========================================================================
   3. Homepage Background Gradient & Default Text Color
   ========================================================================== */
body.home {
  background: linear-gradient(180deg, #061126 0%, #0a192f 90%, #1e3a8a 98%, #1e3a8a 100%) !important;
  background-attachment: fixed !important;
  color: #ffffff;
}

@media (max-width: 767px) {
  p {
    font-size: 16px !important;
  }
}

body:not(.home) .page-wrapper {
  background: rgb(232, 243, 252) !important;
}

/* Smooth transition for overall look */
body.home #wrapper, 
body.home #page, 
body.home .site-content {
  background: transparent !important;
}


/* ==========================================================================
   4. Mega Menu Styling & Alignment
   ========================================================================== */
/* Remove white background and padding from XStore Mega Menu container */
.et_column_menu .nav-sublist-dropdown,
.navigation-item .nav-sublist-dropdown,
.xstore-mega-menu-wrapper {
  background-color: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Force static block container to match blue theme */
.xstore-mega-menu-wrapper .elementor-section-wrap,
.xstore-mega-menu-wrapper .elementor-section {
  background-color: #1e3a8a !important;
  width: 100% !important;
}

/* Force 1000px width with 0 margin and 0 padding */
.elementor-2017,
.elementor-2017 .elementor-element-e6a91e9 {
  width: 1000px !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.elementor-2017 .e-con-inner {
  padding: 20px 0 !important;
  margin: 0 !important;
}

/* Reset outer dropdown container */
.etheme-nav-menu ul.nav-sublist-dropdown,
.etheme-nav-menu div.nav-sublist-dropdown,
.menu-item-has-children .nav-sublist-dropdown {
  padding: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  width: 1000px !important;
  max-width: 1000px !important;
}

/* Style static block inner container gradient */
div[data-elementor-type="wp-post"].elementor-2017 .elementor-element-e6a91e9 {
  padding: 30px 20px !important;
  background-image: linear-gradient(120deg, #01266D 0%, #2563EB 100%) !important;
  width: 1000px !important;
  max-width: 1000px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.elementor-2017 .elementor-element.elementor-element-e6a91e9 .e-con-inner {
  padding: 0 !important;
  margin: 0 !important;
}

/* Mega Menu Centering */
.etheme-nav-menu .menu-item-has-children,
.etheme-nav-menu .menu-item-2023 {
  position: static !important;
}

.etheme-elementor-nav-menu-main,
.etheme-elementor-nav-menu-container {
  position: relative !important;
}

div.menu-static-block.nav-sublist-dropdown {
  left: 60% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  width: 1000px !important;
  max-width: 90vw !important;
  margin: 0 !important;
}

/* Prevent horizontal scroll */
html, body {
  overflow-x: hidden !important;
}


/* ==========================================================================
   5. Scroll Animation & Text Links
   ========================================================================== */
.scroll-grow-text {
  font-size: 30px;
  transform: scale(1);
  transition: font-size 0.5s ease, transform 0.5s ease;
  transform-origin: center center;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.scroll-grow-text.is-active {
  font-size: 90px;
  transform: scale(1.5) !important;
  margin-top: 40px !important;
  margin-bottom: 40px !important;
  transition: transform 0.6s ease, margin 0.6s ease !important;
}

.scroll-grow-text.is-active .elementor-heading-title {
  transform: scale(1.0) !important;
}

@media (max-width: 767px) {
  .scroll-grow-text {
    font-size: 24px;
  }

  .scroll-grow-text.is-active {
    font-size: 50px;
    transform: scale(1.05) !important;
  }
}

/* Container link colors */
.elementor-element-e6a91e9 a {
  color: #ffffff !important;
}

.elementor-element-e6a91e9 a:hover {
  color: #ffffff !important;
  opacity: 0.9;
}


/* ==========================================================================
   6. Contact Form 7 Alignment & Category Image Grid
   ========================================================================== */
.wpcf7,
.wpcf7-form,
.wpcf7-form p,
.wpcf7-form label,
.wpcf7-form div {
  text-align: left !important;
}

.wpcf7-form p {
  margin-bottom: 18px !important;
  display: block !important;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100% !important;
  margin-top: 6px !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

.wpcf7-form .wpcf7-radio {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 15px !important;
  margin-top: 8px !important;
  justify-content: flex-start !important;
}

.wpcf7-form .wpcf7-list-item {
  margin: 0 !important;
}

.wpcf7-form .wpcf7-list-item label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.wpcf7-form input[type="file"] {
  display: block !important;
  margin-top: 8px !important;
}

.wpcf7-form input[type="submit"] {
  width: 100% !important;
  margin-top: 10px !important;
}

.etheme-category-grid-image.rounded, 
.etheme-category-grid-image.rounded img {
  border-radius: 10% !important;
}