/* ==========================================================
   AMMAR ZEITOON
   Main Stylesheet
========================================================== */

:root{

    --bg:#050505;
    --bg2:#0d0d0d;
    --card:#111111;
    --border:#222;

    --white:#ffffff;
    --gray:#c8c8c8;

    --cyan:#25F4EE;
    --pink:#FE2C55;

    --radius:18px;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    background:var(--bg);

    color:var(--white);

    overflow-x:hidden;

}

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

.container{

    width:90%;
    max-width:1200px;

    margin:auto;

}

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

a{

    color:white;
    text-decoration:none;

}

img{

    max-width:100%;

}

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

.section-title{

    font-size:42px;

    text-align:center;

    margin-bottom:15px;

}

.section-line{

    width:90px;

    height:4px;

    background:var(--cyan);

    margin:0 auto 60px;

    border-radius:20px;

}

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

header{

    position:fixed;

    width:100%;

    z-index:9999;

    background:rgba(0,0,0,.75);

    backdrop-filter:blur(18px);

    border-bottom:1px solid #111;

}

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

.navbar{

    height:80px;

}

.navbar .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:100%;

}

.logo img{

    width:65px;

    border-radius:50%;

    box-shadow:

    0 0 15px var(--cyan);

}

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

.nav-links{

    display:flex;

    gap:35px;

    list-style:none;

}

.nav-links a{

    transition:.3s;

    font-weight:500;

}

.nav-links a:hover{

    color:var(--cyan);

}

.menu-button{

    display:none;

    font-size:26px;

}

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

}

.hero::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    background:var(--cyan);

    filter:blur(220px);

    opacity:.12;

    left:-180px;

    top:-200px;

}

.hero::after{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    background:var(--pink);

    filter:blur(220px);

    opacity:.10;

    right:-150px;

    bottom:-150px;

}

.hero-container{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:70px;

    align-items:center;

}

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

.hero-logo{

    width:340px;

    border-radius:50%;

    animation:float 4s ease-in-out infinite;

    box-shadow:

    0 0 35px var(--cyan);

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

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

.hero-right h3{

    color:var(--cyan);

    font-size:26px;

    margin-bottom:10px;

}

.hero-right h1{

    font-size:74px;

    line-height:80px;

    margin-bottom:25px;

}

.hero-right span{

    color:var(--cyan);

}

.hero-right h2{

    color:#ddd;

    line-height:46px;

    font-weight:400;

    margin-bottom:25px;

}

.hero-right p{

    color:#b8b8b8;

    font-size:18px;

    line-height:32px;

    margin-bottom:35px;

}

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

.hero-buttons{

    display:flex;

    gap:20px;

    margin-bottom:55px;

}

.btn-primary{

    background:var(--cyan);

    color:black;

    padding:15px 32px;

    border-radius:50px;

    transition:.35s;

    font-weight:600;

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:

    0 0 25px var(--cyan);

}

.btn-secondary{

    border:2px solid var(--cyan);

    padding:15px 32px;

    border-radius:50px;

    transition:.35s;

}

.btn-secondary:hover{

    background:var(--cyan);

    color:black;

}

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

.hero-stats{

    display:flex;

    gap:25px;

}

.stat-box{

    background:var(--card);

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

    border-radius:var(--radius);

    padding:25px;

    width:190px;

    text-align:center;

    transition:.35s;

}

.stat-box:hover{

    transform:translateY(-10px);

    border-color:var(--cyan);

}

.stat-box h3{

    color:var(--cyan);

    font-size:34px;

}

.stat-box p{

    margin-top:10px;

    font-size:15px;

    color:#ccc;

}

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

.scroll-down{

    position:absolute;

    bottom:40px;

    width:100%;

    text-align:center;

    font-size:34px;

}

.scroll-down i{

    color:var(--cyan);

    animation:bounce 2s infinite;

}

@keyframes bounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(10px);

}

}

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

section{

    padding:110px 0;

}

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

.about-grid{

    display:grid;

    grid-template-columns:1fr 380px;

    gap:60px;

    align-items:center;

}

.about-left h3{

    font-size:36px;

    margin-bottom:25px;

}

.about-left p{

    color:#cfcfcf;

    line-height:34px;

    margin-bottom:25px;

    font-size:18px;

}

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

.skills-list{

    display:grid;

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

    gap:18px;

    margin-top:35px;

}

.skill{

    background:var(--card);

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

    padding:18px;

    border-radius:14px;

    transition:.3s;

}

.skill:hover{

    border-color:var(--cyan);

    transform:translateY(-4px);

}

.skill i{

    color:var(--cyan);

    margin-right:10px;

}

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

.glass-card{

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

    backdrop-filter:blur(20px);

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

    border-radius:22px;

    padding:40px;

}

.glass-card h3{

    margin-bottom:25px;

    color:var(--cyan);

}

.glass-card ul{

    list-style:none;

}

.glass-card li{

    margin-bottom:18px;

    color:#ddd;

}

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

.dark-section{

    background:var(--bg2);

}

.service-grid{

    display:grid;

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

    gap:30px;

}

