/*------------------------------------------------------------------------------------- 
Theme Name:		 Xiomi Child Theme
Theme URI:		 https://bytezdevs.com/xiomi-child-theme
Description:	 Personal Portfolio WordPress Theme (DesignByRuhul Purple Theme)
Author:			 Banglatheme & Ruhul Amin
Author URI:		 https://designbyruhul.com/
Template:		 xiomi
Version:		 1.0.1
Text Domain:	 xiomichildtheme
-------------------------------------------------------------------------------------*/

/* ==========================================================================
   01. Global Theme Color System (DesignByRuhul Palette)
   ========================================================================== */
:root {
  /* Core Theme Overrides (Replaces #28E98C & #13834D with Brand Purple) */
  --main-color-one: #4F3BFF !important;
  --secondary-color: #7B6BFF !important;
  --main-color2: #7B6BFF !important;
  --theme: #4F3BFF !important;
  --heading-color: #0A0A0A !important;
  --header: #0A0A0A !important;
  --paragraph-color: #525252 !important;
  --text: #525252 !important;
  --border-2: 1.5px solid #4F3BFF !important;
  /* Typography Overrides */
  --heading-font: 'Bricolage Grotesque', sans-serif !important;
  --secondary-font: 'Bricolage Grotesque', sans-serif !important;
  --body-font: 'Inter', sans-serif !important;
  --font-family-heading: 'Bricolage Grotesque', sans-serif !important;
  --font-family-base: 'Inter', sans-serif !important;


  /* HTML Theme Tokens */
  --bg-2: #0A0A0A !important;
  --brand: #4F3BFF;
  --brand-2: #7B6BFF;
  --brand-deep: #0F0F10;
  --brand-deep-2: #17161D;
  --bg: #FAF7F2;
  --surface: #FFFFFF;
  --surface-2: #F4F0E8;
  --surface-3: #E7E5E4;
  --ink: #0A0A0A;
  --ink-2: #525252;
  --muted: #6B7280;
  --line: rgba(79, 59, 255, 0.14);
  --line-2: rgba(79, 59, 255, 0.26);
  --grad: linear-gradient(135deg, #4F3BFF 0%, #7B6BFF 100%);
  --grad-deep: linear-gradient(135deg, #0F0F10 0%, #17161D 55%, #24222E 100%);
}

/* Selection & Scrollbar */
::selection {
  background: #4F3BFF !important;
  color: #FFFFFF !important;
}
::-moz-selection {
  background: #4F3BFF !important;
  color: #FFFFFF !important;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #4F3BFF, #7B6BFF) !important;
  border-radius: 999px;
}

/* ==========================================================================
   02. Component & Hover State Overrides
   ========================================================================== */
.awards-wrapper .awards-item:hover,
.news-1 .news-item:hover .content,
.news-content-wrapper .news-item-2:hover,
.news-content-wrapper .news-item-2.style-2,
.single-sidebar-widget .categories-items li:hover,
.price-wrapper .price-item:hover,
.service-card-items-2:hover,
.main-sidebar .single-sidebar-widget .service-list ul li:hover,
.main-sidebar .single-sidebar-widget .categories-list .list-item a:hover {
  background-color: #F4F0E8 !important;
  border-color: #4F3BFF !important;
}

.service-card-items-2:hover .icon,
.news-1 .news-item:hover .news-btns i {
  background-color: #4F3BFF !important;
  color: #FFFFFF !important;
}

.news-details-area .single-news-post .news-content .highlight-text,
.service-details-post .single-service-post .post-content .highlight-text {
  border-color: #4F3BFF !important;
  background: #F4F0E8 !important;
}

/* Theme Buttons */
.btn-wrapper .theme-btn,
.theme-btn,
.submit-btn,
.xiomi-btn {
  background: linear-gradient(135deg, #4F3BFF 0%, #7B6BFF 100%) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
}
.btn-wrapper .theme-btn:hover,
.theme-btn:hover,
.submit-btn:hover,
.xiomi-btn:hover {
  background: linear-gradient(135deg, #3F2CDA 0%, #6B57FF 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 24px rgba(79, 59, 255, 0.32) !important;
}

/* Navigation active and hover links */
.navigation-style-01 .navbar-nav li.current-menu-item > a,
.navigation-style-01 .navbar-nav li.current_page_item > a,
.navigation-style-01 .navbar-nav li a:hover,
.navbar-area .navbar-nav li a:hover {
  color: #4F3BFF !important;
}

/* Back to Top & Preloader */
#back-top a,
.back-to-top,
.progress-wrap {
  background: linear-gradient(135deg, #4F3BFF 0%, #7B6BFF 100%) !important;
  color: #FFFFFF !important;
}
.progress-wrap svg.progress-circle path {
  stroke: #4F3BFF !important;
}
.preloader-inner .cancel-btn {
  color: #4F3BFF !important;
}

/* SVG Fill fallback */
svg [fill="#28E98C"],
svg [fill="#28e98c"] {
  fill: #4F3BFF !important;
}

/* ==========================================================================
   03. Font Awesome 5 Free Compatibility Aliases
   ========================================================================== */
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/wp-content/themes/xiomi/assets/webfonts/fa-solid-900.woff2") format("woff2"),
       url("/wp-content/themes/xiomi/assets/webfonts/fa-solid-900.ttf") format("truetype");
}

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/wp-content/themes/xiomi/assets/webfonts/fa-regular-400.woff2") format("woff2"),
       url("/wp-content/themes/xiomi/assets/webfonts/fa-regular-400.ttf") format("truetype");
}

/* ==========================================================================
   04. Header & Navbar Spacing & Stacking Stability
   ========================================================================== */
.header-1 {
  position: relative !important;
  z-index: 1000 !important;
}

#header-sticky.sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;
  background-color: var(--white, #ffffff) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   05. Breadcrumb Banner: Ultra-Premium Studio Editorial Experience
   ========================================================================== */
.elementor-widget-xiomi-breadcrumb-widget {
  width: 100%;
}

.breadcrumb-wrap,
.breadcrumb-widget-wrap,
.breadcrumb-wrapper,
.elementor-widget-xiomi-breadcrumb-widget .breadcrumb-wrap,
.elementor-element-120fa26 .breadcrumb-wrap,
.elementor-element-a80c82a {
  position: relative !important;
  width: 100% !important;
  background-color: #FAF7F2 !important;
  background: 
    radial-gradient(ellipse 75% 60% at 50% 20%, rgba(79, 59, 255, 0.14) 0%, rgba(123, 107, 255, 0.05) 55%, transparent 100%),
    radial-gradient(circle 500px at 10% 20%, rgba(79, 59, 255, 0.08) 0%, transparent 60%),
    radial-gradient(circle 480px at 90% 80%, rgba(123, 107, 255, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, #FAF7F2 0%, #FAF7F2 50%, #FAF7F2 100%) !important;
  background-image: 
    radial-gradient(ellipse 75% 60% at 50% 20%, rgba(79, 59, 255, 0.14) 0%, rgba(123, 107, 255, 0.05) 55%, transparent 100%),
    radial-gradient(circle 500px at 10% 20%, rgba(79, 59, 255, 0.08) 0%, transparent 60%),
    radial-gradient(circle 480px at 90% 80%, rgba(123, 107, 255, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, #FAF7F2 0%, #FAF7F2 50%, #FAF7F2 100%) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Subtle Modern High-Tech Micro-Dot Grid Pattern - Matching Hero Section */
.breadcrumb-wrap::before,
.breadcrumb-wrap:before,
.breadcrumb-wrapper::before,
.breadcrumb-wrapper:before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: radial-gradient(rgba(79, 59, 255, 0.18) 1.3px, transparent 1.3px) !important;
  background-size: 24px 24px !important;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 25%, transparent 88%) !important;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 25%, transparent 88%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.88 !important;
}

/* Delicate Glowing Hairline Divider at Bottom */
.breadcrumb-wrap::after,
.breadcrumb-wrap:after,
.breadcrumb-wrapper::after,
.breadcrumb-wrapper:after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(79, 59, 255, 0.28) 50%, transparent 100%) !important;
  box-shadow: 0 0 12px rgba(79, 59, 255, 0.22) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.breadcrumb-wrapper .star-shape {
  display: none !important;
}

/* Content Container with Generous Breathing Room */
.breadcrumb-wrap.navbar-style-02 .breadcrumb-content,
.breadcrumb-wrap .breadcrumb-content {
  padding: 185px 24px 90px !important;
  position: relative !important;
  z-index: 3 !important;
  text-align: center !important;
}

/* Page Title: High-End Editorial Typography */
.breadcrumb-wrap .page-title,
.breadcrumb-wrap h1.page-title {
  font-family: var(--heading-font, "Bricolage Grotesque", sans-serif) !important;
  font-size: clamp(34px, 4.6vw, 54px) !important;
  font-weight: 800 !important;
  line-height: 1.16 !important;
  color: #0A0A0A !important;
  margin: 0 auto 22px auto !important;
  text-transform: capitalize !important;
  letter-spacing: -0.035em !important;
  max-width: 960px !important;
  word-break: break-word !important;
  text-shadow: 0 2px 24px rgba(79, 59, 255, 0.08) !important;
}

/* Floating Glassmorphism Breadcrumb Capsule Pill */
.breadcrumb-wrap .page-list {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  margin: 0 auto !important;
  padding: 9px 26px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(79, 59, 255, 0.18) !important;
  box-shadow: 
    0 8px 30px rgba(79, 59, 255, 0.08), 
    0 2px 6px rgba(0, 0, 0, 0.04) !important;
  gap: 0 !important;
  transition: all 0.3s ease !important;
}

.breadcrumb-wrap .page-list:hover {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(79, 59, 255, 0.3) !important;
  box-shadow: 
    0 10px 36px rgba(79, 59, 255, 0.12), 
    0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

.breadcrumb-wrap .page-list li {
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: #525252 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

.breadcrumb-wrap .page-list li::after,
.breadcrumb-wrap .page-list li:first-child::after,
.breadcrumb-wrap .page-list li:after {
  content: none !important;
  display: none !important;
}

/* Home Icon with Vibrant Purple Accent */
.breadcrumb-wrap .page-list li:first-child a::before {
  content: "\f015" !important;
  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  margin-right: 8px !important;
  color: #4F3BFF !important;
  display: inline-block !important;
  vertical-align: middle !important;
  transition: transform 0.25s ease !important;
}

.breadcrumb-wrap .page-list li:first-child a:hover::before {
  transform: scale(1.15) !important;
}

/* Separator Chevron */
.breadcrumb-wrap .page-list li + li::before {
  content: "\f105" !important;
  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  margin: 0 10px !important;
  color: #6B57FF !important;
  opacity: 0.75 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.breadcrumb-wrap .page-list li a {
  color: #525252 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: color 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
}

.breadcrumb-wrap .page-list li a:hover {
  color: #4F3BFF !important;
}

/* Active / Current Page Title Item in Breadcrumb */
.breadcrumb-wrap .page-list li span {
  color: #0A0A0A !important;
  font-weight: 600 !important;
}

/* Responsive Scaling */
@media (max-width: 991px) {
  .breadcrumb-wrap.navbar-style-02 .breadcrumb-content,
  .breadcrumb-wrap .breadcrumb-content {
    padding: 155px 20px 70px !important;
  }
  .breadcrumb-wrap .page-title,
  .breadcrumb-wrap h1.page-title {
    font-size: clamp(28px, 4.5vw, 40px) !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
  }
  .breadcrumb-wrap .page-list {
    padding: 8px 20px !important;
  }
}

@media (max-width: 575px) {
  .breadcrumb-wrap.navbar-style-02 .breadcrumb-content,
  .breadcrumb-wrap .breadcrumb-content {
    padding: 120px 16px 48px !important;
  }
  .breadcrumb-wrap .page-title,
  .breadcrumb-wrap h1.page-title {
    font-size: clamp(24px, 6.5vw, 32px) !important;
    line-height: 1.25 !important;
    margin-bottom: 14px !important;
    padding: 0 8px !important;
  }
  .breadcrumb-wrap .page-list {
    padding: 7px 16px !important;
    border-radius: 999px !important;
  }
  .breadcrumb-wrap .page-list li {
    font-size: 13px !important;
  }
  .breadcrumb-wrap .page-list li + li::before {
    margin: 0 7px !important;
    font-size: 11px !important;
  }
  .breadcrumb-wrap .page-list li:first-child a::before {
    font-size: 13px !important;
    margin-right: 6px !important;
  }
}

/* ==========================================================================
   04. Global Typography: Bricolage Grotesque (Headings) & Inter (Paragraphs / Body)
   ========================================================================== */

/* Body, Base Text & Universal Paragraphs */
html,
body,
p,
p *,
li,
input,
textarea,
select,
blockquote,
blockquote p,
article p,
.entry-content,
.entry-content p,
.post-content,
.post-content p,
.elementor-widget-text-editor,
.elementor-widget-text-editor *,
.elementor-text-editor,
.elementor-text-editor *,
.elementor-icon-box-description,
.elementor-icon-box-description *,
.banner-description,
.banner-description *,
.sub-title,
.subtitle,
.desc,
.description,
.content,
.info-text,
.paragraph,
[class*="description"],
[class*="content"] p {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* All Headings (H1 to H6) and Title Components */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
h1.elementor-heading-title,
h2.elementor-heading-title,
h3.elementor-heading-title,
h4.elementor-heading-title,
h5.elementor-heading-title,
h6.elementor-heading-title,
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4,
.elementor-widget-heading h5,
.elementor-widget-heading h6,
.theme-btn,
.btn,
.button,
.elementor-button,
.xiomi-btn,
.navbar-nav .nav-link,
.elementor-counter .elementor-counter-number,
.elementor-counter .elementor-counter-title,
.elementor-icon-box-title,
.pricing-plan-title,
.pricing-price,
.banner-title,
.section-title,
.post-title,
.entry-title,
.widget-title,
.card-title,
.xiomi-title,
.title,
.page-title,
[class*="heading"],
[class*="title-widget"] {
  font-family: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Ensure inner elements in headings (like <span>, <strong>, <a>, <em>) inherit Bricolage Grotesque */
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
.elementor-heading-title *,
.banner-title *,
.section-title *,
.page-title * {
  font-family: inherit !important;
}

/* ==========================================================================
   05. Preloader: Design By Ruhul in Bricolage Grotesque Font
   ========================================================================== */
.preloader .animation-preloader .txt-loading {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(1.8rem, 4.5vw, 3.5rem) !important;
  line-height: 1.2 !important;
  text-align: center !important;
  letter-spacing: -0.5px !important;
  user-select: none;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
}

.preloader .animation-preloader .txt-loading .letters-loading {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  color: var(--theme, #4F3BFF) !important;
  position: relative !important;
  background: var(--theme, #4F3BFF) !important;
  color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  display: inline-block !important;
}

.preloader .animation-preloader .txt-loading .letters-loading::before {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  color: var(--header, #0A0A0A) !important;
  content: attr(data-text-preloader) !important;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: rotateY(-90deg);
  animation: letters-loading 4s infinite;
}

.preloader .animation-preloader .txt-loading .preloader-space {
  width: 0.35em !important;
  display: inline-block !important;
}

/* Sequential Animation Delays for each letter */
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(1)::before { animation-delay: 0.0s; }
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(2)::before { animation-delay: 0.1s; }
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(3)::before { animation-delay: 0.2s; }
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(4)::before { animation-delay: 0.3s; }
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(5)::before { animation-delay: 0.4s; }
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(6)::before { animation-delay: 0.5s; }
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(7)::before { animation-delay: 0.6s; }
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(8)::before { animation-delay: 0.7s; }
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(9)::before { animation-delay: 0.8s; }
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(10)::before { animation-delay: 0.9s; }
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(11)::before { animation-delay: 1.0s; }
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(12)::before { animation-delay: 1.1s; }
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(13)::before { animation-delay: 1.2s; }
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(14)::before { animation-delay: 1.3s; }
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(15)::before { animation-delay: 1.4s; }
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(16)::before { animation-delay: 1.5s; }
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(17)::before { animation-delay: 1.6s; }
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(18)::before { animation-delay: 1.7s; }
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(19)::before { animation-delay: 1.8s; }
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(20)::before { animation-delay: 1.9s; }

/* Sub-name / Loading text */
.preloader p { display: none !important; }

/* ==========================================================================
   05b. Preloader — Light Version
   Overrides parent master.css .preloader .loader .loader-section .bg (#0D1919)
   to a light background. Matches the preloader_bg_color option (#FAF7F2).
   ========================================================================== */
.preloader .loader .loader-section .bg {
  background-color: #FAF7F2 !important;
}

/* Soft purple spinner ring that reads well on the light background */
.preloader .animation-preloader .spinner {
  border-color: rgba(79, 59, 255, 0.18) !important;
  border-top-color: var(--theme, #4F3BFF) !important;
}

@media (max-width: 575px) {
  .preloader .animation-preloader .txt-loading {
    font-size: clamp(1.2rem, 5.5vw, 1.8rem) !important;
  }
}

/* ==========================================================================
   06. Blog Single & Content List Fixes: Hide Unwanted Dots & Gray Points Text
   ========================================================================== */

/* 1. Hide unwanted pseudo-element dots on list items / points */
.blog-single-content-wrap ul li::before,
.blog-single-content-wrap ul li:before,
.content-area ul li::before,
.content-area ul li:before,
.entry-content ul li::before,
.entry-content ul li:before,
.projec-details-item ul li::before,
.projec-details-item ul li:before,
.project-content-area ul li::before,
.project-content-area ul li:before,
.elementor-widget-icon-list ul li::before,
.elementor-widget-icon-list ul li:before,
.elementor-icon-list-item::before,
.elementor-icon-list-item:before {
  display: none !important;
  content: none !important;
}

/* 2. Remove default bullet styling and reset padding on icon-list items */
.blog-single-content-wrap ul,
.content-area .entry-content ul,
.projec-details-item ul,
.elementor-icon-list-items {
  list-style: none !important;
  list-style-type: none !important;
}

.blog-single-content-wrap ul li,
.content-area .entry-content ul li,
.projec-details-item ul li,
.elementor-icon-list-item {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
}

/* 3. Set point text color to matching paragraph gray (#666666) */
.elementor-widget-icon-list .elementor-icon-list-text,
.elementor-widget-icon-list .elementor-icon-list-text *,
.blog-single-content-wrap .elementor-icon-list-text,
.blog-single-content-wrap .elementor-icon-list-text *,
.content-area .elementor-icon-list-text,
.content-area .elementor-icon-list-text *,
.blog-single-content-wrap ul li,
.content-area .entry-content ul li,
.projec-details-item ul li {
  color: #666666 !important;
}

/* ==========================================================================
   07. Blog & Site-Wide Paragraphs: Inter Font Priority
   ========================================================================== */
p,
p *,
p.elementor-heading-title,
p.elementor-heading-title *,
.elementor-widget-heading p,
.elementor-widget-heading p *,
.blog-content p,
.blog-content p *,
.blog-details p,
.blog-details p *,
.blog-single-content-wrap p,
.blog-single-content-wrap p *,
.blog-content-page p,
.blog-content-page p *,
.news-details-area p,
.news-details-area p *,
.news-standard-wrapper p,
.news-standard-items p,
.news-item p,
.news-content p,
.entry-content p,
.entry-content p *,
.post-content p,
.post-content p *,
article p,
article p *,
.comment-content p,
.comment-content p * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ==========================================================================
   08. Navigation & Menu: Bricolage Grotesque Font
   ========================================================================== */
.header-main .main-menu,
.header-main .main-menu ul,
.header-main .main-menu ul li,
.header-main .main-menu ul li a,
.header-main .main-menu ul li span,
.main-menu,
.main-menu ul,
.main-menu ul li,
.main-menu ul li a,
.main-menu ul li span,
#mobile-menu,
#mobile-menu ul,
#mobile-menu ul li,
#mobile-menu ul li a,
#mobile-menu ul li span,
.nav-menu--main,
.nav-menu--main a,
.nav-menu--main span,
#menu-main-menu,
#menu-main-menu li,
#menu-main-menu li a,
#menu-main-menu li span,
.navbar-nav,
.navbar-nav li,
.navbar-nav .nav-link,
.navbar-nav li a,
.navbar-area .navbar-nav li a,
.sub-menu,
.sub-menu li,
.sub-menu li a,
.sub-menu li span,
.submenu,
.submenu li,
.submenu li a,
.submenu li span,
.mean-container .mean-nav,
.mean-container .mean-nav ul,
.mean-container .mean-nav ul li,
.mean-container .mean-nav ul li a,
.mean-container .mean-nav a,
.mean-container .mean-nav span,
.sidebar__menu,
.sidebar__menu ul,
.sidebar__menu ul li,
.sidebar__menu ul li a,
.offcanvas__menu,
.offcanvas__menu ul,
.offcanvas__menu ul li,
.offcanvas__menu ul li a,
.homemenu-title {
  font-family: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ==========================================================================
   09. Hero Section: Ultra-Premium Studio Atmosphere & Micro-Dot Grid Pattern
   ========================================================================== */
.elementor-element-46a6522,
.hero-section.hero-1,
.hero-1 {
  position: relative !important;
  background-color: #FAF7F2 !important;
  background: 
    radial-gradient(ellipse 75% 60% at 50% 20%, rgba(79, 59, 255, 0.07) 0%, rgba(123, 107, 255, 0.02) 55%, transparent 100%),
    radial-gradient(circle 550px at 8% 22%, rgba(79, 59, 255, 0.04) 0%, transparent 65%),
    radial-gradient(circle 500px at 92% 75%, rgba(123, 107, 255, 0.05) 0%, transparent 65%),
    linear-gradient(180deg, #FAF7F2 0%, #FAF7F2 55%, #FAF7F2 100%) !important;
  background-image: 
    radial-gradient(ellipse 75% 60% at 50% 20%, rgba(79, 59, 255, 0.07) 0%, rgba(123, 107, 255, 0.02) 55%, transparent 100%),
    radial-gradient(circle 550px at 8% 22%, rgba(79, 59, 255, 0.04) 0%, transparent 65%),
    radial-gradient(circle 500px at 92% 75%, rgba(123, 107, 255, 0.05) 0%, transparent 65%),
    linear-gradient(180deg, #FAF7F2 0%, #FAF7F2 55%, #FAF7F2 100%) !important;
  overflow: hidden !important;
}

/* Subtle Modern High-Tech Micro-Dot Grid Pattern - Refined Crisp Visibility */
.hero-section.hero-1::before,
.hero-1::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: radial-gradient(rgba(79, 59, 255, 0.18) 1.3px, transparent 1.3px) !important;
  background-size: 24px 24px !important;
  mask-image: radial-gradient(ellipse 82% 72% at 50% 45%, #000 25%, transparent 88%) !important;
  -webkit-mask-image: radial-gradient(ellipse 82% 72% at 50% 45%, #000 25%, transparent 88%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.88 !important;
}

/* Bottom hairline divider removed as approved */
.hero-section.hero-1::after,
.hero-1::after {
  display: none !important;
  content: none !important;
}

.hero-section.hero-1 .container,
.hero-1 .container {
  position: relative !important;
  z-index: 3 !important;
}

.hero-section.hero-1 .hero-content,
.hero-1 .hero-content {
  position: relative !important;
  z-index: 4 !important;
}

.hero-section.hero-1 .hero-images,
.hero-1 .hero-images {
  position: relative !important;
  z-index: 5 !important;
}

.hero-section.hero-1 .hero-images img,
.hero-1 .hero-images img {
  max-height: 640px;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  image-rendering: auto !important;
  transform: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  filter: none !important;
}

@media (max-width: 991px) {
  .hero-section.hero-1 .hero-images img,
  .hero-1 .hero-images img {
    max-height: 480px;
  }
}

@media (max-width: 767px) {
  .hero-section.hero-1 .hero-images img,
  .hero-1 .hero-images img {
    max-height: 360px;
  }
}

/* ==========================================================================
   10. Hero Section: Designation (type-text) Gradient Color
   ========================================================================== */
.hero-section.hero-1 .hero-content h1 .type-text,
.hero-section.hero-1 .hero-content h1 strong.type-text {
  background: linear-gradient(135deg, #4F3BFF 0%, #7B6BFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline-block !important;
}


/* ==========================================================================
   11. About Section: Main Image Corner Radius
   ========================================================================== */
.about-wrapper-1 .about-images img,
.about-images > img,
.elementor-widget-xiomi-about-img-widget .about-images img {
  border-radius: 30px !important;
  overflow: hidden !important;
}


/* ==========================================================================
   12. About Section: Gap Between Image and Content Column
   ========================================================================== */
@media (min-width: 1200px) {
  .elementor-element-4cbce85 {
    padding-left: 65px !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .elementor-element-4cbce85 {
    padding-left: 45px !important;
  }
}


/* ==========================================================================
   13. Button Icons & Arrows: White Color
   ========================================================================== */
.theme-btn i,
.theme-btn svg,
.theme-btn svg path,
.theme-btn .e-font-icon-svg,
.theme-btn .e-font-icon-svg path,
.btn-wrapper .theme-btn i,
.btn-wrapper .theme-btn svg,
.btn-wrapper .theme-btn svg path,
.btn-wrapper .theme-btn .e-font-icon-svg,
.btn-wrapper .theme-btn .e-font-icon-svg path,
.xiomi-btn i,
.xiomi-btn svg,
.xiomi-btn svg path,
.submit-btn i,
.submit-btn svg,
.submit-btn svg path,
.elementor-button i,
.elementor-button svg,
.elementor-button svg path {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

.theme-btn:hover i,
.theme-btn:hover svg,
.theme-btn:hover svg path,
.theme-btn:hover .e-font-icon-svg,
.theme-btn:hover .e-font-icon-svg path,
.btn-wrapper .theme-btn:hover i,
.btn-wrapper .theme-btn:hover svg,
.btn-wrapper .theme-btn:hover svg path,
.btn-wrapper .theme-btn:hover .e-font-icon-svg,
.btn-wrapper .theme-btn:hover .e-font-icon-svg path,
.xiomi-btn:hover i,
.xiomi-btn:hover svg,
.xiomi-btn:hover svg path,
.submit-btn:hover i,
.submit-btn:hover svg,
.submit-btn:hover svg path,
.elementor-button:hover i,
.elementor-button:hover svg,
.elementor-button:hover svg path {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  stroke: #FFFFFF !important;
}


/* ==========================================================================
   14. Dark Sections & Marquee Background: #0A0A0A (Deep Ink Purple)
   ========================================================================== */
.section-bg-2,
.marquee-section,
.marquee-section.section-bg-2,
.marquee-section .marquee-container {
  background-color: #0A0A0A !important;
}

/* Dark Sections across homepage and inner pages */
.elementor-element-d0b1518,
.elementor-element-4c43570,
.elementor-element-1cf46a3,
.elementor-element-4ad9b2d,
.elementor-element-be1b410,
.elementor-element-12ed91f,
.elementor-element-f40452f,
.elementor-element-959ec16,
.elementor-element-6e439c4 {
  background-color: #0A0A0A !important;
}

/* Ensure marquee text is bright on #0A0A0A */
.marquee-section .marquee-text h3 {
  color: #FFFFFF !important;
}

/* ============================================================
   08. Performance - non-essential animations removed
   ------------------------------------------------------------
   KEPT (essential): preloader spinner/letters, sticky header,
   menu & search overlay transitions, hover effects, swiper
   sliders, typed hero text, counters, back-to-top.
   REMOVED: WOW.js scroll-reveal entrances (stubbed in
   functions.php) and infinite decorative loops.
   ============================================================ */

/* Safety net: scroll-reveal content is always visible - wins
   over any inline visibility/animation WOW.js might set. */
.wow {
  visibility: visible !important;
  animation: none !important;
}

/* These have a hidden base state (opacity: 0) that is normally
   revealed by a one-shot animation with fill-mode: forwards.
   Since the animation is disabled, force the final visible state. */
.img-custom-anim-left,
.img-custom-anim-right,
.img-custom-anim-top,
.img-custom-anim-bottom {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  animation: none !important;
}

/* Infinite decorative loops -> static; content stays visible. */
.top_image_bounce,
.top_image_bounce_2,
.left_image_bounce,
.right_image_bounce,
.spin_image,
.spin_image_2,
.bounce-x,
.ripple::before,
.ripple::after,
.marquee-wrapper,
.about-wrapper-2 .about-images .video .circle-image img,
.about-wrapper-3 .about-images .circle-box img,
.about-images .video .circle-image img,
.about-images .circle-box img,
.video-play-btn-02::before {
  animation: none !important;
}


/* ==========================================================================
   15. Service / Feature Card Icons: Hover & Active Color #F4F0E8
   ========================================================================== */
.service-card-items-2:hover .icon,
.service-3 .service-item:hover .icon,
.feature-wrapper .feature-item:hover .icon,
.work-wrapper .work-items:hover .icon {
  background-color: #4F3BFF !important;
  border-color: #4F3BFF !important;
}

/* Image/SVG based icons inside cards on hover and active state */
.service-card-items-2:hover .icon img,
.service-3 .service-item:hover .icon img,
.feature-wrapper .feature-item:hover .icon img,
.work-wrapper .work-items:hover .icon img {
  filter: brightness(0) saturate(100%) invert(94%) sepia(9%) saturate(1478%) hue-rotate(218deg) brightness(105%) contrast(104%) !important;
  -webkit-filter: brightness(0) saturate(100%) invert(94%) sepia(9%) saturate(1478%) hue-rotate(218deg) brightness(105%) contrast(104%) !important;
}

/* Font/Vector SVG and icon font tags */
.service-card-items-2:hover .icon i,
.service-card-items-2:hover .icon svg,
.service-card-items-2:hover .icon svg path,
.service-3 .service-item:hover .icon i,
.service-3 .service-item:hover .icon svg,
.service-3 .service-item:hover .icon svg path,
.feature-wrapper .feature-item:hover .icon i,
.feature-wrapper .feature-item:hover .icon svg,
.feature-wrapper .feature-item:hover .icon svg path,
.work-wrapper .work-items:hover .icon i,
.work-wrapper .work-items:hover .icon svg,
.work-wrapper .work-items:hover .icon svg path,
.news-1 .news-item .content .news-btn:hover .icon i,
.news-standard-wrapper .news-standard-items .news-content .news-btn:hover .icon i {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  stroke: #FFFFFF !important;
}


/* ==========================================================================
   16. Footer Links: #F4F0E8 Color Override
   ========================================================================== */
.footer-area .elementor-widget-icon-list .elementor-icon-list-text,
.footer-area .elementor-widget-icon-list .elementor-icon-list-text *,
.footer-area .elementor-icon-list-item a,
.footer-area .elementor-icon-list-item a *,
.footer-bottom .elementor-icon-list-item a,
.footer-bottom .elementor-icon-list-item a *,
.footer-area a,
.footer-bottom a,
.elementor-element-561cb4b .elementor-icon-list-text,
.elementor-element-561cb4b .elementor-icon-list-text *,
.elementor-element-e7e1d52 .elementor-icon-list-text,
.elementor-element-e7e1d52 .elementor-icon-list-text *,
.elementor-element-8e26c60 .elementor-icon-list-text,
.elementor-element-8e26c60 .elementor-icon-list-text *,
.elementor-element-aff89e0 .elementor-icon-list-text,
.elementor-element-aff89e0 .elementor-icon-list-text * {
  color: #F4F0E8 !important;
  transition: color 0.3s ease !important;
}

/* Footer links hover state */
.footer-area .elementor-icon-list-item a:hover,
.footer-area .elementor-icon-list-item a:hover *,
.footer-area .elementor-icon-list-item:hover .elementor-icon-list-text,
.footer-bottom .elementor-icon-list-item a:hover,
.footer-bottom .elementor-icon-list-item a:hover *,
.footer-area a:hover,
.footer-bottom a:hover,
.elementor-element-561cb4b .elementor-icon-list-item a:hover .elementor-icon-list-text,
.elementor-element-e7e1d52 .elementor-icon-list-item a:hover .elementor-icon-list-text,
.elementor-element-8e26c60 .elementor-icon-list-item a:hover .elementor-icon-list-text {
  color: #7B6BFF !important;
}


/* ==========================================================================
   17. Dark Sections, Experience List & Footer: Border rgba(249, 249, 249, 0.24)
   ========================================================================== */
/* 1. Experience / Work timeline items (from user screenshot) - Middle Align Designations */
.experience-wrapper .experience-items,
.elementor-element-4c43570 .experience-items,
.elementor-element-4c43570 .experience-wrapper .experience-items {
  border-bottom: 1.5px solid rgba(249, 249, 249, 0.24) !important;
}

@media (min-width: 768px) {
  .experience-wrapper .experience-items,
  .elementor-element-4c43570 .experience-items,
  .elementor-element-4c43570 .experience-wrapper .experience-items {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 24px !important;
  }

  .experience-wrapper .experience-items span,
  .elementor-element-4c43570 .experience-items span {
    text-align: left !important;
    justify-self: start !important;
    white-space: nowrap !important;
  }

  .experience-wrapper .experience-items h4,
  .elementor-element-4c43570 .experience-items h4 {
    text-align: center !important;
    justify-self: center !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  .experience-wrapper .experience-items h6,
  .elementor-element-4c43570 .experience-items h6 {
    text-align: right !important;
    justify-self: end !important;
    margin: 0 0 0 auto !important;
  }
}

/* Tablet Optimization: 768px to 991px */
@media (min-width: 768px) and (max-width: 991px) {
  .experience-wrapper .experience-items,
  .elementor-element-4c43570 .experience-items,
  .elementor-element-4c43570 .experience-wrapper .experience-items {
    column-gap: 16px !important;
    padding: 16px 0 !important;
  }
  .experience-wrapper .experience-items span,
  .elementor-element-4c43570 .experience-items span {
    font-size: 14.5px !important;
  }
  .experience-wrapper .experience-items h4,
  .elementor-element-4c43570 .experience-items h4 {
    font-size: 17.5px !important;
  }
  .experience-wrapper .experience-items h6,
  .elementor-element-4c43570 .experience-items h6 {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
  .experience-wrapper-2 .skill-list {
    gap: 12px !important;
    margin-top: 28px !important;
  }
  .experience-wrapper-2 .skill-list li,
  .skill-list li {
    padding: 9px 18px !important;
    font-size: 14px !important;
    gap: 9px !important;
  }
  .experience-wrapper-2 .skill-list li img,
  .skill-list li img {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
  }
}


/* Software Skills Pills & Icons System (Actual Icon Size & Bulletproof Smooth Hover) */
.experience-wrapper-2 .skill-list {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-top: 36px !important;
  padding: 0 !important;
  list-style: none !important;
}

.experience-wrapper-2 .skill-list li,
.skill-list li {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #FFFFFF !important;
  padding: 10px 22px !important;
  border-radius: 50px !important;
  border: 1.25px solid rgba(249, 249, 249, 0.22) !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.2px !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  isolation: isolate !important;
  overflow: hidden !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* Eliminate any stray pseudo-elements or seam overlays */
.experience-wrapper-2 .skill-list li::before,
.experience-wrapper-2 .skill-list li::after,
.skill-list li::before,
.skill-list li::after {
  display: none !important;
  content: none !important;
}

.experience-wrapper-2 .skill-list li:hover,
.skill-list li:hover {
  border-color: #4F3BFF !important;
  background-color: rgba(79, 59, 255, 0.16) !important;
  background-image: none !important;
  transform: translateY(-2px) translateZ(0) !important;
  box-shadow: 0 8px 24px rgba(79, 59, 255, 0.25) !important;
}

.experience-wrapper-2 .skill-list li img,
.skill-list li img {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  object-fit: contain !important;
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
}

/* 2. Footer border lines, dividers & social icon borders (DARK footer only) */
.footer-area,
.footer-bottom,
.footer-widget-wrapper,
.footer-widget-wrapper .footer-social,
.footer-area-2 .copyright-wrap,
.footer-1::before,
.footer-2,
.footer-3,
.elementor-element-f606f2b,
.elementor-element-d6f537c,
.elementor-element-ac63bec,
.footer-widget-wrapper .single-footer-widget .footer-address .socials .social-icon li a i,
.footer-widget-wrapper .footer-social .socials-icon li a i,
.footer-bottom .footer-bottom-wrapper .social-icon li a i,
.elementor-element-ab93c4e a.elementor-icon {
  border-color: rgba(249, 249, 249, 0.24) !important;
}

.footer-1::before {
  background-color: rgba(249, 249, 249, 0.24) !important;
}

/* 3. Dark Sections (#0A0A0A) only - Testimonial card & Service cards in dark section */
.elementor-element-1cf46a3 .elementor-element-f872996,
.elementor-element-d0b1518 .service-card-items-2 {
  border-color: rgba(249, 249, 249, 0.24) !important;
}

/* 4. Light Sections (Milestones, About, Portfolio) - KEEP crisp original borders */
.elementor-element-552d98b .elementor-element-36b9f4b,
.elementor-element-552d98b .elementor-element-269421e,
.elementor-element-552d98b .elementor-element-a1c7692,
.elementor-element-552d98b .elementor-element-611b088,
.elementor-element-36b9f4b,
.elementor-element-269421e,
.elementor-element-a1c7692,
.elementor-element-611b088 {
  border-color: rgba(102, 102, 102, 0.24) !important;
}


/* ==========================================================================
   18. Arrow Icons & Circular Arrow Buttons: Brand Color #4F3BFF
   ========================================================================== */

/* Circular Arrow Buttons & Links (Projects, Sliders, Blog, News, Services) */
.project-wrapper .project-items .content .icon a,
.project-items .content .icon a,
.project-items-2 .content .icon a,
.project-items-3 .project-thumb .content .icon .link-btn,
.project-wrapper-3 .main-box .box .project-content .icon i,
.news-1 .news-item .content .news-btns i,
.news-1 .news-item .content .news-btn .icon i,
.news-standard-wrapper .news-standard-items .news-content .news-btn .icon i,
.blog-read-more-btn span i,
.blog-read-more-btn span svg,
.service-wrapper .services-item .link-btn i,
.slide-btn .array-prev,
.slide-btn .array-next,
.array-button .array-prev,
.array-button .array-next {
  color: #4F3BFF !important;
  fill: #4F3BFF !important;
  border-color: #4F3BFF !important;
}

.project-wrapper .project-items .content .icon a i,
.project-items .content .icon a i,
.project-items-2 .content .icon a i,
.project-items-3 .project-thumb .content .icon .link-btn i,
.blog-read-more-btn span i,
.blog-read-more-btn span svg {
  color: #4F3BFF !important;
  fill: #4F3BFF !important;
}

/* Slider Prev / Next Buttons (About, Contact, Testimonials) */
.elementor-widget-xiomi-heading-title-widget,
.elementor-widget-xiomi-heading-title-widget .elementor-widget-container,
.elementor-widget-xiomi-heading-title-widget .section-title {
  pointer-events: none !important;
}
.elementor-widget-xiomi-heading-title-widget .section-title span,
.elementor-widget-xiomi-heading-title-widget .section-title h1,
.elementor-widget-xiomi-heading-title-widget .section-title h2,
.elementor-widget-xiomi-heading-title-widget .section-title h3,
.elementor-widget-xiomi-heading-title-widget .section-title p,
.elementor-widget-xiomi-heading-title-widget .section-title a {
  pointer-events: auto !important;
}

.elementor-widget-xiomi-testimonial-slider {
  position: relative !important;
  z-index: 200 !important;
}
.testimonials-section .section-title-area {
  position: relative !important;
  z-index: 250 !important;
  pointer-events: auto !important;
}
.slide-btn {
  position: relative !important;
  z-index: 300 !important;
  pointer-events: auto !important;
}
.slide-btn .array-prev,
.slide-btn .array-next,
.slide-btn button.array-prev,
.slide-btn button.array-next {
  width: 48px !important;
  height: 48px !important;
  border-radius: 100px !important;
  border: 1.5px solid #4F3BFF !important;
  background: #FFFFFF !important;
  color: #4F3BFF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease-in-out !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 350 !important;
}

.slide-btn .array-prev i,
.slide-btn .array-next i,
.slide-btn button.array-prev i,
.slide-btn button.array-next i,
.array-button .array-prev i,
.array-button .array-next i {
  color: #4F3BFF !important;
  transition: color 0.3s ease-in-out !important;
  pointer-events: none !important;
}

/* Hover States: Fill with Brand Purple and invert arrow to White for crisp contrast */
.project-wrapper .project-items .content .icon a:hover,
.project-items .content .icon a:hover,
.project-items-2 .content .icon a:hover,
.news-1 .news-item:hover .content .news-btns i,
.news-1 .news-item .content .news-btns:hover i,
.news-1 .news-item .content .news-btns i:hover,
.news-1 .news-item:hover .content .news-btn .icon i,
.news-1 .news-item .content .news-btn:hover .icon i,
.slide-btn .array-prev:hover,
.slide-btn .array-next:hover,
.slide-btn button.array-prev:hover,
.slide-btn button.array-next:hover,
.blog-read-more-btn:hover span {
  background: #4F3BFF !important;
  background-color: #4F3BFF !important;
  border-color: #4F3BFF !important;
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

.project-wrapper .project-items .content .icon a:hover i,
.project-items .content .icon a:hover i,
.project-items-2 .content .icon a:hover i,
.slide-btn .array-prev:hover i,
.slide-btn .array-next:hover i,
.slide-btn button.array-prev:hover i,
.slide-btn button.array-next:hover i,
.blog-read-more-btn:hover span i,
.blog-read-more-btn:hover span svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* Video button arrow (About video play icon) */
.about-wrapper-2 .about-images .video .video-btn i,
.about-images .video .video-btn i {
  color: #FFFFFF !important;
}


/* ==========================================================================
   19. Social Icons: Base Layout, Sizing & Bulletproof Alignment Fix
   ========================================================================== */
.elementor-widget-social-icons .elementor-social-icons-wrapper,
.elementor-element-ab93c4e .elementor-social-icons-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.elementor-widget-social-icons .elementor-grid-item,
.elementor-element-ab93c4e .elementor-grid-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.elementor-widget-social-icons .elementor-icon.elementor-social-icon,
.elementor-element-ab93c4e a.elementor-icon.elementor-social-icon,
.elementor-element-ab93c4e .elementor-social-icon,
a.elementor-icon.elementor-social-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: all 0.3s cubic-bezier(0.34, 1.26, 0.64, 1) !important;
}

.elementor-widget-social-icons .elementor-icon.elementor-social-icon i,
.elementor-widget-social-icons .elementor-icon.elementor-social-icon svg,
.elementor-element-ab93c4e .elementor-social-icon svg,
.elementor-element-ab93c4e .elementor-social-icon i,
a.elementor-icon.elementor-social-icon svg {
  width: 17px !important;
  height: 17px !important;
  max-width: 17px !important;
  max-height: 17px !important;
  font-size: 17px !important;
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
  display: block !important;
  margin: auto !important;
  transition: all 0.25s ease !important;
}

/* ==========================================================================
   19. Social Icons: Hover State Button Gradient & White Icon
   ========================================================================== */

/* Base transition for smooth hover animation */
.elementor-widget-social-icons .elementor-social-icon,
.elementor-social-icons-wrapper .elementor-social-icon,
.elementor-social-icon,
a.elementor-icon.elementor-social-icon,
.footer-widget-wrapper .single-footer-widget .footer-address .socials .social-icon li a,
.footer-widget-wrapper .footer-social .socials-icon li a,
.footer-bottom .footer-bottom-wrapper .social-icon li a,
.footer-area .widget_about .details .social-media li a,
.sidebar-menu .sidebar-inner .social-media li a,
.contact-1 .social .social-list li a,
.social-media-list li a,
.team-details-page .social-media li a,
.blog-details-footer .social-icon li a,
.widget_contact .social-media li a,
.social-media a,
.social-icons a,
.social-icon a {
  transition: all 0.3s cubic-bezier(0.34, 1.26, 0.64, 1) !important;
}

.elementor-widget-social-icons .elementor-social-icon i,
.elementor-widget-social-icons .elementor-social-icon svg,
.elementor-widget-social-icons .elementor-social-icon svg path,
.footer-widget-wrapper .socials .social-icon li a i,
.footer-widget-wrapper .footer-social .socials-icon li a i,
.footer-bottom .social-icon li a i,
.contact-1 .social .social-list li a i,
.social-media a i,
.social-icons a i,
.social-icon a i {
  transition: all 0.25s ease !important;
}

/* Hover Background: Button-like Primary Gradient */
.elementor-widget-social-icons .elementor-social-icon:hover,
.elementor-social-icons-wrapper .elementor-social-icon:hover,
.elementor-social-icon:hover,
a.elementor-icon.elementor-social-icon:hover,
.elementor-element .elementor-social-icon:hover,
.elementor-widget-social-icons a.elementor-social-icon:hover,
.footer-widget-wrapper .single-footer-widget .footer-address .socials .social-icon li a:hover,
.footer-widget-wrapper .footer-social .socials-icon li a:hover,
.footer-bottom .footer-bottom-wrapper .social-icon li a:hover,
.footer-area .widget_about .details .social-media li a:hover,
.sidebar-menu .sidebar-inner .social-media li a:hover,
.contact-1 .social .social-list li a:hover,
.social-media-list li a:hover,
.team-details-page .social-media li a:hover,
.blog-details-footer .social-icon li a:hover,
.widget_contact .social-media li a:hover,
.social-media a:hover,
.social-icons a:hover,
.social-icon a:hover {
  background: linear-gradient(135deg, #4F3BFF 0%, #7B6BFF 100%) !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: 0 8px 20px rgba(79, 59, 255, 0.35) !important;
  transform: translateY(-2px) !important;
}

/* Hover Icon Color: Crisp Pure White */
.elementor-widget-social-icons .elementor-social-icon:hover i,
.elementor-widget-social-icons .elementor-social-icon:hover svg,
.elementor-widget-social-icons .elementor-social-icon:hover svg path,
.elementor-social-icons-wrapper .elementor-social-icon:hover i,
.elementor-social-icons-wrapper .elementor-social-icon:hover svg,
.elementor-social-icons-wrapper .elementor-social-icon:hover svg path,
.elementor-social-icon:hover i,
.elementor-social-icon:hover svg,
.elementor-social-icon:hover svg path,
a.elementor-icon.elementor-social-icon:hover i,
a.elementor-icon.elementor-social-icon:hover svg,
a.elementor-icon.elementor-social-icon:hover svg path,
.elementor-element .elementor-social-icon:hover i,
.elementor-element .elementor-social-icon:hover svg,
.elementor-element .elementor-social-icon:hover svg path,
.footer-widget-wrapper .single-footer-widget .footer-address .socials .social-icon li a:hover i,
.footer-widget-wrapper .footer-social .socials-icon li a:hover i,
.footer-bottom .footer-bottom-wrapper .social-icon li a:hover i,
.footer-area .widget_about .details .social-media li a:hover i,
.sidebar-menu .sidebar-inner .social-media li a:hover i,
.contact-1 .social .social-list li a:hover i,
.social-media-list li a:hover i,
.team-details-page .social-media li a:hover i,
.blog-details-footer .social-icon li a:hover i,
.widget_contact .social-media li a:hover i,
.widget_contact .social-media li a:hover svg,
.widget_contact .social-media li a:hover svg path,
.social-media a:hover i,
.social-icons a:hover i,
.social-icon a:hover i,
.social-media a:hover svg,
.social-icons a:hover svg,
.social-icon a:hover svg,
.social-media a:hover svg path,
.social-icons a:hover svg path,
.social-icon a:hover svg path {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  stroke: #FFFFFF !important;
}


/* ==========================================================================
   16. Service Cards Container: Minimalist Premium Design & Balanced Layout
   ========================================================================== */
@media (min-width: 992px) {
  /* Parent row: CSS Grid with 3 equal columns and exactly 24px uniform gap */
  body .elementor-element.elementor-element-2150cf6,
  body .elementor-element.elementor-element-e031327 > .e-con-inner {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    row-gap: 24px !important;
    column-gap: 24px !important;
    --gap: 24px 24px !important;
    --row-gap: 24px !important;
    --column-gap: 24px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* All 3 columns: fill grid cells perfectly with no width/flex conflicts */
  body .elementor-element.elementor-element-8946e81,
  body .elementor-element.elementor-element-543c57c,
  body .elementor-element.elementor-element-30e92c6,
  body .elementor-element.elementor-element-ad3ec28,
  body .elementor-element.elementor-element-fe1da56,
  body .elementor-element.elementor-element-5a81852 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    --width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Left and Right columns: CSS Grid with 2 equal-height rows and exact 24px gap */
  body .elementor-element.elementor-element-8946e81,
  body .elementor-element.elementor-element-30e92c6,
  body .elementor-element.elementor-element-ad3ec28,
  body .elementor-element.elementor-element-5a81852 {
    display: grid !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    row-gap: 24px !important;
    column-gap: 24px !important;
    --gap: 24px 24px !important;
    --row-gap: 24px !important;
    --column-gap: 24px !important;
  }

  /* Side column widgets: fit each grid row cleanly */
  body .elementor-element.elementor-element-8946e81 > .elementor-widget,
  body .elementor-element.elementor-element-30e92c6 > .elementor-widget,
  body .elementor-element.elementor-element-ad3ec28 > .elementor-widget,
  body .elementor-element.elementor-element-5a81852 > .elementor-widget {
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body .elementor-element.elementor-element-8946e81 .elementor-widget-container,
  body .elementor-element.elementor-element-30e92c6 .elementor-widget-container,
  body .elementor-element.elementor-element-ad3ec28 .elementor-widget-container,
  body .elementor-element.elementor-element-5a81852 .elementor-widget-container {
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Side Cards: Minimalist padding & balanced layout */
  body .elementor-element.elementor-element-8946e81 .service-card-items-2,
  body .elementor-element.elementor-element-30e92c6 .service-card-items-2,
  body .elementor-element.elementor-element-ad3ec28 .service-card-items-2,
  body .elementor-element.elementor-element-5a81852 .service-card-items-2 {
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 28px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  /* Middle column (Packaging & Label Design): 1 card fitting 100% full height */
  body .elementor-element.elementor-element-543c57c,
  body .elementor-element.elementor-element-fe1da56 {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  body .elementor-element.elementor-element-543c57c > .elementor-widget,
  body .elementor-element.elementor-element-fe1da56 > .elementor-widget,
  body .elementor-element.elementor-element-543c57c .elementor-widget-container,
  body .elementor-element.elementor-element-fe1da56 .elementor-widget-container {
    height: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 100% !important;
  }

  body .elementor-element.elementor-element-543c57c .service-card-items-2,
  body .elementor-element.elementor-element-fe1da56 .service-card-items-2 {
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 34px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 1 1 100% !important;
  }
}

/* ==========================================================================
   Minimalist Premium Card Styling & Elevating Hover States
   ========================================================================== */
body .elementor-element.elementor-element-2150cf6 .service-card-items-2,
body .elementor-element.elementor-element-e031327 .service-card-items-2 {
  background: #FFFFFF !important;
  border: 1px solid rgba(10, 10, 10, 0.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Middle Card subtle premium highlight */
body .elementor-element.elementor-element-543c57c .service-card-items-2,
body .elementor-element.elementor-element-fe1da56 .service-card-items-2 {
  border: 1px solid rgba(79, 59, 255, 0.18) !important;
  box-shadow: 0 6px 24px rgba(79, 59, 255, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

/* Minimalist Hover: Harmonized with Section 28 Creative Background & Smooth Lift */
body .elementor-element.elementor-element-2150cf6 .service-card-items-2:hover,
body .elementor-element.elementor-element-e031327 .service-card-items-2:hover {
  border-color: rgba(79, 59, 255, 0.45) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-4px) !important;
}

/* Minimalist Squircle Icon Box */
body .elementor-element.elementor-element-2150cf6 .service-card-items-2 .icon,
body .elementor-element.elementor-element-e031327 .service-card-items-2 .icon {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  border-radius: 16px !important;
  background: #FAF7F2 !important;
  border: 1px solid rgba(79, 59, 255, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 16px !important;
  transition: all 0.35s ease !important;
  box-shadow: 0 4px 10px rgba(79, 59, 255, 0.05) !important;
}

body .elementor-element.elementor-element-2150cf6 .service-card-items-2 .icon img,
body .elementor-element.elementor-element-e031327 .service-card-items-2 .icon img {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  object-fit: contain !important;
  transition: all 0.35s ease !important;
}

/* Icon Hover State */
body .elementor-element.elementor-element-2150cf6 .service-card-items-2:hover .icon,
body .elementor-element.elementor-element-e031327 .service-card-items-2:hover .icon {
  background: linear-gradient(135deg, #4F3BFF 0%, #6B57FF 100%) !important;
  border-color: #4F3BFF !important;
  box-shadow: 0 8px 18px rgba(79, 59, 255, 0.28) !important;
  transform: scale(1.05) !important;
}

body .elementor-element.elementor-element-2150cf6 .service-card-items-2:hover .icon img,
body .elementor-element.elementor-element-e031327 .service-card-items-2:hover .icon img {
  filter: brightness(0) invert(1) !important;
  transform: scale(1.06) !important;
}

/* Content Layout */
body .elementor-element.elementor-element-2150cf6 .service-card-items-2 .content,
body .elementor-element.elementor-element-e031327 .service-card-items-2 .content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
}

/* Side Card Typography (Original Font Sizes Restored) */
body .elementor-element.elementor-element-8946e81 .service-card-items-2 .content,
body .elementor-element.elementor-element-30e92c6 .service-card-items-2 .content,
body .elementor-element.elementor-element-ad3ec28 .service-card-items-2 .content,
body .elementor-element.elementor-element-5a81852 .service-card-items-2 .content {
  justify-content: space-between !important;
}

body .elementor-element.elementor-element-8946e81 .service-card-items-2 .content h4,
body .elementor-element.elementor-element-30e92c6 .service-card-items-2 .content h4,
body .elementor-element.elementor-element-ad3ec28 .service-card-items-2 .content h4,
body .elementor-element.elementor-element-5a81852 .service-card-items-2 .content h4 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #0A0A0A !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  letter-spacing: -0.3px !important;
}

body .elementor-element.elementor-element-2150cf6 .service-card-items-2 .content h4 a,
body .elementor-element.elementor-element-e031327 .service-card-items-2 .content h4 a {
  color: #0A0A0A !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

body .elementor-element.elementor-element-2150cf6 .service-card-items-2:hover .content h4 a,
body .elementor-element.elementor-element-e031327 .service-card-items-2:hover .content h4 a {
  color: #4F3BFF !important;
}

body .elementor-element.elementor-element-8946e81 .service-card-items-2 .content p,
body .elementor-element.elementor-element-30e92c6 .service-card-items-2 .content p,
body .elementor-element.elementor-element-ad3ec28 .service-card-items-2 .content p,
body .elementor-element.elementor-element-5a81852 .service-card-items-2 .content p {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: #6B7280 !important;
  flex-grow: 1 !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}

/* Action Links: Minimalist arrow link */
body .elementor-element.elementor-element-2150cf6 .service-card-items-2 .theme-btn-text,
body .elementor-element.elementor-element-e031327 .service-card-items-2 .theme-btn-text {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #4F3BFF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: auto !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

body .elementor-element.elementor-element-2150cf6 .service-card-items-2 .theme-btn-text i,
body .elementor-element.elementor-element-e031327 .service-card-items-2 .theme-btn-text i {
  font-size: 13px !important;
  transition: transform 0.3s ease !important;
}

body .elementor-element.elementor-element-2150cf6 .service-card-items-2:hover .theme-btn-text,
body .elementor-element.elementor-element-e031327 .service-card-items-2:hover .theme-btn-text {
  color: #4F3BFF !important;
}

body .elementor-element.elementor-element-2150cf6 .service-card-items-2:hover .theme-btn-text i,
body .elementor-element.elementor-element-e031327 .service-card-items-2:hover .theme-btn-text i {
  transform: translateX(4px) !important;
}

/* Middle Card (Packaging & Label Design) Typography */
body .elementor-element.elementor-element-543c57c .service-card-items-2 .content,
body .elementor-element.elementor-element-fe1da56 .service-card-items-2 .content {
  justify-content: center !important;
  align-items: center !important;
  flex: 0 1 auto !important;
}

body .elementor-element.elementor-element-543c57c .service-card-items-2 .content h4,
body .elementor-element.elementor-element-fe1da56 .service-card-items-2 .content h4 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  color: #0A0A0A !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.4px !important;
}

body .elementor-element.elementor-element-543c57c .service-card-items-2 .content p,
body .elementor-element.elementor-element-fe1da56 .service-card-items-2 .content p {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #6B7280 !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  max-width: 330px !important;
}

/* Tablet & Mobile: Stack cleanly */
@media (max-width: 991px) {
  body .elementor-element.elementor-element-2150cf6,
  body .elementor-element.elementor-element-e031327 > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  body .elementor-element.elementor-element-8946e81,
  body .elementor-element.elementor-element-543c57c,
  body .elementor-element.elementor-element-30e92c6,
  body .elementor-element.elementor-element-ad3ec28,
  body .elementor-element.elementor-element-fe1da56,
  body .elementor-element.elementor-element-5a81852 {
    width: 100% !important;
    max-width: 100% !important;
    gap: 24px !important;
  }

  body .elementor-element.elementor-element-2150cf6 .service-card-items-2,
  body .elementor-element.elementor-element-e031327 .service-card-items-2 {
    height: auto !important;
    padding: 30px 24px !important;
  }
}

/* ==========================================================================
   17. Why Choose Me Cards: Compact Padding, 1-Line Headings & Sized Icons
   ========================================================================== */
.elementor-element-36b9f4b,
.elementor-element-269421e,
.elementor-element-a1c7692,
.elementor-element-611b088 {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 22px 24px !important;
  transition: all 0.3s ease !important;
}

/* Headings Strictly 1-Line on Desktop and Tablet */
@media (min-width: 768px) {
  .elementor-element-36b9f4b .elementor-icon-box-title,
  .elementor-element-269421e .elementor-icon-box-title,
  .elementor-element-a1c7692 .elementor-icon-box-title,
  .elementor-element-611b088 .elementor-icon-box-title,
  .elementor-element-36b9f4b .elementor-icon-box-title span,
  .elementor-element-269421e .elementor-icon-box-title span,
  .elementor-element-a1c7692 .elementor-icon-box-title span,
  .elementor-element-611b088 .elementor-icon-box-title span {
    white-space: nowrap !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.3px !important;
    margin-bottom: 4px !important;
    display: block !important;
  }
}

/* Ensure text box reserves clearance on right for watermark badge */
.elementor-element-36b9f4b .elementor-widget-icon-box,
.elementor-element-269421e .elementor-widget-icon-box,
.elementor-element-a1c7692 .elementor-widget-icon-box,
.elementor-element-611b088 .elementor-widget-icon-box,
.elementor-element-36b9f4b .elementor-widget-icon-box .elementor-icon-box-wrapper,
.elementor-element-269421e .elementor-widget-icon-box .elementor-icon-box-wrapper,
.elementor-element-a1c7692 .elementor-widget-icon-box .elementor-icon-box-wrapper,
.elementor-element-611b088 .elementor-widget-icon-box .elementor-icon-box-wrapper {
  padding-right: 64px !important;
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
}

/* Primary Left Feature Icons in Why Choose Me Cards (Slightly Larger: 64px) */
.elementor-element-36b9f4b > .elementor-element-bd141b7,
.elementor-element-269421e > .elementor-element-225b2aa,
.elementor-element-a1c7692 > .elementor-element-6011920,
.elementor-element-611b088 > .elementor-element-cd4c050 {
  flex-shrink: 0 !important;
  margin-right: 18px !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.elementor-element-36b9f4b > .elementor-element-bd141b7 img,
.elementor-element-269421e > .elementor-element-225b2aa img,
.elementor-element-a1c7692 > .elementor-element-6011920 img,
.elementor-element-611b088 > .elementor-element-cd4c050 img {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  object-fit: contain !important;
  display: block !important;
  transition: transform 0.3s ease !important;
}

.elementor-element-36b9f4b:hover > .elementor-element-bd141b7 img,
.elementor-element-269421e:hover > .elementor-element-225b2aa img,
.elementor-element-a1c7692:hover > .elementor-element-6011920 img,
.elementor-element-611b088:hover > .elementor-element-cd4c050 img {
  transform: scale(1.06) !important;
}

/* Badge icons: vertically centered and strictly positioned on the right */
.elementor-element-36b9f4b .elementor-element-eecdb8d,
.elementor-element-269421e .elementor-element-f2f6bc7,
.elementor-element-a1c7692 .elementor-element-04c95a8,
.elementor-element-611b088 .elementor-element-2baedef {
  position: absolute !important;
  right: 22px !important;
  left: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.elementor-element-36b9f4b .elementor-element-eecdb8d img,
.elementor-element-269421e .elementor-element-f2f6bc7 img,
.elementor-element-a1c7692 .elementor-element-04c95a8 img,
.elementor-element-611b088 .elementor-element-2baedef img {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  object-fit: contain !important;
  display: block !important;
}

@media (max-width: 767px) {
  .elementor-element-36b9f4b,
  .elementor-element-269421e,
  .elementor-element-a1c7692,
  .elementor-element-611b088 {
    padding: 20px 18px !important;
  }

  /* Left icons on mobile */
  .elementor-element-36b9f4b > .elementor-element-bd141b7,
  .elementor-element-269421e > .elementor-element-225b2aa,
  .elementor-element-a1c7692 > .elementor-element-6011920,
  .elementor-element-611b088 > .elementor-element-cd4c050 {
    margin-right: 14px !important;
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
  }
  .elementor-element-36b9f4b > .elementor-element-bd141b7 img,
  .elementor-element-269421e > .elementor-element-225b2aa img,
  .elementor-element-a1c7692 > .elementor-element-6011920 img,
  .elementor-element-611b088 > .elementor-element-cd4c050 img {
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
  }

  .elementor-element-36b9f4b .elementor-widget-icon-box,
  .elementor-element-269421e .elementor-widget-icon-box,
  .elementor-element-a1c7692 .elementor-widget-icon-box,
  .elementor-element-611b088 .elementor-widget-icon-box,
  .elementor-element-36b9f4b .elementor-widget-icon-box .elementor-icon-box-wrapper,
  .elementor-element-269421e .elementor-widget-icon-box .elementor-icon-box-wrapper,
  .elementor-element-a1c7692 .elementor-widget-icon-box .elementor-icon-box-wrapper,
  .elementor-element-611b088 .elementor-widget-icon-box .elementor-icon-box-wrapper {
    padding-right: 50px !important;
  }

  .elementor-element-36b9f4b .elementor-icon-box-title,
  .elementor-element-269421e .elementor-icon-box-title,
  .elementor-element-a1c7692 .elementor-icon-box-title,
  .elementor-element-611b088 .elementor-icon-box-title,
  .elementor-element-36b9f4b .elementor-icon-box-title span,
  .elementor-element-269421e .elementor-icon-box-title span,
  .elementor-element-a1c7692 .elementor-icon-box-title span,
  .elementor-element-611b088 .elementor-icon-box-title span {
    white-space: normal !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  .elementor-element-36b9f4b .elementor-element-eecdb8d,
  .elementor-element-269421e .elementor-element-f2f6bc7,
  .elementor-element-a1c7692 .elementor-element-04c95a8,
  .elementor-element-611b088 .elementor-element-2baedef {
    right: 14px !important;
    width: 40px !important;
    height: 40px !important;
  }

  .elementor-element-36b9f4b .elementor-element-eecdb8d img,
  .elementor-element-269421e .elementor-element-f2f6bc7 img,
  .elementor-element-a1c7692 .elementor-element-04c95a8 img,
  .elementor-element-611b088 .elementor-element-2baedef img {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
  }
}

/* ==========================================================================
   18. Rating Box: White Text for Happy Clients Worldwide
   ========================================================================== */
.elementor-element-bc605c9 .elementor-heading-title,
.elementor-element-f9fe38f .elementor-heading-title {
  color: #FFFFFF !important;
}

/* ==========================================================================
   19. Home Page Light Contact Section (Let's Talk For Your Next Projects)
   ========================================================================== */
.elementor-element-e6b12a8,
.home-contact-section {
  background-color: #F5F5F5 !important;
  width: 100% !important;
}

/* Anchor Contact Section & Columns to Top to Prevent Form Jumping Upwards */
.elementor-element-e6b12a8,
.elementor-element-e6b12a8 > .e-con-inner,
.home-contact-section,
.home-contact-section > .e-con-inner {
  align-items: flex-start !important;
  --align-items: flex-start !important;
}

.elementor-element-d94e2b7,
.elementor-element-b21c4e9,
.home-contact-left-col,
.elementor-element-e6b12a8 .contact-1,
.home-contact-section .contact-1 {
  align-self: flex-start !important;
}

/* Left Column Details & Checklist */
.elementor-element-b21c4e9,
.home-contact-left-col {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.home-contact-left-wrap {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  text-align: left !important;
}

.home-contact-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background-color: #F4F0E8 !important;
  color: #4F3BFF !important;
  border: 1px solid rgba(79, 59, 255, 0.25) !important;
  border-radius: 50px !important;
  padding: 6px 18px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-bottom: 22px !important;
  width: fit-content !important;
}

.home-contact-pill i {
  color: #4F3BFF !important;
  font-size: 13px !important;
}

.home-contact-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 46px !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  color: #0A0A0A !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  letter-spacing: -0.5px !important;
}

.home-contact-title span {
  color: #4F3BFF !important;
}

.home-contact-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: #555555 !important;
  margin-top: 0 !important;
  margin-bottom: 35px !important;
  max-width: 530px !important;
}

.home-contact-checklist {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

.home-contact-check-item {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.home-contact-check-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #4F3BFF 0%, #7B6BFF 100%) !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  box-shadow: 0 4px 12px rgba(79, 59, 255, 0.28) !important;
}

.home-contact-check-icon i {
  color: #FFFFFF !important;
  font-weight: 900 !important;
  font-size: 13px !important;
}

.home-contact-check-label {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #0A0A0A !important;
  line-height: 1.3 !important;
}

/* Right Column Contact Form Card (Light Mode on #F5F5F5) */
.elementor-element-e6b12a8 .contact-1 .contact-form,
.home-contact-section .contact-1 .contact-form {
  background: #FFFFFF !important;
  border: 1px solid rgba(79, 59, 255, 0.15) !important;
  border-radius: 24px !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04) !important;
  padding: 45px 40px !important;
}

.elementor-element-e6b12a8 .contact-1 .contact-form h3,
.home-contact-section .contact-1 .contact-form h3 {
  color: #0A0A0A !important;
  border-bottom: 1px solid #EAEAEA !important;
  padding-bottom: 18px !important;
  margin-bottom: 30px !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
}

.elementor-element-e6b12a8 .wpcf7-form-control-wrap,
.home-contact-section .wpcf7-form-control-wrap {
  display: block !important;
  width: 100% !important;
  margin-bottom: 20px !important;
}

.elementor-element-e6b12a8 .contact-1 .contact-form .contact-box input:not([type="submit"]):not([type="button"]):not(.theme-btn),
.elementor-element-e6b12a8 .contact-1 .contact-form .contact-box textarea,
.home-contact-section .contact-1 .contact-form .contact-box input:not([type="submit"]):not([type="button"]):not(.theme-btn),
.home-contact-section .contact-1 .contact-form .contact-box textarea {
  background: #F9FAFB !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  color: #0A0A0A !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  padding: 16px 20px !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.3s ease !important;
}

.elementor-element-e6b12a8 .contact-1 .contact-form .contact-box textarea,
.home-contact-section .contact-1 .contact-form .contact-box textarea {
  min-height: 130px !important;
  resize: vertical !important;
}

.elementor-element-e6b12a8 .contact-1 .contact-form .contact-box input:not([type="submit"]):not([type="button"]):not(.theme-btn):focus,
.elementor-element-e6b12a8 .contact-1 .contact-form .contact-box textarea:focus,
.home-contact-section .contact-1 .contact-form .contact-box input:not([type="submit"]):not([type="button"]):not(.theme-btn):focus,
.home-contact-section .contact-1 .contact-form .contact-box textarea:focus {
  background: #FFFFFF !important;
  border-color: #4F3BFF !important;
  box-shadow: 0 0 0 4px rgba(79, 59, 255, 0.12) !important;
  outline: none !important;
}

.elementor-element-e6b12a8 .contact-1 .contact-form .contact-box input:not([type="submit"]):not([type="button"]):not(.theme-btn)::placeholder,
.elementor-element-e6b12a8 .contact-1 .contact-form .contact-box textarea::placeholder,
.home-contact-section .contact-1 .contact-form .contact-box input:not([type="submit"]):not([type="button"]):not(.theme-btn)::placeholder,
.home-contact-section .contact-1 .contact-form .contact-box textarea::placeholder {
  color: #9CA3AF !important;
  font-size: 15px !important;
}

/* Contact Form 7 Validation Tips & Response Output Messages */
.wpcf7-not-valid-tip {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #DC2626 !important;
  margin-top: 6px !important;
  display: block !important;
  line-height: 1.4 !important;
}

.wpcf7-form .wpcf7-response-output,
.contact-form .wpcf7-response-output,
.contact-form-box .wpcf7-response-output {
  margin: 16px 0 0 0 !important;
  padding: 14px 20px !important;
  border-radius: 12px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  box-sizing: border-box !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
}

.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
  display: none !important;
}

/* Success Output */
.wpcf7-form.sent .wpcf7-response-output {
  background-color: #ECFDF5 !important;
  border: 1px solid #10B981 !important;
  color: #065F46 !important;
}

/* Warning / Validation Errors Output */
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output {
  background-color: #FFFBEB !important;
  border: 1px solid #F59E0B !important;
  color: #92400E !important;
}

/* Error / Failed Output */
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
  background-color: #FEF2F2 !important;
  border: 1px solid #EF4444 !important;
  color: #991B1B !important;
}

/* ==========================================================================
   Homepage & Global Contact Form Submit Button Fix
   ========================================================================== */
.elementor-element-e6b12a8 .contact-1 .contact-form .contact-box input.theme-btn,
.elementor-element-e6b12a8 .contact-1 .contact-form .contact-box input[type="submit"],
.elementor-element-e6b12a8 .contact-1 .contact-form .contact-box .wpcf7-submit,
.elementor-element-e6b12a8 .contact-1 .contact-form input.theme-btn,
.elementor-element-e6b12a8 .contact-1 .contact-form input[type="submit"],
.elementor-element-e6b12a8 .contact-1 .contact-form .wpcf7-submit,
.elementor-element-e6b12a8 .contact-1 .contact-form .theme-btn,
.home-contact-section .contact-1 .contact-form .contact-box input.theme-btn,
.home-contact-section .contact-1 .contact-form .contact-box input[type="submit"],
.home-contact-section .contact-1 .contact-form .contact-box .wpcf7-submit,
.home-contact-section .contact-1 .contact-form .theme-btn,
.contact-1 .contact-form .contact-box input.theme-btn,
.contact-1 .contact-form .contact-box input[type="submit"],
.contact-1 .contact-form .contact-box .wpcf7-submit,
.contact-1 .contact-form .theme-btn,
.contact-1 .contact-form input[type="submit"],
.contact-1 .contact-form .wpcf7-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  line-height: 56px !important;
  padding: 0 32px !important;
  border-radius: 12px !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  background: linear-gradient(135deg, #4F3BFF 0%, #7B6BFF 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(79, 59, 255, 0.28) !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.34, 1.26, 0.64, 1) !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  text-align: center !important;
  outline: none !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative !important;
  z-index: 2 !important;
}

.elementor-element-e6b12a8 .contact-1 .contact-form .contact-box input.theme-btn:hover,
.elementor-element-e6b12a8 .contact-1 .contact-form .contact-box input[type="submit"]:hover,
.elementor-element-e6b12a8 .contact-1 .contact-form .contact-box .wpcf7-submit:hover,
.elementor-element-e6b12a8 .contact-1 .contact-form input.theme-btn:hover,
.elementor-element-e6b12a8 .contact-1 .contact-form input[type="submit"]:hover,
.elementor-element-e6b12a8 .contact-1 .contact-form .wpcf7-submit:hover,
.elementor-element-e6b12a8 .contact-1 .contact-form .theme-btn:hover,
.home-contact-section .contact-1 .contact-form .contact-box input.theme-btn:hover,
.home-contact-section .contact-1 .contact-form .contact-box input[type="submit"]:hover,
.home-contact-section .contact-1 .contact-form .contact-box .wpcf7-submit:hover,
.home-contact-section .contact-1 .contact-form .theme-btn:hover,
.contact-1 .contact-form .contact-box input.theme-btn:hover,
.contact-1 .contact-form .contact-box input[type="submit"]:hover,
.contact-1 .contact-form .contact-box .wpcf7-submit:hover,
.contact-1 .contact-form .theme-btn:hover,
.contact-1 .contact-form input[type="submit"]:hover,
.contact-1 .contact-form .wpcf7-submit:hover {
  background: linear-gradient(135deg, #3F2CDA 0%, #6B57FF 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 24px rgba(79, 59, 255, 0.32) !important;
  transform: none !important;
  border: none !important;
}

.elementor-element-e6b12a8 .contact-1 .contact-form .contact-box input.theme-btn:focus,
.elementor-element-e6b12a8 .contact-1 .contact-form .contact-box input[type="submit"]:focus,
.elementor-element-e6b12a8 .contact-1 .contact-form .contact-box .wpcf7-submit:focus,
.contact-1 .contact-form .contact-box .wpcf7-submit:focus {
  background: linear-gradient(135deg, #3F2CDA 0%, #6B57FF 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 0 4px rgba(79, 59, 255, 0.24) !important;
  border: none !important;
  outline: none !important;
}

.elementor-element-e6b12a8 .contact-1 .contact-form .contact-box input.theme-btn:active,
.elementor-element-e6b12a8 .contact-1 .contact-form .contact-box input[type="submit"]:active,
.elementor-element-e6b12a8 .contact-1 .contact-form .contact-box .wpcf7-submit:active,
.contact-1 .contact-form .contact-box .wpcf7-submit:active {
  transform: translateY(0) !important;
  box-shadow: 0 6px 16px rgba(79, 59, 255, 0.25) !important;
}

.contact-1 .contact-form .theme-btn::before,
.contact-1 .contact-form .wpcf7-submit::before,
.contact-1 .contact-form input[type="submit"]::before,
.wpcf7-submit::before {
  display: none !important;
  content: none !important;
}

/* Tablet & Mobile Responsiveness */
@media (max-width: 991px) {
  .home-contact-title {
    font-size: 34px !important;
  }
  .home-contact-check-label {
    font-size: 17px !important;
  }
  .elementor-element-e6b12a8 .contact-1 .contact-form,
  .home-contact-section .contact-1 .contact-form {
    padding: 30px 20px !important;
    border-radius: 20px !important;
  }
}

/* Footer Logo Center Alignment */



/* ==========================================================================
   20. Contact Page Form (.contact-from-section / .contact-form-box) Match Homepage
   ========================================================================== */
/* Anchor Contact Page Form Section & Columns to Top to Prevent Form Jumping */
.elementor-element-abd1451,
.elementor-element-abd1451 > .e-con-inner {
  align-items: flex-start !important;
  --align-items: flex-start !important;
}

.elementor-element-a2e2dfc,
.elementor-element-c075842,
.contact-from-section,
.contact-form-box {
  align-self: flex-start !important;
}

.contact-from-section .contact-form-box,
.contact-form-box {
  background: #FFFFFF !important;
  border: 1px solid rgba(79, 59, 255, 0.16) !important;
  border-radius: 24px !important;
  box-shadow: 0 15px 40px rgba(10, 10, 10, 0.05) !important;
  padding: 48px 44px !important;
}

.contact-from-section .contact-form-box h3,
.contact-form-box h3 {
  color: #0A0A0A !important;
  border-bottom: 1px solid #EAEAEA !important;
  padding-bottom: 18px !important;
  margin-bottom: 14px !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
}

.contact-from-section .contact-form-box p.contact-form-subtext,
.contact-form-box > p {
  color: #555555 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15.5px !important;
  line-height: 1.65 !important;
  margin-bottom: 28px !important;
}

.contact-form-box .contact-box p {
  margin-bottom: 0 !important;
}

.contact-form-box .wpcf7-form-control-wrap {
  display: block !important;
  width: 100% !important;
  margin-bottom: 20px !important;
}

.contact-form-box .contact-box input:not([type="submit"]):not([type="button"]):not(.theme-btn),
.contact-form-box .contact-box select,
.contact-form-box .contact-box select.wpcf7-select,
.contact-form-box .contact-box textarea {
  background-color: #F9FAFB !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  color: #0A0A0A !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  width: 100% !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
  transition: all 0.3s ease !important;
  outline: none !important;
}

.contact-form-box .contact-box input:not([type="submit"]):not([type="button"]):not(.theme-btn),
.contact-form-box .contact-box select,
.contact-form-box .contact-box select.wpcf7-select {
  height: 56px !important;
  min-height: 56px !important;
  line-height: 54px !important;
  padding: 0 20px !important;
}

.contact-form-box .contact-box select,
.contact-form-box .contact-box select.wpcf7-select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B5B85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  background-size: 16px 16px !important;
  padding-right: 46px !important;
  cursor: pointer !important;
}

.contact-form-box .contact-box textarea {
  padding: 16px 20px !important;
  min-height: 140px !important;
  height: 140px !important;
  line-height: 1.6 !important;
  resize: vertical !important;
}

.contact-form-box .contact-box input:not([type="submit"]):not([type="button"]):not(.theme-btn):focus,
.contact-form-box .contact-box select:focus,
.contact-form-box .contact-box select.wpcf7-select:focus,
.contact-form-box .contact-box textarea:focus {
  background-color: #FFFFFF !important;
  border-color: #4F3BFF !important;
  box-shadow: 0 0 0 4px rgba(79, 59, 255, 0.12) !important;
  outline: none !important;
}

.contact-form-box .contact-box input:not([type="submit"]):not([type="button"]):not(.theme-btn)::placeholder,
.contact-form-box .contact-box textarea::placeholder {
  color: #9CA3AF !important;
  font-size: 15px !important;
}

/* Contact Page Submit Button — Identical to Homepage Submit Button */
.contact-from-section .contact-form-box .contact-box input.theme-btn,
.contact-from-section .contact-form-box .contact-box input[type="submit"],
.contact-from-section .contact-form-box .contact-box .wpcf7-submit,
.contact-form-box .contact-box input.theme-btn,
.contact-form-box .contact-box input[type="submit"],
.contact-form-box .contact-box .wpcf7-submit,
.contact-form-box input.theme-btn,
.contact-form-box input[type="submit"],
.contact-form-box .wpcf7-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  line-height: 56px !important;
  padding: 0 32px !important;
  border-radius: 12px !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  background: linear-gradient(135deg, #4F3BFF 0%, #7B6BFF 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(79, 59, 255, 0.28) !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.34, 1.26, 0.64, 1) !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  text-align: center !important;
  outline: none !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative !important;
  z-index: 2 !important;
}

.contact-from-section .contact-form-box .contact-box input.theme-btn:hover,
.contact-from-section .contact-form-box .contact-box input[type="submit"]:hover,
.contact-from-section .contact-form-box .contact-box .wpcf7-submit:hover,
.contact-form-box .contact-box input.theme-btn:hover,
.contact-form-box .contact-box input[type="submit"]:hover,
.contact-form-box .contact-box .wpcf7-submit:hover,
.contact-form-box input.theme-btn:hover,
.contact-form-box input[type="submit"]:hover,
.contact-form-box .wpcf7-submit:hover {
  background: linear-gradient(135deg, #3F2CDA 0%, #6B57FF 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 24px rgba(79, 59, 255, 0.32) !important;
  transform: none !important;
  border: none !important;
}

.contact-from-section .contact-form-box .contact-box input.theme-btn:focus,
.contact-from-section .contact-form-box .contact-box input[type="submit"]:focus,
.contact-from-section .contact-form-box .contact-box .wpcf7-submit:focus,
.contact-form-box .contact-box .wpcf7-submit:focus {
  background: linear-gradient(135deg, #3F2CDA 0%, #6B57FF 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 0 4px rgba(79, 59, 255, 0.24) !important;
  border: none !important;
  outline: none !important;
}

.contact-from-section .contact-form-box .contact-box input.theme-btn:active,
.contact-from-section .contact-form-box .contact-box input[type="submit"]:active,
.contact-from-section .contact-form-box .contact-box .wpcf7-submit:active,
.contact-form-box .contact-box .wpcf7-submit:active {
  transform: translateY(0) !important;
  box-shadow: 0 6px 16px rgba(79, 59, 255, 0.25) !important;
}

@media (max-width: 991px) {
  .contact-from-section .contact-form-box,
  .contact-form-box {
    padding: 32px 22px !important;
    border-radius: 20px !important;
  }
}

/* Fix Nice Select inside Contact Forms */
.contact-form-box .nice-select,
.contact-1 .nice-select,
.wpcf7-form .nice-select {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  line-height: 54px !important;
  background-color: #F9FAFB !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 0 46px 0 20px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #0A0A0A !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  float: none !important;
  clear: both !important;
  margin-bottom: 0 !important;
}
.contact-form-box .nice-select .current,
.contact-1 .nice-select .current,
.wpcf7-form .nice-select .current {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 54px !important;
  color: #0A0A0A !important;
}
.contact-form-box .nice-select:after,
.contact-1 .nice-select:after,
.wpcf7-form .nice-select:after {
  border-bottom: 2px solid #6B7280 !important;
  border-right: 2px solid #6B7280 !important;
  width: 9px !important;
  height: 9px !important;
  right: 20px !important;
  margin-top: -6px !important;
}
.contact-form-box .nice-select.open,
.contact-form-box .nice-select:focus,
.wpcf7-form .nice-select.open,
.wpcf7-form .nice-select:focus {
  background-color: #FFFFFF !important;
  border-color: #4F3BFF !important;
  box-shadow: 0 0 0 4px rgba(79, 59, 255, 0.12) !important;
}
.contact-form-box .nice-select .list,
.contact-1 .nice-select .list,
.wpcf7-form .nice-select .list {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 6px) !important;
  background-color: #FFFFFF !important;
  border: 1px solid rgba(79, 59, 255, 0.2) !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 34px rgba(10, 10, 10, 0.12) !important;
  padding: 6px 0 !important;
  z-index: 99999 !important;
  max-height: 320px !important;
  overflow-y: auto !important;
}
.contact-form-box .nice-select .option,
.contact-1 .nice-select .option,
.wpcf7-form .nice-select .option {
  background-color: #FFFFFF !important;
  color: #0A0A0A !important;
  border: none !important;
  border-bottom: 1px solid #F3F4F6 !important;
  padding: 4px 20px !important;
  line-height: 38px !important;
  min-height: 44px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14.5px !important;
}
.contact-form-box .nice-select .option:last-child,
.wpcf7-form .nice-select .option:last-child {
  border-bottom: none !important;
}
.contact-form-box .nice-select .option:hover,
.contact-form-box .nice-select .option.focus,
.contact-form-box .nice-select .option.selected.focus,
.wpcf7-form .nice-select .option:hover,
.wpcf7-form .nice-select .option.focus,
.wpcf7-form .nice-select .option.selected.focus {
  background-color: #F4F0E8 !important;
  color: #4F3BFF !important;
}

/* Contact Page Map Below Form Styling */
.elementor-22 .elementor-element.elementor-element-ca62a86 iframe {
  border-radius: 24px !important;
  box-shadow: 0 12px 32px rgba(10, 10, 10, 0.06) !important;
}


/* ==========================================================================
   21. FULL AUDIT: RESPONSIVE (320px–1920px), ACCESSIBILITY & H1 BANNER FIXES
   ========================================================================== */

/* Prevent horizontal scrolling across all breakpoints while keeping sticky elements intact */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

/* Ensure images, iframes, and videos never overflow their containers */
img, svg, video, canvas, iframe {
  max-width: 100%;
}

/* Breadcrumb H1 Page Title Consistency & Fluid Scaling */
.breadcrumb-wrap h1.page-title,
.breadcrumb-wrap .page-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(32px, 4.5vw, 55px) !important;
  line-height: 1.15 !important;
  margin-bottom: 15px !important;
  word-wrap: break-word;
}

/* Keyboard Accessibility Focus States (WCAG 2.2 AA) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #4F3BFF !important;
  outline-offset: 3px !important;
}

/* Responsive Refinements for Small Mobile & Standard Mobile (320px–430px) */
@media (max-width: 480px) {
  .contact-from-section .contact-form-box,
  .contact-form-box {
    padding: 28px 20px !important;
    border-radius: 18px !important;
  }
  .contact-from-section .contact-form-box h3,
  .contact-form-box h3 {
    font-size: 22px !important;
  }
  .section-title h1,
  .section-title h2,
  .section-main-title {
    font-size: clamp(26px, 7vw, 34px) !important;
    line-height: 1.22 !important;
  }
}

/* Tablet Layout Refinements (768px–1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .contact-from-section .contact-form-box,
  .contact-form-box {
    padding: 36px 30px !important;
  }
}

/* ==========================================================================
   22. COMPREHENSIVE MOBILE & TABLET RESPONSIVE SYSTEM (ALL PAGES)
   ========================================================================== */

/* Fix About Page Principle Cards Badge Positioning (Same as Home Why Choose Me) */
.elementor-element-74bc99f,
.elementor-element-0c56715,
.elementor-element-71740c3,
.elementor-element-12600f6 {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

.elementor-element-74bc99f .elementor-widget-icon-box,
.elementor-element-0c56715 .elementor-widget-icon-box,
.elementor-element-71740c3 .elementor-widget-icon-box,
.elementor-element-12600f6 .elementor-widget-icon-box,
.elementor-element-74bc99f .elementor-icon-box-wrapper,
.elementor-element-0c56715 .elementor-icon-box-wrapper,
.elementor-element-71740c3 .elementor-icon-box-wrapper,
.elementor-element-12600f6 .elementor-icon-box-wrapper {
  padding-right: 75px !important;
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
}

.elementor-element-74bc99f .elementor-element-41e829d,
.elementor-element-0c56715 .elementor-element-4ec1838,
.elementor-element-71740c3 .elementor-element-7a3b772,
.elementor-element-12600f6 .elementor-element-64b7cfb {
  position: absolute !important;
  right: 24px !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 46px !important;
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  z-index: 2 !important;
  margin: 0 !important;
}

.elementor-element-74bc99f .elementor-element-41e829d img,
.elementor-element-0c56715 .elementor-element-4ec1838 img,
.elementor-element-71740c3 .elementor-element-7a3b772 img,
.elementor-element-12600f6 .elementor-element-64b7cfb img {
  width: 46px !important;
  height: 46px !important;
  max-width: 46px !important;
  object-fit: contain !important;
}

/* Tablet & Mobile Responsive Rules (<= 991px) */
@media (max-width: 991px) {
  /* 1. Breadcrumb Banner Compact Spacing */
  .breadcrumb-wrapper .page-heading,
  .breadcrumb-wrap {
    padding: 125px 16px 55px !important;
  }

  /* 2. Hero Section Balance */
  .hero-section.hero-1,
  .hero-1 {
    padding-top: 135px !important;
    padding-bottom: 50px !important;
  }
  .hero-1 .hero-images {
    text-align: center !important;
    margin-bottom: 24px !important;
  }
  .hero-1 .hero-images img {
    max-width: 300px !important;
    max-height: 340px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  /* 3. Service Cards & Middle Packaging Card Image */
  body .elementor-element.elementor-element-2150cf6,
  body .elementor-element.elementor-element-e031327 > .e-con-inner,
  body .elementor-element.elementor-element-e031327 {
    gap: 18px !important;
    row-gap: 18px !important;
  }
  body .elementor-element.elementor-element-8946e81,
  body .elementor-element.elementor-element-543c57c,
  body .elementor-element.elementor-element-30e92c6,
  body .elementor-element.elementor-element-ad3ec28,
  body .elementor-element.elementor-element-fe1da56,
  body .elementor-element.elementor-element-5a81852 {
    gap: 18px !important;
    row-gap: 18px !important;
  }
  .service-card-items-2 {
    margin-top: 0 !important;
    padding: 26px 22px !important;
    border-radius: 18px !important;
  }
  .service-card-items-2 .service-thumb img,
  .service-card-items-2 > img,
  body .elementor-element-543c57c .service-card-items-2 img:not(.icon img),
  body .elementor-element-fe1da56 .service-card-items-2 img:not(.icon img) {
    max-height: 200px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 16px auto 0 !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* 4. About Section Image & Counter Grid */
  .about-wrapper-1 {
    margin-top: 0 !important;
  }
  .about-wrapper-1 .about-images {
    max-width: 420px !important;
    margin: 0 auto 24px !important;
  }
  .about-wrapper-1 .about-images img {
    max-height: 360px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 20px !important;
  }

  /* 5. Portfolio / Project Cards Image & Title Bar */
  .project-wrapper .project-items .image {
    height: 280px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  .project-wrapper .project-items .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 16px !important;
  }
  .project-wrapper .project-items .content {
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 16px 6px 0 !important;
  }
  .project-wrapper .project-items .content .icon a {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex-shrink: 0 !important;
  }

  /* 6. Testimonials Card & Rating Box */
  .testimonials-wrapper .testimonial-box-items {
    margin: 0 8px !important;
    padding: 28px 24px !important;
    border-radius: 18px !important;
  }
  .testimonials-wrapper .testimonial-box-items .testi-content p {
    font-size: 15.5px !important;
    line-height: 1.65 !important;
  }

  /* 7. Blog Grid Cards */
  .news-1 .news-item {
    margin-top: 20px !important;
    border-radius: 16px !important;
  }
  .news-1 .news-item .thumb img {
    height: 220px !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  .news-1 .news-item .content {
    padding: 20px 18px 24px !important;
  }
}

/* Mobile Phone Specific Refinements (<= 767px) */
@media (max-width: 767px) {
  /* 1. Breadcrumb & Section Headers */
  .breadcrumb-wrapper .page-heading,
  .breadcrumb-wrap {
    padding: 105px 16px 42px !important;
  }
  .breadcrumb-wrapper .page-heading h1,
  .breadcrumb-wrapper .page-heading h2,
  .breadcrumb-wrap h1.page-title,
  .breadcrumb-wrap .page-title {
    font-size: clamp(28px, 7.5vw, 38px) !important;
    line-height: 1.18 !important;
    margin-bottom: 10px !important;
  }
  .section-title {
    margin-bottom: 24px !important;
  }
  .section-title h1,
  .section-title h2,
  .section-main-title,
  .home-contact-title {
    font-size: clamp(26px, 7vw, 34px) !important;
    line-height: 1.22 !important;
  }

  /* 2. Hero Section Mobile Optimization */
  .hero-section.hero-1,
  .hero-1 {
    padding-top: 115px !important;
    padding-bottom: 40px !important;
    text-align: center !important;
  }
  .hero-1 .hero-images img {
    max-width: 240px !important;
    max-height: 280px !important;
  }
  .hero-1 .hero-content h1 {
    font-size: clamp(30px, 8vw, 40px) !important;
    line-height: 1.18 !important;
    margin-bottom: 14px !important;
  }
  .hero-1 .hero-content p {
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin-bottom: 22px !important;
  }
  .hero-1 .hero-btn-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  /* 3. Trusted Clients Carousel */
  .elementor-element-5463508 {
    padding: 28px 16px !important;
  }

  /* 4. About Section: Compact Image & 3-Column Counter Grid */
  .about-wrapper-1 .about-images {
    max-width: 320px !important;
    margin: 0 auto 20px !important;
  }
  .about-wrapper-1 .about-images img {
    max-height: 300px !important;
    border-radius: 18px !important;
  }
  /* Hide floating decorative badges on mobile that clutter the portrait image */
  .elementor-element-96808bf,
  .elementor-element-514e5b1,
  .elementor-element-51dc9f9,
  .elementor-element-61bafa4,
  .elementor-element-94a509e,
  .elementor-element-0ab7191 {
    display: none !important;
  }
  /* 3-Column Counter Row on Home (126772d) & About (3f70947) */
  .elementor-element-126772d,
  .elementor-element-126772d > .e-con-inner,
  .elementor-element-3f70947,
  .elementor-element-3f70947 > .e-con-inner {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 20px 0 10px !important;
  }
  .elementor-element-126772d .elementor-widget-counter,
  .elementor-element-3f70947 .elementor-widget-counter {
    max-width: 100% !important;
    width: 100% !important;
    background: rgba(79, 59, 255, 0.06) !important;
    border: 1px solid rgba(79, 59, 255, 0.14) !important;
    border-radius: 14px !important;
    padding: 14px 8px !important;
    text-align: center !important;
  }
  .elementor-widget-counter .elementor-counter-number-wrapper {
    font-size: 26px !important;
    line-height: 1.15 !important;
    justify-content: center !important;
    margin-bottom: 4px !important;
  }
  .elementor-widget-counter .elementor-counter-title {
    font-size: 12px !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  /* 5. Portfolio / Project Cards on Home & Project Page */
  .project-wrapper .project-items .image {
    height: 230px !important;
  }
  .project-wrapper .project-items .content {
    padding: 14px 4px 4px !important;
  }
  .project-wrapper .project-items .content h4 {
    font-size: 18.5px !important;
    line-height: 1.3 !important;
    margin-top: 4px !important;
  }
  .project-wrapper .project-items .content p {
    font-size: 13px !important;
    margin-bottom: 0 !important;
  }
  .project-wrapper .project-items .content .icon a {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  /* 6. Professional Journey & Skills Mobile Layout */
  .experience-wrapper .experience-items,
  .elementor-element-4c43570 .experience-items,
  .elementor-element-4c43570 .experience-wrapper .experience-items {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 14px 0 !important;
    gap: 5px !important;
    width: 100% !important;
  }
  .experience-wrapper .experience-items span,
  .elementor-element-4c43570 .experience-items span {
    text-align: left !important;
    font-size: 13.5px !important;
    line-height: 1.3 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin: 0 !important;
    justify-self: auto !important;
    white-space: normal !important;
  }
  .experience-wrapper .experience-items h4,
  .elementor-element-4c43570 .experience-items h4 {
    text-align: left !important;
    font-size: 17.5px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    justify-self: auto !important;
    width: auto !important;
  }
  .experience-wrapper .experience-items h6,
  .elementor-element-4c43570 .experience-items h6 {
    text-align: left !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    margin: 0 !important;
    justify-self: auto !important;
  }
  .experience-wrapper-2 .skill-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 24px !important;
    padding: 0 !important;
  }
  .experience-wrapper-2 .skill-list li,
  .skill-list li {
    margin: 0 !important;
    padding: 8px 15px !important;
    border-radius: 40px !important;
    font-size: 13.5px !important;
    gap: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    max-width: 100% !important;
  }
  .experience-wrapper-2 .skill-list li img,
  .skill-list li img {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    flex-shrink: 0 !important;
  }

  /* 7. Why Choose Me (Home) & Principles (About) Cards Spacing */
  .elementor-element-552d98b,
  .elementor-element-552d98b > .e-con-inner,
  .elementor-element-378e925,
  .elementor-element-75fe6e2,
  .elementor-element-21ea40a,
  .elementor-element-21ea40a > .e-con-inner,
  .elementor-element-727200e,
  .elementor-element-20abd8a {
    gap: 16px !important;
    row-gap: 16px !important;
  }
  .elementor-element-74bc99f .elementor-widget-icon-box,
  .elementor-element-0c56715 .elementor-widget-icon-box,
  .elementor-element-71740c3 .elementor-widget-icon-box,
  .elementor-element-12600f6 .elementor-widget-icon-box,
  .elementor-element-74bc99f .elementor-icon-box-wrapper,
  .elementor-element-0c56715 .elementor-icon-box-wrapper,
  .elementor-element-71740c3 .elementor-icon-box-wrapper,
  .elementor-element-12600f6 .elementor-icon-box-wrapper {
    padding-right: 56px !important;
  }
  .elementor-element-74bc99f .elementor-element-41e829d,
  .elementor-element-0c56715 .elementor-element-4ec1838,
  .elementor-element-71740c3 .elementor-element-7a3b772,
  .elementor-element-12600f6 .elementor-element-64b7cfb {
    right: 18px !important;
    width: 40px !important;
    height: 40px !important;
  }
  .elementor-element-74bc99f .elementor-element-41e829d img,
  .elementor-element-0c56715 .elementor-element-4ec1838 img,
  .elementor-element-71740c3 .elementor-element-7a3b772 img,
  .elementor-element-12600f6 .elementor-element-64b7cfb img {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
  }

  /* 8. Testimonials Rating Box (f872996) & Slider Cards */
  .elementor-element-f872996 {
    padding: 20px 18px !important;
    margin: 14px 0 22px !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
  }
  .testimonials-wrapper .testimonial-box-items {
    margin: 0 !important;
    padding: 24px 20px !important;
    border-radius: 16px !important;
  }
  .testimonials-wrapper .testimonial-box-items .client-info {
    margin-bottom: 18px !important;
  }
  .testimonials-wrapper .testimonial-box-items .testi-content p {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  /* 9. Service Detail & Project Detail Inner Images */
  .elementor-widget-image img {
    border-radius: 14px;
  }
  .elementor-element-70ca617 img,
  .elementor-element-0fe80bb img {
    max-height: 230px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 16px !important;
  }
  .elementor-element-c0b1c44,
  .elementor-element-993c3fa {
    gap: 14px !important;
  }
  .elementor-element-1fdf405 img,
  .elementor-element-9e565ce img,
  .elementor-element-5354b7d img,
  .elementor-element-306349f img {
    max-height: 190px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 14px !important;
  }

  /* 10. Contact Page Map & Info Spacing */
  .elementor-22 .elementor-element.elementor-element-ca62a86 iframe,
  .contact-g-map iframe,
  iframe {
    height: 290px !important;
    border-radius: 18px !important;
  }

  /* 11. Footer 2-Column Links Grid & Compact Layout */
  .elementor-835 .elementor-element.elementor-element-2d391da,
  .elementor-835 .elementor-element.elementor-element-2d391da > .e-con-inner {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    padding: 24px 20px 34px !important;
  }
  .elementor-835 .elementor-element.elementor-element-aff89e0,
  .elementor-835 .elementor-element.elementor-element-2356221 {
    width: 100% !important;
    margin: 0 !important;
  }
  .elementor-835 .elementor-element.elementor-element-ac63bec {
    gap: 14px !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   23. HERO AVAILABILITY STATUS: MINIMALIST PULSING GREEN DOT
   ========================================================================== */
.hero-1 .hero-content > span,
.hero-section.hero-1 .hero-content > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
  color: #121212 !important;
  margin-bottom: 14px !important;
  line-height: 1.4 !important;
}

/* Ensure no letter ever inherits green text or glow */
.hero-1 .hero-content > span::first-letter,
.hero-section.hero-1 .hero-content > span::first-letter {
  color: inherit !important;
  text-shadow: none !important;
}

/* Modern Minimalist Status Dot Container - Perfect Concentric Stacking */
.hero-status-dot {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  isolation: isolate !important;
}

/* Needle-Sharp Emerald Solid Core (Always in Front: z-index: 10) */
.hero-status-dot .dot-core {
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  border-radius: 50% !important;
  background-color: #10B981 !important;
  box-shadow: 0 0 4px rgba(16, 185, 129, 0.35) !important;
  position: relative !important;
  z-index: 10 !important;
  margin: 0 !important;
}

/* Precision Concentric Pulse - Strictly BEHIND Solid Core with Ultra-Soft Ethereal Opacity */
.hero-status-dot .dot-ping {
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: #10B981 !important;
  opacity: 0.28 !important;
  animation: hero-status-ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite !important;
  z-index: 1 !important;
  pointer-events: none !important;
  transform-origin: center center !important;
}

@keyframes hero-status-ping {
  0% {
    transform: scale(1);
    opacity: 0.28;
  }
  50% {
    opacity: 0.14;
  }
  85%, 100% {
    transform: scale(2.3);
    opacity: 0;
  }
}

/* ==========================================================================
   24. SERVICE CARD ICONS: CONSISTENT SQUIRCLE & VISIBLE BRAND PURPLE
   ========================================================================== */
.service-card-items-2 .icon,
.service-card-items-2.style-2 .icon {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  border-radius: 16px !important;
  background: #FAF7F2 !important;
  background-color: #FAF7F2 !important;
  border: 1px solid rgba(79, 59, 255, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 18px !important;
  transition: all 0.35s ease !important;
  box-shadow: 0 4px 10px rgba(79, 59, 255, 0.05) !important;
}

/* Service Card SVG / Icon styling - Normal State (Including .style-2 Packaging) */
.service-card-items-2 .icon svg,
.service-card-items-2.style-2 .icon svg,
.service-card-items-2 .icon .e-font-icon-svg,
.service-card-items-2.style-2 .icon .e-font-icon-svg {
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  fill: #4F3BFF !important;
  color: #4F3BFF !important;
  display: block !important;
  margin: auto !important;
  transition: all 0.35s ease !important;
}

.service-card-items-2 .icon svg path,
.service-card-items-2.style-2 .icon svg path,
.service-card-items-2 .icon .e-font-icon-svg path,
.service-card-items-2.style-2 .icon .e-font-icon-svg path {
  fill: #4F3BFF !important;
  transition: fill 0.35s ease !important;
}

.service-card-items-2 .icon i,
.service-card-items-2.style-2 .icon i {
  font-size: 26px !important;
  color: #4F3BFF !important;
  display: block !important;
  margin: auto !important;
  transition: color 0.35s ease !important;
}

.service-card-items-2 .icon img,
.service-card-items-2.style-2 .icon img {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  object-fit: contain !important;
  display: block !important;
  margin: auto !important;
  transition: all 0.35s ease !important;
}

/* Service Card Icon - Hover State */
.service-card-items-2:hover .icon,
.service-card-items-2.style-2:hover .icon {
  background: linear-gradient(135deg, #4F3BFF 0%, #6B57FF 100%) !important;
  border-color: #4F3BFF !important;
  box-shadow: 0 8px 18px rgba(79, 59, 255, 0.28) !important;
  transform: translateY(-2px) scale(1.05) !important;
}

.service-card-items-2:hover .icon svg,
.service-card-items-2.style-2:hover .icon svg,
.service-card-items-2:hover .icon svg path,
.service-card-items-2.style-2:hover .icon svg path,
.service-card-items-2:hover .icon .e-font-icon-svg,
.service-card-items-2.style-2:hover .icon .e-font-icon-svg,
.service-card-items-2:hover .icon .e-font-icon-svg path,
.service-card-items-2.style-2:hover .icon .e-font-icon-svg path {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
}

.service-card-items-2:hover .icon i,
.service-card-items-2.style-2:hover .icon i {
  color: #FFFFFF !important;
}

.service-card-items-2:hover .icon img,
.service-card-items-2.style-2:hover .icon img {
  filter: brightness(0) invert(1) !important;
}

/* ==========================================================================
   25. SOCIAL ICONS: HEADER & FOOTER CRISP ICONS
   ========================================================================== */
.social-icon a svg,
.social-icons a svg,
.social-media a svg,
.footer-social a svg,
.footer-widget-wrapper .socials a svg,
.elementor-widget-social-icons .elementor-social-icon svg {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
  display: block !important;
  margin: auto !important;
}

.social-icon a svg path,
.social-icons a svg path,
.social-media a svg path,
.footer-social a svg path,
.footer-widget-wrapper .socials a svg path,
.elementor-widget-social-icons .elementor-social-icon svg path {
  fill: #FFFFFF !important;
}

/* ==========================================================================
   26. TRUSTED CLIENTS: LIGHT SECTION & OPTICALLY BALANCED SVG LOGOS (PERFECT BALANCED SIZE)
   ========================================================================== */
.elementor-element-5463508 {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  border-top: 1px solid #F3F4F6 !important;
  border-bottom: 1px solid #F3F4F6 !important;
  padding: 0 !important;
}

.elementor-element-a9bc0c0 {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.elementor-element-027414a {
  border-right: 1px solid #E5E7EB !important;
  padding-right: 36px !important;
  margin-right: 36px !important;
  flex-shrink: 0 !important;
  width: auto !important;
}

.elementor-element-027414a .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
}

.elementor-element-027414a .elementor-heading-title {
  color: #141416 !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

.elementor-element-11e51f6 {
  min-height: 82px !important;
  flex-grow: 1 !important;
  min-width: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Clean overflow without blurry masks so logos render 100% crisp vector */
.elementor-element-11e51f6::before,
.elementor-element-11e51f6::after {
  display: none !important;
}

.elementor-element-11e51f6 .elementor-image-carousel-wrapper {
  overflow: hidden !important;
  cursor: grab !important;
  touch-action: pan-y pinch-zoom !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.elementor-element-11e51f6 .elementor-image-carousel-wrapper:active {
  cursor: grabbing !important;
}

.elementor-element-11e51f6 .swiper-slide {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 88px !important;
  min-height: 88px !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
  cursor: grab !important;
}

.elementor-element-11e51f6 .swiper-slide:active {
  cursor: grabbing !important;
}

.elementor-element-11e51f6 .swiper-slide figure,
.elementor-element-11e51f6 .swiper-slide-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

/* Base Logo Image Styling - calibrated default */
.elementor-element-11e51f6 .swiper-slide img,
.elementor-element-11e51f6 img.swiper-slide-image {
  height: 50px !important;
  max-height: 54px !important;
  max-width: 100% !important;
  width: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  display: block !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
  shape-rendering: geometricPrecision !important;
  text-rendering: geometricPrecision !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
  pointer-events: none !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Optical Calibration: Equalize visual weight & gap across all aspect ratios */
/* 1. Ultra-wide horizontal logos: reduce height to prevent huge width */
.elementor-element-11e51f6 .swiper-slide img[src*="smarder"],
.elementor-element-11e51f6 img[src*="smarder"].swiper-slide-image {
  height: 35px !important;
  max-height: 36px !important;
}

.elementor-element-11e51f6 .swiper-slide img[src*="rrp-agro"],
.elementor-element-11e51f6 img[src*="rrp-agro"].swiper-slide-image {
  height: 38px !important;
  max-height: 40px !important;
}

.elementor-element-11e51f6 .swiper-slide img[src*="infoportal"],
.elementor-element-11e51f6 img[src*="infoportal"].swiper-slide-image {
  height: 42px !important;
  max-height: 44px !important;
}

.elementor-element-11e51f6 .swiper-slide img[src*="gbb"],
.elementor-element-11e51f6 img[src*="gbb"].swiper-slide-image {
  height: 44px !important;
  max-height: 46px !important;
}

/* 2. Medium-width logos */
.elementor-element-11e51f6 .swiper-slide img[src*="condorwood"],
.elementor-element-11e51f6 img[src*="condorwood"].swiper-slide-image {
  height: 50px !important;
  max-height: 52px !important;
}

.elementor-element-11e51f6 .swiper-slide img[src*="rrp-group"],
.elementor-element-11e51f6 img[src*="rrp-group"].swiper-slide-image {
  height: 48px !important;
  max-height: 50px !important;
}

.elementor-element-11e51f6 .swiper-slide img[src*="golden-wings"],
.elementor-element-11e51f6 img[src*="golden-wings"].swiper-slide-image {
  height: 54px !important;
  max-height: 56px !important;
}

/* 3. Compact & square logos: increase height so visual area matches wide logos */
.elementor-element-11e51f6 .swiper-slide img[src*="naturorganica"],
.elementor-element-11e51f6 img[src*="naturorganica"].swiper-slide-image {
  height: 58px !important;
  max-height: 60px !important;
}

.elementor-element-11e51f6 .swiper-slide img[src*="cloud-view"],
.elementor-element-11e51f6 img[src*="cloud-view"].swiper-slide-image {
  height: 58px !important;
  max-height: 60px !important;
}

.elementor-element-11e51f6 .swiper-slide img[src*="jeevan-sanskriti"],
.elementor-element-11e51f6 img[src*="jeevan-sanskriti"].swiper-slide-image {
  height: 60px !important;
  max-height: 62px !important;
}

.elementor-element-11e51f6 .swiper-slide img[src*="shrine"],
.elementor-element-11e51f6 img[src*="shrine"].swiper-slide-image {
  height: 62px !important;
  max-height: 64px !important;
}

.elementor-element-11e51f6 .swiper-slide:hover img {
  transform: scale(1.06) !important;
}

@media (max-width: 991px) {
  .elementor-element-a9bc0c0 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  .elementor-element-027414a {
    padding-right: 22px !important;
    margin-right: 22px !important;
    flex-shrink: 0 !important;
    width: auto !important;
  }
  .elementor-element-027414a .elementor-heading-title {
    font-size: 19px !important;
  }
  .elementor-element-11e51f6::before,
  .elementor-element-11e51f6::after {
    width: 45px !important;
  }
  .elementor-element-11e51f6 .elementor-image-carousel-wrapper {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 40px, #000 calc(100% - 40px), transparent 100%) !important;
    mask-image: linear-gradient(to right, transparent 0%, #000 40px, #000 calc(100% - 40px), transparent 100%) !important;
  }
  .elementor-element-11e51f6,
  .elementor-element-11e51f6 .swiper-slide {
    height: 74px !important;
    min-height: 74px !important;
    padding: 0 4px !important;
  }
  .elementor-element-11e51f6 .swiper-slide img,
  .elementor-element-11e51f6 img.swiper-slide-image {
    height: 42px !important;
    max-height: 46px !important;
  }
  .elementor-element-11e51f6 .swiper-slide img[src*="smarder"] { height: 30px !important; }
  .elementor-element-11e51f6 .swiper-slide img[src*="rrp-agro"] { height: 32px !important; }
  .elementor-element-11e51f6 .swiper-slide img[src*="infoportal"] { height: 34px !important; }
  .elementor-element-11e51f6 .swiper-slide img[src*="gbb"] { height: 36px !important; }
  .elementor-element-11e51f6 .swiper-slide img[src*="shrine"] { height: 54px !important; }
  .elementor-element-11e51f6 .swiper-slide img[src*="jeevan-sanskriti"] { height: 52px !important; }
  .elementor-element-11e51f6 .swiper-slide img[src*="cloud-view"] { height: 50px !important; }
  .elementor-element-11e51f6 .swiper-slide img[src*="naturorganica"] { height: 50px !important; }
}

@media (max-width: 767px) {
  .elementor-element-5463508 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .elementor-element-a9bc0c0 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .elementor-element-027414a {
    border-right: none !important;
    border-bottom: 1px solid #E5E7EB !important;
    padding-right: 0 !important;
    padding-bottom: 8px !important;
    margin-right: 0 !important;
    margin-bottom: 10px !important;
    text-align: center !important;
    width: 100% !important;
  }
  .elementor-element-027414a .elementor-heading-title {
    text-align: center !important;
    font-size: 18px !important;
  }
  .elementor-element-11e51f6::before,
  .elementor-element-11e51f6::after {
    width: 30px !important;
  }
  .elementor-element-11e51f6 .elementor-image-carousel-wrapper {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 25px, #000 calc(100% - 25px), transparent 100%) !important;
    mask-image: linear-gradient(to right, transparent 0%, #000 25px, #000 calc(100% - 25px), transparent 100%) !important;
  }
  .elementor-element-11e51f6,
  .elementor-element-11e51f6 .swiper-slide {
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 4px !important;
  }
  .elementor-element-11e51f6 .swiper-slide img,
  .elementor-element-11e51f6 img.swiper-slide-image {
    height: 36px !important;
    max-height: 40px !important;
  }
  .elementor-element-11e51f6 .swiper-slide img[src*="smarder"] { height: 25px !important; }
  .elementor-element-11e51f6 .swiper-slide img[src*="rrp-agro"] { height: 27px !important; }
  .elementor-element-11e51f6 .swiper-slide img[src*="infoportal"] { height: 30px !important; }
  .elementor-element-11e51f6 .swiper-slide img[src*="gbb"] { height: 32px !important; }
  .elementor-element-11e51f6 .swiper-slide img[src*="shrine"] { height: 46px !important; }
  .elementor-element-11e51f6 .swiper-slide img[src*="jeevan-sanskriti"] { height: 42px !important; }
  .elementor-element-11e51f6 .swiper-slide img[src*="cloud-view"] { height: 42px !important; }
  .elementor-element-11e51f6 .swiper-slide img[src*="naturorganica"] { height: 42px !important; }
}

/* ==========================================================================
   27. Footer Logo: Balanced Size (Matching Header Logo 118px), Centered & Crisp
   ========================================================================== */
.elementor-835 .elementor-element.elementor-element-94553ec,
.footer-bottom .elementor-widget-image {
  text-align: center !important;
  justify-self: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

.elementor-835 .elementor-element.elementor-element-94553ec a,
.footer-bottom .elementor-widget-image a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.26, 0.64, 1) !important;
}

.elementor-835 .elementor-element.elementor-element-94553ec a:hover,
.footer-bottom .elementor-widget-image a:hover {
  transform: scale(1.05) !important;
}

.elementor-835 .elementor-element.elementor-element-94553ec img,
.elementor-835 .elementor-element.elementor-element-94553ec a img,
.elementor-835 img[src*="logo-white.svg"],
.footer-area img[src*="logo-white.svg"],
.footer-bottom img[src*="logo-white.svg"] {
  width: 118px !important;
  max-width: 118px !important;
  height: auto !important;
  object-fit: contain !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  filter: brightness(1.05) !important;
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease !important;
}

@media (max-width: 767px) {
  .elementor-835 .elementor-element.elementor-element-94553ec {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
  .elementor-835 .elementor-element.elementor-element-94553ec img,
  .elementor-835 .elementor-element.elementor-element-94553ec a img,
  .elementor-835 img[src*="logo-white.svg"],
  .footer-area img[src*="logo-white.svg"],
  .footer-bottom img[src*="logo-white.svg"] {
    width: 118px !important;
    max-width: 118px !important;
  }
}

/* ==========================================================================
   28. SERVICE CARDS: SILKY SMOOTH MINIMALIST HOVER TRANSITION & CLICKABILITY
   ========================================================================== */
.service-card-items-2,
body .elementor-element.elementor-element-2150cf6 .service-card-items-2,
body .elementor-element.elementor-element-e031327 .service-card-items-2 {
  position: relative !important;
  cursor: pointer !important;
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  background-image: none !important;
  border: 1px solid rgba(10, 10, 10, 0.08) !important;
  border-radius: 20px !important;
  padding: 38px 28px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.35, 1), 
              border-color 0.45s cubic-bezier(0.25, 1, 0.35, 1),
              box-shadow 0.45s ease !important;
  will-change: transform, border-color;
  overflow: hidden !important;
}

/* Middle Card (Packaging & Label Design) - Pure White with Subtle Brand Border */
body .elementor-element.elementor-element-543c57c .service-card-items-2,
body .elementor-element.elementor-element-fe1da56 .service-card-items-2 {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  background-image: none !important;
  border: 1px solid rgba(79, 59, 255, 0.18) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
}

/* Minimalist Hover Background Tint - Seamless Soft Lavender Wash (No heavy shadow) */
.service-card-items-2::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(247, 243, 254, 0.75) 100%) !important;
  opacity: 0 !important;
  transition: opacity 0.45s cubic-bezier(0.25, 1, 0.35, 1) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Hover State: Minimal Accent - Soft Lavender Wash & Purple Border (Shadow free) */
.service-card-items-2:hover,
body .elementor-element.elementor-element-2150cf6 .service-card-items-2:hover,
body .elementor-element.elementor-element-e031327 .service-card-items-2:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(79, 59, 255, 0.45) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

.service-card-items-2:hover::before,
body .elementor-element.elementor-element-2150cf6 .service-card-items-2:hover::before,
body .elementor-element.elementor-element-e031327 .service-card-items-2:hover::before {
  opacity: 1 !important;
}

/* Ensure no top or bottom lines */
.service-card-items-2::after,
.service-card-items-2:hover::after {
  display: none !important;
  content: none !important;
}

/* Keep card content cleanly above the background overlay */
.service-card-items-2 .icon,
.service-card-items-2 .content {
  position: relative !important;
  z-index: 2 !important;
}

/* Whole container natively clickable via stretched link */
.service-card-items-2 .content h4 a::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  cursor: pointer !important;
}

.service-card-items-2 a.theme-btn-text {
  pointer-events: none !important;
}

/* Icon Squircle Styling & Smooth Color Interpolation */
.service-card-items-2 .icon,
.service-card-items-2.style-2 .icon {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  border-radius: 16px !important;
  background-color: #FAF7F2 !important;
  border: 1px solid rgba(79, 59, 255, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 18px !important;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.35, 1),
              background 0.45s ease,
              border-color 0.45s ease,
              box-shadow 0.45s ease !important;
  box-shadow: 0 4px 10px rgba(79, 59, 255, 0.05) !important;
}

.service-card-items-2:hover .icon,
.service-card-items-2.style-2:hover .icon {
  background: linear-gradient(135deg, #4F3BFF 0%, #6B57FF 100%) !important;
  border-color: #4F3BFF !important;
  box-shadow: 0 8px 18px rgba(79, 59, 255, 0.28) !important;
  transform: translateY(-2px) scale(1.05) !important;
}

.service-card-items-2 .icon svg,
.service-card-items-2.style-2 .icon svg,
.service-card-items-2 .icon svg path,
.service-card-items-2.style-2 .icon svg path,
.service-card-items-2 .icon .e-font-icon-svg,
.service-card-items-2.style-2 .icon .e-font-icon-svg,
.service-card-items-2 .icon .e-font-icon-svg path,
.service-card-items-2.style-2 .icon .e-font-icon-svg path,
.service-card-items-2 .icon i,
.service-card-items-2.style-2 .icon i,
.service-card-items-2 .icon img,
.service-card-items-2.style-2 .icon img {
  fill: #4F3BFF !important;
  color: #4F3BFF !important;
  transition: fill 0.4s ease, color 0.4s ease, filter 0.4s ease !important;
}

.service-card-items-2:hover .icon svg path,
.service-card-items-2.style-2:hover .icon svg path,
.service-card-items-2:hover .icon .e-font-icon-svg path,
.service-card-items-2.style-2:hover .icon .e-font-icon-svg path {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
  stroke: none !important;
}

.service-card-items-2:hover .icon i,
.service-card-items-2.style-2:hover .icon i {
  color: #FFFFFF !important;
}

.service-card-items-2:hover .icon img,
.service-card-items-2.style-2:hover .icon img {
  filter: brightness(0) invert(1) !important;
}

/* ==========================================================================
   29. Counter Widgets: Refined Subtle Spacing Between Number & Label
   ========================================================================== */
.elementor-counter .elementor-counter-number-wrapper {
  margin-bottom: 8px !important;
}
.elementor-counter .elementor-counter-title {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* ==========================================================================
   30. GLOBAL BUTTON SYSTEM: UNIFIED "BOOK A CALL" NAV HOVER EFFECT EVERYWHERE
   ========================================================================== */

/* 1. All Button Pseudo-elements (::before) Set to Vibrant Brand Purple (Never Dark!) */
.theme-btn::before,
.btn-wrapper .theme-btn::before,
.hero-btn-wrapper .theme-btn::before,
.price-item .theme-btn::before,
.price-wrapper .theme-btn::before,
.xiomi-btn::before,
.submit-btn::before,
.elementor-button::before,
.contact-1 .contact-form .theme-btn::before,
.contact-form-box .theme-btn::before,
.theme-btn.style-1::before {
  background: var(--theme, #4F3BFF) !important;
  background-color: #4F3BFF !important;
  background-image: linear-gradient(135deg, #3F2CDA 0%, #6B57FF 100%) !important;
}

.theme-btn:hover::before,
.btn-wrapper .theme-btn:hover::before,
.hero-btn-wrapper .theme-btn:hover::before,
.price-item .theme-btn:hover::before,
.price-wrapper .theme-btn:hover::before,
.xiomi-btn:hover::before,
.submit-btn:hover::before,
.elementor-button:hover::before,
.contact-1 .contact-form .theme-btn:hover::before,
.contact-form-box .theme-btn:hover::before,
.theme-btn.style-1:hover::before {
  background: var(--theme, #4F3BFF) !important;
  background-color: #4F3BFF !important;
  background-image: linear-gradient(135deg, #3F2CDA 0%, #6B57FF 100%) !important;
  width: 100% !important;
}

/* 2. All Button Arrows & Icons: Tilted at -45deg in Normal State */
.theme-btn i,
.theme-btn svg,
.theme-btn .e-font-icon-svg,
.btn-wrapper .theme-btn i,
.btn-wrapper .theme-btn svg,
.btn-wrapper .theme-btn .e-font-icon-svg,
.hero-btn-wrapper .theme-btn i,
.hero-btn-wrapper .theme-btn svg,
.hero-btn-wrapper .theme-btn .e-font-icon-svg,
.price-item .theme-btn i,
.price-item .theme-btn svg,
.price-item .theme-btn .e-font-icon-svg,
.xiomi-btn i,
.xiomi-btn svg,
.xiomi-btn .e-font-icon-svg,
.elementor-button i,
.elementor-button svg,
.elementor-button .e-font-icon-svg {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-left: 8px !important;
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  stroke: none !important;
  transform: rotate(-45deg) !important;
  transition: transform 0.4s ease-in-out, fill 0.3s ease, color 0.3s ease !important;
  transform-origin: center center !important;
}

.theme-btn svg,
.btn-wrapper .theme-btn svg,
.elementor-button svg {
  width: 14px !important;
  height: 14px !important;
}

/* 3. All Buttons on Hover: Identical to Nav "Book a Call" Gradient & Shadow (Eliminating any Dark Hover) */
.theme-btn:hover,
.btn-wrapper .theme-btn:hover,
.hero-btn-wrapper .theme-btn:hover,
.price-item .theme-btn:hover,
.price-wrapper .theme-btn:hover,
.price-wrapper .price-item .theme-btn:hover,
.xiomi-btn:hover,
.submit-btn:hover,
.elementor-button:hover,
.contact-1 .contact-form .theme-btn:hover,
.contact-1 .contact-form .contact-box .theme-btn:hover,
.contact-1 .contact-form input[type="submit"]:hover,
.contact-1 .contact-form .wpcf7-submit:hover,
.contact-form-box input.theme-btn:hover,
.contact-form-box input[type="submit"]:hover,
.contact-form-box .wpcf7-submit:hover,
.contact-from-section .contact-form-box input[type="submit"]:hover,
.hero-2 .hero-content-wrappers .hero-content-left .hero-btn .theme-btn:hover,
.hero-3 .hero-content-wrapper .theme-btn:hover,
.theme-btn.style-1:hover {
  background: linear-gradient(135deg, #3F2CDA 0%, #6B57FF 100%) !important;
  background-color: #4F3BFF !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(79, 59, 255, 0.32) !important;
  transform: none !important;
}

/* 4. All Button Arrows on Hover: Smoothly Rotate to 0deg (Horizontal Right) */
.theme-btn:hover i,
.theme-btn:hover svg,
.theme-btn:hover .e-font-icon-svg,
.theme-btn:hover svg path,
.btn-wrapper .theme-btn:hover i,
.btn-wrapper .theme-btn:hover svg,
.btn-wrapper .theme-btn:hover .e-font-icon-svg,
.btn-wrapper .theme-btn:hover svg path,
.hero-btn-wrapper .theme-btn:hover i,
.hero-btn-wrapper .theme-btn:hover svg,
.hero-btn-wrapper .theme-btn:hover .e-font-icon-svg,
.hero-btn-wrapper .theme-btn:hover svg path,
.price-item .theme-btn:hover i,
.price-item .theme-btn:hover svg,
.price-item .theme-btn:hover .e-font-icon-svg,
.xiomi-btn:hover i,
.xiomi-btn:hover svg,
.xiomi-btn:hover .e-font-icon-svg,
.elementor-button:hover i,
.elementor-button:hover svg,
.elementor-button:hover .e-font-icon-svg,
.elementor-button:hover svg path {
  transform: rotate(0deg) !important;
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* ==========================================================================
   28. Blog Grid Post Card: Increased Width, Balanced Typography & Proportions
   ========================================================================== */
.elementor-element-0d55287 .blog-grid-one .row,
.news-section.news-1 .row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

/* Give the column a generous, comfortable width (420px) so metadata and titles do not wrap awkwardly */
.elementor-element-0d55287 [class*="col-"],
.news-section.news-1 [class*="col-"] {
  flex: 0 0 auto !important;
  width: 420px !important;
  max-width: 100% !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

.news-1 .news-item,
.elementor-element-0d55287 .news-item {
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto 30px auto !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(79, 59, 255, 0.12) !important;
  box-shadow: 0 8px 30px rgba(10, 10, 10, 0.04) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.news-1 .news-item:hover,
.elementor-element-0d55287 .news-item:hover {
  transform: translateY(-6px) !important;
  border-color: #4F3BFF !important;
  box-shadow: 0 16px 40px rgba(79, 59, 255, 0.14) !important;
}

.news-1 .news-item .thumb,
.elementor-element-0d55287 .news-item .thumb {
  width: 100% !important;
  overflow: hidden !important;
  border-top-left-radius: 17px !important;
  border-top-right-radius: 17px !important;
}

.news-1 .news-item .thumb img,
.elementor-element-0d55287 .news-item .thumb img {
  width: 100% !important;
  height: 250px !important;
  object-fit: cover !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.news-1 .news-item:hover .thumb img,
.elementor-element-0d55287 .news-item:hover .thumb img {
  transform: scale(1.05) !important;
}

.news-1 .news-item .content,
.elementor-element-0d55287 .news-item .content {
  padding: 24px 24px 26px !important;
}

.news-1 .news-item .news-meta,
.elementor-element-0d55287 .news-item .news-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
  padding: 0 !important;
  list-style: none !important;
}

.news-1 .news-item .news-meta li.green a,
.elementor-element-0d55287 .news-item .news-meta li.green a {
  color: #4F3BFF !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  transition: color 0.2s ease !important;
}

.news-1 .news-item .news-meta li.green a:hover,
.elementor-element-0d55287 .news-item .news-meta li.green a:hover {
  color: #3F2CDA !important;
}

.news-1 .news-item .news-meta li.date,
.elementor-element-0d55287 .news-item .news-meta li.date {
  color: #0A0A0A !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

.news-1 .news-item .content h4,
.elementor-element-0d55287 .news-item .content h4 {
  font-size: 21px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  margin-bottom: 22px !important;
}

.news-1 .news-item .content h4 a,
.elementor-element-0d55287 .news-item .content h4 a {
  color: #0A0A0A !important;
  transition: color 0.2s ease !important;
}

.news-1 .news-item .content h4 a:hover,
.elementor-element-0d55287 .news-item .content h4 a:hover {
  color: #4F3BFF !important;
}

@media (max-width: 480px) {
  .elementor-element-0d55287 [class*="col-"],
  .news-section.news-1 [class*="col-"] {
    width: 100% !important;
  }
  .news-1 .news-item .thumb img,
  .elementor-element-0d55287 .news-item .thumb img {
    height: 220px !important;
  }
}