/*==================================================
OMISAI INVENTIONS
Premium Website
Author: ChatGPT
==================================================*/

/*==============================
ROOT VARIABLES
==============================*/

:root{

--primary:#F59E0B;
--primary-dark:#d97706;
--secondary:#1b1b1b;
--background:#050505;
--surface:rgba(255,255,255,.06);
--glass:rgba(255,255,255,.08);
--white:#ffffff;
--text:#d9d9d9;
--shadow:0 20px 60px rgba(0,0,0,.45);
--radius:20px;
--transition:.4s ease;

}

/*==============================
LIGHT MODE
==============================*/

body.light{

--background:#f5f5f5;
--secondary:#ffffff;
--surface:rgba(255,255,255,.9);
--glass:rgba(255,255,255,.7);
--text:#333333;
--white:#111111;

}

/*==============================
RESET
==============================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
background:var(--background);
color:var(--white);
overflow-x:hidden;
transition:.4s;

}

/*==============================
SCROLLBAR
==============================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:var(--primary);
border-radius:30px;

}

/*==============================
THREE JS CANVAS
==============================*/

#universe{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-30;

}

/*==============================
VIDEO
==============================*/

#heroVideo{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-25;
opacity:.35;

}

.videoOverlay{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:

linear-gradient(

180deg,

rgba(0,0,0,.45),

rgba(0,0,0,.85)

);

z-index:-20;

}

/*==============================
PRELOADER
==============================*/

#loader{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
transition:.8s;

}

.loader-logo{

text-align:center;

}

.loader-logo h1{

font-size:55px;
color:var(--primary);

}

.loader-logo p{

margin-top:15px;
color:#bbb;

}

.loader-ring{

width:90px;
height:90px;
border-radius:50%;
border:6px solid rgba(255,255,255,.1);
border-top:6px solid var(--primary);
margin:auto;
margin-bottom:20px;
animation:spin 1.2s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/*==============================
HEADER
==============================*/

header{

position:fixed;
top:0;
left:0;
width:100%;
padding:20px 7%;
display:flex;
justify-content:space-between;
align-items:center;
background:rgba(0,0,0,.35);
backdrop-filter:blur(16px);
z-index:1000;

}

.logo{

display:flex;
flex-direction:column;
font-weight:700;

}

.logo span{

font-size:30px;
color:var(--primary);

}

.logo small{

letter-spacing:4px;
font-size:11px;
text-transform:uppercase;

}

nav{

display:flex;
gap:35px;

}

nav a{

color:white;
text-decoration:none;
font-weight:500;
position:relative;

}

nav a::after{

content:'';
position:absolute;
bottom:-8px;
left:0;
width:0;
height:2px;
background:var(--primary);
transition:.3s;

}

nav a:hover::after{

width:100%;

}

.navIcons{

display:flex;
gap:15px;

}

.navIcons button{

width:45px;
height:45px;
border:none;
border-radius:50%;
background:var(--surface);
color:white;
cursor:pointer;
transition:.3s;

}

.navIcons button:hover{

background:var(--primary);

}

/*==============================
HERO
==============================*/

.hero{

min-height:100vh;
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
padding:120px 8%;
gap:50px;

}

.badge{

display:inline-block;
padding:10px 20px;
border-radius:40px;
background:rgba(245,158,11,.15);
border:1px solid rgba(245,158,11,.35);
margin-bottom:25px;

}

.hero h1{

font-size:68px;
line-height:1.1;
margin-bottom:25px;

}

.hero h1 span{

display:block;
color:var(--primary);

}

.hero p{

font-size:18px;
line-height:1.9;
color:var(--text);
max-width:650px;

}

.heroButtons{

margin-top:40px;
display:flex;
gap:20px;

}

/*==============================
BUTTONS
==============================*/

.btnPrimary{

padding:16px 40px;
border-radius:50px;
background:var(--primary);
color:white;
text-decoration:none;
font-weight:600;
transition:.35s;
display:inline-block;

}

.btnPrimary:hover{

transform:translateY(-6px);
box-shadow:0 20px 45px rgba(245,158,11,.45);

}

.btnOutline{

padding:16px 40px;
border-radius:50px;
border:2px solid var(--primary);
color:white;
text-decoration:none;
transition:.35s;

}

.btnOutline:hover{

background:var(--primary);

}

/*==============================
GLOBE
==============================*/

#globeContainer{

width:100%;
height:600px;

}

/*==============================
SECTIONS
==============================*/

section{

padding:110px 8%;

}

.sectionTitle{

text-align:center;
margin-bottom:70px;

}

.sectionTitle h2{

font-size:50px;
margin-bottom:15px;

}

.sectionTitle p{

color:var(--text);
font-size:18px;

}

