.elementor-1397 .elementor-element.elementor-element-455ae46 > .elementor-background-overlay{background-color:transparent;background-image:linear-gradient(180deg, #FFFFFF00 54%, #010207 100%);opacity:0.88;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1397 .elementor-element.elementor-element-455ae46 > .elementor-container{max-width:850px;}.elementor-1397 .elementor-element.elementor-element-455ae46{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:8% 0% 6% 0%;}.elementor-1397 .elementor-element.elementor-element-4b9c3580.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-1397 .elementor-element.elementor-element-4b9c3580 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1397 .elementor-element.elementor-element-27b3c6a3 .elementor-button{background-color:#61CE7000;font-family:"Inter", Sans-serif;font-size:15px;font-weight:400;letter-spacing:0.7px;border-radius:100px 100px 100px 100px;padding:0px 0px 0px 0px;}.elementor-1397 .elementor-element.elementor-element-27b3c6a3{width:auto;max-width:auto;}.elementor-widget-image-box .elementor-image-box-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-image-box:has(:hover) .elementor-image-box-title,
					 .elementor-widget-image-box:has(:focus) .elementor-image-box-title{color:var( --e-global-color-primary );}.elementor-widget-image-box .elementor-image-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-1397 .elementor-element.elementor-element-4ada6da3{margin:30px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-1397 .elementor-element.elementor-element-4ada6da3 .elementor-image-box-title{margin-bottom:11px;font-family:"Inter", Sans-serif;font-size:56px;font-weight:600;line-height:1.2em;letter-spacing:-1.1px;color:#FFFFFF;}.elementor-1397 .elementor-element.elementor-element-4ada6da3 .elementor-image-box-description{font-family:"Manrope", Sans-serif;font-size:19px;font-weight:300;line-height:1.7em;color:#E6E8F0;}.elementor-1397 .elementor-element.elementor-element-a76b155 > .elementor-container{max-width:1400px;}.elementor-1397 .elementor-element.elementor-element-a76b155{padding:60px 0px 60px 0px;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-1397 .elementor-element.elementor-element-0b82e4d{--grid-columns:3;}.elementor-1397 .elementor-element.elementor-element-0b82e4d .elementor-loop-container{grid-auto-rows:1fr;}.elementor-1397 .elementor-element.elementor-element-0b82e4d .e-loop-item > .elementor-section, .elementor-1397 .elementor-element.elementor-element-0b82e4d .e-loop-item > .elementor-section > .elementor-container, .elementor-1397 .elementor-element.elementor-element-0b82e4d .e-loop-item > .e-con, .elementor-1397 .elementor-element.elementor-element-0b82e4d .e-loop-item .elementor-section-wrap  > .e-con{height:100%;}.elementor-1397 .elementor-element.elementor-element-0b82e4d .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-1397 .elementor-element.elementor-element-0b82e4d .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 8px/2 );}body:not(.rtl) .elementor-1397 .elementor-element.elementor-element-0b82e4d .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 8px/2 );}body.rtl .elementor-1397 .elementor-element.elementor-element-0b82e4d .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 8px/2 );}body.rtl .elementor-1397 .elementor-element.elementor-element-0b82e4d .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 8px/2 );}body.elementor-page-1397:not(.elementor-motion-effects-element-type-background), body.elementor-page-1397 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#050816;}@media(max-width:1024px){.elementor-1397 .elementor-element.elementor-element-0b82e4d{--grid-columns:2;}}@media(max-width:767px){.elementor-1397 .elementor-element.elementor-element-455ae46{padding:32% 4% 15% 4%;}.elementor-1397 .elementor-element.elementor-element-4ada6da3 .elementor-image-box-title{font-size:45px;}.elementor-1397 .elementor-element.elementor-element-0b82e4d{--grid-columns:1;}}/* Start custom CSS for button, class: .elementor-element-27b3c6a3 *//*=========================================
      DJAI Premium Glass Button
=========================================*/

.hero-supported-btn{

    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:13px 26px;

    border-radius:999px;

    color:#FFFFFF;
    text-decoration:none;

    font-family:Inter,sans-serif;
    font-size:14px;
    font-weight:600;

    letter-spacing:1px;
    text-transform:uppercase;

    background:linear-gradient(
        145deg,
        rgba(0,216,255,.08),
        rgba(123,97,255,.08)
    );

    border:1px solid rgba(0,216,255,.18);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    overflow:hidden;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 12px 35px rgba(0,0,0,.35);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;

}

/* Premium Moving Shine */

.hero-supported-btn::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    pointer-events:none;

    background:linear-gradient(

        105deg,

        transparent 0%,

        rgba(0,216,255,.10) 40%,

        rgba(123,97,255,.28) 50%,

        rgba(198,83,255,.12) 58%,

        transparent 100%

    );

    transform:translateX(-130%);

    animation:heroBorderShimmer 4.8s linear infinite;

}

/* Glass Highlight */

.hero-supported-btn::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    pointer-events:none;

    background:radial-gradient(

        120% 140% at 25% 18%,

        rgba(255,255,255,.10),

        rgba(255,255,255,.03) 50%,

        transparent 78%

    );

}

/* Hover */

.hero-supported-btn:hover{

    transform:translateY(-3px);

    border-color:rgba(0,216,255,.45);

    background:linear-gradient(
        145deg,
        rgba(0,216,255,.11),
        rgba(123,97,255,.12)
    );

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.10),

        0 18px 45px rgba(0,0,0,.45),

        0 0 18px rgba(0,216,255,.16),

        0 0 32px rgba(123,97,255,.12);

}

.hero-supported-btn:hover::before{

    animation-duration:2.8s;

}

/* Active */

.hero-supported-btn:active{

    transform:translateY(0);

}

/* Focus */

.hero-supported-btn:focus-visible{

    outline:none;

    border-color:#00D8FF;

    box-shadow:

        0 0 0 3px rgba(0,216,255,.18),

        0 0 30px rgba(123,97,255,.18);

}

/* Accessibility */

@media (prefers-reduced-motion:reduce){

    .hero-supported-btn::before{

        animation:none;

    }

}

/* Animation */

@keyframes heroBorderShimmer{

    0%{

        transform:translateX(-130%);

    }

    55%{

        transform:translateX(130%);

    }

    100%{

        transform:translateX(130%);

    }

}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-455ae46 *//* ==========================================================
   DJAI About Hero — Animated Tech Background + Mouse Effect
   Class: .aboutsectionbg
   Brand colors: #050816, #00D8FF, #7B61FF, #C653FF
========================================================== */

.aboutsectionbg{
  position: relative;
  overflow: hidden;
  isolation: isolate;

  background: #050816;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);

  --mx: 50;
  --my: 50;
  --mxs: 50;
  --mys: 50;

  background-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,216,255,.08) 35%,
      rgba(123,97,255,.20) 50%,
      rgba(0,216,255,.08) 65%,
      transparent 100%
    ),
    radial-gradient(
      520px 360px at calc(var(--mxs) * 1%) calc(var(--mys) * 1%),
      rgba(0,216,255,.14),
      rgba(0,216,255,0) 70%
    );

  background-repeat: no-repeat, no-repeat;
  background-size: 180% 220%, 100% 100%;
  background-position: -20% calc(35% + (var(--mys) - 50)*0.06%), 0 0;

  animation: thxBeamBg 10s ease-in-out infinite;
}

