@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
	--white: #fff;
	--text-color-primary: #2F3C4A;
	--text-color-secondary: #1D71C9;
	--text-color-tertiary: #C4CCD4;
	--text-color-quaternary: #566576;
	--text-color-fifth: #576575;
}

html {
	scroll-behavior: smooth;
}

.section-arround-images{
	max-width: 3840px;
	margin: 0 auto;
}

.text-color-primary {
	color: var(--text-color-primary) !important;
}

.text-color-secondary {
	color: var(--text-color-secondary) !important;
}

.text-color-tertiary {
	color: var(--text-color-tertiary) !important;
}

.text-color-quaternary {
	color: var(--text-color-quaternary);
}

.text-color-fifth {
	color: var(--text-color-fifth);
}

.navbar-shadow{
	box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.4);
}

.menu-shadow-logo{
	box-shadow: -10px 8px 10px rgba(0, 0, 0, 0.2);
}

body{
	max-width: 1920px;
	margin: 0 auto!important;
}

body,
html {
	font-family: "Be Vietnam Pro", sans-serif;
	color: var(--text-color-primary);
	overflow-x: hidden;
}

.league-spartan {
	font-family: "League Spartan", sans-serif;
}

.font-inknut-antiqua {
	font-family: "Inknut Antiqua", serif;

}

.container {
	width: 100%;
	max-width: 1320px !important;
	margin: 0 auto;
	padding: 0 30px;
}

.navlink.active::after {
	bottom: -7px;
}

.navlink:hover,
.navlink.active {
	color: #1D71C9 !important;
}

.bannerSlide1 {
	background: url(/assets/images/banner.png) no-repeat top;
	background-size: cover;
}

.bannerSlide2 {
	background: url(/assets/images/banner2.png) no-repeat center top;
	background-size: cover;
}

.bannerSlide3 {
	background: url(/assets/slide3.png) no-repeat center top;
	background-size: cover;
}

.swiper-button-next:after,
.swiper-button-prev:after {
	display: none;
}

.heropagination .swiper-pagination-bullet {
	width: 14px !important;
	height: 14px !important;
	background-color: transparent;
	border: 3px solid #fff;
	opacity: 0.6;
	border-radius: 50%;
}

.heropagination .swiper-pagination-bullet-active {
	width: 18px !important;
	height: 18px !important;
	opacity: 1;
}

.footer-bg {
	background-image: url(/assets/images/footer.png);
	background-repeat: no-repeat;
	background-position: top;
	background-size: cover;
}

#sidebar.active {
	box-shadow: 0 0 0 5000px rgba(0, 0, 0, 0.35);
	transform: translateX(0);
}

