/*====================================================
  Young Thoughts Consultant Pvt. Ltd.
  Premium Enterprise Theme
====================================================*/

:root{

--primary:#5B7CFF;
--secondary:#8A5CFF;
--accent:#39D0FF;

--bg:#050816;
--bg-light:#0b1327;
--surface:rgba(255,255,255,.05);
--surface-2:rgba(255,255,255,.08);

--text:#ffffff;
--text-light:#c5cde0;
--border:rgba(255,255,255,.12);

--radius:20px;
--radius-lg:30px;

--shadow:0 20px 60px rgba(0,0,0,.45);

--transition:.35s ease;

--max-width:1320px;

}

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;

background:var(--bg);

color:var(--text);

line-height:1.7;

overflow-x:hidden;

}

body::before{

content:"";

position:fixed;

inset:0;

background:

radial-gradient(circle at top left,
rgba(91,124,255,.15),
transparent 40%),

radial-gradient(circle at bottom right,
rgba(138,92,255,.12),
transparent 45%);

pointer-events:none;

z-index:-2;

}

.container{

width:min(92%,var(--max-width));

margin:auto;

}

section{

padding:110px 0;

position:relative;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

/* Header */

.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

backdrop-filter:blur(18px);

background:rgba(5,8,22,.72);

border-bottom:1px solid rgba(255,255,255,.06);

}

.nav-container{

display:flex;

justify-content:space-between;

align-items:center;

height:82px;

}

.logo{

font-size:30px;

font-weight:800;

background:linear-gradient(90deg,var(--primary),var(--accent));

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.navigation{

display:flex;

gap:34px;

}

.navigation a{

font-size:15px;

color:var(--text-light);

transition:var(--transition);

}

.navigation a:hover{

color:#fff;

}

/* Buttons */

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 32px;

border-radius:999px;

font-weight:600;

transition:var(--transition);

cursor:pointer;

}

.btn-primary{

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:#fff;

box-shadow:0 12px 35px rgba(91,124,255,.35);

}

.btn-primary:hover{

transform:translateY(-4px);

}

.btn-secondary{

border:1px solid var(--border);

background:rgba(255,255,255,.04);

}

.btn-secondary:hover{

background:rgba(255,255,255,.08);

}

/* Hero */

.hero{

min-height:100vh;

display:flex;

align-items:center;

overflow:hidden;

}

.hero-grid{

display:grid;

grid-template-columns:1.2fr 1fr;

gap:70px;

align-items:center;

}

.hero-badge{

display:inline-block;

padding:10px 20px;

border-radius:999px;

background:rgba(91,124,255,.12);

border:1px solid rgba(91,124,255,.35);

margin-bottom:28px;

font-size:14px;

}

.hero h1{

font-size:64px;

line-height:1.08;

margin-bottom:28px;

}

.gradient-text{

background:linear-gradient(90deg,
var(--primary),
var(--secondary),
var(--accent));

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero p{

font-size:19px;

color:var(--text-light);

max-width:640px;

margin-bottom:38px;

}

.hero-actions{

display:flex;

gap:18px;

margin-bottom:55px;

flex-wrap:wrap;

}

.hero-metrics{

display:flex;

gap:60px;

}

.metric h2{

font-size:42px;

margin-bottom:8px;

}

.metric p{

font-size:14px;

color:var(--text-light);

}

.glass-panel{

padding:40px;

background:var(--surface);

border:1px solid var(--border);

border-radius:var(--radius-lg);

backdrop-filter:blur(22px);

box-shadow:var(--shadow);

}

.glass-panel h3{

margin-bottom:25px;

font-size:28px;

}

.glass-panel ul{

display:grid;

gap:16px;

}

.glass-panel li{

padding:12px 16px;

border-radius:14px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

}

/* Section Heading */

.section-header{

text-align:center;

max-width:850px;

margin:0 auto 70px;

}

.section-header span{

color:var(--accent);

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

font-size:13px;

display:block;

margin-bottom:16px;

}

.section-header h2{

font-size:48px;

margin-bottom:22px;

}

.section-header p{

color:var(--text-light);

font-size:18px;

}


/*====================================================
  style.css - Part 2
  Components, Cards, Grids & Enterprise Sections
====================================================*/

/* ---------- Layout Utilities ---------- */

.two-column{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:32px;
}

.three-column{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:30px;
}

.card-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px;
}

