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

@layer utilities {
  .visible {
    visibility: visible;
  }
  .invisible {
    visibility: hidden;
  }
}

@font-face {
  font-family: "CalSans-SemiBold";
  src: url("/fonts/CalSans-SemiBold.woff") format("woff"),
    url("/fonts/CalSans-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}

/* DM Sans Regular */
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/DM_Sans/DMSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

/* DM Sans Italic */
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/DM_Sans/DMSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}

/* DM Sans Medium */
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/DM_Sans/DMSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

/* DM Sans Bold */
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/DM_Sans/DMSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

/* DM Sans Bold Italic */
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/DM_Sans/DMSans-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}

@layer utilities {
  .text-fill-transparent {
    -webkit-text-fill-color: transparent;
  }
}

/* clears the ‘X’ from Internet Explorer */
input[type="search"]::-ms-clear {
  @apply hidden h-0 w-0;
}
input[type="search"]::-ms-reveal {
  @apply hidden h-0 w-0;
}
/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  @apply hidden;
}

/* Cursor pointer for file upload */
::-webkit-file-upload-button {
  @apply cursor-pointer;
}

/* Scrollbar */
.scrollbar-custom {
  scrollbar-width: thin;
}

.scrollbar-custom::-webkit-scrollbar {
  overflow: overlay;
  @apply h-2 w-2;
}

.scrollbar-custom::-webkit-scrollbar-track {
  @apply bg-jacarta-100 dark:bg-jacarta-800;
}

.scrollbar-custom::-webkit-scrollbar-thumb {
  @apply rounded-lg bg-jacarta-300 dark:bg-jacarta-600;
}

/* Dropdowns */
.dropdown--is-open + .js-dropdown {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.dropdown-menu.show {
  @apply block;
}

.dropdown-toggle > i,
.dropdown-toggle > button {
  @apply transition-transform;
}

.dropdown-toggle.show > i,
.dropdown-toggle.show > svg,
.dropdown-toggle.show > button {
  @apply rotate-180;
}

.dropdown-menu-end {
  --bs-position: end;
}

/* Mobile Menu */
.nav-menu--is-open {
  @apply visible flex flex-col items-start overflow-y-auto px-6 pb-6 pt-0 opacity-100;
}

.nav-open-noscroll {
  @apply h-screen overflow-hidden;
}

/* Slider */
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  @apply text-[0] content-['prev'];
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  @apply text-[0] content-['next'];
}

.swiper-button-disabled {
  @apply hidden;
}

/* Slider Dots */
.swiper-pagination-bullet {
  @apply mx-1 inline-block h-2.5 w-2.5 cursor-pointer rounded-full bg-jacarta-200;
}

.swiper-pagination-bullet-active,
.swiper-pagination-bullet:hover,
.swiper-pagination-bullet:focus {
  @apply bg-accent;
}

/* Lazyload Preloader */
.swiper-lazy-preloader {
  @apply absolute left-1/2 top-1/2 z-10 -ml-[21px] -mt-[21px] box-border h-[42px] w-[42px] origin-center animate-spin rounded-full border-4 border-accent border-t-transparent;
}

/* Full slider with thumbs */
.full-slider-thumbs .swiper-slide-thumb-active {
  @apply bg-white/10;
}

.swiper-slide-thumb-active .progress {
  @apply w-full transition-width duration-[5000ms] ease-linear;
}

/* 3D shadow */
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right {
  @apply rounded-2.5xl;
}

/* Scrollbar */
.swiper-scrollbar {
  @apply bg-jacarta-100 dark:bg-jacarta-600;
}

.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  @apply z-50 mt-16 h-0.5 w-full;
}

.swiper-scrollbar-drag {
  @apply relative left-0 top-0 h-full w-full rounded bg-accent;
}

/* Tooltips */
.tippy-box[data-theme~="xhibiter"] {
  @apply bg-jacarta-700;
}