.subBanner {
	background-image: url(/assets/images/catalog-banner.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.subBanner--upcomming {
	background-image: url(/assets/images/upcomming-banner.png);
}

.subBanner--aboutus {
	background-image: url(/assets/images/about-us-bg.png);
}

.subBanner--address {
	background-image: url(/assets/images/about-us-bg.png);
}

.subBanner--contact {
	background-image: url(/assets/images/contact-bg.png);
}



label.ckblbl input[type="checkbox"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    width: 16px;
    height: 16px;
    border: 1px solid var(--text-color-tertiary);
    border-radius: 50%;
    background-color: #fff;
    position: relative;
    display: flex;
    justify-content: center;  /* Horizontální centrování */
    align-items: center;      /* Vertikální centrování */
    cursor: pointer;
}

label.ckblbl input[type="checkbox"]::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

label.ckblbl input[type="checkbox"]:checked::before {
    content: url('/assets/icons/catalog/tick.svg'); /* cesta k ikoně fajfky */
    display: block;
    width: 12px;
    height: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);  /* Centrovat fajfku */
}

label.ckblbl input[type="checkbox"]:checked {
    background-color: #fff;
    border: 1px solid var(--text-color-tertiary);
}

/* Styl pro aktivní (zaškrtnutý) stav checkboxu */
label.ckblbl:has(input[type="checkbox"]:checked) {
    background-color: #fff; /* Bílé pozadí, když je checkbox zaškrtnutý */
}



.tile_tab.active{
	--tw-bg-opacity: 1;
    background-color: rgb(196 204 212 / var(--tw-bg-opacity));
	--tw-rotate: 5deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.tile_tab.active .inner-box{
	--tw-bg-opacity: 1;
    background-color: rgb(196 204 212 / var(--tw-bg-opacity));
}
.tile_tab.active .inner-box .tile_tab-content{
	--tw-bg-opacity: 1;
	rotate: -5deg;
    background-color: rgb(196 204 212 / var(--tw-bg-opacity));
}

.tile_tab.active .inner-box .tile_tab-content{
	--tw-bg-opacity: 1;
	--tw-rotate: 0deg;
    background-color: rgb(196 204 212 / var(--tw-bg-opacity));
}

.tile_tab.active svg path{
	fill: #C4CCD4;
}
.catalog-tab-link.active {
	background-color: #E2E5E9;
	color: #2F3C4A;
}
.btnIcn-katalog{
		position: absolute;
		right: 35px;
}

.filter-btn {
	cursor: pointer;
}

.filter-tab {
	display: none;
}

.filter-tab.active {
	display: grid;
}

.card:hover h6 {
	color: var(--text-color-secondary) !important;
}

.page.active,
.page:hover {
	color: var(--text-color-primary) !important;
	background-color: #E2E5E9;
}

.detailsItemslist {
	overflow-x: scroll;
	overflow-y: hidden;
	width: 100%;
}

.detailsItemslist::-webkit-scrollbar {
	height: 8px;
}

.detailsItemslist::-webkit-scrollbar-track {
	background: #D4D4D4;
}

.detailsItemslist::-webkit-scrollbar-thumb {
	background-color: #959595;
}

.detsilBox {
	display: none;
}

.detsilBox.active {
	display: block;
}

.filled-circle {
	width: 12px;
	height: 12px;
	background-color: #1D71C9;
	border-radius: 50%;
}

.unfilled-circle {
	width: 12px;
	height: 12px;
	background-color: transparent;
	border: 2px solid #8A98A8;
	border-radius: 50%;
}

.videoSlider-next .fa,
.videoSlider-next .fa {
	font-size: 20px;
}

.videoSlider4 .swiper-button-next,
.videoSlider4 .swiper-button-prev,
.videoSlider2 .swiper-button-next,
.videoSlider2 .swiper-button-prev,
.videoSlider .swiper-button-next,
.videoSlider .swiper-button-prev {
	top: calc(50% - 20px) !important;
}

.videoSlider-pagination4,
.videoSlider-pagination3,
.videoSlider-pagination2,
.videoSlider-pagination {
	position: absolute;
	bottom: 0px !important;
}

.videoSlider-pagination4 .swiper-pagination-bullet,
.videoSlider-pagination3 .swiper-pagination-bullet,
.videoSlider-pagination2.swiper-pagination-bullet,
.videoSlider-pagination .swiper-pagination-bullet {
	width: 10px !important;
	height: 10px !important;
	border: 2px solid #8A98A8;
	background-color: transparent;
	opacity: 1;
}

.videoSlider-pagination4 .swiper-pagination-bullet-active,
.videoSlider-pagination3 .swiper-pagination-bullet-active,
.videoSlider-pagination2 .swiper-pagination-bullet-active,
.videoSlider-pagination .swiper-pagination-bullet-active {
    border: 2.5px solid #1D71C9;
    background-color: transparent;
}
.productSlider1,
.videoSlider4,
.videoSlider3,
.videoSlider2,
.videoSlider {
	padding-bottom: 60px;
	padding-inline: 15px;
}

.card {
	display: block;
}

#sidebar ul li a.active {
	color: var(--text-color-secondary) !important;
}

.detailsSlSec::after,
.detailsSlSec::before {
	content: "";
	position: absolute;
	width: 50%;
	top: 0;
	height: 100%;
	z-index: -1;
}

.detailsSlSec::before {
	left: 0;
	background-color: #E2E5E9;
}

.detailsSlSec::after {
	right: 0;
	background-color: #F0F2F4;
}

@media (max-width: 1023px) {
    .detailsSlSec::before {
        background-color: #E2E5E9!important;
    	z-index: 1!important;
    }

    .detailsSlSec::after {
        background-color: #F0F2F4!important;
    	height: 100%!important;
    }

	.detailsSlSec::after,
	.detailsSlSec::before {
		content: "";
		position: absolute;
		width: 100%;
		top: 0;
		height: 50%;
		z-index: -1;
	}

	.product-slider-list{
		position: relative;
		z-index: 1;
	}

	.poly-rect{
		display: none!important;
	}

	.logo-planet-detail{
		width: 100%;
		mix-blend-mode: darken;
	}

	.logo-planet-detail img{
		margin: 0 auto;
	}
}

@media (max-width: 638px) {
	.all-width-section {
		width: calc(100vw - 15px);
        margin-left: -30px;
		padding: 30px!important;
	}

	.btnIcn-slider{
		right: 20px!important;
	}
}


.newsfilterbtn.active {
	background-color: var(--text-color-secondary);
	color: #fff;
}

.newsfilterbtn.active img:nth-child(1) {
	display: none;
}

.newsfilterbtn.active img:nth-child(2) {
	display: block;
}
.btnIcn-custom{
	position: absolute;
    right: 30px;
}
.btnIcn-slider{
	position: absolute;
    right: 50px;
}
.btnGroup:hover .detail_text{
	transform: translateX(-5px) !important;

}
.btnGroup svg{
	right: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
	opacity: 0;
}
.btnGroup:hover svg{
	opacity: 1;
	--tw-translate-x: 0px;
	--tw-translate-y: 0px;
	--tw-rotate: 0deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}


.videoSlider-footer{
		position: relative;
		bottom: -50px;
		width: 15%;
		margin: 0 auto;
}
.videoSlider-footer .videoSlider-pagination{
	bottom: 13px !important;
}

.aboutBox{
	transition: all 300ms;
	transition-duration: 300ms;
}
.aboutBox h2{
	transform: translateY(15px);
	transition-duration: 300ms;
}
.aboutBox h2.shorth{
	transform: translateY(45px);
	transition-duration: 300ms;
}
.aboutBox:hover h2.shorth{
	transition-duration: 300ms;
	transform: translateY(0px);
}
.aboutBox h2{
	transform: translateY(15px);
	transition-duration: 300ms;
}
.aboutBox:hover h2{
	transition-duration: 300ms;
	transform: translateY(0px);
}
.aboutBox::before{
	transition-duration: 300ms;
	content: '';
	height: 300px;
	width: 300px;
	position: absolute;
}
.aboutBox1::before{
	background-image: linear-gradient(rgba(47, 60, 74, 1), rgba(47, 60, 74, 1)), url(../images/aboutbox1.png);
	        background-blend-mode: multiply;

}
.aboutBox2::before{
	background-image: linear-gradient(rgba(47, 60, 74, 1), rgba(47, 60, 74, 1)), url(../images/aboutbox2.png);
	        background-blend-mode: multiply;

}
.aboutBox3::before{
	background-image: linear-gradient(rgba(47, 60, 74, 1), rgba(47, 60, 74, 1)), url(../images/aboutbox3.png);
	        background-blend-mode: multiply;

}
.aboutBox4::before{
	background-image: linear-gradient(rgba(47, 60, 74, 1), rgba(47, 60, 74, 1)), url(../images/aboutbox4.png);
	        background-blend-mode: multiply;

}
 
.groupText .pText {
    max-height: 0;                        
    opacity: 0;                          
    overflow: hidden;
    transform: translateY(20px);         
    transition: max-height 300ms ease, 
                opacity 300ms ease, 
                transform 300ms ease;    
}

.groupText:hover .pText {
    max-height: 50px;                    
    opacity: 1;
    transform: translateY(0);            
}

.aboutBox:hover::before{
	transform: rotate(5deg);
	transition: all 300ms;
}
.productDetail--banner::before{
	content: "";
	position: absolute;
	height: 650px;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	background: #eff2f4;
}

.om-sliderrange {
	position: relative;
}

.om-sliderrange-display {
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	width: 100%;
	justify-content: center;
	column-gap: 10px;
	font-size: 14px;
	font-weight: 800;
	color: var(--text-color-primary);
}

.om-sliderrange-range:before {
	background: #A7B2BE;
}

.om-sliderrange-button-start,
.om-sliderrange-button-end {
	cursor: pointer;
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background: #E2E5E9;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: visible;
	border: 2px solid var(--text-color-secondary);
}

.om-sliderrange-button-end .dot,
.om-sliderrange-button-start .dot {
	/* width: 12px; */
	/* height: 12px; */
	/* border: 2px solid var(--text-color-secondary) !important; */
	/* background: #E2E5E9 !important; */
	/* outline: 2px solid var(--text-color-secondary); */
	box-shadow: 0 0 0 3px var(--text-color-secondary);
	/* border: none; */
	border-radius: 12px;
}

/* .om-sliderrange-button-start:focus,
.om-sliderrange-button-start.active,
.om-sliderrange-button-end:focus,
.om-sliderrange-button-end.active {
	border: 2px solid var(--text-color-secondary) !important;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background: #E2E5E9;
} */
.rotate-icon {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}
.dropdown_menu.active-menu{
	background-color: #fff;
}
/* Custom Scrollbar */
.left-sidebar::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

.left-sidebar::-webkit-scrollbar-track {
    background: #C4CCD4; /* Background of the scrollbar track */
    border-radius: 0;
}

.left-sidebar::-webkit-scrollbar-thumb {
    background-color: #8A98A8; /* Scrollbar color */
    border-radius: 0;
    border: 2px solid #f1f1f1; /* Adds padding around the thumb */
}

.left-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #a2b1c2; /* Color on hover */
}
.aktuality-sec{
	max-width: 890px;
	margin: 0 auto;
}
.noUi-horizontal {
    height: 10px;
}
.noUi-horizontal .noUi-handle {
	width: 6px;
    height: 6px;
    right: -6px;
    top: 1.5px;
    border-radius: 50%;
	border: 2px solid #1d71c9;
	background: #D9D9D9;
    cursor: pointer;
    box-shadow: 0 0 0 2px #1d71c9;
}
.noUi-horizontal {
    height: 2px;
	max-width: 90%;
    margin: auto;
}
.noUi-target {
    background: #A7B2BE;
    border-radius: 4px;
    border: 0px solid #D3D3D3;
    box-shadow: none;
}
.noUi-handle:before, .noUi-handle:after{
	display: none;
}
.noUi-connect {
    background: #1d71c9;
}
.logoSlider-wrapper{
	padding: 0 0 40px 0;
}
.logoSlider-footer {
    position: relative;
    bottom: -40px;
    width: 20%;
    margin: 0 auto;
}
.logoSlider-footer .videoSlider-pagination3{
	bottom: -10px !important;
}
.productSlider-footer {
	bottom: -50px !important;
}
.productSlider-footer .videoSlider-pagination3{
	bottom: -5px !important;
}
.productSlider1-footer, .productSlider2-footer{
	width: 40%;
    position: relative;
    margin: 0 auto;
    padding: 30px 0;
}
.productSlider1-pagination {
	bottom: 25px !important;
}  .productSlider2-footer .videoSlider-pagination4 {
    bottom: 45px !important;
}
.productSlider2-footer{
	top: 40px;
}

