/**
 * Copyright (c) 2022 Yağız Işkırık
 * 
 * This software is released under the MIT License.
 * https://opensource.org/licenses/MIT
 */

:root {
    --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --radius-sm: calc(0.375em / 2);
    --radius-md: 0.375em;
    --inner-glow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075);
    --shadow-md: 0 0.9px 1.25px hsla(0, 0%, 0%, 0.025), 0 3px 5px hsla(0, 0%, 0%, 0.05), 0 12px 20px hsla(0, 0%, 0%, 0.09);
    --shadow-ring: 0 0 0 1px hsla(0, 0%, 0%, 0.05);
    --shadow-sm: 0 0.3px 0.4px hsla(0, 0%, 0%, 0.02), 0 0.9px 1.5px hsla(0, 0%, 0%, 0.045), 0 3.5px 6px hsla(0, 0%, 0%, 0.09);
    --color-primary-dark: hsl(250, 100%, 64%);
    --primary-color: hsl(250, 100%, 64%);
    --lm-link-text-color: hsl(250, 100%, 64%);
    --lm-link-text-color-hover: hsl(250, 100%, 64%);
    --sidebar-width: 24rem;
    --user-button-circle: rgba(0, 0, 0, 0.025);
    --user-button-cardborder: rgba(255, 255, 255, 0.25);
    --user-button-text: #323133;
    --user-button-shadow: rgba(0, 0, 0, 0.1);
}

body {
    font-family: 'Roboto Condensed', sans-serif;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(60,840,486)'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23FFFFFF'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='533' height='444.2' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.02'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
}

.header {
    background: url(../images/bg1.jpg);
    background-size: cover;
    background-position: 100% 10%;
    height: 45rem;
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 50% 100%, 0% 88%);
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 50% 100%, 0% 88%);
}

.header .container {
    padding-top: 7rem;
    padding-bottom: 7rem;
    display: flex;
}

.header .container .header-left {
    width: 50%;
}

.nav-item a {
    transition: all 0.2s var(--ease-out);
}

.cta {
    border: none;
    background: none;
    cursor: pointer;
    margin-top: 2rem;
    padding-left: 0;
}

.cta span {
    padding-bottom: 7px;
    letter-spacing: 4px;
    font-size: 14px;
    padding-right: 15px;
}

.cta svg {
    transform: translateX(-8px);
    fill: white;
    transition: all 0.3s ease;
}

.cta .hover-underline-animation.text-dark-lm+svg {
    fill: #000;
}

.cta:not(:hover) svg {
    animation: arrow-move 1.5s infinite;
}

@keyframes arrow-move {
    0% {
        transform: translateX(-8px);
    }

    50% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-8px);
    }
}

.cta:hover svg {
    transform: translateX(0);
    fill: var(--primary-color) !important;
}

.cta:active svg {
    transform: scale(0.9);
}

.hover-underline-animation {
    position: relative;
    color: white;
    padding-bottom: 20px;
    transition: all 0.2s;
}

.cta:hover .hover-underline-animation {
    color: var(--primary-color) !important;
}

.hover-underline-animation:after {
    content: "";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--primary-color);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.cta:hover .hover-underline-animation:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.search {
    display: table;
}

.search input {
    background: none;
    border: none;
    outline: none;
    width: 28px;
    min-width: 0;
    padding: 0;
    z-index: 1;
    position: relative;
    line-height: 18px;
    margin: 5px 0;
    font-size: 14px;
    appearance: none;
    -webkit-appearance: none;
    transition: all 0.4s ease;
    cursor: pointer;
    color: #000;
}

.search input+div {
    position: relative;
    height: 28px;
    width: 100%;
    margin: -28px 0 0 0;
}

.search input+div svg {
    display: block;
    position: absolute;
    height: 28px;
    width: 160px;
    right: 0;
    top: 0;
    fill: none;
    stroke: #000;
    stroke-width: 1.5px;
    stroke-dashoffset: 271.908;
    stroke-dasharray: 59 212.908;
    transition: all 0.4s ease;
}

.search input:not(:-moz-placeholder-shown) {
    width: 160px;
    padding: 0 4px;
    cursor: text;
}

.search input:not(:-ms-input-placeholder) {
    width: 160px;
    padding: 0 4px;
    cursor: text;
}

.search input:not(:placeholder-shown),
.search input:focus {
    width: 160px;
    padding: 0 4px;
    cursor: text;
}

