/**
 * Theme Name:        Kesselmannacf
 * Theme URI:         https://uxi360.com/
 * Description:       Custom theme using ACF
 * Version:           1.0.0
 * Author:            UXi360
 * Author URI:        https://uxi360.com/
 * Tags:              block-patterns, full-site-editing
 * Text Domain:       Kesselmannacf
 * Tested up to:      6.9.4
 * Requires at least: 6.9
 * Requires PHP:      8.2
  */


.carousel-track::-webkit-scrollbar {
	display: none;
}

.carousel-track {
	cursor: grab;
}

.carousel-track.active {
	cursor: grabbing;
}


/* header css ----------------------------*/

.menu-item {
	position: relative;
}

.menu-item a {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* .menu-item-has-children > a:after{
         content:"
         <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
         </svg>
         ";
         font-size:10px;
         margin-left:6px;
         } */
.menu-item-has-children>a {
	display: flex;
	align-items: center;
	gap: 4px;
}

.menu-item:hover>.sub-menu {
	display: block;
}

.sub-menu li {
	border-bottom: 1px solid #2a4e73;
}

.sub-menu a {
	display: block;
	padding: 10px 24px;
}

.sub-menu a:hover {
	background: #123f6c;
}

.sub-menu {
	font-weight: 400;
}

.sub-menu a {
	font-weight: 400;
}

.mobile-menu {
	display: flex;
	flex-direction: column;
}

.mobile-menu li {
	border-bottom: 1px solid #2a4e73;
}

.mobile-menu a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 20px;
}

.mobile-menu .sub-menu {
	display: none;
	flex-direction: column;
	background: #092345;
}

.mobile-menu .sub-menu a {
	font-weight: 400;
	padding-left: 35px;
}

.mobile-menu .menu-item-has-children.active>.sub-menu {
	display: flex;
}


/* DESKTOP MENU ONLY */
@media (min-width:1024px) {

	.sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		background: #0a2a50;
		width: 250px;
		display: none;
	}

	.menu-item:hover>.sub-menu {
		display: block;
	}

}

#mobile-menu .sub-menu {
	display: none;
	flex-direction: column;
	background: #092345;
}

#mobile-menu .menu-item-has-children.active>.sub-menu {
	display: flex;
}

#mobile-menu .sub-menu a {
	padding-left: 40px;
	font-weight: 400;
}


/* logo caresole home page  */

.carousel {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.carousel-track {
	display: flex;
	overflow-x: auto;
	scroll-behavior: smooth;
	gap: 1rem;
	padding: 1rem 0;
	cursor: grab;
}

.carousel-track:active {
	cursor: grabbing;
}

.carousel-item {
	flex: 0 0 auto;
	width: 47%;
}

@media (min-width: 768px) {
	.carousel-item {
		width: 19%;
	}
}

.carousel img {
	display: block;
	width: 100%;
	height: auto;
}

.carousel button.prev,
.carousel button.next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	background: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	padding: 0.5rem 1rem;
	font-size: 1.5rem;
	cursor: pointer;
	user-select: none;
	border-radius: 50px;
}

.carousel button.prev {
	left: 0.5rem;
}

.carousel button.next {
	right: 0.5rem;
}

.carousel-track::-webkit-scrollbar {
	display: none;
}


/* slick product slider  */

/* ----- Slider Controls Layout ----- */
.product-slider-wrapper {
	position: relative;
}

/* ----- Dots (Left side) ----- */
.slick-dots {
	position: absolute;
	bottom: -45px;
	left: 0;
	display: flex !important;
	gap: 10px;
}

.slick-dots li {
	width: 12px;
	height: 12px;
}

.slick-dots li button {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid #d90011;
}

.slick-dots li.slick-active button {
	background: #d90011;
}

/* Remove default dot icon */
.slick-dots li button:before {
	display: none;
}


/* ----- Arrows (Right side) ----- */

.slick-prev,
.slick-next {
	position: absolute;
	bottom: -70px;
	top: auto;
	width: 40px;
	height: 40px;
	background: #f2f2f2;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.slick-prev {
	right: 60px;
	left: auto;
}

.slick-next {
	right: 10px;
}

.slick-prev:before,
.slick-next:before {
	color: #d90011;
	font-size: 22px;
}



/* -----------------------------------faq icon  animation */

.faq-answer{
transition: all .3s ease;
}

.faq-icon.rotate{
transform: rotate(180deg);
}


.faq-icon{

height: 20px;

}