.elementor-kit-6{--e-global-color-primary:#3B3B3B;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#202020;--e-global-typography-primary-font-family:"Fk";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Fk";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Fk";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Fk";--e-global-typography-accent-font-weight:500;background-color:#000000;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1366px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:300px;}.e-con{--container-max-width:300px;}}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */.css-shrink-header{
  height:130px;
  padding-top: 30px;
  overflow: relative;
  transition: height 0.6s cubic-bezier(.4,0,.2,1);
}


/* default icon style */
.elementor-element-47ec7a2 { fill: black !important; transition: color .15s ease, filter .15s ease; }

/* when overlapping a trigger, invert with blend or color change */
.elementor-element-47ec7a2.icon-inverted {
  mix-blend-mode: difference;
  color: white; /* keep white as base; difference will flip it */
}

/* fallback: if mix-blend-mode not ideal, use a color swap */
.elementor-element-47ec7a2.icon-inverted.fallback {
  color: black;
}


.videoplaybuttonn {
    z-index: 99;
    background-color:#fff0;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}







/*----------------------------------------------*/
html, body, * {
  cu/rsor: none !important;
}

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 100%;
  border: 1px solid #fff9;
  background: rgba(255, 255, 255, 0.3);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(var(--cursor-scale, 1));
  transition:
    width 0.3s ease,
    height 0.3s ease,
    border-radius 0.3s ease,
    background 0.3s ease,
    border 0.3s ease,
    transform 0.12s ease;
    
  z-index: 99999999999999;
}



/* click scale */
.custom-cursor.cursor-clicked {
  --cursor-click-scale: 0.7;
}

.hover-target {
  position: relative;
  z-index: 1;
}




/* Normal inside white section */
.cursor-locked {
  background: #0000004d !important;
  border: 1px solid #00000080 !important;
}

/* Hover inside white section = transparent bg */
.cursor-locked.hovering {
  background: rgba(0,0,0,0) !important;
  border: 1px solid #00000000 !important;
}


/*header2 logo icon blur*/
.elementor-element-1f3c3db.elementor-view-default .elementor-icon {
    filter: blur(0.35px);
}



@media (hover: hover) and (pointer: fine) {
  .magnetic {
    display: inline-block;
    transition: transform 0.25s ease-out;
    will-change: transform;
    transform-origin: center center;
    cursor: pointer;
  }
}


.jet1 {
  display: inline-block;
  transition: transform 0.25s ease-out;
  will-change: transform;
  transform-origin: center center;
  cursor: pointer;
}


/* Remove blue tap highlight on mobile & tablet */
@media (hover: none) {
  * {
    -webkit-tap-highlight-color: transparent;
  }
}


/* Hide scrollbar but keep scroll */
::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, Opera */
}

html, body {
  -ms-overflow-style: none;  /* For Internet Explorer & Edge */
  scrollbar-width: none;     /* For Firefox */
}
/* Keep normal arrow on text */
body, p, span, h1, h2, h3, h4, h5, h6 {
  cursor: default;
}


/* Style the textarea scrollbar */
textarea::-webkit-scrollbar {
  width: 8px;
}

/* Scrollbar track (background) */
textarea::-webkit-scrollbar-track {
  background: #00000000; /* blue background */
  border-radius: 50px;
}

/* Scrollbar thumb (the draggable part) */
textarea::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  border: 2px solid #; /* adds border blending with blue track */
  transition: background 0.3s ease;
}

/* Hover effect on thumb */
textarea::-webkit-scrollbar-thumb:hover {
  background-color: #00000000;
}

/* For Firefox */
textarea {
  scrollbar-width: thin;
  scrollbar-color: rgba() #;
}


.gradient-blur.active {
  position: fixed;
  top: 100%;
  z-index: 5;
  inset: 0 0 auto 0;
  height: 20%;
  pointer-events: none;
}

.gradient-blur.active > div,
.gradient-blur.active::after,
.gradient-blur.active::before {
  position: absolute;
  inset: 0;
}

.gradient-blur.active::before {
  content: "";
  z-index: 1;
  backdrop-filter: blur(0.5px);
  mask: linear-gradient(
    to top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 12.5%,
    rgba(0, 0, 0, 1) 25%,
    rgba(0, 0, 0, 0) 37.5%
  );
}



@media (min-width: 1025px) {
  .gradient-blur.active {
    position: fixed;
    top: 100%;
    z-index: 5;
    inset: 0 0 auto 0;
    height: 20%;
    pointer-events: none;
  }

  .gradient-blur.active > div,
  .gradient-blur.active::after,
  .gradient-blur.active::before {
    position: absolute;
    inset: 0;
  }

  .gradient-blur.active::before {
    content: "";
    z-index: 1;
    backdrop-filter: blur(0.5px);
    mask: linear-gradient(
      to top,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 1) 12.5%,
      rgba(0, 0, 0, 1) 25%,
      rgba(0, 0, 0, 0) 37.5%
    );
  }
}














/* Fix red flash on tab click */
.e-n-tabs-heading button.e-n-tab-title {
  border-color: #323232 !important; /* Your custom border color */
  transition: border-color 0s ease;
}

/* Prevent focus/active styles from changing color */
.e-n-tabs-heading button.e-n-tab-title:focus,
.e-n-tabs-heading button.e-n-tab-title:active {
  border-color: #323232 !important; /* Same as your active color */
  box-shadow: none !important; /* Optional: removes click glow */
  outline: none !important;
}







/* Normal state */
/.jet-accordion > .jet-accordion__inner > .jet-toggle > .jet-toggle__control {
  border-radius: 12px 12px 12px 12px; /* top-left, top-right, bottom-right, bottom-left */
  transhition: border-radius 0.3s ease;
}

/* Hover on non-active */
/.jet-accordion > .jet-accordion__inner > .jet-toggle:not(.active) > .jet-toggle__control:hover {
  border-radius: 12px !important; /* all corners rounded */
}

