*{
    margin-top:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}

body{
    background:#0a0a23;
    color:white;
}

.navbar{
    position:fixed;
    width:100%;
    padding:25px 60px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:rgba(0,0,0,0.7);
    z-index:1000;
}

.logo{
    font-size:32px;
    font-weight:bold;
}

nav{
    display:flex;
    gap:30px;
}

nav a{
    color:white;
    text-decoration:none;
}

.hero{
    height:100vh;
    background:
    linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),
    url('../Images/banner.jpg');

    background-size:cover;
    background-position:center;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.hero-content h1{
    font-size:70px;
}

.hero-content p{
    margin:20px 0;
    font-size:22px;
    margin-bottom:45px;
}

.hero-btn{
    padding:15px 35px;
    background:#6c63ff;
    color:white;
    text-decoration:none;
    border-radius:30px;
}

.about{
    padding:100px;
    text-align:center;
}

.about h2{
    font-size:50px;
    margin-bottom:20px;
}

.services{
    padding:100px;
    background:#111133;
    text-align:center;
}

.service-grid{
    display:flex;
    justify-content:center;
    gap:30px;
    margin-top:40px;
}

.service-card{
    width:300px;
    padding:30px;
    background:rgba(255,255,255,0.1);
    backdrop-filter:blur(10px);
    border-radius:20px;
}

.stats{
    padding:100px;
    display:flex;
    justify-content:center;
    gap:100px;
    text-align:center;
}

.stat h2{
    font-size:60px;
    color:#6c63ff;
}

.testimonials{
    padding:100px;
    background:#111133;
    text-align:center;
}

.testimonial-grid{
    display:flex;
    gap:30px;
    justify-content:center;
    margin-top:40px;
}

.testimonial-card{
    width:300px;
    padding:30px;
    background:white;
    color:black;
    border-radius:20px;
}

.cta{
    padding:100px;
    text-align:center;
}

.footer{
    padding:30px;
    background:black;
    text-align:center;
}
/* ABOUT HERO */
.about-hero{
    height:100vh;
    background:url('../Images/about-banner.jpg');
    background-size:cover;
    background-position:center;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.about-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.65);
}

.about-hero-content{
    position:relative;
    z-index:2;
    color:white;
}

.about-hero-content h1{
    font-size:70px;
}

.about-hero-content p{
    margin-top:20px;
    font-size:22px;
}


/* STORY */
.story-section{
    padding:100px;
    display:flex;
    align-items:center;
    gap:50px;
}

.story-left{
    flex:1;
}

.story-left h2{
    font-size:50px;
    margin-bottom:20px;
}

.story-right img{
    width:500px;
    border-radius:20px;
}


/* VALUES */
.values-section{
    padding:100px;
    background:#111133;
    text-align:center;
}

.values-grid{
    display:flex;
    gap:30px;
    margin-top:40px;
    justify-content:center;
}

.value-card{
    width:300px;
    padding:30px;
    background:rgba(255,255,255,0.08);
    border-radius:20px;
}


/* TIMELINE */
.timeline-section{
    padding:100px;
    text-align:center;
}

.timeline{
    display:flex;
    justify-content:center;
    gap:30px;
    margin-top:40px;
}

.timeline-box{
    background:#6c63ff;
    padding:30px;
    border-radius:20px;
}


/* TEAM */
.team-section{
    padding:100px;
    background:#111133;
    text-align:center;
}

.team-grid{
    display:flex;
    justify-content:center;
    gap:30px;
    margin-top:40px;
}

.team-card{
    width:280px;
    background:white;
    color:black;
    padding:20px;
    border-radius:20px;
}

.team-card img{
    width:100%;
    border-radius:15px;
}


/* STATS */
.about-stats{
    padding:100px;
    display:flex;
    justify-content:center;
    gap:80px;
}

.about-stat h2{
    font-size:60px;
    color:#6c63ff;
}


/* CTA */
.about-cta{
    padding:100px;
    text-align:center;
    background:#111133;
}

