*{
box-sizing:border-box;
}


body{

margin:0;

font-family:Poppins,Arial;

background:#f8f9fc;

color:#111;

}



.hero{

height:500px;

background:
linear-gradient(
135deg,
#111827,
#d6007f
);

display:flex;

align-items:center;

justify-content:center;

text-align:center;

color:white;

}



.hero img{

width:120px;

height:120px;

object-fit:contain;

margin-bottom:20px;

}



.hero h1{

font-size:50px;

font-weight:700;

}



.hero p{

font-size:20px;

opacity:.9;

}




.container{

max-width:1200px;

margin:auto;

padding:60px 20px;

}




.filter-box{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

margin-bottom:50px;

}



.filter-btn{

padding:12px 25px;

border-radius:50px;

background:white;

text-decoration:none;

color:#111;

box-shadow:0 5px 20px #ddd;

}



.filter-btn:hover{

background:#d6007f;

color:white;

}




.gallery{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}




.testimonial-card{

background:white;

border-radius:25px;

overflow:hidden;

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

transition:.35s;

border:1px solid rgba(0,0,0,.05);

}



.testimonial-card:hover{

transform:translateY(-10px);

}



.testimonial-card img{

width:100%;

height:420px;

object-fit:contain;

background:#eee;

cursor:pointer;

}



.card-body{

padding:25px;

}

.card-body p{

margin-bottom:18px;

}

.card-body h4{

font-size:20px;

font-weight:700;

margin-bottom:15px;

}



.card-body span{

display:inline-block;

background:#d6007f;

color:white;

padding:7px 18px;

border-radius:50px;

font-size:12px;

font-weight:600;

}




#lightbox{

display:none;

position:fixed;

top:0;

left:0;

right:0;

bottom:0;

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

justify-content:center;

align-items:center;

z-index:999;

}



#lightbox img{

max-width:90%;

max-height:90%;

}



footer{

background:#111827;

color:white;

padding:30px;

text-align:center;

}




@media(max-width:600px){


.hero h1{

font-size:32px;

}


.hero{

height:400px;

}


}

.testimonial-preview{

display:grid;

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

gap:10px;

position:relative;

height:220px;

overflow:hidden;

background:#f1f1f1;

padding:10px;

}



.preview-item{

overflow:hidden;

border-radius:15px;

}



.preview-item img{

width:100%;

height:200px;

object-fit:contain;

background:white;

transition:.3s;

}



.preview-item:hover img{

transform:scale(1.05);

}


.testimonial-preview img{

width:100%;

height:180px;

object-fit:contain;

background:#f5f5f5;

border-radius:12px;

}


.more-image{

position:absolute;

right:15px;

bottom:15px;

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

color:white;

padding:8px 15px;

border-radius:20px;

z-index:5;

}


.testimonial-card-link{

text-decoration:none;

color:inherit;

}


.testimonial-card-link:hover{

    color:inherit;

}

.detail-header{

display:flex;

align-items:center;

gap:15px;

padding:30px;

background:white;

box-shadow:0 5px 20px rgba(0,0,0,.08);

margin-bottom:40px;

}


.detail-header img{

width:70px;

height:70px;

object-fit:contain;

}



.main-preview{

background:#111;

border-radius:20px;

padding:15px;

text-align:center;

position:relative;

height:520px;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

}



.main-preview img{

max-width:100%;

max-height:100%;

object-fit:contain;

border-radius:15px;

transition:.25s ease;

}



.thumbnail-gallery{

display:grid;

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

gap:15px;

margin-top:20px;

margin-bottom:40px;

}


.thumbnail-gallery img{

width:100%;

height:140px;

object-fit:contain;

background:#fff;

border-radius:12px;

cursor:pointer;

transition:.3s;

}


.thumbnail-gallery img:hover{

transform:scale(1.05);

}



.back-button{

display:inline-block;

padding:10px 20px;

background:#333;

color:white;

border-radius:10px;

text-decoration:none;

margin-bottom:25px;

}



@media(max-width:768px){

.thumbnail-gallery{

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

margin-bottom:35px;

}

.detail-header{

padding:20px;

}

.card{

margin-top:15px;

}

}



.slide-btn{

position:absolute;

top:50%;

transform:translateY(-50%);

width:45px;

height:45px;

border-radius:50%;

border:none;

background:white;

font-size:30px;

z-index:10;

cursor:pointer;

}



.slide-btn.left{

left:25px;

}



.slide-btn.right{

right:25px;

}



.slide-btn:hover{

background:#d6007f;

color:white;

}



.thumbnail-gallery img.active-thumb{

border:3px solid #d6007f;

}

.screenshot-item{

width:100%;

height:260px;

object-fit:contain;

background:#f5f5f5;

padding:10px;

border-radius:15px;

cursor:pointer;

transition:.3s;

}



.screenshot-item:hover{

transform:scale(1.03);

}

#imageViewer{

display:none;

position:fixed;

top:0;

left:0;

right:0;

bottom:0;

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

z-index:9999;

justify-content:center;

align-items:center;

padding:30px;

}



#imageViewer img{

max-width:95%;

max-height:95%;

object-fit:contain;

border-radius:15px;

}



.viewer-close{

position:absolute;

top:30px;

right:40px;

width:50px;

height:50px;

border:none;

border-radius:50%;

background:white;

font-size:35px;

cursor:pointer;

z-index:10;

}



.viewer-close:hover{

background:#d6007f;

color:white;

}

.main-preview img{

transition:.25s ease;

opacity:1;

}



#imageCounter{

position:absolute;

bottom:25px;

left:50%;

transform:translateX(-50%);

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

color:white;

padding:7px 18px;

border-radius:20px;

font-size:14px;

}

.active-filter{

background:#d6007f;

color:#fff;

}

.hero-social{

margin-top:25px;

display:flex;

justify-content:center;

gap:18px;

}

.hero-social a{

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

backdrop-filter:blur(8px);

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

color:white;

font-size:22px;

text-decoration:none;

transition:.3s;

}

.hero-social a:hover{

background:white;

color:#d6007f;

transform:translateY(-4px);

}