/* Active (clicked/opened) state */
/.jet-accordion > .jet-accordion__inner > .jet-toggle.active > .jet-toggle__control {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  /* keep top corners rounded */
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}






/*all button border none*/
[type=button], [type=submit], button {
    border: none;
}




.jet-toggle__icon {
    background-color: #00000000 !important;
}

@media (hover: hover) and (pointer: fine) {
    /* Hover → change content BG only */
    .jet-accordion > .jet-accordion__inner > .jet-toggle > .jet-toggle__content:hover
  ~ .jet-toggle__control,
  .jet-accordion > .jet-accordion__inner > .jet-toggle > .jet-toggle__control:hover + .jet-toggle__content {
    background-color: #EFEEEC1A !important;
      
  }
}

/* Do NOT touch height or "all" transition — ONLY bg */
.jet-accordion > .jet-accordion__inner > .jet-toggle > .jet-toggle__content {
    trjansition: background-color 0.3s ease !important;
}


@media (hover: hover) and (pointer: fine) {
  .elementor-7153 .elementor-element.elementor-element-291889e 
  .jet-accordion > .jet-accordion__inner > .jet-toggle > 
  .jet-toggle__control:hover {
    background-color: #EFEEEC1A;
    border-style: none;
  }
}




/* ===============================
   DESKTOP ONLY (PC / Mouse)
   =============================== */
@media (hover: hover) and (pointer: fine) {

  /* --- Smooth transition for both control & content --- */
  .jet-accordion .jet-toggle .jet-toggle__control,
  .jet-accordion .jet-toggle .jet-toggle__content > *,
  .jet-accordion .jet-toggle .jet-toggle__content > .elementor > * {
    transition: padding-left 0.25s ease, padding-right 0.25s ease, opacity 0.25s ease, filter 0.25s ease !important;
  }

  /* --- Hover effect --- */
  .jet-accordion .jet-toggle:hover > .jet-toggle__control,
  .jet-accordion .jet-toggle:hover .jet-toggle__content > *,
  .jet-accordion .jet-toggle:hover .jet-toggle__content > .elementor > * {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Blur all items */
  .jet-accordion:hover .jet-toggle__control,
  .jet-accordion:hover .jet-toggle__content-inner {
    opacity: 0.56;
    filter: blur(0.6px);
  }
  
  /* Keep hovered item sharp */
  .jet-accordion:hover .jet-toggle:hover .jet-toggle__control,
  .jet-accordion:hover .jet-toggle:hover .jet-toggle__content-inner {
    opacity: 1;
    filter: blur(0);
  }
}

/* --- Keep JetAccordion’s default open/close animation (ALL DEVICES) --- */
.jet-accordion .jet-toggle .jet-toggle__content {
  overflow: hidden;
  box-sizing: border-box;
}



/* ===============================
   Jet Accordion hover blur effect
   =============================== */



  










/* Header wrapper */
.header_container {
  position: relative;
}

/* Background blur overlay (affects background only) */
.header_container::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  backdrop-filter: blur(0px);
  transition: backdrop-filter 0.35s ease;
  z-index: 1; /* below menu items */
}

/* Activate background blur when JS adds class */
.header_container.blur-active::before {
  backdrop-filter: blur(0px); /* background blur strength */
}

/* Menu items: base */
.menu-item {
  position: relative;
  z-index: 2; /* above the background overlay */
  transition: filter 0.25s ease, transform 0.2s ease;
}

/* Blur all menu items except the hovered one (class .hovered is managed by JS) */
.header_container.blur-active .menu-item:not(.hovered) {
  filter: blur(1px); /* blur those items */
  pointer-events: none; /* optional: avoid interaction with blurred items while an item is hovered */
}

/* Keep the hovered item sharp and on top */
.menu-item.hovered,
.menu-item:hover {
  filter: none !important;
  -webkit-filter: none !important;
  z-index: 999999999 !important;
  pointer-events: auto;
  transform: translateZ(0); /* avoid subpixel artefacts */
}

/* Accessibility: when focused via keyboard, treat like hovered */
.menu-item:focus {
  outline: none;
}














/* Add transition to heading (normal + sticky) */
.elementor-element-085a497 .elementor-heading-title {
    transition: filter .5s ease !important;
    will-change: filter;
}

/* Hover animation for normal header */
.elementor-element-085a497 .elementor-heading-title:hover {
    animation: blurThenClear .5s ease forwards !important;
}

/* Hover animation for DTIcy sticky cloned header */
.dticy-header-sticky .elementor-element-085a497 .elementor-heading-title:hover {
    animation: blurThenClear .5s ease forwards !important;
}

/* Blur animation */
@keyframes blurThenClear {
    0% { filter: none; }
    50% { filter: blur(3px); }
    100% { filter: none; }
}









.elementor-7153 .elementor-element.elementor-element-28869b2:not(.elementor-motion-effects-element-type-background), .elementor-7153 .elementor-element.elementor-element-28869b2 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-color: transparent;
  background-image: radial-gradient(circle farthest-side at 80% 60%,#f3f4f4,#92989a 60%);
}
	 




/* hemburger icon */

#mynav {
    position: absolute;
    top: 0!important;
    right:0!important;
}

#nav-icon {
  width: 26px;
  height: 19px;
  margin-top: -8px;
  padding:0!important;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}
#nav-icon span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: white;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
#nav-icon span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}
#nav-icon span:nth-child(2) {
  top: 8px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}
#nav-icon span:nth-child(3) {
  top: 16px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}
#nav-icon.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -2px;
  left: 0px;
}
#nav-icon.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}
#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 16px;
  left: 0px;
}








.bottom_sticky_header {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  transition: all .3s ease;
}










