.elementor-146742 .elementor-element.elementor-element-8f03782{--display:flex;--position:absolute;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;top:0px;}body:not(.rtl) .elementor-146742 .elementor-element.elementor-element-8f03782{left:0px;}body.rtl .elementor-146742 .elementor-element.elementor-element-8f03782{right:0px;}.elementor-146742 .elementor-element.elementor-element-30ad829{--display:flex;}.elementor-146742 .elementor-element.elementor-element-98b8c8a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:26px 26px 26px 26px;--padding-top:0px;--padding-bottom:0px;--padding-left:30px;--padding-right:30px;}.elementor-146742 .elementor-element.elementor-element-98b8c8a:not(.elementor-motion-effects-element-type-background), .elementor-146742 .elementor-element.elementor-element-98b8c8a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#BCC6CF30;}.elementor-146742 .elementor-element.elementor-element-d6408bd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-146742 .elementor-element.elementor-element-fd8858a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-146742 .elementor-element.elementor-element-d180c9e{text-align:center;}.elementor-146742 .elementor-element.elementor-element-d180c9e img{max-width:53%;}.elementor-146742 .elementor-element.elementor-element-5fd6cb9{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-end;}.elementor-146742 .elementor-element.elementor-element-e97157d .menu-item a.hfe-menu-item{padding-left:7px;padding-right:7px;}.elementor-146742 .elementor-element.elementor-element-e97157d .menu-item a.hfe-sub-menu-item{padding-left:calc( 7px + 20px );padding-right:7px;}.elementor-146742 .elementor-element.elementor-element-e97157d .hfe-nav-menu__layout-vertical .menu-item ul ul a.hfe-sub-menu-item{padding-left:calc( 7px + 40px );padding-right:7px;}.elementor-146742 .elementor-element.elementor-element-e97157d .hfe-nav-menu__layout-vertical .menu-item ul ul ul a.hfe-sub-menu-item{padding-left:calc( 7px + 60px );padding-right:7px;}.elementor-146742 .elementor-element.elementor-element-e97157d .hfe-nav-menu__layout-vertical .menu-item ul ul ul ul a.hfe-sub-menu-item{padding-left:calc( 7px + 80px );padding-right:7px;}.elementor-146742 .elementor-element.elementor-element-e97157d .menu-item a.hfe-menu-item, .elementor-146742 .elementor-element.elementor-element-e97157d .menu-item a.hfe-sub-menu-item{padding-top:15px;padding-bottom:15px;}body:not(.rtl) .elementor-146742 .elementor-element.elementor-element-e97157d .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li.menu-item:not(:last-child){margin-right:11px;}body.rtl .elementor-146742 .elementor-element.elementor-element-e97157d .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li.menu-item:not(:last-child){margin-left:11px;}.elementor-146742 .elementor-element.elementor-element-e97157d nav:not(.hfe-nav-menu__layout-horizontal) .hfe-nav-menu > li.menu-item:not(:last-child){margin-bottom:11px;}.elementor-146742 .elementor-element.elementor-element-e97157d ul.sub-menu{width:220px;}.elementor-146742 .elementor-element.elementor-element-e97157d .sub-menu a.hfe-sub-menu-item,
						 .elementor-146742 .elementor-element.elementor-element-e97157d nav.hfe-dropdown li a.hfe-menu-item,
						 .elementor-146742 .elementor-element.elementor-element-e97157d nav.hfe-dropdown li a.hfe-sub-menu-item,
						 .elementor-146742 .elementor-element.elementor-element-e97157d nav.hfe-dropdown-expandible li a.hfe-menu-item,
						 .elementor-146742 .elementor-element.elementor-element-e97157d nav.hfe-dropdown-expandible li a.hfe-sub-menu-item{padding-top:15px;padding-bottom:15px;}.elementor-146742 .elementor-element.elementor-element-e97157d{width:100%;max-width:100%;}.elementor-146742 .elementor-element.elementor-element-e97157d .hfe-nav-menu__toggle{margin:0 auto;}.elementor-146742 .elementor-element.elementor-element-e97157d a.hfe-menu-item, .elementor-146742 .elementor-element.elementor-element-e97157d a.hfe-sub-menu-item{font-family:"Poppins", Sans-serif;font-size:16px;text-transform:uppercase;letter-spacing:1px;word-spacing:0px;}.elementor-146742 .elementor-element.elementor-element-e97157d .menu-item a.hfe-menu-item, .elementor-146742 .elementor-element.elementor-element-e97157d .sub-menu a.hfe-sub-menu-item{color:#4D4D4D;}.elementor-146742 .elementor-element.elementor-element-e97157d .sub-menu,
								.elementor-146742 .elementor-element.elementor-element-e97157d nav.hfe-dropdown,
								.elementor-146742 .elementor-element.elementor-element-e97157d nav.hfe-dropdown-expandible,
								.elementor-146742 .elementor-element.elementor-element-e97157d nav.hfe-dropdown .menu-item a.hfe-menu-item,
								.elementor-146742 .elementor-element.elementor-element-e97157d nav.hfe-dropdown .menu-item a.hfe-sub-menu-item{background-color:#fff;}.elementor-146742 .elementor-element.elementor-element-e97157d .sub-menu li.menu-item:not(:last-child),
						.elementor-146742 .elementor-element.elementor-element-e97157d nav.hfe-dropdown li.menu-item:not(:last-child),
						.elementor-146742 .elementor-element.elementor-element-e97157d nav.hfe-dropdown-expandible li.menu-item:not(:last-child){border-bottom-style:solid;border-bottom-color:#c4c4c4;border-bottom-width:1px;}.elementor-146742 .elementor-element.elementor-element-7092429{--display:flex;--position:absolute;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;top:0px;}body:not(.rtl) .elementor-146742 .elementor-element.elementor-element-7092429{left:0px;}body.rtl .elementor-146742 .elementor-element.elementor-element-7092429{right:0px;}.elementor-146742 .elementor-element.elementor-element-0278739{--display:flex;}.elementor-146742 .elementor-element.elementor-element-6181c79{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:26px 26px 26px 26px;--padding-top:0px;--padding-bottom:0px;--padding-left:30px;--padding-right:30px;}.elementor-146742 .elementor-element.elementor-element-6181c79:not(.elementor-motion-effects-element-type-background), .elementor-146742 .elementor-element.elementor-element-6181c79 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#BCC6CF30;}.elementor-146742 .elementor-element.elementor-element-2a8ec93{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-146742 .elementor-element.elementor-element-4024490{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-146742 .elementor-element.elementor-element-6609a5a{text-align:center;}.elementor-146742 .elementor-element.elementor-element-6609a5a img{max-width:53%;}.elementor-146742 .elementor-element.elementor-element-d797924{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-end;}.elementor-146742 .elementor-element.elementor-element-8172834 .hfe-nav-menu__toggle,
						.elementor-146742 .elementor-element.elementor-element-8172834 .hfe-nav-menu-icon{margin:0 auto;justify-content:center;}.elementor-146742 .elementor-element.elementor-element-8172834 li.menu-item a{justify-content:space-between;}.elementor-146742 .elementor-element.elementor-element-8172834 li.hfe-button-wrapper{text-align:space-between;}.elementor-146742 .elementor-element.elementor-element-8172834.hfe-menu-item-flex-end li.hfe-button-wrapper{text-align:right;}.elementor-146742 .elementor-element.elementor-element-8172834 .hfe-flyout-wrapper .hfe-side{width:300px;}.elementor-146742 .elementor-element.elementor-element-8172834 .hfe-flyout-open.left{left:-300px;}.elementor-146742 .elementor-element.elementor-element-8172834 .hfe-flyout-open.right{right:-300px;}.elementor-146742 .elementor-element.elementor-element-8172834 .hfe-flyout-content{padding:30px;background-color:#FFFFFF;}.elementor-146742 .elementor-element.elementor-element-8172834 .menu-item a.hfe-menu-item{padding-left:7px;padding-right:7px;}.elementor-146742 .elementor-element.elementor-element-8172834 .menu-item a.hfe-sub-menu-item{padding-left:calc( 7px + 20px );padding-right:7px;}.elementor-146742 .elementor-element.elementor-element-8172834 .hfe-nav-menu__layout-vertical .menu-item ul ul a.hfe-sub-menu-item{padding-left:calc( 7px + 40px );padding-right:7px;}.elementor-146742 .elementor-element.elementor-element-8172834 .hfe-nav-menu__layout-vertical .menu-item ul ul ul a.hfe-sub-menu-item{padding-left:calc( 7px + 60px );padding-right:7px;}.elementor-146742 .elementor-element.elementor-element-8172834 .hfe-nav-menu__layout-vertical .menu-item ul ul ul ul a.hfe-sub-menu-item{padding-left:calc( 7px + 80px );padding-right:7px;}.elementor-146742 .elementor-element.elementor-element-8172834 .menu-item a.hfe-menu-item, .elementor-146742 .elementor-element.elementor-element-8172834 .menu-item a.hfe-sub-menu-item{padding-top:15px;padding-bottom:15px;}body:not(.rtl) .elementor-146742 .elementor-element.elementor-element-8172834 .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li.menu-item:not(:last-child){margin-right:11px;}body.rtl .elementor-146742 .elementor-element.elementor-element-8172834 .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li.menu-item:not(:last-child){margin-left:11px;}.elementor-146742 .elementor-element.elementor-element-8172834 nav:not(.hfe-nav-menu__layout-horizontal) .hfe-nav-menu > li.menu-item:not(:last-child){margin-bottom:11px;}.elementor-146742 .elementor-element.elementor-element-8172834 .sub-menu a.hfe-sub-menu-item,
						 .elementor-146742 .elementor-element.elementor-element-8172834 nav.hfe-dropdown li a.hfe-menu-item,
						 .elementor-146742 .elementor-element.elementor-element-8172834 nav.hfe-dropdown li a.hfe-sub-menu-item,
						 .elementor-146742 .elementor-element.elementor-element-8172834 nav.hfe-dropdown-expandible li a.hfe-menu-item,
						 .elementor-146742 .elementor-element.elementor-element-8172834 nav.hfe-dropdown-expandible li a.hfe-sub-menu-item{padding-top:15px;padding-bottom:15px;}.elementor-146742 .elementor-element.elementor-element-8172834{width:100%;max-width:100%;}.elementor-146742 .elementor-element.elementor-element-8172834 a.hfe-menu-item, .elementor-146742 .elementor-element.elementor-element-8172834 a.hfe-sub-menu-item{font-family:"Poppins", Sans-serif;font-size:16px;text-transform:uppercase;letter-spacing:1px;word-spacing:0px;}.elementor-146742 .elementor-element.elementor-element-8172834 .menu-item a.hfe-menu-item, .elementor-146742 .elementor-element.elementor-element-8172834 .sub-menu a.hfe-sub-menu-item{color:#4D4D4D;}.elementor-146742 .elementor-element.elementor-element-8172834 .sub-menu,
								.elementor-146742 .elementor-element.elementor-element-8172834 nav.hfe-dropdown,
								.elementor-146742 .elementor-element.elementor-element-8172834 nav.hfe-dropdown-expandible,
								.elementor-146742 .elementor-element.elementor-element-8172834 nav.hfe-dropdown .menu-item a.hfe-menu-item,
								.elementor-146742 .elementor-element.elementor-element-8172834 nav.hfe-dropdown .menu-item a.hfe-sub-menu-item{background-color:#fff;}.elementor-146742 .elementor-element.elementor-element-8172834 .sub-menu li.menu-item:not(:last-child),
						.elementor-146742 .elementor-element.elementor-element-8172834 nav.hfe-dropdown li.menu-item:not(:last-child),
						.elementor-146742 .elementor-element.elementor-element-8172834 nav.hfe-dropdown-expandible li.menu-item:not(:last-child){border-bottom-style:solid;border-bottom-color:#c4c4c4;border-bottom-width:1px;}.elementor-146742 .elementor-element.elementor-element-8172834 .hfe-flyout-close{color:#7A7A7A;}.elementor-146742 .elementor-element.elementor-element-8172834 .hfe-flyout-close svg{fill:#7A7A7A;}@media(max-width:1024px){body:not(.rtl) .elementor-146742 .elementor-element.elementor-element-e97157d.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li.menu-item:not(:last-child){margin-right:0px;}body .elementor-146742 .elementor-element.elementor-element-e97157d nav.hfe-nav-menu__layout-vertical .hfe-nav-menu > li.menu-item:not(:last-child){margin-bottom:0px;}body:not(.rtl) .elementor-146742 .elementor-element.elementor-element-8172834.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li.menu-item:not(:last-child){margin-right:0px;}body .elementor-146742 .elementor-element.elementor-element-8172834 nav.hfe-nav-menu__layout-vertical .hfe-nav-menu > li.menu-item:not(:last-child){margin-bottom:0px;}}@media(min-width:768px){.elementor-146742 .elementor-element.elementor-element-30ad829{--content-width:1240px;}.elementor-146742 .elementor-element.elementor-element-d6408bd{--width:5%;}.elementor-146742 .elementor-element.elementor-element-fd8858a{--width:14%;}.elementor-146742 .elementor-element.elementor-element-5fd6cb9{--width:75%;}.elementor-146742 .elementor-element.elementor-element-0278739{--content-width:1240px;}.elementor-146742 .elementor-element.elementor-element-2a8ec93{--width:5%;}.elementor-146742 .elementor-element.elementor-element-4024490{--width:14%;}.elementor-146742 .elementor-element.elementor-element-d797924{--width:75%;}}@media(max-width:767px){.elementor-146742 .elementor-element.elementor-element-98b8c8a{--padding-top:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}.elementor-146742 .elementor-element.elementor-element-d6408bd{--width:20%;}.elementor-146742 .elementor-element.elementor-element-fd8858a{--width:56%;--justify-content:center;}.elementor-146742 .elementor-element.elementor-element-d180c9e img{max-width:35%;}.elementor-146742 .elementor-element.elementor-element-5fd6cb9{--width:23%;}body:not(.rtl) .elementor-146742 .elementor-element.elementor-element-e97157d.hfe-nav-menu__breakpoint-mobile .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li.menu-item:not(:last-child){margin-right:0px;}body .elementor-146742 .elementor-element.elementor-element-e97157d nav.hfe-nav-menu__layout-vertical .hfe-nav-menu > li.menu-item:not(:last-child){margin-bottom:0px;}.elementor-146742 .elementor-element.elementor-element-6181c79{--padding-top:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}.elementor-146742 .elementor-element.elementor-element-2a8ec93{--width:20%;}.elementor-146742 .elementor-element.elementor-element-4024490{--width:56%;--justify-content:center;}.elementor-146742 .elementor-element.elementor-element-6609a5a img{max-width:35%;}.elementor-146742 .elementor-element.elementor-element-d797924{--width:23%;}body:not(.rtl) .elementor-146742 .elementor-element.elementor-element-8172834.hfe-nav-menu__breakpoint-mobile .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li.menu-item:not(:last-child){margin-right:0px;}body .elementor-146742 .elementor-element.elementor-element-8172834 nav.hfe-nav-menu__layout-vertical .hfe-nav-menu > li.menu-item:not(:last-child){margin-bottom:0px;}}/* Start custom CSS for html, class: .elementor-element-35f1fbe *//* ==========================================================================
   1. TRIGGER BUTTON & IMAGE ICON
   ========================================================================== */
.drawer-trigger-btn {
  background: transparent;
  border: none;
  border-radius: 12px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-trigger-btn:hover {
  transform: scale(1.05);
}

.custom-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.drawer-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* ==========================================================================
   2. REUSABLE HIGH-MOTION MATTE BUTTON (.premium-btn)
   ========================================================================== */
.premium-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 22px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 14px;
  background: #09090b; /* Deep matte black base */
  cursor: pointer;
  overflow: hidden;
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  transition: 
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.4s ease;
}

.premium-btn::after {
  content: '→';
  font-size: 18px;
  line-height: 1;
  margin-left: 14px;
  color: rgba(255, 255, 255, 0.8);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.5s ease;
}

.premium-btn::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -150%;
  left: -150%;
  width: 400%;
  height: 400%;
  background: radial-gradient(circle at 30% 30%, #4c1d95 0%, transparent 25%),
              radial-gradient(circle at 70% 60%, #c97d31 0%, transparent 30%),
              radial-gradient(circle at 40% 80%, #0284c7 0%, transparent 30%),
              radial-gradient(circle at 80% 20%, #c97d31 0%, transparent 25%);
  filter: blur(20px);
  opacity: 0.5;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: highMotionLiquid 4s infinite linear;
  transition: opacity 0.4s ease;
}

.premium-btn:hover {
  transform: translateY(-3px) scale(1.02);
  color: #ffffff;
  box-shadow: 
    0 20px 40px -15px rgba(91, 33, 182, 0.35),
    0 20px 40px -15px rgba(201, 125, 49, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

.premium-btn:hover::before {
  opacity: 0.95;
  animation-duration: 2s; /* Kinetic speed acceleration on hover */
}

.premium-btn:hover::after {
  animation: arrowTeleport 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.premium-btn:active {
  transform: translateY(-1px) scale(0.99);
}

/* ==========================================================================
   3. SIDE DRAWER LAYOUT & ANIMATION CANVAS
   ========================================================================== */
.premium-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: flex;
  pointer-events: none; /* Allows back-clicks when sidebar is fully closed */
  visibility: hidden;   /* Fix: Prevents layout interaction when closed */
  transition: visibility 0.6s step-end; /* Syncs structural toggle with animation curve */
}

/* Inner Text Sidebar Container */
.drawer-content {
  width: 380px;
  height: 100%;
  background: #141416; /* Clean premium charcoal canvas */
  padding: 64px 48px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transform: translateX(-100%); /* Keeps drawer fully offscreen initially */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
  box-shadow: 20px 0 60px rgba(0, 0, 0, 0.4);
}

/* Right Close Track / Dimmer Panel */
.drawer-close-pane {
  flex-grow: 1;
  height: 100%;
  border: none;
  background: rgba(9, 9, 11, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  position: relative;
  overflow: hidden;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.6s ease;
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

/* Infusing the liquid energy movement directly onto the close background track */
.drawer-close-pane::before {
  content: '';
  position: absolute;
  top: -150%;
  left: -150%;
  width: 400%;
  height: 400%;
  background: radial-gradient(circle at 30% 30%, #4c1d95 0%, transparent 25%),
              radial-gradient(circle at 70% 60%, #c97d31 0%, transparent 30%),
              radial-gradient(circle at 40% 80%, #0284c7 0%, transparent 30%);
  filter: blur(40px);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 0.8s ease;
  animation: highMotionLiquid 8s infinite linear;
}

/* Vertical Close Text Identifier */
.close-text {
  position: relative;
  z-index: 2;
  color: rgba(255, 255, 255, 0.7);
  font-family: system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  writing-mode: vertical-rl; /* Matches layout configuration in screenshot */
  padding: 40px 24px;
  transition: color 0.3s ease;
}

.drawer-close-pane:hover .close-text {
  color: #ffffff;
}

/* ==========================================================================
   4. ACTIVE DRAWER TRANSITION TARGETS
   ========================================================================== */
.premium-drawer.is-open {
  pointer-events: auto;
  visibility: visible; /* Activates wrapper when interactive classes are appended */
  transition: visibility 0s step-start;
}

.premium-drawer.is-open .drawer-content {
  transform: translateX(0); /* Clean architectural slide entry */
}

.premium-drawer.is-open .drawer-close-pane {
  opacity: 1;
}

.premium-drawer.is-open .drawer-close-pane::before {
  opacity: 0.35; /* Fades color in softly upon expansion */
}

/* ==========================================================================
   5. INTERNAL MENU CONTENT TYPOGRAPHY
   ========================================================================== */
.drawer-logo {
font-size: 38px;
    font-weight: 300;
    letter-spacing: 3px;
    color: #ffffff;
    margin-bottom: 42px;
    font-family: "Poppins", Sans-serif;
}

.drawer-section h3 {
font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #71717a;
    margin-bottom: 24px;
    font-family: "Poppins", Sans-serif;
}

.drawer-section p, .drawer-section a {
    font-family: "Poppins", Sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #e4e4e7;
  text-decoration: none;
}

.phone-links, .email-link {
  display: block;
  margin-top: 28px;
}

.email-link {
  border-bottom: 1px solid #c97d31; /* Accent anchor matching your primary theme hex */
  display: inline-block;
  transition: color 0.3s ease;
}

.email-link:hover {
  color: #ffffff;
}

.drawer-content .premium-btn {
  margin-top: auto; /* Solidifies placement at footer baseline area */
  width: 100%;
}

.drawer-socials {
  display: flex;
  gap: 28px;
  margin-top: 48px;
}

.drawer-socials a {
  color: #71717a;
  font-size: 15px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.drawer-socials a:hover {
  color: #c97d31;
  transform: translateY(-2px);
}

/* ==========================================================================
   6. GLOBAL KEYFRAMES INTERACTION SYSTEMS
   ========================================================================== */
@keyframes highMotionLiquid {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-12%, -12%) rotate(180deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes arrowTeleport {
  0% { transform: translateX(0px); opacity: 1; }
  30% { transform: translateX(20px); opacity: 0; }
  31% { transform: translateX(-20px); opacity: 0; }
  100% { transform: translateX(0px); opacity: 1; color: #ffffff; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-12a0e18 *//* ==========================================================================
   1. TRIGGER BUTTON & IMAGE ICON
   ========================================================================== */
.drawer-trigger-btn {
  background: transparent;
  border: none;
  border-radius: 12px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-trigger-btn:hover {
  transform: scale(1.05);
}

.custom-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.drawer-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* ==========================================================================
   2. REUSABLE HIGH-MOTION MATTE BUTTON (.premium-btn)
   ========================================================================== */
.premium-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 22px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 14px;
  background: #09090b; /* Deep matte black base */
  cursor: pointer;
  overflow: hidden;
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  transition: 
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.4s ease;
}

.premium-btn::after {
  content: '→';
  font-size: 18px;
  line-height: 1;
  margin-left: 14px;
  color: rgba(255, 255, 255, 0.8);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.5s ease;
}

.premium-btn::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -150%;
  left: -150%;
  width: 400%;
  height: 400%;
  background: radial-gradient(circle at 30% 30%, #4c1d95 0%, transparent 25%),
              radial-gradient(circle at 70% 60%, #c97d31 0%, transparent 30%),
              radial-gradient(circle at 40% 80%, #0284c7 0%, transparent 30%),
              radial-gradient(circle at 80% 20%, #c97d31 0%, transparent 25%);
  filter: blur(20px);
  opacity: 0.5;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: highMotionLiquid 4s infinite linear;
  transition: opacity 0.4s ease;
}

.premium-btn:hover {
  transform: translateY(-3px) scale(1.02);
  color: #ffffff;
  box-shadow: 
    0 20px 40px -15px rgba(91, 33, 182, 0.35),
    0 20px 40px -15px rgba(201, 125, 49, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

.premium-btn:hover::before {
  opacity: 0.95;
  animation-duration: 2s; /* Kinetic speed acceleration on hover */
}

.premium-btn:hover::after {
  animation: arrowTeleport 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.premium-btn:active {
  transform: translateY(-1px) scale(0.99);
}

/* ==========================================================================
   3. SIDE DRAWER LAYOUT & ANIMATION CANVAS
   ========================================================================== */
.premium-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: flex;
  pointer-events: none; /* Allows back-clicks when sidebar is fully closed */
  visibility: hidden;   /* Fix: Prevents layout interaction when closed */
  transition: visibility 0.6s step-end; /* Syncs structural toggle with animation curve */
}

/* Inner Text Sidebar Container */
.drawer-content {
  width: 380px;
  height: 100%;
  background: #141416; /* Clean premium charcoal canvas */
  padding: 64px 48px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transform: translateX(-100%); /* Keeps drawer fully offscreen initially */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
  box-shadow: 20px 0 60px rgba(0, 0, 0, 0.4);
}

/* Right Close Track / Dimmer Panel */
.drawer-close-pane {
  flex-grow: 1;
  height: 100%;
  border: none;
  background: rgba(9, 9, 11, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  position: relative;
  overflow: hidden;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.6s ease;
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

/* Infusing the liquid energy movement directly onto the close background track */
.drawer-close-pane::before {
  content: '';
  position: absolute;
  top: -150%;
  left: -150%;
  width: 400%;
  height: 400%;
  background: radial-gradient(circle at 30% 30%, #4c1d95 0%, transparent 25%),
              radial-gradient(circle at 70% 60%, #c97d31 0%, transparent 30%),
              radial-gradient(circle at 40% 80%, #0284c7 0%, transparent 30%);
  filter: blur(40px);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 0.8s ease;
  animation: highMotionLiquid 8s infinite linear;
}

/* Vertical Close Text Identifier */
.close-text {
  position: relative;
  z-index: 2;
  color: rgba(255, 255, 255, 0.7);
  font-family: system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  writing-mode: vertical-rl; /* Matches layout configuration in screenshot */
  padding: 40px 24px;
  transition: color 0.3s ease;
}

.drawer-close-pane:hover .close-text {
  color: #ffffff;
}

/* ==========================================================================
   4. ACTIVE DRAWER TRANSITION TARGETS
   ========================================================================== */
.premium-drawer.is-open {
  pointer-events: auto;
  visibility: visible; /* Activates wrapper when interactive classes are appended */
  transition: visibility 0s step-start;
}

.premium-drawer.is-open .drawer-content {
  transform: translateX(0); /* Clean architectural slide entry */
}

.premium-drawer.is-open .drawer-close-pane {
  opacity: 1;
}

.premium-drawer.is-open .drawer-close-pane::before {
  opacity: 0.35; /* Fades color in softly upon expansion */
}

/* ==========================================================================
   5. INTERNAL MENU CONTENT TYPOGRAPHY
   ========================================================================== */
.drawer-logo {
font-size: 38px;
    font-weight: 300;
    letter-spacing: 3px;
    color: #ffffff;
    margin-bottom: 42px;
    font-family: "Poppins", Sans-serif;
}

.drawer-section h3 {
font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #71717a;
    margin-bottom: 24px;
    font-family: "Poppins", Sans-serif;
}

.drawer-section p, .drawer-section a {
    font-family: "Poppins", Sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #e4e4e7;
  text-decoration: none;
}

.phone-links, .email-link {
  display: block;
  margin-top: 28px;
}

.email-link {
  border-bottom: 1px solid #c97d31; /* Accent anchor matching your primary theme hex */
  display: inline-block;
  transition: color 0.3s ease;
}

.email-link:hover {
  color: #ffffff;
}

.drawer-content .premium-btn {
  margin-top: auto; /* Solidifies placement at footer baseline area */
  width: 100%;
}

.drawer-socials {
  display: flex;
  gap: 28px;
  margin-top: 48px;
}

.drawer-socials a {
  color: #71717a;
  font-size: 15px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.drawer-socials a:hover {
  color: #c97d31;
  transform: translateY(-2px);
}

/* ==========================================================================
   6. GLOBAL KEYFRAMES INTERACTION SYSTEMS
   ========================================================================== */
@keyframes highMotionLiquid {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-12%, -12%) rotate(180deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes arrowTeleport {
  0% { transform: translateX(0px); opacity: 1; }
  30% { transform: translateX(20px); opacity: 0; }
  31% { transform: translateX(-20px); opacity: 0; }
  100% { transform: translateX(0px); opacity: 1; color: #ffffff; }
}/* End custom CSS */