/*
	Theme Name: N theme
	Theme URI: https://www.nishidshajib.com
	Description: Child theme of Hello Elementor. Registers custom, fully-customizable Elementor widgets (Hero Slider, etc.). Performance/LiteSpeed friendly — widget assets load only when the widget is on the page.
	Author: Nishid Shajib
	Author URI: https://www.nishidshajib.com
	Template: hello-elementor
	Version: 1.0.0
	Requires PHP: 7.4
	Text Domain: hello-elementor-child
*/

/* Design tokens (mirror of Sample-Design tw.js) are kept in the per-widget CSS
   under assets/css/ so they only load with their widget. Add global child-theme
   overrides below. */

/* Hide scrollbars site-wide (scrolling still works). */
html {
	scrollbar-width: none;        /* Firefox */
	-ms-overflow-style: none;     /* IE / old Edge */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;                /* Chrome / Safari / Edge */
}

/* ---------------------------------------------------------------------------
   Spacing utilities — vertical padding/margin in 10px steps (10–70px).
   !important so they reliably override Elementor/theme defaults.
   ------------------------------------------------------------------------- */
.p-0  { padding: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-10 { padding-top: 10px !important; padding-bottom: 10px !important; }
.py-20 { padding-top: 20px !important; padding-bottom: 20px !important; }
.py-30 { padding-top: 30px !important; padding-bottom: 30px !important; }
.py-40 { padding-top: 40px !important; padding-bottom: 40px !important; }
.py-50 { padding-top: 50px !important; padding-bottom: 50px !important; }
.py-60 { padding-top: 60px !important; padding-bottom: 60px !important; }
.py-70 { padding-top: 70px !important; padding-bottom: 70px !important; }

.pt-10 { padding-top: 10px !important; }
.pt-20 { padding-top: 20px !important; }
.pt-30 { padding-top: 30px !important; }
.pt-40 { padding-top: 40px !important; }
.pt-50 { padding-top: 50px !important; }
.pt-60 { padding-top: 60px !important; }
.pt-70 { padding-top: 70px !important; }
.pt-140 { padding-top: 140px !important; }

.pb-10 { padding-bottom: 10px !important; }
.pb-20 { padding-bottom: 20px !important; }
.pb-30 { padding-bottom: 30px !important; }
.pb-40 { padding-bottom: 40px !important; }
.pb-50 { padding-bottom: 50px !important; }
.pb-60 { padding-bottom: 60px !important; }
.pb-70 { padding-bottom: 70px !important; }
.pb-140 { padding-bottom: 140px !important; }


.m-0  { margin: 0 !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-10 { margin-top: 10px !important; margin-bottom: 10px !important; }
.my-20 { margin-top: 20px !important; margin-bottom: 20px !important; }
.my-30 { margin-top: 30px !important; margin-bottom: 30px !important; }
.my-40 { margin-top: 40px !important; margin-bottom: 40px !important; }
.my-50 { margin-top: 50px !important; margin-bottom: 50px !important; }
.my-60 { margin-top: 60px !important; margin-bottom: 60px !important; }
.my-70 { margin-top: 70px !important; margin-bottom: 70px !important; }

.mt-10 { margin-top: 10px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-50 { margin-top: 50px !important; }
.mt-60 { margin-top: 60px !important; }
.mt-70 { margin-top: 70px !important; }

.special-text {
	font-family: 'Times New Roman Regular', serif;
	color: var(--e-global-color-primary);
	font-weight: 700;
}

.icon-list .elementor-icon-list-icon {
    margin: 0;
    height: 25px;
    width: 25px;
    padding: 6px;
    background-color: #b4731b5c;
    border: 1px solid #b4731b80;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
span.elementor-icon-list-icon svg {
    margin: 0!important;
}

/* ---------------------------------------------------------------------------
   Fixed header + scroll-to-white. Add the CSS class "header" to your Elementor
   header section. Transparent over the hero at top; solid white once scrolled.
   The Fullscreen Menu panel opens beneath this (lower z-index).
   ------------------------------------------------------------------------- */
.header {
    position: fixed!important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%!important;
    z-index: 1000!important;
    min-height: 80px!important;
    background-color: transparent;
    will-change: min-height;
}
.header.is-scrolled {
	min-height: 72px!important;
	background-color: rgba(255, 255, 255, .7);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: none;
}

/* Desktop: inset the header content 40px from the left/right edges. */
@media (min-width: 1025px) {
	.header {
		padding-left: 40px!important;
		padding-right: 40px!important;
	}
}

/* The animation itself. !important so Elementor's own section/container rules
   (higher specificity) can't strip the transition and make it snap instantly.
   Applied to the section AND its inner wrappers — in Elementor flexbox
   containers the height/padding lives on .e-con-inner, not the outer element. */
.header,
.header > .elementor-container,
.header > .e-con-inner,
.header .e-con-inner {
	transition:
		min-height .45s cubic-bezier(.4, 0, .2, 1),
		padding .45s cubic-bezier(.4, 0, .2, 1),
		background-color .45s ease,
		box-shadow .45s ease,
		-webkit-backdrop-filter .45s ease,
		backdrop-filter .45s ease,
		color .45s ease !important;
}

/* Trim the inner vertical padding when scrolled so the bar physically shrinks
   even if its height comes from padding rather than min-height. Horizontal
   padding is left untouched. */
.header.is-scrolled > .elementor-container,
.header.is-scrolled > .e-con-inner,
.header.is-scrolled .e-con-inner {
	padding-top: 8px!important;
	padding-bottom: 8px!important;
}

/* Black logo → invert to white while the header is transparent (top of page,
   menu closed). Reverts to its normal black once scrolled or the menu is open. */
.site-logo img,
img.site-logo {
	filter: invert(1);
	transition: filter .35s ease;
}
.header.is-scrolled .site-logo img,
.header.is-scrolled img.site-logo,
.header.rt-fsmenu-elevated .site-logo img,
.header.rt-fsmenu-elevated img.site-logo {
	filter: none;
}

/* Hamburger trigger: white at top (menu closed), black once scrolled or open.
   !important overrides the widget's Trigger Color control. */
.header .rt-fsmenu__trigger {
	color: #fff !important;
	transition: color .35s ease;
}
.header .rt-fsmenu__bars span {
	background-color: #fff !important;
}
.header.is-scrolled .rt-fsmenu__trigger,
.header.rt-fsmenu-elevated .rt-fsmenu__trigger {
	color: #1A1916 !important;
}
.header.is-scrolled .rt-fsmenu__bars span,
.header.rt-fsmenu-elevated .rt-fsmenu__bars span {
	background-color: #1A1916 !important;
}

/* Header left actions (Elementor icon list): white over the hero, black once
   the header is scrolled or the menu is open. SVG icons follow the text color. */
.h-left-actions li.elementor-icon-list-item a,
.h-left-actions li.elementor-icon-list-item a .elementor-icon-list-text {
	color: #fff;
	transition: color .35s ease;
}
.h-left-actions li.elementor-icon-list-item a svg { fill: currentColor; }

.header.is-scrolled .h-left-actions li.elementor-icon-list-item a,
.header.is-scrolled .h-left-actions li.elementor-icon-list-item a .elementor-icon-list-text,
.header.rt-fsmenu-elevated .h-left-actions li.elementor-icon-list-item a,
.header.rt-fsmenu-elevated .h-left-actions li.elementor-icon-list-item a .elementor-icon-list-text {
	color: #1A1916;
}

/* Mobile: hide the header left-actions list entirely — those actions are
   available at the bottom of the fullscreen menu panel instead. */
@media (max-width: 767px) {
	.h-left-actions {
		display: none !important;
	}
}

/* Offset the fixed header + menu panel by the WordPress admin bar height
   (only shows for logged-in users). 32px desktop, 46px on small screens. */
.admin-bar .header,
.admin-bar .rt-fsmenu__overlay {
	top: 32px;
}
@media screen and (max-width: 782px) {
	.admin-bar .header,
	.admin-bar .rt-fsmenu__overlay {
		top: 46px;
	}
}