.search input:not(:-moz-placeholder-shown)+div svg {
    stroke-dasharray: 150 212.908;
    stroke-dashoffset: 300;
}

.search input:not(:-ms-input-placeholder)+div svg {
    stroke-dasharray: 150 212.908;
    stroke-dashoffset: 300;
}

.search input:not(:placeholder-shown)+div svg,
.search input:focus+div svg {
    stroke-dasharray: 150 212.908;
    stroke-dashoffset: 300;
}

.search::-moz-selection {
    background: rgba(255, 255, 255, 0.2);
}

.search::selection {
    background: rgba(255, 255, 255, 0.2);
}

.search::-moz-selection {
    background: rgba(255, 255, 255, 0.2);
}

.main-cards {
    display: flex;
    justify-content: space-between;
    overflow-x: scroll;
}

.navbar-brand img {
    height: 45px;
}

@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1.4rem;
    }
}

.card {
    margin: 1rem !important;
    overflow: hidden;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.2) 0 0 14px;
    transition: all 0.3s;
}

.card img {
    transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.card:hover img {
    transform: scale(1.1);
}

.card:hover {
    box-shadow: #7A82F186 0 0 17px;
    text-decoration: none;
}

.card .text-right a {
    color: #000;
}

.informative-main,
.informative-side,
.informative-side-alternate {
    display: flex;
    padding: 1rem;
    margin-top: 3rem;
}

.informative-side,
.informative-side-alternate {
    padding: 0;
    background-color: #f1f1f1;
    align-items: center;
}

.inner-container {
    width: 53%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem;
}

.inner-container p,
h3,
h5 {
    margin: 0;
}

.inner-container h5 {
    font-size: 1.5rem;
}

.inner-container h2 {
    margin-bottom: 2rem;
}

.informative-side .inner-container {
    background-color: white;
    border-radius: 0.5rem;
    height: fit-content;
    margin-left: calc(12.5% + 1rem);
    margin-right: 2rem;
}

.informative-side-alternate .inner-container {
    background-color: white;
    border-radius: 0.5rem;
    height: fit-content;
    margin-right: calc(12.5% + 1rem);
    margin-left: 2rem;
}

.informative-main img {
    border-radius: 0.5rem;
    width: 47%;
    height: auto;
    object-fit: cover;
}

.informative-side img {
    border-radius: 0.5rem 0 0 0.5rem;
    width: 60%;
    height: auto;
    object-fit: cover;
}

.informative-side-alternate img {
    border-radius: 0 0.5rem 0.5rem 0;
    width: 60%;
    height: auto;
    object-fit: cover;
}

.divider {
    display: flex;
    gap: 0.2rem;
    font-size: 0.2rem;
    opacity: 0.4;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.footer-cont {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.85)), url(../images/footer.jpg);
    background-size: cover;
    background-position: 0% 50%;
    padding: 3rem;
    margin-top: 0;
    position: relative;
}

.footer-cont:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2.5px;
    left: 0;
    top: 0;
    background: linear-gradient(to left, #7230F5, #73D1FA);
}

.footer-cont .footer-lines,
.footer-cont li .uk-accordion-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-cont .footer-lines a,
.footer-cont li a {
    text-decoration: none;
    color: white;
    font-size: 1.25rem;
    font-weight: 200;
    transition: all 0.3s;
}

.footer-cont .footer-lines a:hover,
.footer-cont li a:hover {
    opacity: 0.6;
}

.footer-cont .footer-lines h4 {
    opacity: 0.5;
    margin-bottom: 0.5rem;
    margin-top: 0;
    font-size: 1.5rem;
}

.trademark {
    margin-top: 2rem;
    border-top: solid 1px #ffffff50;
}

.trademark p {
    opacity: 0.5;
    font-size: 0.9rem;
}