/*==================================================
ABOUT SECTION
==================================================*/

.aboutGrid{

display:grid;
grid-template-columns:1.2fr .8fr;
gap:60px;
align-items:center;

}

.aboutGrid h3{

font-size:38px;
margin-bottom:25px;
color:var(--primary);

}

.aboutGrid p{

line-height:2;
color:var(--text);
margin-bottom:20px;

}

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

.glassCard{

background:var(--glass);
backdrop-filter:blur(18px);
padding:40px;
border-radius:var(--radius);
border:1px solid rgba(255,255,255,.08);
box-shadow:var(--shadow);

}

.glassCard h3{

margin-bottom:25px;

}

.glassCard ul{

list-style:none;

}

.glassCard li{

padding:14px 0;
border-bottom:1px solid rgba(255,255,255,.08);
color:var(--text);

}

.glassCard li:last-child{

border:none;

}

/*==================================================
INVENTION CARDS
==================================================*/

.cards{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:35px;

}

.card{

position:relative;
overflow:hidden;
padding:40px;
border-radius:25px;
background:var(--glass);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.08);
transition:.45s ease;
transform-style:preserve-3d;
perspective:1000px;
cursor:pointer;

}

.card::before{

content:"";
position:absolute;
top:-60%;
left:-60%;
width:220%;
height:220%;
background:radial-gradient(circle,
rgba(245,158,11,.18),
transparent 65%);
transform:rotate(25deg);
opacity:0;
transition:.5s;

}

.card:hover::before{

opacity:1;

}

.card:hover{

transform:
rotateX(8deg)
rotateY(-8deg)
translateY(-15px)
scale(1.02);

box-shadow:
0 30px 60px rgba(245,158,11,.25);

}

.card .icon{

font-size:70px;
margin-bottom:20px;

}

.card h3{

font-size:28px;
margin-bottom:18px;
color:var(--primary);

}

.card p{

line-height:1.9;
color:var(--text);

}

.card button{

margin-top:30px;
padding:14px 30px;
border:none;
border-radius:40px;
background:var(--primary);
color:white;
cursor:pointer;
transition:.3s;

}

.card button:hover{

transform:scale(1.05);

}

/*==================================================
COUNTERS
==================================================*/

.statsContainer{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;

}

.statCard{

text-align:center;
padding:45px;
border-radius:25px;
background:var(--glass);
backdrop-filter:blur(16px);
transition:.4s;

}

.statCard:hover{

transform:translateY(-10px);

}

.statCard h2{

font-size:60px;
color:var(--primary);

}

.statCard p{

margin-top:15px;
font-size:18px;
color:var(--text);

}

/*==================================================
TIMELINE
==================================================*/

.timeline{

position:relative;
max-width:900px;
margin:auto;

}

.timeline::before{

content:"";
position:absolute;
left:50%;
top:0;
width:3px;
height:100%;
background:var(--primary);

}

.timelineItem{

display:flex;
justify-content:space-between;
align-items:center;
margin:70px 0;

}

.timelineItem:nth-child(even){

flex-direction:row-reverse;

}

.year{

width:140px;
height:140px;
border-radius:50%;
background:var(--primary);
display:flex;
justify-content:center;
align-items:center;
font-size:28px;
font-weight:bold;
color:white;
z-index:2;

}

.timeline .content{

width:42%;
padding:30px;
background:var(--glass);
border-radius:20px;
line-height:1.8;

}

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

#cta{

text-align:center;

}

.ctaGlass{

padding:80px;
border-radius:35px;
background:var(--glass);
backdrop-filter:blur(20px);

}

.ctaGlass h2{

font-size:48px;
margin-bottom:25px;

}

.ctaGlass p{

font-size:19px;
color:var(--text);
margin-bottom:35px;

}

/*==================================================
CONTACT
==================================================*/

.contactContainer{

display:grid;
grid-template-columns:1fr 1fr;
gap:50px;

}

.contactInfo{

padding:35px;

}

.contactInfo h3{

font-size:35px;
margin-bottom:30px;
color:var(--primary);

}

.contactInfo p{

margin-bottom:22px;
font-size:18px;
color:var(--text);

}

.contactInfo i{

width:35px;
color:var(--primary);

}

.contactForm{

display:flex;
flex-direction:column;
gap:20px;

}

.contactForm input,
.contactForm textarea{

background:var(--glass);
border:none;
outline:none;
padding:18px;
border-radius:15px;
color:white;
font-size:16px;
resize:none;

}

.contactForm textarea{

min-height:180px;

}

.contactForm button{

align-self:flex-start;

}

/*==================================================
FOOTER
==================================================*/

footer{

text-align:center;
padding:70px 20px;
background:#090909;

}

footer h2{

color:var(--primary);
margin-bottom:20px;

}

