/* ===============================
LOGIZENT COMPANY HERO
===============================*/

.lz-hero-premium{

min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
position:relative;
overflow:hidden;

padding-top:120px;   /* NEW - pushes content below navbar */

background:
radial-gradient(circle at 20% 30%, rgba(255,170,0,0.15), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(255,120,0,0.15), transparent 40%),
#070b12;

color:white;

}


/* container */

.lz-hero-container{

max-width:1200px;
text-align:center;
padding:20px;

}

/* heading */

.lz-hero-title{

font-size:60px;
font-weight:700;
line-height:1.2;

background:linear-gradient(90deg,#ff8c00,#ffb347);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

opacity:0;
transform:translateY(40px);

animation:heroFade 1.2s ease forwards;

}

/* subtitle */

.lz-hero-sub{

margin-top:25px;
color:#cbd5e1;
font-size:20px;
max-width:750px;
margin-left:auto;
margin-right:auto;

opacity:0;
transform:translateY(40px);

animation:heroFade 1.2s ease forwards;
animation-delay:.4s;

}

/* stats */

.lz-stats-row{

margin-top:70px;

display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:40px;

opacity:0;
transform:translateY(40px);

animation:heroFade 1.2s ease forwards;
animation-delay:.8s;

}

/* stat card */

.lz-stat-card{

text-align:center;
min-width:130px;

}

/* icon */

.lz-stat-icon{

width:55px;
height:55px;

border-radius:50%;
border:2px solid #ff8c00;

display:flex;
align-items:center;
justify-content:center;

margin:auto;
margin-bottom:12px;

color:#ff8c00;
font-size:20px;

}

/* numbers */

.lz-stat-number{

font-size:42px;
font-weight:700;
color:white;

}

/* divider */

.lz-divider{

width:1px;
height:70px;
background:rgba(255,255,255,0.2);

}

/* typing text */

.typing-text{

background: linear-gradient(
90deg,
#ff7a18,
#ffb347,
#ffd700,
#ff7a18,
#ff3cac
);

background-size:300%;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

border-right:3px solid #ffb347;
padding-right:6px;

animation:
typingGradient 5s linear infinite,
blink 1s infinite;

font-weight:700;

}

/* cursor light */

.lz-cursor-light{

position:absolute;
width:350px;
height:350px;

background:radial-gradient(circle,
rgba(255,160,0,0.35),
transparent 70%);

pointer-events:none;

transform:translate(-50%,-50%);
filter:blur(90px);

left:50%;
top:50%;

}


/* AI Neural Network Background */

#ai-neural-bg{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

z-index:0;

}

/* Ensure content stays above particles */

.lz-hero-container{

position:relative;
z-index:2;

}

/* =========================================
LOGIZENT SINGLE IMAGE AUTO SLIDER
========================================= */

.lzmx_showcase_section {

    padding:120px 0;
    background:#070b12;
    overflow:hidden;

}

/* slider container */

.lzmx_slider_container {

    width:100%;
    overflow:hidden;

}

/* track */

.lzmx_slider_track {

    display:flex;
    gap:50px;

    animation:lzmx_auto_scroll 3s linear infinite;

}

/* cards */

.lzmx_slide_card {

    width:420px;
    height:260px;

    flex-shrink:0;

    border-radius:16px;
    overflow:hidden;

    transform:rotate(-4deg);

    box-shadow:0 25px 80px rgba(0,0,0,0.6);

    transition:all .4s ease;

}

.lzmx_slide_card img {

    width:100%;
    height:100%;
    object-fit:cover;

}

/* hover effect */

.lzmx_slide_card:hover {

    transform:rotate(0deg) scale(1.05);

}

/* scrolling animation */

@keyframes lzmx_auto_scroll {

    0% {
        transform:translateX(0);
    }

    100% {
        transform:translateX(-50%);
    }

}



/* =====================================
JOIN TEAM FLOATING IMAGE SECTION
===================================== */

