/*======================================================
        MOBILE STORE SULTANS
        PREMIUM CASE STUDY
        Designed By Mr.aiwithmahdi
======================================================*/

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

*{

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

}

html{

scroll-behavior:smooth;

}

body{

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

background:#05070d;

color:#fff;

overflow-x:hidden;

position:relative;

}



/* Scroll */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#080b13;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(#00c8ff,#3b82f6);

border-radius:50px;

}



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

.background-grid{

position:fixed;

inset:0;

background-image:

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

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

background-size:55px 55px;

opacity:.35;

pointer-events:none;

z-index:-5;

}



.background-grid::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(circle at center,

transparent,

rgba(5,7,13,.75));

}



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

.background-glow{

position:fixed;

border-radius:50%;

filter:blur(130px);

pointer-events:none;

z-index:-4;

animation:glowMove 16s ease-in-out infinite;

}



.glow1{

width:520px;

height:520px;

top:-180px;

right:-120px;

background:#00bfff55;

}



.glow2{

width:650px;

height:650px;

bottom:-260px;

left:-220px;

background:#2563eb44;

animation-delay:8s;

}



@keyframes glowMove{

0%{

transform:translateY(0) scale(1);

}

50%{

transform:translateY(70px) scale(1.18);

}

100%{

transform:translateY(0) scale(1);

}

}



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

.hero{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:120px 8%;

position:relative;

}



.hero-content{

width:100%;

max-width:1150px;

text-align:center;

animation:heroFade 1.4s ease;

}



.hero-badge{

display:inline-block;

padding:12px 26px;

border-radius:60px;

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

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

backdrop-filter:blur(20px);

font-size:14px;

letter-spacing:3px;

color:#8fdfff;

margin-bottom:35px;

box-shadow:

0 0 35px rgba(0,180,255,.12);

}



.hero h1{

font-size:82px;

font-weight:900;

line-height:1.05;

margin-bottom:30px;

}



