@font-face {
    font-family: "Anjoman";
    src: url("/fonts/Anjoman-FaNum-Light.eot");
    /* IE9 Compat Modes */
    src: url("/fonts/Anjoman-FaNum-Light?#iefix") format("embedded-opentype"),
        /* IE6-IE8 */ url("/fonts/Anjoman-FaNum-Light.woff2") format("woff2"),
        /* Super Modern Browsers */ url("/fonts/Anjoman-FaNum-Light.woff")
            format("woff"),
        /* Pretty Modern Browsers */ url("/fonts/Anjoman-Light.ttf")
            format("truetype");
}
@font-face {
    font-family: "Anjoman-Black";
    src: url("/fonts/Anjoman-FaNum-Black.eot");
    /* IE9 Compat Modes */
    src: url("/fonts/Anjoman-FaNum-Black?#iefix") format("embedded-opentype"),
        /* IE6-IE8 */ url("/fonts/Anjoman-FaNum-Black.woff2") format("woff2"),
        /* Super Modern Browsers */ url("/fonts/Anjoman-FaNum-Black.woff")
            format("woff"),
        /* Pretty Modern Browsers */ url("/fonts/Anjoman-Black.ttf")
            format("truetype");
}
:root {
    --primary: #121620;
    --primary2: #1c212e;
    --white: #ffffff;
    --white-10-opacity: #ffffff1a;
    --transparent: #ffffff00;
    --black: #000000;
    --grey: #f5f4f7;
    --pink: #e83357;
    --green: #1bd59a;
    --yellow: #e0b100;
    --menu-title-size: 23px;


    /* --plyr-video-controls-background: #FFC000;
    --plyr-video-control-color-hover: #FFC000;
    --plyr-video-control-background-hover: #FFC000;
    --plyr-menu-background: #FFC000;
    --plyr-range-fill-background: #FFC000; */
}
* {
    padding: 0;
    margin: 0;
    font-family:  "Open Sans", "Anjoman", Helvetica, sans-serif;
}
body {
    /* background-color: #f1f1f1; */
    /* display: inline-block; */
    padding: 0 !important;
    max-width: 1980px;
	margin: 0 auto !important;
	float: none !important;
}
a {
    text-decoration: none;
}
header {
    min-height: 70px;
}
button {
    border-style: solid !important;
    border-image: none !important;
}
:focus {
    outline: none !important;
    /* box-shadow: none !important; */
}
.f-anjoman-black {
    font-family: "Anjoman-Black", "Anjoman", Helvetica, sans-serif;
}

input[type=range]::-webkit-slider-thumb {
	pointer-events: all;
	width: 24px;
	height: 24px;
	-webkit-appearance: none;
/* @apply w-6 h-6 appearance-none pointer-events-auto; */
}

body {
    scrollbar-width: thin;          /* "auto" or "thin" */
    scrollbar-color: #898B90 #E9E9E9;   /* scroll thumb and track */
}

/* width */
*::-webkit-scrollbar {
    width: 10px;
    height: 4px;
  }

  /* Track */
*::-webkit-scrollbar-track {
    background: #E9E9E9;
  }

  /* Handle */
*::-webkit-scrollbar-thumb {
    background: #898B90;
    border-radius: 10px;
  }

  /* Handle on hover */
*::-webkit-scrollbar-thumb:hover {
    background: #707277;
  }
.overflow-x-scroll{
    overflow-x: scroll; /* Must be 'scroll' not 'auto' */
    -webkit-overflow-scrolling: touch;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* For IE, Edge and Firefox */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Resume Box
---------------------*/

.scroll {
    white-space: nowrap;
    scrollbar-color: #0d6efd white;
    scrollbar-width: thin;
}

.scroll::-webkit-scrollbar {
    width: 10px;
}

.scroll::-webkit-scrollbar-track {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: white;
}

.scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #0d6efd;
}