[gradient] {
    background: linear-gradient(to right, #7230F5, #54ccff);
    background-clip: text;
    width: fit-content;
    -webkit-text-fill-color: transparent;
}

.banner {
    display: flex;
    flex: 1;
    flex-direction: column-reverse;
    text-decoration: none !important;
    color: black !important;
    overflow: hidden;
    background-color: white;
    box-shadow: var(--inner-glow), var(--shadow-ring, 0 0 0 1px hsla(0deg, 0%, 0%, 0.05)), var(--shadow-sm);
    border-radius: var(--radius-md);
    transition: all 0.3s;
}

.banner:hover {
    background-color: white;
    box-shadow: var(--inner-glow), var(--shadow-ring, 0 0 0 1px hsla(0deg, 0%, 0%, 0.05)), var(--shadow-md);
}

.banner:hover .banner__link {
    transform: scale(1.3);
}

.banner:hover .banner__link i {
    transform: scale(0.7);
}

.banner:hover .banner__link::after {
    height: 100%;
}

.banner:hover .banner__figure {
    transform: scale(1.05);
}

.banner__link {
    position: relative;
    text-decoration: none;
    color: var(--color-primary-dark);
    display: inline-block;
    transition: 0.3s var(--ease-out);
    transform-origin: left bottom;
}

.banner__link i {
    position: relative;
    z-index: 2;
    display: inline-block;
    transition: 0.3s var(--ease-out);
}

.banner__link::after {
    content: "";
    background-color: currentColor;
    height: 2px;
    width: 100%;
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    -webkit-clip-path: inset(0% round var(--radius-sm));
    clip-path: inset(0% round var(--radius-sm));
    transition: 0.3s var(--ease-out);
    opacity: 0.15;
}

.banner__figure {
    height: 0;
    width: 100%;
    padding-bottom: 50%;
    transition: 0.3s var(--ease-out);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.videos {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 2rem;
    margin-top: 3rem;
}

.sidebar {
    padding-top: 2rem;
}

.sidebar-category {
    padding: 0.4rem 1.2rem;
    border-radius: 1rem;
    margin: 0.25rem 2rem;
    text-decoration: none !important;
    color: rgba(0, 0, 0, 0.5);
    transition: all 0.15s var(--ease-out);
    position: relative;
    font-size: 1.5rem;
}

.sidebar-category.active i {
    opacity: 1 !important;
    color: var(--primary-color);
}

.sidebar-category i {
    width: 2.5rem;
    opacity: 0;
    transition: all 0.25s var(--ease-out);
}

.sidebar-category:hover {
    background-color: hsla(250, 100%, 64%, 12%);
    color: rgb(50, 50, 50);
}

.sidebar-category:hover i {
    opacity: 0.8;
    color: var(--primary-color);
}

.sidebar-category.active {
    background-color: hsla(250, 100%, 64%, 20%);
    color: rgb(50, 50, 50);
}

.sidebar-category.active::after {
    content: "";
    position: absolute;
    left: -2rem;
    top: 0;
    width: 0.5rem;
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 0 1rem 1rem 0;
}

.addresses-bar {
    padding: 2rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.btns-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .addresses-bar {
        height: 50%;
        flex-direction: row;
        padding: 2rem 10rem;
    }
}

@media (min-width: 64rem) {
    .banner {
        flex-direction: row;
    }

    .banner.banner--invert {
        flex-direction: row-reverse;
    }

    .banner:not(.banner--invert) .banner__grid {
        flex-direction: row-reverse;
    }

    .banner__figure {
        height: 100%;
        padding-bottom: 0;
        -webkit-clip-path: polygon(100px 0%, 100% 0%, 100% 100%, 50px 100%);
        clip-path: polygon(100px 0%, 100% 0%, 100% 100%, 50px 100%);
        border-radius: var(--radius-md);
    }



    .banner--invert .banner__figure {
        -webkit-clip-path: polygon(0% 0%, calc(100% - 100px) 0%, calc(100% - 50px) 100%, 0% 100%);
        clip-path: polygon(0% 0%, calc(100% - 100px) 0%, calc(100% - 50px) 100%, 0% 100%);
    }

    .banner--invert .banner__link {
        transform-origin: right bottom;
    }

    .banner--invert .banner__text {
        text-align: right;
    }

    .banner:hover .banner__figure {
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

@media (max-width: 968px) {
    .informative-side {
        flex-direction: column-reverse;
        padding: 1rem;
    }

    .informative-side-alternate {
        flex-direction: column;
        padding: 1rem;
    }

    .informative-side img,
    .informative-side-alternate img {
        width: 100%;
        border-radius: 0.5rem 0.5rem 0 0;
    }

    .informative-side .inner-container,
    .informative-side-alternate .inner-container {
        margin: 0;
        border-radius: 0 0 0.5rem 0.5rem;
        padding: 2rem;
    }

    .header {
        background-position: 50% 0%;
        background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../images/bg1.jpg);
        clip-path: polygon(0% 0%, 100% 0%, 100% 93%, 50% 100%, 0% 93%);
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 93%, 50% 100%, 0% 93%);
    }

    .main-cards {
        scroll-snap-type: x mandatory;
        padding-right: 2%;
    }

    .main-cards img {
        min-width: 100%;
    }

    .main-cards .card {
        min-width: 47%;
        scroll-snap-align: center;
    }
}

@media (max-width: 768px) {
    .w-three-quarter {
        width: calc(100% - 5rem) !important;
    }

    .trademark {
        margin-top: 1rem;
    }

    .navbar .container {
        width: 100% !important;
    }

    .informative-main {
        flex-direction: column;
        padding: 0;
    }

    .informative-main img {
        width: 100%;
    }

    .inner-container {
        width: 100%;
        padding: 1rem 0;
    }

    .inner-container h2 {
        margin-bottom: 0.5rem;
        font-size: 3rem;
    }

    .divider {
        margin: 1rem 0;
        margin-bottom: 0.5rem;
        font-size: 0.5rem;
    }

    .main-cards {
        scroll-snap-type: x mandatory;
        padding-right: 2.5%;
    }

    .main-cards img {
        min-width: 100%;
    }

    .main-cards .card {
        min-width: 95%;
        scroll-snap-align: center;
    }

    .header {
        background-position: 50% 0%;
        background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../images/bg1.jpg);
        clip-path: polygon(0% 0%, 100% 0%, 100% 93%, 50% 100%, 0% 93%);
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 93%, 50% 100%, 0% 93%);
    }

    .header .container .header-left {
        width: 100%;
    }
}

