.clamp-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5em;
    max-height: 4.5em;
    white-space: normal;
}

.light-titles.text-6xl {
    max-width: 100px;
    width: 100%;
    font-size: calc(6rem * 0.45);
}

.grecaptcha-badge {
    visibility: hidden !important;
}

.grecaptcha-badge {
    display: none !important;
}

@media (min-width: 768px) and (max-width:1100px) {
    section#iv6fug {
        min-height: 1230px !important;
    }

    #ijxy1c .lg\:block.flex-grow-0.lg\:mt-10.mt-5.lg\:px-0.px-2.text-right.lg\:mr-10.mr-1.lg\:text-left.md\:text-left {
        text-align: center !important;
    }
}

@media (min-width:750px) and (max-width:1100px) {
    #i9wzrf {
        display: none;
    }

    #i56bqd {
        display: none;
    }

    #inuuw6 {
        display: none;
    }

}

@media (min-width: 1280px) {
    .xl\:w-1\/2.lg\:w-full.md\:w-full.w-full.relative.px-5.xl\:mt-0.lg\:mt-\[-430px\].md\:mt-\[-330px\].mt-\[-200px\].xl\:ml-0.lg\:ml-\[260px\].md\:ml-\[150px\].ml-5 {
        margin-top: -270px;
        margin-right: 250px;
    }

}

@media (min-width: 1280px) and (max-width:1400px) {
    #iv6fug {
        min-height: 1450px;
    }

    section.flex.items-center.justify-end.lg\:min-h-\[750px\].md\:min-h-\[650px\].min-h-\[500px\].slide-image.handwerks-slide {
        min-height: 650px !important;
    }
}


@media (max-width: 639px) {
    .text-sm {
        font-size: 1rem !important;
        line-height: 1.2rem !important;
    }

    .md\:text-sm.text-xs {
        font-size: 1rem !important;
        line-height: 1.2rem !important;
    }

    #iv6fug {
        min-height: 1200px !important;
    }

    button#ia4mb-2-2 {
        max-width: 100%;
    }


}

@media (min-width: 375px) {

    #iv6fug .min-\[375px\]\:top-\[275px\] {
        top: 430px;
    }

    #iv6fug .min-\[375px\]\:top-\[550px\] {
        top: 740px;
    }

    #i8pei {
        max-width: 150px;
        height: auto;
        top: -50px;
    }

    #iavhlk {
        width: 150px;
        height: auto;
    }

}

@media (min-width:1841px) {

    #iavhlk {
        width: 230px;
        height: auto;
    }

    #i8pei {
        max-width: 190px;
        height: auto;
        top: -105px;
    }
}

@media (min-width: 1995px) {
    #iv6fug .\32xl\:left-\[890px\] {
        left: 920px;
    }
}

@media (min-width: 2226px) {
    #iv6fug .\32xl\:left-\[850px\] {
        left: 1090px;
    }

    #iv6fug .\32xl\:left-\[890px\] {
        left: 1155px;
    }

    #iv6fug .\32xl\:top-\[850px\] {
        top: 735px;
    }

    #iv6fug .\32xl\:left-\[400px\] {
        left: 559px;
    }

    #iv6fug .\32xl\:left-\[320px\] {
        left: 510px;
    }

    #iv6fug .min-\[425px\]\:right-\[60px\] {
        right: 90px;
    }

    #iv6fug .xl\:top-\[-75px\] {
        top: -125px;
    }

    #iv6fug .\32xl\:w-1\/3 {
        width: 29%;
    }
}

@media (min-width: 2600px) {

    #iv6fug .\32xl\:left-\[850px\] {
        left: 1320px;
    }

    #iv6fug .\32xl\:w-1\/3 {
        width: 25%;
    }

    #iv6fug .\32xl\:left-\[890px\] {
        left: 1337px;
    }

    #iv6fug .\32xl\:left-\[400px\] {
        left: 730px;
    }
}

@media (min-width: 450px) and (max-width: 525px) {
    #iv6fug .min-\[425px\]\:top-\[-50px\] {
        top: -80px;
    }

    #iv6fug img {
        filter: grayscale(100%) brightness(0%);
        max-width: 160px;
        height: auto;
    }

    #iv6fug .yellow-circle-background {
        width: 80%;
    }

    #iv6fug .blue-circle-background {
        width: 80%;
    }

    #iv6fug .min-\[375px\]\:top-\[275px\] {
        top: 360px;
    }
}

@media (min-width: 1536px) and (max-width:1840px) {
    #iv6fug .yellow-circle-background {
        width: 40%;
    }

    #iv6fug .blue-circle-background {
        width: 40%;
    }

    #iv6fug .\32 xl\:left-\[400px\] {
        left: 216px;
    }

    #iv6fug .\32 xl\:left-\[850px\] {
        left: 750px;
    }

    #iv6fug .\32 xl\:left-\[890px\] {
        left: 800px;
    }

    #iv6fug .\32 xl\:left-\[320px\] {
        left: 175px;
    }

    #iavhlk {
        width: 230px;
        height: auto;
    }

    #i8pei {
        max-width: 190px;
        height: auto;
        top: -105px;
    }
}

@media (min-width: 375px) and (max-width:420px) {
    #iv6fug .min-\[375px\]\:top-\[275px\] {
        top: 373px;
    }
}

@media (min-width: 300px) and (max-width:374px) {
    #iv6fug .min-\[320px\]\:top-\[300px\] {
        top: 370px;

    }

    #iv6fug img {
        filter: grayscale(100%) brightness(0%);
        top: -60px;

    }

    #iv6fug .min-\[320px\]\:top-\[570px\] {
        top: 700px;
    }

    #i8pei {
        max-width: 150px;
        height: auto;
        top: -50px;
        filter: grayscale(100%) brightness(0%);

    }

    #iavhlk {
        width: 150px;
        height: auto;
    }

}

