/*

Theme Name: AlaricBS
Theme URI: http://www.alaric.id
Author: Alaric
Author URI: http://www.alaric.id/
Description: with Bootstrap 5, full-width, fully responsive and highly customizable WordPress Theme. Add and edit your own logo, header, featured slider, featured areas and much more.
Version: 1.0
License: GNU General Public License v2.0
License URI: ​http://www.gnu.org/licenses/gpl-2.0.html
Tags: bootstrap 5, light, white, one-column, two-columns, right-sidebar, fluid-layout, custom-header, custom-menu, featured-images, flexible-header, microformats, post-formats, rtl-language-support, threaded-comments, translation-ready, theme-options, full-width-template, responsive-layout, black

*/

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* — Brand: palm green — */
  --bb-green:            #1C4435;
  --bb-green-hover:      #16382C;
  --bb-green-deep:       #142F25;
  --bb-green-darkest:    #0E1C13;

  /* — Accent: gold — */
  --bb-gold:             #A9853F;
  --bb-gold-muted:       #C9B484;
  --bb-gold-pale:        #E8D9AE;

  /* — Warm neutrals — */
  --bb-sand:             #E8E5DF;
  --bb-ivory:            #FAF8F3;
  --bb-cream-card:       #FBF9F4;
  --bb-cream:            #F6F2E8;
  --bb-cream-pale:       #F2EDDF;
  --bb-chip-bg:          #EDE7D8;

  /* — Ink & text — */
  --bb-ink:              #20312B;
  --bb-body:             #5A6660;
  --bb-muted:            #6B7570;
  --bb-taupe:            #8B8678;
  --bb-nav:              #44524B;

  /* — Borders — */
  --bb-border:           #E9E2D2;
  --bb-border-light:     #E3DCCB;
  --bb-border-faint:     #EFEAE0;
  --bb-border-gold:      #C9B484;

  /* — Logo only — */
  --bb-red:              #C32127;

  /* — Type — */
  --bb-font-heading:     'Marcellus', Georgia, 'Times New Roman', serif;
  --bb-font-body:        'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* — Shape & shadow — */
  --bb-radius-sm:        2px;
  --bb-radius:           4px;
  --bb-radius-lg:        12px;
  --bb-radius-pill:      999px;
  --bb-shadow-sm:        0 1px 3px rgba(30, 40, 35, 0.08);
  --bb-shadow:           0 10px 28px rgba(30, 40, 35, 0.08);
  --bb-shadow-lg:        0 14px 36px rgba(30, 40, 35, 0.10);
}

/* ----------------------------------------------------------------------------
   2. BOOTSTRAP CORE OVERRIDES  (aman — hanya berlaku bila Bootstrap dimuat)
   -------------------------------------------------------------------------- */
:root, [data-bs-theme="light"] {
  --bs-body-bg:               var(--bb-cream-card);
  --bs-body-color:            #5A6660;
  --bs-body-color-rgb:        90, 102, 96;
  --bs-body-font-family:      var(--bb-font-body);
  --bs-body-font-size:        1rem; /* 16px */
  --bs-body-font-weight:      400;
  --bs-body-line-height:      1.7;

  --bs-emphasis-color:        #20312B;
  --bs-emphasis-color-rgb:    32, 49, 43;
  --bs-secondary-color:       rgba(90, 102, 96, 0.85);
  --bs-tertiary-color:        #8B8678;
  --bs-heading-color:         #20312B;

  --bs-primary:               #1C4435;
  --bs-primary-rgb:           28, 68, 53;
  --bs-secondary:             #A9853F;
  --bs-secondary-rgb:         169, 133, 63;
  --bs-success:               #1C4435;
  --bs-success-rgb:           28, 68, 53;
  --bs-light:                 #FAF8F3;
  --bs-light-rgb:             250, 248, 243;
  --bs-dark:                  #142F25;
  --bs-dark-rgb:              20, 47, 37;
  --bs-danger:                #C32127;
  --bs-danger-rgb:            195, 33, 39;

  --bs-link-color:            #1C4435;
  --bs-link-color-rgb:        28, 68, 53;
  --bs-link-hover-color:      #16382C;
  --bs-link-hover-color-rgb:  22, 56, 44;

  --bs-border-color:          #E9E2D2;
  --bs-border-color-translucent: rgba(32, 40, 35, 0.10);
  --bs-border-radius:         var(--bb-radius);
  --bs-border-radius-sm:      var(--bb-radius-sm);
  --bs-border-radius-lg:      var(--bb-radius-lg);
  --bs-border-radius-pill:    var(--bb-radius-pill);

  --bs-secondary-bg:          #FBF9F4;
  --bs-tertiary-bg:           #F2EDDF;
}


.btn-green {background: var(--bb-green);color: var(--bb-cream); }
.btn-green:hover {background: var(--bb-green-hover);color: var(--bb-gold-pale); }

.btn-outline-green {
  --bs-btn-color: var(--bb-green);
  --bs-btn-border-color: var(--bb-gold-muted);
  --bs-btn-hover-bg: var(--bb-green-hover);    /* Hover state */
  --bs-btn-hover-border-color: var(--bb-green-hover);    /* Hover state */
  --bs-btn-hover-color: #fff;
}

