/* ===========================
   Alireza PNG V2
=========================== */

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

:root{

--bg:#11132a;
--card:#1a1d44;
--card2:#23275b;

--blue:#43b5ff;
--white:#ffffff;
--text:#c9d0ff;
--border:#2d3272;

}

*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins,sans-serif;

}

html{

scroll-behavior:smooth;

}

body{

background:var(--bg);
color:white;
overflow-x:hidden;

}

/*========================*/

.grid{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background-image:

linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),

linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);

background-size:40px 40px;

z-index:-2;

}

.grid::after{

content:"";

position:absolute;

width:100%;
height:100%;

background:

radial-gradient(circle at center,

transparent,

#11132a 85%);

}

/*========================*/

.container{

width:88%;

max-width:1300px;

margin:auto;

}

/*========================*/

header{

position:fixed;

top:0;

left:0;

width:100%;

padding:22px 0;

backdrop-filter:blur(15px);

background:rgba(17,19,42,.75);

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

z-index:999;

}

.nav{

display:flex;

align-items:center;

justify-content:space-between;

}

.logo{

font-size:28px;

font-weight:700;

color:var(--blue);

cursor:pointer;

}

nav{

display:flex;

gap:45px;

}

nav a{

text-decoration:none;

color:white;

font-size:15px;

transition:.35s;

}

nav a:hover{

color:var(--blue);

}

/*========================*/

.social{

position:fixed;

left:45px;

top:50%;

transform:translateY(-50%);

display:flex;

flex-direction:column;

gap:18px;

z-index:50;

}

.social a{

width:46px;

height:46px;

border-radius:50%;

background:var(--card);

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

color:var(--blue);

font-size:18px;

transition:.35s;

}

.social a:hover{

background:var(--blue);

color:#111;

transform:translateY(-6px);

}

/*========================*/

.hero{

min-height:100vh;

display:flex;

align-items:center;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 520px;

gap:90px;

align-items:center;

}

.hello{

font-size:18px;

color:var(--blue);

margin-bottom:15px;

}

.hero h1{

font-size:72px;

font-weight:700;

margin-bottom:10px;

}

.hero span{

color:var(--blue);

}

.hero h2{

font-size:30px;

font-weight:500;

color:#d7dcff;

margin-bottom:20px;

}

.hero-text{

font-size:17px;

line-height:34px;

max-width:520px;

color:var(--text);

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:20px;

}

.btn{

padding:16px 34px;

background:var(--blue);

color:#111;

border-radius:14px;

text-decoration:none;

font-weight:600;

transition:.35s;

border:none;

cursor:pointer;

}

.btn:hover{

transform:translateY(-6px);

box-shadow:0 0 30px rgba(67,181,255,.4);

}

.btn-outline{

padding:16px 34px;

border-radius:14px;

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

text-decoration:none;

color:var(--blue);

transition:.35s;

}

.btn-outline:hover{

background:var(--blue);

color:#111;

}

.numbers{

display:flex;

gap:60px;

margin-top:70px;

}

.numbers h3{

font-size:38px;

color:var(--blue);

}

.numbers span{

color:var(--text);

}

/*========================*/

.image-card{

width:100%;

height:620px;

border-radius:30px;

background:var(--card);

padding:20px;

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

}

.image-card img{

width:100%;

height:100%;

border-radius:22px;

object-fit:cover;

}

/*========================*/

section{

padding:120px 0;

}

.title{

text-align:center;

margin-bottom:70px;

}

.title p{

color:var(--blue);

margin-bottom:12px;

}

.title h2{

font-size:44px;

}

/*========================*/

.about-grid{

display:grid;

grid-template-columns:480px 1fr;

gap:70px;

align-items:center;

}

.about-image img{

width:100%;

border-radius:24px;

}

.mini-cards{

display:grid;

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

gap:25px;

margin-bottom:40px;

}

.mini-card{

background:var(--card);

padding:35px;

border-radius:20px;

text-align:center;

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

transition:.3s;

}

.mini-card:hover{

transform:translateY(-8px);

background:var(--card2);

}

.mini-card i{

font-size:30px;

color:var(--blue);

margin-bottom:20px;

}

.about-content p{

font-size:16px;

line-height:34px;

color:var(--text);

margin-bottom:40px;

}
/*==========================
        SKILLS
==========================*/

.skills-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:35px;

}

