.main-banner {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
}

.banner-container {
    width: 70%;
    height: 400px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.separate-3 {
    width: 33%;
    display: flex;
    justify-content: center;
}

.right-side-social-medias {
    position: absolute;
    right: 20%;
    top: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.vertical-line-top {
    width: 1px;
    height: 200px;
    background: linear-gradient(to bottom,
            #000000 0%,
            #825803 25%,
            #BD9457 70%,
            #6E4E10 100%);

    /* Optional: adds a slight glow consistent with your previous code */
    box-shadow: 0 0 4px rgba(122, 77, 33, 0.4);
}

.vertical-line-bottom {
    width: 1px;
    height: 200px;
    background: linear-gradient(to bottom,
            #6E4E10 0%,
            #BD9457 25%,
            #825803 70%,
            #000000 100%);

    /* Optional: adds a slight glow consistent with your previous code */
    box-shadow: 0 0 4px rgba(122, 77, 33, 0.4);
}



.social-medias {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border: 1px solid transparent;
    border-radius: 50px;
    box-sizing: border-box;
    /* Your desired border radius */
    padding: 30px 12px;
    /* 2. Layered backgrounds */
    background:
        /* This is the inner color of your box (matches your previous dark theme) */
        linear-gradient(#000000, #000000) padding-box,
        /* This is the border gradient */
        linear-gradient(to bottom,
            #825803 0%,
            #BD9457 20%,
            #241701 50%,
            #BD9457 80%,
            #6E4E10 100%) border-box;
}

.social-medias>img {
    max-width: 25px;
    max-height: 28px;
    padding: 15px 5px;
}

.social-media-icon-hovered {
    filter: brightness(1.5) contrast(1.2) drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}


.banner-container {
    z-index: 1;
    border-radius: 12px;
}

/* The "Big Big Big" Radial Glow */
.banner-container::before {
    content: "";
    position: absolute;
    /* Centering the glow */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);

    /* Make this much larger than the container to see it above and below */
    width: 100%;
    height: 50%;

    /* The Radial Light */
    background: radial-gradient(circle,
            rgba(199, 147, 52, 0.4) 0%,
            /* Bright center gold */
            rgba(130, 88, 3, 0.1) 40%,
            /* Fading gold */
            transparent 70%
            /* Completely fades out */
        );

    /* This creates the soft "neon" look */
    filter: blur(50px);
    z-index: -1;
    /* Places the light BEHIND the banner */
    pointer-events: none;
    /* Makes sure you can still click things in the banner */
}

.lp-icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.lp-icon-container>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.gold-gradient-text {
    display: flex;
    justify-content: center;
    font-family: 'Alumni Sans SC', sans-serif;
    font-weight: 700;
    font-size: 8rem;
    text-transform: uppercase;
    margin: 0;
    background: linear-gradient(to bottom,
            #FFF0DA 0%,
            #FFF2DB 20%,
            #EAC885 40%,
            #EAC885 45%,
            #94651e 70%,
            #94651e 85%,
            #94651e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #332003;
    filter: brightness(1.2) contrast(1.1) drop-shadow(0px 3.07px 3.07px rgba(0, 0, 0, 0.8)) drop-shadow(0px 0px 15px rgba(189, 148, 87, 0.6)) drop-shadow(0px 0px 40px rgba(189, 148, 87, 0.3));
    display: inline-block;
}

.gold-gradient-text:hover {
    filter:
        brightness(1.4)
        contrast(1.3)
        drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.9))
        drop-shadow(0px 0px 25px rgba(255, 204, 120, 0.9))
        drop-shadow(0px 0px 60px rgba(255, 180, 60, 0.8))
        drop-shadow(0px 0px 120px rgba(255, 200, 100, 0.6));
 
}

.banner-subtitle {
    text-align: center;
    color: white;
    font-size: 22px;
    font-weight: 300;
    line-height: 26px;
    font-family: 'Satoshi', sans-serif;
    margin: 0;
}

.reserve-now-button {
    margin-top: 30px;
    padding: 15px 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("/attachments/button_background.png");
    background-size: cover;
    box-shadow: 0 0 10px rgba(189, 148, 87, 0.5);
    transition: all 0.3s ease;
}

.reserve-now-button:hover {
    filter: brightness(1.1) contrast(1.1) drop-shadow(0 0 10px #f3ad34);
}



.reserve-now-button>span {
    color: white;
    font-weight: 500;
    font-family: Satoshi, sans-serif;
    font-size: 18px;
}

.vip-image {
    z-index: 9;
}

.vip-hover-image {
    display: none;
}

/* Responsive Banner Adjustments */
@media (max-width: 1600px) {
    .main-banner {
        margin-top: 150px;
    }

    .gold-gradient-text {
        font-size: 70px;
    }
}

@media (max-width: 1400px) {
    .banner-container {
        width: 90%;
        /* Give it more room on medium screens */
    }

    .right-side-social-medias {
        right: 5%;
        /* Bring social icons in from the edge */
    }
}

@media (max-width: 1024px) {
    .gold-gradient-text {
        font-size: 4rem;
        /* Scale down the giant text */
    }

    .banner-container {
        height: auto;
        padding: 40px 0;
    }

    .vertical-line-top,
    .vertical-line-bottom {
        height: 100px;
        /* Shorten the decorative lines */
    }
}

@media (max-width: 768px) {
    .main-banner {
        margin-top: 50px;
    }

    .banner-container {
        padding: 0;
        flex-direction: column;
        width: 95%;
    }

    .banner-container::before {
        top: 60%;
    }

    .separate-3,
    .lp-icon-container {
        margin-top: 40px;
        width: 100% !important;
        /* Force full width on mobile */
    }

    .vip-image {
        display: none;
        order: 2;
        margin-top: 40px;
    }

    .lp-icon-container {
        order: 1;
    }

    .gold-gradient-text {
        font-size: 3.5rem;
        /* Significant scale down for mobile */
        text-align: center;
    }

    .banner-subtitle {
        font-size: 16px;
        line-height: 22px;
        padding: 0 10px;
    }

    /* Handle the vertical social media bar on mobile */
    .right-side-social-medias {
        position: relative;
        /* Remove from absolute flow */
        right: auto;
        top: auto;
        flex-direction: row;
        /* Turn horizontal */
        margin-top: 50px;
        order: 3;
    }

    .vertical-line-top,
    .vertical-line-bottom {
        width: 100px;
        /* Turn vertical lines into horizontal ones */
        height: 1px;
        background: linear-gradient(to right, transparent, #BD9457, transparent);
    }

    .social-medias {
        flex-direction: row;
        /* Icons sit side-by-side */
        padding: 10px 25px;
        margin: 0 15px;
    }

    .social-medias>img {
        padding: 5px 15px;
    }
}

@media (max-width: 480px) {

    .vertical-line-top,
    .vertical-line-bottom {
        width: 60px;
        /* Shorten the decorative lines */
    }

    .gold-gradient-text {
        font-size: 2.5rem;
    }

    .vip-image img {
        width: 100%;
        max-width: 300px;
    }
}