:root {
    --items: 5;
    --gap: 0.75rem;

    --border-xl: 20px;
    --border-m: 8px;
    --border-s: 6px;

    --accent-color: #C5A992;
    --fill-primary: hsl(204, 3%, 47%);
    --fill-active: hsl(204, 23%, 20%);
    --fill-disabled: hsl(204, 9%, 85%);
}



    
    .golf-academy-video {
        height: 350px;
        border-radius: 24px;
    }
    .golf-academy-video img {
        object-fit: cover;
        height: 100%;
    }

    /* Play Button Style */
    .play-btn {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: #C5A992;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.3s ease;
        position: relative;
        box-shadow: 0 0 20px rgba(197, 169, 146, 0.5);
    }

    /* Pulse animation */
    .play-btn::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: rgba(197, 169, 146, 0.6);
        animation: pulse 1.5s infinite ease-out;
        z-index: -1;
    }

    @keyframes pulse {
        0% { transform: scale(1); opacity: 0.8; }
        100% { transform: scale(1.8); opacity: 0; }
    }

    .play-btn i {
        font-size: 32px;
        color: #fff;
        margin-left: 4px;
    }





























.image-thumbnail-carousel {
    padding: 1rem;
    width: clamp(360px, 90vw, 820px);
    display: flex;
    flex-flow: column;
    gap: 1rem;
    position: relative;
}

.image-display {
    border-radius: var(--border-xl);
    overflow: hidden;
    min-height: 30vmin;
    aspect-ratio: 16 / 9;
    box-shadow: 0 0.375em 0.67em #0003, 0 0.5em 1.3em #0002;
}

.screen {
    block-size: 100%;
    display: flex;
    background-image: linear-gradient(12deg, #aaa, #eee);
    position: relative;
    user-select: none;
}

.thumbnail-carousel {
    display: flex;
    gap: var(--gap);
    block-size: 100%;
}

.carousel__btn {
    flex: 1 0 max(2.75rem, 5.834%);
    background: #0000;
    border: 1px solid #0000;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.arrow-icon {
    margin-inline: auto;
    outline: none;
    border: 0;
    scale: 1;
    display: inline grid;
    width: max(80%, 1.5rem);
    height: max(80%, 1.5rem);
    fill: var(--fill-primary);
}

.carousel__btn:hover .arrow-icon {
    fill: var(--fill-active);
}

.carousel__btn:disabled {
    opacity: 0.1;
    pointer-events: none;
}

.carousel__slider {
    user-select: none;
    flex-grow: 999;
    list-style: none;
    display: flex;
    gap: var(--gap);
    padding: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.carousel__slider::-webkit-scrollbar {
    display: none;
}

.carousel__slide {
    cursor: pointer;
    border-radius: var(--border-m);
    overflow: hidden;
    scroll-snap-align: center;
    flex: 1 0 calc((100% / var(--items)) - 10px);
}

.active.carousel__slide {
    outline: 0.125em solid var(--accent-color);
    outline-offset: -0.37em;
}

@media (max-width: 680px) {
    .image-thumbnail-carousel {
        width: 90vw;
    }

    .active.carousel__slide {
        background-color: var(--fill-active);
        outline-offset: 3px;
    }

    .carousel__btn {
        flex-grow: 0;
    }

    .thumbnail-carousel {
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .carousel__slider {
        max-width: fit-content;
        align-items: center;
        gap: 1em;
    }

    .carousel__slide {
        flex: none;
        aspect-ratio: 1;
        block-size: 0.625rem;
        border-radius: 50%;
        background-color: var(--fill-primary);
    }

    .thumbnail {
        opacity: 0;
        display: none;
        aspect-ratio: 16 / 9;
        block-size: 8vw;
        position: absolute;
        border-radius: var(--border-s);
        overflow: hidden;
        z-index: 99;
        will-change: transform, opacity;
        transition: opacity 150ms ease-out;
        transform-origin: bottom;
        translate: -50%;
        bottom: 20%;
    }

    .carousel__slide:not(.active):hover .thumbnail {
        opacity: 1;
        display: block;
        animation: show 250ms ease-out forwards;
        box-shadow: 0 0.375em 0.67em #0003, 0 0.5em 1.3em #0002;
    }

    @keyframes show {
        from {
            opacity: 0;
            transform: scale(0);
        }
        to {
            display: block;
            transform: scale(1);
            opacity: 1;
        }
    }
}









/* gallery */

    .main-image {
        width: 100%;
        height: 520px;
        object-fit: cover;
        border-radius: 8px;
        transition: opacity .4s ease;
    }

.thumb-img {
    object-fit: contain;
    cursor: pointer;
    border-radius: 6px !important;
    transition: transform 0.8s ease, opacity 0.8s ease, box-shadow 0.8s ease;
}

.thumb-img:hover {
    transform: scale(1.01);  /* Slightly larger scale */
    opacity: 0.95;  /* Slightly reduced opacity for hover effect */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow for emphasis */
}

    .fade-out { opacity: 0; }
    .fade-in { opacity: 1; }

	.carousel-control-prev,
	.carousel-control-next {
		background-color: #C5A992 !important;
		border-radius: 50%; 
		width: 40px;        
		height: 40px;
		display: flex;       
		align-items: center;
		justify-content: center;
	}
	.carousel-control-prev{
		left: 2% !important;
	}
	.carousel-control-next{
		right: 2% !important;
	}


	.carousel-item .d-flex {
   	 justify-content: flex-start; 
	}

	.carousel-item:last-child .d-flex {
		justify-content: center !important; 
	}




    .slick-slider .element{
		height:100px;
		

		display:inline-block;
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		-webkit-box-pack:center;
			-ms-flex-pack:center;
				justify-content:center;
		-webkit-box-align:center;
			-ms-flex-align:center;
				align-items:center;
	}
	.slick-slider .slick-disabled {
		opacity : 0; 
		pointer-events:none;
	}
	.slick-slide{
		margin: 2px !important;
	}
	.slick-arrow{
		color: rgb(255, 255, 255) !important;
		background-color: #C5A992 !important;
		font-size: 14px;
		letter-spacing: 4px;
		border-radius: 6px;
        border: none !important;
	}





.fade-zoom-out {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-zoom-in {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.4s ease, transform 0.4s ease;
}



.main-image-wrapper {
    position: relative;
    width: 100%;
    height: 520px;
    overflow: hidden;
    border-radius: 8px;
}

.main-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(5px) brightness(0.6);
    transform: scale(1.15);
    opacity: 0;
    transition: opacity 0.8s ease; /* slower fade */
    z-index: 1;
}

.fade-zoom-out {
    animation: zoomOut 0.8s ease forwards;
}

.fade-zoom-in {
    animation: zoomIn 0.8s ease forwards;
}

@keyframes zoomOut {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: scale(0.95) rotate(-1deg);
        opacity: 0;
    }
}

@keyframes zoomIn {
    0% {
        transform: scale(1.05) rotate(1deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.main-image {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.display-5 {
    font-size: 28px !important;
}




.gallery-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #C5A992;
    color: #fff;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 6px;
    font-size: 22px;
    cursor: pointer;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
}

/* Hover effect */
.gallery-btn:hover {
    background-color: #b59678;
    transform: translateY(-50%) scale(1.1);
}

/* Prev Button (Left) */
.main-prev-btn {
    left: 15px;
}

/* Next Button (Right) */
.main-next-btn {
    right: 15px;
}