/* Product Cards */
.wsk-cp-product {
    background: #fff;
    padding: 15px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    position: relative;
    margin: 1rem;
}

.wsk-cp-product a {
    text-decoration: none!important;
}

.wsk-cp-img {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -o-transform: translate(-50%);
    -khtml-transform: translate(-50%);
    width: 100%;
    padding: 15px;
    transition: all 0.2s ease-in-out;
}

.wsk-cp-img img {
    width: 100%;
    height: auto;
    transition: all 0.2s ease-in-out;
    border-radius: 6px;
}

.wsk-cp-product:hover .wsk-cp-img {
    top: -40px;
}

.wsk-cp-product:hover .wsk-cp-img img {
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}

.wsk-cp-text {
    padding-top: 100%;
    color: rgba(0, 0, 0, 0.85);
}

.wsk-cp-text .category {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    margin-bottom: 45px;
    position: relative;
    transition: all 0.2s ease-in-out;
}

.wsk-cp-text .category>* {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -khtml-transform: translate(-50%, -50%);

}

.wsk-cp-text .category>span {
    padding: 12px 30px;
    border: 1px solid #313131;
    background: #212121;
    color: #fff;
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
    border-radius: 27px;
    transition: all 0.05s ease-in-out;

}

.wsk-cp-product:hover .wsk-cp-text .category>span {
    border-color: #ddd;
    box-shadow: none;
    padding: 11px 28px;
}

.wsk-cp-product:hover .wsk-cp-text .category {
    margin-top: 0px;
}

.wsk-cp-text .title-product {
    text-align: center;
}

.wsk-cp-text .title-product h3 {
    font-size: 20px;
    font-weight: bold;
    margin: 15px auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}

.wsk-cp-text .description-prod p {
    margin: 0;
    font-size: 1.2rem;
}

/* Truncate */
.wsk-cp-text .description-prod {
    text-align: center;
    width: 100%;
    height: auto;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-bottom: 15px;
}

.card-footer {
    padding: 25px 0 5px;
    border-top: 1px solid #ddd;
}

.card-footer:after,
.card-footer:before {
    content: '';
    display: table;
}

.card-footer:after {
    clear: both;
}

.card-footer .wcf-left {
    float: left;

}

.card-footer .wcf-right {
    float: right;
}

.price {
    font-size: 18px;
    font-weight: bold;
}

.buy-btn {
    display: block;
    color: #212121;
    background: none;
    padding: 0;
    text-align: center;
    font-size: 18px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    border-radius: 50%;
    border: 1px solid #212121;
    transition: all 0.2s ease-in-out;
}

.buy-btn:hover,
.buy-btn:active,
.buy-btn:focus {
    cursor: pointer;
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
    text-decoration: none;
}

.buy-btn i {
    transform: rotate(0deg);
    transition: all 0.2s ease-in-out;
}

.buy-btn:hover i {
    transform: rotate(45deg);
    color: #fff;
}

