/* ===========================
   EDTJL PORTFOLIO
   PART 1
=========================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    background:#090909;
    color:#fff;
    overflow-x:hidden;

}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

section{

    width:min(1200px,90%);
    margin:auto;

}

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

.background{

    position:fixed;
    inset:0;
    z-index:-10;
    overflow:hidden;

}

.blob{

    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    opacity:.25;

}

.blob1{

    width:450px;
    height:450px;

    background:#ff2020;

    top:-120px;
    left:-120px;

    animation:float1 12s ease-in-out infinite;

}

.blob2{

    width:500px;
    height:500px;

    background:#9d0000;

    right:-180px;
    bottom:-150px;

    animation:float2 14s ease-in-out infinite;

}

.grid{

    position:absolute;
    inset:0;

    background:

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

    background-size:50px 50px;

    opacity:.25;

}

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

header{

    position:fixed;

    width:100%;
    left:0;
    top:0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 7%;

    backdrop-filter:blur(20px);

    background:rgba(9,9,9,.35);

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

    z-index:999;

}

.logo{

    font-size:1.6rem;

    font-weight:700;

    letter-spacing:3px;

    color:#fff;

}

nav{

    display:flex;

    gap:35px;

}

nav a{

    color:#b8b8b8;

    transition:.3s;

    position:relative;

}

nav a:hover{

    color:white;

}

nav a::after{

    content:"";

    position:absolute;

    width:0;

    height:2px;

    background:#ff2d2d;

    left:0;

    bottom:-6px;

    transition:.3s;

}

nav a:hover::after{

    width:100%;

}

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:80px;

    padding-top:120px;

}

.hero-left{

    flex:1;

}

.eyebrow{

    color:#ff4040;

    font-size:.9rem;

    letter-spacing:4px;

    margin-bottom:20px;

}

.hero h1{

    font-size:4.3rem;

    line-height:1.05;

    margin-bottom:25px;

}

.hero h1 span{

    color:#ff3a3a;

}

.hero-text{

    max-width:620px;

    color:#bbbbbb;

    line-height:1.9;

    margin-bottom:45px;

}

.hero-buttons{

    display:flex;

    gap:18px;

}

.btn{

    padding:16px 34px;

    border-radius:12px;

    transition:.35s;

    font-weight:600;

}

.primary{

    background:#ff2d2d;

    color:white;

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

}

.primary:hover{

    transform:translateY(-4px);

    box-shadow:0 0 60px rgba(255,45,45,.55);

}

.secondary{

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

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

    backdrop-filter:blur(20px);

}

.secondary:hover{

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

}

/*============================
EDITOR CARD
============================*/

.hero-right{

    flex:1;

    display:flex;

    justify-content:center;

}

.editor-card{

    width:420px;

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

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

    border-radius:22px;

    backdrop-filter:blur(25px);

    padding:35px;

    box-shadow:

    0 0 60px rgba(255,0,0,.12);

    transition:.4s;

}

.editor-card:hover{

    transform:translateY(-8px);

}

.card-top{

    display:flex;

    gap:8px;

    margin-bottom:30px;

}

.card-top span{

    width:12px;

    height:12px;

    border-radius:50%;

}

.card-top span:nth-child(1){

    background:#ff4d4d;

}

.card-top span:nth-child(2){

    background:#ffd93d;

}

.card-top span:nth-child(3){

    background:#66ff66;

}

.editor-card h3{

    margin-bottom:25px;

}

.timeline{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-bottom:35px;

}

.timeline div{

    height:18px;

    border-radius:20px;

    background:linear-gradient(
    90deg,
    #ff2d2d,
    #700000
    );

    animation:pulse 2s infinite;

}

.timeline div:nth-child(1){

    width:90%;

}

.timeline div:nth-child(2){

    width:75%;

}

.timeline div:nth-child(3){

    width:100%;

}

.timeline div:nth-child(4){

    width:65%;

}

.progress{

    width:100%;

    height:10px;

    background:#1b1b1b;

    border-radius:20px;

    overflow:hidden;

    margin:15px 0;

}

.progress span{

    display:block;

    width:97%;

    height:100%;

    background:linear-gradient(
    90deg,
    #ff2d2d,
    #ff7b7b
    );

}

/*============================
ANIMATIONS
============================*/

@keyframes pulse{

    0%{

        opacity:.7;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:.7;

    }

}

@keyframes float1{

    50%{

        transform:
        translateY(70px)
        translateX(60px);

    }

}

@keyframes float2{

    50%{

        transform:
        translateY(-80px)
        translateX(-70px);

    }

}

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

.section-title{
    margin-bottom:60px;
}

.section-title p{
    color:#ff3a3a;
    letter-spacing:4px;
    font-size:.85rem;
    margin-bottom:12px;
}

.section-title h2{
    font-size:2.8rem;
    font-weight:700;
}

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

.about{
    padding:120px 0;
}

