html {
    font-size: 14px;
    scroll-behavior: smooth;
}
body, html {
    font-family: 'Luckiest Guy', cursive;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Luckiest Guy', cursive;
}
p {
    font-family: sans-serif;
}


/* if you have a fixed header/nav, keep the target from hiding underneath it */
:root {
    --header-h: 80px;
}
/* set this to your navbar height */
#aboutus {
    scroll-margin-top: var(--header-h);
}
#bookings {
    scroll-margin-top: var(--header-h);
}
#gallery {
    scroll-margin-top: var(--header-h);
}
#contact {
    scroll-margin-top: var(--header-h);
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
    background-image: url("https://carnivalcollective.com/resources/Images/BrightonFringeGig11.05.23by@leylagulerphoto73.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding-top: 64px;
}
.cc-logo{
    margin-bottom: 180px;
}
.bg-grey {
    background-color: #3E3E3F;
    padding: 25px; /* Adds some padding inside the grey box */
    border-radius: .75rem;
    padding: 2rem;
    margin: 13px;
}
.bg-light-grey {
    background-color: #d3d3d3;
    padding: 25px; /* Adds some padding inside the grey box */
}
.bg-none {
    background-color: #ffffff00;
}
h5.footer-heading {
    margin-bottom: 20px;
}
p.heading-summary {
    padding-left: 10%;
    padding-right: 10%;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #fff;
    font-size: 16px;
}
.text-pink {
    color: #E23798;
}
.top-section h2{
    text-align: center;
    font-size: 26px;
    width: inherit;
    margin-bottom: -10px;
    color: #E23798;
    padding-top: 20px;
}

#social-row-footer {
    text-align: left;
}
#facebook-link-footer {
    background: url(https://sms.smilesavershungary.co.uk/CC-Demo/resources/Images/facebook.png) no-repeat;
    height: 25px;
    display: inline-block;
    width: 25px;
    background-size: 25px 25px;
}
#twitter-link-footer {
    background: url(https://sms.smilesavershungary.co.uk/CC-Demo/resources/Images/twitter.png) no-repeat;
    height: 25px;
    display: inline-block;
    width: 25px;
    margin-right: 10px;
    margin-left: 10px;
    background-size: 25px 25px;
}
#soundcloud-link-footer {
    background: url(https://sms.smilesavershungary.co.uk/CC-Demo/resources/Images/soundcloud.png) no-repeat;
    height: 25px;
    display: inline-block;
    width: 25px;
    background-size: 25px 25px;
}
.subscribe-button {
    color: #000 !important;
    background-color: #FFFFFF;
    border-radius: 30px;
    padding: 12px;
    position: relative;
    display: inline-block;
}
.footer-right-align{
    text-align:right;
}
.footer-left-align {
    text-align: left;
}

@media (max-width: 767px) { /* Adjusts for small screens */
    .bg-grey h2 {
        margin-bottom: 15px; /* Adds space below the heading */
    }
    .footer-section{
        margin-bottom:30px;
        text-align:center;
    }
    #social-row-footer, .footer-right-align, .footer-left-align {
        text-align: center;
    }
}
@media (min-width: 700px) { /* Adjusts for large screens */
    .img-fluid {
        object-fit: cover; /* Ensures the image covers the area */
    }
}
h2.media_desciption {
    background-color: rgba(255, 255, 255, 0.5);
}
h2 span {
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.1); /* horizontal, vertical, blur, color */
    /*font-family: sans-serif;*/
    font-size: 2.5rem;
    font-weight: 900;
    /*background: linear-gradient(to left, #ffd100, #ffa000, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da);*/
    background: linear-gradient(to left, #000, #0095d7, #e23798);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
:root {
    --tile-bg: rgba(135, 214, 255, 0.9); /* same sky-blue tone */
    --tile-text: #0f172a;
}

.tile {
    background: var(--tile-bg);
    color: var(--tile-text);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: .75rem;
    padding: 2rem;
    font-weight: 800;
    letter-spacing: .5px;
}

.hero-tile {
    min-height: 220px;
}

* left tile can keep your own min-height; it will still stretch */
.book-left {
    min-height: 520px;
}

/* make sure the right stack fills the column height */
.book-stack {
    height: 100%;
}

/* tiles already have display:flex in your setup; ensure they can grow */
.tile.flex-fill {
    flex: 1 1 auto;
}
.book-right .tile {
    min-height: 120px;
}

.grid-img {
    min-height: 180px;
}

.videos-continue {
    min-height: 220px;
}

@media (min-width: 992px) {
    .book-right .tile {
        min-height: 140px;
    }

    .grid-img {
        min-height: 200px;
    }
}
/* === HERO CAROUSEL === */
.hero-carousel {
  margin: 0;
  padding: 0;
  background: transparent; /* transparent background behind images */
}

/* full width + responsive height */
.hero-carousel .carousel,
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item,
.hero-img {
  width: 100%;
  height: 100vh; /* make it tall like a full hero */
}

.hero-img {
  object-fit: cover;    /* keeps aspect ratio and fills width */
  object-position: center;
}

/* dark overlay for readability (optional) */
.hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(0,0,0,0.3); /* transparent overlay, adjust as needed */
}