@media only screen and (max-width: 1024px) {

.bottom-header-gradient-blur {
  position: fixed;
  z-index: 1;
  inset: auto 0 0 0;
  height: 22%;
  pointer-events: none;
}
.bottom-header-gradient-blur > div,
.bottom-header-gradient-blur::before,
.bottom-header-gradient-blur::after {
  position: absolute;
  inset: 0;
}
.bottom-header-gradient-blur::before {
  content: "";
  z-index: 1;
  backdrop-filter: blur(0.5px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 12.5%,
    rgba(0, 0, 0, 1) 25%,
    rgba(0, 0, 0, 0) 37.5%
  );
}
.bottom-header-gradient-blur > div:nth-of-type(1) {
  z-index: 2;
  backdrop-filter: blur(1px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 12.5%,
    rgba(0, 0, 0, 1) 25%,
    rgba(0, 0, 0, 1) 37.5%,
    rgba(0, 0, 0, 0) 50%
  );
}
.bottom-header-gradient-blur > div:nth-of-type(2) {
  z-index: 3;
  backdrop-filter: blur(2px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 25%,
    rgba(0, 0, 0, 1) 37.5%,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0) 62.5%
  );
}
.bottom-header-gradient-blur > div:nth-of-type(3) {
  z-index: 4;
  backdrop-filter: blur(4px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 37.5%,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 1) 62.5%,
    rgba(0, 0, 0, 0) 75%
  );
}
.bottom-header-gradient-blur > div:nth-of-type(4) {
  z-index: 5;
  backdrop-filter: blur(8px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 1) 62.5%,
    rgba(0, 0, 0, 1) 75%,
    rgba(0, 0, 0, 0) 87.5%
  );
}
.bottom-header-gradient-blur > div:nth-of-type(5) {
  z-index: 6;
  backdrop-filter: blur(16px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 62.5%,
    rgba(0, 0, 0, 1) 75%,
    rgba(0, 0, 0, 1) 87.5%,
    rgba(0, 0, 0, 0) 100%
  );
}
.bottom-header-gradient-blur > div:nth-of-type(6) {
  z-index: 7;
  backdrop-filter: blur(32px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 75%,
    rgba(0, 0, 0, 1) 87.5%,
    rgba(0, 0, 0, 1) 100%
  );
}
.bottom-header-gradient-blur::after {
  content: "";
  z-index: 8;
  backdrop-filter: blur(64px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 87.5%,
    rgba(0, 0, 0, 1) 100%
  );
}

}

.bottom-header-gradient-blur {
    position: fixed;
    inset:auto 0 0 0;
    z-index: -1; /* put behind all content */
    pointer-events: none;
}


















/* Replace .blur-heading with your heading's class */
.blur-heading {
    display: inline-block; /* makes the blur fit text size */
    position: relative;
    padding: 10px 20px; /* space around text */
    background: #80808033; /* semi-transparent background */
    backdrop-filter: blur(8px); /* the blur effect */
    -webkit-backdrop-filter: blur(8px); /* Safari support */
}


/* Replace .blur-heading with your heading's class */
.blur-heading2 {
    display: inline-block; /* makes the blur fit text size */
    position: relative;
    padding: 10px 20px; /* space around text */
    background: #80808033; /* semi-transparent background */
    backdrop-filter: blur(8px); /* the blur effect */
    -webkit-backdrop-filter: blur(8px); /* Safari support */
}



/* Replace .blur-heading with your heading's class */
.blurrr-heading {
    background-color: #ffffff1a; /* semi-transparent background */
    backdrop-filter: blur(4px); /* the blur effect */
    -webkit-backdrop-filter: blur(4px); /* Safari support */
    z-index: 0;
}





/*heading line*/
.sticky-header .elementor-element-96a3d0a .elementor-heading-title,
.sticky-header .elementor-element-48b6ccd .elementor-heading-title,
.sticky-header .elementor-element-d313494 .elementor-heading-title {
    color: #EAEEF494 !important;
    border-radius: 5px;
}

.sticky-header.dark-text .elementor-element-96a3d0a .elementor-heading-title,
.sticky-header.dark-text .elementor-element-48b6ccd .elementor-heading-title,
.sticky-header.dark-text .elementor-element-d313494 .elementor-heading-title {
    color: #11111194 !important;
}





/* Default icon color */
.sticky-header 
.elementor-element-354ca8a svg {
    fill: #EAEEF4 !important;   /* Same as your heading default */
}

/* Icon color change inside .heading-color-change section */
.sticky-header.dark-text 
.elementor-element-354ca8a svg {
    fill: #111111 !important;   /* Same as your heading dark color */
}

/* Default icon color for header 2 */
.sticky-header2 
.elementor-element-1f3c3db svg,
.sticky-header2 
.elementor-element-80d1bef svg { 
    fill: #EAEEF4 !important;   /* Same as your heading default */
}

/* Icon color change inside .heading-color-change section */
.sticky-header2.dark-text 
.elementor-element-1f3c3db svg,
.sticky-header2.dark-text 
.elementor-element-80d1bef svg { 
    fill: #111111 !important;   /* Same as your heading dark color */
}




/* Default hamburger line color */
.sticky-header2 .elementor-element-c72afdb .uc_hamburger .uc_line {
    background-color: #EAEEF4;  /* default light line */
}

/* When .dark-text is active → turn lines dark */
.sticky-header2.dark-text .elementor-element-c72afdb .uc_hamburger .uc_line,
.sticky-header2.dark-text .elementor-element-c72afdb .uc_hamburger.is-active .uc_line {
    background-color: #111111 !important;
}

/* Default hamburger line color */
.sticky-header2 .elementor-element-dcab7cf .uc_hamburger .uc_line,
.sticky-header2 .elementor-element-5c19fc2 .uc_hamburger .uc_line {
    background-color: #111111;  /* default light line */
}