/* Aurora Layer */
.aboutsectionbg::before{
  content:"";
  position:absolute;
  inset:-25%;
  z-index:0;
  pointer-events:none;

  background:
    radial-gradient(
      900px 600px at calc(18% + (var(--mxs) - 50)*0.10%) calc(22% + (var(--mys) - 50)*0.08%),
      rgba(0,216,255,.26),
      transparent 62%
    ),
    radial-gradient(
      820px 560px at calc(82% + (var(--mxs) - 50)*0.07%) calc(30% + (var(--mys) - 50)*0.06%),
      rgba(123,97,255,.22),
      transparent 66%
    ),
    radial-gradient(
      760px 560px at calc(55% - (var(--mxs) - 50)*0.06%) calc(85% - (var(--mys) - 50)*0.05%),
      rgba(255,255,255,.05),
      transparent 62%
    ),
    radial-gradient(
      680px 520px at calc(35% + (var(--mxs) - 50)*0.06%) calc(70% + (var(--mys) - 50)*0.07%),
      rgba(198,83,255,.14),
      transparent 66%
    ),
    linear-gradient(
      135deg,
      #050816 0%,
      #081126 45%,
      #050816 100%
    );

  filter: saturate(120%) contrast(112%);
  transform: translate3d(0,0,0);
  animation: thxAuroraDrift 18s ease-in-out infinite;
  will-change: transform;
}

/* Tech Pattern Layer */
.aboutsectionbg::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:
    repeating-linear-gradient(90deg, rgba(0,216,255,.09) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(123,97,255,.08) 0 1px, transparent 1px 34px),

    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 10px),

    repeating-linear-gradient(135deg, rgba(198,83,255,.06) 0 1px, transparent 1px 26px),

    repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 1px, transparent 1px 7px),

    radial-gradient(circle at 50% 50%, rgba(255,255,255,.03) 0 1px, transparent 1px 100%),

    linear-gradient(
      to top,
      #050816 0%,
      rgba(5,8,22,.88) 32%,
      rgba(5,8,22,.45) 62%,
      rgba(5,8,22,0) 100%
    );

  background-size:
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    3px 3px,
    100% 100%;

  background-position:
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0;

  mix-blend-mode: screen;
  opacity: .65;

  transform: translate3d(
    calc((var(--mxs) - 50) * 0.14px),
    calc((var(--mys) - 50) * 0.10px),
    0
  );

  animation: thxPatternPan 22s linear infinite;
  will-change: transform, background-position;
}

/* Keep content above layers */
.aboutsectionbg > *{
  position: relative;
  z-index: 2;
}

/* Hover polish */
.aboutsectionbg:hover::before{
  filter: saturate(122%) contrast(114%) brightness(1.03);
}

/* Animations */
@keyframes thxAuroraDrift{
  0%{
    transform: translate(-2%, -2%) scale(1.02);
  }

  50%{
    transform: translate(2%, 1%) scale(1.06);
  }

  100%{
    transform: translate(-2%, -2%) scale(1.02);
  }
}

@keyframes thxPatternPan{
  0%{
    background-position:
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0;
  }

  100%{
    background-position:
      240px 0,
      0 240px,
      120px 0,
      0 120px,
      160px 160px,
      0 90px,
      12px 12px,
      0 0;
  }
}

@keyframes thxBeamBg{
  0%{
    background-position:
      -20% calc(35% + (var(--mys) - 50)*0.06%),
      0 0;
  }

  50%{
    background-position:
      120% calc(35% + (var(--mys) - 50)*0.06%),
      0 0;
  }

  100%{
    background-position:
      -20% calc(35% + (var(--mys) - 50)*0.06%),
      0 0;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .aboutsectionbg,
  .aboutsectionbg::before,
  .aboutsectionbg::after{
    animation: none !important;
  }
}/* End custom CSS */