.qx7aiJoinTeamWrap{
position:relative;
height:700px;
overflow:hidden;

background:
radial-gradient(circle at 20% 30%, rgba(255,170,0,0.25), transparent 500px),
radial-gradient(circle at 80% 70%, rgba(255,120,0,0.18), transparent 500px),
linear-gradient(135deg,#050505,#0b0b0b,#111111);
}

/* =====================================
CARDS CONTAINER
===================================== */

.qx7aiCardsArea{
position:relative;
max-width:1400px;
height:100%;
margin:auto;
}

/* =====================================
IMAGE CARD STYLE
===================================== */

.qx7aiCard{

position:absolute;

width:260px;
height:320px;

background:#1b1b1b;

padding:12px;

border-radius:16px;

border:2px solid #d3d3d3;

box-shadow:0 30px 60px rgba(0,0,0,0.6);

transition:transform .5s cubic-bezier(.22,.61,.36,1),
box-shadow .15s ease;

}

.qx7aiCard img{
width:100%;
height:100%;
object-fit:cover;
border-radius:10px;
}

/* =====================================
CARD POSITIONS (SPREAD OUT MORE)
===================================== */


.card1{
top:80px;
left:4%;
transform:rotate(-15deg);
}

.card2{
top:10px;
left:22%;
transform:rotate(-7deg);
}

.card3{
top:60px;
left:40%;
transform:rotate(5deg);
}

.card4{
top:100px;
right:18%;
transform:rotate(12deg);
}

.card5{
bottom:120px;
left:8%;
transform:rotate(-12deg);
}

.card6{
bottom:40px;
left:30%;
transform:rotate(-4deg);
}

.card7{
bottom:80px;
right:28%;
transform:rotate(6deg);
}

.card8{
bottom:140px;
right:8%;
transform:rotate(14deg);
}

/* =====================================
INDIVIDUAL CARD HOVER (TALLIUM STYLE)
===================================== */
/*
.card1:hover{
transform:rotate(-26deg) translate(-12px,-8px);
}

.card2:hover{
transform:rotate(-18deg) translate(-10px,-6px);
}

.card3:hover{
transform:rotate(19deg) translate(10px,-8px);
}

.card4:hover{
transform:rotate(-19deg) translate(-10px,8px);
}

.card5:hover{
transform:rotate(20deg) translate(10px,8px);
}

.card6:hover{
transform:rotate(46deg) translate(0px,10px);
}*/

/* =====================================
CARD HOVER MOVEMENT
===================================== */

.card1:hover{ transform:rotate(-27deg) translate(-10px,-6px); }
.card2:hover{ transform:rotate(-19deg) translate(-8px,-6px); }
.card3:hover{ transform:rotate(27deg) translate(8px,-6px); }
.card4:hover{ transform:rotate(34deg) translate(10px,-8px); }

.card5:hover{ transform:rotate(-24deg) translate(-8px,8px); }
.card6:hover{ transform:rotate(-26deg) translate(-4px,10px); }
.card7:hover{ transform:rotate(38deg) translate(8px,10px); }
.card8:hover{ transform:rotate(46deg) translate(10px,8px); }

.qx7aiCard:hover{
z-index:6;
box-shadow:0 40px 90px rgba(0,0,0,0.85);
}

/* Depth effect */

.qx7aiCard:hover{
z-index:4;
box-shadow:0 40px 90px rgba(0,0,0,0.8);
}

/* =====================================
CENTER GLASS CARD
===================================== */

.qx7aiCenterCard{

position:absolute;

top:50%;
left:50%;

transform:translate(-50%,-50%);

width:300px;

padding:35px;

border-radius:18px;

background:rgba(255,255,255,0.12);

backdrop-filter:blur(18px);

text-align:center;

box-shadow:0 40px 80px rgba(0,0,0,0.6);

z-index:10; /* ALWAYS ABOVE IMAGES */

}

/* =====================================
CENTER TITLE
===================================== */

.qx7aiCenterCard h2{
font-size:28px;
color:#ffffff;
margin-bottom:20px;
letter-spacing:1px;
}

/* =====================================
AVATAR ROW
===================================== */

.qx7aiAvatarRow{
display:flex;
justify-content:center;
align-items:center;
margin-bottom:18px;
}

.qx7aiAvatarRow img{
width:36px;
height:36px;
border-radius:50%;
margin-left:-10px;
border:2px solid #fff;
}

/* PLUS ICON */

.qx7aiPlus{

width:36px;
height:36px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;

background:#ff9800;

color:white;

font-size:18px;

margin-left:-10px;

}

/* =====================================
CTA BUTTON
===================================== */

.qx7aiJoinBtn{

display:inline-block;

padding:14px 32px;

background:linear-gradient(90deg,#ff9a00,#ff6a00);

color:white;

font-weight:600;

border-radius:28px;

text-decoration:none;

transition:.3s;

}

.qx7aiJoinBtn:hover{

transform:translateY(-3px);

box-shadow:0 12px 25px rgba(255,140,0,0.5);

}



/* ================================
LOGIZENT HISTORY SECTION
================================ */

.lgx7HistoryWrap{

padding:120px 0;

background:
radial-gradient(circle at 20% 30%, rgba(255,170,0,0.2), transparent 400px),
radial-gradient(circle at 80% 70%, rgba(255,120,0,0.15), transparent 400px),
linear-gradient(135deg,#050505,#0b0b0b,#111111);

overflow:hidden;

}

.lgx7HistoryContainer{

max-width:1200px;
margin:auto;
color:white;

}

.lgx7HistoryTitle{

text-align:center;
font-size:40px;
margin-bottom:70px;

}

/* GRID */

.lgx7HistoryMain{

display:flex;
align-items:center;
justify-content:center;

gap:100px;

max-width:1100px;
margin:auto;

}

/* IMAGE AREA */

.lgx7HistoryImages{
position:relative;
width:460px;
height:360px;
}

/* IMAGE STYLE */

.lgx7Img{

position:absolute;

width:240px;
height:160px;

object-fit:cover;

border-radius:14px;

border:2px solid #d4d4d4;

box-shadow:0 30px 60px rgba(0,0,0,0.7);

opacity:0;

transition:
transform .7s cubic-bezier(.19,1,.22,1),
opacity .6s ease;

}

/* IMAGE POSITIONS */

.lgx7Img1{
left:0;
bottom:0;
transform:rotate(-14deg) translate(-60px,40px) scale(.9);
}

.lgx7Img2{
left:120px;
top:0;
transform:rotate(6deg) translate(60px,-40px) scale(.9);
}

.lgx7Img3{
right:0;
bottom:40px;
transform:rotate(12deg) translate(80px,40px) scale(.9);
}

/* SHOW STATE */

.lgx7Img.show{

opacity:1;

}

/* FINAL POSITIONS AFTER ANIMATION */

.lgx7Img1.show{
transform:rotate(-14deg) translate(0,0) scale(1);
}

.lgx7Img2.show{
transform:rotate(6deg) translate(0,0) scale(1);
}

.lgx7Img3.show{
transform:rotate(12deg) translate(0,0) scale(1);
}

/* HOVER EFFECT */

.lgx7Img:hover{
transform:scale(1.04) rotate(var(--angle));
}

/* SHAKE EFFECT */

@keyframes lgxShake{

0%{transform:translateX(0)}
25%{transform:translateX(-3px)}
50%{transform:translateX(3px)}
75%{transform:translateX(-2px)}
100%{transform:translateX(0)}

}

/* TEXT */

.lgx7HistoryContent{

width:480px;
min-width:480px;
max-width:480px;

}

.lgx7HistoryContent h3{

font-size:38px;
color:#aaa;
margin-bottom:10px;

}

.lgx7HistoryContent h4{

font-size:24px;
color:#ff9a00;
margin-bottom:15px;

}

.lgx7HistoryContent p{

max-width:420px;
line-height:1.6;
color:#ddd;

}

/* NAV BUTTONS */

.lgx7NavButtons{

margin-top:30px;

}

.lgx7NavButtons button{

width:48px;
height:48px;

border-radius:50%;

border:1px solid #999;

background:none;
color:white;

font-size:18px;
cursor:pointer;

margin-right:12px;

transition:.3s;

}

.lgx7NavButtons button:hover{

border-color:#ff9a00;
color:#ff9a00;

}

/* TIMELINE */

.lgx7YearTimeline{

margin-top:40px;

display:flex;
justify-content:center;
gap:30px;

border-top:1px solid rgba(255,255,255,0.1);

padding-top:20px;

}

.lgx7Year{

color:#777;
cursor:pointer;
font-size:18px;

}

.lgx7Year.active{

color:#ff9a00;

}



/* ================================
AI PRINCIPLES SECTION
================================ */

.zxqPrinciplesWrap{

position:relative;

padding:130px 0;

overflow:hidden;

background:
radial-gradient(circle at 20% 30%, rgba(255,170,0,0.18), transparent 400px),
radial-gradient(circle at 80% 70%, rgba(255,120,0,0.12), transparent 400px),
linear-gradient(135deg,#050505,#0b0b0b,#101010);

}

/* PARTICLE CANVAS */

#zxqAIParticles{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

z-index:0;

}

/* CONTENT */

.zxqPrinciplesContainer{

position:relative;

z-index:2;

max-width:1200px;

margin:auto;

padding:0 20px;

text-align:center;

}

/* TITLE */

.zxqPrinciplesTitle{

font-size:42px;

color:#fff;

margin-bottom:10px;

}

/* SUBTITLE */

.zxqPrinciplesSubtitle{

color:#aaa;

max-width:650px;

margin:auto;

margin-bottom:70px;

line-height:1.6;

}

/* GRID */

.zxqPrinciplesGrid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:30px;

}

/* CARD */

.zxqPrincipleCard{

position:relative;

padding:35px;

border-radius:16px;

text-align:left;

overflow:hidden;

/* GLASS AI CARD */

background:

linear-gradient(
135deg,
rgba(255,255,255,0.05),
rgba(255,255,255,0.02)
);

backdrop-filter:blur(12px);

border:1px solid rgba(255,255,255,0.08);

transition:all .35s ease;

}

/* ICON */

.zxqIconBox{

font-size:28px;

margin-bottom:14px;

}

/* TITLE */

.zxqPrincipleCard h3{

color:#fff;

margin-bottom:10px;

font-size:20px;

}

/* TEXT */

.zxqPrincipleCard p{

color:#bbb;

line-height:1.6;

}

/* AI GLOW BORDER */

.zxqPrincipleCard::after{

content:"";

position:absolute;

inset:-1px;

border-radius:16px;

background:linear-gradient(
120deg,
transparent,
rgba(255,150,0,0.4),
transparent
);

opacity:0;

transition:.4s;

}

.zxqPrincipleCard:hover::after{

opacity:1;

}

/* CARD HOVER */

.zxqPrincipleCard:hover{

transform:translateY(-6px);

box-shadow:0 20px 60px rgba(255,140,0,0.3);

}

/* CURSOR LIGHT */

.zxqPrincipleCard::before{

content:"";

position:absolute;

width:220px;
height:220px;

background:radial-gradient(circle,#ff9a00,transparent 70%);

top:var(--y);
left:var(--x);

transform:translate(-50%,-50%);

opacity:0;

transition:opacity .3s;

}

.zxqPrincipleCard:hover::before{

opacity:.15;

}

/* MOBILE */

@media(max-width:900px){

.zxqPrinciplesGrid{

grid-template-columns:1fr;

}

}



.lzxtimeline-section{

background:#060c16;
padding:140px 0;
font-family:Poppins, sans-serif;
color:white;
overflow:hidden;

}


/* container */

.lzxtimeline-wrapper{

width:90%;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:80px;

}


/* image */

.lzxtimeline-left{

width:40%;

}

.lzxtimeline-image-box{

transform:rotate(-8deg);
border-radius:20px;
overflow:hidden;
box-shadow:0 40px 80px rgba(0,0,0,0.7);

}

.lzxtimeline-image-box img{

width:100%;
display:block;
transition:opacity 0.8s ease;

}

.lzxFadeOut{

opacity:0;

}

.lzxFadeIn{

opacity:1;

}


/* right side */

.lzxtimeline-right{

width:50%;
position:relative;

}


/* BIG YEAR */

.lzxtimeline-year{

font-size:180px;
font-weight:900;
color:#f5a623;
line-height:1;
margin-bottom:20px;
transform:skewX(-6deg);

}


/* text */

.lzxtimeline-text{

font-size:18px;
line-height:1.8;
max-width:550px;
color:#cdd6ff;

}



/* timeline bar */

.lzxtimeline-bar{

margin-top:90px;
display:flex;
justify-content:center;
align-items:center;
gap:50px;
position:relative;

}


/* line */

.lzxtimeline-bar::before{

content:"";
position:absolute;
width:80%;
height:2px;
background:#303a56;
top:50%;
left:10%;
z-index:1;

}


/* years */

.lzxyear{

position:relative;
z-index:2;
color:#9aa6d4;
font-size:16px;
cursor:pointer;
padding:8px 14px;

}


/* circle */

.lzxyear::before{

content:"";
position:absolute;
top:-18px;
left:50%;
transform:translateX(-50%);
width:14px;
height:14px;
border-radius:50%;
border:2px solid #f5a623;
background:#060c16;

}


/* active */

.lzxyear.active{

color:white;
font-weight:600;

}

.lzxyear.active::before{

background:#f5a623;

}



/* responsive */

@media(max-width:900px){

.lzxtimeline-wrapper{

flex-direction:column;

}

.lzxtimeline-year{

font-size:110px;

}

.lzxtimeline-left,
.lzxtimeline-right{

width:100%;

}

}



/* SECTION */

.qz_roi_section_9081{

/*background:#050b14;*/
background:lightsalmon;
padding:140px 0;
font-family:Poppins,sans-serif;

}


/* CONTAINER */

.qz_roi_container_1181{

width:90%;
max-width:1300px;
margin:auto;

}


/* IMAGE WRAPPER */

.qz_roi_img_wrapper_5511{

position:relative;
width:78%;
margin-left:auto;

/* smooth floating animation */

animation:qzFloatMotionSafe 20s ease-in-out infinite;

}


/* IMAGE */

.qz_roi_img_7711{

width:100%;
border-radius:20px;
display:block;
object-fit:cover;
box-shadow:0 40px 80px rgba(0,0,0,0.7);

}


/* FLOAT ANIMATION */

@keyframes qzFloatMotionSafe{

0%{
transform:translateY(10px);
}

50%{
transform:translateY(-80px) scale(1.05);
}

100%{
transform:translateY(10px);
}

}


/* TEXT CARD */

.qz_roi_card_2211{

position:absolute;
top:0;
left:-286px;

width:499px;

background:#e2d3d659;

padding:34px 38px;

border-radius:22px;

color:#fff;

box-shadow:0 25px 60px rgba(0,0,0,0.6);

}


/* TITLE */

.qz_roi_title_1101{

font-size:28px;
margin-bottom:16px;
font-weight:600;

}


/* TEXT */

.qz_roi_text_6611{

font-size:12px;
line-height:1.7;
color:#11151e;
max-width:440px;

}


/* RESPONSIVE */

@media(max-width:900px){

.qz_roi_img_wrapper_5511{

width:100%;

}

.qz_roi_card_2211{

position:relative;
left:0;
margin-bottom:30px;
width:100%;

}

}




/* SECTION */

.qz_roi_section_mirror_9082{

background:lightsalmon;
padding:140px 0;
font-family:Poppins,sans-serif;

}


/* CONTAINER */

.qz_roi_container_mirror_1182{

width:90%;
max-width:1300px;
margin:auto;

}


/* IMAGE WRAPPER */

.qz_roi_img_wrapper_mirror_5512{

position:relative;
width:78%;
margin-right:auto;

/* floating animation */

animation:qzFloatMotionMirror 10s ease-in-out infinite;

}


/* IMAGE */

.qz_roi_img_mirror_7712{

width:100%;
border-radius:20px;
display:block;
object-fit:cover;
box-shadow:0 40px 80px rgba(0,0,0,0.7);

}


/* TEXT CARD */

.qz_roi_card_mirror_2212{

position:absolute;
top:0;
right:-256px;

width:396px;

background:#e2d3d659;

padding:34px 38px;

border-radius:22px;

color:#fff;

box-shadow:0 25px 60px rgba(0,0,0,0.6);

}


/* TITLE */

.qz_roi_title_mirror_1102{

font-size:28px;
margin-bottom:16px;
font-weight:600;

}


/* TEXT */

.qz_roi_text_mirror_6612{

font-size:12px;
line-height:1.7;
color:#11151e;
max-width:440px;

}


/* FLOAT ANIMATION */

@keyframes qzFloatMotionMirror{

0%{
transform:translateY(10px);
}

50%{
transform:translateY(-80px) scale(1.05);
}

100%{
transform:translateY(10px);
}

}


/* RESPONSIVE */

@media(max-width:900px){

.qz_roi_img_wrapper_mirror_5512{

width:100%;

}

.qz_roi_card_mirror_2212{

position:relative;
right:0;
margin-bottom:30px;
width:100%;

}

}









/* animations */

@keyframes heroFade{

to{

opacity:1;
transform:translateY(0);

}

}

@keyframes blink{

0%{border-color:transparent}
50%{border-color:#ffb347}
100%{border-color:transparent}

}

@keyframes typingGradient{

0%{
background-position:0%;
}

100%{
background-position:300%;
}

}