@font-face {
  font-family: 'Geomanist", Helvetica, sans-seri';
  src: url('fonts/geomanist-regular-webfont.woff2') format('woff2'),
       url('fonts/geomanist-regular-webfont.woff') format('woff');
	   url('fonts/GeomanistGeomanist--normal.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
h2,h3,h4,h5,h6 {font-family: 'Geomanist', sans-serif;}
h1.light, h1.white {font-size: 4vw; font-weight:800; padding-bottom:30px;}
h1.headings {font-size: 4vw; font-weight:700; width:1024px; margin:0 auto; padding-bottom:50px;}
.imgcenter {margin:0 auto;}
header {position: relative;height: 100vh;background: url('../../../img/bkg-dark.jpg') center/cover no-repeat;display: flex;justify-content: center;align-items: center;color: white; z-index: 1;overflow: hidden;}'
header::before {content: '';  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: rgba(0, 0, 0, 0.7);z-index: 2;}
header .content {position: relative; z-index: 3;text-align: center;}

.preheader {background-color:#fff;}
.cta {float:right;margin-top:4%;}

.about {background: url('../../../img/about-jt.jpg') center/cover no-repeat;}

.collections {background-color: rgba(0, 0, 0, 0.9);z-index: 3;position: relative;overflow: hidden;}
/**.collections::before {content: '';  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: rgba(0, 0, 0, 0.7);z-index: 2;} **/
.colgrid {padding-bottom:50px;}
.collections::before {background-color: rgba(0, 0, 0, 0.7); z-index: 4;	position: absolute;}

.wineseries {background-color: #E4E2DB;}

.footer {background-color: #000; color:#E4E2DB;}

h4 {font-size:28px; font-weight:300; margin-bottom:50px;}
.light {color:#AD965F;}
.white {color:#ffF; padding-bottom:10px;}
button.btn-primary {background-color:#AD965F; border:none; color:#000;}
button.btn-primary:hover {background-color:#B7B09C;}
.block {padding-bottom:25px;}
.note {font-size:12px; padding-top:20px;}
.accordion-button {font-size:20px !important; font-weight:600;}
.center {text-align:center;}
.centerimg {padding-top: 10%;display: block; margin: auto;}
.accordion-button:not(.collapsed) {color: #000;background-color: #fff;}
.accordion-button:focus {boder-color:#fff !important; box-shadow:none !important;}
.spacermid {padding:10px;}
.spacer {padding:40px;}

* {box-sizing: border-box;margin: 0;padding: 0;}
.carousel {width: 100%;max-width: 1024px;margin: 20px auto;position: relative;overflow: hidden;}

        .carousel-container {
            display: flex;
            transition: transform 0.5s ease-in-out;
            touch-action: pan-y;
        }

        .carousel-slide {
            min-width: 33%;
            width: 33%;
            padding: 10px;
        }

        .column-item {
            width: 65%;
            height: 70vh; /* Scales with viewport height */
            object-fit: cover;
            border-radius: 8px;
            display: block;
        }

        .prev, .next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 12px;
            cursor: pointer;
            font-size: 18px;
            z-index: 10;
        }

        .prev {
            left: 10px;
        }

        .next {
            right: 10px;
        }

        .dots {
            text-align: center;
            padding: 30px 10px 10px 10px;
            position: absolute;
            bottom: 10px;
            width: 100%;
        }

        .dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            margin: 0 5px;
            background-color: #bbb;
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .dot.active {
            background-color: #fff;
        }

        /* Mobile adjustments */
        @media screen and (max-width: 600px) {
			.carousel-slide {
            min-width: 45%;
            width: 45%;
            padding: 10px;
        }
            .column-item {
                height: 55vh; /* Slightly smaller for mobile */
            }

            .prev, .next {
                padding: 10px;
                font-size: 16px;
            }

            .dot {
                width: 7px;
                height: 7px;
                margin: 0 4px;
            }
        }

        /* Very small screens */
        @media screen and (max-width: 400px) {
			.carousel-slide {
            min-width: 45%;
            width: 45%;
            padding: 10px;
        }
            .column-item {
                height: 50vh;
            }

            .prev, .next {
                padding: 8px;
                font-size: 14px;
            }

            .dot {
                width: 6px;
                height: 6px;
                margin: 0 3px;
            }
        }