/* Main Style - KvX Generic UTILS */

/* ========================== Orientation: */

.kv-vertical-text, .kv-vertical-text-up {
    writing-mode: vertical-rl;
}
.kv-vertical-text { text-orientation: mixed; }
.kv-vertical-text-up { text-orientation: upright; }

.kv-vertical-rotate {
    transform: rotate(-90deg);
    transform-origin: left top;
}

/* ========================== BG Patterns: */

.bg-pattern-dots {
    background-color: #e5e5f7;
    opacity: 0.8;
    background-image: radial-gradient(#888888 0.5px, #ffffff 0.5px);
    background-size: 10px 10px;
}

/* ========================== BG Texture: */

.kv-texture-paper, .kv-texture-marmol, .kv-texture-wood, .kv-texture-wood-w {
    background-size: cover;
    background-position: center;
}
.kv-texture-paper { background-image: url('./../../assets/images/textures/papper-2-texture.jpg'); }   
.kv-texture-marmol { background-image: url('./../../assets/images/textures/marmol-texture.jpg'); }
.kv-texture-wood { background-image: url('./../../assets/images/textures/wood-old.jpg'); }
.kv-texture-wood-w { background-image: url('./../../assets/images/textures/wood-old-w.jpg'); }

/* ========================== Border Radius: */

.kv-styled-br { border-radius: 72px 2px 72px 2px; }
.kv-styled-br-b { border-radius: 2px 72px 72px 2px; }
.kv-style-br-2 { border-radius: 272px 2px 2px 2px; }

/* ========================== Border Custom SVG */

.kv-custom-border-1 {
    border: 12px solid transparent;
    border-image: url('./../../assets/images/objects/border-3.svg') 30 stretch;
    filter: drop-shadow(0 4px 10px #00000033);
}
.kv-custom-border-2 {
    border: 12px solid transparent;
    border-image: url('./../../assets/images/objects/border-4.svg') 30 stretch;
    filter: drop-shadow(0 10px 25px #00000040);
}

/* ========================== BG Gradients: */

.kv-bg-black-and-white { filter: grayscale(100%); }

.kv-noise-gradient {
    background-image: radial-gradient(#0001 1px, transparent 1px);
    background-size: 3px 3px;
}
.kv-bg-black-t2b-gradient { background-image: linear-gradient(to top, #000000d9,#00000000); }
.kv-bg-black-hero-focus { 
    background-image: 
        linear-gradient(to top, #000000d9, #00000000 50%), 
        linear-gradient(to bottom, #000000d9, #00000000 50%), 
        linear-gradient(to right, #00000059, #00000059)
    ; 
}

.kv-bg-white-gradient {background-image: linear-gradient(180deg, #FAFAF7 0%, #F6F8F1 50%, #EDEEE8 100%); }
.kv-bg-black-gradient { background-image: linear-gradient(to right, #252525 0%, black 100%); }

.kv-bg-sky-gradient { background-image: radial-gradient( circle farthest-corner at 22.4% 21.7%, #04bde4 0%, #0253b9 100.2% ); }
.kv-bg-ocean-gradient { background-image: linear-gradient(90deg, #1CB5E0 0%, #000851 100%); }

.kv-bg-midnight-gradient { background-image: linear-gradient(to right, #0f0c29, #302b63, #24243e); }
.kv-bg-spyro-gradient { background-image: linear-gradient(to right, #8e2de2, #4a00e0); }

.kv-bg-jungle-gradient { background-image: linear-gradient(120deg, #0a81f0 0%, #48ff60 100%); }
.kv-bg-woody-gradient { background-image: linear-gradient(90deg, #5a3b22 0%, #7a5230 15%, #a07144 35%, #8a5c36 50%, #b07a4a 65%, #7a5230 85%, #4a2f1b 100%); }
.kv-bg-woody2-gradient {
    background:
        linear-gradient(90deg, #5a3a21 0%, #8a5a33 20%, #a87343 35%, #8f6037 50%, #b37a48 65%, #7a4f2d 80%, #4a2d18 100%),
        repeating-linear-gradient(90deg, #00000014 0px, #00000014 1px, transparent 2px, transparent 6px);
    background-blend-mode: multiply;
}
.kv-bg-woody3-gradient {
    background-image: url("./../../assets/images/textures/wood-patter.png"), linear-gradient(90deg,#7b4e2c,#b07a4a,#7b4e2c);
    background-size: 200px auto, cover;
    background-blend-mode: overlay;
}

.kv-bg-sunrise-gradient { background-image: linear-gradient(to right, #ff512f, #f09819); }
.kv-bg-bloody-gradient { background-image: linear-gradient(to right, #870000, #190a05); }
.kv-bg-red-gradient { background-image: linear-gradient(to right, #870000, #ff4000); }

/* ========================== Clip Path: */

/* lg (>=1024px) */
@media(min-width: 1024px) {
    .clip-ellipse-banner { 
        clip-path: polygon(
            0% 0%, 88% 0%, 92% 5%, 95% 12%, 98% 25%, 100% 50%, 98% 75%, 95% 88%, 92% 95%, 88% 100%, 0% 100%
        ); 
    }
}

.kv-cp-rhombus { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.kv-cp-circle { clip-path: circle(50% at 50% 50%); }
.kv-cp-triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.kv-cp-trapezoid { clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);}
.kv-cp-pentagon { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
.kv-cp-hexagon { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
.kv-cp-heptagon { clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); }
.kv-cp-octagon { clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); }
.kv-cp-nonagon { clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%); }
.kv-cp-decagon { clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%); }
.kv-cp-bevel { clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); }
.kv-cp-rabbet { clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); }
.kv-cp-left-arrow { clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%); }
.kv-cp-right-arrow { clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%); }
.kv-cp-left-point { clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%); }
.kv-cp-right-point { clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); }
.kv-cp-left-chevron { clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%); }
.kv-cp-right-chevron { clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); }
.kv-cp-star { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.kv-cp-message { clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); }
.kv-cp-close { clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); }
.kv-cp-frame { clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%); }
.kv-cp-inset { clip-path: inset(5% 20% 15% 10%); }
.kv-cp-ellipse { clip-path: ellipse(25% 40% at 50% 50%); }