.scroll::-webkit-scrollbar:vertical {
}
@media screen and (max-width: 440px) {
    :root {
        --card-width: 190px!important;
        --card-height: 253px!important;
    }
    .previouscard1 {
        --card-translateX-offset: calc(-0.0 * var(--card-width) * 1) !important;
    }
    .previouscard2 {
        --card-translateX-offset: calc(-0.0 * var(--card-width) * 1) !important;
    }
    .previouscard3 {
        --card-translateX-offset: calc(-0.25 * var(--card-width) * 1) !important;
    }
    .nextcard1 {
        --card-translateX-offset: calc(0.0 * var(--card-width) * 1) !important;
    }
    .nextcard2 {
        --card-translateX-offset: calc(0.0 * var(--card-width) * 1) !important;
    }
    .nextcard3 {
        --card-translateX-offset: calc(0.25 * var(--card-width) * 1) !important;
    }

    .btn--left {
        left: -55% !important;
    }
    .btn--right {
        right: -55% !important;
    }
}
@media screen and (min-width: 440px) {
    :root {
        --card-width: 270px!important;
        --card-height: 360px!important;
    }
    .previouscard1 {
        --card-translateX-offset: calc(-0.0 * var(--card-width) * 1) !important;
    }
    .previouscard2 {
        --card-translateX-offset: calc(-0.0 * var(--card-width) * 1) !important;
    }
    .previouscard3 {
        --card-translateX-offset: calc(-0.25 * var(--card-width) * 1) !important;
    }
    .nextcard1 {
        --card-translateX-offset: calc(0.0 * var(--card-width) * 1) !important;
    }
    .nextcard2 {
        --card-translateX-offset: calc(0.0 * var(--card-width) * 1) !important;
    }
    .nextcard3 {
        --card-translateX-offset: calc(0.25 * var(--card-width) * 1) !important;
    }

    .btn--left {
        left: -55% !important;
    }
    .btn--right {
        right: -55% !important;
    }
}

@media screen and (min-width: 700px) {
    .previouscard1 {
        --card-translateX-offset: calc(-0.0 * var(--card-width) * 1) !important;
    }
    .previouscard2 {
        --card-translateX-offset: calc(-0.5 * var(--card-width) * 1) !important;
    }
    .previouscard3 {
        --card-translateX-offset: calc(-0.75 * var(--card-width) * 1) !important;
    }
    .nextcard1 {
        --card-translateX-offset: calc(0.0 * var(--card-width) * 1) !important;
    }
    .nextcard2 {
        --card-translateX-offset: calc(0.5 * var(--card-width) * 1) !important;
    }
    .nextcard3 {
        --card-translateX-offset: calc(0.75 * var(--card-width) * 1) !important;
    }

    .btn--left {
        left: -55% !important;
    }
    .btn--right {
        right: -55% !important;
    }
}


@media screen and (min-width: 900px) {
    .previouscard1 {
        --card-translateX-offset: calc(-0.3 * var(--card-width) * 1) !important;
    }
    .previouscard2 {
        --card-translateX-offset: calc(-0.6 * var(--card-width) * 1) !important;
    }
    .previouscard3 {
        --card-translateX-offset: calc(-0.9 * var(--card-width) * 1) !important;
    }
    .nextcard1 {
        --card-translateX-offset: calc(0.3 * var(--card-width) * 1) !important;
    }
    .nextcard2 {
        --card-translateX-offset: calc(0.6 * var(--card-width) * 1) !important;
    }
    .nextcard3 {
        --card-translateX-offset: calc(0.9 * var(--card-width) * 1) !important;
    }

    .btn--left {
        left: -55% !important;
    }
    .btn--right {
        right: -55% !important;
    }
}
@media screen and (min-width: 1110px) {
    .previouscard1 {
        --card-translateX-offset: calc(-0.5 * var(--card-width) * 1) !important;
    }
    .previouscard2 {
        --card-translateX-offset: calc(-1 * var(--card-width) * 1) !important;
    }
    .previouscard3 {
        --card-translateX-offset: calc(-1.5 * var(--card-width) * 1) !important;
    }
    .nextcard1 {
        --card-translateX-offset: calc(0.5 * var(--card-width) * 1) !important;
    }
    .nextcard2 {
        --card-translateX-offset: calc(1 * var(--card-width) * 1) !important;
    }
    .nextcard3 {
        --card-translateX-offset: calc(1.5 * var(--card-width) * 1) !important;
    }

    .btn--left {
        left: -55% !important;
    }
    .btn--right {
        right: -55% !important;
    }
}


