:root {
    --gold-gradient: linear-gradient(180deg, #EEB72D 0%, #FFE59F 49.52%, #EEB72D 100%);
    --primary-font: 'Lato', sans-serif;
    --secondary-font: 'Bazar', 'Oswald', sans-serif;
    --bannerPhotographSignature: 'Photograph Signature', cursive;
}

html,
body {
    overflow-x: hidden;
}

body {
    font-family: var(--secondary-font);
    background-color: #000;
    /* Assuming dark theme from reference images */
    color: #fff;
    margin: 0;
    padding: 0;
}



/* Utilities */
.gold-gradient-bg {
    background: var(--gold-gradient);
}

.text-gold {
    color: #EEB72D;
}




/* Header Structure */
.site-header {
    width: 100%;
    position: relative;
    z-index: 1000;
}

.header-top {
    background-color: #000;
    background-image: url('../images/header-bg.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 25px 0;
    text-align: center;
}

.site-logo img {
    max-height: 140px;
    width: auto;
}

@media (min-width: 1800px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1680px !important;
    }

    .testimonial-slick-container {
        width: 100%;
        margin-left: 0;
    }

    .img-fluid-concert {
        height: 500px !important;
    }
}

@media (max-width: 425px) {
    .site-logo .logo-marquee-inner img {
        max-height: 65px !important;
    }
}

@media (max-width: 375px) {
    .site-logo .logo-marquee-inner img {
        max-height: 55px !important;
    }
}

@media (max-width: 320px) {
    .site-logo .logo-marquee-inner img {
        max-height: 40px !important;
    }

}

.header-nav-area {
    background: var(--gold-gradient);
    padding: 30px 0;
    /* Adjusted padding to accommodate the visual spacing */
    position: relative;
    /* Borders moved to pseudo-elements for stitched effect */
}

/* Sticky Header Styles */
.header-nav-area.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    /* Ensure background is opaque when sticky */
    background: var(--gold-gradient);

    /* Animation similar to AOS fade-down */
    animation-name: stickyFadeDown;
    animation-duration: 0.8s;
    animation-fill-mode: both;
}

@keyframes stickyFadeDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}

.header-nav-area::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 3px;
    right: 3px;
    width: auto;
    border-top: 2px dashed rgb(255 230 164);
    pointer-events: none;
}

.header-nav-area::after {
    content: "";
    position: absolute;
    bottom: 8px;
    left: 3px;
    right: 3px;
    width: auto;
    border-bottom: 2px dashed rgb(255 230 164);
    pointer-events: none;
}

.header-nav-area .container-fluid {
    padding-left: 125px;
    padding-right: 125px;
}



/* ... (Nav styles unchanged) ... */

.btn-gold-ribbon {
    display: inline-block;
    background: var(--gold-gradient);
    padding: 18px 60px;
    font-size: 20px;
    color: #000;
    text-decoration: none;
    clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%);
    transition: transform 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    margin-top: 20px;
    font-family: var(--primary-font);
    letter-spacing: 1px;
    position: relative;
    /* Ensure relative for pseudo-elements */
}

/* Stitched border for button */
.btn-gold-ribbon::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    border-top: 2px dashed rgba(255, 255, 255, 0.9);
    pointer-events: none;
}

.btn-gold-ribbon::after {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    border-bottom: 2px dashed rgba(255, 255, 255, 0.9);
    pointer-events: none;
}

.btn-gold-ribbon:hover {
    transform: scale(1.05);
    color: #000;
    text-decoration: none;
}

.btn-gold-ribbon-about {
    display: inline-block;
    background: var(--gold-gradient);
    padding: 10px 55px;
    font-size: 16px;
    color: #000;
    text-decoration: none;
    clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%);
    transition: transform 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    margin-top: 20px;
    letter-spacing: 1px;
    position: relative;
    /* Ensure relative for pseudo-elements */
}

/* Stitched border for button */
.btn-gold-ribbon-about::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    border-top: 2px dashed rgba(255, 255, 255, 0.9);
    pointer-events: none;
}

.btn-gold-ribbon-about::after {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    border-bottom: 2px dashed rgba(255, 255, 255, 0.9);
    pointer-events: none;
}

.btn-gold-ribbon-about:hover {
    transform: scale(1.05);
    color: #000;
    text-decoration: none;
}

.header-nav-area .nav li a {
    color: #000;
    font-weight: 500;
    font-size: 20px;
    padding: 0px 25px;
    font-family: var(--primary-font);
}

.header-nav-area .nav li a:hover,
.header-nav-area .nav li a.active {
    color: #b10604;
}

.header-nav-area .nav li a.active {
    text-decoration: underline !important;
}

.header-nav-area .header-socials a,
.header-nav-area .header-cart a {
    color: #000;
    font-size: 24px;
    /* Increased font size to match screenshot */
    margin: 0 8px;
    /* Slightly tighter spacing as per screenshot */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-nav-area .header-socials a i {
    transition: transform 0.3s ease;
}

.header-nav-area .header-socials a:hover i {
    transform: scale(1.1);
}

/* Specific styling for the icons if the FA classes alone aren't enough */
.header-nav-area .header-socials a .fa-facebook {
    font-size: 20px;
}

.header-nav-area .header-socials a .fa-linkedin {
    font-size: 20px;
}

.header-nav-area .header-socials a .fa-x-twitter {
    font-size: 20px;
}

/* Footer Structure */
.site-footer {
    padding: 80px 0 40px;
    background-color: #000;
}

.footer-content {
    text-align: center;
}

.footer-links {
    margin-bottom: 30px;
}

.footer-links a {
    color: #EEB72D;
    text-decoration: none;
    margin: 0 10px;
    font-size: 16px;
    font-family: var(--primary-font);
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #fff;
    text-decoration: none;
}

.footer-social a {
    color: #EEB72D;
    font-size: 24px;
    margin: 0 15px;
    transition: transform 0.3s ease;
}

.footer-social a:hover {
    transform: scale(1.1);
    color: #fff;
}

.footer-copyright {
    font-size: 14px;
    opacity: 0.6;
    margin-top: 30px;
}

/* Footer Responsive */



@media (max-width: 576px) {


    .site-footer .logo-marquee-inner img {
        max-height: 70px !important;
    }

}

@media (max-width: 425px) {


    .site-footer .logo-marquee-inner img {
        max-height: 65px !important;
    }

}

@media (max-width: 375px) {


    .site-footer .logo-marquee-inner img {
        max-height: 50px !important;
    }

}

@media (max-width: 320px) {


    .site-footer .logo-marquee-inner img {
        max-height: 45px !important;
    }

}

/* Mobile Menu Button */
.nav-button {
    display: none;
    font-size: 24px;
    cursor: pointer;
    color: #1a1a1a;
}


/* Body Open Mobile styles */
body.nav-open .main-navigation {
    display: block;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: -110%;
    width: 300px;
    height: 100vh;
    background: #000;
    z-index: 1000;
    padding: 60px 20px;
    transition: right 0.3s ease;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
    background-image: url('../images/header-bg.png');
    /* Match header */
}

body.nav-open .mobile-menu-overlay {
    right: 0%;
}

@media (max-width: 320px) {
    body.nav-open .mobile-menu-overlay {
        right: -5%;
    }
}

.mobile-header .social-icons a {
    color: #000;
    font-size: 20px;
}

.mobile-header .mobile-toggle {
    font-size: 24px;
    cursor: pointer;
    color: #000;
}

.mobile-socials a {
    color: #E0CE6C;
    font-size: 20px;
}

.close-menu {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #EDCE66;
    font-size: 24px;
    cursor: pointer;
}

.mobile-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav li {
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.mobile-nav li a {
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: var(--primary-font);
    letter-spacing: 1px;
}

.mobile-nav li a:hover {
    color: #EDCE66;
}

@font-face {
    font-family: 'Photograph Signature';
    src: url('../font/Photograph Signature.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bazar';
    src: url('../font/Bazar.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Home Banner */
.home-banner {
    position: relative;
    background-color: #000;
    height: 90vh;
    /* Increased height */
    min-height: 800px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
    background-image: url('../images/home-banner-overlay.png');
    /* Adding texture/spotlight */
    background-size: cover;
    background-position: center top;
}

.banner-singer-img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: auto;
    z-index: 1;
    object-fit: contain;
}

.home-banner-content {
    position: absolute;
    bottom: 5%;
    /* Moved down slightly */
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 10;
}

.banner-text-1 {
    font-family: 'Photograph Signature', cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 120px;
    line-height: 100%;
    text-align: center;
    text-transform: capitalize;
    color: #EDCE66;
    margin-bottom: 10px;
    position: relative;
    z-index: 11;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
}

.banner-text-2 {
    font-family: var(--secondary-font);
    /* Stack with fallback */
    font-weight: 500;
    font-style: normal;
    font-size: 116.3px;
    line-height: 0.9;
    letter-spacing: -0.05em;
    text-align: center;
    text-transform: uppercase;
    color: #F5F2DB;
    margin-bottom: 40px;
    text-shadow: 3px 3px 0px rgba(168, 58, 20, 1), 5px 5px 10px rgba(0, 0, 0, 1);
    position: relative;
    z-index: 10;
}




/* Inner Banner */
.inner-banner {
    position: relative;
    height: 780px;
    background-color: #000;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    padding-bottom: 80px;
}

.inner-banner-resume {
    position: relative;
    height: 725px;
    background-color: #000;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    padding-bottom: 80px;
}

/* Side gradients to black to match screenshot */
.inner-banner-resume::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #000 100%); */
    z-index: 1;
}

.inner-banner-resume::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #000 100%);
    pointer-events: none;
    z-index: 1;
}

.inner-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(90deg, #000 30%, #000 10%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0), #000 73%, #000 100%); */
    z-index: 1;
}

.inner-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 50%, #000 100%); */
    pointer-events: none;
    z-index: 1;
}

.inner-banner .container,
.inner-banner-resume .container {
    position: relative;
    z-index: 2;
}

.banner-title {
    font-family: 'Photograph Signature', cursive;
    font-weight: 400;
    font-size: 128.37px;
    line-height: 100%;
    letter-spacing: -0.03em;
    text-align: center;
    text-transform: capitalize;
    color: #EDCE66;
    margin-bottom: -60px;
    display: block;
    position: relative;
    z-index: 12;
}

.banner-name {
    font-family: 'Bazar', sans-serif;
    font-weight: 500;
    font-size: 116.3px;
    line-height: 100%;
    letter-spacing: -0.05em;
    text-align: center;
    text-transform: uppercase;
    color: #F5F2DB;
    display: block;
    position: relative;
    z-index: 10;
    text-shadow: 3px 3px 0px rgba(168, 58, 20, 1), 5px 5px 10px rgba(0, 0, 0, 1);
}


/* About Section */
.about-section {
    padding: 100px 0;
    position: relative;
    background-image: url('../images/diamond-pattern.png');
    /* Verify if pattern is needed or just dark bg */
    background-color: #0b0b0b;
    /* Deep dark background */
}

.star-frame-wrapper {
    position: relative;
    display: inline-block;
    max-width: 480px;
    width: 100%;
}

/* SVG provides the visual star frame shape */
.star-frame-svg {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
}

/* Photo clipped to star shape – shows inside the star frame border */
.star-frame-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 11;
    clip-path: polygon(50% 6%, 61% 36%, 93% 36.5%, 67% 55.5%, 76% 86%, 50% 68%, 25% 85%, 33% 55.5%, 8% 36.5%, 40% 36%);
}