.skill-box{

background:var(--card);

padding:40px;

border-radius:22px;

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

transition:.35s;

}

.skill-box:hover{

transform:translateY(-8px);

background:var(--card2);

}

.skill-box h3{

margin-bottom:30px;

font-size:24px;

}

.skill-list{

display:flex;

flex-wrap:wrap;

gap:15px;

}

.skill-list span{

padding:12px 18px;

background:#2b3070;

border-radius:10px;

font-size:14px;

transition:.3s;

}

.skill-list span:hover{

background:var(--blue);

color:#111;

}

/*==========================
        PROJECTS
==========================*/

.project-grid{

display:grid;

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

gap:30px;

}

.project-card{

background:var(--card);

border-radius:22px;

overflow:hidden;

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

transition:.35s;

}

.project-card:hover{

transform:translateY(-10px);

}

.project-card img{

width:100%;

height:220px;

object-fit:cover;

}

.project-content{

padding:30px;

}

.project-content h3{

font-size:24px;

margin-bottom:15px;

}

.project-content p{

color:var(--text);

line-height:30px;

margin-bottom:25px;

}

.project-content a{

display:inline-block;

text-decoration:none;

color:var(--blue);

font-weight:600;

}

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

.contact-grid{

display:grid;

grid-template-columns:360px 1fr;

gap:40px;

}

.contact-info{

display:flex;

flex-direction:column;

gap:25px;

}

.contact-card{

background:var(--card);

padding:30px;

border-radius:20px;

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

transition:.3s;

}

.contact-card:hover{

background:var(--card2);

}

.contact-card i{

font-size:28px;

color:var(--blue);

margin-bottom:15px;

}

.contact-card h3{

margin-bottom:10px;

}

.contact-card p{

color:var(--text);

}

form{

display:flex;

flex-direction:column;

gap:20px;

}

input,
textarea{

background:var(--card);

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

padding:18px;

border-radius:15px;

color:white;

font-size:15px;

outline:none;

}

textarea{

height:180px;

resize:none;

}

input:focus,
textarea:focus{

border-color:var(--blue);

}

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

footer{

padding:80px 0 40px;

margin-top:100px;

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

}

.footer{

text-align:center;

}

.footer h2{

font-size:34px;

margin-bottom:15px;

}

.footer p{

color:var(--text);

margin-bottom:30px;

}

.footer-social{

display:flex;

justify-content:center;

gap:18px;

margin-bottom:30px;

}

.footer-social a{

width:48px;

height:48px;

background:var(--card);

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

color:var(--blue);

transition:.3s;

}

.footer-social a:hover{

background:var(--blue);

color:#111;

}

.copy{

opacity:.7;

font-size:14px;

}

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

@media(max-width:1100px){

.hero-grid,
.about-grid,
.contact-grid{

grid-template-columns:1fr;

}

.project-grid{

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

}

.skills-grid{

grid-template-columns:1fr;

}

.image-card{

height:500px;

}

}

@media(max-width:768px){

nav{

display:none;

}

.social{

display:none;

}

.hero h1{

font-size:48px;

}

.hero h2{

font-size:24px;

}

.title h2{

font-size:34px;

}

.project-grid{

grid-template-columns:1fr;

}

.numbers{

gap:25px;

flex-wrap:wrap;

}

.image-card{

height:400px;

}

.container{

width:92%;

}

}

@media(max-width:500px){

.hero{

padding-top:120px;

}

.hero h1{

font-size:38px;

}

.hero-buttons{

flex-direction:column;

}

.btn,
.btn-outline{

width:100%;

text-align:center;

}

.mini-cards{

grid-template-columns:1fr;

}

}