.about-cta a{
    display:inline-block;
    margin-top:20px;
    padding:15px 35px;
    background:#6c63ff;
    color:white;
    text-decoration:none;
    border-radius:30px;
}
/* PAGE HERO */
.page-hero{
padding:180px 20px 100px;
text-align:center;
background:linear-gradient(135deg,#0a0a23,#111144);
color:white;
}

.page-hero h1{
font-size:60px;
margin-bottom:20px;
}

.page-hero p{
font-size:20px;
color:#ccc;
}

/* SERVICES */
.service-section{
    padding:100px 80px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:35px;
    background:#05052d;
}

.service-box{
    background:white;
    padding:40px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.15);
    transition:0.4s ease;
    cursor:pointer;
}

.service-box:hover{
transform:translateY(-10px);
}

.service-box h2{
    font-size:32px;
    color:#111;
    margin-bottom:20px;
}

/* PARAGRAPH */
.service-box p{
    font-size:18px;
    color:#555;
    line-height:1.6;
}

/* HOVER EFFECT */
.service-box:hover{
    transform:translateY(-10px);
    background:linear-gradient(135deg,#6c63ff,#3d32d4);
}

.service-box:hover h2,
.service-box:hover p{
    color:white;
}

/* CAREERS */
/* CAREER SECTION */
.career-grid{
    padding:100px 80px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:35px;
    background:#05052d;
}

/* CAREER CARD */
.career-card{
    background:white;
    padding:40px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.15);
    transition:0.4s ease;
    cursor:pointer;
}

/* TITLE */
.career-card h2{
    font-size:30px;
    color:#111;
    margin-bottom:15px;
}

/* DESCRIPTION */
.career-card p{
    font-size:18px;
    color:#555;
    line-height:1.6;
}

/* HOVER EFFECT */
.career-card:hover{
    transform:translateY(-10px);
    background:linear-gradient(135deg,#6c63ff,#3d32d4);
}

.career-card:hover h2,
.career-card:hover p{
    color:white;
}

/* BENEFITS SECTION */
.career-benefits{
    padding:100px 20px;
    background:#111144;
    color:white;
    text-align:center;
}

.career-benefits h2{
    font-size:45px;
    margin-bottom:40px;
}

.benefit-row{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:25px;
}

.benefit-row div{
    background:white;
    color:#111;
    padding:20px 30px;
    border-radius:15px;
    font-weight:600;
    transition:0.3s;
}

.benefit-row div:hover{
    background:#6c63ff;
    color:white;
}

/* CONTACT */
.contact-form-section{
    padding:100px 20px;
    background:#05052d;
    display:flex;
    justify-content:center;
    align-items:center;
}
.contact-form{
    width:650px;
    background:white;
    padding:50px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,0.25);
    display:flex;
    flex-direction:column;
    gap:20px;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:18px;
    border:none;
    border-radius:12px;
    background:#f2f2f2;
    font-size:16px;
    color:#111;
    outline:none;
}

.contact-form textarea{
    height:150px;
    resize:none;
}

.contact-form button{
    padding:18px;
    border:none;
    border-radius:12px;
    background:linear-gradient(135deg,#6c63ff,#3d32d4);
    color:white;
    font-size:18px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
}

/* BUTTON HOVER */
.contact-form button:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(108,99,255,0.4);
}


/* ========================= */
/* GLOBAL RESPONSIVE FIX */
/* ========================= */

img{
    max-width:100%;
    height:auto;
}

/* FLEX WRAP FIX */
.service-grid,
.testimonial-grid,
.team-grid,
.values-grid,
.timeline,
.stats,
.about-stats,
.benefit-row{
    flex-wrap:wrap;
}

/* ========================= */
/* TABLET (768px) */
/* ========================= */
@media (max-width: 1024px){

.navbar{
    padding:20px 30px;
}

.hero-content h1,
.about-hero-content h1{
    font-size:50px;
}

.service-grid,
.testimonial-grid,
.team-grid,
.values-grid{
    gap:20px;
}

.service-card,
.testimonial-card,
.value-card,
.team-card{
    width:45%;
}

.story-section{
    flex-direction:column;
    text-align:center;
}

.story-right img{
    width:100%;
}

}