/* text shadow for readability */
.text-shadow {
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

/* arrows bottom corners */
.hero-control {
  position: absolute;
  bottom: 2rem;
  width: 72px;
  height: 72px;
  border: 0;
  border-radius: 18px;
  display: grid;
  place-items: center;
  line-height: 1;
  background: rgba(230,88,213,0.9);
  color: #fff;
  transition: transform 0.15s ease, filter 0.15s ease;
  z-index: 10;
}
.hero-control:hover {
  transform: translateY(-3px);
  filter: brightness(1.1);
}
.hero-prev { left: 2rem; }
.hero-next { right: 2rem; }

/* badge */
.hero-badge {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 11;
  width: 86px;
  height: 86px;
  background: #e658d5;
  color: #111;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.25rem;
  text-transform: uppercase;
  clip-path: polygon(50% 0%, 60% 12%, 75% 9%, 80% 23%, 94% 25%, 88% 38%,
                     100% 50%, 88% 62%, 94% 75%, 80% 77%, 75% 91%, 60% 88%,
                     50% 100%, 40% 88%, 25% 91%, 20% 77%, 6% 75%, 12% 62%,
                     0% 50%, 12% 38%, 6% 25%, 20% 23%, 25% 9%, 40% 12%);
}
.hero-badge span { transform: translateY(1px); }

.hero-hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.75rem;
  font-size: 1rem;
  opacity: 0.8;
  text-align: center;
}
/* === HERO CAROUSEL (Half-height version) === */
.hero-carousel {
    margin: 0;
    padding: 0;
    background: transparent;
}

    /* Half-height, full-width hero */
    .hero-carousel .carousel,
    .hero-carousel .carousel-inner,
    .hero-carousel .carousel-item,
    .hero-img {
        width: 100%;
        height: 50vh; /* half screen */
    }

/* Show 100% of the image without cropping */
.hero-img {
    object-fit: contain; /* <-- key change */
    object-position: center;
    background: transparent; /* backdrop behind letterbox; use transparent if you prefer */
}

/* Optional overlay for readability */
.hero-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.3);
}

/* Text styling */
.text-shadow {
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

/* Bottom corner arrows */
.hero-control {
    position: absolute;
    bottom: 1.5rem;
    width: 64px;
    height: 64px;
    border: 0;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(230,88,213,0.9);
    color: #fff;
    transition: transform 0.15s ease, filter 0.15s ease;
    z-index: 10;
}

    .hero-control:hover {
        transform: translateY(-3px);
        filter: brightness(1.1);
    }

.hero-prev {
    left: 1.5rem;
}

.hero-next {
    right: 1.5rem;
}

/* Star badge */
.hero-badge {
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 11;
    width: 72px;
    height: 72px;
    background: #e658d5;
    color: #111;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.2rem;
    text-transform: uppercase;
    clip-path: polygon(50% 0%, 60% 12%, 75% 9%, 80% 23%, 94% 25%, 88% 38%, 100% 50%, 88% 62%, 94% 75%, 80% 77%, 75% 91%, 60% 88%, 50% 100%, 40% 88%, 25% 91%, 20% 77%, 6% 75%, 12% 62%, 0% 50%, 12% 38%, 6% 25%, 20% 23%, 25% 9%, 40% 12%);
}

/* Lightbox look & feel */
#lightboxModal .modal-content {
    background: rgba(0,0,0,0.85);
}

