:root {
    --primary-red: #b91202; 
    --primary-green: #0bb902; 
    --primary-brown: #664102; 
    --primary-gray: #808080; 
    --primary-yellow: #fba105; 
    --primary-blue: #3396ff; 
  }

html {
    scroll-behavior: smooth;
}
#dp-popup {
    display: none;
    position: fixed;
    z-index: 1000;
    /* 1000 */
    /* padding-top: 100px; */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0, 0.5);
    background-color: rgba(104, 77, 77, 0.4);
    align-items: center;
}
#dp-popup .popup-content {
    position: relative;
    width: 100%;
    height: 100%;
}

#dp-popup #dp-popup-viewer {
    box-shadow: 8px 9px 13px 3px rgb(0 0 0 / 41%);
    border-radius: 3px;
    width: 100%;
    height: 100%;
  }

#dp-popup #dp-close-btn {
    position: absolute;
    z-index: 1001;
    top: 10px;
    right: 20px;
    cursor: pointer;
}
@keyframes backgroundMoveHorizontal {
    0% { background-position: left center; }
    50% { background-position: center center; }
    100% { background-position: right center; }
  }
.dp-thumb-image {
    background-image: url('../images/background.jpeg');
    animation: backgroundMoveHorizontal 8s ease-in-out infinite alternate;
}

/* make is black white background > bg-blend-luminosity */

.dp-container-main {
    --padding-x: 16px;
    --padding-left: var(--padding-x);
    --padding-right: var(--padding-x);
    --padding: calc(var(--padding-left) + var(--padding-right));
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1290px;
    --container-width: 100%;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left: var(--padding-left);
    padding-right: var(--padding-right);
    max-width: calc(var(--container-width) + var(--padding))
}

.dp-container-main.container_full-width__xh1Pa {
    max-width: 100%
}

.dp-container-main.container_no-padding__9Wg80 {
    --padding-x: 0px
}

@media (min-width:640px) {
    .dp-container-main {
        --container-width: var(--container-sm)
    }
}

@media (min-width:768px) {
    .dp-container-main {
        --container-width: var(--container-md)
    }
}

@media (min-width:1024px) {
    .dp-container-main {
        --container-width: var(--container-lg)
    }
}

@media (min-width:1280px) {
    .dp-container-main {
        --container-width: var(--container-xl)
    }
}

@media (min-width:1400px) {
    .dp-container-main {
        --container-width: var(--container-2xl)
    }
}


.dp-hero-slide-content-animation {
    position: relative;
    display: block;
    opacity: 0;
    transform: perspective(400px) rotateY(0deg) translateY(-120px);
    transform-origin: top;
    transition: all 1s ease;
    z-index: 44
}
.dp-text-\[--primary-red\] {
    color: var(--primary-red);
}
.dp-text-\[--primary-green\] {
    color: var(--primary-green);
}
.dp-text-\[--primary-blue\] {
    color: var(--primary-blue);
}
.dp-text-\[--primary-yellow\] {
    color: var(--primary-yellow);
}
.dp-text-\[--primary-gray\] {
    color: var(--primary-gray);
}
.dp-text-\[--primary-brown\] {
    color: var(--primary-brown);
}
/* ===================================================== */
.content-space-between {
    align-content: space-between
}
.w-90\%{
    width: 90%
}
.rounded-tlr-none {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.gap-\[5rem\] {
    gap: 5rem
}


/* add */


@media (max-width:1280px) {
    .max-\[1280px\]\:pr-\[150px\] {
        padding-right: 150px
    }
    .max-\[1280px\]\:flex-row {
        flex-direction: row
    }
}
@media (max-width:768px) {
    .max-\[768\]\:flex-col {
        flex-direction: column
    }
}
/*  */


.keen-slider:not([data-keen-slider-disabled]) {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    align-content: flex-start;
    display: flex;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -khtml-user-select: none;
    width: 100%
}

.keen-slider:not([data-keen-slider-disabled]) .keen-slider__slide {
    min-height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%
}

.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-reverse] {
    flex-direction: row-reverse
}

.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-v] {
    flex-wrap: wrap
}