.aboutBox-white{
	max-height: 300px;
	height: 300px;
	width: 300px;
}

@media only screen and (min-width:1366px) and (max-width:1440px) {
	.HP-arrow-down{
		top: -125px!important;
	}

	.tic-tac-toe-bottom.footer-icons-bg{
		top: -9vh!important;
	}
}

@media (min-width: 640px) {
	.container {
		max-width: 580px !important;
	}
}

@media (min-width: 768px) {
	.container {
		max-width: 720px !important;
	}
}
@media (max-width: 768px) {
	.videoSlider-footer {
		width: 50%;
	}
	.logoSlider-wrapper .logoSlider-footer {
		width: 50% !important;
		bottom: -30px !important;
	}
	.productSlider-footer {
		width: 50% !important;
		bottom: -35px !important;
	}
	.logoSlider-footer .videoSlider-pagination3 {
		bottom: -5px !important;
	}
	.aboutBox::before {
		transition-duration: 300ms;
		content: '';
		height: 180px;
		width: 170px;
		position: absolute;
	}
}


@media (max-width: 1630px) {
    .tic-tac-toe-top {
        display: none!important;
    }
}


@media (min-width: 1024px) {
	.container {
		max-width: 980px !important;
	}
}

@media (min-width:1280px) {
	.container {
		max-width: 1200px !important;
	}

	.videoSlider {
		padding-bottom: 40px;
	}
}

