/*
	Theme Name: Hello MBD Smart
	Theme URI: https://arvand.ee
	Description: A child theme of Hello Elementor for MBD Smart.
	Author: Hoomaan Sheikholeslami
	Author URI: https://arvand.ee
	Template: hello-elementor
	Version: 1.0.0
	Requires at least: 6.0
	Tested up to: 6.8
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: hello-mbd-smart
	Company: Arvand OÜ
*/


/* ============================================================
   Google Fonts — Exo 2 (headings only; body uses system stack)
   ============================================================ */
   @import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,200;0,300;1,200;1,300&display=swap');

   /* ============================================================
      Design Tokens
      ============================================================ */
   :root {
       /* --- Neutral Palette --- */
       --color-black:          #0A0A0A; /* primary black | --e-global-color-primary */
       --color-header-bg:      #111111; /* header / footer | --e-global-color-4ede8a6 */
       --color-dark-surface:   #1A1A1A; /* dark sections, cards on dark | --e-global-color-f76e7bb*/
       --color-text-body:      #222222; /* primary text on light | --e-global-color-secondary */
       --color-text-secondary: #666666; /* descriptions, captions | --e-global-color-text */
       --color-text-muted:     #999999; /* labels, metadata | --e-global-color-b68aade */
       --color-border:         #E5E5E5; /* dividers, subtle separations | --e-global-color-5909f1c */
       --color-bg-light:       #F5F5F5; /* alternating light sections | --e-global-color-91af387 */
       --color-surface-light:  #FAFAFA; /* cards on gray backgrounds | --e-global-color-18dbd31 */
       --color-white:          #FFFFFF; /* primary bg / text on dark | --e-global-color-accent */
	   --white-80: rgba(255, 255, 255, 0.8);
	   --white-50: rgba(255, 255, 255, 0.5);
	   --white-15: rgba(255, 255, 255, 0.15);
       --white-08: rgba(255, 255, 255, 0.08);
   
       /* --- Typography --- */
       --font-heading: 'Exo 2', 'Segoe UI', system-ui, sans-serif;
       --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                       Helvetica, Arial, sans-serif, 'Apple Color Emoji';
   
       /* --- Layout --- */
       --section-padding-v: clamp(80px, 10vw, 150px);
       --container-width:   1200px;

	   --padding-v: clamp(4rem, 8vw, 9rem);
       --padding-h: clamp(1.25rem, 3vw, 3rem);
   
       /* --- Motion --- */
       --ease-out-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
       --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
       --duration-base:   0.3s;
       --duration-reveal: 0.7s;
   }

   /* ============================================================
      Base Reset / Global
      ============================================================ */
	  *,
	  *::before,
	  *::after {
		  box-sizing: border-box;
	  }
	  
	  html {
		  scroll-behavior: smooth;
	  }
	  
	  body {
		  -webkit-font-smoothing: antialiased;
		  -moz-osx-font-smoothing: grayscale;
	  }
	  
	  /* Text selection — monochromatic */
	  ::selection       { background: #0A0A0A; color: #FFFFFF; }
	  ::-moz-selection  { background: #0A0A0A; color: #FFFFFF; }
	  
	  /* ============================================================
		 Typography
		 ============================================================ */
	  /* Links — no accent colour; opacity shift only */
	  a {
		  color: inherit;
		  text-decoration: none;
		  transition: opacity var(--duration-base) var(--ease-out-smooth);
	  }
	  

	  

/* ============================================================
      Dark Section Utility — comprehensive
      Usage: add class "dark-section" to any Elementor container
      ============================================================ */
	  .dark-section {
		color: var(--color-white);
	}
	
	.dark-section h1,
	.dark-section h2,
	.dark-section h3,
	.dark-section h4,
	.dark-section h5,
	.dark-section h6,
	.dark-section .elementor-heading-title {
		color: var(--color-white) !important;
	}
	
	.dark-section p,
	.dark-section span:not(.elementor-button-text),
	.dark-section .elementor-text-editor {
		color: rgba(255, 255, 255, 0.8) !important;
	}
	
	.dark-section a:not(.elementor-button) {
		color: var(--color-white) !important;
		opacity: 0.8;
	}
	
	.dark-section a:not(.elementor-button):hover { opacity: 1; }
	
	.dark-section .elementor-field-textual {
		background-color: rgba(255, 255, 255, 0.08) !important;
		border-color:     rgba(255, 255, 255, 0.2) !important;
		color:            var(--color-white) !important;
	}
	
	.dark-section .elementor-field-textual::placeholder { color: rgba(255, 255, 255, 0.4) !important; }
	.dark-section .elementor-field-textual:focus        { border-color: var(--color-white) !important; }
	
	.dark-section .elementor-divider-separator { border-color: rgba(255, 255, 255, 0.15) !important; }
	
	.dark-section .elementor-icon i,
	.dark-section .elementor-icon svg {
		color: var(--color-white) !important;
		fill:  var(--color-white) !important;
	}

	/* ============================================================
      Button Variants
      ============================================================ */
   
   /* Secondary — outline on light backgrounds */
   .btn-secondary .elementor-button {
	background-color: transparent !important;
	color: var(--color-black) !important;
	border: 1px solid var(--color-black) !important;
	transition: all 0.4s var(--ease-out-smooth);
}

.btn-secondary .elementor-button:hover {
	background-color: var(--color-black) !important;
	color: var(--color-white) !important;
}

.btn-secondary .elementor-button .elementor-button-text { color: inherit !important; }

/* Light — solid white on dark backgrounds */
.btn-light .elementor-button {
	background-color: var(--color-white) !important;
	color: var(--color-black) !important;
	border: 1px solid var(--color-white) !important;
	transition: all 0.4s var(--ease-out-smooth);
}

.btn-light .elementor-button:hover {
	background-color: transparent !important;
	color: var(--color-white) !important;
}

.btn-light .elementor-button .elementor-button-text { color: inherit !important; }

/* Light outline — transparent on dark backgrounds */
.btn-light-outline .elementor-button {
	background-color: transparent !important;
	color: var(--color-white) !important;
	border: 1px solid var(--color-white) !important;
	transition: all 0.4s var(--ease-out-smooth);
}

.btn-light-outline .elementor-button:hover {
	background-color: var(--color-white) !important;
	color: var(--color-black) !important;
}

.btn-light-outline .elementor-button .elementor-button-text { color: inherit !important; }

/* ============================================================
      CSS-only Scroll Animation Classes
      (triggered by IntersectionObserver in animations.js)
      ============================================================ */
   
   /* Fade up */
   .fade-up {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.8s var(--ease-out-smooth),
				transform 0.8s var(--ease-out-smooth);
}

.fade-up.is-visible { opacity: 1; transform: translateY(0); }

/* Fade from left */
.fade-left {
	opacity: 0;
	transform: translateX(-40px);
	transition: opacity 0.8s var(--ease-out-smooth),
				transform 0.8s var(--ease-out-smooth);
}

.fade-left.is-visible { opacity: 1; transform: translateX(0); }

/* Fade from right */
.fade-right {
	opacity: 0;
	transform: translateX(40px);
	transition: opacity 0.8s var(--ease-out-smooth),
				transform 0.8s var(--ease-out-smooth);
}

.fade-right.is-visible { opacity: 1; transform: translateX(0); }

/* Scale up */
.scale-up {
	opacity: 0;
	transform: scale(0.95);
	transition: opacity 0.8s var(--ease-out-smooth),
				transform 0.8s var(--ease-out-smooth);
}

.scale-up.is-visible { opacity: 1; transform: scale(1); }

/* In Elementor editor: disable initial-hidden state so widgets are visible */
.elementor-editor-active .fade-up,
.elementor-editor-active .fade-left,
.elementor-editor-active .fade-right,
.elementor-editor-active .scale-up {
	opacity: 1;
	transform: none;
	transition: none;
}

/* Stagger children — v3 columns and v4 containers */
.stagger-children > .elementor-element:nth-child(1),
.stagger-children > .e-con:nth-child(1)             { transition-delay: 0s;   }
.stagger-children > .elementor-element:nth-child(2),
.stagger-children > .e-con:nth-child(2)             { transition-delay: 0.1s; }
.stagger-children > .elementor-element:nth-child(3),
.stagger-children > .e-con:nth-child(3)             { transition-delay: 0.2s; }
.stagger-children > .elementor-element:nth-child(4),
.stagger-children > .e-con:nth-child(4)             { transition-delay: 0.3s; }
.stagger-children > .elementor-element:nth-child(5),
.stagger-children > .e-con:nth-child(5)             { transition-delay: 0.4s; }
.stagger-children > .elementor-element:nth-child(6),
.stagger-children > .e-con:nth-child(6)             { transition-delay: 0.5s; }

/* Card hover elevation (alias for .hover-lift) */
.card-hover {
	transition: transform 0.4s var(--ease-out-smooth),
				box-shadow 0.4s var(--ease-out-smooth);
}

.card-hover:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}


.section-lg {
	padding-top: clamp(5rem, 10vw, 10rem);
	padding-bottom: clamp(5rem, 10vw, 10rem);
}

.section-md {
	padding-top: clamp(3rem, 6vw, 7rem);
	padding-bottom: clamp(3rem, 6vw, 7rem);
}

.section-sm {
	padding-top: clamp(2rem, 4vw, 4rem);
	padding-bottom: clamp(2rem, 4vw, 4rem);
}