.lb-stage {
    min-height: 40vh;
    max-height: 90vh;
}

.lb-img {
    max-height: 90vh;
    max-width: 100%;
    border-radius: .5rem;
    opacity: 0;
    transform: scale(.98);
    transition: opacity .25s ease, transform .25s ease;
}

    .lb-img.lb-ready {
        opacity: 1;
        transform: scale(1);
    }

/* Nav buttons */
.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
    border: 0;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    display: grid;
    place-items: center;
    z-index: 5;
}

    .lb-nav:hover {
        background: rgba(255,255,255,.25);
    }

.lb-prev {
    left: .5rem;
}

.lb-next {
    right: .5rem;
}

@media (min-width: 992px) {
    .lb-prev {
        left: 1rem;
    }

    .lb-next {
        right: 1rem;
    }
}

/* full-width thumbnails with aspect ratio */
.video-item {
    display: block;
    border-radius: .75rem;
}

.video-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: .75rem;
    display: block;
}

.video-item .meta {
    padding: .5rem .25rem;
}

/* optional hover */
.video-item:hover {
    background: rgba(0,0,0,.04);
    border-radius: .75rem;
}

/* the container already gets overflow via utility classes */
.video-scroll {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* Lightbox: add iframe styles alongside image */
.lb-iframe {
    width: 100%;
    height: 70vh;
    border: 0;
    border-radius: .5rem;
    display: none;
    opacity: 0;
    transform: scale(.98);
    transition: opacity .25s ease, transform .25s ease;
}

    .lb-iframe.lb-ready {
        display: block;
        opacity: 1;
        transform: scale(1);
    }


/* default hidden; JS will toggle */

@media (max-width: 576px) {
    .video-thumb {
        width: 96px;
    }
}
/* Image lightbox */
.lb-img {
    max-height: 90vh;
    max-width: 100%;
    border-radius: .5rem;
    opacity: 0;
    transform: scale(.98);
    transition: opacity .25s ease, transform .25s ease;
}

    .lb-img.lb-ready {
        opacity: 1;
        transform: scale(1);
    }


    .lb-img.lb-ready {
        opacity: 1;
        transform: scale(1);
    }

/* Video lightbox */
.lbv-iframe {
    width: 100%;
    height: 70vh;
    border: 0;
    border-radius: .5rem;
    opacity: 0;
    transform: scale(.98);
    transition: opacity .25s ease, transform .25s ease;
}

    .lbv-iframe.lb-ready {
        opacity: 1;
        transform: scale(1);
    }

/* Nav buttons */
.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: .75rem;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    display: grid;
    place-items: center;
    z-index: 5; /* ensure above image */
}

    .lb-nav:hover {
        background: rgba(255,255,255,.25);
    }


@media (min-width: 992px) {
    .lb-prev {
        left: 1rem;
    }

    .lb-next {
        right: 1rem;
    }
}
    .lb-nav:hover {
        background: rgba(255,255,255,.25);
    }

.lb-prev, .lbv-prev {
    left: .5rem;
}

.lb-next, .lbv-next {
    right: .5rem;
}
@media (min-width: 992px) {
    #videoScroll {
        max-height: 432px; /* or whatever your ideal height is */
    }
}

@media (min-width: 1200px) {
    #videoScroll {
        max-height: 525px;
    }
}

@media (min-width: 1400px) {
    #videoScroll {
        max-height: 610px;
    }
}



/* Blue panel to match your tiles */
.contact-panel {
    background: rgba(135, 214, 255, 0.9); /* same sky-blue tone */
    border-radius: 1rem;
    box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.12);
    backdrop-filter: blur(2px); /* optional over image bg */
}

    /* Inputs: soft, rounded */
    .contact-panel .form-control {
        border: 0;
        border-radius: .75rem;
        padding: .75rem 1rem;
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
    }

        .contact-panel .form-control:focus {
            box-shadow: 0 0 0 .2rem rgba(13,110,253,.25);
        }

    /* Make labels a bit bolder like headings in the boxes */
    .contact-panel .form-label {
        font-weight: 600;
    }

    /* Button */
    .contact-panel .btn-primary {
        border: 0;
        border-radius: .75rem;
    }
/* Default (idle) state: faint 50% background tint */
.btn-outline-primary {
    background-color: rgba(13, 110, 253, 0.4);
    border-color: rgba(13, 110, 253, 0.5);
}