.star-frame-border-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    /* On top of photo */
}

/* Golden star frame – sets wrapper size, back layer (legacy) */
.star-frame-img {
    display: block;
    max-height: 500px;
    width: auto;
    vertical-align: middle;
}

/* Portrait centered inside the star frame (legacy) */
.star-frame-portrait {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-height: 72%;
    width: auto;
    max-width: 72%;
    object-fit: contain;
    z-index: 1;
}

/* Legacy class if used elsewhere */
.star-frame {
    display: block;
    max-height: 500px;
    width: auto;
}

/* ============================================================
   Star frame bulb animation (marquee-style chase)
   40 bulbs placed along the 5-pointed star perimeter
   Coordinates derived from SVG polygon:
   250,25  304,176  464,181  338,278  382,432  250,342  118,432  162,278  36,181  196,176
   Converted to % of 500×500 viewBox = left%, top%
   ============================================================ */
.star-frame-bulbs {
    position: absolute;
    top: -25px;
    left: -24px;
    width: 110%;
    height: 110%;
    pointer-events: none;
    z-index: 3;
}

.star-frame-bulbs .star-bulb {
    position: absolute;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    background: radial-gradient(circle, #FFFFFF 0%, #FFFACD 30%, #FFD700 65%, #E6B800 100%);
    border-radius: 50%;
    box-shadow: 0 0 4px 2px rgba(255, 215, 0, 0.5), 0 0 8px 3px rgba(255, 180, 0, 0.3);
    animation: starBulbBlink 1.5s ease-in-out infinite;
    /* Removed staggered delay for synchronized blink */
}

/* ---- 40 bulbs: 4 per edge × 10 edges ---- */
/* Edge 1: Top tip (50%,5%) → UR valley (60.8%,35.2%) */
.star-bulb:nth-child(1) {
    left: 52.2%;
    top: 11.0%;
}

.star-bulb:nth-child(2) {
    left: 54.3%;
    top: 17.1%;
}

.star-bulb:nth-child(3) {
    left: 56.5%;
    top: 23.1%;
}

.star-bulb:nth-child(4) {
    left: 58.6%;
    top: 29.2%;
}

/* Edge 2: UR valley (60.8%,35.2%) → Right tip (92.8%,36.2%) */
.star-bulb:nth-child(5) {
    left: 67.2%;
    top: 35.4%;
}

.star-bulb:nth-child(6) {
    left: 73.6%;
    top: 35.6%;
}

.star-bulb:nth-child(7) {
    left: 80.0%;
    top: 35.8%;
}

.star-bulb:nth-child(8) {
    left: 86.4%;
    top: 36.0%;
}

/* Edge 3: Right tip (92.8%,36.2%) → LR valley (67.6%,55.6%) */
.star-bulb:nth-child(9) {
    left: 87.8%;
    top: 40.1%;
}

.star-bulb:nth-child(10) {
    left: 82.7%;
    top: 44.0%;
}

.star-bulb:nth-child(11) {
    left: 77.7%;
    top: 47.9%;
}

.star-bulb:nth-child(12) {
    left: 72.6%;
    top: 51.7%;
}

/* Edge 4: LR valley (67.6%,55.6%) → BR tip (76.4%,86.4%) */
.star-bulb:nth-child(13) {
    left: 69.4%;
    top: 61.8%;
}

.star-bulb:nth-child(14) {
    left: 71.1%;
    top: 67.9%;
}

.star-bulb:nth-child(15) {
    left: 72.9%;
    top: 74.0%;
}

.star-bulb:nth-child(16) {
    left: 74.6%;
    top: 80.2%;
}

/* Edge 5: BR tip (76.4%,86.4%) → Bottom valley (50%,68.4%) */
.star-bulb:nth-child(17) {
    left: 71.1%;
    top: 82.8%;
}

.star-bulb:nth-child(18) {
    left: 65.8%;
    top: 79.3%;
}

.star-bulb:nth-child(19) {
    left: 60.5%;
    top: 75.7%;
}

.star-bulb:nth-child(20) {
    left: 55.3%;
    top: 72.1%;
}

/* Edge 6: Bottom valley (50%,68.4%) → BL tip (23.6%,86.4%) */
.star-bulb:nth-child(21) {
    left: 44.7%;
    top: 72.1%;
}

.star-bulb:nth-child(22) {
    left: 39.5%;
    top: 75.7%;
}

.star-bulb:nth-child(23) {
    left: 34.2%;
    top: 79.3%;
}

.star-bulb:nth-child(24) {
    left: 28.9%;
    top: 82.8%;
}

/* Edge 7: BL tip (23.6%,86.4%) → LL valley (32.4%,55.6%) */
.star-bulb:nth-child(25) {
    left: 25.4%;
    top: 80.2%;
}

.star-bulb:nth-child(26) {
    left: 27.1%;
    top: 74.0%;
}

.star-bulb:nth-child(27) {
    left: 28.9%;
    top: 67.9%;
}

.star-bulb:nth-child(28) {
    left: 30.6%;
    top: 61.8%;
}

/* Edge 8: LL valley (32.4%,55.6%) → Left tip (7.2%,36.2%) */
.star-bulb:nth-child(29) {
    left: 27.4%;
    top: 51.7%;
}

.star-bulb:nth-child(30) {
    left: 22.3%;
    top: 47.9%;
}

.star-bulb:nth-child(31) {
    left: 17.3%;
    top: 44.0%;
}

.star-bulb:nth-child(32) {
    left: 12.2%;
    top: 40.1%;
}

/* Edge 9: Left tip (7.2%,36.2%) → UL valley (39.2%,35.2%) */
.star-bulb:nth-child(33) {
    left: 13.6%;
    top: 36.0%;
}

.star-bulb:nth-child(34) {
    left: 20.0%;
    top: 35.8%;
}

.star-bulb:nth-child(35) {
    left: 26.4%;
    top: 35.6%;
}

.star-bulb:nth-child(36) {
    left: 32.8%;
    top: 35.4%;
}

/* Edge 10: UL valley (39.2%,35.2%) → Top tip (50%,5%) */
.star-bulb:nth-child(37) {
    left: 41.4%;
    top: 29.2%;
}

.star-bulb:nth-child(38) {
    left: 43.5%;
    top: 23.1%;
}

.star-bulb:nth-child(39) {
    left: 45.7%;
    top: 17.1%;
}

.star-bulb:nth-child(40) {
    left: 47.8%;
    top: 11.0%;
}

/* Blink animation for bulbs */
@keyframes starBulbBlink {

    0%,
    100% {
        opacity: 0.2;
        transform: scale(0.9);
        box-shadow: 0 0 2px 1px rgba(255, 215, 0, 0.2);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
        box-shadow: 0 0 10px 4px rgba(255, 215, 0, 0.8), 0 0 20px 8px rgba(255, 180, 0, 0.4);
    }
}

.section-title {
    font-family: var(--secondary-font);
    font-weight: 500;
    font-size: 85px;
    line-height: 100%;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #EEB72D 0%, #FFE59F 49.52%, #EEB72D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 30px;
    padding: 10px;
    filter: drop-shadow(1px 1px 0px #000) drop-shadow(1.5px 1.5px 0px rgba(255, 255, 255, 0.8));
}

.about-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 20px;
    letter-spacing: -0.03em;
    color: #fff;
    line-height: 1.5;
    border-left: 3px solid #848484;
    /* Vertical line as requested */
    padding-left: 30px;
    /* increased spacing for the border */
    margin-left: -33px;
    /* Pull back to align if needed, or just padding */
}

/* When description contains <p> from editor, ensure inner paragraphs get same look */
.about-text p {
    margin-bottom: 0.75em;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}
.about-text p:last-child {
    margin-bottom: 0;
}

/* Vertical line adjustment to match "height: 340px" approx effect next to text block */
.about-content {
    position: relative;
}

.about-highlights {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -0.03em;
    line-height: 40px;
    color: #fff;
    padding-left: 30px;
    /* Align with about text padding */
}

.highlight-dot {
    height: 12px;
    width: 12px;
    background-color: #EEB72D;
    border-radius: 50%;
    margin-right: 15px;
    display: inline-block;
}

.btn-gold-ribbon-small {
    display: inline-block;
    background: var(--gold-gradient);
    padding: 10px 40px;
    font-size: 16px;
    color: #000;
    text-decoration: none;
    clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%);
    transition: transform 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    margin-top: 10px;
    font-family: var(--primary-font);
    letter-spacing: 1px;
    position: relative;
}

