/* ==========================================
   Mr.aiwithmahdi
   Logo Design Page
   Premium CSS
   Part 1
========================================== */


/* Reset */

*{

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

}



html{

    scroll-behavior:smooth;

}



body{

    font-family:Vazirmatn, sans-serif;

    background:

    radial-gradient(
        circle at 15% 20%,
        rgba(212,175,55,.15),
        transparent 35%
    ),

    radial-gradient(
        circle at 85% 70%,
        rgba(0,120,255,.12),
        transparent 35%
    ),

    linear-gradient(
        180deg,
        #050505,
        #090909,
        #020202
    );


    color:#fff;

    overflow-x:hidden;

}




a{

    text-decoration:none;

    color:inherit;

}



/* Header */


header{

    padding:25px 0;

}



nav{

    width:90%;

    max-width:1200px;

    margin:auto;

    display:flex;

    justify-content:center;

    gap:35px;

}



nav a{

    color:#ccc;

    transition:.3s ease;

}



nav a:hover{

    color:#d4af37;

}



/* Main */


main{

    width:90%;

    max-width:1200px;

    margin:auto;

}




/* Hero */


.logo-hero{

    min-height:75vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    position:relative;

}




.logo-hero::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;


    background:

    radial-gradient(
        circle,
        rgba(212,175,55,.22),
        transparent 70%
    );


    filter:blur(80px);

    z-index:-1;


}



.logo-hero span{


    color:#d4af37;

    letter-spacing:3px;

    margin-bottom:25px;


}



.logo-hero h1{


    max-width:900px;


    font-size:4rem;


    line-height:1.5;


    background:

    linear-gradient(
        90deg,
        #fff,
        #d4af37,
        #fff0a8
    );


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;


}



.logo-hero p{


    max-width:800px;

    margin-top:30px;

    color:#bbb;

    line-height:2.2;

    font-size:1.1rem;

/* ==========================================
   Mr.aiwithmahdi
   Logo Design Page
   Premium CSS
   Part 2
   Cards + About Section
========================================== */


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


.logo-about{


    padding:100px 0;

    text-align:center;


}



.logo-about h2,
.logo-services h2,
.logo-process h2{


    font-size:2.5rem;

    margin-bottom:45px;


    background:

    linear-gradient(
        90deg,
        #fff,
        #d4af37
    );


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;


}



.logo-about p{


    max-width:850px;

    margin:auto;


    color:#bbb;


    line-height:2.3;


    font-size:1.05rem;


}



/* ==========================================
   SERVICE CARDS
========================================== */


.logo-services{


    padding:100px 0;

    text-align:center;


}



.logo-grid{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}



.logo-grid div{


    position:relative;


    padding:40px 30px;


    border-radius:30px;


    background:


    linear-gradient(

    135deg,

    rgba(255,255,255,.08),

    rgba(255,255,255,.02)

    );


    border:

    1px solid

    rgba(255,255,255,.12);



    backdrop-filter:

    blur(20px);



    overflow:hidden;



    transition:.5s ease;


}



/* Golden Glow */


.logo-grid div::before{


    content:"";


    position:absolute;


    width:220px;


    height:220px;


    top:-100px;


    right:-100px;


    background:


    radial-gradient(

    circle,

    rgba(212,175,55,.3),

    transparent 70%

    );


    filter:blur(40px);


    opacity:0;


    transition:.5s;


}



/* Shine Effect */


.logo-grid div::after{


    content:"";


    position:absolute;


    top:0;


    left:-120%;


    width:80%;


    height:100%;


    background:


    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.2),

    transparent

    );


    transform:

    skewX(-25deg);


    transition:.8s;


}




.logo-grid div:hover{


    transform:

    translateY(-15px)

    scale(1.03);



    border-color:

    rgba(212,175,55,.5);



    box-shadow:


    0 30px 70px

    rgba(0,0,0,.5),


    0 0 35px

    rgba(212,175,55,.18);



}



.logo-grid div:hover::before{


    opacity:1;


}



.logo-grid div:hover::after{


    left:140%;


}




.logo-grid h3{


    position:relative;


    z-index:2;


    font-size:1.4rem;


    margin-bottom:20px;


}



.logo-grid p{


    position:relative;


    z-index:2;


    color:#bbb;


    line-height:2;


}
  /* ==========================================
   Mr.aiwithmahdi
   Logo Design Page
   Premium CSS
   Part 3
   Process + CTA
========================================== */


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