/* When .dark-text is active → turn lines dark */
.sticky-header2.dark-text .elementor-element-dcab7cf .uc_hamburger .uc_line,
.sticky-header2.dark-text .elementor-element-5c19fc2 .uc_hamburger .uc_line,
.sticky-header2.dark-text .elementor-element-dcab7cf .uc_hamburger.is-active .uc_line,
.sticky-header2.dark-text .elementor-element-5c19fc2 .uc_hamburger.is-active .uc_line {
    background-color: #111111 !important;
}


/* Button color change when inside target container */
.sticky-header2.dark-text .swap-btn1 {
  background: #111 !important;
  color: #fff;
}

.sticky-header2.dark-text .swap-btn1 .text,
.sticky-header2.dark-text .swap-btn1 .text-hover {
  color: #fff;
}


/* Default state */
.header-icon-white {
  display: block;
}

.header-icon-black {
  display: none;
}

/* Default state 2nd */
.header-icon-white2 {
  display: block;
}

.header-icon-black2 {
  display: none;
}








/*elmentor header 2 popup overlay grediant blur*/

#elementor-popup-modal-12675 .gradient-blur {
  position: fixed;
  z-index: 5;
  inset: auto 0 0 0;
  height: 250%;
  pointer-events: none;
}
#elementor-popup-modal-12675 .gradient-blur > div,
#elementor-popup-modal-12675 .gradient-blur::before,
#elementor-popup-modal-12675 .gradient-blur::after {
  position: absolute;
  inset: 0;
}
#elementor-popup-modal-12675 .gradient-blur::before {
  content: "";
  z-index: 1;
  backdrop-filter: blur(0.5px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 12.5%,
    rgba(0, 0, 0, 1) 25%,
    rgba(0, 0, 0, 0) 37.5%
  );
}
#elementor-popup-modal-12675 .gradient-blur > div:nth-of-type(1) {
  z-index: 2;
  backdrop-filter: blur(1px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 12.5%,
    rgba(0, 0, 0, 1) 25%,
    rgba(0, 0, 0, 1) 37.5%,
    rgba(0, 0, 0, 0) 50%
  );
}
#elementor-popup-modal-12675 .gradient-blur > div:nth-of-type(2) {
  z-index: 3;
  backdrop-filter: blur(2px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 25%,
    rgba(0, 0, 0, 1) 37.5%,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0) 62.5%
  );
}
#elementor-popup-modal-12675 .gradient-blur > div:nth-of-type(3) {
  z-index: 4;
  backdrop-filter: blur(4px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 37.5%,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 1) 62.5%,
    rgba(0, 0, 0, 0) 75%
  );
}
#elementor-popup-modal-12675 .gradient-blur > div:nth-of-type(4) {
  z-index: 5;
  backdrop-filter: blur(8px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 1) 62.5%,
    rgba(0, 0, 0, 1) 75%,
    rgba(0, 0, 0, 0) 87.5%
  );
}
#elementor-popup-modal-12675 .gradient-blur > div:nth-of-type(5) {
  z-index: 6;
  backdrop-filter: blur(16px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 62.5%,
    rgba(0, 0, 0, 1) 75%,
    rgba(0, 0, 0, 1) 87.5%,
    rgba(0, 0, 0, 0) 100%
  );
}
#elementor-popup-modal-12675 .gradient-blur > div:nth-of-type(6) {
  z-index: 7;
  backdrop-filter: blur(32px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 75%,
    rgba(0, 0, 0, 1) 87.5%,
    rgba(0, 0, 0, 1) 100%
  );
}
#elementor-popup-modal-12675 .gradient-blur::after {
  content: "";
  z-index: 8;
  backdrop-filter: blur(64px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 87.5%,
    rgba(0, 0, 0, 1) 100%
  );
}


/*header 2 grediant blur2 popup overlay*/
/*elmentor header 2 popup overlay grediant blur*/

#elementor-popup-modal-20699 .ggradient-blur {
  position: fixed;
  z-index: 5;
  inset: auto 0 0 0;
  height: 250%;
  pointer-events: none;
}
#elementor-popup-modal-20699 .ggradient-blur > div,
#elementor-popup-modal-20699 .ggradient-blur::before,
#elementor-popup-modal-20699 .ggradient-blur::after {
  position: absolute;
  inset: 0;
}
#elementor-popup-modal-20699 .ggradient-blur::before {
  content: "";
  z-index: 1;
  backdrop-filter: blur(0.5px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 12.5%,
    rgba(0, 0, 0, 1) 25%,
    rgba(0, 0, 0, 0) 37.5%
  );
}
#elementor-popup-modal-20699 .ggradient-blur > div:nth-of-type(1) {
  z-index: 2;
  backdrop-filter: blur(1px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 12.5%,
    rgba(0, 0, 0, 1) 25%,
    rgba(0, 0, 0, 1) 37.5%,
    rgba(0, 0, 0, 0) 50%
  );
}
#elementor-popup-modal-20699 .ggradient-blur > div:nth-of-type(2) {
  z-index: 3;
  backdrop-filter: blur(2px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 25%,
    rgba(0, 0, 0, 1) 37.5%,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0) 62.5%
  );
}
#elementor-popup-modal-20699 .ggradient-blur > div:nth-of-type(3) {
  z-index: 4;
  backdrop-filter: blur(4px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 37.5%,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 1) 62.5%,
    rgba(0, 0, 0, 0) 75%
  );
}
#elementor-popup-modal-20699 .ggradient-blur > div:nth-of-type(4) {
  z-index: 5;
  backdrop-filter: blur(8px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 1) 62.5%,
    rgba(0, 0, 0, 1) 75%,
    rgba(0, 0, 0, 0) 87.5%
  );
}
#elementor-popup-modal-20699 .ggradient-blur > div:nth-of-type(5) {
  z-index: 6;
  backdrop-filter: blur(16px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 62.5%,
    rgba(0, 0, 0, 1) 75%,
    rgba(0, 0, 0, 1) 87.5%,
    rgba(0, 0, 0, 0) 100%
  );
}
#elementor-popup-modal-20699 .ggradient-blur > div:nth-of-type(6) {
  z-index: 7;
  backdrop-filter: blur(32px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 75%,
    rgba(0, 0, 0, 1) 87.5%,
    rgba(0, 0, 0, 1) 100%
  );
}
#elementor-popup-modal-20699 .ggradient-blur::after {
  content: "";
  z-index: 8;
  backdrop-filter: blur(64px);
  mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 87.5%,
    rgba(0, 0, 0, 1) 100%
  );
}


















