/* ================= HEADER ================= */
.main-header{
    background:#24126A;
}
.navbar-brand img{
    height:55px;
}
.nav-link{
    color:#fff !important;
    margin:0 12px;
    font-weight:500;
}
.contact-btn{
    background:#F4A000;
    color:#000;
    padding:10px 22px;
    border-radius:4px;
    font-weight:600;
    text-decoration:none;
}
.contact-btn:hover{
    background:#ffb300;
}

/* ================= DEMO SECTION ================= */
.hero{
    padding:100px 20px;
    text-align:center;
}
.hero h1{
    font-size:48px;
    font-weight:700;
}

/* ================= FOOTER ================= */
.footer{
    background:#000;
    color:#fff;
    padding:60px 0;
}
.footer h5{
    font-weight:700;
    margin-bottom:20px;
}
.footer a{
    color:#c13cff;
    text-decoration:none;
    display:block;
    margin-bottom:8px;
}
.footer a:hover{
    color:#fff;
}
.footer-bottom{
    border-top:1px solid #222;
    padding-top:15px;
    margin-top:40px;
    text-align:center;
    font-size:14px;
}
.social i{
    font-size:20px;
    margin-right:12px;
}
/* ================= card ================= */
/* ===== TITLE BANNER ===== */
.title-banner{
    position:relative;
    background:url('https://picsum.photos/1200/300?blur=2') center/cover;
    padding:60px 20px;
    text-align:center;
    /*border-radius:18px;*/
    color:#fff;
    overflow:hidden;
}

/* dark overlay */
.title-banner::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.55);
}

/* text above overlay */
.title-banner h2,
.title-banner p{
    position:relative;
    z-index:2;
}

.title-banner h2{
    font-size:40px;
    font-weight:700;
}

.title-banner p{
    font-size:18px;
    opacity:.9;
}


.premium-card{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    height:200px;
    border-radius:18px;
    overflow:hidden;
    text-decoration:none;
    color:#fff;
    background-size:cover;
    background-position:center;
    box-shadow:0 10px 25px rgba(0,0,0,0.25);
    transition:all .4s ease;
}

/* Gradient overlay */
.premium-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.2)
    );
}

/* Glass effect content box */
.card-content{
    position:relative;
    z-index:2;
    backdrop-filter:blur(6px);
    background:rgba(255,255,255,0.1);
    padding:12px 22px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.25);
}

.card-content h5{
    margin:0;
    font-size:22px;
    font-weight:600;
    letter-spacing:.5px;
}

/* Hover effects */
.premium-card:hover{
    transform:translateY(-12px) scale(1.03);
    box-shadow:0 20px 40px rgba(0,0,0,0.4);
}

.premium-card:hover::before{
    background:linear-gradient(
        to top,
        rgba(36,18,106,0.9),
        rgba(0,0,0,0.3)
    );
}

body{
    font-family:Arial;
    background:#f5f6fa;
}

/* ===== Banner ===== */
.detail-banner{
    background:url('https://picsum.photos/1200/500?1') center/cover;
    padding:100px 20px;
    text-align:center;
    color:#fff;
    position:relative;
}

.detail-banner::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to right, rgba(36,18,106,.8), rgba(0,0,0,.6));
}

.detail-banner h2{
    position:relative;
    z-index:2;
    font-size:48px;
    font-weight:700;
}

/* ===== Info Box ===== */
.info-box{
    background:rgba(255,255,255,0.7);
    backdrop-filter:blur(10px);
    padding:25px;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,0.15);
    transition:.3s;
}

.info-box:hover{
    transform:translateY(-5px);
}

/* ===== Gallery ===== */
.gallery img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:12px;
    cursor:pointer;
    transition:.3s;
}

.gallery img:hover{
    transform:scale(1.05);
}

/* ===== Lightbox ===== */
#lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.9);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

#lightbox img{
    max-width:90%;
    max-height:85%;
    border-radius:10px;
}

#lightbox span{
    position:absolute;
    top:20px;
    right:30px;
    font-size:40px;
    color:white;
    cursor:pointer;
}