/* ========================= */
/* MOBILE (768px) */
/* ========================= */
@media (max-width: 768px){

/* NAVBAR */
.navbar{
    flex-direction:column;
    gap:15px;
    padding:15px;
}

nav{
    flex-wrap:wrap;
    justify-content:center;
    gap:15px;
}

/* HERO */
.hero-content h1,
.about-hero-content h1{
    font-size:32px;
}

.hero-content p{
    font-size:16px;
}

/* SECTIONS */
.about,
.services,
.stats,
.testimonials,
.cta,
.story-section,
.values-section,
.timeline-section,
.team-section,
.about-stats,
.contact-form-section,
.service-section,
.career-grid{
    padding:60px 20px;
}

/* GRID → 1 COLUMN */
.service-grid,
.testimonial-grid,
.team-grid,
.values-grid,
.timeline{
    flex-direction:column;
    align-items:center;
}

.service-card,
.testimonial-card,
.value-card,
.team-card{
    width:100%;
}

/* SERVICES PAGE GRID FIX */
.service-section{
    grid-template-columns:1fr;
}

/* CAREERS */
.career-grid{
    grid-template-columns:1fr;
}

/* STATS */
.stats,
.about-stats{
    flex-direction:column;
    gap:30px;
}

/* CONTACT */
.contact-form{
    width:100%;
    padding:30px;
}

}

/* ========================= */
/* SMALL MOBILE (480px) */
/* ========================= */
@media (max-width: 480px){

.hero-content h1{
    font-size:26px;
}

.page-hero h1{
    font-size:32px;
}

.logo{
    font-size:24px;
}

.hero-btn{
    padding:10px 20px;
    font-size:14px;
}

}


/* ================= HERO NEW ================= */
.hero-new{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:150px 10%;
    gap:50px;
}

.hero-left h1{
    font-size:60px;
    line-height:1.2;
}

