/*=========================================
NEXORA STUDIO
Version : 2.0
=========================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

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

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#050505;

    color:#ffffff;

    overflow-x:hidden;

}

img{

    width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

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

:root{

--primary:#ffffff;

--secondary:#9ca3af;

--blue:#2563eb;

--card:#111111;

--border:#1f1f1f;

--container:1400px;

--radius:22px;

--transition:.45s;

}

/*=========================================
COMMON
=========================================*/

.container{

    width:90%;

    max-width:1400px;

    margin:auto;

}

section{

    padding:120px 0;

    position:relative;

}

h1{

    font-size:82px;

    line-height:90px;

    font-weight:800;

    letter-spacing:-2px;

}

h2{

    font-size:56px;

    font-weight:700;

    line-height:1.2;

}

h3{

    font-size:28px;

    font-weight:600;

}

p{

    color:var(--secondary);

    font-size:18px;

    line-height:34px;

}

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

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 40px;

background:#fff;

color:#000;

border-radius:60px;

font-weight:600;

transition:.4s;

}

.btn-primary:hover{

transform:translateY(-6px);

box-shadow:0 15px 40px rgba(255,255,255,.15);

}

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 40px;

border-radius:60px;

border:1px solid #333;

margin-left:20px;

transition:.4s;

}

.btn-secondary:hover{

background:#151515;

}

/*=========================================
REMOVE LOADER
=========================================*/

#loader{

display:none;

}

/*=========================================
NAVBAR
=========================================*/

.navbar{

position:fixed;

top:0;

left:0;

width:100%;

padding:25px 0;

z-index:9999;

background:rgba(5,5,5,.70);

backdrop-filter:blur(20px);

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

}

.navbar .container{

display:flex;

align-items:center;

justify-content:space-between;

}

.logo a{

font-size:30px;

font-weight:800;

letter-spacing:6px;

}

.menu{

display:flex;

gap:45px;

}

.menu a{

color:#d1d5db;

font-size:15px;

transition:.35s;

}

.menu a:hover{

color:#fff;

}

.mobile-toggle{

display:none;

font-size:34px;

cursor:pointer;

}

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

.hero{

min-height:100vh;

display:flex;

align-items:center;

overflow:hidden;

}

.hero .container{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:90px;

}

.hero-tag{

font-size:13px;

letter-spacing:4px;

color:var(--blue);

margin-bottom:25px;

}

.hero h1{

margin-bottom:35px;

}

.hero p{

max-width:560px;

margin-bottom:45px;

}

.hero-buttons{

display:flex;

align-items:center;

margin-bottom:60px;

}

.hero-stats{

display:flex;

gap:60px;

}

.hero-stats h2{

font-size:42px;

margin-bottom:8px;

}

.hero-right{

position:relative;

}

.hero-right img{

border-radius:26px;

box-shadow:0 40px 120px rgba(0,0,0,.5);

}

.hero-overlay{

position:absolute;

top:-250px;

right:-250px;

width:800px;

height:800px;

background:rgba(37,99,235,.18);

filter:blur(180px);

z-index:-1;

}

/*=========================================
SCROLL INDICATOR
=========================================*/

.scroll-indicator{

position:absolute;

bottom:40px;

left:50%;

transform:translateX(-50%);

display:flex;

flex-direction:column;

align-items:center;

gap:12px;

}

.scroll-indicator span{

font-size:12px;

letter-spacing:4px;

}

.mouse{

width:28px;

height:48px;

border:2px solid #fff;

border-radius:50px;

display:flex;

justify-content:center;

padding-top:8px;

}

.wheel{

width:5px;

height:10px;

background:#fff;

border-radius:20px;

animation:scroll 1.4s infinite;

}

@keyframes scroll{

0%{

transform:translateY(0);

opacity:1;

}

100%{

transform:translateY(16px);

opacity:0;

}

}

/*=========================================
STORY SECTION
=========================================*/

.story{

    background:#080808;

}