.hero h1 span{

background:

linear-gradient(90deg,

#00d4ff,

#2563eb,

#7dd3fc);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}



.hero p{

max-width:900px;

margin:auto;

font-size:20px;

line-height:2.2;

color:#b9c5d6;

}



.hero-stats{

margin-top:70px;

display:flex;

justify-content:center;

gap:35px;

flex-wrap:wrap;

}



.stat{

width:180px;

padding:28px;

border-radius:28px;

background:

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

backdrop-filter:blur(25px);

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

transition:.45s;

box-shadow:

0 25px 45px rgba(0,0,0,.25);

}



.stat:hover{

transform:

translateY(-12px);

border-color:#00c8ff;

box-shadow:

0 25px 60px rgba(0,170,255,.30);

}



.stat h2{

font-size:42px;

color:#fff;

margin-bottom:10px;

}



.stat span{

font-size:14px;

color:#98a7bb;

}



.scroll-btn{

margin-top:65px;

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 45px;

border-radius:60px;

text-decoration:none;

font-weight:800;

font-size:17px;

color:#fff;

background:

linear-gradient(135deg,

#00d4ff,

#2563eb);

box-shadow:

0 20px 45px rgba(0,170,255,.35);

transition:.45s;

}



.scroll-btn:hover{

transform:

translateY(-8px)
scale(1.05);

box-shadow:

0 35px 70px rgba(0,170,255,.45);

}



@keyframes heroFade{

from{

opacity:0;

transform:

translateY(60px);

}

to{

opacity:1;

transform:

translateY(0);

}

}



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

.section-title{

text-align:center;

margin-bottom:70px;

}



.section-title span{

letter-spacing:3px;

font-size:13px;

color:#58c8ff;

}



.section-title h2{

margin-top:15px;

font-size:52px;

font-weight:900;

}
 
/*======================================================
        PROJECT OVERVIEW
======================================================*/

.overview{

    width:90%;
    
    max-width:1200px;
    
    margin:120px auto;
    
    padding:70px 60px;
    
    background:
    
    rgba(255,255,255,.04);
    
    border:
    
    1px solid rgba(255,255,255,.08);
    
    border-radius:40px;
    
    backdrop-filter:blur(25px);
    
    box-shadow:
    
    0 30px 80px rgba(0,0,0,.35);
    
    animation:fadeUp 1s ease;
    
    }
    
    
    
    .overview p{
    
    text-align:center;
    
    font-size:19px;
    
    line-height:2.3;
    
    color:#c1ccdb;
    
    max-width:900px;
    
    margin:auto;
    
    }
    
    
    
    
    /*======================================================
            PREMIUM GALLERY
    ======================================================*/
    
    
    .gallery{
    
    width:92%;
    
    max-width:1400px;
    
    margin:150px auto;
    
    }
    
    
    
    .gallery-grid{
    
    display:grid;
    
    grid-template-columns:
    
    repeat(auto-fit,minmax(230px,1fr));
    
    gap:35px;
    
    }
    
    
    
    
    .gallery-item{
    
    position:relative;
    
    aspect-ratio:9/16;
    
    border-radius:35px;
    
    overflow:hidden;
    
    background:#0b101a;
    
    cursor:pointer;
    
    transform-style:preserve-3d;
    
    border:
    
    1px solid rgba(255,255,255,.1);
    
    box-shadow:
    
    0 25px 60px rgba(0,0,0,.45);
    
    
    opacity:0;
    
    animation:
    
    galleryShow .9s forwards;
    
    transition:.5s;
    
    }
    
    
    
    
    .gallery-item:nth-child(1){
    
    animation-delay:.1s;
    
    }
    
    .gallery-item:nth-child(2){
    
    animation-delay:.2s;
    
    }
    
    .gallery-item:nth-child(3){
    
    animation-delay:.3s;
    
    }
    
    .gallery-item:nth-child(4){
    
    animation-delay:.4s;
    
    }
    
    .gallery-item:nth-child(5){
    
    animation-delay:.5s;
    
    }
    
    .gallery-item:nth-child(6){
    
    animation-delay:.6s;
    
    }
    
    .gallery-item:nth-child(7){
    
    animation-delay:.7s;
    
    }
    
    .gallery-item:nth-child(8){
    
    animation-delay:.8s;
    
    }
    
    .gallery-item:nth-child(9){
    
    animation-delay:.9s;
    
    }
    
    .gallery-item:nth-child(10){
    
    animation-delay:1s;
    
    }
    
    
    
    .gallery-item::before{
    
    content:"";
    
    position:absolute;
    
    inset:-2px;
    
    background:
    
    linear-gradient(
    
    135deg,
    
    transparent,
    
    #00d4ff,
    
    transparent
    
    );
    
    opacity:0;
    
    transition:.5s;
    
    z-index:0;
    
    }
    
    
    
    .gallery-item img{
    
    width:100%;
    
    height:100%;
    
    object-fit:cover;
    
    display:block;
    
    position:relative;
    
    z-index:1;
    
    transition:.6s;
    
    }
    
    
    
    .gallery-item:hover{
    
    transform:
    
    translateY(-18px)
    
    rotateX(5deg)
    
    rotateY(-5deg);
    
    box-shadow:
    
    0 40px 90px rgba(0,200,255,.25);
    
    }
    
    
    
    .gallery-item:hover::before{
    
    opacity:1;
    
    animation:
    
    borderMove 2s linear infinite;
    
    }
    
    
    
    .gallery-item:hover img{
    
    transform:
    
    scale(1.08);
    
    }
    
    
    
    
    .overlay{
    
    position:absolute;
    
    inset:0;
    
    display:flex;
    
    align-items:flex-end;
    
    justify-content:center;
    
    padding-bottom:35px;
    
    background:
    
    linear-gradient(
    
    transparent,
    
    rgba(0,0,0,.8)
    
    );
    
    opacity:0;
    
    transition:.5s;
    
    z-index:2;
    
    }
    
    
    
    .overlay span{
    
    font-size:18px;
    
    font-weight:800;
    
    letter-spacing:2px;
    
    color:#fff;
    
    }
    
    
    
    .gallery-item:hover .overlay{
    
    opacity:1;
    
    }
    
    
    
    
    @keyframes galleryShow{
    
    from{
    
    opacity:0;
    
    transform:
    
    translateY(60px)
    
    scale(.9);
    
    }
    
    
    to{
    
    opacity:1;
    
    transform:
    
    translateY(0)
    
    scale(1);
    
    }
    
    }
    
    
    
    
    @keyframes borderMove{
    
    0%{
    
    transform:rotate(0deg);
    
    }
    
    
    100%{
    
    transform:rotate(360deg);
    
    }
    
    }
    
    
    
    
    /*======================================================
            RESULT SECTION
    ======================================================*/
    
    
    .result{
    
    width:90%;
    
    max-width:1200px;
    
    margin:150px auto;
    
    }
    
    
    
    .result-box{
    
    padding:70px;
    
    border-radius:45px;
    
    background:
    
    linear-gradient(
    
    135deg,
    
    rgba(0,212,255,.12),
    
    rgba(37,99,235,.12)
    
    );
    
    
    border:
    
    1px solid rgba(255,255,255,.12);
    
    backdrop-filter:
    
    blur(25px);
    
    text-align:center;
    
    }
    
    
    
    .result-box p{
    
    font-size:19px;
    
    line-height:2.2;
    
    color:#c5d0df;
    
    max-width:900px;
    
    margin:0 auto 45px;
    
    }
    
    
    
    .back-btn{
    
    display:inline-flex;
    
    padding:18px 45px;
    
    border-radius:50px;
    
    background:
    
    linear-gradient(
    
    135deg,
    
    #2563eb,
    
    #00d4ff
    
    );
    
    color:white;
    
    text-decoration:none;
    
    font-weight:800;
    
    transition:.4s;
    
    }
    
    
    
    .back-btn:hover{
    
    transform:
    
    translateY(-8px);
    
    box-shadow:
    
    0 25px 60px rgba(0,180,255,.4);
    
    }
    
    
    
    
    @keyframes fadeUp{
    
    from{
    
    opacity:0;
    
    transform:translateY(50px);
    
    }
    
    
    to{
    
    opacity:1;
    
    transform:translateY(0);
    
    }
    
    }
    /*======================================================
        PREMIUM LIGHTBOX
======================================================*/


.lightbox{

    position:fixed;
    
    inset:0;
    
    background:
    
    rgba(0,0,0,.88);
    
    backdrop-filter:blur(20px);
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    opacity:0;
    
    visibility:hidden;
    
    transition:.45s;
    
    z-index:9999;
    
    padding:30px;
    
    }
    
    
    
    .lightbox.active{
    
    opacity:1;
    
    visibility:visible;
    
    }
    
    
    
    .lightbox img{
    
    max-width:90%;
    
    max-height:90vh;
    
    border-radius:35px;
    
    box-shadow:
    
    0 40px 120px rgba(0,200,255,.35);
    
    transform:
    
    scale(.8);
    
    transition:.45s;
    
    }
    
    
    
    .lightbox.active img{
    
    transform:
    
    scale(1);
    
    }
    
    
    
    
    .close-lightbox{
    
    position:absolute;
    
    top:35px;
    
    right:45px;
    
    width:55px;
    
    height:55px;
    
    border-radius:50%;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    font-size:30px;
    
    color:white;
    
    background:
    
    rgba(255,255,255,.1);
    
    cursor:pointer;
    
    transition:.4s;
    
    }
    
    
    
    .close-lightbox:hover{
    
    background:#00c8ff;
    
    transform:rotate(90deg);
    
    }
    
    
    
    /*======================================================
            SCROLL ANIMATION
    ======================================================*/
    
    
    .gallery-item,
    .overview,
    .result-box{
    
    will-change:transform,opacity;
    
    }
    
    
    
    
    
    /*======================================================
            RESPONSIVE DESIGN
    ======================================================*/
    
    
    @media(max-width:1100px){
    
    
    .hero h1{
    
    font-size:65px;
    
    }
    
    
    .gallery-grid{
    
    grid-template-columns:
    
    repeat(3,1fr);
    
    }
    
    
    .stat{
    
    width:160px;
    
    }
    
    
    }
    
    
    
    @media(max-width:800px){
    
    
    .hero{
    
    padding:100px 5%;
    
    min-height:auto;
    
    }
    
    
    
    .hero h1{
    
    font-size:48px;
    
    }
    
    
    .hero p{
    
    font-size:16px;
    
    line-height:2;
    
    }
    
    
    
    .hero-stats{
    
    gap:15px;
    
    }
    
    
    .stat{
    
    width:140px;
    
    padding:22px 15px;
    
    }
    
    
    .stat h2{
    
    font-size:30px;
    
    }
    
    
    
    
    .overview{
    
    padding:40px 25px;
    
    border-radius:30px;
    
    }
    
    
    
    .overview p{
    
    font-size:16px;
    
    }
    
    
    
    .gallery{
    
    width:94%;
    
    }
    
    
    
    .gallery-grid{
    
    grid-template-columns:
    
    repeat(2,1fr);
    
    gap:18px;
    
    }
    
    
    
    .gallery-item{
    
    border-radius:22px;
    
    }
    
    
    
    
    .result-box{
    
    padding:45px 25px;
    
    }
    
    
    
    .result-box p{
    
    font-size:16px;
    
    }
    
    
    .section-title h2{
    
    font-size:38px;
    
    }
    
    
    
    }
    
    
    
    @media(max-width:480px){
    
    
    
    .hero h1{
    
    font-size:38px;
    
    }
    
    
    
    .hero-badge{
    
    font-size:11px;
    
    padding:10px 18px;
    
    }
    
    
    
    .gallery-grid{
    
    grid-template-columns:
    
    repeat(2,1fr);
    
    gap:14px;
    
    }
    
    
    
    .gallery-item:hover{
    
    transform:
    
    translateY(-8px);
    
    }
    
    
    
    .lightbox img{
    
    max-width:95%;
    
    max-height:80vh;
    
    border-radius:25px;
    
    }
    
    
    
    .close-lightbox{
    
    top:20px;
    
    right:20px;
    
    width:45px;
    
    height:45px;
    
    font-size:24px;
    
    }
    
    
    
    }