@media screen and (min-width: 1550px) {
    .previouscard1 {
        --card-translateX-offset: calc(-0.75 * var(--card-width) * 1.1) !important;
    }
    .previouscard2 {
        --card-translateX-offset: calc(-1.5 * var(--card-width) * 1.1) !important;
    }
    .previouscard3 {
        --card-translateX-offset: calc(-2 * var(--card-width) * 1.1) !important;
    }
    .nextcard1 {
        --card-translateX-offset: calc(0.75 * var(--card-width) * 1.1) !important;
    }
    .nextcard2 {
        --card-translateX-offset: calc(1.5 * var(--card-width) * 1.1) !important;
    }
    .nextcard3 {
        --card-translateX-offset: calc(2 * var(--card-width) * 1.1) !important;
    }

    .btn--left {
        left: -55% !important;
    }
    .btn--right {
        right: -55% !important;
    }
}

.card{
    --card-translateY-offset: 0;

	position: absolute;
	left: 0;
	top: 50%;
    right: 0;
    margin-right: auto;
    margin-left: auto;
	transform: translateX(var(--card-translateX-offset))
		translateY(var(--card-translateY-offset))
		scale(var(--card-scale-offset));
	display: inline-block;
	width: var(--card-width);
	height: var(--card-height);
	transition: transform var(--card-transition-duration)
		var(--card-transition-easing);
	user-select: none;
}



/*.card {
    --card-translateY-offset: 100vh;
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -10%) translateX(var(--card-translateX-offset)) translateY(var(--card-translateY-offset)) scale(var(--card-scale-offset));
    display: inline-block;
    width: var(--card-width);
    height: var(--card-height);
    transition: transform var(--card-transition-duration) var(--card-transition-easing);
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }*/
.card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 1;
  transition: opacity var(--card-transition-duration) var(--card-transition-easing);
  opacity: calc(1 - var(--opacity));
}
.card__image {
  position: relative;
  width: 100%;
  height: 100%;
}
.card__image img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.currentcard {
    --current-card-rotation-offset: 0;
    --card-translateX-offset: 0;
    --card-rotation-offset: var(--current-card-rotation-offset);
    --card-scale-offset: 1.1;
    --opacity: 0.8;
    z-index: 50;
  }
.previouscard1 {
    --card-translateX-offset: calc(-0.5 * var(--card-width) * 1.1);
    --card-rotation-offset: 25deg;
    z-index: 40;
}
.previouscard2 {
    --card-translateX-offset: calc(-1 * var(--card-width) * 1.1);
    --card-rotation-offset: 25deg;
    z-index: 30;
}
.previouscard3 {
    --card-translateX-offset: calc(-1.5 * var(--card-width) * 1.1);
    --card-rotation-offset: 25deg;
    z-index: 20;
}
.nextcard1 {
    --card-translateX-offset: calc(0.5 * var(--card-width) * 1.1);
    --card-rotation-offset: 25deg;
    z-index: 40;
}
.nextcard2 {
    --card-translateX-offset: calc(1 * var(--card-width) * 1.1);
    --card-rotation-offset: -25deg;
    z-index: 30;
  }
.nextcard3 {
    --card-translateX-offset: calc(1.5 * var(--card-width) * 1.1);
    --card-rotation-offset: -25deg;
    z-index: 20;
}
.previouscard1, .previouscard2, .previouscard3, .nextcard1, .nextcard2, .nextcard3 {
    --card-scale-offset: 0.9;
    --opacity: 0.4;
}
.swiper-slide-zoomed{
    z-index: 1;
}
@media (max-height: 580px) {
  .height-main{
    height: 580px;
  }
}

/* Maximum height */
@media (max-height: 40rem) {

}