body{
margin:0;
font-family: Arial, Helvetica, sans-serif;
background:
linear-gradient(135deg, rgba(138,92,255,.05), rgba(255,255,255,.95)),
repeating-linear-gradient(
45deg,
rgba(0,0,0,.03) 0,
rgba(0,0,0,.03) 1px,
transparent 1px,
transparent 30px
),
repeating-linear-gradient(
-45deg,
rgba(0,0,0,.03) 0,
rgba(0,0,0,.03) 1px,
transparent 1px,
transparent 30px
);
}


/* WHO WE ARE */

.who-we-are{
text-align:center;
padding:40px 20px;
max-width:900px;
margin:auto;
border-radius:10px;
}

.who-we-are h2{
font-size:40px;
color:#5c4cff;
margin-bottom:15px;
position:relative;
display:inline-block;
}

.corporate-title{
background: linear-gradient(90deg,#8A5CFF,#5C8DFF);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
font-weight:700;
}

.who-we-are h2::after{
content:"";
position:absolute;
left:50%;
bottom:-8px;
width:0;
height:3px;
background:#5c4cff;
transform:translateX(-50%);
animation:underlineGrow 1s ease forwards;
}

@keyframes underlineGrow{
from{width:0;}
to{width:80px;}
}

.who-we-are p{
font-size:17px;
line-height:1.7;
color:#555;
margin-bottom:15px;
font-weight:700;
}


/* GALLERY */

.gallery{
padding:20px 10%;
margin-bottom:20px;
}

.gallery-container{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

.gallery-item{
opacity:0;
transform:translateY(30px);
animation:imageFade .8s ease forwards;
}

.gallery-item:nth-child(1){animation-delay:.2s;}
.gallery-item:nth-child(2){animation-delay:.4s;}
.gallery-item:nth-child(3){animation-delay:.6s;}
.gallery-item:nth-child(4){animation-delay:.8s;}

@keyframes imageFade{
to{
opacity:1;
transform:translateY(0);
}
}

.gallery-item img{
width:100%;
height:320px;
object-fit:cover;
border-radius:10px;
cursor:pointer;
transition:transform .4s ease, box-shadow .4s ease;
}

.gallery-item img:hover{
transform:scale(1.05);
box-shadow:0 10px 30px rgba(0,0,0,0.2);
}


/* DESCRIPTION */

.description{
padding:20px 10%;
}

.desc-row{
width:100%;
margin:auto;
}

.desc-row p{
font-size:17px;
line-height:1.8;
color:#555;
margin-bottom:25px;
}


/* SECTION FADE */

.who-we-are,
.gallery,
.description{
opacity:0;
transform:translateY(40px);
animation:sectionFade 1s ease forwards;
}

.gallery{
animation-delay:.3s;
}

.description{
animation-delay:.6s;
}

@keyframes sectionFade{
to{
opacity:1;
transform:translateY(0);
}
}


/* IMAGE POPUP */

.image-popup{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.85);
justify-content:center;
align-items:center;
z-index:9999;
}

.image-popup img{
max-width:90%;
max-height:90%;
border-radius:10px;
}

.close-btn{
position:absolute;
top:30px;
right:40px;
font-size:40px;
color:white;
cursor:pointer;
}

/* POPUP ARROWS */

.arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
font-size:50px;
color:white;
cursor:pointer;
padding:10px;
user-select:none;
}

.arrow:hover{
color:#ddd;
}

.arrow.left{
left:30px;
}

.arrow.right{
right:30px;
}


/* TABLET */

@media (max-width:900px){

.gallery-container{
grid-template-columns:repeat(2,1fr);
}

}


/* MOBILE */

@media (max-width:600px){

.who-we-are h2{
font-size:30px;
}

.gallery{
padding:20px;
}

.gallery-container{
grid-template-columns:1fr;
}

.gallery-item img{
height:220px;
}

.description{
padding:20px;
}

.desc-row p{
font-size:16px;
}

}