/* Default heading color and background */
.sticky-header 
.elementor-element-085a497 .elementor-heading-title,
.sticky-header 
.elementor-element-b0d865b .elementor-heading-title,
.sticky-header 
.elementor-element-78c47b2 .elementor-heading-title,
.sticky-header 
.elementor-element-3e1a1b8 .elementor-heading-title,
.sticky-header
.elementor-element-5324dc9 .elementor-heading-title {
    color: #EAEEF4;
    border-radius: 5px;
}

/* HOVER background color */
.sticky-header
.elementor-element-085a497 .elementor-heading-title:hover,
.sticky-header
.elementor-element-b0d865b .elementor-heading-title:hover,
.sticky-header
.elementor-element-78c47b2 .elementor-heading-title:hover,
.sticky-header
.elementor-element-3e1a1b8 .elementor-heading-title:hover {
    background-color: #FFFFFF1D !important;
}



/* COLOR change inside .heading-color-change section */
.sticky-header.dark-text 
.elementor-element-085a497 .elementor-heading-title,
.sticky-header.dark-text 
.elementor-element-b0d865b .elementor-heading-title,
.sticky-header.dark-text 
.elementor-element-78c47b2 .elementor-heading-title,
.sticky-header.dark-text 
.elementor-element-3e1a1b8 .elementor-heading-title,
.sticky-header.dark-text 
.elementor-element-5324dc9 .elementor-heading-title {
    color: #111111 !important;
}

/* HOVER background color */
.sticky-header.dark-text
.elementor-element-085a497 .elementor-heading-title:hover,
.sticky-header.dark-text
.elementor-element-b0d865b .elementor-heading-title:hover,
.sticky-header.dark-text
.elementor-element-78c47b2 .elementor-heading-title:hover,
.sticky-header.dark-text
.elementor-element-3e1a1b8 .elementor-heading-title:hover {
    background-color: #1111111A !important;
}




/* HEADER COLOR CHANGE STATE */
.sticky-header.dark-text .swap-btn1 {
  background: #111 !important;       /* button bg when section active */
  color: #fff !important;
}

/* Text inside button */
.sticky-header.dark-text .swap-btn1 .text,
.sticky-header.dark-text .swap-btn1 .text-hover {
  color: #fff !important;
}



/*header tmenu text, logo, button color change wwhen enter the footer*/
/* Default heading color and background */

.sticky-header-footer1
.elementor-element-085a497 .elementor-heading-title,
.sticky-header-footer1
.elementor-element-b0d865b .elementor-heading-title,
.sticky-header-footer1
.elementor-element-78c47b2 .elementor-heading-title,
.sticky-header-footer1
.elementor-element-3e1a1b8 .elementor-heading-title,
.sticky-header-footer1
.elementor-element-5324dc9 .elementor-heading-title {
    color: #EAEEF4;
    border-radius: 5px;
}

/* HOVER background color */
.sticky-header-footer1
.elementor-element-085a497 .elementor-heading-title:hover,
.sticky-header-footer1
.elementor-element-b0d865b .elementor-heading-title:hover,
.sticky-header-footer1
.elementor-element-78c47b2 .elementor-heading-title:hover,
.sticky-header-footer1
.elementor-element-3e1a1b8 .elementor-heading-title:hover {
    background-color: #FFFFFF1D;
}



/* COLOR change inside .heading-color-change section */
.sticky-header-footer1.dark-text
.elementor-element-085a497 .elementor-heading-title,
.sticky-header-footer1.dark-text
.elementor-element-b0d865b .elementor-heading-title,
.sticky-header-footer1.dark-text
.elementor-element-78c47b2 .elementor-heading-title,
.sticky-header-footer1.dark-text
.elementor-element-3e1a1b8 .elementor-heading-title,
.sticky-header-footer1.dark-text
.elementor-element-5324dc9 .elementor-heading-title {
    color: #111111;
}

/* HOVER background color */
.sticky-header-footer1.dark-text
.elementor-element-085a497 .elementor-heading-title:hover,
.sticky-header-footer1.dark-text
.elementor-element-b0d865b .elementor-heading-title:hover,
.sticky-header-footer1.dark-text
.elementor-element-78c47b2 .elementor-heading-title:hover,
.sticky-header-footer1.dark-text
.elementor-element-3e1a1b8 .elementor-heading-title:hover {
    background-color: #1111111A;
}

/*heading line*/
.sticky-header-footer1 .elementor-element-96a3d0a .elementor-heading-title,
.sticky-header-footer1 .elementor-element-48b6ccd .elementor-heading-title,
.sticky-header-footer1 .elementor-element-d313494 .elementor-heading-title {
    color: #EAEEF494;
    border-radius: 5px;
}

.sticky-header-footer1.dark-text .elementor-element-96a3d0a .elementor-heading-title,
.sticky-header-footer1.dark-text .elementor-element-48b6ccd .elementor-heading-title,
.sticky-header-footer1.dark-text .elementor-element-d313494 .elementor-heading-title {
    color: #11111194;
}

/*-------------------------------------------------------*/



/* Default icon color */
.sticky-header 
.elementor-element-354ca8a svg {
    fill: #EAEEF4 !important;   /* Same as your heading default */
}

