/* RESET */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Inter;
}

body{
overflow-x:hidden;
background:#fff;
}

/* ================= BANNER ================= */
.web-about-banner{
position:relative;
height:80vh;
width:100%;
display:flex;
align-items:center;
overflow:hidden;

}

/* IMAGE */
.web-about-banner-bg{
position:absolute;
inset:0;
}

.web-about-banner-bg img{
width:100%;
height:100%;
object-fit:cover;
filter:brightness(.35) contrast(1.1);
transform:scale(1.2);
animation:bgZoom 12s ease-in-out infinite;
}

@keyframes bgZoom{
0%,100%{transform:scale(1.2);}
50%{transform:scale(1.32);}
}

/* OVERLAY */
.web-about-banner-overlay{
position:absolute;
inset:0;
background:linear-gradient(
90deg,
rgba(8,17,31,.95),
rgba(8,17,31,.7),
rgba(8,17,31,.4)
);
}

/* CONTENT */
.web-about-banner-content{
position:relative;
z-index:2;
width:min(1300px,90%);
margin:auto;
color:#fff;
}

/* TAG */
.web-about-banner-tag{
display:inline-block;
padding:10px 18px;
border-radius:50px;
border:1px solid rgba(212,175,55,.4);
color:#d4af37;
font-size:11px;
letter-spacing:3px;

}

/* TITLE */
.hero-title{
font-family:'Cinzel',serif;

font-size: clamp(46px, 5.5vw, 100px);

line-height:1.05;
margin-top: 7px;

font-weight:900;

letter-spacing:-2px;

margin: bottom 10
px;

text-transform:uppercase;

transform-origin:top;
}
.hero-title .line{
font-family:inherit;
}

.slide.active .hero-title{
animation:
headingDrop 1.9s
cubic-bezier(.23,1,.32,1)
forwards;
}

/* LINE */

.hero-title .line{
display:block;

background:
linear-gradient(
90deg,
#d4af37 0%,
#fff6ca 20%,
#173d6d 38%,
#d4af37 58%,
#fff4bc 80%,
#173d6d 100%
);

background-size:200% auto;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

text-shadow:
0 0 40px rgba(212,175,55,.18);

animation:
goldFlow 7s linear infinite,
titlePulse 3.5s ease-in-out infinite;
}

@keyframes headingDrop{

0%{
opacity:0;

transform:
translateY(-260px)
scale(.4)
rotateX(80deg);

filter:
blur(16px);
}

55%{
opacity:1;

transform:
translateY(35px)
scale(1.05)
rotateX(0);

filter:
blur(0);
}

100%{
opacity:1;

transform:
translateY(0)
scale(1)
rotateX(0);

filter:
blur(0);
}

}

@keyframes titlePulse{

0%,100%{
transform:scale(1);
}

50%{
transform:scale(1.03);
}

}

@keyframes goldFlow{

100%{
background-position:300% center;
}

}


/* DESC */
.web-about-banner-desc{
margin-top:10px;
max-width:900px;
line-height:1.8;
color:rgba(255,255,255,.75);

}

/* BUTTON */
.web-about-banner-btn{
position:relative;

display:inline-flex;
align-items:center;
gap:12px;

padding:20px 38px;

border-radius:10px;

overflow:hidden;

text-decoration:none;

font-size:12px;
font-weight:800;

letter-spacing:3px;
text-transform:uppercase;

color:#08111f;

background:
linear-gradient(
135deg,
#d4af37,
#fff0b3,
#c7961d
);

box-shadow:
0 25px 60px rgba(212,175,55,.25);


}

.slide.active .web-about-banner-btn{
animation:
btnReveal 1s 1.2s forwards;
}

.web-about-banner-btn::before{
content:"";

position:absolute;

left:-120%;
top:0;

width:60%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.9),
transparent
);

transform:skewX(-25deg);

transition:.9s ease;
}

.web-about-banner-btn:hover::before{
left:180%;
}

.web-about-banner-btn:hover{
transform:
translateY(-8px)
scale(1.03);
}


.web-about-banner-btn:hover{
transform:translateY(-5px);
}
.web-about-banner-tag,
.web-about-banner-desc,
.web-about-banner-btn {
opacity: 1;
transform: none;
}

/* MOBILE */
@media(max-width:768px){
.web-about-banner{
height:auto;
min-height:70vh;
}
.web-about-banner-tag{
    display: none;
}
 .hero-title{
        font-size: clamp(24px, 7vw, 40px);
    }
}