.tippy-box[data-theme~="xhibiter"][data-placement^="top"]
  > .tippy-arrow::before {
  @apply border-t-jacarta-700;
}
.tippy-box[data-theme~="xhibiter"][data-placement^="bottom"]
  > .tippy-arrow::before {
  @apply border-b-jacarta-700;
}
.tippy-box[data-theme~="xhibiter"][data-placement^="left"]
  > .tippy-arrow::before {
  @apply border-l-jacarta-700;
}
.tippy-box[data-theme~="xhibiter"][data-placement^="right"]
  > .tippy-arrow::before {
  @apply border-r-jacarta-700;
}

/* Sticky Header */
.js-page-header--is-sticky {
  @apply bg-white/50;
}

.js-page-header--is-sticky.page-header--transparent,
.dark .js-page-header--is-sticky {
  @apply bg-jacarta-700/50;
}

/* Tabs */
.nav-link.active {
  @apply text-jacarta-700 after:absolute after:inset-x-0 after:-bottom-px after:block after:h-[2px] after:w-full after:bg-accent dark:text-white dark:hover:text-white;
}

.nav-link--style-2.active {
  @apply rounded-2.5xl border-b-0 bg-white shadow-2xl after:hidden dark:bg-jacarta-700;
}

.nav-link--style-3 {
  @apply after:absolute after:-z-10 after:!h-2.5 after:w-0 after:transition-width;
}

.nav-link--style-3.active {
  @apply border-b-0 text-white before:absolute before:-left-2 before:h-0 before:w-0 before:border-transparent before:border-l-jacarta-200 before:[border-width:8px_0_8px_8px] after:bottom-1 after:w-full before:md:-left-8;
}

.nav-link--style-4.active {
  @apply rounded-2.5xl bg-jacarta-700 text-white after:hidden hover:text-white;
}

.nav-link--style-5 {
  @apply hover:bg-jacarta-100 dark:hover:bg-jacarta-600;
}

.nav-link--style-5.active {
  @apply after:hidden bg-jacarta-100 dark:bg-jacarta-600;
}

.nav-link.active .nav-link-content {
  @apply block;
}

.tab-content > .tab-pane {
  @apply hidden;
}

.tab-content > .active {
  @apply block;
}

/* Modals */
.modal {
  @apply fixed top-0 left-0 z-50 hidden h-full w-full overflow-y-auto overflow-x-hidden outline-0;
}

.modal-dialog {
  @apply pointer-events-none relative my-12 mx-auto w-auto;
}

.modal-dialog-centered {
  @apply flex min-h-[calc(100%_-_6rem)] max-w-5xl items-center;
}

.modal.fade .modal-dialog {
  @apply translate-x-0 -translate-y-14 transition-transform duration-300 will-change-transform;
}

.modal.show .modal-dialog {
  @apply transform-none;
}

.modal-content {
  @apply pointer-events-auto relative mx-4 flex flex-col rounded-2xl bg-white bg-clip-padding outline-0 dark:bg-jacarta-700;
}

.modal-header {
  @apply flex shrink-0 items-center justify-between border-b border-jacarta-100 p-6 dark:border-jacarta-600;
}

.modal-title {
  @apply mb-0 mt-1 font-display text-xl font-semibold leading-normal text-jacarta-700 dark:text-white;
}

.btn-close {
  @apply absolute right-6 z-[1] border-0 bg-transparent transition-transform hover:rotate-180;
}

.modal-body {
  @apply relative flex-auto;
}

.modal-footer {
  @apply flex shrink-0 flex-wrap items-center justify-center border-t border-jacarta-100 p-6 dark:border-jacarta-600;
}

.modal-backdrop {
  @apply fixed top-0 left-0 z-40 h-screen w-screen bg-jacarta-900;
}

.modal-backdrop.fade {
  @apply opacity-0;
}

.modal-backdrop.show {
  @apply opacity-75;
}

/* Video Lightbox Modal */
.video-lightbox .modal-content {
  @apply w-full overflow-hidden;
}