.story-intro{

    max-width:900px;

    margin:auto;

    text-align:center;

    margin-bottom:90px;

}

.story-intro span{

    color:var(--blue);

    letter-spacing:4px;

    font-size:14px;

    display:block;

    margin-bottom:18px;

}

.story-intro h2{

    margin-bottom:20px;

}

.story-intro p{

    max-width:700px;

    margin:auto;

}

.story-wrapper{

    display:flex;

    flex-direction:column;

    gap:40px;

    margin-top:80px;

}

.story-item{

    display:flex;

    gap:35px;

    align-items:flex-start;

}

.story-number{

    min-width:70px;

    width:70px;

    height:70px;

    border-radius:50%;

    background:#111;

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

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:700;

    color:var(--blue);

}

.story-content{

    width:100%;

    background:#101010;

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

    border-radius:22px;

    padding:35px;

    transition:var(--transition);

}

.story-content:hover{

    transform:translateX(12px);

    border-color:var(--blue);

}

.story-content h3{

    margin-bottom:15px;

}

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

.section-header{

    text-align:center;

    margin-bottom:80px;

}

.section-header span{

    display:block;

    color:var(--blue);

    font-size:14px;

    letter-spacing:4px;

    margin-bottom:20px;

}

.section-header h2{

    margin-bottom:20px;

}

.section-header p{

    max-width:700px;

    margin:auto;

}

/*=========================================
SERVICES
=========================================*/

.services{

    background:#050505;

}

.services-grid{

    display:grid;

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

    gap:30px;

}

.service-card{

    background:#101010;

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

    border-radius:24px;

    padding:45px 35px;

    transition:var(--transition);

    cursor:pointer;

}

.service-card:hover{

    transform:translateY(-12px);

    border-color:var(--blue);

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

}

.service-card .icon{

    width:80px;

    height:80px;

    border-radius:20px;

    background:#171717;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:30px;

}

.service-card i{

    font-size:34px;

    color:var(--blue);

}

.service-card h3{

    margin-bottom:18px;

}

/*=========================================
WHY US
=========================================*/

.why{

    background:#090909;

}

.why-grid{

    display:grid;

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

    gap:30px;

}

.why-card{

    background:#111;

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

    border-radius:24px;

    padding:40px;

    transition:var(--transition);

}

.why-card:hover{

    transform:translateY(-10px);

    border-color:var(--blue);

}

.why-card i{

    font-size:42px;

    color:var(--blue);

    margin-bottom:25px;

}

.why-card h3{

    margin-bottom:15px;

}

/*=========================================
PORTFOLIO
=========================================*/

.portfolio{

    background:#050505;

}

.project{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

    margin-bottom:140px;

}

.project:last-child{

    margin-bottom:0;

}

.project.reverse{

    direction:rtl;

}

.project.reverse .project-info{

    direction:ltr;

}

.project-image{

    overflow:hidden;

    border-radius:30px;

}

.project-image img{

    transition:.8s;

}

.project-image:hover img{

    transform:scale(1.08);

}

.project-info span{

    display:block;

    color:var(--blue);

    letter-spacing:4px;

    margin-bottom:18px;

}

.project-info h3{

    font-size:46px;

    margin-bottom:25px;

}

.project-info p{

    margin-bottom:35px;

}

.project-info a{

    color:#fff;

    font-weight:600;

    position:relative;

}

.project-info a::after{

    content:"";

    position:absolute;

    width:100%;

    height:2px;

    background:#fff;

    left:0;

    bottom:-6px;

}

/*=========================================
WORKFLOW
=========================================*/

.workflow{

    background:#080808;

}

.workflow-grid{

    display:grid;

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

    gap:30px;

}

.workflow-card{

    background:#101010;

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

    border-radius:24px;

    padding:40px;

    transition:var(--transition);

}

.workflow-card:hover{

    transform:translateY(-10px);

    border-color:var(--blue);

}

.workflow-card h3{

    font-size:54px;

    color:var(--blue);

    margin-bottom:20px;

}

.workflow-card h4{

    margin-bottom:18px;

}