@media (min-width: 300px) and (max-width:319px) {
    #iv6fug .min-\[320px\]\:top-\[300px\] {
        top: 340px;
    }

    #iv6fug .min-\[320px\]\:top-\[570px\] {
        top: 670px;
    }

    #i8pei {
        max-width: 150px;
        height: auto;
    }

    #iavhlk {
        width: 150px;
        height: auto;
    }
}

@media (min-width: 360px) and (max-width:740px) {

    h1.slider-title.text-white.whitespace-nowrap.text-3xl.sm\:text-3xl.lg\:text-5xl.font-bold {
        font-size: 27px !important;
    }
}

@media (min-width: 760px) and (max-width:1368px) {

    .front-register-box {
        max-width: max-content;
    }
}


/* main page slider */
/* Ensure Swiper containers take full width without breaking layout */
/* Common styles for all Swiper next/prev buttons */
.swiper-button-next,
.swiper-button-prev {
    color: white !important;
    /* Change button color to white */
}

/* For more customization, you can also modify the background or add other styles */
.swiper-button-next::before,
.swiper-button-prev::before {
    color: white;
    /* Change arrow color to white */
}

/* Positioning the navigation buttons for the first Swiper */
.slider-one-next,
.slider-one-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    color: white;
    /* Ensure buttons are white */
}

.slider-one-next {
    right: 10px;
}

.slider-one-prev {
    left: 10px;
}

/* Positioning the navigation buttons for the second Swiper */
.slider-two-next,
.slider-two-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    color: white;
    /* Ensure buttons are white */
}

.slider-two-next {
    right: 10px;
}

.slider-two-prev {
    left: 10px;
}

.swiper-pagination-bullet-active {
    background: white !important;
}

/* Positioning the navigation buttons for the third Swiper */
.slider-three-next,
.slider-three-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    color: white;
    /* Ensure buttons are white */
}

.slider-three-next {
    right: 10px;
}

.slider-three-prev {
    left: 10px;
}


/* main page slider */


/* === Geniessmi brand overrides === */
:root {
    --geniessmi-primary: #7d1f2b;
    --geniessmi-primary-dark: #651722;
    --geniessmi-secondary: #f6c24b;
}

.bg-primary,
.bg-primary:focus,
.bg-primary:active {
    background-color: var(--geniessmi-primary) !important;
}

.text-primary,
.text-primary:focus,
.text-primary:active {
    color: var(--geniessmi-primary) !important;
}

.border-primary {
    border-color: var(--geniessmi-primary) !important;
}

.btn-primary {
    background-color: var(--geniessmi-primary) !important;
    border-color: var(--geniessmi-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--geniessmi-primary-dark) !important;
    border-color: var(--geniessmi-primary-dark) !important;
    color: #fff !important;
}

/* Reusable custom button styles, but only apply on desktop */
@media (min-width: 1024px) {
    .custom-swiper-buttons .swiper-button-next,
    .custom-swiper-buttons .swiper-button-prev {
        background-color: #a3b53e;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 20px;
        z-index: 10;
        transition: background-color 0.3s ease;
    }

    .custom-swiper-buttons .swiper-button-next::after,
    .custom-swiper-buttons .swiper-button-prev::after {
        color: white;
        font-size: 20px;
    }

    .custom-swiper-buttons .swiper-button-next:hover,
    .custom-swiper-buttons .swiper-button-prev:hover {
        background-color: #8fa02f;
    }

    /* Positioning for one scenario */
    .custom-swiper-buttons.outside .swiper-button-next {
        right: -25px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
    }

    .custom-swiper-buttons.outside .swiper-button-prev {
        left: -25px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
    }

    /* Positioning for another scenario */
    .custom-swiper-buttons.inside .swiper-button-next {
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .custom-swiper-buttons.inside .swiper-button-prev {
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .custom-swiper-buttons .swiper-wrapper {
        overflow: hidden;
        max-width: 100%;
        margin: 0 auto;
    }
}

#videoOverlay {
    display: none; /* Initially hidden */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75); /* Dark background with opacity */
    z-index: 1000; /* Ensure it's on top of all other elements */
    justify-content: center;
    align-items: center;
}

#videoOverlay.active {
    display: flex; /* Show the overlay when active */
}

#video {
    max-height: 80vh; /* Limit video height */
    z-index: 10; /* Video should be below the header and close button */
}

/* Header (Above the video) */
#videoOverlay .absolute {
    z-index: 50; /* Higher than the video so it appears above it */
    background: rgba(0, 0, 0, 0.75); /* Semi-transparent background for better readability */
}

/* Close Button */
#closeBtn {
    position: absolute;
    top: 10px;
    right: 10px;
    color: white;
    font-size: 30px;
    cursor: pointer;
    z-index: 50; /* Make sure it’s above the video */
}

.bg-pattern {
    background-image: url('/front-assets/beercraft/images/bg-pattern-green.svg') ;
    background-repeat: repeat;
    background-size: auto;
    opacity: 0.2;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1; /* Ensure it stays behind the content */
}

/* Active Menu Styling */
.main-menu-items.active {
    color: #a3b53e; /* Primary green color */
    font-weight: 600;
    position: relative;
}

.main-menu-items.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #a3b53e;
}

/* Submenu active item styling */
.group ul li a.active {
    color: #a3b53e !important;
    font-weight: 600;
}

/* Mobile menu active styling */
.mobile-menu-items.active {
    color: #a3b53e;
    font-weight: 600;
}

/* Submenu in mobile active styling */
#mobileMenu .pl-5 a.active {
    color: #a3b53e !important;
    font-weight: 600;
}