.hero-left span{
    background:linear-gradient(90deg,#6c63ff,#9f7bff);
    -webkit-background-clip:text;
    color:transparent;
}

.hero-buttons{
    margin-top:30px;
}

.btn-primary{
    padding:12px 25px;
    background:#6c63ff;
    border-radius:25px;
    color:white;
    text-decoration:none;
    margin-right:15px;
}

.btn-outline{
    padding:12px 25px;
    border:1px solid #6c63ff;
    border-radius:25px;
    color:white;
    text-decoration:none;
}

.hero-right img{
    width:400px;
}


/* TRUST */
.trust{
    text-align:center;
    padding:20px;
    background:#111133;
}


/* FEATURES */
.features{
    padding:100px;
    text-align:center;
}

.feature-grid{
    display:flex;
    justify-content:center;
    gap:30px;
    margin-top:40px;
}

.feature-card{
    width:300px;
    padding:30px;
    background:rgba(255,255,255,0.08);
    border-radius:20px;
    transition:0.3s;
}

.feature-card:hover{
    transform:translateY(-10px);
}

.highlight{
    background:linear-gradient(135deg,#6c63ff,#3d32d4);
}


/* SPLIT */
.split{
    display:flex;
    padding:100px;
    align-items:center;
    gap:50px;
}

.split-left img{
    width:450px;
    border-radius:20px;
}

.split-right ul{
    margin-top:20px;
}


/* STATS */
.stats-new{
    display:flex;
    justify-content:center;
    gap:80px;
    padding:100px;
}

.stat-box h2{
    font-size:50px;
    color:#6c63ff;
}


/* CTA */
.cta-new{
    text-align:center;
    padding:100px;
    background:#111133;
}
/* INTRO */
.about-intro{
    padding:150px 15%;
    text-align:center;
}

.about-intro h1{
    font-size:55px;
    margin-bottom:30px;
}


/* STORY OVERLAY */
.about-story-modern{
    position:relative;
    height:80vh;
}

.story-bg{
    width:100%;
    height:100%;
    object-fit:cover;
}

.story-overlay-content{
    position:absolute;
    bottom:50px;
    left:50px;
    background:rgba(0,0,0,0.7);
    padding:30px;
    border-radius:20px;
}


/* TIMELINE */
/* SECTION */
.timeline-flow{
    padding:120px 10%;
    background:#060622;
    position:relative;
    text-align:center;
}

.timeline-title{
    font-size:42px;
    margin-bottom:80px;
}


/* TRACK LINE (GLOWING) */
.timeline-track{
    position:relative;
    margin:0 auto;
    width:4px;
    background:linear-gradient(to bottom,#6c63ff,#9f7bff);
    box-shadow:0 0 20px rgba(108,99,255,0.6);
}


/* NODE */
.timeline-node{
    position:relative;
    width:100%;
    margin:80px 0;
}


/* DOT */
.dot{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:18px;
    height:18px;
    background:#6c63ff;
    border-radius:50%;
    box-shadow:0 0 15px #6c63ff;
    z-index:2;
    transition:0.3s;
}


/* CONTENT BOX */
.content{
    width:320px;
    padding:20px;
    background:rgba(255,255,255,0.05);
    border-radius:15px;
    position:relative;
    backdrop-filter:blur(10px);
    transition:0.3s;
}


/* LEFT / RIGHT ALTERNATE */
.timeline-node:nth-child(odd) .content{
    margin-left:60px;
}

.timeline-node:nth-child(even) .content{
    margin-left:-380px;
}


/* HOVER EFFECT */
.timeline-node:hover .dot{
    transform:translateX(-50%) scale(1.5);
    box-shadow:0 0 25px #9f7bff;
}

.timeline-node:hover .content{
    transform:translateY(-10px);
    background:linear-gradient(135deg,#6c63ff22,#9f7bff22);
}


/* TEXT */
.content h3{
    color:#9f7bff;
    margin-bottom:10px;
}


/* PHILOSOPHY */
.philosophy{
    display:flex;
    padding:100px 15%;
    gap:50px;
}

.philo-left{
    flex:1;
}

.philo-right{
    flex:2;
}


/* STATS FLOAT */
.stats-floating-modern{
    display:flex;
    justify-content:center;
    gap:50px;
    padding:100px;
}

.stat-circle{
    background:#111133;
    padding:40px;
    border-radius:50%;
    text-align:center;
}


/* TEAM */
.team-modern{
    padding:100px;
    text-align:center;
}

.team-row{
    display:flex;
    gap:30px;
    justify-content:center;
}

.team-member{
    position:relative;
    width:250px;
}

.team-member img{
    width:100%;
    border-radius:20px;
}

.overlay{
    position:absolute;
    bottom:0;
    background:rgba(0,0,0,0.7);
    width:100%;
    padding:15px;
}


/* CTA */
.about-cta-modern{
    text-align:center;
    padding:100px;
    background:#111133;
}

body{
    font-family:'Inter',sans-serif;
    background:#05051a;
    color:white;
}


/* HERO */
.services-hero{
    text-align:center;
    padding:150px 10%;
}

.services-hero h1{
    font-size:55px;
}

.services-hero span{
    background:linear-gradient(90deg,#6c63ff,#9f7bff);
    -webkit-background-clip:text;
    color:transparent;
}


/* SERVICE FLOW */
.service-flow{
    padding:100px 10%;
}

.service-block{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:100px 0;
    gap:50px;
}

.service-block.reverse{
    flex-direction:row-reverse;
}

.service-text{
    flex:1;
}

.service-text h2{
    font-size:36px;
    margin-bottom:20px;
}

.service-text ul{
    margin-top:15px;
    line-height:1.8;
}

.service-visual{
    flex:1;
}

.service-visual img{
    width:100%;
    border-radius:20px;
    transition:0.4s;
}

.service-visual img:hover{
    transform:scale(1.05);
}


/* PROCESS LINE */
.process-line{
    padding:120px 10%;
    text-align:center;
}

.steps{
    display:flex;
    justify-content:center;
    gap:50px;
    margin-top:60px;
}

.step{
    text-align:center;
}

.step span{
    display:block;
    font-size:28px;
    color:#6c63ff;
    margin-bottom:10px;
}


/* CTA */
.services-cta{
    text-align:center;
    padding:120px;
    background:#0b0b2d;
}

.services-cta a{
    padding:12px 30px;
    background:#6c63ff;
    border-radius:25px;
    text-decoration:none;
    color:white;
}


/* FOOTER */
.footer{
    text-align:center;
    padding:40px;
}





body{
    font-family:'Inter',sans-serif;
    background:#05051a;
    color:white;
}


/* HERO */
.careers-hero{
    text-align:center;
    padding:150px 10%;
}

.careers-hero h1{
    font-size:55px;
}


/* CULTURE STRIP */
.culture-strip{
    display:flex;
    justify-content:center;
    gap:50px;
    padding:80px;
}

.culture-item{
    text-align:center;
}


/* JOBS */
.jobs{
    padding:100px 20%;
}

.job{
    border-bottom:1px solid rgba(255,255,255,0.2);
    padding:20px 0;
    cursor:pointer;
}

.job-header{
    display:flex;
    justify-content:space-between;
}

.job-body{
    max-height:0;
    overflow:hidden;
    transition:0.3s;
}

.job.active .job-body{
    max-height:200px;
    margin-top:15px;
}


/* HIRING FLOW */
.hiring-flow{
    text-align:center;
    padding:100px;
}

.flow{
    display:flex;
    justify-content:center;
    gap:50px;
    margin-top:50px;
}

.flow-step h3{
    color:#6c63ff;
}


/* CTA */
.careers-cta{
    text-align:center;
    padding:100px;
    background:#0b0b2d;
}

.careers-cta a{
    background:#6c63ff;
    padding:12px 25px;
    border-radius:25px;
    text-decoration:none;
    color:white;
}


body{
    font-family:'Inter',sans-serif;
    background:#05051a;
    color:white;
}


/* HERO */
.contact-hero{
    text-align:center;
    padding:140px 10%;
}

.contact-hero h1{
    font-size:50px;
}


/* MAIN */
.contact-main{
    display:flex;
    justify-content:center;
    gap:80px;
    padding:80px 10%;
}


/* LEFT INFO */
.contact-info{
    width:350px;
}

.info-box{
    margin-top:25px;
    padding:20px;
    background:rgba(255,255,255,0.05);
    border-radius:15px;
}


/* FORM */
.contact-form{
    width:400px;
    padding:40px;
    background:rgba(255,255,255,0.05);
    border-radius:20px;
    backdrop-filter:blur(10px);
}

.input-group{
    margin-bottom:20px;
}

.input-group label{
    display:block;
    margin-bottom:8px;
    font-size:14px;
}

input, select, textarea{
    width:100%;
    padding:12px;
    border:none;
    border-radius:10px;
    outline:none;
}

textarea{
    height:100px;
}


/* BUTTON */
button{
    width:100%;
    padding:12px;
    border:none;
    border-radius:25px;
    background:#6c63ff;
    color:white;
    font-size:16px;
    cursor:pointer;
}


/* CTA */
.contact-cta{
    text-align:center;
    padding:80px;
    background:#0b0b2d;
}


/* FOOTER */
.footer{
    text-align:center;
    padding:40px;
}

/* LOGO */
.logo{
    font-size:26px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:10px;
}

.logo-icon{
    background:linear-gradient(135deg,#6c63ff,#9f7bff);
    color:white;
    padding:6px 10px;
    border-radius:8px;
    font-weight:bold;
}

/* LOADER */
#loader{
    position:fixed;
    width:100%;
    height:100vh;
    background:#05051a;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.loader-logo{
    font-size:32px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:10px;
    animation:fadeIn 1s ease;
}

/* ANIMATION */
@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}


/* ========================================= */
/* 🔥 GLOBAL FLUID FIX (VERY IMPORTANT) */
/* ========================================= */

html{
    font-size: clamp(14px, 1vw, 18px);
}

section{
    width:100%;
    overflow:hidden;
}

body{
    overflow-x:hidden;
}

/* ========================================= */
/* 🔥 NAVBAR RESPONSIVE */
/* ========================================= */

@media (max-width: 900px){
.navbar{
    flex-direction:column;
    padding:15px 20px;
}

nav{
    flex-wrap:wrap;
    justify-content:center;
    gap:15px;
}
}

/* ========================================= */
/* 🔥 HERO NEW FIX */
/* ========================================= */

@media (max-width: 1024px){
.hero-new{
    flex-direction:column;
    text-align:center;
    padding:120px 5%;
}

.hero-left h1{
    font-size:42px;
}

.hero-right img{
    width:100%;
    max-width:400px;
}
}

/* ========================================= */
/* 🔥 FEATURES GRID */
/* ========================================= */

@media (max-width: 900px){
.feature-grid{
    flex-direction:column;
    align-items:center;
}

.feature-card{
    width:100%;
    max-width:400px;
}
}

/* ========================================= */
/* 🔥 SPLIT SECTION FIX */
/* ========================================= */

@media (max-width: 1024px){
.split{
    flex-direction:column;
    padding:80px 5%;
}

.split-left img{
    width:100%;
}
}

/* ========================================= */
/* 🔥 STATS FIX */
/* ========================================= */

@media (max-width: 768px){
.stats-new{
    flex-direction:column;
    gap:30px;
    text-align:center;
}
}

/* ========================================= */
/* 🔥 ABOUT PAGE FIX */
/* ========================================= */

@media (max-width: 1024px){
.about-intro{
    padding:120px 5%;
}

.about-intro h1{
    font-size:36px;
}

.story-overlay-content{
    left:20px;
    bottom:20px;
    width:90%;
}
}

/* ========================================= */
/* 🔥 TIMELINE FIX (VERY IMPORTANT) */
/* ========================================= */

@media (max-width: 768px){

.timeline-track{
    width:2px;
}

.timeline-node{
    margin:60px 0;
}

.content{
    width:90%;
    margin-left:20px !important;
}

}

/* ========================================= */
/* 🔥 PHILOSOPHY FIX */
/* ========================================= */

@media (max-width: 900px){
.philosophy{
    flex-direction:column;
    padding:80px 5%;
    text-align:center;
}
}

/* ========================================= */
/* 🔥 TEAM FIX */
/* ========================================= */

@media (max-width: 900px){
.team-row{
    flex-direction:column;
    align-items:center;
}

.team-member{
    width:100%;
    max-width:300px;
}
}

/* ========================================= */
/* 🔥 SERVICES PAGE FIX */
/* ========================================= */

@media (max-width: 1024px){
.service-block{
    flex-direction:column;
    text-align:center;
}

.service-block.reverse{
    flex-direction:column;
}
}

/* ========================================= */
/* 🔥 CAREERS PAGE FIX */
/* ========================================= */

@media (max-width: 900px){
.flow{
    flex-direction:column;
}
}

/* ========================================= */
/* 🔥 CONTACT PAGE FIX */
/* ========================================= */

@media (max-width: 1024px){
.contact-main{
    flex-direction:column;
    align-items:center;
    gap:40px;
}

.contact-info{
    width:100%;
    text-align:center;
}

.contact-form{
    width:100%;
    max-width:500px;
}
}

/* ========================================= */
/* 🔥 SMALL DEVICES (PHONES) */
/* ========================================= */

@media (max-width: 480px){

.hero-left h1{
    font-size:28px;
}

.page-hero h1{
    font-size:28px;
}

.logo{
    font-size:22px;
}

.btn-primary,
.btn-outline{
    display:block;
    margin:10px auto;
}

}