.service-card{

    background:var(--card);

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

    border-radius:22px;

    padding:40px 30px;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.service-card::before{

    content:"";

    position:absolute;

    width:0;

    height:4px;

    left:0;

    top:0;

    background:var(--cyan);

    transition:.4s;

}

.service-card:hover::before{

    width:100%;

}

.service-card:hover{

    transform:translateY(-10px);

    border-color:var(--cyan);

    box-shadow:0 15px 35px rgba(37,244,238,.15);

}

.service-card i{

    font-size:48px;

    color:var(--cyan);

    margin-bottom:25px;

}

.service-card h3{

    font-size:24px;

    margin-bottom:18px;

}

.service-card p{

    color:#cfcfcf;

    line-height:30px;

}

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

.project-grid{

    display:grid;

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

    gap:35px;

}

.project-card{

    background:linear-gradient(180deg,#141414,#0d0d0d);

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

    border-radius:24px;

    padding:35px;

    transition:.4s;

}

.project-card:hover{

    transform:translateY(-12px);

    border-color:var(--cyan);

    box-shadow:0 25px 45px rgba(37,244,238,.15);

}

.project-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#171717;

    margin-bottom:30px;

}

.project-icon i{

    font-size:36px;

    color:var(--cyan);

}

.project-card h3{

    font-size:28px;

    margin-bottom:20px;

}

.project-card p{

    line-height:30px;

    color:#cfcfcf;

}

/* ==========================================================
   SOCIAL
========================================================== */

.social-grid{

    display:grid;

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

    gap:25px;

}

.social-card{

    background:var(--card);

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

    border-radius:20px;

    padding:35px;

    text-align:center;

    transition:.35s;

}

.social-card:hover{

    transform:translateY(-10px);

    border-color:var(--cyan);

    box-shadow:0 15px 35px rgba(37,244,238,.15);

}

.social-card i{

    font-size:48px;

    margin-bottom:25px;

    color:var(--cyan);

}

.social-card h3{

    margin-bottom:15px;

}

.social-card p{

    color:#bdbdbd;

}

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

.cta{

    text-align:center;

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

}

.cta h2{

    font-size:52px;

    margin-bottom:25px;

}

.cta p{

    max-width:700px;

    margin:0 auto 40px;

    color:#d0d0d0;

    line-height:34px;

    font-size:18px;

}

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

footer{

    background:#020202;

    border-top:1px solid #151515;

    padding-top:70px;

}

.footer-grid{

    display:grid;

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

    gap:50px;

}

.footer-grid h3{

    color:var(--cyan);

    margin-bottom:25px;

}

.footer-grid p{

    line-height:30px;

    color:#bdbdbd;

}

.footer-grid ul{

    list-style:none;

}

.footer-grid li{

    margin-bottom:15px;

}

.footer-grid a{

    color:#bdbdbd;

    transition:.3s;

}

.footer-grid a:hover{

    color:var(--cyan);

}

.copyright{

    margin-top:60px;

    border-top:1px solid #111;

    text-align:center;

    padding:25px;

    color:#888;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#050505;

}

::-webkit-scrollbar-thumb{

    background:var(--cyan);

    border-radius:20px;

}

/* ==========================================================
   CURSOR GLOW
========================================================== */

.cursor-glow{

    position:fixed;

    width:250px;

    height:250px;

    background:radial-gradient(circle,
    rgba(37,244,238,.18) 0%,
    transparent 70%);

    pointer-events:none;

    z-index:1;

    transform:translate(-50%,-50%);

}

/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:992px){

.hero-container{

grid-template-columns:1fr;

text-align:center;

}

.hero-logo{

width:250px;

margin:auto;

}

.hero-right h1{

font-size:56px;

line-height:60px;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

flex-wrap:wrap;

}

.about-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.skills-list{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.nav-links{

display:none;

}

.menu-button{

display:block;

}

.section-title{

font-size:34px;

}

.hero-right h1{

font-size:42px;

line-height:46px;

}

.hero-right h2{

font-size:22px;

line-height:34px;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,
.btn-secondary{

width:100%;

text-align:center;

}

.stat-box{

width:100%;

}

.cta h2{

font-size:36px;

}

}

/* ==========================================
   JavaScript Classes
========================================== */

.hidden{

opacity:0;

transform:translateY(40px);

transition:.8s;

}

.visible{

opacity:1;

transform:translateY(0);

}

.nav-links a.active{

color:var(--cyan);

}

.show-menu{

display:flex !important;

position:absolute;

top:80px;

left:0;

width:100%;

background:#090909;

flex-direction:column;

padding:30px;

gap:25px;

border-top:1px solid #222;

}

.scroll-top{

position:fixed;

bottom:35px;

right:35px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:var(--cyan);

color:#000;

font-size:22px;

cursor:pointer;

opacity:0;

pointer-events:none;

transition:.35s;

z-index:999;

}

.scroll-top.show{

opacity:1;

pointer-events:auto;

}

.scroll-top:hover{

transform:translateY(-6px);

box-shadow:0 0 20px var(--cyan);

}

.loaded .hero-logo{

animation:float 4s ease-in-out infinite;

}

.social-icon{

width:75px;
height:75px;

margin:0 auto 20px;

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

border-radius:50%;

font-size:34px;

color:#fff;

transition:.35s;

}

.social-card:hover .social-icon{

transform:scale(1.12) rotate(5deg);

}

.facebook{

background:#1877F2;

}

.youtube{

background:#FF0000;

}

.tiktok{

background:#000;
border:2px solid #25F4EE;

}

.instagram{

background:linear-gradient(45deg,
#405DE6,
#5851DB,
#833AB4,
#C13584,
#FD1D1D,
#FCAF45);

}

.linkedin{

background:#0A66C2;

}

.threads{

background:#111;

}

.email{

background:#00A884;

}