.bg-brand {background-color: var(--bb-green);}
.bg-body-light {background-color: #fff;border-top: solid 1px var(--bb-border);border-bottom: solid 1px var(--bb-border);}

.text-light {color: var(--bs-body-bg);}
.bg-overlay a, .bg-overlay p, .bg-overlay li  {color: var(--bs-body-bg);text-decoration: none;outline: none;}
.bg-overlay h4, .bg-overlay h3, .bg-overlay h2, footer h4 {color: var(--bb-cream-card);}


body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings memakai serif display.
   SAFE-CHANGE #4: tetap global (ini tujuan rebrand). Jika judul di menu/widget/
   footer jadi rusak, KOMENTARI blok ini lalu pakai blok scoped di bawahnya. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bb-font-heading);
  font-weight: 400;
  color: var(--bb-ink);
  line-height: 1.15;
  letter-spacing: 0.005em;
}
h1, .h1 { line-height: 1.08; }

.calcal form .box input[type="submit"],
.calcal-alrc .btn-bottom {
	background-color: #000!important;
	border-color: #000!important;
}

.lead {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--bb-body);
}


.body-container {
	display:grid;
	grid-template-rows:auto 1fr auto;
	grid-template-columns:100%;
	min-height:100vh;/* fallback height */
	min-height:100svh;/* new small viewport height for modern browsers */
}

#content {padding-top: 3rem;}

@media (max-width:576px) {
	.wed .w-50 {width: 100%!important}
	.carousel-indicators [data-bs-target] {width: 10px;height: 10px;border-radius: 50%}
	.carousel-control-next, .carousel-control-prev {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		opacity: .8;
		background-color: rgba(255, 255, 255, .5);
		top: 50%;
  		transform: translateY(-50%);
	}
	.carousel-control-prev {left: 15px;}
	.carousel-control-next {right: 15px;}
	.carousel-control-prev:hover, .carousel-control-next:hover {opacity: 1;background-color: rgba(255, 255, 255, .7);}
	.carousel-control-prev-icon, .carousel-control-next-icon {filter: invert(1) grayscale(100%) brightness(100%);}
	
}

.site-header {position: absolute;left: 0;top: 0;width: 100%;z-index: 3;background-color: transparent;}
.site-header::before {position: relative;content: "";display: block;height: 100px;margin-bottom: -100px;background-image: linear-gradient(to bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));}
.site-footer .nav li {line-height: 1;}
.site-footer .nav li a {color: #fff;}
.site-footer .nav.flex-column {columns: 2;display: block;}

@media (max-width:768px) {
	.site-header .container {padding-top: 2rem!important;padding-bottom: 2rem!important;}
	.welcome-text-card {margin-left: .5rem;margin-right: .5rem;margin-top: -1.5rem;border-radius: 10px 10px 0 0!important;}
	.site-footer {padding-bottom: 5rem!important;}
	.site-footer .nav {display: flex;flex-direction: row!important;margin-top: 1rem;}
	.site-footer .nav li {line-height: normal;}
	.site-footer .nav li a {padding-left: 0;padding-top: 0;}
	
	.footer-mobile .book-btn {position: relative;}
	.footer-mobile .book-btn a {
		/*position: absolute;
		bottom: .5rem;
		border-radius: 50%;
		padding-top: .657rem;
		padding-bottom: .657rem;*/
	}
	.footer-mobile .book-btn .circle-div {
		padding: 0;
		width: 50px;
		height: 50px;
		line-height: 50px;
		border-radius: 50%;
		margin-top: -21px;
	}
	.footer-mobile .book-btn .circle-div i {font-size: 1.25rem!important;line-height: 1;}
}

@-webkit-keyframes glidein {
	
	from{-webkit-transform: translate3d(0,-100%,0)}
	to{-webkit-transform: translate3d(0,0,0)}
	
}

@keyframes glidein {
	
	from{transform: translate3d(0,-100%,0)}
	to{transform: translate3d(0,0,0)}
	
}

.bs-navbar:not(.bs-navbar-caret) .dropdown-toggle:after{display: none;}

.toggler-white {border-color: #fff!important;}
.toggler-white:focus, .toggler-white:active {box-shadow: none;}
.toggler-white .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")!important;
}

.site-logo {width: 150px;}
.site-logo a {display: block; background-repeat: no-repeat;background-position: center center;background-size: contain;}
.site-logo a img {width: 100%;}

.sticky {position: fixed;top: 0;background-color: var(--bs-body-bg)/*rgba(250, 248, 243, 1)*/;box-shadow: 0 2px 7px rgba(0, 0, 0, 0.15);-webkit-animation: glidein .5s forwards;animation: glidein .5s forwards;}
.site-header.sticky::before {background-image: none;}

.sticky .site-logo a {background-image:url(img/logo-hotel/logo-color.png)!important;padding: 0;display: block;}
.sticky .site-logo a img {position: relative;z-index: -1;visibility: hidden;}
.sticky .site-logo {width: 100px;}

.sticky .toggler-white {border-color: inherit!important;}
.sticky .toggler-white:focus, .toggler-white:active {box-shadow: inherit;}
.sticky .toggler-white .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")!important;
}

