/*

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

*/



:root {
	/*--bs-font-sans-serif: "DM Sans", sans-serif;*/
	/*--bs-body-font-size: 1.2rem;
	font-size: var(--bs-body-font-size);*/
	
	/* Warm & Inviting */
	--bs-font-sans-serif: "Lato", sans-serif;
	
	/* Elegant & Literary */
	/*--bs-font-sans-serif: "Raleway", sans-serif;*/
}

/*html {font-size: 1.2rem;}*/

html, body {height: 100%;}


h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    /* Warm & Inviting */
	font-family: "Prata", serif;
	font-weight: 400;
	
	/* Elegant & Literary */
	/*font-family: "Cormorant Garamond", serif;*/
}

.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 */
}

@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: 2;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;}

@media (max-width:768px) {
	.site-header::before {height: 50px;margin-bottom: -50px;}
	.site-header .container {padding-top: 1rem!important;padding-bottom: 1rem!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;}
}

@-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: rgba(255, 255, 255, .9);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;}

.offcanvas {z-index: 1051;}


/*.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;}
.my-l-min {margin-top: -38%;}
.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;}
}

.img-wrapper {position: relative;}
.img-wrapper img {height: 100%;width: 100%;object-fit: cover;object-position: center;}
.height-1 {height: 15em;}
.height-2 {height: 30em;}
.height-3 {height: 20em;}

@media (max-width: 575.98px){
	.height-2 {height: 20em;}
}


.eapps-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: 25%;}
	.carousel-three .carousel-item {width: 33.333%;}
	.carousel-two .carousel-item {width: 50%;}
	
	.carousel-test .long-title {height: 80px;}
	
	.carousel-test .carousel-control-prev, .carousel-test .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;
	}
	
	.carousel-test .carousel-control-prev {left: 0;}
	.carousel-test .carousel-control-next {right: 0;}
	.carousel-test .carousel-control-prev-icon, .carousel-test .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;}
.bg-overlay a {color: #fff;text-decoration: none;outline: none;}
.fr-bottom {background-image: linear-gradient(to top, rgba(0, 0, 0, .95), rgba(0, 0, 0, 0));}
.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;}