/* SECTION */
.ai-section {
  width: 100%;
  min-height: 100svh; /* better than 100vh for mobile */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 40px 16px
}

/* CONTAINER */
.ai-container {
  position: relative;
  width: min(92vw, 1200px);
  aspect-ratio: 1198 / 841;
}

/* FIX MAIN WRAPPER */
.resul-genie {
  position: absolute;
  inset: 0;
}

/* ALL LAYERS */
.resul-genie-inner {
  position: absolute;
  top: 0%; 
  left: 50%;
  transform: translate(-50%, 0%);
  width: 100%;
  pointer-events: none;

}

/* SCALE SYSTEM */
.genie-layer-5 { width: 100%; z-index: 1; transform: translate(-50%, -20px);}
.genie-layer-4 { width: 85%; z-index: 2; transform: translate(-50%, -15px);}
.genie-layer-3 { width: 68%; z-index: 3; transform: translate(-50%, -10px);}
.genie-layer-2 { width: 52%; z-index: 4; transform: translate(-50%, -5px);}
.genie-layer-1 { width: 36%; z-index: 5;}
/* 
.genie-layer-0 { --size:15vw; width:var(--size); height: var(--size); 
  z-index: 6;
  background: radial-gradient(53.8% 53.8% at 61.46% 25.1%, rgba(72, 78, 240, 0.85) 0%, rgba(50, 56, 222, 0.85) 40.42%, rgba(50, 56, 222, 0.85) 58.87%, rgba(89, 33, 195, 0.85) 100%);
  transform: translate(-50%, -10px); margin-top: 4rem;
  padding: 2vw;
} */

.genie-layer-0{--size:15vw; width:var(--size); height: var(--size); margin-top: 4rem;  z-index: 6;}
.genie-layer-0 video{ --size:15vw; width:var(--size); height: var(--size); 
  z-index: 6;
  background: radial-gradient(53.8% 53.8% at 61.46% 25.1%, rgba(72, 78, 240, 0.85) 0%, rgba(50, 56, 222, 0.85) 40.42%, rgba(50, 56, 222, 0.85) 58.87%, rgba(89, 33, 195, 0.85) 100%);
}



.genie-layer-5 svg { transform: scale(0.8); }
.genie-layer-4 svg { transform: scale(0.85); }
.genie-layer-3 svg { transform: scale(0.9); }
.genie-layer-2 svg { transform: scale(0.95); }
.genie-layer-1 svg { transform: scale(0.9); }

/* SVG FIX */
.resul-genie-inner svg {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: top center;
}

.line-dot, .line-dot-big{
  position:absolute;
  will-change: transform; 
  --size:6px;
  width: var(--size);
  height: var(--size);
  background: linear-gradient(180deg, rgba(217, 217, 217, 0.15) 0%, rgba(255, 255, 255, 0.0945) 100%);
  border-color:rgba(255, 255, 255, 0.22)!important;
  opacity: 0;
  visibility: hidden;
}
.line-dot-big{
  --size:8px;
}
/* optional multiple dots delay */
.line-dot:nth-child(2) { animation-delay: 0.5s; }
.line-dot:nth-child(3) { animation-delay: 1s; }

.orbit-line {position: absolute; width: 80px; height: 2px; 
  background: linear-gradient(90deg, rgba(79,124,255,0) 0%, rgba(9, 56, 198, 0.8) 30%,  rgb(20, 65, 202) 50%,  rgba(17, 53, 160, 0.8) 70%, rgba(79,124,255,0) 100% );
  border-radius: 30px;
  transform-origin: center;
  opacity: 0;
  visibility: hidden;
}

.data-int{position: absolute; font-size:16px;}
.data-int img{max-width:60px; transition:all .4s ease;}
.data-int img:hover{transform: scale(1.1);}

/* .icon-1{top:70%; left: 0%; z-index: 999;}
.icon-2{top:88%; left: 46%;}
.icon-3{top:58%; right:8%;}
.icon-4{top:48%; left: 0%;}
.icon-5{top:30%; right:15%;} */

.icon-1{top:13%; left:21%; cursor: pointer;}
.icon-2{top:13%; right:21%; cursor: pointer;}
.icon-3{top:34%; left:8%; cursor: pointer;}
.icon-4{top:34%; right:7%; cursor: pointer;}
.icon-5{top:57%; left:48%; cursor: pointer;}