@media only screen and (min-width:1280px) and (max-width:1535px) {
	.aboutBox::before, .aboutBox-white {
		height: 270px;
		width: 270px;
	}
}
@media only screen and (min-width:1024px) and (max-width:1279px) {
	.aboutBox::before, .aboutBox-white {
		height: 215px;
		width: 215px;
	}
	.aboutBox h2{
		font-size: 1rem;
	}
	.aboutBox a{
		padding-left: 1.5rem;
		padding-right: 1.5rem;
		font-size: 12px;
	}
	.aboutBox p{
		font-size: 12px;
	}
	.aboutBox-white a{
		padding-left: 1.5rem;
		padding-right: 1.5rem;
		padding-top: 0.5rem;
        padding-bottom: 0.5rem;
	}

}

@media (max-width: 1024px) {
	.productDetail--banner::before{ 
		height: 450px; 
	}
  }

@media only screen and (min-width:768px) and (max-width: 1023px) {
	.aboutBox::before, .aboutBox-white {
		height: 300px;
		width: 300px;
	}
	.aboutBox{
		max-width: 300px;
		height: 300px;
	}
}

@media only screen and (min-width:640px) and (max-width: 767px) {
	.aboutBox::before, .aboutBox-white {
		height: 250px;
		width: 250px;
	}
	.aboutBox{
		max-height: 250px!important;
		height: 250px;
	}
}

