swiper-container::part(bullet-active) {
    background-color: #000
}

swiper-slide:not(.swiper-container-2 swiper-slide, .swiper-container-3 swiper-slide){
    filter: grayscale(100%);
    transition: filter 0.4s ease-in-out
}

.swiper-slide-active:not(.swiper-container-2 .swiper-slide-active, .swiper-container-3 .swiper-slide-active){
    filter: grayscale(0)
}

.swiper-container-2::before,
.swiper-container-3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    aspect-ratio: 5/4;
    z-index: 2;
    opacity: 1;
    transition: all 0.2s ease;
    visibility: visible;
}

.swiper-container-2::before{
    background-image: url('assets/hikvisionoutdoor.jpg');
    background-position: 0 22%;
    filter: saturate(1.4)
}

.swiper-container-3::before{
    background-image: url('assets/image00010.avif');
    filter: saturate(0.9) brightness(1.1)
}
  
.swiper-container-2.gpu-enabled::before,
.swiper-container-3.gpu-enabled::before {
    opacity: 0;
    visibility: hidden;
}

.swiper-container-2.gpu-enabled img,
.swiper-container-3.gpu-enabled img {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}


.whatsapp-button{
    animation-name: pulse;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}

.hero-image{
    mask-image:linear-gradient(129deg, black 87%, transparent 89%), radial-gradient(circle at 83.3% 79.9%, black 11.1%, transparent 15%)
}

.logo-carousel div{
    animation: movelogos 90s linear infinite;
}

.collapse-open>.collapse-content, .collapse:focus:not(.collapse-close)>.collapse-content, .collapse:not(.collapse-close)>input[type=checkbox]:checked~.collapse-content, .collapse:not(.collapse-close)>input[type=radio]:checked~.collapse-content, .collapse[open]>.collapse-content{
    opacity: 1;
    visibility: visible;
    min-height: fit-content;
}

.collapse-open>:where(.collapse-content), .collapse:focus:not(.collapse-close)>:where(.collapse-content), .collapse:not(.collapse-close)>:where(input[type=checkbox]:checked ~ .collapse-content), .collapse:not(.collapse-close)>:where(input[type=radio]:checked ~ .collapse-content), .collapse[open]>:where(.collapse-content){
    padding: 0
}

.collapse:not(.collapse-close):has(> input[type=checkbox]:checked), .collapse:not(.collapse-close):has(> input[type=radio]:checked) {
    grid-template-rows: 40px 1fr
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(32, 196, 203, 0.5);
	}
	80% {
		box-shadow: 0 0 0 14px rgba(32, 196, 203, 0); /* Fades out */
	}
}

@keyframes movelogos {
	0% {
		transform:translateX(0);
	}
	100% {
		transform:translateX(-100%);
	}
}

/* swiper-container::part(pagination) {
    position:relative;
    margin-top:3vh;
} */

/* swiper-container::part(pagination) {
    text-align: right;
    top:-10vh;
    bottom:0;
} */

#contactDialog {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
#contactDialog.modal-open {
  visibility: visible;
  opacity: 1;
}
/* Make sure the backdrop covers everything */
#contactDialog {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}
/* Subtle pop-in for the box */
#contactDialog .modal-box {
  transform: translateY(8px) scale(0.97);
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
#contactDialog.modal-open .modal-box {
  transform: translateY(0) scale(1);
}