.about-text{
    max-width:820px;
    color:#b8b8b8;
    line-height:2;
    font-size:1.05rem;
    margin-bottom:60px;
}

.stats{

    display:grid;

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

    gap:25px;

}

.stat{

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

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

    backdrop-filter:blur(20px);

    border-radius:18px;

    padding:35px;

    transition:.35s;

}

.stat:hover{

    transform:translateY(-10px);

    border-color:#ff2d2d;

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

}

.stat h3{

    color:#ff4040;

    font-size:2rem;

    margin-bottom:10px;

}

.stat p{

    color:#bdbdbd;

}

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

.services{

    padding:120px 0;

}

.service-grid{

    display:grid;

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

    gap:30px;

}

.service-grid article{

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

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

    border-radius:20px;

    padding:40px;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.service-grid article::before{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    background:#ff2d2d;

    border-radius:50%;

    filter:blur(90px);

    top:-120px;
    right:-120px;

    opacity:0;

    transition:.5s;

}

.service-grid article:hover::before{

    opacity:.18;

}

.service-grid article:hover{

    transform:translateY(-10px);

    border-color:#ff2d2d;

}

.service-grid h3{

    margin-bottom:25px;

    font-size:1.5rem;

}

.service-grid li{

    color:#bdbdbd;

    margin:14px 0;

}

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

.portfolio{

    padding:120px 0;

}

.portfolio-grid{

    display:grid;

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

    gap:30px;

}

.project{

    background:#111;

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

    border-radius:20px;

    overflow:hidden;

    transition:.4s;

}

.project:hover{

    transform:translateY(-10px);

    border-color:#ff2d2d;

    box-shadow:0 0 50px rgba(255,45,45,.18);

}

.placeholder{

    height:220px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#666;

    font-weight:600;

    letter-spacing:3px;

    background:

    linear-gradient(
    135deg,
    #121212,
    #1a1a1a
    );

    position:relative;

}

.placeholder::after{

    content:"VIDEO PREVIEW";

    position:absolute;

    bottom:18px;

    font-size:.75rem;

    color:#555;

    letter-spacing:2px;

}

.project h3{

    padding:25px 25px 10px;

}

.project p{

    padding:0 25px;

    color:#bcbcbc;

    line-height:1.8;

}

.project a{

    display:inline-block;

    margin:30px 25px 25px;

    color:#ff4040;

    font-weight:600;

}

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

.contact{

    padding:120px 0;

}

.contact-card{

    text-align:center;

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

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

    border-radius:30px;

    padding:80px 50px;

}

.contact-card p{

    color:#ff3a3a;

    letter-spacing:3px;

}

.contact-card h2{

    margin:20px auto 35px;

    font-size:3rem;

    max-width:700px;

}

.socials{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.socials a{

    padding:16px 28px;

    border-radius:12px;

    background:#161616;

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

    transition:.3s;

}

.socials a:hover{

    background:#ff2d2d;

    transform:translateY(-5px);

}

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

footer{

    padding:40px 0;

    text-align:center;

    color:#888;

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

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#090909;

}

::-webkit-scrollbar-thumb{

    background:#ff2d2d;

    border-radius:30px;

}

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

@media(max-width:1000px){

.hero{

grid-template-columns:1fr;

display:grid;

text-align:center;

gap:70px;

}

.hero-text{

margin:auto auto 40px;

}

.hero-buttons{

justify-content:center;

}

.stats{

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

}

.service-grid{

grid-template-columns:1fr;

}

.portfolio-grid{

grid-template-columns:1fr;

}

.contact-card h2{

font-size:2.3rem;

}

header{

padding:20px 5%;

}

nav{

display:none;

}

}

@media(max-width:700px){

.hero h1{

font-size:3rem;

}

.section-title h2{

font-size:2.2rem;

}

.editor-card{

width:100%;

}

.stats{

grid-template-columns:1fr;

}

.contact-card{

padding:50px 25px;

}

.contact-card h2{

font-size:2rem;

}

.socials{

flex-direction:column;

}

.socials a{

width:100%;

text-align:center;

}

}
/*=================================
PRICING
=================================*/

.pricing{

    padding:120px 0;

}

.pricing-grid{

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

}

.price-card{

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

    border-radius:20px;

    padding:40px;

    backdrop-filter:blur(20px);

    transition:.35s;

}

.price-card:hover{

    transform:translateY(-10px);

    border-color:#ff2d2d;

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

}

.price-card h3{

    margin-bottom:25px;

    font-size:1.6rem;

}

.price-card p{

    color:#bcbcbc;

    line-height:1.8;

}

.price-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

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

}

.price-row:last-child{

    border-bottom:none;

}

.price-row strong{

    color:#ff3a3a;

    font-size:1.1rem;

}

.contact-email{

    margin-top:30px;

    color:#9d9d9d;

    line-height:1.8;

    font-size:.95rem;

}

.contact-email a{

    color:#ff3a3a;

}

@media(max-width:900px){

    .pricing-grid{

        grid-template-columns:1fr;

    }

}