.btn-outline-secondary {
    background-color: rgba(108, 117, 125, 0.4);
    border-color: rgba(108, 117, 125, 0.5);
}

.btn-outline-success {
    background-color: rgba(25, 135, 84, 0.4);
    border-color: rgba(25, 135, 84, 0.5);
}

.btn-outline-danger {
    background-color: rgba(220, 53, 69, 0.4);
    border-color: rgba(220, 53, 69, 0.5);
}

.btn-outline-warning {
    background-color: rgba(255, 193, 7, 0.4);
    border-color: rgba(255, 193, 7, 0.5);
}

.btn-outline-info {
    background-color: rgba(13, 202, 240, 0.4;
    border-color: rgba(13, 202, 240, 0.5);
}

.btn-outline-dark {
    background-color: rgba(33, 37, 41, 0.4);
    border-color: rgba(33, 37, 41, 0.5);
}

/* Hover / focus: stronger tint, readable white text */
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: rgba(13, 110, 253, 0.5);
    border-color: rgba(13, 110, 253, 0.8);
    color: #fff;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: rgba(108, 117, 125, 0.5);
    border-color: rgba(108, 117, 125, 0.8);
    color: #fff;
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    background-color: rgba(25, 135, 84, 0.5);
    border-color: rgba(25, 135, 84, 0.8);
    color: #fff;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: rgba(220, 53, 69, 0.5);
    border-color: rgba(220, 53, 69, 0.8);
    color: #fff;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
    background-color: rgba(255, 193, 7, 0.5);
    border-color: rgba(255, 193, 7, 0.8);
    color: #212529;
}

.btn-outline-info:hover,
.btn-outline-info:focus {
    background-color: rgba(13, 202, 240, 0.5);
    border-color: rgba(13, 202, 240, 0.8);
    color: #fff;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
    background-color: rgba(33, 37, 41, 0.5);
    border-color: rgba(33, 37, 41, 0.8);
    color: #fff;
}

/* Smooth transition effect */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-dark {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Scrollspy container must be position: relative */
#scrollRoot {
    position: relative;
}

#siteNav .nav-link.active {
    color: #aaa !important;
    background-color: rgba(var(--bs-primary-rgb), .25);
    border-radius: .5rem;
    padding-inline: .5rem; /* give the pill some breathing room */
    transition: background-color .2s ease, color .2s ease;
}


.nav-link {
    color: #f8f9fa;
    text-decoration: none;
    padding-bottom: 4px;
}

.nav-link:hover {
    color: #66b2ff;
}
/* Base nav-link style */
/* Force a visible active state in the dark navbar */
#siteNav .navbar-nav .nav-link {
    position: relative;
    display: inline-block;
    padding-bottom: .45rem; /* room for underline */
    color: rgba(255,255,255,.6) !important; /* dim inactive */
    transition: color .2s ease, box-shadow .2s ease;
}

/* Inactive: slightly dim for contrast on dark nav */
#siteNav .navbar-nav .nav-link {
    color: rgba(255,255,255,.7) !important;
    border-radius: .5rem;
    padding: .25rem .5rem;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

/* Active: solid, readable pill */
#siteNav .navbar-nav .nav-link.active,
#siteNav .navbar-nav .nav-item.active > .nav-link {
    color: #fff !important;
    background-color: rgba(var(--bs-primary-rgb,13,110,253), .25) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb,13,110,253), .55);
}

/* Hover hint on non-active */
#siteNav .navbar-nav .nav-link:not(.active):hover {
    color: #fff !important;
    background-color: rgba(var(--bs-primary-rgb,13,110,253), .15);
}
/* Container sits on the right in the navbar */
.navbar-social {
    margin-left: auto; /* push to far right */
    margin-right: .75rem;
    text-align: right;
}

/* Each social item is a BLOCK -> vertical stack */
.navbar-social .social-item {
    display: block; /* <- this is the key */
    margin: 2px 0; /* tight vertical spacing */
    padding: 0;
    font-size: 0.9rem;
    color: #4aa3ff;
    text-decoration: none;
    line-height: 1.1;
}

    .navbar-social .social-item i {
        margin-right: .35rem;
        font-size: 1rem;
    }

    .navbar-social .social-item:hover {
        color: #ffffff;
        text-decoration: underline;
    }