.flaoting-card{
  background: radial-gradient(75.85% 74.79% at 71.36% 11.23%, rgba(53, 57, 221, 0.2) 0%, rgba(53, 23, 239, 0.2) 53.99%, rgba(165, 135, 251, 0.2) 100%);
  border-radius: var(--BorderRadius);
  will-change: transform, opacity;
  overflow: hidden;
  border-color: #FFFFFF38!important;
}

.flaoting-hd-outer{position: absolute; top:100%;}
.flaoting-hd{flex: 1; font-size:16px; opacity: 0;  will-change: transform, opacity; border-image-source: linear-gradient(43.75deg, rgba(90, 95, 246, 0.35) 8.21%, rgba(255, 255, 255, 0.35) 92.94%);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.4) 100%); min-width:150px; text-align: center;}
/* .hd-1{top:100%; left: 0px;}
.hd-2{top:100%; left: 217px;}
.hd-3{top:100%; left: 434px;}
.hd-4{top:100%; left: 651px;} */

.flaoting-card h3 {opacity: 0; max-width:80%; transform: unset!important; color: #D0D3FF!important;}
.flaoting-card  p{color: #E5E5FF;}


/* popup css */
.genie-modal .modal-content{background: rgba(31, 24, 93, 0.9); border: 1px solid #5A5FF6; border-radius: 30px; padding:25px 35px 35px 35px;}
.genie-modal .modal-dialog {max-width: 600px;}
.genie-modal .modal-dialog h2{font-size: clamp(24px, 2.2vw, 32px); color: #D0D3FF;}

.btn-close{background: #362F6E; opacity: 1; width: 32px; height: 32px;}
.btn-close:hover{opacity: 0.8;}

.genie-modal .modal-body{background: rgba(23, 18, 69, 0.8); border: 1px solid #5A5FF6; border-radius: 10px; color: #E5E5FF;}

.dataing-chart{grid-template-columns: 110px 1fr 60px;}
.progress{height:8px; background:#292554; border-radius:30px; overflow:hidden;}
.progress-bar{width:0%; border-radius:30px; background: linear-gradient(90deg, #B7AEFF 0%, #6E63E9 89.16%); transition:width 2s ease;}
.sync-number, .data-sml-lable{font-size: 13px;}

.filter-pill div{border-radius: 10px; border-color: #877BF1!important; background: #2B2757; font-size: 13px; letter-spacing: 0.2px; padding-left: 20px; padding-right: 20px;}
.filter-pill div.active,
.filter-pill div:hover{background: #6B60E8;}

.user-numner{border-color: #877BF1!important; background: #6B60E8;border-radius: 10px; max-width: 140px; line-height: normal;}
.user-numner strong{font-size: clamp(24px, 2.2vw, 32px);}

.segment-pill a{border-color: #877BF1!important; color: #E5E5FF; background: #2B2757; font-size: 13px; letter-spacing: 0.2px; padding-left:15px; padding-right:15px;}
.segment-pill a.active,
.segment-pill a:hover{background: #6B60E8;}

.audiance-number{font-size: clamp(24px, 2.2vw, 32px); color: #C5BEFF;}

.chart-bars {height: 130px; padding-top: 10px; padding-bottom: 10px; color: #E2E2E2; font-size: 12px;}
.chart-bars .b {flex: 1; background: linear-gradient(360deg, #766BEB -0.09%, #B1A7FD 99.91%);}
.chart-bars .b .v {top: -20px;}
.dname{bottom: -20px;}

.cnt-tabs .nav-link{border-color: #877BF1!important; color: #E5E5FF; background: #2B2757; font-size: 13px; letter-spacing: 0.2px; padding-left:15px; padding-right:15px;}
.cnt-tabs .nav-link:hover,
.cnt-tabs .nav-link.active{background: #6B60E8;}
.cnt-tab-content{background: rgba(29, 23, 82, 0.8); border: solid 1px #28235a;}
.cnt-tab-content .head{height: 74px; background: linear-gradient(270deg, #B194D9 0%, #AFA3FD 100%); border-radius: 6px 6px 0px 0px;}
.email-lable{font-size:12px; line-height: 18px;}
.cnt-tab-content .btn-purple-border{font-size: 13px;}

@media (max-width: 768px) {
  .genie-layer-5 svg,
  .genie-layer-4 svg ,
  .genie-layer-3 svg,
  .genie-layer-2 svg,
  .genie-layer-1 svg { transform: scale(1); }

  .data-int{font-size:10px;}
  .data-int img{max-width:30px;}

  .flaoting-hd{display: none;}
  .genie-layer-0{margin-top: 1rem;}

  .genie-modal .modal-content{padding: 15px; border-radius: 10px;}

}