footer p{

margin-top:10px;
color:#bdbdbd;

}

.socials{

margin:35px 0;

}

.socials a{

display:inline-flex;
justify-content:center;
align-items:center;
width:55px;
height:55px;
margin:0 10px;
border-radius:50%;
background:var(--glass);
color:white;
font-size:22px;
transition:.35s;
text-decoration:none;

}

.socials a:hover{

background:var(--primary);
transform:translateY(-8px);

}
/*==================================================
CHATBOT
==================================================*/

#chatToggle{

position:fixed;
right:30px;
bottom:30px;
width:70px;
height:70px;
border:none;
border-radius:50%;
background:var(--primary);
color:#fff;
font-size:28px;
cursor:pointer;
box-shadow:0 10px 30px rgba(245,158,11,.45);
z-index:999;
transition:.35s;

}

#chatToggle:hover{

transform:scale(1.08);

}

#chatbot{

position:fixed;
right:30px;
bottom:120px;
width:360px;
height:520px;
background:rgba(15,15,15,.92);
backdrop-filter:blur(18px);
border-radius:25px;
overflow:hidden;
display:none;
flex-direction:column;
box-shadow:0 30px 80px rgba(0,0,0,.5);
z-index:999;

}

#chatHeader{

padding:18px;
background:var(--primary);
font-weight:600;
color:#fff;

}

#chatMessages{

flex:1;
padding:20px;
overflow-y:auto;

}

#chatMessages .bot{

padding:15px;
border-radius:15px;
background:rgba(255,255,255,.08);
line-height:1.7;

}

#chatInput{

display:flex;
padding:15px;
gap:10px;

}

#chatInput input{

flex:1;
padding:14px;
border:none;
border-radius:12px;
background:#1e1e1e;
color:#fff;
outline:none;

}

#chatInput button{

width:50px;
border:none;
border-radius:12px;
background:var(--primary);
color:#fff;
cursor:pointer;

}

/*==================================================
FLOATING PARTICLES
==================================================*/

#particles{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
overflow:hidden;
z-index:-5;

}

.particle{

position:absolute;
border-radius:50%;
background:rgba(245,158,11,.5);
animation:particleFloat linear infinite;

}

@keyframes particleFloat{

0%{

transform:translateY(100vh) scale(.2);
opacity:0;

}

20%{

opacity:1;

}

100%{

transform:translateY(-120vh) scale(1);
opacity:0;

}

}

/*==================================================
ANIMATIONS
==================================================*/

.fadeUp{

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

}

.fadeLeft{

opacity:0;
transform:translateX(-80px);

}

.fadeRight{

opacity:0;
transform:translateX(80px);

}

.zoomIn{

opacity:0;
transform:scale(.7);

}

/*==================================================
GLOW EFFECTS
==================================================*/

.glow{

box-shadow:

0 0 20px rgba(245,158,11,.3),

0 0 50px rgba(245,158,11,.2),

0 0 90px rgba(245,158,11,.15);

}

.neonText{

color:var(--primary);

text-shadow:

0 0 10px rgba(245,158,11,.8),

0 0 30px rgba(245,158,11,.5),

0 0 60px rgba(245,158,11,.3);

}

/*==================================================
UTILITY
==================================================*/

.hidden{

display:none;

}

.center{

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

}

.text-center{

text-align:center;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1200px){

.hero{

grid-template-columns:1fr;

text-align:center;

}

.heroButtons{

justify-content:center;

}

#globeContainer{

height:450px;

}

.aboutGrid{

grid-template-columns:1fr;

}

.contactContainer{

grid-template-columns:1fr;

}

.timeline::before{

left:30px;

}

.timelineItem{

flex-direction:column !important;
align-items:flex-start;
padding-left:70px;

}

.timeline .content{

width:100%;

}

.year{

width:70px;
height:70px;
font-size:20px;
position:absolute;
left:0;

}

}

@media(max-width:768px){

header{

padding:18px 25px;

}

nav{

display:none;

}

.hero{

padding-top:160px;

}

.hero h1{

font-size:44px;

}

.hero p{

font-size:16px;

}

.sectionTitle h2{

font-size:34px;

}

.cards{

grid-template-columns:1fr;

}

.statsContainer{

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

}

.ctaGlass{

padding:40px 25px;

}

.ctaGlass h2{

font-size:32px;

}

#chatbot{

width:95%;
right:2.5%;
height:480px;

}

}

@media(max-width:520px){

.statsContainer{

grid-template-columns:1fr;

}

.heroButtons{

flex-direction:column;

}

.btnPrimary,
.btnOutline{

width:100%;
text-align:center;

}

.logo span{

font-size:24px;

}

}

/*==================================================
END
==================================================*/