:root {
    --body-font: "Manrope", serif;
    --title-font: "Manrope", serif;

    --light-color: #F4F7FB;
    --light-color-rgb: 244, 247, 251;
    --dark-color: #0e2b3d; 
    --dark-color-rgb: 14, 43, 61; 
    --one-color: #2c2e8c; 
    --one-color-rgb: 44, 46, 140; 
    --two-color: #666; 
    --two-color-rgb: 102, 102, 102; 
    --three-color: #7b8893; 
    --three-color-rgb: 123, 136, 147; 
    --rounded-1: 12px;
    --green: #28a745;
}
.one-color-bg {
    background-color: var(--one-color);
}
.one-color-text {
    color: var(--one-color);
}
.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
.banner-area .item h1:first-child, .banner-area .item h2:first-child, .banner-area .item h3:first-child, .banner-area .item h4:first-child, .banner-area .item h5:first-child, .banner-area .item h6:first-child {
    animation-delay: .5s;
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes flip-in {
    0% { opacity: 0; transform: rotateX(180deg); }
    35% { opacity: 0; transform: rotateX(120deg); }
    65% { opacity: 0; }
    100% { opacity: 1; transform: rotateX(360deg); }
}
@keyframes flip-out {
    0% { opacity: 1; transform: rotateX(0deg); }
    35% { opacity: 1; transform: rotateX(-40deg); }
    65% { opacity: 0; }
    100% { opacity: 0; transform: rotateX(180deg); }
}
.animate-flip-in {
    animation: flip-in 1.2s ease forwards;
    display: inline-block;
}
.animate-flip-out {
    animation: flip-out 1.2s ease forwards;
    display: inline-block;
}
.perspective {
    perspective: 1000px;
}
body {
    height: 100%;
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    background: #2728621A;
    font-size: 14px;
}
p { 
    margin: 0 0 15px;
    text-transform: none;
    font-weight: 400;
    line-height: 26px; 
    font-family: "Open Sans", sans-serif;
}
a {
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    text-decoration: none;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
}
a:active, a:focus, a:hover {
    color: var(--one-color);
}
.owl-theme .owl-nav {
    margin-top: 0!important;
}
input {
    border: 1px solid #e7e7e7;
    border-radius: inherit;
    box-shadow: inherit;
    min-height: 50px;
}
.owl-theme .owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    width: 100%;
    pointer-events: none;
}
.owl-theme .owl-nav button { 
    background: transparent!important;
    color: #2c2e8c !important;
    border-radius: 50%;
    font-size: 40px !important;
    pointer-events: auto;
    transition: all 0.3s ease;
}
.owl-theme .owl-nav button:hover {
  background: transparent !important;
}
.bg-gray {
    background-color: #f3f7fd;
}
.categories-grid svg circle {
  background: radial-gradient(circle at center, transparent 33%, rgba(19, 12, 14, 0.65) 69%, rgba(19, 12, 14, 0.70) 72%, rgba(19, 12, 14, 0.95) 100%) !important;
}
@keyframes scan {
  0% { opacity: 0.3; transform: translateY(-10px); }
  50% { opacity: 1; }
  100% { opacity: 0.3; transform: translateY(10px); }
}

.single-item.group:hover svg path {
    fill: var(--one-color) !important;
    transition: all 0.4s ease;
}

@keyframes icon-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.single-item.group:hover .icon svg {
    animation: icon-bounce 2s infinite ease-in-out;
}
span.dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #d1d5db;
}