* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
 }

 html, body {
 height: 100%;
 width: 100%;
 font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 overflow: hidden;
 color: #000;
 }

 body {
 position: relative;
 background: #000;
 }

 /* Video background */
 .video-background {
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 overflow: hidden;
 z-index: -2;
 }

 .video-background video {
 width: 100%;
 height: 100%;
 object-fit: cover;
 }

 /* Dark overlay */
 .video-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 /*background: rgba(0, 0, 0, 0.45);*/
 z-index: -1;
 }

 /* Shared centering for sections */
 .centered-fullscreen {
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 1.5rem;
 pointer-events: none; /* only visual, animations control visibility */
 }

.centered-fullscreenGlobal {
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 1.5rem;
 pointer-events: none; /* only visual, animations control visibility */
 }

 #intro-container {
 z-index: 2;
 }

 #intro-title {
 font-size: clamp(2.5rem, 6vw, 4rem);
 font-weight: 600;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 text-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
 }
#intro-title img{width:550px; max-width:100%;}

 #intro-container h1{color:#fff;}
 
 /* Final small logo position: top-right */
#intro-container.final-position {
 position: fixed;
 top:0px;
 left: 20px;
 right: auto;
 bottom: auto;
 width: auto;
 height: auto;
 padding: 0;
 justify-content: flex-start;
 align-items: flex-end;
 pointer-events: none;
}

/* Smooth transform-based movement, not layout jumps */
#intro-container,
#intro-title img {
 will-change: transform;
}


#intro-container.final-position #intro-title img {
 width: 180px; /* adjust size as needed */
 max-width: 100%;
}


 /* AI agent container */
 #agent-container {
 z-index: 3;
 opacity: 0;
 transform: scale(0.9);
 display: flex;
 flex-direction: column;
 gap: 1rem;
 pointer-events: auto;
 }

 /* AI agent container */
 #agentcontainerMulti {
 z-index: 3;
 display: flex;
 flex-direction: column;
 gap: 1rem;
 pointer-events: auto;
 }
#agentcardMulti {
 max-width:100%;
 width:1250px;
}
.agentsLoader{height:750px; width:100%; border:none;}

 #agent-card{
 /*background: rgba(255, 255, 255, 0.90);
 border-radius:50px;
 padding:0.5rem 0.5rem;
 box-shadow: 0 4px 60px rgba(0, 0, 0, 0.65);
 border: 1px solid rgba(255, 255, 255, 0.06);
 backdrop-filter: blur(16px);*/
 max-width:100%;
 width:850px;
}
.chatLoader{height:750px; border:none; width:100%;}

 #agent-card h2 {
 font-size: 1.6rem;
 margin-bottom: 0.5rem;
 font-weight: 600;
 }

 #agent-card p.subtitle {
 font-size: 0.95rem;
 color:#333;
 margin-bottom: 1.2rem;
 }

 #agent-embed-placeholder {
 border-radius: 14px;
 border: 1px dashed rgba(255, 255, 255, 0.25);
 padding: 0.5rem;
 display: flex;
 justify-content: center;
 color:#000;
 }
 .ailogo{text-align:right;  margin-bottom:-45px; margin-right:30px;}
 .ailogo img{max-width:200px;}
.aigentheader{color:#fff; text-align:right; padding:20px 20px 0px 10px; font-size:17px; position: relative; z-index: 100;}
.aigentheader a{color:#fff; text-decoration:none;}
.aigentheader a:hover{color:#01b2d6}
 .agent-img {
  width:30px;
  height:30px;
  background: url("aiagenticon.png") no-repeat center/contain;
  display: inline-block;
  transition: 0.3s ease; vertical-align: bottom;
}

.aigentheader:hover .agent-img {
  background-image: url("aiagenthover.png");
}

 .aigentheader img{max-width: 30px; vertical-align:bottom;}

 @media (max-width:1024px) {
  #agent-card {padding:20px 0rem; width:768px; height: auto; margin:0 auto;}
  /*.centered-fullscreen{position:relative; top: auto; left: 0; height:auto; display: block; min-height:70vh;}*/
  .chatLoader{height:700px;}
  #agentcardMulti{width:850px; padding-bottom:40px;}
 }

 @media (max-width:768px) {
  #agent-card {padding:0rem; width:650px; height: auto; margin:0 auto;}
  .aigentheader{bottom:20px !important; position:fixed; right:0px; width:auto;}
  .chatLoader{height:700px;}
  #agentcardMulti{width:650px;}
 }

 @media (max-width:660px) {
  #agent-card {padding:0rem; width:520px;}
  #agentcardMulti{width:540px;}
 }

 @media (max-width:550px) {
  #agent-card {padding:0rem; width:460px;}
  #agentcardMulti{width:460px;}

 }
  @media (max-width:480px) {
  #agent-card {padding:0rem; width:350px;}
  #agentcardMulti{width:350px;}
 }