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

.hero{
    background:#050505;
    padding:80px 25px 100px;
    position:relative;
    overflow:hidden;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    radial-gradient(circle at top center,
    rgba(212,175,55,.08),
    transparent 55%);
    pointer-events:none;
}

.hero-container{
    position:relative;
    z-index:2;

    max-width:900px;
    margin:0 auto;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

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

.hero-content{

    width:100%;
    max-width:900px;

    display:flex;
    flex-direction:column;
    align-items:center;

}

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

.hero-label{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 20px;

    margin:0 auto 28px;

    border-radius:60px;

    background:rgba(212,175,55,.12);

    border:1px solid rgba(212,175,55,.28);

    color:#d4af37;

    font-size:13px;

    font-weight:800;

    letter-spacing:.6px;

    text-transform:uppercase;

}

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

.hero h1{

    max-width:850px;

    margin:0 auto 28px;

    font-size:clamp(42px,5vw,66px);

    line-height:1.08;

    letter-spacing:-2px;

    font-weight:900;

    color:#fff;

}

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

.hero-desc{

    max-width:820px;

    margin:0 auto;

    font-size:18px;

    line-height:1.9;

    color:#bdbdbd;

    text-align:center;

}

.hero-desc strong{

    color:#fff;

}

/* ==========================================================================
   CTA
   ========================================================================== */

.hero-form{

    width:100%;

    margin-top:40px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

.hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:17px 34px;

    border-radius:60px;

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

    color:#050505;

    font-size:15px;

    font-weight:900;

    text-decoration:none;

    box-shadow:0 20px 45px rgba(212,175,55,.28);

    transition:.35s ease;

}

.hero-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 28px 55px rgba(212,175,55,.35);

}

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

.hero-note{

    margin-top:28px;

    text-align:center;

    color:#d4af37;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

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

.hero-image{

    width:100%;
    max-width:700px;

    margin:60px auto 0;

    aspect-ratio:1/1;

    border-radius:30px;

    overflow:hidden;

    background:#111;

    box-shadow:
    0 35px 80px rgba(0,0,0,.45);

    transition:.35s ease;

}

.hero-image:hover{

    transform:translateY(-6px);

    box-shadow:
    0 45px 90px rgba(0,0,0,.55);

}

.hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.4s ease;

}

.hero-image:hover img{

    transform:scale(1.03);

}

/* ==========================================================================
   PREMIUM BREADCRUMB
   ========================================================================== */

.breadcrumb{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:12px 20px;

    margin:0 auto 35px;

    border-radius:50px;

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

    border:1px solid rgba(212,175,55,.12);

    backdrop-filter:blur(10px);

    font-size:14px;

    flex-wrap:wrap;

}

.breadcrumb a{

    color:#d6d6d6;

    text-decoration:none;

    transition:.3s;

}

.breadcrumb a:hover{

    color:#d4af37;

}

.breadcrumb span{

    color:#777;

}

.breadcrumb .current{

    color:#d4af37;

    font-weight:700;

}

/* ==========================================================================
   INTERNAL TEXT LINK
   ========================================================================== */

.hero-text-link{

    color:inherit;

    text-decoration:none;

    font-weight:inherit;

    border-bottom:1px solid rgba(212,175,55,.25);

    transition:.3s ease;

}

.hero-text-link:hover{

    color:#d4af37;

    border-color:#d4af37;

}

.hero-text-link:visited{

    color:inherit;

}

.hero-text-link:active{

    color:inherit;

}

strong .hero-text-link{

    color:inherit;

    font-weight:inherit;

}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:992px){

.hero{

padding:70px 25px 80px;

}

.hero h1{

font-size:52px;

letter-spacing:-1.5px;

}

.hero-desc{

font-size:17px;

}

.hero-image{

max-width:620px;

margin-top:50px;

}

}

@media (max-width:768px){

.hero{

padding:60px 22px 70px;

}

.hero h1{

font-size:42px;

line-height:1.12;

letter-spacing:-1px;

}

.hero-desc{

font-size:16px;

line-height:1.8;

}

.hero-form{

flex-direction:column;

gap:16px;

}

.hero-btn{

width:100%;

max-width:320px;

}

.hero-image{

max-width:100%;

margin-top:45px;

border-radius:24px;

}

.breadcrumb{

font-size:13px;

padding:10px 16px;

gap:8px;

}

}

@media (max-width:480px){

.hero{

padding:55px 18px 65px;

}

.hero-label{

font-size:12px;

padding:8px 16px;

}

.hero h1{

font-size:34px;

line-height:1.15;

}

.hero-desc{

font-size:15px;

}

.hero-note{

font-size:12px;

letter-spacing:1px;

}

.hero-image{

border-radius:20px;

}

}