@media only screen and (max-width: 639px) {
	.aboutBox::before, .aboutBox-white {
		height: 266px;
		width: 266px;
	}
	.aboutBox{
		max-height: 266px!important;
		height: 266px;
		max-width: 266px;
	}
}

@media (max-width: 600px) {
	.aboutBox::before, .aboutBox-white {
		height: 266px;
		width: 266px;
	}
	.aboutBox{
		max-height: 266px!important;
		height: 266px;
		max-width: 266px;
	}
}

@media (min-width:1536px) {
	.container {
		max-width: 1320px !important;
	}
}
@media only screen and (max-width:1366px) {
	.main_wrapper .left_sidebar {
		width: 27.5% !important;
	}
}
@media only screen and (min-width:1366px) and (max-width:1540px) {
	.main_wrapper .left_sidebar {
		width: 27.5% !important;
	}
	.curve-img{
		height: 825px;
	}
}
@media only screen and (min-width:1024px) and (max-width:1360px) {
	.main_wrapper .left_sidebar {
		width: 27.5% !important;
	}
	.curve-img{
		height: 755px;
	}
}
@media only screen and (min-width:1540px) and (max-width:1700px) {
	.main_wrapper .left_sidebar {
		width: 28.5% !important;
	}
}
@media only screen and (min-width:1700px) and (max-width:1800px) {
	.main_wrapper .left_sidebar {
		width: 30% !important;
	}
}
@media only screen and (min-width:1800px) and (max-width:1920px) {
	.main_wrapper .left_sidebar {
		width: 31.5% !important;
	}
}

/* nad 1920px*/
@media (min-width: 1921px) {
	.banner-angle.slider{
	  top: 905px;
	  bottom: unset!important;
	}

	html{
		background-color: #C4CCD4;
	}

	body{
		background-color: white;
		box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5), 10px 0 40px rgba(0, 0, 0, 0.5);
	}

	.banner-angle{
		top: 410px;
		bottom: unset!important;
	}

	.footer-angle{
		top: unset!important;
		bottom: 420px;
		height: 400px!important;
	}

	.footer-icons-bg{
		top: unset!important;
		bottom: 260px;
	}

	.banner-angle-product-detail{
		top: 545px!important;
		height: 300px!important;
	}
  }
  
.noUi-connect {
    background: #1d71c9 !important;
}
.noUi-handle {
    border: 0px solid #1d71c9 !important;
}

.noUi-handle:before, .noUi-handle:after {
    display: none !important;
}

.slider-filter-actual-select-values{
    text-align: center;
    font-weight: bold;
}
.slider-filter-actual-select-label{
    font-weight: normal;
}

.footer-icons-bg{
	mix-blend-mode: darken;
}

.rotated-container {
    transform: rotate(5deg); /* Nakloní celý div o 5 stupňů */
    overflow: hidden; /* Skryje přesahující části */
}