/* Icon color change inside .heading-color-change section */
.sticky-header.dark-text 
.elementor-element-354ca8a svg {
    fill: #111111 !important;   /* Same as your heading dark color */
}








/* hero section button image */
.elementor-element-3935712 .elementor-button,
.elementor-element-5c4c6ca .elementor-button {
    display: inline-flex;
    align-items: center;
    gap: 10px; /* space between text and image */
}

/* Image on the right */
.elementor-element-3935712 .elementor-button::after,
.elementor-element-5c4c6ca .elementor-button::after {
    content: "";
    width: 39px;
    height: 39px;
    border-radius: 6px !important;
    background-image: url("https://meetalarafat.com/wp-content/uploads/2025/11/image.avif");
    background-size: cover;
    background-position: center;
    flex-shrink: 0; /* prevent image from shrinking */
}

/* header1 top button image*/
.elementor-element-5c4c6ca .elementor-button {
    display: inline-flex;
    align-items: center;
    gap: 10px; /* space between text and image */
}

/* Image on the right */
.elementor-element-5c4c6ca .elementor-button::after {
    content: "";
    width: 37px;
    height: 37px;
    overflow: hidden;
    border-radius: 6px !important;
    background-image: url("https://meetalarafat.com/wp-content/uploads/2025/11/image.avif");
    background-size: cover;
    background-position: center;
    flex-shrink: 0; /* prevent image from shrinking */
}



/* header2 tblet and mobile button image*/
.elementor-element-302170e .elementor-button {
    display: inline-flex;
    align-items: center;
    gap: 10px; /* space between text and image */
}

/* Image on the right */
.elementor-element-302170e .elementor-button::after {
    content: "";
    width: 38px;
    height: 38px;
    border-radius: 6px !important;
    background-image: url("https://meetalarafat.com/wp-content/uploads/2025/11/image.avif");
    background-size: cover;
    background-position: center;
    flex-shrink: 0; /* prevent image from shrinking */
}





/* footer section button image */
.elementor-element-ec6b123 .elementor-button {
    display: inline-flex;
    align-items: center;
    gap: 20px; /* space between text and image */
}

/* Image on the right */
.elementor-element-ec6b123 .elementor-button::after {
    content: "";
    width: 62px;
    height: 62px;
    border-radius: 10px !important;
    background-image: url("https://meetalarafat.com/wp-content/uploads/2025/11/image.avif");
    background-size: cover;
    background-position: center;
    flex-shrink: 0; /* prevent image from shrinking */
}



/* bottn reveal animation*/
/* ---- Slide text from data attributes (works when attributes are on the button link) ---- */
.slide-btn .elementor-button-link {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding-left: 16px;   /* adjust */
  padding-right: 16px;  /* adjust */
  height: 52px;         /* match your button height */
  line-height: 52px;
}

/* hide the actual button text so pseudo elements show instead */
.slide-btn .elementor-button-text {
  color: transparent;   /* keeps text for screen readers but hides visually */
  display: inline-block;
}

/* The two sliding lines, from attributes on the anchor element */
.slide-btn .elementor-button-link::before,
.slide-btn .elementor-button-link::after {
  content: attr(data-first); /* default for both, will override after */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding-left: 16px;    /* match anchor padding */
  padding-right: 16px;
  text-align: center;    /* inherits button alignment */
  display: block;
  transition: transform 0.34s ease;
  transform: translateY(0);
  line-height: 52px;     /* match height */
  white-space: nowrap;
}

/* Make the second line read from data-second attribute */
.slide-btn .elementor-button-link::after {
  content: attr(data-second);
  transform: translateY(100%);
}

/* Hover: move first up and bring second into view */
.slide-btn:hover .elementor-button-link::before {
  transform: translateY(-100%);
}

.slide-btn:hover .elementor-button-link::after {
  transform: translateY(0);
}

/* Optional: make whole anchor clickable without extra shift */
.slide-btn .elementor-button-link, 
.slide-btn .elementor-button-link::before,
.slide-btn .elementor-button-link::after {
  box-sizing: border-box;
}

/* Optional small visual tweaks (colors) - remove/change to match your theme */
.slide-btn .elementor-button-link::before,
.slide-btn .elementor-button-link::after {
  color: #111;            /* text color */
  background: transparent;/* keep original background */
}


.magic-container-0,
.magic-container-1 {
    overflow: hidden;
}

.magic-box {
    margin: 0 auto;          /* keep it centered */
    display: block;          
    overflow: hidden;        
    min-height: 0 !important; /* override Elementor min-height */
    padding: 0 !important;    /* remove padding that blocks shrink */
    box-sizing: border-box;
}




.elementor-element-a33a9da {
    border-color: #ffffff26; /* default */
    border-style: solid;
    border-width: 1px; /* adjust as needed */
}


/*footer container Optional: smooth color change */
.elementor-element-27e6d4a {
    background-color: black;
}




/* scroll enterence reavel animation*/
/* HIDE widgets before animation */
.animatable {
  visibility: hidden;
  opacity: 0;
  transform: translateY(40px);
  transition: 0.8s ease;
}

/* When visible on screen */
.animated {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* --- ANIMATIONS --- */

/* fade + move up */
.animated.moveInUp {
  animation: moveInUp 0.8s ease forwards;
}

@keyframes moveInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* move up only */
.animated.moveUp {
  animation: moveUp 0.8s ease forwards;
}

@keyframes moveUp {
  0% {
    transform: translateY(40px);
  }
  100% {
    transform: translateY(0);
  }
}







/* WRAPPER */
.reveal-wrapper {
    overflow: hidden;
    display: inline-block;
}

/* TEXT INSIDE */
.reveal-gsap {
    opacity: 0;
    transform: translateY(100%);
    display: inline-block;
    will-change: transform, opacity;
}


/*scroll revel headng*/
.single-line {
  display: inline-block;
  overflow: hidden;
}

.single-line .line {
  display: block;
  overflow: hidden;
}

.single-line .line-inner {
  display: inline-block;
  transform: translateY(100%);
}



/* BOX */
.reveal-block {
  position: relative;
  overflow: hidden;
}

/* BG DIV */
.reveal-bg {
    transform-origin: left;
  transform: scaleX(0);
}

/* TEXT */
.reveal-text {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  position: relative;
  z-index: 1;
}


.elementor-element-75f8c4b {
  position: relative;
  min-height: 23px;
}

.elementor-element-75f8c4b::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 23px;
  width: 0px; /* animation start */
  background-color: #4BBECE2B; /* change color */
  z-index: -1; /* behind content */
}