.sticky .top-menu .nav-link {color: #000;}

.top-menu .nav-link {color: #fff;}

.book-canvas {width: 270px!important;z-index: 1051;}
.book-canvas .offcanvas-header {position: relative;border-bottom: solid 1px var(--bb-border);}
.book-canvas .offcanvas-logo img {width: 50%;}


/*.fullscreen-slide .carousel-item {height: 100vh;}*/
.full-screen {background-size: cover;background-position: center;background-repeat: no-repeat;}

.arrow-after {position: absolute;bottom: 100px;left: 50%;z-index: 2;display: inline-block;-webkit-transform: translate(0, -50%);	transform: translate(0, -50%);color: #fff;outline: none;transition: opacity .3s;}
.arrow-after span {position: absolute;top: 0;left: 50%;width: 24px;height: 24px;margin-left: -12px;border-left: 1px solid #fff;border-bottom: 1px solid #fff;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.arrow-after:hover {opacity: .5;}

#social.color-white a {font-size: 2rem;color: white;}

.mintop {margin-top: -30px;z-index: 1;}
.my-l-min {margin-top: -56%;}
.my-min-1 {margin-left: -.8rem;margin-right: -.8rem;}

@media (min-width: 1200px) {
  .ms-xl-n5 {margin-left: -3rem!important;}
}

@media (max-width:576px) {
	.my-l-min {margin-top: 0;}
	.my-min-1 {margin-left: 0;margin-right: 0;}
	#social.color-white a {font-size: 1.5rem;}
}

.img-wrapper {position: relative;}
.img-wrapper img {height: 100%;width: 100%;object-fit: cover;object-position: center;}
.height-fs {height: 100vh;}
.height-0 {height: 12em;}
.height-1 {height: 15em;}
.height-2 {height: 32em;}
.height-3 {height: 20em;}
.height-4 {height: 40em;}
.height-5 {height: 25em;}
.height-6 {height: 18em;}

@media (max-width: 576px){
	.height-0, .height-2, .height-4, .height-5 {height: 22em;}
}


.eapps-google-maps, .elfsight-widget-google-maps {height: 100%!important;}



.multi-item-carousel .carousel-inner > .carousel-item {transition: 500ms ease-in-out left;}
.multi-item-carousel .carousel-inner .carousel-item.active.carousel-item-start {left: -33%;}
.multi-item-carousel .carousel-inner .carousel-item.active.carousel-item-end {left: 33%;}
.multi-item-carousel .carousel-inner .next {left: 33%;}
.multi-item-carousel .carousel-inner .prev {left: -33%;}
.multi-item-carousel .carousel-control-prev, .multi-item-carousel .carousel-control-next {background-image: none;}

@media all and (transform-3d), (-webkit-transform-3d) {
  .multi-item-carousel .carousel-inner > .carousel-item {
    transition: 500ms ease-in-out left;
    transition: 500ms ease-in-out all;
    -webkit-backface-visibility: visible;
            backface-visibility: visible;
    transform: none!important;
  }
}



.carousel-other {
  width: 100%;
}

.carousel-other .slide-box {
  display: flex;
  justify-content: space-between;
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .carousel-other .slide-box img {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .carousel-other .slide-box img {
    -ms-flex: 0 0 33.3333%;
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

@media (min-width: 992px)
{
  .carousel-other .slide-box img {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
}


.multiCarousel { float: left; overflow: hidden; margin: 0; padding: 0; width: 100%; position:relative; }
.multiCarousel .multiCarousel-inner { transition: 1s ease all; float: left; }
.multiCarousel .multiCarousel-inner .item { float: left;}
.multiCarousel .multiCarousel-inner .item > div { text-align: center; padding:10px; margin:10px; background:#f1f1f1; color:#666;}
.multiCarousel .leftLst, .multiCarousel .rightLst { position:absolute; border-radius:50%;top:calc(50% - 20px); }
.multiCarousel .leftLst { left:0; }
.multiCarousel .rightLst { right:0; }
.multiCarousel .leftLst.over, .multiCarousel .rightLst.over { pointer-events: none; background:#ccc; }


/* multi item carousel left-right preview */

.multi-carousel-container {
	cursor: grab;
	touch-action: pan-y;
	margin: 2.5rem auto;
	max-width: 100%;
	overflow: hidden;
	position: relative;
	height: calc(100vh - 5rem); /* Adjusted height to account for top and bottom margins */
}
.multi-carousel-container.dragging, #multiCarousel.dragging {
	cursor: grabbing;
	-webkit-user-select: none;
	user-select: none;
}
.carouselLRPreviewInner {
	display: flex;
	transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	visibility: hidden;
	height: 100%;
}
.carouselLRPreviewInner.initialized {visibility: visible;}
.multi-carousel-lrp-item, .clone {
	box-sizing: border-box;
	flex: 0 0 var(--slide-width, 75%);
	opacity: 0.25;
	padding: 0 5px;
	position: relative;
	transition: opacity 0.3s ease;
	height: 100%;
}
.multi-carousel-lrp-item.center, .clone.center {opacity: 1 !important;}
.multi-carousel-lrp-item.fade-in, .clone.fade-in {animation: slideCenter 0.6s ease forwards;}

@keyframes slideCenter {
	
	0% {
		opacity: 0.25;
	}
	100% {
		opacity: 1;
	}
	
}

.multi-carousel-control-prev, .multi-carousel-control-next {
	align-items: center;
	background-color: rgba(0, 0, 0, 0.5);
	border: none;
	border-radius: 50%;
	color: white;
	cursor: pointer;
	display: flex;
	height: 40px;
	justify-content: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: background-color 0.3s ease;
	width: 40px;
	z-index: 10;
}
.multi-carousel-control-prev {left: calc((100% - var(--slide-width, 75%)) / 4.25 - 20px);}
.multi-carousel-control-next {right: calc((100% - var(--slide-width, 75%)) / 4.25 - 20px);}
.multi-carousel-control-prev:hover, .multi-carousel-control-next:hover {background-color: rgba(0, 0, 0, 0.7);}
.img-container {border-radius: 1.5rem;height: 100%;overflow: hidden;position: relative;}
.img-container img, .carouselLRPreviewInner img {
	height: 100%;
	-moz-user-select: none;
	object-fit: cover;
	object-position: top;
	pointer-events: none;
	transition: transform 0.3s ease, filter 0.15s ease;
	user-select: none;
	-webkit-user-select: none;
	width: 100%;
}
.img-container:hover img {transform: translateZ(0) scale(1.02);}
.item-number {
	align-items: center;
	background-color: rgba(255, 255, 255, 0.75);
	border-radius: 50%;
	display: inline-flex;
	font-size: 120%;
	font-weight: bold;
	height: 35px;
	isolation: isolate;
	justify-content: center;
	left: 1rem;
	position: absolute;
	top: 1rem;
	width: 35px;
	z-index: 2;
}
.progress-bar-container {
	background-color: rgba(255, 255, 255, 0);
	border-radius: 2.5px;
	bottom: 1rem;
	height: 5px;
	left: 1rem;
	opacity: 0;
	position: absolute;
	right: 1rem;
	transition: opacity 0.3s ease;
	z-index: 2;
}
.progress-bar-fill {
	background-color: rgba(255, 255, 255, 0.75);
	border-radius: 2.5px;
	height: 100%;
	opacity: 0;
	transition: width linear;
	width: 0;
}
.multi-carousel-lrp-item.center .progress-bar-fill, .clone.center .progress-bar-fill {
	opacity: 1;
	transition: width linear, opacity 0.15s ease-in;
}
.multi-carousel-lrp-item.center .progress-bar-container, .clone.center .progress-bar-container {opacity: 1;}

@media (max-width: 45em) {
	.multi-carousel-lrp-item, .clone {flex: 0 0 100%;opacity: 1 !important;}
	.multi-carousel-control-prev {left: 10px !important;}
	.multi-carousel-control-next {right: 10px !important;}
}


/* another carousel */

/*.another-carousel[data-shift="1"] .carousel-inner > .carousel-item {-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out;}
.another-carousel .carousel-inner > .carousel-item.row { margin: 0; }
.another-carousel .carousel-control {background: none;color: transparent;overflow: hidden;text-shadow: none;-webkit-transition: all .3s ease-in-out;transition: all .3s ease-in-out;width: 30px;}
.another-carousel .carousel-control:before {color: #444;font-family: 'Glyphicons Halflings';position: absolute;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);width: 30px;}
.another-carousel .carousel-control:after {border-radius: 50%;box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);content: '';height: 60%;position: absolute;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);-webkit-transition: all .3s ease-in-out;transition: all .3s ease-in-out;width: 100%;}
.another-carousel .carousel-control:hover:after { box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.7); }
.another-carousel .carousel-control.left { left: -30px; }
.another-carousel .carousel-control.left:before { content: '\e079'; }
.another-carousel .carousel-control.left:after { right: -100%; }
.another-carousel .carousel-control.right { right: -30px; }
.another-carousel .carousel-control.right:before { content: '\e080'; }
.another-carousel .carousel-control.right:after { left: -100%; }
*/


/* multi item carousel with animation */

/*.multi-item-carousel .carousel-inner {padding: 1em 0;}
.multi-item-carousel .card {margin: 0 0.5em;box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);border: none;}
.multi-item-carousel .carousel-control-prev, .multi-item-carousel .carousel-control-next {background-color: #000;width: 6vh;height: 6vh;border-radius: 50%;top: 50%;transform: translateY(-50%);opacity: 1;}
.multi-item-carousel .carousel-control-next-icon, .multi-item-carousel .carousel-control-prev-icon {width: 1.2rem;height: 1.2rem;}
.multi-item-carousel .card .img-wrapper {max-width: 100%;height: 13em;display: flex;justify-content: center;align-items: center;}
.multi-item-carousel .card img {max-height: 100%;}
.multi-item-carousel .carousel-indicators {display: none;}

@media (min-width: 768px) {
	.multi-item-carousel .carousel-item {margin-right: 0;flex: 0 0 33.333333%;display: block;}
	.multi-item-carousel .carousel-inner {display: flex;}
}

@media (max-width: 767px) {
  .multi-item-carousel .card .img-wrapper {height: 17em;}
}*/



/* multi item carousel by id */

/*.multi-carousel-container {cursor: grab;margin: 0 auto;max-width: 100%;overflow: hidden;position: relative;}
.multi-carousel-container.dragging, #multiCarousel.dragging {cursor: grabbing;}
.multi-carousel-inner {display: flex;transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.multi-carousel-item, .clone {box-sizing: border-box;flex: 0 0 33.333333%;padding: 0 1rem;position: relative;}
.multi-carousel-control-prev, .multi-carousel-control-next {
	align-items: center;
	background-color: rgba(0, 0, 0, 0.5);
	border: none;
	border-radius: 50%;
	color: white;
	cursor: pointer;
	display: flex;
	height: 40px;
	justify-content: center;
	position: absolute;
	text-decoration: none;
	top: 50%;
	transform: translateY(-50%);
	transition: background-color 0.3s ease;
	width: 40px;
	z-index: 10;
}
.multi-carousel-control-prev:hover, .multi-carousel-control-next:hover {background-color: rgba(0, 0, 0, 0.7);}
.multi-carousel-control-prev {left: 0;}
.multi-carousel-control-next {right: 0;}
.multi-carousel-control-prev .carousel-control-prev-icon,
.multi-carousel-control-next .carousel-control-next-icon {width: 1.3rem;height: 1.3rem;}

.img-container {border-radius: 1.5rem;height: var(--carousel-height, 80vh);overflow: hidden;position: relative;}
.img-wrapper {height: var(--card-height, 40vh);overflow: hidden;position: relative;}

.img-container img, .img-wrapper img, #carouselInner img {
	height: 100%;
	object-fit: cover;
	object-position: top;
	pointer-events: none;
	user-drag: none;
	width: 100%;
	-webkit-user-drag: none;
	transition: transform 0.3s ease;
}

.img-container:hover img, .img-wrapper:hover img {transform: translateZ(0) scale(1.02);}

.item-number {
	align-items: center;
	background-color: rgba(255, 255, 255, 0.75);
	border-radius: 50%;
	display: inline-flex;
	font-size: 120%;
	font-weight: bold;
	height: 35px;
	justify-content: center;
	left: 1rem;
	position: absolute;
	top: 1rem;
	width: 35px;
	z-index: 2;
	isolation: isolate;
}

#multiCarousel {cursor: grab;touch-action: pan-y;}
#multiCarousel.dragging {user-select: none;-webkit-user-select: none;}

@media (max-width: 45em) {
	.multi-carousel-item, .clone {flex: 0 0 100%;}
}*/



<!-- multi item carousel css only -->

@media (max-width: 575.98px){
	.carousel-test .carousel-item {width: 100%!important;transform: translateX(0);}
	.carousel-test .long-title {height: auto;}
	.carousel-test .carousel-item .card {margin: 0!important;}
}

@media (min-width: 576px) {
	.carousel-four .carousel-item {width: calc(100% / 4);}
	.carousel-three .carousel-item {width: calc(100% / 3);}
	.carousel-two .carousel-item {width: calc(100% / 2);}
	
	.carousel-test .long-title {height: 50px;}
	
	.carousel-test .carousel-control-prev, .carousel-test .carousel-control-next,
	.latest .carousel-control-prev, .latest .carousel-control-next  {
		align-items: center;
		background-color: rgba(0, 0, 0, 0.5);
		border: none;
		border-radius: 50%;
		color: white;
		cursor: pointer;
		display: flex;
		height: 40px;
		justify-content: center;
		position: absolute;
		text-decoration: none;
		top: 50%;
		transform: translateY(-50%);
		width: 40px;
		opacity: 0;
  		transition: opacity 0.3s ease;
		/*z-index: 10;*/
	}
	.carousel-test:hover .carousel-control-prev, .carousel-test:hover .carousel-control-next,
	.latest:hover .carousel-control-prev, .latest:hover .carousel-control-next {opacity: 1;}
	
	.carousel-test .carousel-control-prev, .latest .carousel-control-prev {left: 0;}
	.carousel-test .carousel-control-next, .latest .carousel-control-next {right: 0;}
	.carousel-test .carousel-control-prev-icon, .carousel-test .carousel-control-next-icon,
	.latest .carousel-control-prev-icon, .latest .carousel-control-next-icon {width: 1.3rem;height: 1.3rem;}
	
	.carousel-test .carousel-item .card {margin-left: 1rem;margin-right: 1rem;}
	
	.carousel-test .carousel-item.active {
	  display: block;
	}
	
	.carousel-test .carousel-item.active + .carousel-item {
	  display: block;
	  transform: translateX(100%);
	}
	
	.carousel-test .carousel-item.active + .carousel-item + .carousel-item {
	  display: block;
	  transform: translateX(200%);
	}
	
	.carousel-test .carousel-item.active + .carousel-item + .carousel-item + .carousel-item {
	  display: block;
	  transform: translateX(300%);
	}
	
	
	/* 
	- if you wish for n items in the carousel just this pattern for i from 1 to n
	- (+ .carousel-item) * i = "+ .carousel-item" i times like above
	*/
	
	/*.carousel-item.active (+ .carousel-item) * i {
	  display: block;
	  transform: translateX(i * 100%);
	} */
	
	
	.carousel-test .carousel-item.active.carousel-item-start + .carousel-item {
	  display: block;
	  transform: translateX(0);
	}
	
	.carousel-test .carousel-item.active.carousel-item-start + .carousel-item + .carousel-item {
	  display: block;
	  transform: translateX(100%);
	}
	
	.carousel-test .carousel-item.active.carousel-item-start
	  + .carousel-item
	  + .carousel-item
	  + .carousel-item {
	  display: block;
	  transform: translateX(200%);
	}
	
	
	/* 
	- if you wish for n items in the carousel just this pattern for i from 1 to n
	- (+ .carousel-item) * i = "+ .carousel-item" i times like above
	*/
	
	/*.carousel-item.active.carousel-item-start (+ .carousel-item) * i {
	  display: block;
	  transform: translateX((i - 1) * 100%);
	} */
	
	
	.carousel-test .carousel-item.active.carousel-item-end + .carousel-item {
	  display: block;
	  transform: translateX(200%);
	}
	
	.carousel-test .carousel-item.active.carousel-item-end + .carousel-item + .carousel-item {
	  display: block;
	  transform: translateX(300%);
	}
	
	
	/* 
	- if you wish for n items in the carousel just this pattern for i from 1 to n - 1
	- (+ .carousel-item) * i = "+ .carousel-item" i times like above
	*/
	
	/*.carousel-item.active.carousel-item-end (+ .carousel-item) * i {
	  display: block;
	  transform: translateX((i + 1) * 100%);
	}*/ 
}



.dots-indicators .carousel-indicators [data-bs-target] {
	/*width: 10px;
	height: 10px;
	border-radius: 26px;
	transition: 0.3s;
	padding: 0!important;
	border: none;
	outline: none;*/
	
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	transition: transform 0.3s ease, background-color 0.3s ease;
	transform: scale(.6);
}
.dots-indicators .carousel-indicators .active {
	/*width: 25px;*/
	 transform: scale(1.3);
}
.dots-indicators .carousel-indicators .active + button,
.carousel-indicators [data-bs-target]:has(+ .active) {
	transform: scale(1);
}
.dots-indicators .carousel-indicators [data-bs-target]:hover {opacity: .75;}
.dots-indicators .carousel-indicators .active:hover {opacity: 1;}

.indicator-out .carousel-indicators {position: relative;margin-top: .5rem;}
.indicator-out .carousel-indicators [data-bs-target] {background-color: #ccc;}

.bordered-dots .carousel-indicators {column-gap: 20px;}
.bordered-dots .carousel-indicators button {width: 10px;height: 10px;border-radius: 50%;background-color: #fff;border: none;opacity: 1;outline: 2px solid transparent;outline-offset: 5px;}
.bordered-dots .carousel-indicators .active {outline-color: #fff;}

.carousel-uncover-wrap {overflow: hidden;}
.carousel-uncover-class .carousel-inner {position: relative;overflow: visible;}
.carousel-uncover-class .carousel-inner::after {content: '';position: absolute;top: 0;bottom: 0;width: 100%;right: 100%;background-color: #fff;}


.top-auto {top: auto;}
.fr-bottom {background-image: linear-gradient(to top, rgba(0, 0, 0, .75) 60%, rgba(0, 0, 0, 0) 100%);}
.fr-left {background-image: linear-gradient(to right, rgba(0, 0, 0, .95), rgba(0, 0, 0, 0));}


.column-count {height: auto;width: 100%;}
.column-count li {display: block;padding: 10px;}

@media(min-width: 480px){
	.column-3 {-webkit-column-count: 1;-moz-column-count: 1;column-count: 1;}
}

@media(min-width: 768px){
	.column-3 {-webkit-column-count: 2;-moz-column-count: 2;column-count: 2;}
}

@media(min-width: 992px){
	.column-3 {-webkit-column-count: 3;-moz-column-count: 3;column-count: 3;}
}


.bg-offset-hero::after {position: absolute;content: '';width: 75%;top: 0;left: 0;bottom: 0;z-index: -1;background-color: #0d6efd;}

@media (max-width: 768px) {
	.bg-offset-hero::after {width: 100%;}
}


.iconic {margin: 0;list-style-type: none;}
.iconic li {position: relative;padding:7px 0!important;line-height: normal;}
.iconic li i {position: absolute;left: -30px;top: 50%;transform: translateY(-50%);width: 16px;height: 16px;background-repeat: no-repeat;background-position: center center;background-size: contain;}


/* zigzag layout */

.alternate-cards .card {display: flex;flex-flow: wrap;flex: 100%;margin-bottom: 1.5rem;}
.alternate-cards .card-body {flex: 2;}
.alternate-cards .card-img-body {flex: 2;}
.alternate-cards .card:nth-child(even) .card-img-body {order: 2;}

.section-unwrap {overflow: hidden;}

.partial-view .carousel-inner {display: flex;overflow: visible;}
.partial-view .carousel-item {display: block;margin-right: 0;flex: 0 0 80%; /* Show 80% of current item; 10% of next and 10% of prev */}
.partial-view .carousel-item.active {margin-left: 10%;}/* (100% - 80%) / 2 */
.partial-view .carousel-item img {object-fit: cover;}


.show-neighbors {overflow: hidden;}
.show-neighbors .item__third:first-child, .show-neighbors .item__third:last-child {display: none;}
.show-neighbors .carousel-control-prev, .show-neighbors .carousel-control-next {
	background: rgba(0, 0, 0, .5);
}

@media (min-width: 500px) {
	
	.show-neighbors .carousel-indicators {margin-right: 25%;margin-left: 25%;}
	.show-neighbors .carousel-control-prev, .show-neighbors .carousel-control-next {
		width: 25%;
	}
	.show-neighbors .carousel-inner {width: 150%;left: -25%;}
	.show-neighbors .carousel-item-next:not(.carousel-item-left), .show-neighbors .carousel-item-right.active {
		-webkit-transform: translate3d(33%, 0, 0);
		transform: translate3d(33%, 0, 0);
	}
	.show-neighbors .carousel-item-prev:not(.carousel-item-right), .show-neighbors .carousel-item-left.active {
		-webkit-transform: translate3d(-33%, 0, 0);
		transform: translate3d(-33%, 0, 0);
	}
	.show-neighbors .item__third {
		display: block !important;
		float: left;
		position: relative;
		width: 33.33333333%;
	}
	
}



/* outer caption */

.outcap .carousel-caption {display: none;}


/* tester */

.tester .carousel-item div {padding: 0 5px;}

@media (max-width: 767px) {
  .tester .carousel-inner .carousel-item > div {display: none;}
  .tester .carousel-inner .carousel-item > div:first-child {display: block;}
}

.tester .carousel-inner .carousel-item.active,
.tester .carousel-inner .carousel-item-next,
.tester .carousel-inner .carousel-item-prev {
	display: flex;
}

/* medium and up screens */

@media (min-width: 768px) {
	.tester .carousel-inner .carousel-item-end.active, .tester .carousel-inner .carousel-item-next {transform: translateX(33.33%);}
	.tester .carousel-inner .carousel-item-start.active, .tester .carousel-inner .carousel-item-prev {
		transform: translateX(-33.33%);
	}

  /*  half slides CSS */

	.tester .carousel-inner:before {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 100%;
		left: 0;
		content: "";
		display: block;
		background-color: #fff;
		z-index: 2;
	}
	.tester .carousel-inner:after {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 100%;
		content: "";
		display: block;
		background-color: #fff;
	}
	.tester .carousel-control-prev {left: 12%;}
	.tester .carousel-control-next {right: 12%;}
}
	
.tester .carousel-inner .carousel-item-end, .tester .carousel-inner .carousel-item-start {transform: translateX(0);}


/* with vid */

.withvid .carousel-item {position: relative;}
.withvid .carousel-item .video-caption {position: absolute;top: 50%;left: 25%;transform: translate(-25%, -50%);z-index: 1;color: white;}
.withvid .carousel-item .video-caption h3 {font-size: 100px;}
.withvid .carousel-item video {width: 100%;height: 100%;}
.withvid .carousel-inner {position: relative;}
.withvid .carousel-item::before {content: attr(data-left);left: -90%;text-align: right;}
.withvid .carousel-item::after {content: attr(data-right);right: -90%;text-align: left;}
.withvid .carousel-item::before, .withvid .carousel-item::after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: white;
	font-size: 100px;
	font-weight: 500;
	width: 100%;
}
.withvid .overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: black;
	opacity: .3;
	z-index: 1;
}


/* prev next by image */

.prevnextimg .carousel-item {height: 30em;}
.prevnextimg .carousel-control-prev-icon, .prevnextimg .carousel-control-next-icon {
	width: 100px;
	height: 100px;
	border-radius: 50px;
	border: solid 1px #fff;
	background-size: cover;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: center center;
}
.prevnextimg .carousel-control-prev, .prevnextimg .carousel-control-next {width: 15%;}


/* youtube embed */

.ytframe-container {
	/*position: relative;overflow: hidden;padding-bottom: 56.25%;height: 0;max-width: 100%;*/
	/*position: absolute;width: 100%;height: 100%;top: 0;left: 0;bottom: 0;right: 0;overflow:hidden;*/
}
.ytframe-container iframe, .ytframe-container object, .ytframe-container embed {
	top: -90px;
	/*position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 0;margin-top: -50px;*/
	/*width: 100%;height: 100%;*/
}

@media (max-width: 767px) {
	.ytframe-container {height: 100%;}
	.ytframe-container iframe, .ytframe-container object, .ytframe-container embed {top: 0;}
}


/* diagonal div */

:root {--offset: 1.5em;}
.diagonal-grid > div:not(:first-child) {margin-top: calc(var(--offset) * -1);}
.diagonal-grid > div:nth-child(even) {clip-path: polygon(0 var(--offset), 100% 0, 100% 100%, 0 100%);}
.diagonal-grid > div:not(:first-child):nth-child(odd) {clip-path: polygon(0 0, 100% var(--offset), 100% 100%, 0 100%);}


/* retro layout */

.retro-layout .v-height {
    height: 240px;
}
.retro-layout .h-entry {
    display: block;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}
.retro-layout .gradient {
    position: relative;
}
.retro-layout .h-entry.gradient {
    position: relative;
}
.retro-layout .h-entry.mb-30 {
    margin-bottom: 30px;
}
.retro-layout .h-entry.gradient:before {
    z-index: 1;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: -moz-linear-gradient(top, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.8) 99%, rgba(0, 0, 0, 0.8) 100%);
    background: -webkit-linear-gradient(top, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.8) 99%, rgba(0, 0, 0, 0.8) 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(18%, transparent), color-stop(99%, rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0.8)));
    background: -o-linear-gradient(top, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.8) 99%, rgba(0, 0, 0, 0.8) 100%);
    background: linear-gradient(to bottom, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.8) 99%, rgba(0, 0, 0, 0.8) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 );
}
.retro-layout .h-entry .featured-img {
    position: absolute;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;
}
.retro-layout .text {
    position: absolute;
    bottom: 0;
    z-index: 10;
    padding: 20px;
    max-width: 350px;
}
.retro-layout .text span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    display: block;
    margin-bottom: 5px;
}
.retro-layout .h-entry .date {
    font-size: 15px;
}
.retro-layout .text h2, .retro-layout .text .h2 {
    color: #fff;
    font-size: 18px;
    line-height: 1.2;
    margin-bottom: 0;
}
@media (max-width: 767.98px){
	.retro-layout .img-5 {
		height: 240px !important;
		margin-bottom: 30px;
		margin-top: 30px;
	}
}


@media (min-width: 320px) {
	.carousel-control-next, .carousel-control-prev {display: none;}
}


/* latest carousel */

@media (max-width: 767px) {
	
	.latest .carousel-inner .carousel-item > div {display: none;}
	.latest .carousel-inner .carousel-item > div:first-child {display: block;}
	
}

.latest {padding-left: 0;padding-right: 0;}
.latest .carousel-inner .card {margin-left: 1em;margin-right: 1em;}
.latest .carousel-inner .carousel-item.active,
.latest .carousel-inner .carousel-item-next,
.latest .carousel-inner .carousel-item-prev {
    display: flex;
}

/* medium and up screens */

@media (min-width: 768px) {
    
    .item-four .carousel-inner .carousel-item-end.active, .item-four .carousel-inner .carousel-item-next {
		transform: translateX(25%);
    }
    .item-four .carousel-inner .carousel-item-start.active, .item-four .carousel-inner .carousel-item-prev {
      	transform: translateX(-25%);
    }
	
	.item-three .carousel-inner .carousel-item-end.active, .item-three .carousel-inner .carousel-item-next {
      	transform: translateX(33.33%);
    }
    .item-three .carousel-inner .carousel-item-start.active, .item-three .carousel-inner .carousel-item-prev {
      	transform: translateX(-33.33%);
    }
	
	.item-two .carousel-inner .carousel-item-end.active, .item-two .carousel-inner .carousel-item-next {
      	transform: translateX(50%);
    }
    .item-two .carousel-inner .carousel-item-start.active, .item-two .carousel-inner .carousel-item-prev {
      	transform: translateX(-50%);
    }
}

.latest .carousel-inner .carousel-item-end, .latest .carousel-inner .carousel-item-start {transform: translateX(0);}


/* hover-fx 1 */

.hover-fx-1 .card {position: relative;overflow: hidden;}
.hover-fx-1 .card-img-wrapper {display: flex;align-items: center;justify-content: center;height: 80%;overflow: hidden;}
.hover-fx-1 .card-img-wrapper img {transition: 1s ease;}
.hover-fx-1 .card:hover .card-img-wrapper img {transform: scale(1.15);}
.hover-fx-1 .card-body .card-title {margin-bottom: calc(20% + 2rem);transition: 1s ease;}
.hover-fx-1 .card-body {position: absolute;bottom: 0;left: 0;right: 0;height: 20%;background-color: rgba(255, 255, 255, 1);transition: 1s ease;}
.hover-fx-1 .card-content {left: 0;right: 0;overflow: hidden;width: 100%;height: auto;transition: 1s ease;}
.hover-fx-1 .card:hover .card-body .card-title {margin-bottom: 1rem;}
.hover-fx-1 .card:hover .card-body {height: 50%;}
.hover-fx-1 .card:hover .card-content {bottom: 0;}


/* hover-fx 2 */

.hover-fx-2 .card {overflow: hidden;cursor: pointer;}
.hover-fx-2 .card .card-content {position: absolute;bottom: -150px;min-height: 150px;width: 100%;background: rgba(255, 255, 255, 0.2);backdrop-filter: blur(15px);transition: bottom .4s ease-in;box-shadow: 0 -10px 10px rgba(255, 255, 255, 0.1);border-top: 1px solid rgba(255, 255, 255, 0.2);}
.hover-fx-2 .card:hover .card-content {bottom: 0;}
.hover-fx-2 .card:hover .card-content h4, .hover-fx-2 .card:hover .card-content h5 {transform: translateY(10px);opacity: 1;}
.hover-fx-2 .card .card-content h4,
.hover-fx-2 .card .card-content h5 {text-align: center;transition: 0.8s;opacity: 0;transform: translateY(-40px);transition-delay: 0.2s;color: #fff;}
.hover-fx-2 .card .card-content h5 {transition: 0.5s;}
.hover-fx-2 .card .card-content .social-icons {list-style: none;padding: 0;margin: 0;}
.hover-fx-2 .card .card-content .social-icons li {margin: 0 10px;transition: 0.5s;transition-delay: calc(0.15s * var(--i));    transform: translateY(50px);}
.hover-fx-2 .card:hover .card-content .social-icons li {transform: translateY(20px);}
.hover-fx-2 .card .card-content .social-icons li a {color: #fff;}
.hover-fx-2 .card .card-content .social-icons li a span {font-size: 1.3rem;}


/* hover-fx 3*/

.hover-fx-3 .card {position: relative;overflow: hidden;}
.hover-fx-3 .showed-title,
.hover-fx-3 .hidden-content {display: block;width: 100%;position: absolute;bottom: 0;left: 0;padding: 1em;-moz-transition: 1s;	-webkit-transition: 1s;-ms-transition: 1s;-o-transition: 1s;transition: 0.5s;}
.hover-fx-3 .showed-title {background: rgba(255, 255, 255, .8);}
.hover-fx-3 .hidden-content {opacity: 0;}
.hover-fx-3:hover .showed-title {padding-bottom: 10em;background: rgba(255, 255, 255, 1);}
.hover-fx-3:hover .hidden-content {opacity: 1;}