/* ---------- Generic Cards ---------- */

.content-card,
.service-card,
.feature-card,
.industry-card,
.insight-card,
.vision-card{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:34px;

    backdrop-filter:blur(18px);

    transition:var(--transition);

    position:relative;

    overflow:hidden;

}

.content-card::before,
.service-card::before,
.feature-card::before,
.industry-card::before,
.insight-card::before,
.vision-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    135deg,
    rgba(91,124,255,.08),
    rgba(57,208,255,.02));

    opacity:0;

    transition:.4s;

}

.content-card:hover,
.service-card:hover,
.feature-card:hover,
.industry-card:hover,
.insight-card:hover,
.vision-card:hover{

    transform:translateY(-8px);

    border-color:rgba(91,124,255,.35);

    box-shadow:var(--shadow);

}

.content-card:hover::before,
.service-card:hover::before,
.feature-card:hover::before,
.industry-card:hover::before,
.insight-card:hover::before,
.vision-card:hover::before{

    opacity:1;

}

.content-card>*,
.service-card>*,
.feature-card>*,
.industry-card>*,
.insight-card>*,
.vision-card>*{

    position:relative;

    z-index:2;

}

.content-card h3,
.service-card h3,
.feature-card h3,
.industry-card h3,
.insight-card h3,
.vision-card h3{

    font-size:24px;

    margin-bottom:18px;

}

.content-card p,
.service-card p,
.feature-card p,
.industry-card p,
.insight-card p,
.vision-card p{

    color:var(--text-light);

}

/* ---------- Technology Cloud ---------- */

.technology-cloud{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    justify-content:center;

}

.technology-cloud span{

    padding:14px 22px;

    border-radius:999px;

    border:1px solid var(--border);

    background:rgba(255,255,255,.04);

    transition:var(--transition);

    font-weight:500;

}

.technology-cloud span:hover{

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    border-color:transparent;

    transform:translateY(-4px);

}

/* ---------- Timeline ---------- */

.timeline{

    display:grid;

    gap:26px;

}

.timeline-item{

    padding:30px;

    border-left:4px solid var(--primary);

    background:rgba(255,255,255,.04);

    border-radius:0 var(--radius) var(--radius) 0;

    transition:var(--transition);

}

.timeline-item:hover{

    transform:translateX(8px);

    box-shadow:var(--shadow);

}

.timeline-item h3{

    margin-bottom:12px;

    font-size:24px;

}

.timeline-item p{

    color:var(--text-light);

}

/* ---------- Journey ---------- */

.journey-grid{

    display:grid;

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

    gap:24px;

}

.journey-step{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:28px;

    text-align:center;

    transition:var(--transition);

}

.journey-step:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.step-number{

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 20px;

    font-weight:800;

    font-size:22px;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

}

/* ---------- Contact ---------- */

.contact-panel{

    padding:70px;

    text-align:center;

    background:
    linear-gradient(
    135deg,
    rgba(91,124,255,.12),
    rgba(138,92,255,.10));

    border:1px solid var(--border);

    border-radius:32px;

}

.contact-panel span{

    display:block;

    color:var(--accent);

    margin-bottom:18px;

    text-transform:uppercase;

    letter-spacing:2px;

    font-weight:700;

}

.contact-panel h2{

    font-size:48px;

    margin-bottom:24px;

}

.contact-panel p{

    max-width:760px;

    margin:0 auto 40px;

    color:var(--text-light);

}