.card-reveal1 {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(3.5px);
    transition: 0.3s ease-out;
}


.logo-card-reveal3 {
    transform: translateY(20px);
    opacity: 0;
    filter: blur(3.5px);
    transition: 0.3s ease-out;
}


.card-reveal5 {
    
    transform: translateY(40px);
    filter: blur(3.5px);
    transition: 0.1s ease-out;
}


.card-reveal4 {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(3.5px);
    transition: 0.3s ease-out;
}


.card-reveal2 {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(3.5px);
    transition: 0.3s ease-out;
}


.tab-revel-left {
    opacity: 0;
    transform: translateX(40px);
    filter: blur(3.5px);
    transition: 0.3s ease-out;
}



.tab-revel-right {
    opacity: 0;
    transform: translateX(-40px);
    filter: blur(3.5px);
    transition: 0.3s ease-out;
}



.lines-parent {
  position: relative;
}

.line-item {
  width: 100%;
  height: 26px;
  background: #eee; /* or your white line color */
  border-radius: 0;
  transform-origin: center center;
  
  
  
  display: block;          /* < necessary */
  overflow: hidden;        /* < necessary */
  min-height: 0 !important; /* < necessary */
}







/* Parent section */
.mf-separator {
  width: 100%;
  position: relative;
}

/* Grid that holds the lines */
.mf-grid {
  display: grid;
  grid-auto-rows: auto;
}

/* Each line */
.mf-item {
  width: 100%;
  height: 100%;              /* 100% of GRID ROW (not screen) */
  background: #fff;          /* change color if needed */
  border-radius: 0rem;
}




/*grid container for animation*/
html, body {
  height: 100%;
}

.separator_row {
  height: 2.5vh;
  overflow: hidden;
}

.separator_inner {
  width: 100%;
  height: 100%;
}

.separator_inner_footer {
  width: 100%;
  height: 100%;
}



/* Progress wrapper */
.navbar_progress {
  display: flex;
  align-items: center;
  z-index: 999999;
}

/* Progress lines */
.navbar_progress-line {
  all: unset;

  height: 0.9rem;
  padding: 0.2rem !important;
  padding-left: 0.15rem !important;
  padding-right: 0.2rem !important;
  display: inline-flex;          /* kill baseline */
  box-sizing: border-box;

  border-radius: 0.2rem;

  opacity: 0.3;

  transform-origin: center center;
  will-change: transform;

  cursor: pointer;
  line-height: 0 !important;
  font-size: 0 !important;
}

.navbar_progress,
.navbar_progress * {
  scroll-behavior: auto !important;
}



.btn-line .elementor-button {
  position: relative;
  overflow: hidden;
}

.btn-line .elementor-button::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: #eaeef4;
  justify-content: center;
}

/* footer scroll heading blur */
.footer-blur-container {
  filter: blur(6px);
  opacity: 0;
  will-change: filter, opacity;
  
}

/* video card 3d effect */
.parallax-card {

  /* 3D setup */
  perspective:500px;
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform;

  transition: transform 0.25s cubic-bezier(.2,.8,.2,1);
}


/*spotlight code*/
.spotlight-card {
  position: relative;
  overflow: hidden;
}

/* spotlight layer */
.spotlight-card::after {
  content: '';
  position: fixed;
  -webkit-filter: blur(7rem);
  filter: blur(7rem);
  width: 22rem;
  height: 22rem;
  z-index: 9999;
  border-radius: 50%;
  background-color: #ffffff1a;
  border: 0.8px solid #ffffff1a;

  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  will-change: left, top, opacity;
}

/* connect JS position */
.spotlight-card.spotlight-active::after {
    left: var(--x);
    top: var(--y);
    opacity: 1;
    visibility: visible;
}


.spotlight-card::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(
    circle at var(--spot-x) var(--spot-y),
    #ffffff1a,
    transparent 60%
  );
  pointer-events: none;
}

.wf-scale-in {
  opacity: 0;
  transform: scale(0.01);
  transform-origin: center center;
  will-change: transform, opacity;
}


/*container scale left smoothly gsap animation*/
.eyebrow-parent1 {
  position: relative;
}

.eyebrow-inner2 {
  position: absolute;
  inset: 0;
  transform: scaleX(0.01) scaleY(0.85);
  opacity: 0;


  transform-origin: left  center;
  
}

.gsap-divider .elementor-divider-separator {
  transform-origin: 0% 100%; /* RIGHT → LEFT */
  transform: scaleX(0);
}



/*card buttton infinity illusion*/
/* BUTTON */



.btn-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.55rem 0.875rem 0.55rem 0.975rem;
  background-color: #fff !important;
  border-radius: 8px;
  text-decoration: none;
  color: #111 !important;
  font-size: 1em;
  font-family: "nene", sans-serif;
  font-weight: 300;
}

/* ICON MASK */
.btn-icon-wrap {
  width: 0.95rem;
  overflow: hidden;
  transform: scaleX(-1) scaleY(-1);
}

/* ICON ROW */
.btn-icon-list {
  display: inline-flex;
  white-space: nowrap;
}

.btn-card:hover {
  background: #fff;   /* button bg on hover */
  color: #111111;        /* text color on hover */
}