.logo-process{


    padding:100px 0;

    text-align:center;


}



.logo-process > div{


    max-width:900px;


    margin:

    20px auto;


    padding:

    25px 35px;



    border-radius:25px;


    background:


    linear-gradient(

    135deg,

    rgba(255,255,255,.08),

    rgba(255,255,255,.02)

    );



    border:

    1px solid

    rgba(255,255,255,.12);



    color:#fff;


    font-size:1.1rem;


    text-align:right;


    transition:.45s ease;



}



/* Process Hover */


.logo-process > div:hover{


    transform:

    translateX(-15px);



    border-color:

    rgba(212,175,55,.5);



    box-shadow:


    0 25px 60px

    rgba(0,0,0,.45),


    0 0 35px

    rgba(212,175,55,.2);


}



/* Number Glow */


.logo-process > div::first-letter{


    color:#d4af37;


    font-weight:900;


}





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


.logo-cta{


    margin:

    80px 0;


    padding:

    80px 40px;


    border-radius:40px;


    text-align:center;


    position:relative;


    overflow:hidden;



    background:


    linear-gradient(

    135deg,

    rgba(212,175,55,.18),

    rgba(255,255,255,.05)

    );



    border:

    1px solid

    rgba(255,255,255,.15);


}




.logo-cta::before{


    content:"";


    position:absolute;


    width:500px;


    height:500px;


    top:50%;


    left:50%;


    transform:

    translate(-50%,-50%);



    background:


    radial-gradient(

    circle,

    rgba(212,175,55,.25),

    transparent 70%

    );


    filter:blur(60px);


}





.logo-cta h2{


    position:relative;


    z-index:2;


    font-size:2.5rem;


    margin-bottom:40px;


    line-height:1.5;


}





.logo-cta a{


    position:relative;


    z-index:2;


    display:inline-block;



    padding:

    17px 50px;



    border-radius:50px;



    background:


    linear-gradient(

    90deg,

    #d4af37,

    #fff0a8

    );



    color:#050505;


    font-weight:800;


    transition:.4s ease;


}





.logo-cta a:hover{


    transform:

    translateY(-8px)

    scale(1.05);



    box-shadow:


    0 20px 50px

    rgba(212,175,55,.35);


}



/* Reveal Animation */


.logo-about,
.logo-services,
.logo-process,
.logo-cta{


    animation:

    fadeLogo .9s ease both;


}



@keyframes fadeLogo{


    from{


        opacity:0;


        transform:

        translateY(40px);


    }



    to{


        opacity:1;


        transform:

        translateY(0);


    }


}
  /* ==========================================
   Mr.aiwithmahdi
   Logo Design Page
   Premium CSS
   Part 4
   Responsive + Final Optimization
========================================== */


/* ==========================================
   TABLET
========================================== */


@media(max-width:1000px){


    nav{

        gap:20px;

    }


    .logo-hero h1{

        font-size:3rem;

    }



    .logo-grid{


        grid-template-columns:

        repeat(2,1fr);


    }



}



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


@media(max-width:700px){



    main{

        width:92%;

    }



    nav{

        flex-wrap:wrap;

        gap:15px;

    }



    nav a{

        font-size:.85rem;

    }




    /* Hero */


    .logo-hero{

        min-height:65vh;

    }



    .logo-hero h1{

        font-size:2rem;

        line-height:1.7;

    }



    .logo-hero p{

        font-size:.95rem;

        line-height:2;

    }




    /* Sections */


    .logo-about,
    .logo-services,
    .logo-process{

        padding:60px 0;

    }



    .logo-about h2,
    .logo-services h2,
    .logo-process h2{

        font-size:1.9rem;

        line-height:1.6;

    }




    /* Cards */


    .logo-grid{


        grid-template-columns:

        1fr;


        gap:20px;


    }



    .logo-grid div{


        padding:30px 20px;


    }



    .logo-grid h3{

        font-size:1.2rem;

    }



    .logo-grid p{

        font-size:.9rem;

    }





    /* Process */


    .logo-process > div{


        padding:

        22px;


        font-size:.95rem;


        text-align:center;


    }




    /* CTA */


    .logo-cta{


        padding:

        50px 20px;


        border-radius:30px;


    }



    .logo-cta h2{


        font-size:1.7rem;


        line-height:1.8;


    }



    .logo-cta a{


        width:100%;


        padding:15px;


    }



}




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