.wsk-btn {
    display: inline-block;
    color: #212121;
    text-align: center;
    font-size: 18px;
    transition: all 0.2s ease-in-out;
    border-color: var(--primary-color);
    background: var(--primary-color);
    padding: 12px 30px;
    border-radius: 27px;
    margin: 0 5px;
}

.wsk-btn:hover,
.wsk-btn:focus,
.wsk-btn:active {
    text-decoration: none;
    color: #fff;
}

@media screen and (max-width: 991px) {
    .wsk-cp-product {
        margin: 40px auto;
    }

    .wsk-cp-product .wsk-cp-img {
        top: -40px;
    }

    .wsk-cp-product .wsk-cp-img img {
        box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
    }

    .wsk-cp-product .wsk-cp-text .category>span {
        border-color: #ddd;
        box-shadow: none;
        padding: 11px 28px;
    }

    .wsk-cp-product .wsk-cp-text .category {
        margin-top: 0px;
    }

    a.buy-btn {
        border-color: var(--primary-color);
        background: var(--primary-color);
        color: #fff;
    }
}

/* Map */
.mapouter {
    position: relative;
    text-align: right;
    height: 50%;
    width: 100%;
}

.gmap_canvas {
    overflow: hidden;
    background: none !important;
    height: 100%;
    width: 100%;
}

.gmap_canvas iframe {
    height: 100%;
    width: 100%;
}

.img-inner-product {
    width: 100%;
    height: auto;
}

.inner-listed ul {
    list-style: disc;
}

.fancy-bg {
    background-color: #eee;
}

.specifications-table {
    width: 100%;
}

.specifications-table tr td {
    padding: 1.25rem!important;
    font-size: 1.3rem;
}

.specifications-table tr td:nth-child(2) {
    font-weight: bold;
    text-align: end;
}