/* Stitched border for button */
.btn-gold-ribbon-small::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    border-top: 2px dashed rgba(255, 255, 255, 0.9);
    pointer-events: none;
}

.btn-gold-ribbon-small::after {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    border-bottom: 2px dashed rgba(255, 255, 255, 0.9);
    pointer-events: none;
}

.btn-gold-ribbon-small:hover {
    transform: scale(1.05);
    color: #000;
    text-decoration: none;
}

/* Shows Section */
.shows-section {
    padding: 100px 0;
    position: relative;
    background-image: url('../images/diamond-pattern.png');
    background-color: #0b0b0b;
}

.show-card {
    text-align: center;
}

.marquee-frame-wrapper {
    position: relative;
    /* display: block; */
    margin: 0 auto;
    max-width: 90%;
}

.marquee-frame {
    position: relative;
    z-index: 2;
    width: 100%;
}

.frame-inner-image {
    position: absolute;
    top: 6%;
    /* Adjust based on frame thickness */
    left: 6%;
    width: 88%;
    height: 88%;
    background-size: cover;
    background-position: center top;
    z-index: 1;
}

.show-title {
    font-family: 'Oswald', sans-serif;
    /* Or Bazar if requested for these small headers? keeping oswald for readability if small */
    font-weight: 700;
    font-size: 24px;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Video Frame Cards - Horizontal/Landscape with Light Bulbs */
.video-frame-card {
    text-align: center;
}

.video-frame-horizontal {
    position: relative;
    width: 100%;
    max-width: 500px;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    background: linear-gradient(180deg, #a12300 0%, #a12300 50%, #a12300 100%);
    border-radius: 20px;
    padding: 25px;
    border: 4px solid #fcdd00;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 200, 0, 0.3);
}


/* Inner yellow border */
.video-frame-horizontal::before {
    content: "";
    position: absolute;
    top: 20px !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 20px !important;
    border: 5px solid #fcdd00;
    border-radius: 10px;
    z-index: 0;
    pointer-events: none;
}

/* Remove the ::after pseudo element - using spans instead */
.video-frame-horizontal::after {
    display: none;
}

/* Bulb row - horizontal (top/bottom) */
.bulb-row {
    position: absolute;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 10;
}

.bulb-top {
    top: 5px;
}

.bulb-bottom {
    bottom: 5px;
}

/* Bulb column - vertical (left/right) */
.bulb-col {
    position: absolute;
    top: 10px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    z-index: 10;
}

.bulb-left {
    left: 5px;
}

.bulb-right {
    right: 5px;
}

/* Individual Bulb Styling */
.bulb {
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, #FFFFF0 0%, #FFFACD 30%, #FFD700 60%, #FFA500 90%);
    border-radius: 50%;
    /* box-shadow: 0 0 8px 3px rgba(255, 215, 0, 0.8), 0 0 15px 5px rgba(255, 180, 0, 0.5); */
    animation: bulbBlink 1s ease-in-out infinite alternate;
}

/* Alternating blink - odd bulbs */
.bulb:nth-child(odd) {
    animation-delay: 0s;
}

/* Alternating blink - even bulbs */
.bulb:nth-child(even) {
    animation-delay: 0.5s;
}

@keyframes bulbBlink {
    0% {
        opacity: 0.5;
        box-shadow: 0 0 4px 2px rgba(255, 215, 0, 0.4), 0 0 8px 3px rgba(255, 180, 0, 0.2);
        transform: scale(1.1);
    }

    100% {
        opacity: 10;
        box-shadow: 0 0 10px 2px #FFD700, 0 0 5px 1px #FFD700;
        transform: scale(0.1);
    }
}

@keyframes logoBulbBlink {
    0% {
        opacity: 1;
        box-shadow: 0 0 3px 2px rgba(255, 215, 0, 0.4), 0 0 8px 2px rgba(255, 180, 0, 0.2);
        transform: scale(1.5);
    }

    100% {
        opacity: 1;
        box-shadow: 0 0 10px 2px #fff8d4, 0 0 5px 1px #fffac9;
        transform: scale(0.1);
    }
}

.video-frame-border {
    display: none;
}

.video-frame-content {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    border-radius: 5px;
}

/* Square Show Frames with Light Bulbs */
.show-frame-square {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    background: linear-gradient(180deg, #a12300 0%, #a12300 50%, #a12300 100%);
    border-radius: 20px;
    padding: 25px;
    border: 4px solid #fcdd00;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 200, 0, 0.3);
}

/* Inner yellow border for square frames */
.show-frame-square::before {
    content: "";
    position: absolute;
    top: 20px !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 20px !important;
    border: 5px solid #fcdd00;
    border-radius: 10px;
    z-index: 0;
    pointer-events: none;
}

/* Show frame content */
.show-frame-content {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center top;
    z-index: 1;
    border-radius: 8px;
}

.video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.video-play-overlay:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.play-icon-large {
    width: 70px;
    height: auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

/* Footer Section */
.site-footer {
    background-color: #0b0b0b;
    /* Black background */
    padding: 60px 0;
    color: #fff;
    border-top: 1px solid #222;
    /* Subtle divider */
}

.footer-links ul {
    margin: 0;
    padding: 0;
}

.footer-links .list-inline-item {
    margin: 0 8px;
}

.footer-links a {
    color: #e0e0e0;
    font-family: 'Inter', sans-serif;
    /* Clean sans-serif like screenshot */
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a:hover,
.footer-links a.active {
    color: #EEB72D;
    /* Gold on hover/active */
    transform: scale(1.1);
    text-decoration: none;
}

/* Social Icons */
.footer-social .list-inline-item {
    margin: 0 15px;
    /* Increased spacing */
}

.footer-social a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    /* Remove fixed width */
    height: auto;
    color: #fff;
    background-color: transparent;
    font-size: 22px;
    /* Much larger as per screenshot */
    text-decoration: none;
    transition: all 0.3s;
}

.footer-social a:hover {
    color: #EEB72D;
    transform: scale(1.1);
    text-decoration: none;
}

.footer-social i.fa-times {
    font-size: 38px;
    /* Slight adjustment for visual balance */
}

/* Ensure logo is centered and sized */
.footer-logo img {
    margin-bottom: 20px;
}

/* Music & Media Section */
.music-media-section {
    background-color: #000;
    padding: 80px 0;
}

.media-tabs .nav-link {
    font-family: var(--secondary-font);
    font-size: 24px;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0 0 5px 0;
    /* Remove default padding, keep bottom */
    letter-spacing: 1px;
    background: transparent;
    border: none;
    border-radius: 0;
    margin-left: 30px;
}

.media-tabs .nav-link.active,
.media-tabs .nav-link:hover {
    color: #EEB72D;
    background: transparent;
    border-bottom: 2px solid #EEB72D;
}

/* Ensure margin works with nav-item wrapper */
.media-tabs .nav-item {
    margin: 0;
}

/* Gallery */
#gallery img {
    transition: transform 0.3s ease;
}

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

.video-thumb-wrapper {
    position: relative;
    border-radius: 15px;
    /* Rounded corners */
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.video-thumb {
    width: 100%;
    transition: transform 0.3s;
}

.video-thumb-wrapper:hover .video-thumb {
    transform: scale(1.05);
}

.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    /* Adjust based on image size */
    height: auto;
    background: transparent;
    /* Remove red background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.play-icon {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    transition: transform 0.25s ease, filter 0.25s ease;
}

.video-card:hover .play-icon,
.video-trigger:hover .play-icon {
    transform: scale(1.15);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 20px rgba(252, 221, 0, 0.4));
}

/* --- Theatrical Video Modal --- */
.video-modal .modal-content {
    background-color: transparent !important;
    border: none !important;
}

.theatrical-frame {
    position: relative;
    background: linear-gradient(180deg, #a12300 0%, #7a1a00 100%);
    border: 6px solid #fcdd00;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 0 40px rgba(252, 221, 0, 0.3), 0 15px 30px rgba(0, 0, 0, 0.7);
}

.theatrical-frame::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 3px double #fcdd00;
    border-radius: 12px;
    pointer-events: none;
    z-index: 0;
}

.video-modal .btn-close-white {
    background-color: #fcdd00;
    opacity: 1;
    border-radius: 50%;
    /* padding: 10px; */
    top: -15px !important;
    right: -15px !important;
    box-shadow: 0 0 10px rgba(252, 221, 0, 0.5);
    border: 2px solid #000;
}

.video-frame-inner {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
    aspect-ratio: 16 / 9;
}


/* View All Button (Gold Ribbon Variant) */
.btn-gold-ribbon-view-all {
    display: inline-block;
    background: var(--gold-gradient);
    padding: 12px 60px;
    font-size: 16px;
    color: #000;
    text-decoration: none;
    clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
    /* Ribbon shape */
    transition: transform 0.3s ease;
    font-family: 'Inter', sans-serif;
    /* Clean font for button text */
    font-weight: 500;
    position: relative;
    margin-top: 30px;
}

.btn-gold-ribbon-view-all::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    border-top: 2px dashed rgba(255, 255, 255, 0.9);
    pointer-events: none;
}

.btn-gold-ribbon-view-all::after {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    border-bottom: 2px dashed rgba(255, 255, 255, 0.9);
    pointer-events: none;
}

.btn-gold-ribbon-view-all:hover {
    transform: scale(1.05);
    color: #000;
    text-decoration: none;
}

/* Theater Marquee Section */
.theater-marquee-section {
    background-color: #1B1A1D;
    padding: 0;
    position: relative;
    overflow: hidden;
}

/* Light Bulb Border Styles - Larger, visible bulbs */
.marquee-lights-border {
    background-color: #8B0000;
    /* Deep red border */
    height: 15px;
    position: relative;
    overflow: visible;
}

/* Main bulbs layer */
.marquee-lights-border::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 20px;
    transform: translateY(-50%);
    background-image: radial-gradient(circle 8px at center, #FFFFFF 0%, #FFFEF0 20%, #FFF8DC 35%, #FFD700 60%, #EEB72D 85%, transparent 90%);
    background-size: 40px 20px;
    background-repeat: repeat-x;
    background-position: 0 center;
    /* filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.4)); */
    animation: bulbGlowBright 1.0s ease-in-out infinite alternate;
}

/* Offset bulbs layer */
.marquee-lights-border::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 20px;
    transform: translateY(-50%);
    background-image: radial-gradient(circle 8px at center, #FFFFFF 0%, #FFFEF0 20%, #FFF8DC 35%, #FFD700 60%, #EEB72D 85%, transparent 90%);
    background-size: 40px 20px;
    background-repeat: repeat-x;
    background-position: 20px center;
    /*  filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.4)); */
    animation: bulbGlowBright 1.0s ease-in-out infinite alternate;
    animation-delay: 0.6s;
}

@keyframes bulbGlowBright {
    0% {
        opacity: 0.2;
        filter: drop-shadow(0 0 2px rgba(255, 217, 0, 0.3));
    }

    100% {
        opacity: 1;
        filter: drop-shadow(0 0 5px rgb(230, 195, 0)) drop-shadow(0 0 15px rgba(255, 255, 200, 0.8));
    }
}



/* Marquee Wrapper */
.theater-marquee-wrapper {
    padding: 20px 0;
    overflow: hidden;
    position: relative;
}

.theater-marquee-track {
    display: flex;
    width: fit-content;
    animation: marqueeScroll 40s linear infinite;
}

.theater-marquee-content {
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.marquee-text {
    font-family: var(--secondary-font);
    font-size: 48px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #EEB72D 0%, #FFE59F 49.52%, #EEB72D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding: 0 15px;
}

.marquee-dot {
    font-size: 50px;
    background: linear-gradient(180deg, #EEB72D 0%, #FFE59F 49.52%, #EEB72D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding: 0 20px;
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Pause animation on hover */
.theater-marquee-wrapper:hover .theater-marquee-track {
    animation-play-state: paused;
}




/* ============================================
   Portfolio Section Styles
   ============================================ */
.portfolio-section {
    background-color: #1B1A1D;
    padding: 80px 0;
}

.portfolio-title {
    font-family: var(--secondary-font);
    font-weight: 500;
    font-size: 116px;
    line-height: 100%;
    letter-spacing: -0.03em;
    text-align: center;
    text-transform: uppercase;
    background: linear-gradient(180deg, #EEB72D 0%, #FFECB9 49.52%, #EEB72D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 30px;
    filter: drop-shadow(1px 1px 0px #000) drop-shadow(1.5px 1.5px 0px rgba(255, 255, 255, 0.8));
}

.portfolio-desc {
    font-size: 16px;
    color: #ffffff;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Portfolio Gallery Grid */
.portfolio-grid {
    margin-top: 40px;
    --bs-gutter-x: 1.5rem;
    /* Restore gutters */
    --bs-gutter-y: 1.5rem;
}

.portfolio-item {
    padding-left: 0.75rem;
    /* Standard col padding */
    padding-right: 0.75rem;
    margin-bottom: 1.5rem;
    /* Vertical spacing */
}

.portfolio-item-inner {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 3/2;
}

/* 
   Targeting the image for the sharp "gallery" look without gaps.
*/

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    /* Align to top to avoid cropping heads */
    border-radius: 5px;
    /* Sharp corners */
    display: block;
    /* Remove bottom whitespace */
    transition: transform 0.5s ease, filter 0.3s ease;
    aspect-ratio: 3/2;
}

.portfolio-item:hover img {
    transform: scale(1.03);
    filter: brightness(1.1);
    z-index: 10;
    position: relative;
    box-shadow: 0 8px 25px rgba(238, 183, 45, 0.4);
}



/* ============================================
   Testimonials Section
   ============================================ */
.testimonial-section {
    background-color: #000000;
    padding: 100px 0;
}

.testimonial-title {
    font-family: var(--secondary-font);
    font-weight: 500;
    font-size: 80px;
    line-height: 100%;
    letter-spacing: -0.03em;
    text-align: center;
    text-transform: uppercase;
    background: linear-gradient(180deg, #EEB72D 0%, #FFECB9 49.52%, #EEB72D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(1px 1px 0px #000) drop-shadow(1.5px 1.5px 0px rgba(255, 255, 255, 0.8));
}

.testimonial-card {
    background-color: #2D2D2D;
    padding: 40px 30px;
    border-radius: 15px;
    height: 100%;
    min-height: 300px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.testimonial-card:hover {
    transform: translateY(-10px);
}

.testi-name {
    font-family: var(--secondary-font);
    color: #EEB72D;
    font-size: 24px;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.testi-text {
    color: #E0E0E0;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Slick Slider Adjustments */
.testimonial-slick-container {
    position: relative;
    /* padding: 0 50px;
    width: 150%;
    margin-left: -25%; */
    /* Center the 150% width element: (100% - 150%) / 2 = -25% */
}


@media (max-width: 2560px) {

    .img-fluid-concert {
        height: 500px !important;
    }
}

@media (max-width: 1800px) {

    .img-fluid-concert {
        height: 500px !important;
    }
}

@media (max-width: 1680px) {

    .img-fluid-concert {
        height: 270px !important;
        /* margin-top: 0px !important; */
    }
}

@media (max-width: 1440px) {
    .testimonial-slick-container {
        width: 120%;
        margin-left: -10%;
    }

    .img-fluid-concert {
        height: 450px !important;
        margin-top: 0px !important;
    }

    .header-nav-area .nav li a {
        /*    color: #000;
        font-weight: 500; */
        font-size: 16px;
        padding: 0px 12px;
        /* font-family: var(--primary-font); */
    }

    .box-frame-marquee-inner img {
        width: 100%;
        object-fit: cover;
        object-position: center top;
        height: 300px !important;
    }

    .img-fluid-concert {
        height: 240px !important;
    }
}

@media (max-width: 1200px) {
    .testimonial-slick-container {
        width: 100%;
        margin-left: 0;
        padding: 0 30px;
    }

    .slick-prev-custom {
        left: -10px;
    }

    .slick-next-custom {
        right: -10px;
    }

    .masonry-grid {
        column-count: 3;
    }

    .independence-title {
        font-size: 28px;
    }

}

@media (max-width: 1024px) {
    .header-nav-area .nav li a {
        font-size: 12px;
        font-weight: 600;
        padding: 0px 6px;
    }

    .box-frame-marquee-inner img {
        width: 100%;
        object-fit: cover;
        object-position: center top;
        height: 250px !important;
    }

    .img-fluid-concert {
        height: 230px !important;
        margin-top: 5px !important;
    }
}

/* Responsive Portfolio */
@media (max-width: 992px) {
    .portfolio-title {
        font-size: 80px;
    }

    .marquee-text {
        font-size: 36px;
    }

    .marquee-dot {
        font-size: 18px;
        padding: 0 15px;
    }

    .light-bulb {
        width: 10px;
        height: 10px;
    }

    .lights-container {
        gap: 15px;
    }

    .section-title-bazar {
        font-size: 70px;
    }

    .about-body-text {
        font-size: 16px;
    }

    .about-date-text {
        font-size: 18px;
    }

    .portrait-frame-marquee {
        max-width: 380px;
    }

    .box-frame-marquee {
        max-width: 500px;
    }

    .landscape-frame-marquee {
        max-width: 450px;
    }

    .about-transition-text {
        font-size: 15px;
        margin: 30px 0;
    }

    .logo-marquee-inner img {
        max-height: 70px;
    }

    .logo-marquee-frame {
        padding: 12px;
    }

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

    .pandemic-col-left {
        margin-bottom: 20px;
    }

    .pandemic-grid>.pandemic-item {
        height: 500px;
        /* Fallback height for mobile */
    }

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

    .yeadon-poster {
        height: auto;
    }

    .masonry-grid {
        column-count: 2;
    }

    .header-nav-area {
        padding: 15px 0;
    }

    .header-nav-area .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }

    .section-title {
        font-size: 60px;
        /* Scale down from 116px */
    }

    .about-text,
    .about-highlights {
        font-size: 16px;
    }

    .star-frame {
        max-height: 400px;
    }

    .banner-title {
        font-size: 90px;
        margin-bottom: -30px;
    }

    .banner-name {
        font-size: 80px;
    }

    .banner-text-1 {
        font-size: 90px;
        margin-bottom: -30px;
    }

    .banner-text-2 {
        font-size: 70px;
    }

    .header-top {
        padding: 10px 0;
    }

    .site-logo img {
        max-height: 80px;
    }

    .box-frame-marquee-inner img {
        width: 100%;
        object-fit: cover;
        object-position: center top;
        height: 320px !important;
    }

    .img-fluid-concert {
        height: 515px;
    }
}


/* Grandeur and Explorer Sections */
@media (min-width: 992px) {
    .grandeur-grid-row {
        height: 850px;
    }

    .grandeur-grid-row>div {
        height: 100%;
    }
}

@media (max-width: 991px) {
    .grandeur-grid-row {
        height: auto;
    }

    .grandeur-grid-row .bgt-right-grid {
        height: 500px;
        margin-bottom: 20px;
        grid-template-columns: 1fr 1fr;
    }

    .grandeur-grid-row .bgt-left-image {
        height: 500px;
    }

    .explorer-img {
        width: 100%;
        height: 350px;
        margin-left: 0;
    }

    .engagement-img {
        width: 100%;
        height: 350px;
    }

    .canaveral-img {
        width: 100%;
        height: 350px;
        margin-left: 0;
    }

    .merchandise-img {
        width: 100%;
        margin-left: 0;
    }

    .covid-epidemic-img {
        width: 100%;
        height: 350px;
        margin-left: 0;
    }

    .serenade-of-the-seas-img {
        width: 100%;
        height: 350px;
        margin-left: 0;
    }

    .anthem-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    .anthem-text {
        grid-column: span 2;
        padding-right: 0;
        text-align: center;
        margin-bottom: 20px;
    }

    .anthem-img-tall {
        grid-column: span 2;
        grid-row: auto;
        height: 500px;
    }

    .anthem-img-1,
    .anthem-img-2 {
        height: 300px;
    }

    .townhall-right-stack {
        margin-top: 15px;
    }

    .bgt-left-image {
        aspect-ratio: 1 / 1;
        height: auto;
    }

    .bgt-right-grid {
        margin-top: 15px;
    }

    .crystal-images-grid {
        grid-template-rows: 200px 200px;
    }

    .final-row-img {
        height: auto;
        max-height: 400px;
    }

    .final-row-img-2 {
        height: auto;
        /* max-height: 400px; */
        object-fit: cover;
    }

    .booking-title {
        font-size: 60px;
        text-align: center;
    }

    .booking-contact-section {
        padding: 60px 0;
    }

    .bgt-right-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .independence-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    .independence-img-0 {
        grid-column: span 2;
        text-align: center;
        padding-right: 0;
        margin-bottom: 15px;
    }

    .independence-img-1 {
        grid-column: span 2;
        height: 250px;
    }

    .independence-img-5 {
        grid-row: auto;
        grid-column: span 2;
        height: 400px;
    }
}


@media (max-width: 768px) {
    .testimonial-title {
        font-size: 50px;
        margin-bottom: 30px;
    }

    .testimonial-card {
        padding: 30px 20px;
        min-height: 250px;
    }

    .testi-name {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .testi-text {
        font-size: 13px;
    }

    .slick-prev-custom,
    .slick-next-custom {
        width: 40px;
        height: 40px;
    }

    .testimonial-slick-container {
        padding: 0 15px;
    }

    .slick-prev-custom {
        left: -5px;
    }

    .slick-next-custom {
        right: -5px;
    }

    .portfolio-title {
        font-size: 50px;
    }

    .portfolio-section {
        padding: 50px 0;
    }

    .portfolio-item {
        padding: 2px;
    }


    .marquee-text {
        font-size: 28px;
        letter-spacing: 0.1em;
    }

    .marquee-dot {
        font-size: 14px;
        padding: 0 10px;
    }

    .theater-marquee-wrapper {
        padding: 20px 0;
    }

    .light-bulb {
        width: 8px;
        height: 8px;
    }

    .lights-container {
        gap: 12px;
    }

    .marquee-lights-border {
        padding: 6px 0;
    }

    .media-tabs .list-inline-item {
        margin: 0 10px;
    }

    .media-tabs a {
        font-size: 18px;
    }

    .testimonial-title,
    .booking-title {
        font-size: 50px;
    }

    .testimonial-section {
        padding: 60px 0;
    }

    .col-md-4 {
        margin-bottom: 30px;
    }

    .section-title-bazar {
        font-size: 50px;
    }

    .about-date-text {
        font-size: 14px;
    }

    .detailed-about-section {
        padding: 60px 0;
    }

    .portrait-frame-marquee,
    .box-frame-marquee,
    .landscape-frame-marquee {
        padding: 22px;
    }

    .videos-play-icon {
        width: 40px;
    }

    .seas-images-grid {
        grid-template-columns: 1fr;
    }

    .site-footer {
        padding: 60px 0 30px;
    }

    .footer-links a {
        display: block;
        margin: 10px 0;
        font-size: 15px;
    }

    .footer-links .list-inline-item {
        display: block;
        margin-right: 0;
    }

    .footer-social a {
        font-size: 20px;
        margin: 0 10px;
    }

    .site-footer .logo-marquee-frame {
        padding: 14px;
        border-width: 1px;
    }

    .site-footer .logo-marquee-inner img {
        max-height: 80px !important;
    }

    .site-footer .bulb {
        width: 3px;
        height: 3px;
    }

    .header-nav-bar .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .nav-button {
        display: block;
    }

    .main-navigation {
        display: none;
        /* Hide for now, can be toggled via JS */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--gold-gradient);
        text-align: center;
        padding-bottom: 20px;
    }

    .main-navigation.active {
        display: block;
    }

    .main-navigation ul {
        flex-direction: column;
    }

    .main-navigation ul li {
        margin: 10px 0;
    }

    .home-banner {
        height: 600px;
        min-height: 500px;
    }

    .banner-singer-img {
        height: 100%;
        bottom: 0;
    }

    .banner-text-1 {
        font-size: 60px;
        margin-bottom: -15px;
    }

    .banner-text-2 {
        font-size: 36px;
        text-shadow: 2px 2px 0px rgba(168, 58, 20, 1);
    }

    .home-banner-content {
        bottom: 8%;
    }

    .box-frame-marquee-inner img {
        width: 100%;
        object-fit: cover;
        object-position: center top;
        height: 300px !important;
    }

    .inner-banner {
        height: 400px;
    }

    .banner-title {
        font-size: 60px;
        margin-bottom: -20px;
    }

    .banner-name {
        font-size: 48px;
    }

    .video-frame-horizontal {
        max-width: 100%;
        padding: 24px;
        border-radius: 18px;
    }

    .video-frame-horizontal::before {
        top: 12px;
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

    .video-frame-horizontal::after {
        background-size:
            26px 12px,
            26px 12px,
            12px 26px,
            12px 26px;
        background-position:
            13px 3px,
            13px calc(100% - 3px),
            3px 13px,
            calc(100% - 3px) 13px;
    }

    .play-icon-large {
        width: 50px;
    }

    .section-title {
        font-size: 44px;
    }

    .about-section {
        padding: 50px 0;
    }

    .about-highlights {
        padding-left: 0;
    }

    .btn-gold-ribbon-small {
        margin-left: 0;
    }
}

@media (max-width: 576px) {
    .home-banner {
        height: 500px;
        min-height: 400px;
    }

    .banner-text-1 {
        font-size: 48px;
        margin-bottom: -10px;
    }

    .banner-text-2 {
        font-size: 28px;
    }

    .home-banner-content {
        bottom: 10%;
    }

    .box-frame-marquee-inner img {
        width: 100%;
        object-fit: cover;
        object-position: center top;
        height: 280px !important;
    }
}

@media (max-width: 480px) {
    .banner-text-1 {
        font-size: 40px;
        margin-bottom: -8px;
    }

    .banner-text-2 {
        font-size: 24px;
    }

    .btn-gold-ribbon {
        padding: 12px 30px;
        font-size: 16px;
    }

    .box-frame-marquee-inner img {
        width: 100%;
        object-fit: cover;
        object-position: center top;
        height: 260px !important;
    }
}

@media (max-width: 375px) {
    .home-banner {
        height: 450px;
    }

    .banner-text-1 {
        font-size: 36px;
        margin-bottom: -5px;
    }

    .banner-text-2 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .btn-gold-ribbon {
        padding: 10px 25px;
        font-size: 14px;
    }

    .box-frame-marquee-inner img {
        width: 100%;
        object-fit: cover;
        object-position: center top;
        height: 220px !important;
    }
}

@media (max-width: 320px) {
    .home-banner {
        height: 400px;
    }

    .banner-text-1 {
        font-size: 32px;
    }

    .banner-text-2 {
        font-size: 18px;
    }

    .box-frame-marquee-inner img {
        width: 100%;
        object-fit: cover;
        object-position: center top;
        height: 210px !important;
    }
}


.testimonial-slider-slick .slick-track {
    display: flex !important;
}

.testimonial-slider-slick .slick-slide {
    height: inherit !important;
    display: flex !important;
    justify-content: center;
}

.testimonial-card-wrapper {
    padding: 15px;
    height: 100%;
    display: flex;
    width: 100%;
}

/* Testimonial Slider Controls - Slick Custom */
.slick-controls {
    position: static;
}

.slick-prev-custom,
.slick-next-custom {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #EEB72D;
    border: none;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
    z-index: 10;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.slick-prev-custom {
    left: -20px;
}

.slick-next-custom {
    right: -20px;
}

.slick-prev-custom:hover,
.slick-next-custom:hover {
    opacity: 1;
    background-color: #FFD700;
    transform: translateY(-50%) scale(1.1);
}

/* ============================================
   Booking / Contact Section
   ============================================ */
.booking-contact-section {
    background-color: #0c0b0d;
    padding: 100px 0;
}

.booking-title {
    font-family: var(--secondary-font);
    font-weight: 500;
    font-size: 75px;
    line-height: 100%;
    letter-spacing: -0.03em;
    background: linear-gradient(180deg, #EEB72D 0%, #FFECB9 49.52%, #EEB72D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(1px 1px 0px #000) drop-shadow(1.5px 1.5px 0px rgba(255, 255, 255, 0.8));
}

.booking-image-wrapper {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

.booking-img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}

.booking-form .form-group {
    margin-bottom: 20px;
}

.booking-form .form-control {
    background-color: #262626;
    border: 1px solid #3d3d3d;
    border-radius: 10px;
    padding: 15px 20px;
    color: #ffffff;
    font-family: var(--secondary-font);
    font-size: 16px;
}

.booking-form .form-control::placeholder {
    color: #7a7a7a;
}

.booking-form .form-control:focus {
    background-color: #2d2d2d;
    border-color: #EEB72D;
    box-shadow: 0 0 10px rgba(238, 183, 45, 0.3);
    outline: none;
    color: #fff;
}

.btn-submit-gold {
    background: linear-gradient(180deg, #F9D57C 0%, #E3A738 100%);
    border: none;
    border-radius: 12px;
    padding: 15px 40px;
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 20px;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.btn-submit-gold:hover {
    background: linear-gradient(180deg, #FFEAB5 0%, #F5B94D 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(238, 183, 45, 0.4);
}



/* Detailed About Section */
.detailed-about-section {
    padding: 100px 0;
    background-image: url('../images/diamond-pattern.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-color: #0b0b0b;
    color: #fff;
    position: relative;
}

.black-about-section {
    padding: 100px 0;
    background-color: #000000;
    color: #fff;
    position: relative;
}

.black-about-section-2 {
    padding: 100px 0;
    background-color: #121212;
    color: #fff;
    position: relative;
}

.portrait-frame-marquee {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 10 / 14;
    /* margin: 0 auto; */
    /* background: linear-gradient(135deg, #ff8d00 0%, #ff6a00 50%, #ff8d00 100%); */
    background: linear-gradient(180deg, #a12300 0%, #a12300 50%, #a12300 100%);
    /* Premium Gold/Bronze gradient */
    border-radius: 30px;
    padding: 25px;
    /* box-shadow: 0 0 50px rgba(255, 165, 0, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.5); */
    border: 5px solid #ffcc00;
}

.portrait-frame-marquee-resume {
    position: relative;
    width: 100%;
    max-width: 340px;
    aspect-ratio: 10 / 14;
    /* margin: 0 auto; */
    /* background: linear-gradient(135deg, #ff8d00 0%, #ff6a00 50%, #ff8d00 100%); */
    background: linear-gradient(180deg, #a12300 0%, #a12300 50%, #a12300 100%);
    /* Premium Gold/Bronze gradient */
    border-radius: 30px;
    padding: 25px;
    /* box-shadow: 0 0 50px rgba(255, 165, 0, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.5); */
    border: 5px solid #ffcc00;
    margin-left: auto;
    display: block;
}

.landscape-frame-marquee {
    position: relative;
    width: 100%;
    /* max-width: 580px;
    aspect-ratio: 16 / 11; */
    max-width: 810px;
    aspect-ratio: 13 / 7;
    margin: 0 auto;
    /* background: linear-gradient(135deg, #ff8d00 0%, #ff6a00 50%, #ff8d00 100%); */
    background: linear-gradient(180deg, #a12300 0%, #a12300 50%, #a12300 100%);
    /* Premium Gold/Bronze gradient */
    border-radius: 40px;
    padding: 25px;
    /* box-shadow: 0 0 50px rgba(255, 165, 0, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.5); */
    border: 5px solid #ffcc00;
}

.box-frame-marquee {
    position: relative;
    width: 100%;
    /* max-width: 580px;
    aspect-ratio: 16 / 11; */
    max-width: 810px;
    aspect-ratio: 13 / 10;
    margin: 0 auto;
    /* background: linear-gradient(135deg, #ff8d00 0%, #ff6a00 50%, #ff8d00 100%); */
    background: linear-gradient(180deg, #a12300 0%, #a12300 50%, #a12300 100%);
    /* Premium Gold/Bronze gradient */
    border-radius: 40px;
    padding: 25px;
    /* box-shadow: 0 0 50px rgba(255, 165, 0, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.5); */
    border: 5px solid #ffcc00;
}

.landscape-frame-marquee-resume {
    position: relative;
    width: 100%;
    max-width: 340px;
    aspect-ratio: 16 / 13;
    /* margin: 0 auto; */
    /* background: linear-gradient(135deg, #ff8d00 0%, #ff6a00 50%, #ff8d00 100%); */
    background: linear-gradient(180deg, #a12300 0%, #a12300 50%, #a12300 100%);
    /* Premium Gold/Bronze gradient */
    border-radius: 40px;
    padding: 25px;
    /* box-shadow: 0 0 50px rgba(255, 165, 0, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.5); */
    border: 5px solid #ffcc00;
    margin-left: auto;
    display: block;
}

.box-frame-marquee-inner {
    width: 100%;

    border-radius: 10px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    border: 5px solid #ffcc00;
}

.portrait-frame-inner,
.landscape-frame-inner {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    border: 5px solid #ffcc00;
}

.landscape-frame-inner-small {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    border: 5px solid #ffcc00;
}

.box-frame-marquee-inner img {
    width: 100%;
    object-fit: cover;
    object-position: center top;
    height: 480px;
}

.portrait-frame-inner img,
.landscape-frame-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.landscape-frame-inner-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Bulbs for portrait/landscape frames - more dense */
.portrait-frame-marquee .bulb,
.box-frame-marquee .bulb,
.landscape-frame-marquee .bulb {
    width: 14px;
    height: 14px;
}

.portrait-frame-marquee .bulb-row,
.box-frame-marquee .bulb-row,
.landscape-frame-marquee .bulb-row {
    left: 15px;
    right: 15px;
}

.portrait-frame-marquee .bulb-col,
.box-frame-marquee .bulb-col,
.landscape-frame-marquee .bulb-col {
    top: 15px;
    bottom: 15px;
}

.about-body-text {
    font-family: 'Inter';
    font-weight: 400;
    font-size: 18px;
    line-height: auto;
    color: #E0E0E0;
    letter-spacing: -0.01em;
}

.about-date-text {
    font-family: 'Inter';
    font-weight: 400;
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 15px;
}

.paragraph-text {
    font-family: 'Inter';
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    letter-spacing: 0.05em;
    margin-bottom: 15px;
}

.engagement-list {
    list-style: none;
    padding: 0;
    margin-top: 40px;
}

.engagement-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    font-family: 'Inter';
    font-size: 18px;
    line-height: 1.4;
}

.engagement-dot {
    width: 14px;
    height: 14px;
    background-color: #EEB72D;
    border-radius: 50%;
    margin-right: 20px;
    margin-top: 5px;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(238, 183, 45, 0.4);
}

.section-title-bazar,
.section-title-bazar-resume {
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 68px;
    line-height: 1;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* filter: drop-shadow(2px 2px 0px #fff); */
    /* Sharp white 3D offset shadow */
    margin-bottom: 30px;
    letter-spacing: -0.02em;
}

.section-title-bazar-resume {
    font-family: var(--secondary-font);
    font-weight: 500;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 30px;
    letter-spacing: -0.02em;
}


.about-transition-text {
    font-family: 'Inter';
    font-size: 18px;
    line-height: 1.5;
    color: #fff;
    /* margin: 50px 0; */
    font-weight: 400;
    text-align: left;
}


/* Logo Marquee Frame */
.logo-marquee-border {
    position: relative;
    display: inline-block;
    background: linear-gradient(180deg, #af0202 0%, #af0202 50%, #af0202 100%);
    border-radius: 8px;
    padding: 3px 3px 3px 3px;
    margin: 10px 0;
}

.logo-marquee-frame {
    position: relative;
    display: inline-block;
    background: linear-gradient(180deg, #af0202 0%, #af0202 50%, #af0202 100%);
    border-radius: 5px;
    padding: 12px;
    border: 2px solid #fcdd00;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);

}

.logo-marquee-inner {
    position: relative;
    z-index: 1;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #bd1426;
}

.logo-marquee-inner img {
    display: block;
    max-height: 100px;
    width: auto;
}

.logo-marquee-frame .bulb {
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #FFFFF0 0%, #FFFACD 30%, #ffeb7a 60%, #ffe7ba 90%);
    border-radius: 50%;
    z-index: 10;
    animation: logoBulbBlink 1s ease-in-out infinite alternate !important;
}

.logo-marquee-frame .bulb:nth-child(odd) {
    animation-delay: 0s !important;
}

.logo-marquee-frame .bulb:nth-child(even) {
    animation-delay: 0.5s !important;
}

.logo-marquee-frame .bulb-row {
    left: 5px;
    right: 5px;
}

.logo-marquee-frame .bulb-top {
    top: 3px;
}

.logo-marquee-frame .bulb-bottom {
    bottom: 3px;
}

.logo-marquee-frame .bulb-col {
    top: 5px;
    bottom: 5px;
}

.logo-marquee-frame .bulb-left {
    left: 3px;
}

.logo-marquee-frame .bulb-right {
    right: 3px;
}


/* Britain's Got Talent (BGT) Section Styles */
.bgt-section {
    margin-top: 50px;
    margin-bottom: 3rem !important;
}

.bgt-title {
    color: #EEB72D;
    font-family: 'Bazar', sans-serif;
}

.bgt-subtitle {
    font-family: var(--primary-font);
    font-size: 25px;
    font-weight: 400;
    color: #fff;
    margin-top: 10px;
}

/* Left Image Container */
.bgt-left-image {
    height: 100%;
    width: 100%;
}

/* Image styling */
.bgt-img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Right Grid Container - using CSS Grid for perfect alignment with left side */
.bgt-right-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
    /* Matches standard g-3 (1rem) */
    height: 100%;
    width: 100%;
}



.bgt-grid-item {
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Ensure image doesn't overflow */
}

.img-fluid-live {
    width: 100%;
    height: 100%;
}

.img-fluid-concert {
    width: 100%;
    height: 250px;
    margin-top: 70px;
}

.concert-info {
    margin-top: 75px;
    margin-left: 60px;
}

/* Chippenham Town Hall Specific Layout */
.townhall-right-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

.townhall-right-stack .bgt-grid-item {
    flex: 1;
}

.townhall-right-stack .bgt-img-cover {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Independence of the Seas Section */
.independence-section {
    padding: 80px 0;
    background-color: #000;
}

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

.independence-item {
    overflow: hidden;
    height: 100%;
}

.independence-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.independence-img-0 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 10px;
}

.independence-title {
    color: #EEB72D;
    font-family: var(--secondary-font);
    font-size: 32px;
    line-height: 1.1;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.independence-date {
    color: #fff;
    font-family: var(--secondary-font);
    font-size: 20px;
    margin-top: 20px;
    font-weight: 400;
}

.independence-img-1 {
    grid-column: span 2;
}

.independence-img-5 {
    grid-row: span 2;
}




@media (max-width: 575px) {
    .independence-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .independence-img-0 {
        grid-column: auto;
    }

    .independence-img-1,
    .independence-img-2,
    .independence-img-3,
    .independence-img-4,
    .independence-img-5 {
        grid-column: auto;
        grid-row: auto;
        height: 250px;
    }

    .independence-img-5 {
        height: 350px;
    }

    .independence-title {
        font-size: 24px;
    }
}



@media (max-width: 575px) {
    .grandeur-grid-row .bgt-right-grid {
        height: auto;
        margin-bottom: 20px;
        grid-template-columns: 1fr;
    }

    .grandeur-grid-row .bgt-left-image {
        height: 400px;
    }
}

.explorer-img-wrapper {
    overflow: hidden;
    border-radius: 4px;
}


.explorer-img {
    width: 80%;
    height: 450px;
    object-fit: cover;
    margin-left: auto;
    display: block;
}

.engagement-img-wrapper {
    overflow: hidden;
    border-radius: 4px;
}

.engagement-img {
    width: 80%;
    height: 450px;
    object-fit: cover;
    display: block;
}

.canaveral-img-wrapper {
    overflow: hidden;
    border-radius: 4px;
}

.canaveral-img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    margin-left: auto;
    display: block;
}

.merchandise-img-wrapper {
    overflow: hidden;
    border-radius: 4px;
}

.merchandise-img {
    width: 100%;
    object-fit: cover;
    margin-left: auto;
    display: block;
}



.covid-epidemic-img-wrapper {
    overflow: hidden;
    border-radius: 4px;
}

.covid-epidemic-img {
    width: 100%;
    height: 700px;
    object-fit: cover;
    margin-left: auto;
    display: block;
}


.serenade-of-the-seas-img-wrapper {
    overflow: hidden;
    border-radius: 4px;
}

.serenade-of-the-seas-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-left: auto;
    display: block;
}



/* Anthem Section Grid */
.anthem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 400px;
    gap: 20px;
    margin-top: 100px;
    margin-bottom: 50px;
}

.anthem-grid .anthem-text {
    grid-column: span 2;
    padding-right: 20px;
}

.anthem-grid .anthem-img-tall {
    grid-column: 3;
    grid-row: 1 / span 2;
}

.anthem-grid .anthem-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.anthem-grid-v2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto auto;
    gap: 20px;
    margin-top: 100px;
    margin-bottom: 50px;
}

.anthem-grid-v2 .anthem-text {
    grid-column: 1;
    grid-row: 1 / span 2;
    padding-right: 20px;
}

.anthem-grid-v2 .anthem-img-tall {
    grid-column: 4;
    grid-row: 1 / span 3;
}

.anthem-grid-v2 .anthem-img-1 {
    grid-column: 2;
    grid-row: 2;
    height: 300px !important;
}

/* Audience */
.anthem-grid-v2 .anthem-img-2 {
    grid-column: 2;
    grid-row: 3;
    height: 350px !important;
}

/* Ship */
.anthem-grid-v2 .anthem-img-4 {
    grid-column: 3;
    grid-row: 1;
    height: 250px !important;
}

/* Stage Lights */
.anthem-grid-v2 .anthem-img-5 {
    grid-column: 1;
    grid-row: 3;
    height: 350px !important;
}

/* Wonderland */
.anthem-grid-v2 .anthem-img-6 {
    grid-column: 3;
    grid-row: 2 / span 2;
    height: 670px !important;
}

/* Stage Purple Tall */

.anthem-grid-v2 .anthem-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.anthem-grid-v2 .anthem-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}



@media (max-width: 991px) {

    .anthem-grid,
    .anthem-grid-v2 {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    .anthem-text {
        grid-column: span 2;
        padding-right: 0;
        text-align: center;
        margin-bottom: 20px;
    }

    .anthem-img-tall {
        grid-column: span 2;
        grid-row: auto;
        height: 500px;
    }

    .anthem-img-1,
    .anthem-img-2,
    .anthem-img-4,
    .anthem-img-5 {
        height: 300px !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

@media (max-width: 575px) {

    .anthem-grid,
    .anthem-grid-v2 {
        grid-template-columns: 1fr;
    }

    .anthem-img-tall,
    .anthem-img-1,
    .anthem-img-2,
    .anthem-img-4,
    .anthem-img-5 {
        grid-column: auto !important;
        grid-row: auto !important;
        height: 350px !important;
    }
}

/* Video Section Styling */
.videos-card {
    cursor: pointer;
    background: #000;
    transition: all 0.3s ease;
    border: 1px solid #1a1a1a;
}

.videos-thumb-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #333;
    /* Dark gray background for portrait videos */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.videos-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Handle short videos with empty space */
}

.videos-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.videos-play-icon {
    width: 60px;
    height: auto;
    transition: transform 0.3s ease;
}

.videos-card:hover .videos-play-overlay {
    background: rgba(0, 0, 0, 0.4);
}

.videos-card:hover .videos-play-icon {
    transform: scale(1.1);
}


/* BGT and Resume Grid Styles */
.bgt-right-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.bgt-grid-3-cols {
    grid-template-columns: repeat(3, 1fr) !important;
}

.bgt-grid-item {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    aspect-ratio: 1 / 1;
}

.bgt-grid-item img,
.bgt-img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Left large image */
.bgt-left-image {
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
}

.bgt-left-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.bgt-left-image-townhall {
    border-radius: 4px;
    overflow: hidden;
}

.bgt-left-image-townhall img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 10 / 13;
    display: block;
}

.townhall-right-stack {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
}

.townhall-right-stack .bgt-grid-item {
    flex: 1;
    aspect-ratio: auto;
    overflow: hidden;
    border-radius: 4px;
}

.townhall-right-stack .bgt-grid-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
}



/* Pandemic Section Grid */
.pandemic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 100px;
    margin-bottom: 50px;
}

/* Pandemic Albums side-by-side */
.pandemic-albums-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.pandemic-album-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
    .pandemic-albums-grid {
        grid-template-columns: 1fr;
    }
}

/* Royal Caribbean Masonry Grid */
.rc-masonry-grid {
    display: flex;
    gap: 15px;
    align-items: stretch;
}

.rc-masonry-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.rc-masonry-item {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    background: #1a1a1a;
}

/* Specific aspect ratios to ensure bottom alignment matches goal screenshot */
.rc-portrait {
    aspect-ratio: 1 / 1.21;
}

.rc-landscape {
    aspect-ratio: 1.5 / 1;
}

.rc-tall {
    aspect-ratio: 1 / 1.76;
}

.rc-masonry-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.rc-masonry-item:hover img {
    transform: scale(1.05);
}

@media (max-width: 767px) {
    .rc-masonry-grid {
        flex-direction: column;
    }

    .rc-masonry-item {
        aspect-ratio: auto;
        /* Let them flow naturally on mobile */
    }
}

/* Crystal Cruise Grid */
.crystal-images-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 250px 250px;
    gap: 15px;
    width: 100%;
}

.crystal-grid-item {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
}

.crystal-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.crystal-grid-item.item-1 {
    grid-column: 1;
    grid-row: 1;
}

.crystal-grid-item.item-2 {
    grid-column: 1;
    grid-row: 2;
}

.crystal-grid-item.item-3 {
    grid-column: 2;
    grid-row: 1 / span 2;
}



@media (max-width: 576px) {
    .crystal-images-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .crystal-grid-item.item-1,
    .crystal-grid-item.item-2,
    .crystal-grid-item.item-3 {
        grid-column: auto;
        grid-row: auto;
        height: 250px;
    }

    .crystal-grid-item.item-3 {
        height: 400px;
        /* Taller on mobile for variety */
    }
}

.pandemic-col-left {
    display: flex;
    flex-direction: column;
    gap: 145px;
}

.pandemic-item {
    width: 100%;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.pandemic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pandemic-col-left .pandemic-item {
    flex-grow: 1;
    /* Allow image to fill remaining space if needed, or just be natural */
    aspect-ratio: 16/10;
    /* Guessing for the small group photo */
}

/* Ensure tall images stretch */
.pandemic-grid>.pandemic-item {
    height: 100%;
}


/* Yeadon Town Hall Grid */
.yeadon-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    align-items: start;
    margin-bottom: 50px;
    margin-top: 150px;
}

.yeadon-left-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.yeadon-small-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.yeadon-small-item {
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.yeadon-small-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 9/11;
    /* Portrait aspect ratio for small images */
}

.yeadon-poster {
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    height: 100%;
}

.yeadon-poster img {
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    display: block;
    aspect-ratio: 9 / 10;
}



/* Seas Royal Caribbean Layout */
.seas-layout {
    margin-bottom: 50px;
}

.seas-text {
    margin-bottom: 30px;
}

.seas-images-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.seas-img-item {
    border-radius: 4px;
    overflow: hidden;
}

.seas-img-item img {
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    display: block;
    aspect-ratio: 16/9;
    /* Widescreen aspect ratio */
}


/* Testimonial Styling */
.text-gold-gradient {
    background: linear-gradient(180deg, #EEB72D 0%, #FFE59F 49.52%, #EEB72D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #EEB72D;
    /* Fallback */
    display: inline-block;
    /* Required for background-clip on some elements */
}

.testimonial-quote-mark {
    font-family: var(--secondary-font);
    font-size: 80px;
    line-height: 1;
    margin-bottom: 0px;
    display: block;
}

.testimonial-name {
    font-family: var(--secondary-font);
    font-size: 32px;
    text-transform: uppercase;
    text-align: center !important;
    letter-spacing: 1px;
}

.testimonial-text {
    font-size: 18px;
    color: #fff;
    line-height: 1.6;
    text-align: center !important;
}

.testimonials-img {
    width: 80%;
    height: 450px;
    object-fit: cover;
    margin-left: auto;
    display: block;
}

.testimonials-img-wrapper {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

/* Masonry Gallery Styles */
.gallery-section {
    padding: 80px 0;
    background: #000;
}

/* Masonry Grid Setup */
.masonry-grid {
    column-count: 4;
    column-gap: 20px;
}

/* Final Row Images */
.final-row-img {
    width: 100%;
    /*  height: 670px; */
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

.final-row-img-2 {
    width: 100%;
    height: 670px;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}



.masonry-item {
    break-inside: avoid;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background-color: #1a1a1a;
    transition: transform 0.3s ease,
        box-shadow 0.3s ease;
}

.masonry-item img {
    width: 100%;
    height: auto !important;
    display: block;
    transition: transform 0.5s ease;
}

/* Hover Effects */
.masonry-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(238, 183, 45, 0.2);
    z-index: 2;
}

.masonry-item:hover img {
    transform: scale(1.05);
}

/* Overlay */
.masonry-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(238, 183, 45, 0.6) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 20px;
}

.masonry-item:hover .masonry-overlay {
    opacity: 1;
}

.masonry-overlay i {
    color: #fff;
    font-size: 24px;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.masonry-item:hover .masonry-overlay i {
    transform: translateY(0);
}



@media (max-width: 576px) {
    .masonry-grid {
        column-count: 1;
    }
}

.about-us-section-5 {
    background-color: #121212;
    padding: 5px;

}

.stages-tall-img {
    width: 100%;
    height: 650px;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

.stages-middle-img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

.pglive-uk-img-wrapper {
    width: 100%;
    object-fit: cover;
    margin-left: auto;
    display: block;
}

.pglive-uk-img {
    width: 65%;
    object-fit: cover;
    margin-left: auto;
    display: block;
}

.url-text-white a {
    color: #fff;
}

.url-text-white a:hover {
    color: #EEB72D;
}

/* ============================================
   New Contact Section Styles
   ============================================ */
.black-about-section {
    background-color: #000;
    padding: 80px 0;
    color: #fff;
}

.contact-form {
    max-width: 100%;
}

.contact-input.form-control {
    background-color: #262626 !important;
    border: 1px solid #262626;
    border-radius: 0;
    color: #fff !important;
    padding: 25px 15px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    margin-bottom: 0;
    /* Bootstrap handles mb-3, ensuring no double margin */
}

.contact-input.form-control::placeholder {
    color: #bbb;
    opacity: 1;
}

.contact-input.form-control:focus {
    background-color: #333 !important;
    color: #fff !important;
    box-shadow: none;
    border-color: #444;
}

.btn.btn-contact-submit {
    background-color: #E0CE6C !important;
    color: #000 !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 0;
    font-size: 18px;
    transition: background-color 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn.btn-contact-submit:hover {
    background-color: #d4c055 !important;
    color: #000 !important;
}

.contact-emails {
    margin-top: 30px;
}

.email-link {
    color: #E0CE6C;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    display: inline-flex;
    align-items: center;
    margin: 10px 20px;
    font-size: 16px;
    transition: color 0.3s ease;
}

.email-link:hover {
    color: #fff;
    text-decoration: none;
}

.email-link i {
    margin-right: 8px;
    color: #E0CE6C;
}

@media (max-width: 576px) {
    .contact-title {
        font-size: 36px;
    }

    .email-link {
        font-size: 14px;
        margin: 5px 10px;
    }
}