.video-lightbox .btn-close {
  @apply right-2 top-2 rounded-full !bg-white/80 p-2;
}

.video-lightbox .btn-close svg {
  @apply !top-0 h-6 w-6;
}

.ratio-16x9 {
  --bs-aspect-ratio: calc(9 / 16 * 100%);
}

.ratio {
  @apply relative before:block before:pt-[var(--bs-aspect-ratio)];
}

.ratio > * {
  @apply absolute top-0 left-0 h-full w-full;
}

/* Accordions */
.accordion-button {
  overflow-anchor: none;
}

.accordion-button:not(.collapsed) .accordion-arrow {
  @apply -rotate-180;
}

/* Transitions: Fade / Collapse */
.fade {
  @apply transition-opacity ease-linear;
}

.collapse:not(.show) {
  @apply hidden;
}

.collapsing {
  @apply h-0 overflow-hidden transition-height;
}

/* Likes */
.js-likes--active svg {
  @apply opacity-0;
}

.js-likes--active::before {
  @apply !opacity-100;
}

/* Article */
.article-content > *:not(.article-content-wide) {
  @apply mx-auto mt-6 max-w-[48.125rem];
}

.article-content > h1,
.article-content > h2,
.article-content > h3,
.article-content > h4,
.article-content > h5,
.article-content > h6 {
  @apply !mt-12 mb-4 font-display text-jacarta-700 dark:text-white;
}

.article-content > p {
  @apply dark:text-jacarta-300;
}

.article-content > ul,
.article-content > ol {
  list-style: initial;
  @apply space-y-4 pl-4 dark:text-jacarta-300;
}

/* Alerts */
.alert-error {
  @apply bg-red/10 text-red;
}

.alert-success {
  @apply bg-green/10 text-green;
}