/* velikost uchycení*/
.createSlider.noUi-target{
	position: relative;
	display: flex;
    align-items: center; /* Zarovná čáru na střed vertikálně */
}

.noUi-base {
    height: 10px;  /* Původní výška */
    position: relative;
	display: flex;
    align-items: center; /* Zarovná čáru na střed vertikálně */
}

.noUi-connects {
    max-height: 2px;
}

.noUi-touch-area {
    height: 250%!important;
    width: 250%!important;
    transform: translate(-30%, -30%)!important;
}
/*konec uchycení*/

.straight-gradient {
    transform: rotate(-5deg); /* Kompenzuje naklonění, aby gradient zůstal rovný */
    background-image: linear-gradient(5deg, #e2e5ea 50%, #f1f2f4 50%);

    width: 100%;
    height: 300px; /* Nastavte podle potřeby */
}

/*lightbox*/
.lb-nav a.lb-next{
	opacity: 1;
	right: -100px;
	position: absolute;
	background: url(/assets/images/next.png) right 48% no-repeat;
}

.lb-nav a.lb-prev{
	opacity: 1;
	left: -100px;
	position: absolute;
	background: url(/assets/images/prev.png) left 48% no-repeat;
}
/*konec lightbox*/



#autoComplete_list_1 {
    position: absolute;
    background-color: white;
    border: 1px solid #C4CCD4;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 225px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
    padding: 0;
    margin-top: 5px;
}

#autoComplete_list_1 li {
    padding: 8px 12px;
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    color: #333;
}

#autoComplete_list_1 li:hover {
    background-color: #E6F4FF;
}

#autoComplete_list_1 mark {
    background-color: transparent;
    font-weight: bold;
    color: #1D71C9;
}


#autoComplete_list_2 {
    position: absolute;
    background-color: white;
    border: 1px solid #C4CCD4;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 225px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
    padding: 0;
    margin-top: 5px;
}

#autoComplete_list_2 li {
    padding: 8px 12px;
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    color: #333;
}

#autoComplete_list_2 li:hover {
    background-color: #E6F4FF;
}

#autoComplete_list_2 mark {
    background-color: transparent;
    font-weight: bold;
    color: #1D71C9;
}

.mobile-search .autoComplete_wrapper, .mobile-search #autoCompleteNameMobile{
	width: 100%;
}



@media (max-width: 639px) {
    .container.mobile-device-hp-slider {
		padding: 0px!important;
		rotate: 5deg;
		
    }

	.mobile-device-hp-slider{
		width: 120%!important;
		position: absolute;
		left: -10%;
	}

	.HP-whole-slider{
		padding-bottom: 0px!important;
		align-items: flex-end!important;
		background-size: auto 55vh;
		min-width: 100%;
	}

	.HP-inside-slider-content{
		height: 51vh;
		padding-bottom: unset!important;
		padding-top: 50px;
		rotate: -5deg;
	}

	.HP-slider-banner-icon{
		bottom: 40px!important;
		max-height: 150px!important;
	}

	.swiper-button-prev, .swiper-button-next{
		display: none;
	}

	.HP-whole-slider h1, .HP-whole-slider h6, .HP-whole-slider p{
		color: white!important;
	}

	.HP-whole-slider h1{
		font-size: 24px;
		line-height: 32px;
	}

	.HP-whole-slider h6{
		font-size: 16px;
	}

	.HP-whole-slider p{
		font-size: 14px
	}

	.HP-whole-slider{
		height: 100vh!important;
	}

	.heropagination.swiper-pagination-horizontal{
		bottom: 18vh!important;
	}

	.heropagination .swiper-pagination-bullet {
		width: 10px !important;
		height: 10px !important;
	}
	
	.heropagination .swiper-pagination-bullet-active {
		width: 14px !important;
		height: 14px !important;
	}
}

@media only screen and (min-width:320px) and (max-width:460px) {
	.HP-banner-Slider-angle{
		height: 45px!important;
		top: 450px!important;
	}
}

@media only screen and (min-width:461px) and (max-width:639px) {
	.HP-banner-Slider-angle{
		height: 65px!important;
		top: 350px!important;
	}
}

.swiper-wrapper:has(> .swiper-slide:only-child) {
  justify-content: center;
}