.btn-icon-svg * {
  fill: none !important;
}


/* ICON */
.btn-icon {
  width: 0.95rem;
  text-align: center;
  flex-shrink: 0;
  color: black;
  transform: rotate(-180deg);
  margin: 0px 0px 6px 0px;
}

.home-work_item:hover .btn-card {
  background: #eaeef4;
  transition: background-color 0.45s cubic-bezier(.22,.61,.36,1);
}    


/* 🔥 EXISTING ELEMENTOR PARENT HOVER */
.home-work_item:hover .btn-icon-list {
  animation: slideArrow 0.8s ease-out infinite;
  will-change: transform;
}

/* KEYFRAMES */
@keyframes slideArrow {
  0% {
    transform: translateX(0);
  }
  44.44% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/*----------------------------*/
/* BUTTON */
.swap-btnO {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  background-color: #ffffff1a !important;
  padding: 4PX 4PX 4PX 17PX;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  border: 1px solid #FFFFFF33;
  text-decoration: none;
  border-radius: 8px;
  overflow: hidden;
  font-family: "nene", sans-serif;
  font-weight: 300;
  transition: background-color 0.525s cubic-bezier(0.625, 0.05, 0, 1);
  outline: none;
  box-shadow: none;
  font-size: 1rem;
}

.swap-btnO:hover {
  background: #ffffff1a !important; /* choose your hover color */
}

/* TEXT MASK */
.text-wrapO {
  position: relative;
  height: 1.4em;
  overflow: hidden;
  z-index: 999;
}

/* TEXT */
.textO {
  display: block;
  transition: transform 0.525s cubic-bezier(0.625, 0.05, 0, 1);
  will-change: transform;
  color: #fff;
  z-index: 999;
}

.text-hoverO {
  position: absolute;
  left: 0;
  top: 100%;
  color: #fff;
  transform: translateY(175%)rotate(10deg);
  z-index: 999;
}

/* TEXT ANIMATION */
.swap-btnO:hover .text-mainO {
  transform: translateY(-100%);
}

.swap-btnO:hover .text-hoverO {
  transform: translateY(-100%);
}

/* IMAGE MASK (REAL MASK) */
.img-maskO {
  position: relative;
  width: 38px;
  height: 38px;
  overflow: hidden;          /*REAL MASK */
  border-radius: 6px;
  flex-shrink: 0;
  z-index: 999;
}

/* IMAGE */
.imgO {
  width: 38px;
  display: block; 
  height: 38px;
  background-image: url("https://meetalarafat.com/wp-content/uploads/2025/11/image.avif");
  background-size: cover;
  background-position: center;
  transform: translateX(0);
  transition: transform 0.525s cubic-bezier(0.625, 0.05, 0, 1);
  filter: blur(0);
  z-index: 999;
}

/* SECOND IMAGE (COMING FROM LEFT) */
.img-nextO {
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
}

/* CURRENT IMAGE (VISIBLE) */
.img-currentO {
  position: absolute;
  inset: 0;
  transform: translateX(0);
}

/* HOVER SWAP EFFECT */
.swap-btnO:hover .img-currentO {
  transform: translateX(100%);
}

.swap-btnO:hover .img-nextO {
  transform: translateX(0);
}

@keyframes blur-pulse {
  0%   { filter: blur(0px); }
  50%  { filter: blur(4px); }
  100% { filter: blur(0px); }
}

.swap-btnO:hover .imgO {
  animation: blur-pulse-hover 0.4s ease-in-out;
}

.swap-btnO:not(:hover) .imgO {
  animation: blur-pulse-leave 0.4s ease-in-out;
}

@keyframes blur-pulse-hover {
  0%   { filter: blur(0px); }
  50%  { filter: blur(4px); }
  100% { filter: blur(0px); }
}

@keyframes blur-pulse-leave {
  0%   { filter: blur(0px); }
  50%  { filter: blur(4px); }
  100% { filter: blur(0px); }
}

/*hero container bottom right left reduce*/

.scroll-reduce {
  width: 100%;
  will-change: width;
}

.scroll-reduce2 {
  height: 96.5vh;
  will-change: height;
}

.scroll-container {
  transform: translate3d(0, 0, 0); /* start at 0 */
  will-change: transform; /* improves animation performance */
}


body.elementor-popup-modal {
  overflow: auto !important;
}

/*specific container curser will venish and come button  and move with curser*/
.cursor-button {
  position: fixed !important;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  pointer-events: none; /* IMPORTANT */
  opacity: 0;
  z-index: 99999;
}

.cursor-trigger {
  cursor: none;
}









.popup2 {
  z-index: 9999;
}





@media (max-width: 767px) {
    .uc_author {
        justify-content: center;
}


@media (max-width: 767px) {
    .ue_subtitle {
        display: grid;
        justify-content: start
    
}

@media (max-width: 767px) {
    .ue_title {
        display: grid;
        justify-content: start;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Fk';
	font-style: normal;
	font-weight: 100;
	font-display: auto;
	src: url('https://meetalarafat.com/wp-content/uploads/2025/10/6859952071a781f640b7b7b5_FKGrotesk-Light.ttf') format('truetype');
}
@font-face {
	font-family: 'Fk';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://meetalarafat.com/wp-content/uploads/2025/10/68599520f58cabf3f976e44d_FKGrotesk-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Fk';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://meetalarafat.com/wp-content/uploads/2025/10/685995206f37bd221c204bcb_FKGrotesk-Medium.ttf') format('truetype');
}
@font-face {
	font-family: 'Fk';
	font-style: normal;
	font-weight: bold;
	font-display: auto;
	src: url('https://meetalarafat.com/wp-content/uploads/2025/10/68599523f88bd718d6c4ea52_FKGrotesk-Bold.ttf') format('truetype');
}
/* End Custom Fonts CSS */