/* Gradient animation */
.animate-gradient {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(
    270deg,
    rgb(255, 115, 86) 0%,
    rgb(255, 89, 226) 25.52%,
    rgb(82, 221, 246) 50%,
    rgb(234, 223, 78) 76.04%,
    rgb(255, 115, 86) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
}

.animate-gradient--no-text-fill {
  -webkit-text-fill-color: initial;
}
/* .swiper-slide-fully-visible {
  display: none;
} */

.animate-gradientDiagonal {
  background: linear-gradient(
    270deg,
    rgb(65, 88, 208) 0%,
    rgb(200, 80, 192) 25.52%,
    rgb(255, 204, 112) 50%,
    rgb(255, 112, 112) 76.04%,
    rgb(65, 88, 208) 100%
  );
  background-size: 200% auto;
}

/* RTL */
html[dir="rtl"] .h-rotate,
html[dir="rtl"] .swiper-button-next,
html[dir="rtl"] .swiper-button-prev {
  @apply rotate-180;
}

html[dir="rtl"] .-translate-x-1\/2 {
  --tw-translate-x: 50%;
}

html[dir="rtl"] .hover\:translate-x-1:hover {
  --tw-translate-x: -0.25rem;
}


html {
	--color-blackHot: oklch(13.44% 0.0598 0);
	--color-blackCold: oklch(13.5% 0.0906 265.46);

	--color-pinkHot: oklch(71.66% 0.3486 332.98);
	--color-pinkTint: #002aff;

	--color-blueHot: oklch(55.04% 0.2651 258.64);
	--color-blueTint: #9EB1DE;

	--color-yellowHot: #002aff;
	--color-yellowTint: #002aff;


}

@keyframes move {
	100% {
		transform: translate3d(0, 0, 1px) rotate(360deg);
	}
}

@keyframes shift {
	0% {
		background-position: 0% 50%;
	}
  50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.bokeh {
  z-index: -1;
	--bokeh-color0: var(--color-blackCold);
	--bokeh-color1: var(--color-pinkHot);
	--bokeh-color2: var(--color-blueHot);
	--bokeh-color3: var(--color-yellowHot);
	--bokeh-opacity: 7; /* # between 1 and 100 */
	--bokeh-size: 40rem;
	--bokeh-blur: 4rem;
	
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	background: var(--bokeh-color0);
	background-image: linear-gradient(to right bottom, #489cc7, #0e282c, #2c1d2e, #251e5d, #070d0e, #259085);
	overflow: hidden;
	/* Animation */
	 background-size: 200% 200%;
	animation: shift;
	animation-duration: 5s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}

.bokeh span {
	width: var(--bokeh-size);
	height: var(--bokeh-size);
	border-radius: var(--bokeh-size);
	backface-visibility: hidden;
	position: absolute;
	animation: move;
	animation-duration: 45;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	opacity: calc(var(--bokeh-opacity) / 100);
}


.bokeh span:nth-child(0) {
	color: var(--bokeh-color1);
	top: 77%;
	left: 45%;
	animation-duration: 9s;
	animation-delay: -4s;
	transform-origin: 24vw -9vh;
	box-shadow: calc(2 * var(--bokeh-size)) 0 var(--bokeh-blur) currentColor;
}
.bokeh span:nth-child(1) {
	color: var(--bokeh-color2);
	top: 73%;
	left: 28%;
	animation-duration: 9s;
	animation-delay: -5s;
	transform-origin: -23vw 19vh;
	box-shadow: calc(-2 * var(--bokeh-size)) 0 var(--bokeh-blur) currentColor;
}
.bokeh span:nth-child(2) {
	color: var(--bokeh-color3);
	top: 11%;
	left: 24%;
	animation-duration: 9s;
	animation-delay: -38s;
	transform-origin: -12vw -3vh;
	box-shadow: calc(-2 * var(--bokeh-size)) 0 var(--bokeh-blur) currentColor;
}
.bokeh span:nth-child(3) {
	color: var(--bokeh-color3);
	top: 25%;
	left: 3%;
	animation-duration: 34s;
	animation-delay: -19s;
	transform-origin: 6vw 6vh;
	box-shadow: calc(2 * var(--bokeh-size)) 0 var(--bokeh-blur) currentColor;
}
.bokeh span:nth-child(4) {
	color: var(--bokeh-color1);
	top: 60%;
	left: 98%;
	animation-duration: 17s;
	animation-delay: -21s;
	transform-origin: -22vw -19vh;
	box-shadow: calc(-2 * var(--bokeh-size)) 0 var(--bokeh-blur) currentColor;
}
.bokeh span:nth-child(5) {
	color: var(--bokeh-color3);
	top: 59%;
	left: 84%;
	animation-duration: 20s;
	animation-delay: -6s;
	transform-origin: -13vw 16vh;
	box-shadow: calc(-2 * var(--bokeh-size)) 0 var(--bokeh-blur) currentColor;
}
.bokeh span:nth-child(6) {
	color: var(--bokeh-color2);
	top: 40%;
	left: 22%;
	animation-duration: 22s;
	animation-delay: -6s;
	transform-origin: 10vw -7vh;
	box-shadow: calc(2 * var(--bokeh-size)) 0 var(--bokeh-blur) currentColor;
}
.bokeh span:nth-child(7) {
	color: var(--bokeh-color3);
	top: 32%;
	left: 71%;
	animation-duration: 43s;
	animation-delay: -34s;
	transform-origin: -10vw -7vh;
	box-shadow: calc(-2 * var(--bokeh-size)) 0 var(--bokeh-blur) currentColor;
}
.bokeh span:nth-child(8) {
	color: var(--bokeh-color1);
	top: 14%;
	left: 33%;
	animation-duration: 13s;
	animation-delay: -14s;
	transform-origin: 18vw 14vh;
	box-shadow: calc(2 * var(--bokeh-size)) 0 var(--bokeh-blur) currentColor;
}
.bokeh span:nth-child(9) {
	color: var(--bokeh-color2);
	top: 64%;
	left: 78%;
	animation-duration: 7s;
	animation-delay: -44s;
	transform-origin: -24vw 19vh;
	box-shadow: calc(2 * var(--bokeh-size)) 0 var(--bokeh-blur) currentColor;
}
.bokeh span:nth-child(10) {
	color: var(--bokeh-color3);
	top: 91%;
	left: 93%;
	animation-duration: 31s;
	animation-delay: -39s;
	transform-origin: 5vw -15vh;
	box-shadow: calc(2 * var(--bokeh-size)) 0 var(--bokeh-blur) currentColor;
}
.bokeh span:nth-child(11) {
	color: var(--bokeh-color2);
	top: 8%;
	left: 52%;
	animation-duration: 49s;
	animation-delay: -5s;
	transform-origin: 6vw 10vh;
	box-shadow: calc(-2 * var(--bokeh-size)) 0 var(--bokeh-blur) currentColor;
}
.bokeh span:nth-child(12) {
	color: var(--bokeh-color2);
	top: 13%;
	left: 88%;
	animation-duration: 53s;
	animation-delay: -22s;
	transform-origin: 7vw -19vh;
	box-shadow: calc(2 * var(--bokeh-size)) 0 var(--bokeh-blur) currentColor;
}
.bokeh span:nth-child(13) {
	color: var(--bokeh-color1);
	top: 86%;
	left: 94%;
	animation-duration: 17s;
	animation-delay: -15s;
	transform-origin: -2vw -22vh;
	box-shadow: calc(2 * var(--bokeh-size)) 0 var(--bokeh-blur) currentColor;
}
.bokeh span:nth-child(14) {
	color: var(--bokeh-color3);
	top: 54%;
	left: 25%;
	animation-duration: 34s;
	animation-delay: -14s;
	transform-origin: 5vw 4vh;
	box-shadow: calc(2 * var(--bokeh-size)) 0 var(--bokeh-blur) currentColor;
}
.bokeh span:nth-child(15) {
	color: var(--bokeh-color3);
	top: 66%;
	left: 42%;
	animation-duration: 20s;
	animation-delay: -26s;
	transform-origin: -13vw 5vh;
	box-shadow: calc(2 * var(--bokeh-size)) 0 var(--bokeh-blur) currentColor;
}
.bokeh span:nth-child(16) {
	color: var(--bokeh-color1);
	top: 83%;
	left: 18%;
	animation-duration: 14s;
	animation-delay: -37s;
	transform-origin: -15vw 17vh;
	box-shadow: calc(2 * var(--bokeh-size)) 0 var(--bokeh-blur) currentColor;
}
.bokeh span:nth-child(17) {
	color: var(--bokeh-color3);
	top: 6%;
	left: 13%;
	animation-duration: 6s;
	animation-delay: -23s;
	transform-origin: 18vw -16vh;
	box-shadow: calc(-2 * var(--bokeh-size)) 0 var(--bokeh-blur) currentColor;
}
.bokeh span:nth-child(18) {
	color: var(--bokeh-color1);
	top: 41%;
	left: 52%;
	animation-duration: 50s;
	animation-delay: -19s;
	transform-origin: 23vw -20vh;
	box-shadow: calc(-2 * var(--bokeh-size)) 0 var(--bokeh-blur) currentColor;
}
.bokeh span:nth-child(19) {
	color: var(--bokeh-color3);
	top: 26%;
	left: 39%;
	animation-duration: 18s;
	animation-delay: -18s;
	transform-origin: 13vw 25vh;
	box-shadow: calc(2 * var(--bokeh-size)) 0 var(--bokeh-blur) currentColor;
}
.shadow-accent-volume{
  color:black !important;
  box-shadow: none !important;
}

span.kol {
  padding: 5px 5px 3px 5px;
  font-size: 10px;
  background: #ff0064;
  display: inline-block;
  margin-left: 10px;
  border-radius: 5px;
  line-height: 10px;
  position: relative;
  top: -7px;
}
.align-center{
  align-items: center;
}
.align-start{
  align-items: flex-start;
}