@media(max-width:400px){



    .logo-hero h1{

        font-size:1.7rem;

    }



    .logo-hero span{

        font-size:.75rem;

    }



    .logo-about h2,
    .logo-services h2,
    .logo-process h2{

        font-size:1.5rem;

    }



}




/* ==========================================
   ACCESSIBILITY + PERFORMANCE
========================================== */


@media(prefers-reduced-motion:reduce){


    *,
    *::before,
    *::after{


        animation-duration:.01ms!important;


        animation-iteration-count:1!important;


        transition-duration:.01ms!important;


        scroll-behavior:auto!important;


    }


}
}
/* ==========================================
   Mr.aiwithmahdi
   Logo Portfolio Section
   Premium CSS
   Part 1
========================================== */


/* Portfolio Section */


.logo-portfolio{


    padding:100px 0;

    text-align:center;


}



.logo-portfolio h2{


    font-size:2.5rem;


    margin-bottom:25px;



    background:


    linear-gradient(

    90deg,

    #ffffff,

    #d4af37

    );


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;


}



.portfolio-desc{


    max-width:700px;


    margin:

    0 auto 60px;


    color:#bbb;


    line-height:2.2;


    font-size:1.05rem;


}



/* Portfolio Grid */


.portfolio-grid{


    display:grid;


    grid-template-columns:


    repeat(2,1fr);


    gap:35px;


}



/* Portfolio Card */


.portfolio-card{


    position:relative;


    overflow:hidden;


    border-radius:30px;


    background:


    linear-gradient(

    145deg,

    rgba(255,255,255,.08),

    rgba(255,255,255,.02)

    );


    border:


    1px solid

    rgba(255,255,255,.12);



    padding:20px;


    transition:.5s ease;



}



/* Image */


.portfolio-card img{


    width:100%;


    height:320px;


    object-fit:cover;


    border-radius:22px;


    transition:.6s ease;



}
/* ==========================================
   Mr.aiwithmahdi
   Logo Portfolio Section
   Premium CSS
   Part 2
   Hover + Text Effects
========================================== */



/* Golden Glow */


.portfolio-card::before{


    content:"";


    position:absolute;


    width:250px;


    height:250px;


    top:-120px;


    right:-120px;



    background:


    radial-gradient(

    circle,

    rgba(212,175,55,.35),

    transparent 70%

    );


    filter:blur(40px);



    opacity:0;


    transition:.5s;


}




/* Shine Effect */


.portfolio-card::after{


    content:"";


    position:absolute;


    top:0;


    left:-120%;


    width:80%;


    height:100%;



    background:


    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.2),

    transparent

    );



    transform:

    skewX(-25deg);



    transition:.8s;


}




/* Card Hover */


.portfolio-card:hover{


    transform:


    translateY(-15px);



    border-color:


    rgba(212,175,55,.5);



    box-shadow:



    0 30px 70px

    rgba(0,0,0,.5),



    0 0 35px

    rgba(212,175,55,.2);



}




.portfolio-card:hover::before{


    opacity:1;


}




.portfolio-card:hover::after{


    left:140%;


}




/* Image Zoom */


.portfolio-card:hover img{


    transform:


    scale(1.08);



}




/* Text */


.portfolio-card h3{


    margin-top:25px;


    font-size:1.4rem;


    color:#fff;


}




.portfolio-card p{


    margin-top:15px;


    color:#bbb;


    line-height:2;


}
/* ==========================================
   Mr.aiwithmahdi
   Logo Portfolio Section
   Premium CSS
   Part 3
   Responsive Final
========================================== */



@media(max-width:900px){


    .portfolio-grid{


        grid-template-columns:


        1fr;


    }



    .portfolio-card img{


        height:300px;


    }


}





@media(max-width:600px){



    .logo-portfolio{


        padding:60px 0;


    }



    .logo-portfolio h2{


        font-size:2rem;


    }



    .portfolio-desc{


        font-size:.95rem;


        line-height:2;


        margin-bottom:40px;


    }




    .portfolio-card{


        padding:15px;


        border-radius:25px;


    }



    .portfolio-card img{


        height:240px;


        border-radius:18px;


    }



    .portfolio-card h3{


        font-size:1.2rem;


    }



    .portfolio-card p{


        font-size:.9rem;


    }


}