.contact-actions{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

/* ---------- Footer ---------- */

.footer{

    padding:90px 0 30px;

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

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:40px;

    margin-bottom:50px;

}

.footer h3{

    margin-bottom:20px;

}

.footer h4{

    margin-bottom:18px;

}

.footer li{

    margin-bottom:12px;

    color:var(--text-light);

}

.footer-bottom{

    padding-top:25px;

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

    text-align:center;

    color:var(--text-light);

}

/* ---------- Back To Top ---------- */

#backToTop{

    position:fixed;

    right:28px;

    bottom:28px;

    width:54px;

    height:54px;

    border:none;

    border-radius:50%;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    color:#fff;

    font-size:20px;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:var(--transition);

    z-index:999;

}

#backToTop.show{

    opacity:1;

    visibility:visible;

  }


/*====================================================
  style.css - Part 3
  Responsive Design, Animations & Utilities
====================================================*/

/* ---------- Scroll Progress ---------- */

#scroll-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    z-index:5000;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary),
        var(--accent));

}

/* ---------- Reveal Animation ---------- */

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* ---------- Floating Aurora ---------- */

.aurora{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:-1;

}

.aurora::before,
.aurora::after{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;

    filter:blur(120px);

    opacity:.18;

    animation:floatAurora 16s ease-in-out infinite;

}

.aurora::before{

    background:#5b7cff;

    top:-220px;

    left:-150px;

}

.aurora::after{

    background:#8a5cff;

    bottom:-220px;

    right:-180px;

    animation-delay:8s;

}

@keyframes floatAurora{

    0%{

        transform:
            translate(0,0)
            scale(1);

    }

    50%{

        transform:
            translate(80px,-60px)
            scale(1.2);

    }

    100%{

        transform:
            translate(0,0)
            scale(1);

    }

}

/* ---------- Hover Glow ---------- */

.service-card:hover,
.feature-card:hover,
.content-card:hover,
.industry-card:hover,
.insight-card:hover,
.vision-card:hover,
.journey-step:hover{

    box-shadow:

        0 0 20px rgba(91,124,255,.18),

        0 20px 60px rgba(0,0,0,.45);

}

/* ---------- Selection ---------- */

::selection{

    background:var(--primary);

    color:#fff;

}

/* ---------- Scrollbar ---------- */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#08111f;

}

::-webkit-scrollbar-thumb{

    background:
        linear-gradient(
            var(--primary),
            var(--secondary));

    border-radius:30px;

}

/* ---------- Utilities ---------- */

.text-center{

    text-align:center;

}

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:50px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:50px;}

.hidden{

    display:none;

}

/* ---------- Responsive ---------- */

@media (max-width:1200px){

    .hero-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .hero{

        padding-top:120px;

    }

    .hero h1{

        font-size:52px;

    }

    .journey-grid{

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

    }

}

@media (max-width:992px){

    .navigation{

        display:none;

    }

    .two-column,

    .three-column,

    .card-grid,

    .footer-grid{

        grid-template-columns:1fr;

    }

    .journey-grid{

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

    }

    .hero-metrics{

        flex-direction:column;

        gap:25px;

    }

    .section-header h2{

        font-size:38px;

    }

    .contact-panel{

        padding:50px 30px;

    }

}

@media (max-width:768px){

    section{

        padding:80px 0;

    }

    .hero h1{

        font-size:40px;

    }

    .hero p{

        font-size:17px;

    }

    .glass-panel{

        padding:28px;

    }

    .journey-grid{

        grid-template-columns:1fr;

    }

    .technology-cloud{

        justify-content:flex-start;

    }

    .technology-cloud span{

        font-size:14px;

    }

    .contact-panel h2{

        font-size:34px;

    }

    .btn{

        width:100%;

    }

}

@media (max-width:480px){

    .logo{

        font-size:24px;

    }

    .hero h1{

        font-size:34px;

    }

    .section-header h2{

        font-size:30px;

    }

    .metric h2{

        font-size:34px;

    }

    .content-card,
    .service-card,
    .feature-card,
    .vision-card,
    .industry-card,
    .insight-card{

        padding:24px;

    }

}

/*====================================================
  End of style.css
====================================================*/