/*=========================================
TECHNOLOGY
=========================================*/

.technology{

    background:#050505;

}

.tech-grid{

    display:grid;

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

    gap:30px;

}

.tech-grid div{

    background:#101010;

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

    border-radius:24px;

    padding:45px;

    text-align:center;

    font-size:22px;

    font-weight:600;

    transition:var(--transition);

}

.tech-grid div:hover{

    transform:translateY(-10px);

    border-color:var(--blue);

    background:#161616;

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

}

/*=========================================
TESTIMONIAL
=========================================*/

.testimonials{

    background:#090909;

}

.testimonial{

    max-width:900px;

    margin:auto;

    background:#111111;

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

    border-radius:30px;

    padding:80px 60px;

    text-align:center;

    transition:var(--transition);

}

.testimonial:hover{

    border-color:var(--blue);

}

.testimonial p{

    font-size:26px;

    color:#fff;

    line-height:44px;

    margin-bottom:40px;

}

.testimonial h4{

    font-size:24px;

    margin-bottom:10px;

}

.testimonial span{

    color:var(--secondary);

}

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

.cta{

    background:linear-gradient(180deg,#0b0b0b,#050505);

    text-align:center;

}

.cta h2{

    max-width:900px;

    margin:auto;

    margin-bottom:25px;

}

.cta p{

    max-width:700px;

    margin:auto;

    margin-bottom:45px;

}

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

footer{

    background:#030303;

    border-top:1px solid #161616;

    padding-top:90px;

}

.footer-top{

    display:grid;

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

    gap:60px;

    padding-bottom:70px;

}

.footer-logo h2{

    font-size:34px;

    margin-bottom:20px;

}

.footer-logo p{

    max-width:320px;

}

.footer-links h4{

    margin-bottom:25px;

}

.footer-links ul{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.footer-links a{

    color:var(--secondary);

    transition:.3s;

}

.footer-links a:hover{

    color:#fff;

    padding-left:8px;

}

.footer-bottom{

    border-top:1px solid #161616;

    padding:30px 0;

    text-align:center;

}

.footer-bottom p{

    font-size:15px;

}

/*=========================================
COMMON HOVER
=========================================*/

.service-card,
.why-card,
.workflow-card,
.tech-grid div,
.project-image img,
.testimonial{

    transition:all .45s ease;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#050505;

}

::-webkit-scrollbar-thumb{

    background:#2a2a2a;

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--blue);

}

/*=========================================
TEXT SELECTION
=========================================*/

::selection{

    background:var(--blue);

    color:#fff;

}

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

@media(max-width:1200px){

.hero .container{

grid-template-columns:1fr;

text-align:center;

gap:60px;

}

.hero p{

margin:auto auto 40px;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.services-grid{

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

}

.why-grid{

grid-template-columns:1fr;

}

.project{

grid-template-columns:1fr;

gap:50px;

}

.project.reverse{

direction:ltr;

}

.workflow-grid{

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

}

.tech-grid{

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

}

.footer-top{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.container{

width:92%;

}

section{

padding:80px 0;

}

h1{

font-size:46px;

line-height:54px;

}

h2{

font-size:34px;

}

.menu{

display:none;

}

.nav-action{

display:none;

}

.mobile-toggle{

display:block;

}

.hero-buttons{

flex-direction:column;

gap:20px;

}

.btn-secondary{

margin-left:0;

}

.hero-stats{

flex-direction:column;

gap:25px;

}

.story-item{

flex-direction:column;

}

.story-number{

margin-bottom:20px;

}

.services-grid{

grid-template-columns:1fr;

}

.workflow-grid{

grid-template-columns:1fr;

}

.tech-grid{

grid-template-columns:1fr;

}

.footer-top{

grid-template-columns:1fr;

gap:40px;

}

.testimonial{

padding:50px 30px;

}

.testimonial p{

font-size:20px;

line-height:34px;

}

.project-info h3{

font-size:34px;

}

}

/*=========================================
END OF FILE
=========================================*/