@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&family=Playfair+Display:wght@500;600;700&family=Great+Vibes&display=swap');

body{
margin:0;
font-family:'Poppins',sans-serif;
background:#0f0f0f;
color:#fff;
}

.container{
max-width:1200px;
margin:auto;
padding:0 20px;
}

/* TITLE */

.about-title{
padding:110px 20px;
text-align:center;
background:#937000;
}

.about-title h2{
font-family:'Playfair Display',serif;
font-size:42px;
margin-bottom:10px;
}

.about-title p{
max-width:700px;
margin:auto;
color:#ccc;
line-height:28px;
}


/* STORY SECTION */

.story-section{
background:#0f0f0f;
padding:80px 20px;
}

/* HEADING */

.story-heading{
text-align:center;
margin-bottom:50px;
}

.story-heading h2{
font-family:'Great Vibes',cursive;
font-size:60px;
color:#d4af37;
}

.story-heading p{
color:#bbb;
font-size:15px;
}


/* GRID */

.story-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}


/* IMAGES GRID */

.story-images{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
}

/* IMAGE CARD */

.story-photo{
height:160px;
overflow:hidden;
position:relative;
background:#000;
transform:rotate(-2deg);
transition:.4s;
cursor:pointer;
}

.story-photo img{
width:100%;
height:100%;
object-fit:cover;
filter:grayscale(100%);
transition:.6s;
}

/* HOVER */

.story-photo:hover{
transform:rotate(0deg) scale(1.05);
box-shadow:0 20px 40px rgba(0,0,0,0.6);
}

.story-photo:hover img{
filter:grayscale(0%);
transform:scale(1.15);
}


/* FLOATING ANIMATION */

.story-photo:nth-child(odd){
animation:float1 6s ease-in-out infinite;
}

.story-photo:nth-child(even){
animation:float2 7s ease-in-out infinite;
}

@keyframes float1{

0%{transform:translateY(0px) rotate(-2deg);}
50%{transform:translateY(-6px) rotate(-1deg);}
100%{transform:translateY(0px) rotate(-2deg);}

}

@keyframes float2{

0%{transform:translateY(0px) rotate(2deg);}
50%{transform:translateY(-8px) rotate(1deg);}
100%{transform:translateY(0px) rotate(2deg);}

}


/* STORY TEXT */

.story-text h3{
font-family:'Playfair Display',serif;
font-size:22px;
margin-bottom:20px;
}

.story-text p{
font-size:15px;
color:#ccc;
line-height:28px;
margin-bottom:12px;
opacity:0;
transform:translateY(20px);
transition:.6s;
}

.story-text p.show{
opacity:1;
transform:translateY(0);
}

.story-text strong{
color:#d4af37;
}


/* BUTTONS */

.story-buttons{
margin-top:20px;
display:flex;
gap:15px;
}

.story-btn{
background:#d4af37;
color:#000;
padding:12px 26px;
border-radius:30px;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.story-btn:hover{
box-shadow:0 0 20px rgba(212,175,55,0.6);
transform:translateY(-3px);
}

.story-btn-outline{
border:1px solid #d4af37;
color:#d4af37;
padding:12px 26px;
border-radius:30px;
text-decoration:none;
transition:.3s;
}

.story-btn-outline:hover{
background:#d4af37;
color:#000;
}


/* MOBILE */

@media(max-width:900px){

.story-grid{
grid-template-columns:1fr;
}

.story-images{
grid-template-columns:repeat(3,1fr);
}

}

@media(max-width:600px){

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

.story-heading h2{
font-size:40px;
}

}

/* WHY US SECTION */

.why-section{

background:#fff;

padding:70px 20px;

}

.why-container{

max-width:1100px;

margin:auto;

}

.why-title{

text-align:center;

margin-bottom:40px;

}

.why-title h2{

font-family:'Playfair Display',serif;

font-size:36px;

color:#000;

margin-bottom:10px;

}

.why-title span{

color:#d4af37;

}

.why-title p{

color:#555;

max-width:700px;

margin:auto;

line-height:26px;

}


/* FEATURES GRID */

.why-grid{

display:grid;

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

gap:25px;

margin-top:40px;

}


/* FEATURE CARD */

.why-card{

background:#fafafa;

padding:25px;

border-radius:8px;

transition:.4s;

border:1px solid #eee;

}

.why-card:hover{

transform:translateY(-6px);

box-shadow:0 15px 35px rgba(0,0,0,0.08);

border-color:#d4af37;

}

.why-card h4{

font-size:18px;

margin-bottom:10px;

color:#000;

}

.why-card p{

font-size:14px;

color:#666;

line-height:22px;

}


/* SPECIAL FACTOR */

.special-box{

margin-top:50px;

background:#000;

color:#fff;

padding:35px;

border-radius:8px;

text-align:center;

}

.special-box h3{

font-family:'Playfair Display',serif;

color:#d4af37;

margin-bottom:10px;

}

.special-box p{

color:#ddd;

}


/* MOBILE */

@media(max-width:900px){

.why-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:600px){

.why-grid{

grid-template-columns:1fr;

}

}
/* TAB SECTION */
/* FULL WIDTH SECTION */

.work-tabs-section{
width:100%;
background:#f4f4f4;
padding:80px 0;
}


/* CENTER CONTAINER */

.work-tabs-container{
max-width:1300px;
margin:auto;
background:#fff;
padding:40px;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
}


/* TABS */

.tabs{
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
margin-bottom:30px;
}

.tab-btn{
padding:10px 22px;
border:none;
background:#efefef;
cursor:pointer;
border-radius:30px;
font-weight:600;
transition:.3s;
}

.tab-btn.active{
background:#d4af37;
color:#000;
}


/* TAB CONTENT */

.tab-content{
display:none;
}

.tab-content.active{
display:block;
}


/* LIST BOX */

.tab-box{
height:320px;
overflow-y:auto;
background:#fafafa;
border:1px solid #eee;
padding:25px;
border-radius:10px;
}


/* GRID */

.tab-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
}

.tab-item{
font-size:14px;
color:#222;
padding:6px 0;
border-bottom:1px dashed #ddd;
font-weight:500;
}

.tab-item:hover{
color:#d4af37;
}


/* SCROLLBAR */

.tab-box::-webkit-scrollbar{
width:6px;
}

.tab-box::-webkit-scrollbar-thumb{
background:#d4af37;
border-radius:20px;
}

/* TAB CONTENT */

.tab-content{
display:none;
}

.tab-content.active{
display:block;
}


/* LIST BOX */

.tab-box{
height:280px;
overflow-y:auto;
background:#fafafa;
border:1px solid #eee;
padding:20px;
border-radius:10px;
}


/* GRID LIST */

.tab-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:8px;
}

.tab-item{
font-size:14px;
padding:8px 0;
border-bottom:1px dashed #e5e5e5;
color:#000;
font-weight:500;
}


/* NICE SCROLLBAR */

.tab-box::-webkit-scrollbar{
width:6px;
}

.tab-box::-webkit-scrollbar-thumb{
background:#d4af37;
border-radius:20px;
}