.specifications-table tr:nth-child(odd) {
    background-color: white;
    border-top: 1px solid rgba(128, 128, 128, 0.2);
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.documents-wrapper {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
}

.documents-wrapper a {
    font-weight: lighter;
}

.documents-wrapper i {
    margin-right: 1rem;
}

.add-to-cart {
    margin-left: 1.5rem;
    margin-top: 1rem;
    --color: #fff;
    --icon: var(--color);
    --cart: #fff;
    --dots: #fff;
    --background: #275EFE;
    --shadow: rgba(0, 9, 61, 0.16);
    cursor: pointer;
    position: relative;
    outline: none;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    font-size: 16px;
    border-radius: 22px;
    padding: 12px 32px;
    font-weight: 500;
    line-height: 20px;
    transform: scale(var(--s, 0.97));
    box-shadow: 0 var(--s-y, 4px) var(--s-b, 12px) var(--shadow);
    color: var(--color);
    background: var(--background);
    transition: transform 0.3s, box-shadow 0.3s;
}

.add-to-cart .default {
    padding-left: 16px;
    position: relative;
    opacity: var(--o, 1);
    transform: scale(var(--s, 1));
    transition: transform 0.3s, opacity 0.3s;
    transition-delay: var(--d, 0.3s);
}

.add-to-cart .default:before,
.add-to-cart .default:after {
    content: "";
    width: 2px;
    height: 12px;
    left: 0;
    top: 4px;
    border-radius: 1px;
    background: var(--icon);
    position: absolute;
    transform: rotate(var(--r, 0deg));
    transition: transform 0.25s;
}

.add-to-cart .default:after {
    --r: 90deg;
}

.add-to-cart .success {
    opacity: var(--o, 0);
    transform: translate(-50%, var(--y, 12px));
    position: absolute;
    top: 12px;
    left: 50%;
    transition: opacity 0.3s, transform 0.3s;
    transition-delay: var(--d, 0s);
}

.add-to-cart .dots {
    width: 4px;
    height: 4px;
    top: 20px;
    left: 50%;
    margin-left: -7px;
    border-radius: 2px;
    position: absolute;
    transform-origin: 10px 50%;
    background: var(--dots);
    box-shadow: 5px 0 0 var(--dots), 10px 0 0 var(--dots);
    opacity: var(--o, 0);
    transform: scale(var(--s, 0.4));
    transition: opacity 0.3s, transform 0.3s;
    transition-delay: var(--d, 0s);
}

.add-to-cart .cart {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    border-radius: inherit;
    overflow: hidden;
    mask-image: -webkit-radial-gradient(white, black);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.add-to-cart .cart:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 16px;
    background: var(--background);
    top: 17px;
    right: 100%;
    z-index: 1;
    margin-right: -20px;
    transform: translateX(-18px) rotate(-16deg);
}

.add-to-cart .cart>div {
    top: 13px;
    right: 100%;
    transform: translateX(-18px) rotate(-16deg);
    position: absolute;
    z-index: 2;
    transform-origin: 1px 21px;
}

.add-to-cart .cart>div:before,
.add-to-cart .cart>div:after {
    content: "";
    position: absolute;
    top: var(--t, 4px);
    left: var(--l, 0);
    height: 2px;
    width: var(--w, 18px);
    background: var(--cart);
    border-radius: 1px;
}

.add-to-cart .cart>div:after {
    --w: 16px;
    --t: 14px;
    --l: 1px;
}

.add-to-cart .cart>div>div {
    width: 2px;
    height: var(--h, 15px);
    border-radius: 1px;
    transform: rotate(var(--r, -8deg));
    background: var(--cart);
    position: relative;
}

.add-to-cart .cart>div>div:before,
.add-to-cart .cart>div>div:after {
    content: "";
    position: absolute;
    background: inherit;
}

.add-to-cart .cart>div>div:after {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    bottom: var(--b, -6px);
    left: var(--l, 0);
}

.add-to-cart .cart>div>div:first-child:before {
    border-radius: inherit;
    top: 0;
    right: 0;
    height: 2px;
    width: 6px;
    transform-origin: 5px 1px;
    transform: rotate(16deg);
}

.add-to-cart .cart>div>div:last-child {
    --h: 12px;
    --r: 8deg;
    position: absolute;
    left: 16px;
    bottom: -1px;
}

.add-to-cart .cart>div>div:last-child:after {
    --l: -2px;
    --b: -5px;
}

.add-to-cart.added .default {
    --o: 0;
    --s: .8;
    --d: 0s;
}

.add-to-cart.added .default:before {
    --r: -180deg;
}

.add-to-cart.added .default:after {
    --r: -90deg;
}

.add-to-cart.added .dots {
    --o: 1;
    --s: 1;
    --d: .3s;
    -webkit-animation: dots 2s linear forwards;
    animation: dots 2s linear forwards;
}

.add-to-cart.added .success {
    --o: 1;
    --y: 0;
    --d: 1.8s;
}

.add-to-cart.added .cart:before,
.add-to-cart.added .cart>div {
    -webkit-animation: cart 2s forwards;
    animation: cart 2s forwards;
}

.add-to-cart:not(.added):hover {
    --s: 1;
    --s-y: 8px;
    --s-b: 20px;
}

.add-to-cart:not(.added):active {
    --s: .94;
    --s-y: 2px;
    --s-b: 6px;
}

@-webkit-keyframes cart {

    41%,
    49%,
    57%,
    60% {
        transform: translateX(72px) rotate(0deg);
    }

    40%,
    47%,
    54% {
        transform: translateX(72px) rotate(0deg) translateY(1px);
    }

    100% {
        transform: translateX(180px) rotate(-16deg);
    }
}

@keyframes cart {

    41%,
    49%,
    57%,
    60% {
        transform: translateX(72px) rotate(0deg);
    }

    40%,
    47%,
    54% {
        transform: translateX(72px) rotate(0deg) translateY(1px);
    }

    100% {
        transform: translateX(180px) rotate(-16deg);
    }
}

@-webkit-keyframes dots {
    5% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-20px) rotate(-32deg);
        box-shadow: 5px 0 0 var(--dots), 10px 0 0 var(--dots);
    }

    31% {
        box-shadow: 5px -4px 0 var(--dots), 10px -8px 0 var(--dots);
    }

    32%,
    50% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    45%,
    100% {
        box-shadow: 5px 0 0 var(--dots), 10px 0 0 var(--dots);
    }

    51%,
    100% {
        opacity: 0;
    }
}

@keyframes dots {
    5% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-20px) rotate(-32deg);
        box-shadow: 5px 0 0 var(--dots), 10px 0 0 var(--dots);
    }

    31% {
        box-shadow: 5px -4px 0 var(--dots), 10px -8px 0 var(--dots);
    }

    32%,
    50% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    45%,
    100% {
        box-shadow: 5px 0 0 var(--dots), 10px 0 0 var(--dots);
    }

    51%,
    100% {
        opacity: 0;
    }
}