/* ===========================
   TECHNOFY
   Premium Tech Website
=========================== */

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

body{

    font-family:'Poppins',sans-serif;
    background:#050505;
    color:#fff;
    overflow-x:hidden;
    line-height:1.7;

}

/*==============================
BACKGROUND
==============================*/

body::before{

content:"";
position:fixed;
width:700px;
height:700px;
border-radius:50%;
background:#0066ff;
filter:blur(180px);
opacity:.18;
left:-250px;
top:-250px;
z-index:-2;

}

body::after{

content:"";
position:fixed;
width:650px;
height:650px;
border-radius:50%;
background:#8b00ff;
filter:blur(180px);
opacity:.15;
right:-250px;
bottom:-250px;
z-index:-2;

}

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

header{

position:fixed;
top:0;
left:0;
width:100%;
padding:20px 8%;
z-index:1000;

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

backdrop-filter:blur(15px);

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

}

nav{

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

}

.logo{

font-size:34px;
font-weight:800;
letter-spacing:3px;
color:#3ba7ff;

}

nav ul{

display:flex;
gap:35px;
list-style:none;

}

nav ul li a{

color:white;
text-decoration:none;
font-size:16px;
transition:.3s;

}

nav ul li a:hover{

color:#3ba7ff;

}

#menuBtn{

display:none;
font-size:30px;
cursor:pointer;

}

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

.hero{

min-height:100vh;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

padding:120px 8%;

gap:60px;

}

.hero h1{

font-size:65px;
line-height:1.2;
margin-bottom:25px;

}

.hero p{

color:#cccccc;
font-size:18px;
margin-bottom:35px;

}

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

.buttons{

display:flex;
gap:20px;

}

.btn{

padding:15px 35px;

border-radius:50px;

background:#0d6efd;

color:white;

text-decoration:none;

font-weight:600;

transition:.4s;

box-shadow:0 0 25px rgba(0,119,255,.4);

}

.btn:hover{

transform:translateY(-5px);

box-shadow:0 0 45px rgba(0,119,255,.8);

}

.outline{

background:transparent;

border:2px solid #0d6efd;

}

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

.glass-card{

padding:45px;

border-radius:25px;

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

backdrop-filter:blur(20px);

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

box-shadow:

0 0 40px rgba(0,0,0,.4),

0 0 40px rgba(0,102,255,.2);

}

.glass-card h2{

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

}

.glass-card p{

font-size:20px;
line-height:2;

}

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

section{

padding:120px 8%;

}

.title{

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

}

.title h2{

font-size:45px;

position:relative;

display:inline-block;

}

.title h2::after{

content:"";

width:80px;

height:4px;

background:#0d6efd;

position:absolute;

left:50%;

transform:translateX(-50%);

bottom:-15px;

}

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

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.about-grid h3{

font-size:34px;

margin-bottom:25px;

}

.image-box{

height:350px;

border-radius:25px;

display:flex;

justify-content:center;

align-items:center;

font-size:120px;

background:linear-gradient(135deg,#111,#1c1c1c);

box-shadow:0 0 35px rgba(0,119,255,.3);

}

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

.services{

display:grid;

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

gap:35px;

}

.service{

padding:40px;

border-radius:20px;

background:#101010;

transition:.4s;

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

}

.service:hover{

transform:translateY(-10px);

background:#141414;

box-shadow:0 0 30px rgba(0,119,255,.3);

}

.service h3{

margin-bottom:18px;

font-size:24px;

}

/*==============================
STATS
==============================*/

.stats{

display:grid;

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

gap:30px;

text-align:center;

}

.stats div{

padding:40px;

background:#101010;

border-radius:20px;

}

.stats h2{

font-size:55px;

color:#0d6efd;

}

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

.portfolio{

display:grid;

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

gap:30px;

}

.project{

height:280px;

border-radius:20px;

background:linear-gradient(135deg,#0b0b0b,#161616);

display:flex;

justify-content:center;

align-items:center;

font-size:26px;

font-weight:700;

transition:.4s;

}

.project:hover{

transform:scale(1.05);

box-shadow:0 0 35px rgba(0,119,255,.4);

}

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

form{

max-width:700px;

margin:auto;

display:flex;

flex-direction:column;

gap:20px;

}

input,
textarea{

padding:18px;

background:#111;

border:none;

border-radius:15px;

color:white;

font-size:16px;

}

textarea{

height:180px;

resize:none;

}

button{

padding:18px;

background:#0d6efd;

color:white;

border:none;

border-radius:15px;

font-size:18px;

cursor:pointer;

transition:.4s;

}

button:hover{

background:#1b7cff;

}

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

footer{

padding:70px 8%;

text-align:center;

background:#080808;

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

}

.footer-logo{

font-size:36px;

font-weight:800;

color:#3ba7ff;

margin-bottom:15px;

}

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

.loader{

position:fixed;

inset:0;

background:#000;

display:flex;

justify-content:center;

align-items:center;

z-index:9999;

}

.spinner{

width:70px;

height:70px;

border-radius:50%;

border:6px solid #222;

border-top:6px solid #0d6efd;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}