/*-----------------------------------------------------------------------------------

Template Name: EventiQ - Powering Memorable Experiences
Author: Or-Factor
Support: support@orfactor.com
Description: EventiQ - Powering Memorable Experiences
Version: 1.0

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

-----------------
01. THEME CSS
-----------------
1.1 Common Classes

-----------------
02. COMPONENTS css
-----------------
2.1 Back to top
2.2 Buttons
2.3 Animation
2.4 Preloader
2.5 Background
2.6 Nice Select
2.7 Pagination
2.8 Offcanvas
2.9 Breadcrumb
2.10 Accordion
2.11 Tab
2.12 Section Title

-----------------
03. HEADER CSS
-----------------
3.1 Header Style 1


---------------------------------
04. MENU CSS
---------------------------------
4.1 Main menu css
4.2 Mobilemenu css

---------------------------------
05. BLOG CSS
---------------------------------
5.1 Postbox css
5.2 Sidebar css
5.3 Blog css

---------------------------------
06. FOOTER CSS
---------------------------------
6.1 Footer Style 1


---------------------------------
07. PAGES CSS
---------------------------------
7.1 Hero css
7.2 About css
7.3 Feature css
7.4 Team css
7.6 Video css
7.7 Cta css
7.8 Faq css
7.9 Testimonial css
7.10 Newsletter css
7.11 Contact css

**********************************************/
/*----------------------------------------*/
/* 1.1 Theme Default
/*----------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Solitreo&display=swap");

.back-to-top-wrapper,
a,
button,
p,
input,
select,
textarea,
li,
.transition-3 {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

/* transform */
:root {
    /**
@font family declaration
*/
    --ot-title-font: "Poppins", sans-serif;
    --ot-body-font: "Poppins", sans-serif;
    --ot-style-font: "Poppins", sans-serif;
    --ot-solitreo-font: "Solitreo", cursive;
    --ot-icon-font: "Font Awesome 6 Free";
    /**
@ripple declaration
*/
    --ot-ripple-ani-duration: 2s;
    /**
@color declaration
*/
    --ot-theme-primary: #fc097c;
    --ot-theme-secondary: #e6521f;
    --ot-theme-yellow: #facc15;
    --ot-theme-purple: #a855f7;
    --ot-theme-green: #34c759;
    --ot-title-primary: #212124;
    --ot-border-primary: #bebebe;
    --ot-body-primary: #696969;
    --ot-smoke-primary: #e7e2ff;
    --ot-white-primary: #fdf9f8;
    --ot-white-common: #ffffff;
    --ot-placeholder: #555c6a;
    --ot-black-common: #000000;
    --ot-error-color: #dc3545;
    --ot-dark-pink: #b40055;
}

.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    max-width: 1566px;
    --bs-gutter-x: 30px;
}

.container-1240 {
    max-width: 1270px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* border: 1px solid #f11; */
}

html {
    scroll-behavior: smooth;
}

/*---------------------------------
typography css start
---------------------------------*/
body {
    font-size: 16px;
    line-height: 26px;
    font-weight: normal;
    color: var(--ot-body-primary);
    font-family: var(--ot-body-font);
    overflow-x: hidden;
    word-break: break-word;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0px;
    font-weight: 500;
    line-height: 1.2;
    -webkit-transition: color 0.3s ease-out;
    -moz-transition: color 0.3s ease-out;
    -ms-transition: color 0.3s ease-out;
    -o-transition: color 0.3s ease-out;
    transition: color 0.3s ease-out;
    color: var(--ot-black-common);
    font-family: var(--ot-title-font);
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 16px;
}

ul {
    margin: 0px;
    padding: 0px;
}

p {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 15px;
    line-height: 26px;
    font-family: var(--ot-body-font);
    color: var(--ot-body-primary);
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none;
}

a:focus,
.button:focus {
    text-decoration: none;
    outline: none;
}

a:focus,
a:hover {
    text-decoration: none;
}

a,
button {
    color: inherit;
    outline: none;
    border: none;
    background: transparent;
}

button:hover {
    cursor: pointer;
}

button:focus {
    outline: 0;
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
textarea {
    outline: none;
    height: 50px;
    width: 100%;
    line-height: 50px;
    font-size: 16px;
    padding-left: 20px;
    padding-right: 40px;
    color: var(--ot-body-primary);
    border: 1px solid var(--ot-border-primary);
    background: none;
    resize: none;
    scroll-behavior: unset;
}

input[type="text"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder,
input[type="tel"]::-webkit-input-placeholder,
input[type="number"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder,
input[type="url"]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--ot-body-primary);
}

input[type="text"]::-moz-placeholder,
input[type="email"]::-moz-placeholder,
input[type="tel"]::-moz-placeholder,
input[type="number"]::-moz-placeholder,
input[type="password"]::-moz-placeholder,
input[type="url"]::-moz-placeholder,
textarea::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--ot-body-primary);
}

input[type="text"]:-moz-placeholder,
input[type="email"]:-moz-placeholder,
input[type="tel"]:-moz-placeholder,
input[type="number"]:-moz-placeholder,
input[type="password"]:-moz-placeholder,
input[type="url"]:-moz-placeholder,
textarea:-moz-placeholder {
    /* Firefox 4-18 */
    color: var(--ot-body-primary);
}

input[type="text"]:-ms-input-placeholder,
input[type="email"]:-ms-input-placeholder,
input[type="tel"]:-ms-input-placeholder,
input[type="number"]:-ms-input-placeholder,
input[type="password"]:-ms-input-placeholder,
input[type="url"]:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    /* IE 10+ Edge*/
    color: var(--ot-body-primary);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
input[type="number"]::placeholder,
input[type="password"]::placeholder,
input[type="url"]::placeholder,
textarea::placeholder {
    /* MODERN BROWSER */
    color: var(--ot-body-primary);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
textarea:focus {
    border-color: var(--ot-theme-primary);
    background: none;
}

input[type="text"]:focus::placeholder,
input[type="email"]:focus::placeholder,
input[type="tel"]:focus::placeholder,
input[type="number"]:focus::placeholder,
input[type="password"]:focus::placeholder,
input[type="url"]:focus::placeholder,
textarea:focus::placeholder {
    opacity: 0;
}

input[type="email"] {
    text-transform: lowercase;
}

textarea {
    line-height: 1.4;
    padding-top: 17px;
    padding-bottom: 17px;
}

input[type="color"] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    height: 100%;
    width: 100%;
    padding: 0;
    border-radius: 50%;
}

.form-control:focus {
    outline: 0;
    box-shadow: none;
}

input:focus {
    box-shadow: none;
}

*::-moz-selection {
    background: var(--ot-black-common);
    color: var(--ot-white-common);
    text-shadow: none;
}

*::-moz-selection {
    background: var(--ot-black-common);
    color: var(--ot-white-common);
    text-shadow: none;
}

*::selection {
    background: var(--ot-black-common);
    color: var(--ot-white-common);
    text-shadow: none;
}

*::-moz-placeholder {
    color: var(--ot-black-common);
    font-size: 14px;
    opacity: 1;
}

*::placeholder {
    color: var(--ot-black-common);
    font-size: 14px;
    opacity: 1;
}

.fw-4 {
    font-weight: 400;
}

.fw-5 {
    font-weight: 500;
}

.fw-6 {
    font-weight: 600;
}

.fw-7 {
    font-weight: 700;
}

.fz-14 {
    font-size: 14px;
}

.fz-15 {
    font-size: 15px;
}

.fz-16 {
    font-size: 16px;
}

.fz-18 {
    font-size: 18px;
}

.ot-lh-1 {
    line-height: 1;
}

.ot-light-text {
    font-weight: 500;
}

.ot-line-black {
    display: inline;
    transition: all 0.3s linear;
    background-repeat: no-repeat;
    background-size:
        0% 1px,
        0 1px;
    background-position:
        100% 100%,
        0 100%;
    background-image:
        linear-gradient(#141820, #141820), linear-gradient(#141820, #141820);
}

.ot-line-black:hover {
    background-size:
        0% 1px,
        100% 1px;
}

.ot-line-white {
    display: inline;
    transition: all 0.3s linear;
    background-repeat: no-repeat;
    background-size:
        0% 1px,
        0 1px;
    background-position:
        100% 100%,
        0 100%;
    background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
}

.ot-line-white:hover {
    background-size:
        0% 1px,
        100% 1px;
}

.ot-net-img {
    position: relative;
}

.ot-net-img > .net-shape {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

.ot-space {
    padding-top: 120px;
    padding-bottom: 120px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-space {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

.ot-space-extra {
    padding-top: 140px;
    padding-bottom: 140px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-space-extra {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

.ot-space-sm {
    padding-top: 110px;
    padding-bottom: 110px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-space-sm {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

.ot-space-sm-top {
    padding-top: 110px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-space-sm-top {
        padding-top: 80px;
    }
}

.ot-space-sm-bottom {
    padding-bottom: 110px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-space-sm-bottom {
        padding-bottom: 80px;
    }
}

.ot-space-sm2 {
    padding-top: 100px;
    padding-bottom: 100px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-space-sm2 {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

.ot-space-sm3 {
    padding-top: 90px;
    padding-bottom: 90px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-space-sm3 {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

.ot-space-top-sm3 {
    padding-top: 90px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-space-top-sm3 {
        padding-top: 80px;
    }
}

.ot-space-bottom-sm3 {
    padding-bottom: 90px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-space-bottom-sm3 {
        padding-bottom: 80px;
    }
}

.ot-space-top {
    padding-top: 120px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-space-top {
        padding-top: 80px;
    }
}

.ot-space-bottom {
    padding-bottom: 120px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-space-bottom {
        padding-bottom: 80px;
    }
}

.ot-space-extra-top {
    padding-top: 140px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-space-extra-top {
        padding-top: 80px;
    }
}

.ot-space-extra-bottom {
    padding-bottom: 140px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-space-extra-bottom {
        padding-bottom: 80px;
    }
}

.ot-space-extra-bottom.extra-sm-top {
    padding-top: 110px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-space-extra-bottom.extra-sm-top {
        padding-top: 80px;
    }
}

.ot-space-extra-bottom.extra-sm2-top {
    padding-top: 100px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-space-extra-bottom.extra-sm2-top {
        padding-top: 80px;
    }
}

.ot-space.extra-sm-top {
    padding-top: 110px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-space.extra-sm-top {
        padding-top: 80px;
    }
}

.ot-space.extra-sm-top2 {
    padding-top: 50px;
}

.ot-space-extra-bottom {
    padding-bottom: 140px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-space-extra-bottom {
        padding-bottom: 80px;
    }
}

.ot-space-extra-bottom.extra-bottom2 {
    padding-bottom: 110px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-space-extra-bottom.extra-bottom2 {
        padding-bottom: 80px;
    }
}

.ot-space-sm-extra-top {
    padding-top: 80px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-space-sm-extra-top {
        padding-top: 0px;
    }
}

.ot-space-sm-extra-bottom {
    padding-bottom: 80px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-space-sm-extra-bottom {
        padding-bottom: 0px;
    }
}

.ot-space-large {
    padding-top: 235px;
    padding-bottom: 100px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-space-large {
        padding-top: 215px;
        padding-bottom: 80px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-space-large {
        padding-top: 150px;
    }
}

.ot-space-large2 {
    padding-top: 280px;
    padding-bottom: 135px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-space-large2 {
        padding-top: 215px;
        padding-bottom: 80px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-space-large2 {
        padding-top: 150px;
    }
}

.ot-space-extra-2 {
    padding-top: 120px;
    padding-bottom: 220px;
}

@media only screen and (min-width: 320px) and (max-width: 1199px) {
    .ot-space-extra-2 {
        padding-top: 80px;
        padding-bottom: 180px;
    }
}

.ot-bg-top-center {
    background-repeat: no-repeat;
    background-size: auto;
    background-position: top center;
}

/*---------------------------------
1.1 Common Classes
---------------------------------*/
.w-100 img {
    width: 100%;
}

.m-img img {
    max-width: 100%;
}

.overflow-hidden {
    overflow: hidden;
}

.clear {
    clear: both;
}

.z-index-2 {
    position: relative;
    z-index: 2;
}

.gx-0 {
    --bs-gutter-x: 0px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .gx-0 {
        --bs-gutter-x: 24px;
    }
}

.gx-8 {
    --bs-gutter-x: 8px;
}

.gx-10 {
    --bs-gutter-x: 10px;
}

.gx-15 {
    --bs-gutter-x: 15px;
}

.gx-20 {
    --bs-gutter-x: 20px;
}

.gx-30 {
    --bs-gutter-x: 30px;
}

.gx-35 {
    --bs-gutter-x: 35px;
}

.gx-40 {
    --bs-gutter-x: 40px;
}

.gx-50 {
    --bs-gutter-x: 50px;
}

.gx-60 {
    --bs-gutter-x: 60px;
}

.gx-65 {
    --bs-gutter-x: 65px;
}

.gy-10 {
    --bs-gutter-y: 10px;
}

.gy-15 {
    --bs-gutter-y: 15px;
}

.gy-20 {
    --bs-gutter-y: 20px;
}

.gy-25 {
    --bs-gutter-y: 25px;
}

.gy-24 {
    --bs-gutter-y: 24px;
}

.gy-30 {
    --bs-gutter-y: 30px;
}

.gy-35 {
    --bs-gutter-y: 35px;
}

.gy-40 {
    --bs-gutter-y: 40px;
}

.gy-50 {
    --bs-gutter-y: 50px;
}

.gy-60 {
    --bs-gutter-y: 60px;
}

.gy-65 {
    --bs-gutter-y: 65px;
}

.overflow-y-visible {
    overflow-x: hidden;
    overflow-y: visible;
}

.p-relative {
    position: relative;
}

.p-absolute {
    position: absolute;
}

.include-bg {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* dropcap */
.ot-dropcap::first-letter {
    float: left;
    width: 65px;
    height: 85px;
    font-size: 90px;
    line-height: 0.8;
    font-weight: 500;
    margin-right: 5px;
    text-align: center;
    line-height: inherit;
    text-transform: capitalize;
    color: var(--ot-white-common);
    font-family: var(--ot-ff-body);
}

.body-overlay {
    background-color: var(--ot-black-common);
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 99;
    left: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

.body-overlay:hover {
    cursor: url(../img/icon/close.png), pointer;
}

.body-overlay.opend {
    opacity: 0.7;
    visibility: visible;
}

.ot-bold-text {
    position: relative;
    font-weight: 600;
    color: var(--ot-title-primary);
}

.ot-line-hover {
    position: relative;
    display: inline-block;
    display: inline;
    transition: all 0.3s linear;
    background-repeat: no-repeat;
    background-size:
        0% 1px,
        0 1px;
    background-position:
        100% 100%,
        0 100%;
    background-image:
        linear-gradient(currentcolor, currentcolor),
        linear-gradient(currentcolor, currentcolor);
}

.ot-line-hover.purple {
    background-position:
        100% 100%,
        0 75%;
    background-image:
        linear-gradient(currentcolor, currentcolor),
        linear-gradient(currentcolor, currentcolor);
}

.ot-line-hover.theme {
    background-position:
        100% 100%,
        0 75%;
    background-image:
        linear-gradient(currentcolor, currentcolor),
        linear-gradient(currentcolor, currentcolor);
}

.ot-line-hover.green {
    background-position:
        100% 100%,
        0 75%;
    background-image:
        linear-gradient(currentcolor, currentcolor),
        linear-gradient(currentcolor, currentcolor);
}

.ot-line-hover.orange {
    background-image:
        linear-gradient(currentcolor, currentcolor),
        linear-gradient(currentcolor, currentcolor);
}

.ot-line-hover:hover {
    background-size:
        0% 1px,
        100% 1px;
}

.ot-line-hover:hover {
    background-size:
        0% 1px,
        100% 1px;
}

.ot-img-hover {
    position: relative;
    overflow: hidden;
}

.ot-img-hover::before {
    position: absolute;
    top: 0;
    left: -80%;
    z-index: 2;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
    background: -o-linear-gradient(
        left,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 100%
    );
    background: -webkit-gradient(
        linear,
        left top,
        right top,
        from(rgba(255, 255, 255, 0)),
        to(rgba(255, 255, 255, 0.3))
    );
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 100%
    );
    -webkit-transform: skewX(-25deg);
    -ms-transform: skewX(-25deg);
    transform: skewX(-25deg);
}

.ot-img-hover:hover::before {
    -webkit-animation: shine 1s;
    animation: shine 1s;
}

.ot-italic {
    font-style: italic;
}

.ot-italic-light {
    font-style: italic;
    font-weight: 400;
}

.ot-body-shape-left,
.ot-body-shape-right {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
}

.ot-body-shape-left {
    bottom: auto;
    top: 0;
    right: auto;
    left: 0;
}

.ot-body-shape-left.blog-shape {
    top: auto;
    bottom: 0;
}

.ot-bg-style {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.bg-mask {
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
}

svg path.line-1 {
    stroke-dasharray: 2300;
    stroke-dashoffset: 3500;
    animation: dash 4s linear forwards infinite;
}

/*---------------------------------
1.3 Default Spacing
---------------------------------*/
.mt-5 {
    margin-top: 5px !important;
}

.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-25 {
    margin-top: 25px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-35 {
    margin-top: 35px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-45 {
    margin-top: 45px;
}

.mt-50 {
    margin-top: 50px;
}

.mt-55 {
    margin-top: 55px;
}

.mt-60 {
    margin-top: 60px;
}

.mt-65 {
    margin-top: 65px;
}

.mt-70 {
    margin-top: 70px;
}

.mt-75 {
    margin-top: 75px;
}

.mt-80 {
    margin-top: 80px;
}

.mt-85 {
    margin-top: 85px;
}

.mt-90 {
    margin-top: 90px;
}

.mt-95 {
    margin-top: 95px;
}

.mt-100 {
    margin-top: 100px;
}

.mt-105 {
    margin-top: 105px;
}

.mt-110 {
    margin-top: 110px;
}

.mt-115 {
    margin-top: 115px;
}

.mt-120 {
    margin-top: 120px;
}

.mt-125 {
    margin-top: 125px;
}

.mt-130 {
    margin-top: 130px;
}

.mt-135 {
    margin-top: 135px;
}

.mt-140 {
    margin-top: 140px;
}

.mt-145 {
    margin-top: 145px;
}

.mt-150 {
    margin-top: 150px;
}

.mt-155 {
    margin-top: 155px;
}

.mt-160 {
    margin-top: 160px;
}

.mt-165 {
    margin-top: 165px;
}

.mt-170 {
    margin-top: 170px;
}

.mt-175 {
    margin-top: 175px;
}

.mt-180 {
    margin-top: 180px;
}

.mt-185 {
    margin-top: 185px;
}

.mt-190 {
    margin-top: 190px;
}

.mt-195 {
    margin-top: 195px;
}

.mt-200 {
    margin-top: 200px;
}

.mb-5 {
    margin-bottom: 5px !important;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-25 {
    margin-bottom: 25px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-35 {
    margin-bottom: 35px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-45 {
    margin-bottom: 45px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mb-55 {
    margin-bottom: 55px;
}

.mb-60 {
    margin-bottom: 60px;
}

.mb-65 {
    margin-bottom: 65px;
}

.mb-70 {
    margin-bottom: 70px;
}

.mb-75 {
    margin-bottom: 75px;
}

.mb-80 {
    margin-bottom: 80px;
}

.mb-85 {
    margin-bottom: 85px;
}

.mb-90 {
    margin-bottom: 90px;
}

.mb-95 {
    margin-bottom: 95px;
}

.mb-100 {
    margin-bottom: 100px;
}

.mb-105 {
    margin-bottom: 105px;
}

.mb-110 {
    margin-bottom: 110px;
}

.mb-115 {
    margin-bottom: 115px;
}

.mb-120 {
    margin-bottom: 120px;
}

.mb-125 {
    margin-bottom: 125px;
}

.mb-130 {
    margin-bottom: 130px;
}

.mb-135 {
    margin-bottom: 135px;
}

.mb-140 {
    margin-bottom: 140px;
}

.mb-145 {
    margin-bottom: 145px;
}

.mb-150 {
    margin-bottom: 150px;
}

.mb-155 {
    margin-bottom: 155px;
}

.mb-160 {
    margin-bottom: 160px;
}

.mb-165 {
    margin-bottom: 165px;
}

.mb-170 {
    margin-bottom: 170px;
}

.mb-175 {
    margin-bottom: 175px;
}

.mb-180 {
    margin-bottom: 180px;
}

.mb-185 {
    margin-bottom: 185px;
}

.mb-190 {
    margin-bottom: 190px;
}

.mb-195 {
    margin-bottom: 195px;
}

.mb-200 {
    margin-bottom: 200px;
}

.ml-5 {
    margin-left: 5px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-15 {
    margin-left: 15px;
}

.ml-20 {
    margin-left: 20px;
}

.ml-25 {
    margin-left: 25px;
}

.ml-30 {
    margin-left: 30px;
}

.ml-35 {
    margin-left: 35px;
}

.ml-40 {
    margin-left: 40px;
}

.ml-45 {
    margin-left: 45px;
}

.ml-50 {
    margin-left: 50px;
}

.ml-55 {
    margin-left: 55px;
}

.ml-60 {
    margin-left: 60px;
}

.ml-65 {
    margin-left: 65px;
}

.ml-70 {
    margin-left: 70px;
}

.ml-75 {
    margin-left: 75px;
}

.ml-80 {
    margin-left: 80px;
}

.ml-85 {
    margin-left: 85px;
}

.ml-90 {
    margin-left: 90px;
}

.ml-95 {
    margin-left: 95px;
}

.ml-100 {
    margin-left: 100px;
}

.ml-105 {
    margin-left: 105px;
}

.ml-110 {
    margin-left: 110px;
}

.ml-115 {
    margin-left: 115px;
}

.ml-120 {
    margin-left: 120px;
}

.ml-125 {
    margin-left: 125px;
}

.ml-130 {
    margin-left: 130px;
}

.ml-135 {
    margin-left: 135px;
}

.ml-140 {
    margin-left: 140px;
}

.ml-145 {
    margin-left: 145px;
}

.ml-150 {
    margin-left: 150px;
}

.ml-155 {
    margin-left: 155px;
}

.ml-160 {
    margin-left: 160px;
}

.ml-165 {
    margin-left: 165px;
}

.ml-170 {
    margin-left: 170px;
}

.ml-175 {
    margin-left: 175px;
}

.ml-180 {
    margin-left: 180px;
}

.ml-185 {
    margin-left: 185px;
}

.ml-190 {
    margin-left: 190px;
}

.ml-195 {
    margin-left: 195px;
}

.ml-200 {
    margin-left: 200px;
}

.mr-5 {
    margin-right: 5px;
}

.mr-10 {
    margin-right: 10px;
}

.mr-15 {
    margin-right: 15px;
}

.mr-20 {
    margin-right: 20px;
}

.mr-25 {
    margin-right: 25px;
}

.mr-30 {
    margin-right: 30px;
}

.mr-35 {
    margin-right: 35px;
}

.mr-40 {
    margin-right: 40px;
}

.mr-45 {
    margin-right: 45px;
}

.mr-50 {
    margin-right: 50px;
}

.mr-55 {
    margin-right: 55px;
}

.mr-60 {
    margin-right: 60px;
}

.mr-65 {
    margin-right: 65px;
}

.mr-70 {
    margin-right: 70px;
}

.mr-75 {
    margin-right: 75px;
}

.mr-80 {
    margin-right: 80px;
}

.mr-85 {
    margin-right: 85px;
}

.mr-90 {
    margin-right: 90px;
}

.mr-95 {
    margin-right: 95px;
}

.mr-100 {
    margin-right: 100px;
}

.mr-105 {
    margin-right: 105px;
}

.mr-110 {
    margin-right: 110px;
}

.mr-115 {
    margin-right: 115px;
}

.mr-120 {
    margin-right: 120px;
}

.mr-125 {
    margin-right: 125px;
}

.mr-130 {
    margin-right: 130px;
}

.mr-135 {
    margin-right: 135px;
}

.mr-140 {
    margin-right: 140px;
}

.mr-145 {
    margin-right: 145px;
}

.mr-150 {
    margin-right: 150px;
}

.mr-155 {
    margin-right: 155px;
}

.mr-160 {
    margin-right: 160px;
}

.mr-165 {
    margin-right: 165px;
}

.mr-170 {
    margin-right: 170px;
}

.mr-175 {
    margin-right: 175px;
}

.mr-180 {
    margin-right: 180px;
}

.mr-185 {
    margin-right: 185px;
}

.mr-190 {
    margin-right: 190px;
}

.mr-195 {
    margin-right: 195px;
}

.mr-200 {
    margin-right: 200px;
}

.pt-5 {
    padding-top: 5px !important;
}

.pt-10 {
    padding-top: 10px;
}

.pt-15 {
    padding-top: 15px;
}

.pt-20 {
    padding-top: 20px;
}

.pt-25 {
    padding-top: 25px;
}

.pt-30 {
    padding-top: 30px;
}

.pt-35 {
    padding-top: 35px;
}

.pt-40 {
    padding-top: 40px;
}

.pt-45 {
    padding-top: 45px;
}

.pt-50 {
    padding-top: 50px;
}

.pt-55 {
    padding-top: 55px;
}

.pt-60 {
    padding-top: 60px;
}

.pt-65 {
    padding-top: 65px;
}

.pt-70 {
    padding-top: 70px;
}

.pt-75 {
    padding-top: 75px;
}

.pt-80 {
    padding-top: 80px;
}

.pt-85 {
    padding-top: 85px;
}

.pt-90 {
    padding-top: 90px;
}

.pt-95 {
    padding-top: 95px;
}

.pt-100 {
    padding-top: 100px;
}

.pt-105 {
    padding-top: 105px;
}

.pt-110 {
    padding-top: 110px;
}

.pt-115 {
    padding-top: 115px;
}

.pt-120 {
    padding-top: 120px;
}

.pt-125 {
    padding-top: 125px;
}

.pt-130 {
    padding-top: 130px;
}

.pt-135 {
    padding-top: 135px;
}

.pt-140 {
    padding-top: 140px;
}

.pt-145 {
    padding-top: 145px;
}

.pt-150 {
    padding-top: 150px;
}

.pt-155 {
    padding-top: 155px;
}

.pt-160 {
    padding-top: 160px;
}

.pt-165 {
    padding-top: 165px;
}

.pt-170 {
    padding-top: 170px;
}

.pt-175 {
    padding-top: 175px;
}

.pt-180 {
    padding-top: 180px;
}

.pt-185 {
    padding-top: 185px;
}

.pt-190 {
    padding-top: 190px;
}

.pt-195 {
    padding-top: 195px;
}

.pt-200 {
    padding-top: 200px;
}

.pt-245 {
    padding-top: 245px;
}

.pt-250 {
    padding-top: 250px;
}

.pt-305 {
    padding-top: 305px;
}

.pb-5 {
    padding-bottom: 5px !important;
}

.pb-10 {
    padding-bottom: 10px;
}

.pb-15 {
    padding-bottom: 15px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pb-25 {
    padding-bottom: 25px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pb-35 {
    padding-bottom: 35px;
}

.pb-40 {
    padding-bottom: 40px;
}

.pb-45 {
    padding-bottom: 45px;
}

.pb-50 {
    padding-bottom: 50px;
}

.pb-55 {
    padding-bottom: 55px;
}

.pb-60 {
    padding-bottom: 60px;
}

.pb-65 {
    padding-bottom: 65px;
}

.pb-70 {
    padding-bottom: 70px;
}

.pb-75 {
    padding-bottom: 75px;
}

.pb-80 {
    padding-bottom: 80px;
}

.pb-85 {
    padding-bottom: 85px;
}

.pb-90 {
    padding-bottom: 90px;
}

.pb-95 {
    padding-bottom: 95px;
}

.pb-100 {
    padding-bottom: 100px;
}

.pb-105 {
    padding-bottom: 105px;
}

.pb-110 {
    padding-bottom: 110px;
}

.pb-115 {
    padding-bottom: 115px;
}

.pb-120 {
    padding-bottom: 120px;
}

.pb-125 {
    padding-bottom: 125px;
}

.pb-130 {
    padding-bottom: 130px;
}

.pb-135 {
    padding-bottom: 135px;
}

.pb-140 {
    padding-bottom: 140px;
}

.pb-145 {
    padding-bottom: 145px;
}

.pb-150 {
    padding-bottom: 150px;
}

.pb-155 {
    padding-bottom: 155px;
}

.pb-160 {
    padding-bottom: 160px;
}

.pb-165 {
    padding-bottom: 165px;
}

.pb-170 {
    padding-bottom: 170px;
}

.pb-175 {
    padding-bottom: 175px;
}

.pb-180 {
    padding-bottom: 180px;
}

.pb-185 {
    padding-bottom: 185px;
}

.pb-190 {
    padding-bottom: 190px;
}

.pb-195 {
    padding-bottom: 195px;
}

.pb-200 {
    padding-bottom: 200px;
}

.pb-250 {
    padding-bottom: 250px;
}

.pl-5 {
    padding-left: 5px;
}

.pl-10 {
    padding-left: 10px;
}

.pl-15 {
    padding-left: 15px;
}

.pl-20 {
    padding-left: 20px;
}

.pl-25 {
    padding-left: 25px;
}

.pl-30 {
    padding-left: 30px;
}

.pl-35 {
    padding-left: 35px;
}

.pl-40 {
    padding-left: 40px;
}

.pl-45 {
    padding-left: 45px;
}

.pl-50 {
    padding-left: 50px;
}

.pl-55 {
    padding-left: 55px;
}

.pl-60 {
    padding-left: 60px;
}

.pl-65 {
    padding-left: 65px;
}

.pl-70 {
    padding-left: 70px;
}

.pl-75 {
    padding-left: 75px;
}

.pl-80 {
    padding-left: 80px;
}

.pl-85 {
    padding-left: 85px;
}

.pl-90 {
    padding-left: 90px;
}

.pl-95 {
    padding-left: 95px;
}

.pl-100 {
    padding-left: 100px;
}

.pl-105 {
    padding-left: 105px;
}

.pl-110 {
    padding-left: 110px;
}

.pl-115 {
    padding-left: 115px;
}

.pl-120 {
    padding-left: 120px;
}

.pl-125 {
    padding-left: 125px;
}

.pl-130 {
    padding-left: 130px;
}

.pl-135 {
    padding-left: 135px;
}

.pl-140 {
    padding-left: 140px;
}

.pl-145 {
    padding-left: 145px;
}

.pl-150 {
    padding-left: 150px;
}

.pl-155 {
    padding-left: 155px;
}

.pl-160 {
    padding-left: 160px;
}

.pl-165 {
    padding-left: 165px;
}

.pl-170 {
    padding-left: 170px;
}

.pl-175 {
    padding-left: 175px;
}

.pl-180 {
    padding-left: 180px;
}

.pl-185 {
    padding-left: 185px;
}

.pl-190 {
    padding-left: 190px;
}

.pl-195 {
    padding-left: 195px;
}

.pl-200 {
    padding-left: 200px;
}

.pr-5 {
    padding-right: 5px;
}

.pr-10 {
    padding-right: 10px;
}

.pr-15 {
    padding-right: 15px;
}

.pr-20 {
    padding-right: 20px;
}

.pr-25 {
    padding-right: 25px;
}

.pr-30 {
    padding-right: 30px;
}

.pr-35 {
    padding-right: 35px;
}

.pr-40 {
    padding-right: 40px;
}

.pr-45 {
    padding-right: 45px;
}

.pr-50 {
    padding-right: 50px;
}

.pr-55 {
    padding-right: 55px;
}

.pr-60 {
    padding-right: 60px;
}

.pr-65 {
    padding-right: 65px;
}

.pr-70 {
    padding-right: 70px;
}

.pr-75 {
    padding-right: 75px;
}

.pr-80 {
    padding-right: 80px;
}

.pr-85 {
    padding-right: 85px;
}

.pr-90 {
    padding-right: 90px;
}

.pr-95 {
    padding-right: 95px;
}

.pr-100 {
    padding-right: 100px;
}

.pr-105 {
    padding-right: 105px;
}

.pr-110 {
    padding-right: 110px;
}

.pr-115 {
    padding-right: 115px;
}

.pr-120 {
    padding-right: 120px;
}

.pr-125 {
    padding-right: 125px;
}

.pr-130 {
    padding-right: 130px;
}

.pr-135 {
    padding-right: 135px;
}

.pr-140 {
    padding-right: 140px;
}

.pr-145 {
    padding-right: 145px;
}

.pr-150 {
    padding-right: 150px;
}

.pr-155 {
    padding-right: 155px;
}

.pr-160 {
    padding-right: 160px;
}

.pr-165 {
    padding-right: 165px;
}

.pr-170 {
    padding-right: 170px;
}

.pr-175 {
    padding-right: 175px;
}

.pr-180 {
    padding-right: 180px;
}

.pr-185 {
    padding-right: 185px;
}

.pr-190 {
    padding-right: 190px;
}

.pr-195 {
    padding-right: 195px;
}

.pr-200 {
    padding-right: 200px;
}

/*----------------------------------------*/
/* 2.1 Back to top
/*----------------------------------------*/
.back-to-top-wrapper {
    position: fixed;
    right: 30px;
    bottom: 0;
    height: 44px;
    width: 44px;
    cursor: pointer;
    display: block;
    border-radius: 50%;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
}

@media (max-width: 575px) {
    .back-to-top-wrapper {
        right: 20px;
        bottom: 20px;
    }
}

.back-to-top-wrapper.back-to-top-btn-show {
    visibility: visible;
    opacity: 1;
    bottom: 50px;
}

.back-to-top-btn {
    display: inline-block;
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 24px;
    text-align: center;
    background: var(--ot-theme-primary);
    box-shadow: 0px 8px 16px rgba(3, 4, 28, 0.3);
    color: var(--ot-white-common);
    border-radius: 50%;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.back-to-top-btn svg {
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px);
}

.back-to-top-btn:hover {
    color: var(--ot-black-common);
    background-color: var(--ot-white-common);
    -webkit-transform: translateY(-4px);
    -moz-transform: translateY(-4px);
    -ms-transform: translateY(-4px);
    -o-transform: translateY(-4px);
    transform: translateY(-4px);
}

/*----------------------------------------*/
/* 2.2 Buttons
/*----------------------------------------*/
.ot-btn-primary {
    font-size: 16px;
    font-weight: 600;
    position: relative;
    padding: 13.5px 37px;
    display: inline-block;
    color: var(--ot-white-common);
    background: var(--ot-theme-primary);
    text-transform: capitalize;
    overflow: hidden;
    z-index: 1;
    border-radius: 50px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.ot-btn-primary:focus {
    outline: 0;
}

.ot-btn-primary::before {
    content: "";
    position: absolute;
    height: 56px;
    width: 56px;
    top: -24px;
    left: -18px;
    background: var(--ot-dark-pink);
    border-radius: 50%;
    transform: scale(1);
    transform-origin: top left;
    transition: all 0.5s ease-out 0s;
    z-index: -1;
}

.ot-btn-primary .ot-btn-icon {
    margin-left: 8px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.ot-btn-primary:hover {
    color: var(--ot-white-common);
}

.ot-btn-primary:hover::before {
    height: 450px;
    width: 450px;
    left: -100px;
    top: -50px;
    transform: scale(1);
}

.ot-btn-primary.black-btn {
    color: var(--ot-white-common);
    background-color: var(--ot-title-primary);
}

.ot-btn-primary.black-btn::after {
    background-color: var(--ot-theme-primary);
}

.ot-btn-primary.border-style {
    background: none;
    color: var(--ot-title-primary);
    border: 1px solid var(--ot-theme-primary);
    border-radius: 100px;
}

.ot-btn-primary.border-style::before {
    background: rgba(252, 9, 124, 0.15);
}

.ot-btn-primary.border-style:hover {
    border: 1px solid transparent;
    color: var(--ot-white-primary);
}

.ot-btn-primary.border-style:hover::before {
    background: var(--ot-dark-pink);
}

.ot-btn-primary.white-btn {
    color: var(--ot-black-common);
    background-color: var(--ot-white-common);
}

.ot-btn-primary.white-btn::after {
    background-color: var(--ot-black-common);
}

.ot-btn-primary.white-btn:hover {
    color: var(--ot-white-common);
}

.ot-btn-primary.btn-sm {
    padding: 7.5px 24px;
}

.ot-btn-primary.btn-sm2 {
    padding: 9.5px 24px;
}

.ot-btn-primary.white-black::after {
    background: var(--ot-white-common);
}

.ot-btn-primary.white-black:hover {
    color: var(--ot-black-common);
}

.ot-btn-primary.white-black:hover .ot-btn-icon {
    filter: brightness(0) contrast(1);
}

.ot-btn-primary.ot-radius6 {
    border-radius: 6px;
}

.ot-btn-primary.ot-radius8 {
    border-radius: 8px;
}

.ot-btn-primary.ot-radius10 {
    border-radius: 10px;
}

/*----------------------------------------*/
/* 2.3 Animation
/*----------------------------------------*/
@keyframes rotate1 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotate2 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@-moz-keyframes headerSlideDown {
    0% {
        margin-top: -150px;
    }

    100% {
        margin-top: 0;
    }
}

@-ms-keyframes headerSlideDown {
    0% {
        margin-top: -150px;
    }

    100% {
        margin-top: 0;
    }
}

@-webkit-keyframes headerSlideDown {
    0% {
        margin-top: -150px;
    }

    100% {
        margin-top: 0;
    }
}

@keyframes headerSlideDown {
    0% {
        margin-top: -150px;
    }

    100% {
        margin-top: 0;
    }
}

@keyframes otswing {
    0% {
        -webkit-transform: rotate(6deg);
        -moz-transform: rotate(6deg);
        -ms-transform: rotate(6deg);
        -o-transform: rotate(6deg);
        transform: rotate(6deg);
    }

    100% {
        -webkit-transform: rotate(-6deg);
        -moz-transform: rotate(-6deg);
        -ms-transform: rotate(-6deg);
        -o-transform: rotate(-6deg);
        transform: rotate(-6deg);
    }
}

.spin {
    animation: spin 10s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes textRotation {
    to {
        transform: rotate(360deg);
    }
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -ms-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }

    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
}

/*img-animation**********************/
.ot-anim-right {
    animation: img-anim-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1)
        0.4s;
    opacity: 0;
}

@keyframes img-anim-right {
    0% {
        transform: translateX(5%);
        clip-path: inset(0 0 0 100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

.ot-anim-left {
    animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1)
        0.4s;
    opacity: 0;
}

@keyframes img-anim-left {
    0% {
        transform: translateX(-5%);
        clip-path: inset(0 100% 0 0);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

.ot-anim-top {
    animation: img-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
    opacity: 0;
}

@keyframes img-anim-top {
    0% {
        transform: translateY(-5%);
        clip-path: inset(0 0 100% 0);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

@keyframes jumpTwo {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    40% {
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes animation-star {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes dash {
    to {
        stroke-dashoffset: 0px;
        stroke-dasharray: 3000;
    }
}

@keyframes shine {
    100% {
        left: 125%;
    }
}

@keyframes borderanimate2 {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
    }

    60% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

@keyframes moving {
    0% {
        transform: translatey(0px);
    }

    50% {
        transform: translatey(-20px);
    }

    100% {
        transform: translatey(0px);
    }
}

@keyframes ottranslateX {
    0% {
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
        -o-transform: translateX(-30px);
        transform: translateX(-30px);
    }

    100% {
        -webkit-transform: translatXY(20px);
        -moz-transform: translateX(20px);
        -ms-transform: translateX(20px);
        -o-transform: translateX(20px);
        transform: translateX(20px);
    }
}

@keyframes scroll {
    0% {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        transform: translateX(0px);
    }

    100% {
        -webkit-transform: translateX(8px);
        -moz-transform: translateX(8px);
        -ms-transform: translateX(8px);
        -o-transform: translateX(8px);
        transform: translateX(8px);
    }
}

@keyframes otfadeUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(60px);
        transform: translateY(60px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.otfadeUp {
    -webkit-animation-name: otfadeUp;
    animation-name: otfadeUp;
}

@-webkit-keyframes otfadeLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-60px);
        transform: translateX(-60px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes otfadeLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-60px);
        -ms-transform: translateX(-60px);
        transform: translateX(-60px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

.otfadeLeft {
    -webkit-animation-name: otfadeLeft;
    animation-name: otfadeLeft;
}

@-webkit-keyframes otfadeRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(30px);
        transform: translateX(30px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes otfadeRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(30px);
        -ms-transform: translateX(30px);
        transform: translateX(30px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

.otfadeRight {
    -webkit-animation-name: otfadeRight;
    animation-name: otfadeRight;
}

@keyframes otMoving {
    0% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-20px);
        -moz-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        -o-transform: translateX(-20px);
        transform: translateX(-20px);
    }
}

/*----------------------------------------*/
/* 2.4 Preloader
/*----------------------------------------*/
/* Preloader full screen */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f8f8f8;
    background-size: 300% 300%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Loader design */
.load {
    width: 100px;
    height: 100px;
    position: relative;
}

.load span {
    display: block;
    width: 40%;
    height: 40%;
    position: absolute;
    border-radius: 50%;
    animation: spin 2s ease infinite;
}

.load span:first-child {
    background: #8a38f5;
    animation-delay: -1.5s;
}

.load span:nth-child(2) {
    background: #fc097c;
    animation-delay: -1s;
}

.load span:nth-child(3) {
    background: #e6521f;
    animation-delay: -0.5s;
}

.load span:last-child {
    background: #267755;
}

@keyframes spin {
    0%,
    100% {
        transform: translate(0);
    }

    25% {
        transform: translate(160%);
    }

    50% {
        transform: translate(160%, 160%);
    }

    75% {
        transform: translate(0, 160%);
    }
}

/*----------------------------------------*/
/* 2.5 Background
/*----------------------------------------*/
.grey-bg {
    background-color: var(--ot-white-primary);
}

.theme-bg {
    background-color: var(--ot-theme-primary);
}

.white-bg {
    background-color: var(--ot-white-common);
}

.black-bg {
    background-color: var(--ot-black-common);
}

.gradient-bg {
    background-size: cover;
    background-repeat: no-repeat;
    background: linear-gradient(180deg, #171b23 0%, #141820 100%);
}

/*----------------------------------------*/
/*  2.6 Nice Select
/*----------------------------------------*/
.nice-select {
    position: relative;
    box-sizing: border-box;
    clear: both;
    cursor: pointer;
    display: block;
    float: left;
    font-family: inherit;
    font-size: 14px;
    font-weight: normal;
    width: auto;
    height: 50px;
    line-height: 50px;
    color: var(--ot-title-primary);
    outline: none;
    padding-left: 19px;
    padding-right: 19px;
    text-align: left !important;
    -webkit-transition: all 0.2s ease-in-out;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    border-radius: 0;
    background: none;
}

.nice-select::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 50%;
    border-bottom: 2px solid var(--ot-title-primary);
    border-right: 2px solid var(--ot-title-primary);
    -webkit-transform-origin: 66% 66%;
    -ms-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
}

.nice-select:active,
.nice-select.open,
.nice-select:focus {
    color: var(--ot-title-primary);
    border: 1px solid var(--ot-theme-primary);
}

.nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
}

.nice-select.open::after {
    transform: rotate(-135deg);
}

.nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none;
}

.nice-select.disabled::after {
    border-color: #cccccc;
}

.nice-select.wide {
    width: 100%;
}

.nice-select.wide .list {
    left: 0 !important;
    right: 0 !important;
}

.nice-select.right {
    float: right;
}

.nice-select.right .list {
    left: auto;
    right: 0;
}

.nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px;
}

.nice-select.small::after {
    height: 4px;
    width: 4px;
}

.nice-select.small .option {
    line-height: 34px;
    min-height: 34px;
}

.nice-select .list {
    width: 100%;
    border-radius: 5px;
    color: var(--ot-text-body);
    background-color: var(--ot-white-common);
    box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: 10px 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    right: 0;
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
    -ms-transform: scale(0.75) translateY(-21px);
    transform: scale(0.75) translateY(-21px);
    -webkit-transition:
        all 0.2s cubic-bezier(0.5, 0, 0, 1.25),
        opacity 0.15s ease-out;
    transition:
        all 0.2s cubic-bezier(0.5, 0, 0, 1.25),
        opacity 0.15s ease-out;
    z-index: 9;
}

@media (max-width: 575px) {
    .nice-select .list {
        right: auto;
    }
}

.nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: 26px;
    list-style: none;
    min-height: 26px;
    outline: none;
    padding-left: 18px;
    padding-right: 29px;
    text-align: left;
    color: var(--ot-text-body);
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.nice-select .option.selected {
    font-weight: bold;
}

.nice-select .option.disabled {
    background-color: transparent;
    color: #999;
    cursor: default;
}

.nice-select-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.no-csspointerevents .nice-select .list {
    display: none;
}

.no-csspointerevents .nice-select.open .list {
    display: block;
}

.nice-select,
.nice-select.open .list {
    width: 100%;
    width: 325px;
    border-radius: 0;
}

.nice-select .list::-webkit-scrollbar {
    width: 0;
}

.nice-select .list {
    margin-top: 5px;
    top: 100%;
    border-top: 0;
    border-radius: 0 0 5px 5px;
    max-height: 210px;
    overflow-y: scroll;
    padding: 52px 0 0;
}

.nice-select.has-multiple {
    white-space: inherit;
    height: auto;
    padding: 7px 12px;
    min-height: 53px;
    line-height: 22px;
}

.nice-select.has-multiple span.current {
    border: 1px solid #ccc;
    background: #eee;
    padding: 0 10px;
    border-radius: 0;
    display: inline-block;
    line-height: 24px;
    font-size: 14px;
    margin-bottom: 3px;
    margin-right: 3px;
}

.nice-select.has-multiple .multiple-options {
    display: block;
    line-height: 37px;
    margin-left: 30px;
    padding: 0;
}

.nice-select-search-box {
    box-sizing: border-box;
    position: absolute;
    width: 325px;
    margin-top: 0;
    line-height: 1;
    left: 0;
    z-index: 8;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(68, 88, 112, 0.11);
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
    -ms-transform: scale(0.75) translateY(-21px);
    transform: scale(0.75) translateY(-21px);
    -webkit-transition:
        all 0.2s cubic-bezier(0.5, 0, 0, 1.25),
        opacity 0.15s ease-out;
    transition:
        all 0.2s cubic-bezier(0.5, 0, 0, 1.25),
        opacity 0.15s ease-out;
    background: var(--ot-border-primary);
}

.nice-select-search-box input {
    width: 100%;
    height: 35px;
    color: var(--ot-white-primary);
}

.nice-select-search-box input::placeholder {
    color: var(--ot-white-primary);
}

.nice-select-search-box input:focus {
    outline: 0;
    border: 0;
}

.nice-select-search-box input[type="text"] {
    outline: 0;
    border: 0;
}

.nice-select-search {
    box-sizing: border-box;
    border-radius: 0;
    box-shadow: none;
    color: var(--ot-white-primary);
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px 0 0;
    width: 100% !important;
    min-height: 35px;
    line-height: 1;
    outline: 0 !important;
}

.nice-select.open .nice-select-search-box {
    width: 100%;
    top: 111%;
    opacity: 1;
    z-index: 10;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
}

.remove:hover {
    color: red;
}

/*----------------------------------------*/
/* 2.8 Offcanvas
/*----------------------------------------*/
.ot-offcanvas {
    position: fixed;
    background: var(--ot-white-common);
    width: 480px;
    right: 0;
    top: 0;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: 0.3s 0.3s ease-out;
    -moz-transition: 0.3s 0.3s ease-out;
    -ms-transition: 0.3s 0.3s ease-out;
    -o-transition: 0.3s 0.3s ease-out;
    transition: 0.3s 0.3s ease-out;
    overflow-y: scroll;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    z-index: 999;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .ot-offcanvas {
        width: 400px;
    }
}

@media (max-width: 575px) {
    .ot-offcanvas {
        width: 100%;
    }
}

.ot-offcanvas-header {
    padding: 20px;
    border-bottom: 1px solid rgba(1, 15, 28, 0.1);
}

.ot-offcanvas.opend {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

.ot-offcanvas-close-toggle {
    font-size: 16px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: var(--ot-theme-primary);
    border: 1px solid var(--ot-theme-primary);
    background-color: var(--ot-white-common);
    border-radius: 50%;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.ot-offcanvas-close-toggle:hover {
    color: var(--ot-white-common);
    background: var(--ot-theme-primary);
    border: 1px solid var(--ot-theme-primary);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    (max-width: 575px) {
    .ot-offcanvas-header {
        margin-bottom: 20px;
    }
}

.ot-offcanvas-title {
    font-weight: 600;
    font-size: 18px;
    display: block;
    text-transform: uppercase;
    color: var(--ot-black-common);
    border-bottom: 1px solid #ebecf5;
    padding-bottom: 10px;
}

.ot-offcanvas-info-content a:not(:last-child) {
    margin-bottom: 10px;
    display: inline-block;
}

.ot-offcanvas-info-icon span {
    font-size: 18px;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    display: inline-block;
    color: var(--ot-white-common);
    background: var(--ot-black-common);
    border-radius: 50%;
    border-radius: 100%;
    border: 0;
    box-shadow: 0 8px 34px 0 rgba(36, 44, 73, 0.15);
}

.ot-offcanvas-info-text span {
    display: block;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.8;
    text-transform: uppercase;
    color: var(--ot-theme-primary);
}

.ot-offcanvas-info-text span:last-child {
    font-size: 16px;
    color: var(--ot-black-common);
    text-transform: lowercase;
}

.ot-offcanvas-info-text.of-location span:last-child {
    text-transform: capitalize;
}

.ot-offcanvas-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
}

.ot-offcanvas-gallery a img {
    width: 100%;
    height: 100%;
    border-radius: 3px;
}

.ot-offcanvas-social a {
    font-size: 16px;
    text-align: center;
    display: inline-block;
    color: var(--ot-title-primary);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.ot-offcanvas-social a:not(:last-child) {
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid #d9d9d9;
}

.ot-offcanvas-social a:hover {
    color: var(--ot-theme-primary);
}

.ot-offcanvas-social a:hover span {
    color: var(--ot-theme-primary);
}

/*----------------------------------------*/
/* 2.12 Search
/*----------------------------------------*/
.search-popup {
    padding: 70px;
    padding-top: 70px;
    padding-bottom: 100px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 45%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    -webkit-transform: translateY(calc(-100% - 80px));
    -moz-transform: translateY(calc(-100% - 80px));
    -ms-transform: translateY(calc(-100% - 80px));
    -o-transform: translateY(calc(-100% - 80px));
    transform: translateY(calc(-100% - 80px));
    -webkit-transition:
        transform 0.6s ease-in-out,
        opacity 0.6s ease-in-out;
    -moz-transition:
        transform 0.6s ease-in-out,
        opacity 0.6s ease-in-out;
    transition:
        transform 0.6s ease-in-out,
        opacity 0.6s ease-in-out;
    transition-delay: 0.7s;
}

.search-popup.search-opened {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);
    transition-delay: 0s;
}

.search-popup.search-opened .search-input {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
    transition-delay: 0.3s;
}

.search-popup.search-opened .search-input::after {
    width: 100%;
    transition-delay: 0.5s;
}

.search-popup-2 {
    background-color: var(--ot-title-primary);
}

.search-popup-2 .search-input .search-input-field ~ .search-focus-border {
    background-color: var(--ot-theme-primary);
}

.search-popup-3 .search-input .search-input-field ~ .search-focus-border {
    background-color: var(--ot-theme-primary);
}

.search-top {
    margin-bottom: 80px;
}

.search-input {
    position: relative;
    height: 80px;
    transition: all 0.3s ease-out 0s;
    transition-delay: 0.5s;
    opacity: 0;
}

.search-input::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 0%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease-out 0s;
    transition-delay: 0.3s;
}

.search-input input {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 0;
    outline: 0;
    font-size: 24px;
    color: var(--ot-white-common);
    border-bottom: 1px solid transparent;
    padding: 0;
    padding-right: 30px;
}

.search-input input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: rgba(255, 255, 255, 0.5);
    font-size: 24px;
}

.search-input input::-moz-placeholder {
    /* Firefox 19+ */
    color: rgba(255, 255, 255, 0.5);
    font-size: 24px;
}

.search-input input:-moz-placeholder {
    /* Firefox 4-18 */
    color: rgba(255, 255, 255, 0.5);
    font-size: 24px;
}

.search-input input:-ms-input-placeholder {
    /* IE 10+ Edge*/
    color: rgba(255, 255, 255, 0.5);
    font-size: 24px;
}

.search-input input::placeholder {
    /* MODERN BROWSER */
    color: rgba(255, 255, 255, 0.5);
    font-size: 24px;
}

.search-input input:focus {
    border: 0;
}

.search-input button {
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--ot-white-common);
}

.search-input .search-input-field ~ .search-focus-border {
    position: absolute;
    bottom: 0;
    left: auto;
    right: 0;
    width: 0;
    height: 1px;
    background-color: var(--ot-theme-primary);
    -webkit-transition: 0.5s 0.3s ease-out;
    -moz-transition: 0.5s 0.3s ease-out;
    -ms-transition: 0.5s 0.3s ease-out;
    -o-transition: 0.5s 0.3s ease-out;
    transition: 0.5s 0.3s ease-out;
}

.search-input .search-input-field:focus ~ .search-focus-border {
    width: 100%;
    left: 0;
    right: auto;
    -webkit-transition: 0.5s 0.3s ease-out;
    -moz-transition: 0.5s 0.3s ease-out;
    -ms-transition: 0.5s 0.3s ease-out;
    -o-transition: 0.5s 0.3s ease-out;
    transition: 0.5s 0.3s ease-out;
}

.search-close-btn {
    font-size: 25px;
    color: rgba(255, 255, 255, 0.3);
}

.search-close-btn:hover {
    color: var(--ot-white-common);
}

/*----------------------------------------*/
/* 2.11 Tab
/*----------------------------------------*/
.ot-tab-box-1 .of-product-item {
    margin-bottom: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-tab-box-1 .of-product-item {
        margin-bottom: 35px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px) {
    .ot-tab-box-1 .of-product-item.r-spac {
        margin-bottom: 0;
    }
}

/*----------------------------------------*/
/* 2.9 Breadcrumb
/*----------------------------------------*/
.ot-breadcrumb-style {
    position: relative;
    padding-top: 105px;
    padding-bottom: 100px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: luminosity;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-breadcrumb-style {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

.ot-breadcrumb-overlay {
    position: relative;
}

.ot-breadcrumb-overlay::before {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    content: "";
    background: rgba(88, 28, 135, 0.7);
}

.ot-breadcrumb-list span {
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    text-transform: capitalize;
}

.ot-breadcrumb-list span:not(:last-child) {
    margin-right: 4px;
    color: var(--ot-white-common);
}

.ot-breadcrumb-list .dvdr i {
    font-size: 14px;
}

.ot-breadcrumb-subtitle {
    color: var(--ot-theme-primary);
}

.ot-breadcrumb-title {
    font-size: 48px;
    font-weight: 600;
    color: var(--ot-white-common);
    text-transform: capitalize;
    margin-bottom: 10px;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .ot-breadcrumb-title {
        font-size: 40px;
    }
}

@media (max-width: 575px) {
    .ot-breadcrumb-title {
        font-size: 30px;
    }
}

.ot-breadcrumb-title > span {
    display: block;
    color: var(--ot-theme-primary);
}

/*----------------------------------------*/
/* 2.10 Accordion
/*----------------------------------------*/
.ot-faq-accordion-box .accordion-items {
    position: relative;
    margin-bottom: 20px;
}

.ot-faq-accordion-box .accordion-header {
    border-radius: 8px;
    background: #f6f6f6;
}

.ot-faq-accordion-box .accordion-icon {
    position: absolute;
    width: 38px;
    height: 38px;
    top: 15.5px;
    right: 30px;
    display: inline-block;
    background: var(--ot-black-common);
    border-radius: 50%;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.ot-faq-accordion-box .accordion-icon::before {
    position: absolute;
    content: "";
    width: 2px;
    height: 16px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 2px;
    transition: 0.4s;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.ot-faq-accordion-box .accordion-icon::after {
    position: absolute;
    content: "";
    width: 16px;
    height: 2px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 2px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.ot-faq-accordion-box .accordion-buttons {
    width: 100%;
    font-size: 20px;
    font-weight: 600;
    text-align: left;
    padding: 23px 80px 23px 36px;
    color: var(--ot-title-primary);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-faq-accordion-box .accordion-buttons {
        font-size: 18px;
        padding: 23px 80px 23px 20px;
    }
}

.ot-faq-accordion-box .accordion-buttons:not(.collapsed) .accordion-icon {
    background: var(--ot-theme-primary);
}

.ot-faq-accordion-box
    .accordion-buttons:not(.collapsed)
    .accordion-icon::before {
    background: var(--ot-black-common);
    transform: translate(-50%, -50%) rotate(90deg);
}

.ot-faq-accordion-box
    .accordion-buttons:not(.collapsed)
    .accordion-icon::after {
    background: var(--ot-black-common);
}

.ot-faq-accordion-box .accordion-body {
    border-radius: 0 0 15px 15px;
    background-color: #f6f6f6;
    padding: 13px 44px 30px 36px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-faq-accordion-box .accordion-body {
        padding: 13px 20px 30px 20px;
    }
}

.ot-faq-accordion-box .accordion-body p {
    margin: 0;
    color: #444;
    font-size: 16px;
    font-weight: 400;
}

/*----------------------------------------*/
/* 2.12 Section Title
/*----------------------------------------*/
.ot-sec-title {
    font-weight: 700;
    font-size: 36px;
    line-height: 1.2;
    margin-top: -0.2em;
    display: block;
    color: var(--ot-title-primary);
    text-transform: capitalize;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .ot-sec-title {
        font-size: 30px;
    }
}

@media (max-width: 575px) {
    .ot-sec-title {
        font-size: 22px;
    }
}

.ot-sec-title.title-color2 {
    color: var(--ot-title-primary);
}

.ot-sec-title-shape {
    width: 90px;
    height: 150px;
    display: inline-block;
}

.ot-sec-title-shape.gradient-bg {
    background:
        linear-gradient(180deg, rgba(12, 37, 36, 0) 0%, #0c2524 100%),
        url("path_to_image");
}

.ot-sec-title-shape.light-bg {
    background:
        linear-gradient(180deg, rgba(16, 43, 42, 0) 0%, #102b2a 100%),
        url("path_to_image");
}

.ot-sec-title-shape.ot-transparent {
    background: none;
}

.ot-sec-subtitle {
    position: relative;
    font-size: 24px;
    font-weight: 500;
    padding: 8.5px 45px;
    line-height: 1;
    display: inline-block;
    text-transform: capitalize;
    margin-bottom: 20px;
    color: var(--ot-title-primary);
    font-family: var(--ot-solitreo-font);
}

.ot-sec-subtitle.style2 {
    color: #444;
    padding: 0;
    background: none;
    border-radius: 0;
}

.ot-sec-subtitle.ot-theme {
    color: var(--ot-theme-primary);
}

.ot-sec-subtitle-shape {
    position: absolute;
    top: 0;
    z-index: -1;
}

.ot-sec-subtitle.st-style {
    padding: 8.5px 75px;
}

.ot-sec-note {
    font-size: 14px;
    text-transform: capitalize;
    margin-bottom: 0;
}

.ot-char-animation {
    overflow: hidden;
}

.ot-sec-text {
    color: var(--ot-body-primary);
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    text-transform: capitalize;
}

.ot-box-title {
    font-size: 24px;
    line-height: 1;
    text-transform: capitalize;
}

.border-0 {
    border: 0;
}

/*----------------------------------------*/
/* 2.7 Pagination
/*----------------------------------------*/
.ot-pagination .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    background: none;
    display: inline-block;
    border-radius: 50%;
    opacity: 1;
    position: relative;
    margin: 0 7px;
    border: 1px solid rgba(255, 255, 255, 0.1) transparent;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.ot-pagination .swiper-pagination-bullet::after {
    position: absolute;
    content: "";
    height: 4px;
    width: 4px;
    top: 7px;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
    display: inline-block;
    background: none;
    transition: 0.3s;
    transform: translate(-50%, -50%);
    transform: rotate(45deg);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ot-pagination .swiper-pagination-bullet-active {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ot-pagination
    .swiper-pagination-bullet-active.swiper-pagination-bullet::after {
    border: 1px solid var(--ot-theme-primary);
}

.ot-pagination-arrow.style-2 {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ot-pagination-arrow.style-2 .ot-slider-btn {
    width: 74px;
    height: 50px;
    line-height: 1;
    border-radius: 100px;
    background: var(--ot-white-common);
    border: 1px solid #d1d4e2;
    box-shadow: 0px 9px 20px 0px rgba(0, 0, 0, 0.1);
}

.ot-pagination-arrow.style-2 .ot-slider-btn:hover .ot-slider-icon {
    filter: brightness(0) invert(1);
}

.ot-pagination-line {
    width: 54px;
    height: 2px;
    display: inline-block;
    background: #d1d4e2;
    border-radius: 30px;
}

.ot-pagination-dots .swiper-pagination-bullet {
    position: relative;
    width: 24px;
    height: 24px;
    background: var(--ot-white-common);
    border: 2px solid #cecfd7;
    border-radius: 50%;
    box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.06);
}

.ot-pagination-dots .swiper-pagination-bullet::before {
    position: absolute;
    width: 16px;
    top: 2px;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
    height: 16px;
    content: "";
    background: var(--ot-theme-primary);
    border-radius: 100px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    transform: scale(0);
}

.ot-pagination-dots .swiper-pagination-bullet.swiper-pagination-bullet-active {
    border: 2px solid #cecfd7;
}

.ot-pagination-dots
    .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
    transform: scale(1);
}

.ot-pagination-dots2 {
    display: inline;
    padding: 7.5px 30px;
    border-radius: 50px;
    border: 1px solid #dfe1ed;
    background: var(--ot-white-common);
    box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, 0.06);
}

.ot-pagination-dots2 .swiper-pagination-bullet {
    position: relative;
    width: 10px;
    height: 10px;
    background: #c9c9c9;
    border-radius: 50%;
}

.ot-pagination-dots2 .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--ot-theme-primary);
    transform: scale(1.5);
}

.ot-pagination-blog nav ul {
    display: flex;
    gap: 30px;
    justify-content: space-between;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-pagination-blog nav ul {
        display: block;
    }
}

.ot-pagination-blog nav ul li {
    list-style: none;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-pagination-blog nav ul li {
        margin-bottom: 15px;
    }
}

.ot-pagination-blog nav ul li a {
    display: flex;
    gap: 0 23px;
    align-items: center;
    padding: 15px 18px;
    border: 1px solid #e9ebf8;
    border-radius: 10px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px) {
    .ot-pagination-blog nav ul li a {
        gap: 0 10px;
        padding: 15px 10px;
    }
}

@media (max-width: 575px) {
    .ot-pagination-blog nav ul li a {
        display: block;
    }
}

.ot-pagination-blog-thumb {
    flex: 0 0 auto;
}

@media (max-width: 575px) {
    .ot-pagination-blog-thumb {
        margin-bottom: 20px;
    }
}

.ot-pagination-blog-thumb img {
    width: 100px;
    height: 100px;
    border-radius: 8px;
}

.ot-pagination-blog-content .ot-sec-text {
    margin-bottom: 0;
}

.ot-pagination-blog-title {
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    text-transform: capitalize;
    color: var(--ot-title-primary);
}

.ot-pagination-blog-title img {
    filter: brightness(0);
}

.ot-basic-pagination nav ul li {
    display: inline-block;
}

.ot-basic-pagination nav ul li:not(:last-child) {
    margin-right: 5px;
}

.ot-basic-pagination nav ul li.current a {
    color: var(--ot-white-common);
    background: var(--ot-theme-primary);
}

.ot-basic-pagination nav ul li a {
    font-size: 20px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: var(--ot-title-primary);
    display: block;
    background: #f5f5f5;
    border-radius: 6px;
}

.ot-basic-pagination nav ul li a:hover {
    color: var(--ot-white-common);
    background: var(--ot-theme-primary);
}

.ot-slider-btn {
    position: absolute;
    width: 60px;
    height: 60px;
    background: #eff3f8;
    line-height: 60px;
    border-radius: 100px;
}

.ot-slider-btn::before {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    content: "";
    background: var(--ot-theme-primary);
    z-index: 1;
    transform: scale(0);
    border-radius: 50%;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.ot-slider-btn .slider-icon {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.ot-slider-btn:hover::before {
    transform: scale(1);
}

.ot-slider-btn:hover .slider-icon {
    filter: brightness(0) contrast(1);
}

.ot-slider-icon {
    position: relative;
    z-index: 3;
    transition: 0.3s;
}

.slide-transtion {
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
}

.slide-transtion .swiper-slide {
    width: auto;
}

/*----------------------------------------*/
/* 8.2 Filter-Sidebar
/*----------------------------------------*/
.ot-filter-sidebar {
    position: fixed;
    right: 0;
    top: 0;
    width: 420px;
    padding: 20px;
    height: 100%;
    -webkit-transform: translateX(calc(100% + 80px));
    -moz-transform: translateX(calc(100% + 80px));
    -ms-transform: translateX(calc(100% + 80px));
    -o-transform: translateX(calc(100% + 80px));
    transform: translateX(calc(100% + 80px));
    background: var(--ot-white-common) none repeat scroll 0 0;
    -webkit-transition:
        0.45s ease-in-out,
        opacity 0.45s ease-in-out;
    -moz-transition:
        0.45s ease-in-out,
        opacity 0.45s ease-in-out;
    -ms-transition:
        0.45s ease-in-out,
        opacity 0.45s ease-in-out;
    -o-transition:
        0.45s ease-in-out,
        opacity 0.45s ease-in-out;
    transition:
        0.45s ease-in-out,
        opacity 0.45s ease-in-out;
    z-index: 9999;
    overflow-y: scroll;
    scrollbar-width: none;
}

@media (max-width: 575px) {
    .ot-filter-sidebar {
        width: 100%;
    }
}

.ot-filter-sidebar::-webkit-scrollbar {
    display: none;
    /* for Chrome, Safari, and Opera */
}

.ot-filter-sidebar.opend {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

.ot-filter-sidebar__wrapper {
    position: relative;
    min-height: 100%;
    padding-left: 25px;
    padding-right: 25px;
}

.ot-filter-sidebar__top-title {
    padding: 20px 0;
    border-bottom: 1px solid var(--ot-border-primary);
}

.ot-filter-sidebar__top-title h4 {
    font-size: 16px;
    text-transform: capitalize;
    font-weight: 600;
    margin-bottom: 0;
}

.filter-close {
    position: absolute;
    top: 17px;
    right: 0;
}

.filter-close-btn {
    background: transparent;
    color: var(--ot-black-common);
    font-size: 22px;
}

.filter-close-btn:hover {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.filter-btn .ot-sidebar-nav {
    padding: 0;
    margin-bottom: 0;
    border-radius: 0;
    background: none;
}

/* HEADER CSS */
/*----------------------------------------*/
/* 3.1 Header Style 1
/*----------------------------------------*/
.ot-header-top {
    padding: 5px 0;
    background: var(
        --Gradient,
        linear-gradient(254deg, var(--ot-dark-pink) 3%, #8a38f5 95.79%)
    );
}

.ot-header-bottom {
    background: var(--ot-white-primary);
    box-shadow: 0 4px 36px 0 rgba(0, 0, 0, 0.08);
}

@media only screen and (min-width: 0px) and (max-width: 1199px) {
    .ot-header-bottom {
        padding: 10px 0;
    }
}

.ot-header-info-social ul li {
    display: inline-block;
}

.ot-header-info-social ul li:not(:last-child) {
    margin-right: 15px;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .ot-header-info-social ul li:not(:last-child) {
        margin-right: 5px;
    }
}

.ot-header-info-social ul li a {
    font-size: 16px;
    color: var(--ot-white-common);
}

.ot-header-lang {
    position: relative;
    cursor: pointer;
}

.ot-header-lang-list {
    position: absolute;
    top: 140%;
    right: 0;
    z-index: 2;
    padding: 8px;
    min-width: 200px;
    background: var(--ot-white-primary);
    box-shadow: 0 0 36px 0 rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
    border-radius: 12px;
}

.ot-header-lang-list li {
    font-size: 16px;
    font-weight: 500;
    color: var(--ot-title-primary);
    text-align: left;
    list-style: none;
    padding: 7px 8px;
    border-radius: 8px;
    align-items: center;
    justify-content: space-between;
}

.ot-header-lang-list li img {
    margin-right: 8px;
}

.ot-header-lang-list li .lang-checkmark {
    position: absolute;
    color: var(--ot-white-primary);
    font-size: 14px;
    visibility: hidden;
    transition: 0.2s ease;
    right: 20px;
}

.ot-header-lang-list li.active {
    background: var(--ot-theme-primary);
    color: var(--ot-white-primary);
}

.ot-header-lang-list li.active .lang-checkmark {
    visibility: visible;
}

.ot-header-lang-list.ot-lang-list-open {
    visibility: visible;
    opacity: 1;
    top: 118%;
}

.ot-header-lang-selected-lang {
    font-size: 14px;
    color: var(--ot-white-common);
    background-color: transparent;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ot-header-lang-selected-lang img.lang-flag {
    width: 20px;
    height: auto;
}

.ot-header-lang-selected-lang .lang-checkmark-toggle {
    color: var(--ot-white-primary);
    font-size: 14px;
    margin-left: 5px;
}

.ot-header-lang-selected-lang .fa-angle-down {
    font-size: 12px;
    color: var(--ot-white-common);
}

.ot-header-right-box {
    gap: 28px;
}

.ot-header-notify ul li {
    display: inline-block;
}

.ot-header-notify ul li:not(:last-child) {
    margin-right: 25px;
}

.ot-header-notify ul li .notify-icon {
    font-size: 20px;
}

.ot-header-notify ul li .notify-icon:hover {
    color: var(--ot-theme-primary);
}

.ot-header-userbox {
    gap: 8px;
}

.ot-header-user-avater img {
    width: 46px;
    height: 46px;
    border-radius: 100px;
}

.ot-header-user-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ot-title-primary);
    margin-bottom: 0;
}

.ot-header-user-mail {
    font-size: 12px;
}

.ot-header-right-bars {
    position: relative;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: var(--ot-theme-primary);
    color: var(--ot-white-primary);
    border-radius: 100px;
    z-index: 55;
}

.ot-header-right-bars:hover {
    color: var(--ot-title-primary);
}

.ot-header-loging {
    font-size: 16px;
    font-weight: 600;
    color: var(--ot-theme-primary);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.ot-header-loging:hover {
    color: var(--ot-dark-pink);
}

.header-transparent {
    position: absolute;
    width: 100%;
    z-index: 20;
}

.header-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    opacity: 1;
    width: 100%;
    z-index: 89;
    visibility: visible;
    background: var(--ot-white-common);
    box-shadow: 0px 1px 3px 0px rgba(18, 20, 32, 0.14);
    animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
    -webkit-animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
}

.header-sticky.ot-sticky5 {
    padding: 0;
}

.header-sticky.ot-sticky5 .ot-header-bottom {
    border: 0;
    border-radius: 0;
}

.header-sticky.ot-sticky5 .ot-header-bottom .row [class*="col-"]:first-child {
    display: block;
}

.header-sticky .ot-header-top {
    display: none;
}

/*----------------------------------------*/
/* 4.1 Main menu css
/*----------------------------------------*/
.ot-main-menu > nav > ul > li {
    position: relative;
    display: inline-block;
}

.ot-main-menu > nav > ul > li:not(:last-child) {
    padding-right: 18px;
    margin-right: 18px;
}

.ot-main-menu > nav > ul > li.has-dropdown::after {
    content: "";
    position: absolute;
    top: 45%;
    right: 0;
    width: 11px;
    height: 11px;
    background-image: url(../img/icon/down-angle.svg);
    background-size: contain;
    background-repeat: no-repeat;
    filter: brightness(0) contrast(0);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.ot-main-menu > nav > ul > li a {
    font-weight: 600;
    font-size: 16px;
    padding: 34px 0;
    display: inline-block;
    text-transform: capitalize;
    color: var(--ot-title-primary);
}

.ot-main-menu > nav > ul > li .submenu {
    position: absolute;
    width: 240px;
    z-index: 999;
    padding: 25px 0px;
    top: 100%;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s;
    text-align: left;
    margin-left: 0;
    transform-origin: top;
    transition-duration: 0.1s;
    backdrop-filter: blur(8px);
    background: var(--ot-white-common);
    box-shadow: 0px 10px 30px 0px rgba(25, 25, 26, 0.1);
    -webkit-transform: perspective(300px) rotateX(-18deg);
    -moz-transform: perspective(300px) rotateX(-18deg);
    -ms-transform: perspective(300px) rotateX(-18deg);
    -o-transform: perspective(300px) rotateX(-18deg);
    transform: perspective(300px) rotateX(-18deg);
}

.ot-main-menu > nav > ul > li .submenu li {
    list-style: none;
    display: block;
    padding: 0 30px;
    position: relative;
}

.ot-main-menu > nav > ul > li .submenu li:not(:last-child) {
    margin-bottom: 18px;
}

.ot-main-menu > nav > ul > li .submenu li .submenu {
    left: 100%;
    top: 0;
}

.ot-main-menu > nav > ul > li .submenu li a {
    position: relative;
    display: block;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    padding: 0 0;
    text-transform: capitalize;
}

.ot-main-menu > nav > ul > li .submenu li a::before {
    position: absolute;
    top: 50%;
    left: 0;
    content: "";
    height: 2px;
    width: 0px;
    opacity: 0;
    visibility: hidden;
    display: inline-block;
    transition: all 0.3s ease-out 0s;
    background-color: var(--ot-theme-primary);
    transform: translateY(-50%);
}

.ot-main-menu > nav > ul > li .submenu li:hover > .submenu {
    opacity: 1;
    visibility: visible;
}

.ot-main-menu > nav > ul > li .submenu li:hover > a {
    padding-left: 25px;
}

.ot-main-menu > nav > ul > li .submenu li:hover > a::before {
    width: 20px;
    visibility: visible;
    opacity: 1;
}

.ot-main-menu > nav > ul > li:hover > a {
    color: var(--ot-theme-primary);
}

.ot-main-menu > nav > ul > li:hover .submenu {
    opacity: 1;
    visibility: visible;
    transition-duration: 0.2s;
    -webkit-transform: perspective(300px) rotateX(0deg);
    -moz-transform: perspective(300px) rotateX(0deg);
    -ms-transform: perspective(300px) rotateX(0deg);
    -o-transform: perspective(300px) rotateX(0deg);
    transform: perspective(300px) rotateX(0deg);
}

.ot-main-menu > nav > ul > li:hover.has-dropdown::after {
    rotate: -180deg;
    filter: brightness(1) contrast(1);
}

/*----------------------------------------*/
/* 4.2 Mobilemenu css
/*----------------------------------------*/
.ot-offcanvas-menu {
    margin-bottom: 40px;
}

.ot-offcanvas-menu ul {
    list-style: none;
}

.ot-offcanvas-menu ul li {
    position: relative;
}

.ot-offcanvas-menu ul li > a {
    padding: 8px 20px;
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--ot-black-common);
}

.ot-offcanvas-menu ul li > a i {
    display: none;
}

.ot-offcanvas-menu ul li:not(:last-child) > a {
    border-bottom: 1px solid rgba(1, 15, 28, 0.1);
}

.ot-offcanvas-menu ul li.active > a {
    color: var(--ot-theme-primary);
}

.ot-offcanvas-menu ul li.active > .ot-menu-close {
    color: var(--ot-white-common);
    background: var(--ot-black-common);
    border-color: var(--ot-black-common);
}

.ot-offcanvas-menu ul li.active > .ot-menu-close i {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.ot-offcanvas-menu ul li .ot-submenu {
    display: none;
    padding-left: 20px;
}

.ot-offcanvas-menu ul li .ot-mega-menu {
    display: none;
}

.ot-menu-close {
    position: absolute;
    right: 20px;
    top: 6px;
    height: 30px;
    width: 30px;
    font-size: 12px;
    line-height: 29px;
    text-align: center;
    border: 1px solid rgba(1, 15, 28, 0.12);
}

.ot-menu-close i {
    transition: all 0.3s;
}

/*----------------------------------------*/
/* 5.1 Postbox css
/*----------------------------------------*/
.ot-postbox-thumb img {
    border-radius: 20px;
}

.ot-postbox-title {
    font-size: 30px;
    font-weight: 600;
    color: var(--ot-title-primary);
    text-transform: capitalize;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .ot-postbox-title {
        font-size: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-postbox-title {
        font-size: 24px;
    }
}

.ot-postbox-thumb-sm .ot-video-icon {
    font-size: 24px;
    width: 70px;
    height: 70px;
    line-height: 70px;
    color: var(--ot-theme-primary);
}

.ot-postbox-thumb-sm .ot-video-icon:hover {
    color: var(--ot-white-common);
    background: var(--ot-theme-primary);
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-postbox-thumb-sm {
        margin-bottom: 24px;
    }

    .ot-postbox-thumb-sm img {
        width: 100%;
    }
}

.ot-postbox-sidebar .sidebar-widget {
    padding: 32px;
    border-radius: 20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-postbox-sidebar .sidebar-widget {
        padding: 16px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-postbox-sidebar .sidebar-widget:last-child {
        margin-bottom: 60px;
    }
}

.postbox-details-item {
    padding: 32px;
    background-color: var(--ot-white-common);
    border-radius: 20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .postbox-details-item {
        padding: 16px;
    }
}

.postbox-details-item:not(:last-child) {
    margin-bottom: 30px;
}

.postbox-details-meta-box {
    display: flex;
    align-items: center;
    gap: 30px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .postbox-details-meta-box {
        display: block;
    }
}

.postbox-details-meta {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .postbox-details-meta {
        margin-right: 20px;
    }
}

.postbox-details-meta i {
    margin-top: 4px;
    color: var(--ot-theme-primary);
}

.postbox-details-thumb img {
    width: 100%;
    border-radius: 12px;
}

.postbox-details-quote-box {
    padding: 26px;
    background: #f5f5f5;
    border-left: 3px solid var(--ot-theme-primary);
    border-radius: 6px;
}

.postbox-details-quote-box i {
    flex: 0 0 auto;
}

.postbox-details-quote p {
    font-style: italic;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.5;
    color: var(--ot-title-primary);
    margin-bottom: 10px;
}

.postbox-details-quote span {
    font-weight: 600;
    font-size: 18px;
    color: var(--ot-black-common);
    margin-bottom: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .postbox-details-feature-content {
        margin-bottom: 30px;
    }
}

.postbox-details-feature-title {
    font-weight: 600;
    font-size: 30px;
    line-height: 1.1;
    text-transform: capitalize;
    color: var(--ot-title-primary);
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .postbox-details-feature-title {
        font-size: 24px;
    }
}

.postbox-details-feature-list ul {
    list-style: none;
}

.postbox-details-feature-list ul li {
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    text-transform: capitalize;
    color: var(--ot-title-primary);
    display: flex;
}

.postbox-details-feature-list ul li:not(:last-child) {
    margin-bottom: 13px;
}

.postbox-details-feature-list ul li i {
    width: 26px;
    height: 26px;
    font-size: 13px;
    line-height: 26px;
    color: var(--ot-white-common);
    background: var(--ot-theme-primary);
    border-radius: 100px;
    text-align: center;
    margin-right: 5px;
}

.postbox-details-tag .tagcloud .tag {
    border: 1px solid #e1e2e9;
    background: none;
}

@media (max-width: 575px) {
    .postbox-details-tag {
        margin-bottom: 30px;
    }
}

.postbox-details-tag-name {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.1;
    display: block;
    margin-bottom: 25px;
    text-transform: capitalize;
    color: var(--ot-body-primary);
}

.postbox-details-social a {
    width: 40px;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    color: var(--ot-theme-primary);
    text-align: center;
    border-radius: 6px;
    background: #f5f5f5;
    display: inline-block;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.postbox-details-social a:hover {
    color: var(--ot-white-common);
    background: var(--ot-theme-primary);
}

.postbox-details-author {
    gap: 32px;
    padding: 35px 30px 35px 39px;
    background: #f5f5f5;
    border-radius: 12px;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .postbox-details-author {
        gap: 20px;
        padding: 20px;
    }
}

.postbox-details-author-thumb {
    flex: 0 0 auto;
}

@media (max-width: 575px) {
    .postbox-details-author-thumb {
        margin-bottom: 15px;
    }
}

.postbox-details-author-thumb img {
    width: 115px;
    height: 115px;
    border-radius: 50%;
}

.postbox-details-author-designation {
    font-weight: 500;
    font-size: 15px;
    color: var(--ot-title-primary);
}

.postbox-details-author-title {
    font-weight: 600;
    font-size: 20px;
    text-transform: capitalize;
    color: var(--ot-title-primary);
}

.postbox-details-form {
    padding: 40px 46px;
    background: #f5f5f5;
    border-radius: 8px;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .postbox-details-form {
        padding: 20px;
    }
}

.postbox-details-form-title {
    font-weight: 600;
    font-size: 30px;
    line-height: 1;
    color: var(--ot-title-primary);
}

.postbox-details-input input,
.postbox-details-input textarea {
    height: 50px;
    background: var(--ot-white-common);
    resize: none;
    border-radius: 8px;
}

.postbox-details-input textarea {
    height: 130px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .postbox-details-input {
        margin-bottom: 15px;
    }
}

.postbox-details-remeber input {
    display: none;
}

.postbox-details-remeber input:checked + label:after {
    content: "";
    display: block;
    position: absolute;
    top: 7px;
    left: 9px;
    width: 6px;
    height: 10px;
    line-height: 10px;
    border: 1px solid var(--ot-title-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.postbox-details-remeber label {
    position: relative;
    padding-left: 30px;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.3;
    color: var(--ot-title-primary);
}

.postbox-details-remeber label::before {
    position: absolute;
    content: "";
    top: -2px;
    left: 2px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 4px;
    text-align: center;
    z-index: 33;
    transition: 0.3s;
    border: 1px solid #c6c6c6;
}

.postbox-details-remeber label:hover {
    cursor: pointer;
}

.postbox-title {
    color: var(--ot-title-primary);
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: capitalize;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .postbox-title {
        font-size: 30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .postbox-title {
        font-size: 24px;
    }
}

.postbox-title:hover {
    color: var(--ot-theme-primary);
}

.postbox-video-btn a:hover {
    color: var(--ot-white-common);
    background: var(--ot-theme-primary);
}

.postbox-video-btn2 .ot-video-icon {
    position: relative;
    width: 62.12px;
    height: 62.12px;
    font-size: 20px;
    line-height: 62.12px;
}

.postbox-video-btn2 .ot-video-icon:hover {
    color: var(--ot-white-common);
    background: var(--ot-theme-primary);
}

.postbox-arrow {
    position: absolute;
    width: 100%;
    top: 50%;
    z-index: 2;
    padding: 0 30px;
    transform: translateY(-50%);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .postbox-arrow {
        padding: 0 15px;
    }
}

.postbox-arrow .ot-slider-btn {
    border: 1px solid transparent;
    background: var(--ot-white-common);
}

.postbox-arrow .ot-slider-btn:hover .ot-slider-arrow {
    filter: brightness(0) invert(1);
}

/*----------------------------------------*/
/* 5.2 Sidebar css
/*----------------------------------------*/
.ot-sidebar-widget-wrapp {
    width: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-sidebar-widget-wrapp {
        margin-top: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-sidebar-details .sidebar-widget:last-child {
        margin-bottom: 60px;
    }
}

.sidebar-widget-content ul {
    list-style: none;
}

.sidebar-widget-content ul li:not(:last-child) {
    margin-bottom: 9px;
}

.sidebar-widget-content ul li a {
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    padding: 16px 18px;
    color: var(--ot-title-primary);
    display: inline-block;
    text-transform: capitalize;
    border: 1px solid var(--ot-border-primary);
    border-radius: 8px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .sidebar-widget-content ul li a {
        padding: 16px;
    }
}

@media (max-width: 575px) {
    .sidebar-widget-content ul li a {
        font-size: 16px;
    }
}

.sidebar-widget-content ul li a:hover {
    color: var(--ot-white-common);
    border-color: var(--ot-theme-primary);
    background: var(--ot-theme-primary);
}

.sidebar-widget-content ul li a:hover .sidebar-widget-icon {
    filter: brightness(0) invert(1);
}

.sidebar-widget-title {
    position: relative;
    color: var(--ot-title-primary);
    font-size: 22px;
    font-weight: 600;
    padding-bottom: 15px;
    text-transform: capitalize;
}

.sidebar-widget-title::after {
    position: absolute;
    width: 40px;
    height: 5px;
    bottom: 0;
    left: 0;
    content: "";
    background: var(--ot-theme-primary);
    border-radius: 100px;
}

.sidebar-widget-icon {
    margin-right: 12px;
}

.sidebar-widget-info {
    padding: 40px;
    line-height: 1;
    border-radius: 12px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .sidebar-widget-info {
        padding: 30px;
    }
}

@media (max-width: 575px) {
    .sidebar-widget-info {
        padding: 24px;
    }
}

.sidebar-widget-info-shape {
    position: absolute;
    bottom: 0;
    right: 0;
}

.sidebar-widget-info-title {
    font-size: 22px;
    font-weight: 700;
    text-transform: capitalize;
}

.sidebar-widget-text {
    color: #e9ebf8;
    text-transform: capitalize;
}

.sidebar-widget-btn .ot-btn-primary {
    padding: 11.5px 33px;
    border-radius: 6px;
}

.sidebar-widget-btn2 .ot-btn-primary:hover::before {
    width: 161%;
}

.sidebar-widget-download-box {
    display: flex;
    padding: 8px 20px 8px 8px;
    border-radius: 8px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #e8ebf5;
    background: #f8f9fd;
}

.sidebar-widget-download-box:not(:last-child) {
    margin-bottom: 8px;
}

.sidebar-widget-download-icon {
    width: 45px;
    height: 45px;
    line-height: 42px;
    text-align: center;
    display: inline-block;
    background: var(--ot-theme-primary);
    border-radius: 6px;
    margin-right: 10px;
}

.sidebar-widget-download-text {
    color: var(--ot-title-primary);
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
}

.sidebar-widget-download-link i {
    font-size: 20px;
    color: var(--ot-title-primary);
}

.sidebar-widget-table {
    padding: 35px 30px 0 30px;
    border: 1px solid #e5e5e5;
    background-color: #f5f5f5;
    border-radius: 15px;
}

.sidebar-widget-contact-box {
    width: 100%;
    display: inline-block;
    padding: 19px;
    background: var(--ot-theme-primary);
    border-radius: 8px;
}

.sidebar-widget-contact-box:not(:last-child) {
    margin-bottom: 8px;
}

.sidebar-widget-contact-icon {
    margin-right: 10px;
}

.sidebar-widget-contact-text {
    font-size: 18px;
    font-weight: 500;
    color: var(--ot-white-common);
    text-transform: capitalize;
    margin-bottom: 0;
}

.sidebar-widget-categorie ul {
    list-style: none;
}

.sidebar-widget-categorie ul li a {
    color: var(--ot-title-primary);
    font-size: 17px;
    font-weight: 500;
    text-transform: capitalize;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.sidebar-widget-categorie ul li a:hover {
    color: var(--ot-theme-primary);
}

.sidebar-widget-categorie ul li a:hover span {
    color: var(--ot-theme-primary);
}

.sidebar-widget-categorie ul li a span {
    color: #4b4b4b;
    font-size: 16px;
    font-weight: 400;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.sidebar-widget-categorie ul li:not(:last-child) {
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #dee0ec;
}

.sidebar-table-style tr:last-child {
    border: transparent;
}

.sidebar-table-style tr td {
    padding: 12px 0;
    background-color: transparent;
}

.sidebar-tag-title {
    color: var(--ot-title-primary);
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
}

.sidebar-tag-name {
    color: #4b4b4b;
}

.sidebar-social-icon {
    font-size: 15px;
    color: var(--ot-body-primary);
}

.sidebar-social-icon:hover {
    color: var(--ot-theme-primary);
}

.sidebar-social-icon:not(:last-child) {
    margin-right: 10px;
}

.sidebar-search-input {
    position: relative;
}

.sidebar-search-input input {
    height: 60px;
    padding-right: 70px;
    border: 1px solid #e0e1e9;
    border-radius: 6px;
    text-transform: capitalize;
}

.sidebar-search-btn {
    position: absolute;
    width: 50px;
    height: 50px;
    right: 6px;
    top: 50%;
    font-size: 24px;
    line-height: 55px;
    transform: translateY(-50%);
    text-align: center;
    color: var(--ot-white-common);
    background: var(--ot-theme-primary);
    border-radius: 5px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.sidebar-search-btn img {
    filter: brightness(0) invert(1);
}

.sidebar-search-btn:hover {
    background: var(--ot-title-primary);
}

.tagcloud .tag {
    color: var(--ot-theme-primary);
    font-size: 14px;
    font-weight: 500;
    padding: 4px 16px;
    border-radius: 4px;
    display: inline-block;
    text-transform: capitalize;
    background-color: #ebf4ff;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.tagcloud .tag:hover {
    color: var(--ot-white-common);
    background-color: var(--ot-theme-primary);
}

.tagcloud .tag:not(:last-child) {
    margin-bottom: 5px;
    margin-right: 2px;
}

/*----------------------------------------*/
/* 5.3 Blog css
/*----------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-blog-wrapp .row [class*="col-"]:not(:last-child) .ot-blog-card {
        margin-bottom: 40px;
    }
}

.ot-blog-card {
    border-radius: 15px;
}

.ot-blog-card:hover .ot-img-hover::before {
    animation: shine 1s;
}

.ot-blog-card.purple-style .ot-blog-categorie {
    color: var(--ot-theme-purple);
    border: 1px solid var(--ot-theme-purple);
}

.ot-blog-card.purple-style .ot-blog-title {
    font-size: 24px;
}

@media (max-width: 575px) {
    .ot-blog-card.purple-style .ot-blog-title {
        font-size: 18px;
    }
}

.ot-blog-card.orange-style .ot-blog-categorie {
    color: var(--ot-theme-secondary);
    border: 1px solid var(--ot-theme-secondary);
}

.ot-blog-card.orange-style .ot-blog-title {
    font-size: 24px;
}

@media (max-width: 575px) {
    .ot-blog-card.orange-style .ot-blog-title {
        font-size: 18px;
    }
}

.ot-blog-thumb {
    margin-bottom: 20px;
}

.ot-blog-thumb a img {
    width: 100%;
    border-radius: 10px;
}

.ot-blog-metabox {
    gap: 8px;
    align-items: center;
}

@media (max-width: 575px) {
    .ot-blog-metabox {
        gap: 15px;
        margin-bottom: 20px;
    }
}

@media (max-width: 575px) {
    .ot-blog-meta-text {
        display: block;
        margin-bottom: 10px;
    }
}

.ot-blog-meta-text {
    color: var(--ot-title-primary);
}

.ot-blog-meta-text .meta-icon {
    margin-top: -5px;
}

.ot-blog-categorie {
    border-radius: 100px;
    padding: 4px 15px;
    color: var(--ot-theme-primary);
    border: 1px solid var(--ot-theme-primary);
}

.ot-blog-title {
    font-size: 40px;
    line-height: 1.2;
    text-transform: capitalize;
    color: var(--ot-title-primary);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-blog-title {
        font-size: 24px;
    }
}

@media (max-width: 575px) {
    .ot-blog-title {
        font-size: 18px;
    }
}

.ot-blog-item2 {
    border: 0;
    padding: 0;
    border-radius: 15px;
    border: 1px solid var(--ot-border-primary);
}

.ot-blog-item2 .ot-blog-thumb {
    margin-bottom: 0;
}

.ot-blog-item2 .ot-blog-thumb img {
    object-fit: cover;
    width: 100%;
    height: 354px;
    border-radius: 15px 15px 0 0;
}

.ot-blog-item2 .ot-blog-metabox {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
}

.ot-blog-item2 .ot-blog-meta-text {
    padding: 10px 17px 10px 26px;
    color: var(--ot-white-primary);
    background: var(--ot-theme-primary);
    clip-path: polygon(10% 0%, 100% 0, 100% 100%, 0% 100%);
}

.ot-blog-item2 .ot-blog-meta-text > img {
    filter: brightness(0);
}

.ot-blog-item2 .ot-blog-content {
    padding: 28px;
    border-top: 0;
}

@media (max-width: 575px) {
    .ot-blog-item2 .ot-blog-content {
        padding: 20px;
    }
}

.ot-blog-item2 .ot-blog-title {
    font-size: 22px;
}

@media (max-width: 575px) {
    .ot-blog-item2 .ot-blog-title {
        font-size: 18px;
    }
}

.ot-blog-item2 .ot-blog-tag {
    position: static;
    padding: 2px 11px;
    color: var(--ot-title-primary);
    background: #f8f8f8;
    display: inline-block;
    text-transform: capitalize;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-blog-titlebox2 .ot-section-title br {
        display: none;
    }
}

.ot-blog-titlebox2 .ot-sec-text {
    margin-bottom: 0;
}

.ot-blog-user {
    display: flex;
    gap: 9px;
    align-items: center;
    margin-top: 5px;
}

.ot-blog-user-img {
    width: 36px;
    height: 36px;
    border-radius: 100px;
}

.ot-blog-user-comment {
    font-weight: 500;
    margin-bottom: 0;
    color: var(--ot-body-primary);
}

.ot-blog-user-comment > span {
    color: #9597c8;
}

.ot-blog-content-top {
    flex: 1 1 auto;
}

/*----------------------------------------*/
/* 5.1 Recent Post css
/*----------------------------------------*/
.rc-post {
    gap: 24px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .rc-post {
        gap: 10px;
    }
}

.rc-post:not(:last-child) {
    margin-bottom: 30px;
}

.rc-post:hover .ot-img-hover::before {
    animation: shine 1s;
}

.rc-post-title {
    color: var(--ot-title-primary);
    font-size: 18px;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .rc-post-title {
        font-size: 16px;
    }
}

.rc-post-title:hover {
    color: var(--ot-theme-primary);
}

.rc-post-thumb {
    flex: 0 0 auto;
}

.rc-post-thumb a img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
}

.rc-post-meta {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.rc-post-meta span {
    color: #4b4b4b;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
    margin-left: 5px;
}

.rc-post-meta .rc-calender-icon {
    margin-top: 4px;
}

/*----------------------------------------*/
/* 6.1 Footer Style 1
/*----------------------------------------*/
.ot-footer-layout1 {
    position: relative;
    margin-top: -100px;
    padding-top: 260px;
    overflow: hidden;
}

.ot-footer-social-list {
    list-style: none;
}

.ot-footer-social-list li {
    display: inline-block;
}

.ot-footer-social-list li:not(:last-child) {
    margin-right: 5px;
}

.ot-footer-social-list li a {
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    display: inline-block;
    color: var(--ot-white-primary);
    border: 1px solid var(--ot-white-primary);
    border-radius: 100px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.ot-footer-social-list li a:hover {
    color: var(--ot-theme-primary);
    border: 1px solid var(--ot-theme-primary);
}

.ot-footer-text .ot-sec-text {
    color: var(--ot-white-primary);
    max-width: 490px;
}

.ot-footer-brand {
    display: flex;
    gap: 8px;
}

.ot-footer-brand a img {
    border-radius: 8px;
}

.ot-footer-widget-title {
    font-size: 20px;
    color: var(--ot-white-primary);
}

.ot-footer-widget-link ul {
    list-style: none;
}

.ot-footer-widget-link ul li {
    display: block;
}

.ot-footer-widget-link ul li a {
    color: var(--ot-white-primary);
}

.ot-footer-widget-link ul li:not(:last-child) {
    margin-bottom: 10px;
}

.ot-footer-info-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--ot-white-primary);
}

.ot-footer-info-title .footer-info-icon {
    margin-right: 5px;
}

.ot-footer-info-location {
    color: var(--ot-white-primary);
}

.ot-footer-tringle-left,
.ot-footer-tringle-right {
    position: absolute;
}

.ot-footer-tringle-left {
    top: 100px;
    left: 100px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .ot-footer-tringle-left {
        top: 26%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px) {
    .ot-footer-tringle-left {
        top: 20%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .ot-footer-tringle-left {
        left: 20px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-footer-tringle-left {
        top: 13%;
        left: 30px;
    }
}

.ot-footer-tringle-right {
    bottom: 100px;
    right: 150px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .ot-footer-tringle-right {
        right: 60px;
    }
}

@media (max-width: 575px) {
    .ot-footer-tringle-right {
        right: 30px;
    }
}

.footer-col-1-2 {
    margin-left: 15px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .footer-col-1-2 {
        margin-left: 0;
    }
}

.footer-col-1-3 {
    margin-left: 80px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .footer-col-1-3 {
        margin-left: 30px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .footer-col-1-3 {
        margin-left: 0;
    }
}

.footer-col-1-4 {
    margin-left: 150px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .footer-col-1-4 {
        margin-left: 60px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .footer-col-1-4 {
        margin-left: 0;
    }
}

.ot-copyright-space {
    padding: 5px 0;
}

.ot-copyright-text {
    font-size: 14px;
    color: var(--ot-white-primary);
    margin-bottom: 0;
}

.ot-copyright-text a {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.ot-copyright-text a:hover {
    color: var(--ot-theme-yellow);
}

.ot-copyright-policy a {
    font-size: 14px;
    color: var(--ot-white-primary);
}

/*----------------------------------------*/
/* 7.1 Hero css
/*----------------------------------------*/
.ot-hero-style-1 {
    max-height: 800px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .ot-hero-style-1 {
        max-height: 827px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-hero-style-1 {
        max-height: 100%;
    }
}

.ot-hero-title {
    position: relative;
    font-size: 56px;
    font-weight: 900;
    line-height: 1.7;
    color: var(--ot-title-primary);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
    only screen and (min-width: 768px) and (max-width: 991px) {
    .ot-hero-title {
        font-size: 45px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .ot-hero-title {
        font-size: 35px;
    }
}

@media (max-width: 575px) {
    .ot-hero-title {
        font-size: 23px;
    }
}

.ot-hero-title .meetup {
    padding: 0 6px;
    border-radius: 12px;
    margin-right: 10px;
    background: rgba(230, 82, 31, 0.3);
}

.ot-hero-title .conferences {
    padding: 0 6px;
    border-radius: 12px;
    margin-left: 10px;
    background: rgba(252, 9, 124, 0.3);
}

.ot-hero-content {
    padding-top: 100px;
    padding-bottom: 267px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px) {
    .ot-hero-content {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-hero-content {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

.ot-hero-content .ot-sec-text {
    max-width: 789px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-hero-content .ot-sec-text {
        margin: auto;
    }
}

.ot-hero-infobox {
    gap: 19px;
    padding: 10px 20px;
    max-width: 759px;
    border-radius: 100px;
    border: 1px solid var(--ot-border-primary);
    padding-right: 10px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-hero-infobox {
        text-align: start;
        margin: 30px auto;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-hero-infobox {
        padding-bottom: 24px;
        border-radius: 10px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-hero-infobox {
        padding: 0;
    }
}

.ot-hero-info-item-wrapp {
    gap: 20px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .ot-hero-info-item-wrapp {
        gap: 15px;
    }
}

.ot-hero-info-icon {
    position: absolute;
    font-size: 24px;
    flex: 0 0 auto;
    line-height: 0;
    color: var(--ot-theme-primary);
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-hero-info-icon {
        left: 20px;
    }
}

.ot-hero-info-search-icon {
    font-size: 24px;
    line-height: 0;
    color: var(--ot-white-primary);
}

.ot-hero-info-search-box {
    width: 56px;
    height: 56px;
    line-height: 1;
    text-align: center;
    border-radius: 100px;
    background: var(--ot-theme-primary);
    flex: 0 0 auto;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-hero-info-search-box {
        width: 100%;
        border-radius: 0 0 10px 10px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-hero-info-choose {
        width: 100%;
    }
}

.ot-hero-info-choose .nice-select {
    border: 0;
}

.ot-hero-info-choose .nice-select:focus {
    border: 0;
}

.ot-hero-info-choose .list {
    width: auto;
    right: auto;
    left: 0;
}

.ot-hero-info-item {
    position: relative;
    min-width: 191px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .ot-hero-info-item {
        min-width: 172px;
    }
}

@media (max-width: 767px) {
    .ot-hero-info-item {
        min-width: 100%;
        padding: 10px 0px;
    }
}

.ot-hero-info-item:not(:last-child)::after {
    position: absolute;
    width: 1px;
    height: 35px;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    content: "";
    background: var(--ot-border-primary);
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-hero-info-item:not(:last-child)::after {
        width: 100%;
        height: 1px;
        top: auto;
        bottom: 0;
    }
}

.ot-hero-info-input input {
    border: 0;
    padding-right: 20px;
    padding-left: 35px;
    color: var(--ot-title-primary);
}

.ot-hero-info-input .nice-select-search-box {
    width: 100%;
}

.ot-hero-info-input .nice-select.open .list {
    width: 100%;
}

.ot-hero-info-input .nice-select-search-box input {
    padding-left: 20px;
    height: 37px;
}

.ot-hero-info-input .nice-select.open .nice-select-search-box {
    top: 100%;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .ot-hero-info-input input {
        padding-left: 60px;
    }
}

@media (max-width: 575px) {
    .ot-hero-info-input input {
        padding-left: 60px;
    }
}

.ot-hero-info-input input::placeholder {
    color: var(--ot-title-primary);
}

.ot-hero-info-input input:focus {
    outline: 0;
    border: 0;
    background: none;
}

.ot-hero-info-input .nice-select {
    width: 100%;
    height: 80px;
    line-height: 80px;
    padding-left: 40px;
    border: 0;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .ot-hero-info-input .nice-select {
        height: 45px;
        line-height: 45px;
        padding-left: 50px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-hero-info-input .nice-select {
        height: 45px;
        line-height: 45px;
        padding-left: 60px;
    }
}

.ot-hero-info-input .nice-select::after {
    right: 20px;
}

.ot-hero-info-input .nice-select:focus {
    border: 0;
}

.ot-hero-info-input .list {
    width: 100%;
    max-height: 250px;
    margin-top: 0;
    right: 0;
    left: 0;
    top: 146%;
    padding: 0;
    overflow-y: scroll;
    border-radius: 0 0 5px 5px;
}

@media (max-width: 575px) {
    .ot-hero-info-input .list {
        left: 0;
        top: 105%;
        text-align: center;
        margin: auto;
    }
}

.ot-hero-info-input .list .nice-search-li {
    padding-top: 0;
    height: 50px;
    line-height: 1;
    background: var(--ot-theme-primary);
    border-color: 1px solid var(--ot-theme-primary);
}

.ot-hero-info-input .list .nice-search-li input {
    color: var(--ot-white-common);
    line-height: 36px;
    min-height: 36px;
    padding-left: 20px;
}

.ot-hero-info-input .list .nice-search-li input::placeholder {
    color: var(--ot-white-common);
}

.ot-hero-info-input .list .nice-search-li:not(:last-child) {
    border-bottom: 1px solid rgba(190, 190, 190, 0.2);
}

.ot-hero-info-input .list::-webkit-scrollbar {
    width: 0;
}

.ot-hero-info-input .list .option {
    padding-top: 0;
    line-height: 36px;
    min-height: 36px;
}

.ot-hero-info-input .list .option:not(:last-child) {
    border-bottom: 1px solid rgba(190, 190, 190, 0.2);
}

.ot-hero-info-input .list .option:hover {
    border-color: 1px solid var(--ot-theme-primary);
    color: var(--ot-white-common);
    background: var(--ot-theme-primary);
}

.ot-hero-review-wrapp {
    max-width: 759px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-hero-review-wrapp {
        margin: 30px auto;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-hero-review-wrapp {
        flex-wrap: wrap;
    }
}

.ot-hero-review-box {
    gap: 60px;
    width: 66%;
    position: relative;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .ot-hero-review-box {
        gap: 30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-hero-review-box {
        gap: 18px;
        margin-bottom: 20px;
    }
}

.ot-hero-review-box::after {
    position: absolute;
    width: 1px;
    height: 75px;
    right: 15px;
    bottom: 0;
    content: "";
    background: var(--ot-border-primary);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .ot-hero-review-box::after {
        right: 30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-hero-review-box::after {
        display: none;
    }
}

@media (max-width: 575px) {
    .ot-hero-review-item {
        margin-bottom: 20px;
    }
}

.ot-hero-review-title {
    font-size: 20px;
}

@media (max-width: 575px) {
    .ot-hero-review-title {
        font-size: 16px;
    }
}

.ot-hero-review-text {
    margin-bottom: 0;
}

.ot-hero-review-icon {
    color: var(--ot-theme-secondary);
}

.ot-hero-os {
    gap: 8px;
}

.ot-hero-os img {
    border-radius: 8px;
}

.ot-hero-slider-wrapp {
    gap: 18px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-hero-slider-wrapp .ot-rolling-2-active {
        overflow: visible;
    }
}

.ot-hero-thumb-item {
    margin-bottom: 15px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-hero-thumb-item {
        margin-bottom: 5px;
    }
}

.ot-hero-thumb-item img {
    border-radius: 30px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-hero-thumb-item img {
        width: 180px;
        height: 180px;
        object-fit: cover;
    }
}

.ot-hero-shape {
    position: absolute;
    top: 50%;
    left: -25px;
    transform: translateY(-50%);
    animation: rotate1 8s linear infinite;
}

@media only screen and (min-width: 1600px) and (max-width: 1699px) {
    .ot-hero-shape {
        left: -45px;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .ot-hero-shape {
        top: 58%;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px),
    only screen and (min-width: 1200px) and (max-width: 1399px) {
    .ot-hero-shape {
        display: none;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-hero-shape {
        top: 25%;
    }
}

.ot-hero-clude-shape {
    position: absolute;
    bottom: -60px;
    z-index: 5;
}

.ot-hero-tweezers {
    position: absolute;
    top: -25%;
    right: 30%;
    animation: otswing 1s forwards infinite alternate;
    transform-origin: bottom center;
}

@media (max-width: 575px) {
    .ot-hero-tweezers {
        top: -50%;
        right: 9%;
    }
}

.ot-circle-text-wrapp {
    height: 170px;
    width: 170px;
    line-height: 170px;
    border-radius: 50%;
    border: 34px solid var(--ot-white-common);
}

@media (max-width: 575px) {
    .ot-circle-text-wrapp {
        text-align: center;
        margin: auto;
    }
}

.ot-circle-icon2 {
    position: absolute;
    width: 65.2px;
    height: 65.2px;
    line-height: 65.2px;
    text-align: center;
    margin: auto;
    top: 45%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    background: var(--ot-theme-primary);
    border-radius: 100px;
    z-index: 2;
}

.ot-circle-icon {
    position: absolute;
    width: 86px;
    height: 86px;
    line-height: 86px;
    left: 0;
    right: 0;
    top: 50%;
    text-align: center;
    margin: auto;
    transform: translateY(-50%);
    background: var(--ot-theme-primary);
    border-radius: 100px;
    z-index: 3;
}

.ot-circle-text {
    position: relative;
    display: inline-block;
    min-height: 170px;
    min-width: 170px;
    bottom: 34px;
    right: 34px;
    border-radius: 50%;
    z-index: 1;
    font-size: 16px;
    font-weight: 600;
    color: var(--ot-title-primary);
    text-align: center;
    transform: rotate(30deg);
    text-transform: uppercase;
    animation: spin 10s infinite alternate-reverse;
}

.ot-circle-text span {
    position: absolute;
    --rotate-letter: 10deg;
    min-height: 78px;
    min-width: 78px;
    top: 4px;
    left: 0;
    right: 0;
    text-align: center;
    text-transform: uppercase;
    margin: auto;
    transform-origin: bottom center;
    transform: rotate(var(--rotate-letter));
}

.ot-circle-text span.char2 {
    transform: rotate(calc(var(--rotate-letter) * 2));
}

.ot-circle-text span.char3 {
    transform: rotate(calc(var(--rotate-letter) * 3));
}

.ot-circle-text span.char4 {
    transform: rotate(calc(var(--rotate-letter) * 4));
}

.ot-circle-text span.char5 {
    transform: rotate(calc(var(--rotate-letter) * 5));
}

.ot-circle-text span.char6 {
    transform: rotate(calc(var(--rotate-letter) * 6));
}

.ot-circle-text span.char7 {
    transform: rotate(calc(var(--rotate-letter) * 7));
}

.ot-circle-text span.char8 {
    transform: rotate(calc(var(--rotate-letter) * 8));
}

.ot-circle-text span.char9 {
    transform: rotate(calc(var(--rotate-letter) * 9));
}

.ot-circle-text span.char10 {
    transform: rotate(calc(var(--rotate-letter) * 10));
}

.ot-circle-text span.char11 {
    transform: rotate(calc(var(--rotate-letter) * 11));
}

.ot-circle-text span.char12 {
    transform: rotate(calc(var(--rotate-letter) * 12));
}

.ot-circle-text span.char13 {
    transform: rotate(calc(var(--rotate-letter) * 13));
}

.ot-circle-text span.char14 {
    transform: rotate(calc(var(--rotate-letter) * 14));
}

.ot-circle-text span.char15 {
    transform: rotate(calc(var(--rotate-letter) * 15));
}

.ot-circle-text span.char16 {
    transform: rotate(calc(var(--rotate-letter) * 16));
}

.ot-circle-text span.char17 {
    transform: rotate(calc(var(--rotate-letter) * 17));
}

.ot-circle-text span.char18 {
    transform: rotate(calc(var(--rotate-letter) * 18));
}

.ot-circle-text span.char19 {
    transform: rotate(calc(var(--rotate-letter) * 19));
}

.ot-circle-text span.char20 {
    transform: rotate(calc(var(--rotate-letter) * 20));
}

.ot-circle-text span.char21 {
    transform: rotate(calc(var(--rotate-letter) * 21));
}

.ot-circle-text span.char22 {
    transform: rotate(calc(var(--rotate-letter) * 22));
}

.ot-circle-text span.char23 {
    transform: rotate(calc(var(--rotate-letter) * 23));
}

.ot-circle-text span.char24 {
    transform: rotate(calc(var(--rotate-letter) * 24));
}

.ot-circle-text span.char25 {
    transform: rotate(calc(var(--rotate-letter) * 25));
}

.ot-circle-text span.char26 {
    transform: rotate(calc(var(--rotate-letter) * 26));
}

.ot-circle-text span.char27 {
    transform: rotate(calc(var(--rotate-letter) * 27));
}

.ot-circle-text span.char28 {
    transform: rotate(calc(var(--rotate-letter) * 28));
}

.ot-circle-text span.char29 {
    transform: rotate(calc(var(--rotate-letter) * 29));
}

.ot-circle-text span.char30 {
    transform: rotate(calc(var(--rotate-letter) * 30));
}

.ot-circle-text span.char31 {
    transform: rotate(calc(var(--rotate-letter) * 31));
}

.ot-circle-text span.char32 {
    transform: rotate(calc(var(--rotate-letter) * 32));
}

.ot-circle-text span.char33 {
    transform: rotate(calc(var(--rotate-letter) * 33));
}

.ot-circle-text span.char34 {
    transform: rotate(calc(var(--rotate-letter) * 34));
}

.ot-circle-text span.char35 {
    transform: rotate(calc(var(--rotate-letter) * 35));
}

.ot-circle-text span.char36 {
    transform: rotate(calc(var(--rotate-letter) * 36));
}

.ot-circle-text span.char37 {
    transform: rotate(calc(var(--rotate-letter) * 37));
}

.ot-circle-text span.char38 {
    transform: rotate(calc(var(--rotate-letter) * 38));
}

.ot-circle-text span.char39 {
    transform: rotate(calc(var(--rotate-letter) * 39));
}

.ot-circle-text span.char40 {
    transform: rotate(calc(var(--rotate-letter) * 40));
}

.ot-circle-text span.char41 {
    transform: rotate(calc(var(--rotate-letter) * 41));
}

.ot-circle-text span.char42 {
    transform: rotate(calc(var(--rotate-letter) * 42));
}

.ot-circle-text span.char43 {
    transform: rotate(calc(var(--rotate-letter) * 43));
}

.ot-circle-text span.char44 {
    transform: rotate(calc(var(--rotate-letter) * 44));
}

.ot-circle-text.circle-text2 {
    bottom: 0;
    right: 0;
}

/*----------------------------------------*/
/* 7.2 About css
/*----------------------------------------*/
.ot-about-style {
    position: relative;
    background-color: var(--ot-white-primary);
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-about-thumb {
        margin-bottom: 40px;
    }
}

.ot-about-thumb > img {
    border-radius: 40px;
}

.ot-about-thumb-btn {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    transform: translateY(-50%);
}

.ot-about-thumb-btn a:focus {
    outline: none;
    color: var(--ot-white-common);
}

.ot-about-titlebox .ot-sec-title {
    max-width: 441px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-about-titlebox .ot-sec-title {
        margin-bottom: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-about-titlebox .ot-sec-title {
        max-width: 100%;
    }
}

.ot-about-feature-icon {
    font-size: 46px;
    flex: 0 0 auto;
    line-height: 0;
    color: var(--ot-theme-primary);
}

.ot-about-feature-content {
    flex-wrap: wrap;
}

@media (max-width: 575px) {
    .ot-about-feature-content .ot-btn-primary {
        margin-top: 20px;
    }
}

.ot-about-feature-list {
    gap: 20px;
    margin-bottom: 36px;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px),
    only screen and (min-width: 1200px) and (max-width: 1399px),
    only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 576px) and (max-width: 767px) {
    .ot-about-feature-list {
        flex: 0 0 50%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-about-feature-list {
        gap: 5px;
    }
}

@media (max-width: 575px) {
    .ot-about-feature-list {
        margin-bottom: 15px;
    }
}

.ot-about-feature-text {
    font-size: 20px;
    font-weight: 600;
    color: var(--ot-title-primary);
    max-width: 236px;
    margin-bottom: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .ot-about-feature-text {
        font-size: 18px;
    }
}

@media (max-width: 575px) {
    .ot-about-feature-text {
        font-size: 16px;
        max-width: 100%;
    }
}

/*----------------------------------------*/
/* 7.1 Event css
/*----------------------------------------*/
.ot-event-card {
    position: relative;
    height: 100%;
    background: var(--ot-white-common);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 36px 0 rgba(0, 0, 0, 0.08);
}

.ot-event-card:hover .ot-event-thumb img {
    border-radius: 0;
}

.ot-event-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
    only screen and (min-width: 768px) and (max-width: 991px),
    (max-width: 575px) {
    .ot-event-content {
        padding: 12px;
    }
}

.ot-event-metabox {
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.ot-event-meta-info {
    gap: 10px;
    min-width: 200px;
    margin-bottom: 10px;
}

@media (max-width: 575px) {
    .ot-event-meta-info {
        margin-bottom: 10px;
    }
}

.ot-event-meta-icon {
    font-size: 24px;
    color: var(--ot-theme-primary);
}

.ot-event-meta-text {
    margin-bottom: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .ot-event-meta-text {
        font-size: 14px;
    }
}

.ot-event-thumb img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 12px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.ot-event-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--ot-title-primary);
}

@media (max-width: 575px) {
    .ot-event-title {
        font-size: 16px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .ot-event-social-box {
        gap: 10px;
    }
}

.ot-event-social-list {
    list-style: none;
}

.ot-event-social-list li {
    margin-right: 10px;
    display: inline-block;
}

.ot-event-share {
    font-size: 24px;
    color: var(--ot-theme-primary);
}

.ot-event-social-list.style-2 {
    position: absolute;
    right: -50px;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.3s;
}

.ot-event-social-list.style-2 li {
    display: block;
    margin-bottom: 5px;
}

.ot-event-social-list.style-2 li a {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    text-align: center;
    border-radius: 4px;
    display: inline-block;
    color: var(--ot-white-common);
    background-color: var(--ot-theme-primary);
    transition: 0.3s;
}

.ot-event-social-list.style-2 li:hover a {
    color: var(--ot-white-common);
    background-color: var(--ot-theme-purple);
}

.ot-event-whishlist.style-2 i {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    text-align: center;
    border-radius: 4px;
    display: inline-block;
    color: var(--ot-white-common);
    background-color: var(--ot-theme-primary);
    transition: 0.3s;
}

.ot-event-social-list.style-2 i:hover {
    color: var(--ot-white-common);
    background-color: var(--ot-theme-purple);
}

.ot-event-whishlist {
    font-size: 16px;
    color: var(--ot-theme-primary);
    transition: 0.3s;
}

.ot-event-whishlist i {
    transition: 0.3s;
}

.ot-event-option {
    gap: 25px;
}

@media (max-width: 575px) {
    .ot-event-btn {
        margin-bottom: 15px;
    }
}

.ot-event-card-2:hover .ot-event-social-list.style-2 {
    right: 0;
}

.ot-event-btn .ot-btn-primary {
    font-weight: 700;
}

@media (max-width: 575px) {
    .ot-event-btn .ot-btn-primary {
        padding: 8.5px 24px;
    }
}

.ot-event-btn .ot-btn-primary:hover {
    color: var(--ot-white-common);
}

.ot-event-card-shape {
    position: absolute;
    bottom: 0;
    right: 0;
}

.ot-event-shape {
    position: absolute;
    top: 18%;
    left: 0;
}

.ot-event-details-wrapp {
    padding: 32px;
    border-radius: 20px;
    background: var(--ot-white-common);
    box-shadow: 0 0 36px 0 rgba(0, 0, 0, 0.08);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
    (max-width: 575px) {
    .ot-event-details-wrapp {
        padding: 16px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-event-details-wrapp {
        margin-bottom: 16px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
    only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-event-details-wrapp .ot-sec-text br {
        display: none;
    }
}

.ot-event-details-thumb img {
    width: 100%;
    border-radius: 20px;
}

.ot-event-details-card {
    padding: 8px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 16px;
    border: 1px solid var(--ot-border-primary);
}

.ot-event-details-date,
.ot-event-details-card-icon {
    font-size: 24px;
    padding: 11px 0;
    color: var(--ot-theme-primary);
    background: #f4f5f8;
    text-transform: uppercase;
    border-radius: 8px;
}

.ot-event-details-card-title {
    font-size: 16px;
}

.ot-event-details-card-text {
    font-size: 14px;
    padding: 0 12px;
}

.ot-event-details-list {
    list-style: none;
    position: relative;
    padding-left: 20px;
}

.ot-event-details-list:not(:last-child) {
    margin-bottom: 20px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
    only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-event-details-list br {
        display: none;
    }
}

.ot-event-details-list-icon {
    position: absolute;
    left: 0;
    top: 5px;
}

.ot-event-details-title {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 0.64px;
}

@media (max-width: 575px) {
    .ot-event-details-title {
        font-size: 24px;
    }
}

.ot-event-widget-title {
    font-size: 24px;
    font-weight: 600;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-event-sidebar {
        margin-bottom: 15px;
    }
}

.ot-event-sidebar-info {
    list-style: none;
}

.ot-event-sidebar-widget {
    padding: 32px;
    border-radius: 20px;
    background: var(--ot-white-common);
    box-shadow: 0 0 36px 0 rgba(0, 0, 0, 0.08);
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .ot-event-sidebar-widget {
        width: 100%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .ot-event-sidebar-widget {
        padding: 16px;
        width: 100%;
    }
}

@media (max-width: 575px) {
    .ot-event-sidebar-widget {
        padding: 16px;
        min-width: 100%;
    }
}

.ot-event-sidebar-widget .ot-btn-primary {
    width: 100%;
    text-align: center;
}

.ot-event-sidebar-widget .ot-btn-primary:hover::before {
    height: 450px;
    width: 550px;
    left: -70px;
    top: -100px;
}

.ot-event-sidebar-list span {
    font-weight: 600;
    color: var(--ot-title-primary);
}

.ot-event-sidebar-list:not(:last-child) {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--ot-border-primary);
}

.ot-event-maps iframe {
    border-radius: 20px;
    min-width: 100%;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .ot-event-maps iframe {
        min-width: 440px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .ot-event-maps iframe {
        min-width: 375px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-event-maps iframe {
        min-width: 100%;
    }
}

.ot-event-ticketbox {
    padding: 35px 16px;
    padding-bottom: 5px;
    background: #f4f5f8;
    border-radius: 12px;
}

.ot-event-ticket-title {
    font-size: 20px;
    font-weight: 600;
    color: #9333ea;
    border-bottom: 1px dashed;
    padding-bottom: 28px;
    margin-bottom: 8px;
    line-height: 1.5;
}

.ot-event-ticket-title span {
    font-size: 14px;
    font-weight: 400;
    color: var(--ot-body-primary);
}

.ot-event-active {
    padding-bottom: 40px;
}

.ot-event-tab-button {
    display: inline-block;
}

@media (max-width: 575px) {
    .ot-event-tab-button {
        margin-bottom: 20px;
    }
}

.ot-event-tab {
    padding: 10px;
    background: var(--ot-white-common);
    border-radius: 16px;
}

.ot-event-tab .nav-link {
    font-weight: 600;
    border-radius: 8px;
    color: var(--ot-title-primary);
}

.ot-event-tab .nav-link.active {
    color: var(--ot-white-primary);
    background: var(--ot-theme-primary);
}

.ot-event-tab-list {
    position: relative;
}

.ot-event-tab-list:not(:last-child) {
    margin-right: 8px;
    padding-right: 8px;
}

@media (max-width: 575px) {
    .ot-event-tab-list:not(:last-child) {
        margin-right: 5px;
        padding-right: 5px;
    }
}

.ot-event-tab-list:not(:last-child)::after {
    position: absolute;
    width: 1px;
    height: 19px;
    top: 50%;
    right: 0;
    content: "";
    transform: translateY(-50%);
    background: var(--ot-border-primary);
}

.ot-event-filter .nice-select {
    padding-left: 5px;
    border: none;
    color: var(--ot-title-primary);
    border: none;
    background-color: transparent;
    padding-right: 15px;
}

.ot-event-filter .nice-select .list {
    min-width: 200px;
}

.ot-event-filter .nice-select::after {
    border-color: var(--ot-theme-primary);
}

.ot-event-filter .filter-btn {
    position: relative;
    font-weight: 500;
    color: var(--ot-title-primary);
    padding: 3.5px 14px;
    border: 1px solid transparent;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.ot-event-filter .filter-btn:not(:last-child) {
    margin-right: 32px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px) {
    .ot-event-filter .filter-btn:not(:last-child) {
        margin-right: 0;
    }
}

.ot-event-filter .filter-btn > span {
    position: absolute;
    font-size: 14px;
    padding: 0 5px;
    left: 16px;
    top: -18px;
    opacity: 0;
    visibility: hidden;
    color: var(--ot-theme-primary);
    background: var(--ot-white-primary);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.ot-event-filter .filter-btn.active {
    color: var(--ot-theme-primary);
    border: 1px solid var(--ot-theme-primary);
}

.ot-event-filter .filter-btn.active > span {
    opacity: 1;
    visibility: visible;
}

.ot-event-card-2 {
    padding: 16px;
    box-shadow: 0 0 36px 0 rgba(0, 0, 0, 0.08);
}

.ot-event-card-2:not(:last-child) {
    margin-bottom: 15px;
}

.ot-event-card-2 .card-shape {
    position: absolute;
    top: 0;
    right: 0;
}

.ot-event-card-2 .ot-event-thumb {
    flex: 0 0 auto;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-event-card-2 .ot-event-thumb {
        width: 100%;
    }
}

.ot-event-card-2 .ot-event-thumb img {
    width: 400px;
    height: 248px;
    object-fit: cover;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-event-card-2 .ot-event-thumb img {
        width: 100%;
        height: 100%;
    }
}

.ot-event-card-2 .ot-event-titlebox {
    max-width: 510px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-event-card-2 .ot-event-titlebox {
        max-width: 100%;
    }
}

.ot-event-card-2 .ot-event-thumb-tag {
    position: absolute;
    top: 10px;
    left: 15px;
    background-color: var(--ot-theme-green);
    font-size: 14px;
    color: var(--ot-white-common);
    padding: 2px 14px;
    border-radius: 100px;
}

.ot-event-card-2 .ot-event-content {
    padding: 0;
}

.ot-event-card-2 .ot-event-title {
    max-width: 330px;
    line-height: 1.6;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-event-card-2 .ot-event-title {
        max-width: 420px;
    }
}

.ot-event-meta-address {
    position: relative;
    padding-left: 20px;
}

.ot-event-meta-address i {
    position: absolute;
    top: 2px;
    left: 0;
}

.ot-event-card-2 .ot-event-meta-text {
    display: inline-block;
    line-height: 1.4;
    max-width: 455px;
}

.ot-event-cat-icon {
    font-size: 14px;
}

.ot-event-meta-info > i {
    position: absolute;
    top: 3px;
    left: 0;
    line-height: 1;
}

.ot-event-card-2 .ot-event-meta-info {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    line-height: 1;
    margin-bottom: 15px;
}

.ot-event-card-2 .ot-sec-text {
    color: var(--ot-title-primary);
    margin-bottom: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--ot-border-primary);
}

.ot-event-card-2 .ot-event-price {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 0;
    text-align: end;
    display: inline-block;
}

@media (max-width: 575px) {
    .ot-event-card-2 .ot-event-price {
        font-size: 24px;
        text-align: start;
    }
}

.ot-event-card-2 .ot-event-price-text {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    display: block;
    color: var(--ot-title-primary);
}

@media (max-width: 575px) {
    .ot-event-info {
        margin-bottom: 15px;
    }
}

.ot-event-card-2 .ot-event-info-title {
    color: var(--ot-black-common);
    font-weight: 600;
    margin-bottom: 0;
}

.ot-event-emptybox {
    background: var(--ot-white-common);
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    gap: 10px;
}

.ot-event-empty-icon {
    font-size: 18px;
    color: var(--ot-theme-primary);
}

.event-empty-text {
    color: var(--ot-theme-primary);
    margin-bottom: 0;
}

.card-body form select {
    height: 50px;
}

.card-body form select option:hover {
    background-color: var(--ot-theme-primary);
}

.card-body form select:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--ot-theme-primary);
}

.card-body form textarea {
    height: 100px;
}

.card-body form textarea:focus {
    border-color: var(--ot-theme-primary);
}

.ot-event-card-2 .ot-event-info-text {
    font-size: 14px;
}

.ot-event-info-avater .ot-event-bottom-img {
    max-width: 50px;
    max-height: 50px;
    object-fit: cover;
    border-radius: 100%;
}

.ot-filter .ot-login-btn {
    color: var(--ot-theme-primary);
    font-weight: 500;
}

.ot-event-sidebar-clear-btn {
    color: var(--ot-title-color);
    padding: 8px 16px;
    background: none;
}

.ot-event-sidebar-clear-btn.ot-btn-primary i {
    transform: rotate(0);
}

.ot-event-sidebar-title {
    font-size: 14px;
    color: var(--ot-black-common);
    font-weight: 500;
    display: block;
}

.ot-event-sidebar-widget {
    padding: 20px 16px;
    line-height: 1;
    border-radius: 12px;
    box-shadow: 0 0 36px 0 rgba(0, 0, 0, 0.08);
    background-color: var(--ot-white-common);
}

@media (max-width: 1199px) {
    .ot-event-sidebar-widget .ot-btn-primary {
        max-width: 300px;
    }
}

.ot-event-not-logged-in {
    padding: 20px 30px;
}

.ot-event-not-logged-in .ot-btn-primary {
    padding: 20px 37px;
}

.ot-event-not-logged-in .event-ticket-icon {
    font-size: 30px;
    width: 60px;
    height: 60px;
    line-height: 55px;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    border: 1.5px solid var(--ot-theme-primary);
    color: var(--ot-theme-primary);
    margin-bottom: 15px;
}

.ot-event-sidebar-widget .sidebar-widget-title {
    font-size: 14px;
    color: var(--ot-black-common);
    font-weight: 500;
    padding-bottom: 0;
    display: inline-block;
}

.ot-event-sidebar-widget .sidebar-widget-title::after {
    display: none;
}

.ot-event-sidebar-widget .sidebar-tag {
    padding: 8px 17px;
    color: var(--ot-body-primary);
    font-size: 14px;
    border-radius: 12px;
    display: inline-block;
    border: 1px solid var(--ot-border-primary);
    cursor: pointer;
}

.ot-event-sidebar-widget .sidebar-tag:not(:last-child) {
    margin-right: 5px;
    margin-bottom: 9px;
}

.ot-event-sidebar-widget .sidebar-tag:hover {
    background: var(--ot-theme-primary);
    color: var(--ot-white-common);
    border: 1px solid var(--ot-theme-primary);
}

.ot-event-sidebar-widget .sidebar-tag.active {
    background: var(--ot-theme-primary);
    color: var(--ot-white-common);
    border: 1px solid var(--ot-theme-primary);
}

.ot-event-sidebar-widget .sidebar-widget-datebox {
    gap: 10px;
}

@media (max-width: 1199px) {
    .ot-event-sidebar-widget .sidebar-widget-datebox .sidebar-widget-input {
        margin-bottom: 10px;
    }
}

@media (max-width: 1199px) {
    .ot-event-sidebar.user-sidebar {
        overflow: hidden;
        overflow-y: scroll;
        border-radius: 0;
    }
}

.p-static {
    position: static !important;
}

.ot-event-sidebar-widget .sidebar-widget-input input {
    border-radius: 12px;
    width: 100%;
}

.ot-event-sidebar-widget .sidebar-widget-input-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.ot-event-sidebar-select .nice-select {
    width: 100%;
    border: 1px solid var(--ot-border-primary);
    border-radius: 12px;
}

.ot-event-sidebar-select .nice-select::after {
    right: 20px;
}

.ot-event-sidebar-select .nice-select .list {
    width: 100%;
    padding-top: 9px;
    max-height: 250px;
    overflow: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
}

.ot-event-sidebar-select .nice-select .list .nice-search-li input {
    border-radius: 5px 5px 0px 0px;
    border-color: rgba(190, 190, 190, 0.2);
    background: var(--ot-theme-primary);
    color: var(--ot-white-common);
}

.ot-event-sidebar-select .nice-select .list .nice-search-li input::placeholder {
    color: var(--ot-white-common);
}

.ot-event-sidebar-select .nice-select .list li:hover {
    background: var(--ot-theme-primary);
    color: var(--ot-white-common);
    border-color: var(--ot-theme-primary);
}

.ot-event-sidebar-select .nice-select .list li:not(:last-child) {
    border-bottom: 1px solid rgba(190, 190, 190, 0.2);
}

.ot-event-sidebar-select .nice-select .list li:not(:first-child) {
    padding-top: 5px;
    padding-bottom: 5px;
}

.ot-event-filter-tagbox {
    background-color: var(--ot-white-common);
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 0 36px 0 rgba(0, 0, 0, 0.08);
}

.filter-tag {
    padding: 3px 16px;
    border-radius: 12px;
    color: var(--ot-white-common);
    background-color: var(--ot-theme-purple);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.filter-tag:not(:last-child) {
    margin-right: 10px;
}

.filter-tag i {
    margin-top: 5px;
}

.event-slide-btn .ot-btn-primary {
    background-color: var(--ot-white-common);
}

.event-slide-btn .ot-btn-primary:hover {
    border-color: var(--ot-dark-pink);
}

.ot-range-wrapper .ot-slider-container {
    position: relative;
    height: 20px;
    margin-bottom: 8px;
}

.ot-range-wrapper .ot-slider-container .ot-slider-track {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(
        to right,
        var(--ot-theme-primary) 0%,
        var(--ot-theme-primary) 70%,
        var(--ot-smoke-primary) 70%
    );
    transform: translateY(-50%);
    z-index: 1;
}

.ot-range-wrapper .ot-slider-container input[type="range"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 8px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.ot-range-wrapper
    .ot-slider-container
    input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: 10px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: var(--ot-white-common);
    border: 3px solid var(--ot-theme-primary);
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

.ot-range-wrapper .ot-slider-container input[type="range"]::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: var(--ot-white-common);
    border: 3px solid var(--ot-theme-primary);
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

.ot-range-wrapper .ot-price-labels {
    width: 100%;
    display: flex;
    justify-content: space-between;
    color: var(--ot-black-common);
}

.ot-organizer-content {
    gap: 19px;
}

@media (max-width: 575px) {
    .ot-organizer-icon {
        margin-bottom: 15px;
    }
}

.ot-organizer-title {
    color: var(--ot-title-primary);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0;
}

.ot-organizer-icon a img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 100%;
}

.ot-organizer-ratting-icon {
    color: var(--ot-theme-primary);
}

.ot-organizer-ratting-number {
    color: var(--ot-title-primary);
}

.ot-organizer-listbox {
    list-style: none;
}

@media (max-width: 575px) {
    .ot-organizer-listbox {
        margin-bottom: 15px;
    }
}

.ot-organizer-list {
    position: relative;
    font-size: 15px;
    padding-left: 30px;
    color: var(--ot-title-primary);
}

.ot-organizer-list:not(:last-child) {
    margin-bottom: 5px;
}

.ot-organizer-list i {
    font-size: 16px;
    color: var(--ot-theme-primary);
}

.ot-organizer-meta-icon {
    position: absolute;
    left: 0;
}

.ot-organizer-left {
    gap: 17px;
}

.ot-organizer-follow-box {
    gap: 12px;
}

@media only screen and (min-width: 576px) and (max-width: 991px),
    (max-width: 575px) {
    .ot-organizer-follow-box {
        margin-bottom: 15px;
    }
}

.ot-organizer-follow-box .ot-btn-primary {
    padding: 6px 15px;
}

.ot-organizer-message {
    width: 38px;
    height: 38px;
    font-size: 20px;
    line-height: 38px;
    text-align: center;
    color: var(--ot-theme-primary);
    border: 1px solid var(--ot-theme-primary);
    display: inline-block;
    border-radius: 100px;
    flex: 0 0 auto;
}

.ot-organizer-details-thumb > img {
    object-fit: cover;
    max-height: 594px;
    border-radius: 20px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-organizer-details-thumb > img {
        min-height: 250px;
        object-fit: cover;
    }
}

.ot-organizer-bottom .ot-feature-listbox {
    padding-bottom: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-organizer-bottom .ot-feature-listbox {
        padding-bottom: 32px;
    }
}

.ot-organizer-bottom .ot-feature-listbox ul li {
    margin-bottom: 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .ot-organizer-bottom .ot-feature-listbox ul li:not(:last-child) {
        margin-bottom: 15px;
    }
}

.ot-organizer-brand {
    position: absolute;
    bottom: -52px;
    left: 37px;
    width: 140px;
    height: 140px;
    text-align: center;
    background: var(--ot-theme-primary);
    border: 5px solid var(--ot-white-primary);
}

.ot-organizer-brand img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.ot-organizer-right {
    gap: 24px;
}

.ot-organizer-review-box {
    padding: 24px;
    background: var(--ot-white-common);
    border-radius: 20px;
}

.ot-organizer-review-item {
    gap: 12px;
    flex: 0 0 auto;
}

.ot-organizer-review-item:not(:last-child) {
    margin-right: 25px;
    padding-right: 28px;
    border-right: 1px solid var(--ot-border-primary);
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .ot-organizer-review-item:not(:last-child) {
        margin-right: 15px;
        padding-right: 18px;
    }
}

@media (max-width: 575px) {
    .ot-organizer-review-item:not(:last-child) {
        padding: 0;
        margin: 0;
        margin-bottom: 15px;
        padding-bottom: 18px;
        border: 0;
        border-bottom: 1px solid var(--ot-border-primary);
    }
}

.ot-organizer-review-content .ot-sec-text {
    line-height: 1;
}

.ot-organizer-review-number {
    font-weight: 600;
    color: var(--ot-title-primary);
}

.ot-ticket-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
}

.ot-ticket-table thead tr {
    border: 0;
}

.ot-ticket-table thead th {
    font-weight: 500;
    font-size: 13px;
    text-align: left;
    padding: 0;
    color: var(--ot-title-primary);
    background: none;
    border: 0;
}

.ot-ticket-table td {
    vertical-align: baseline;
    padding: 0;
    background: none;
    border-radius: 0;
    border: 0;
}

.ot-ticket-price span {
    font-weight: 600;
    font-size: 16px;
    color: #222;
}

.ot-ticket-quantity {
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ddd;
    border-radius: 6px;
    max-width: 150px;
}

.ot-ticket-input[type="text"] {
    width: 32px;
    text-align: center;
    border: none;
    font-size: 14px;
    font-weight: 500;
    padding: 0;
    background: transparent;
    pointer-events: none;
}

.ot-ticket-minus,
.ot-ticket-plus {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ot-ticket-minus svg,
.ot-ticket-plus svg {
    stroke: #333;
}

.ot-ticket-minus:hover svg,
.ot-ticket-plus:hover svg {
    stroke: #007bff;
}

.ot-ticket-subtotal span {
    font-weight: 600;
    font-size: 16px;
    color: #222;
}

.ot-ticket-price,
.ot-ticket-quantity-wrapp,
.ot-ticket-subtotal {
    text-align: center;
    vertical-align: middle;
}

.ot-ticket-price {
    text-align: start;
}

.ot-ticket-quantity {
    text-align: start;
}

.ot-ticket-total {
    font-weight: 600;
    color: var(--ot-title-primary);
}

.ot-ticket-total-quantity {
    font-weight: 600;
    color: var(--ot-title-primary);
}

.ot-booking-wrapp {
    margin-right: 48px;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px),
    only screen and (min-width: 1200px) and (max-width: 1399px),
    only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-booking-wrapp {
        margin-right: auto;
    }
}

.ot-booking-infobox {
    border: 1px solid var(--ot-border-primary);
    border-radius: 20px;
    padding: 32px;
}

@media (max-width: 575px) {
    .ot-booking-infobox {
        padding: 20px;
    }
}

.ot-booking-info-title {
    font-size: 24px;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-booking-info-title {
        margin-bottom: 20px;
    }
}

.ot-booking-attendee-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--ot-title-primary);
    margin-bottom: 15px;
}

.ot-booking-inputbox label {
    font-size: 14px;
    font-weight: 400;
    color: var(--ot-title-primary);
}

.ot-booking-inputbox label span {
    color: var(--ot-theme-primary);
}

.ot-booking-inputbox input {
    height: 40px;
    border: 1px solid var(--ot-border-primary);
    border-radius: 8px;
}

.ot-booking-inputbox input::placeholder {
    font-size: 14px;
    color: var(--ot-border-primary);
}

.ot-booking-card {
    border-radius: 12px;
    background: #f4f5f8;
    padding: 16px 22px;
}

.ot-booking-card-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--ot-title-primary);
}

.ot-booking-card-type input {
    position: relative;
    top: 4.9px;
    width: 16px;
    height: 16px;
    border-radius: 30px;
    border: 1px solid var(--ot-theme-primary);
}

.ot-booking-card-type input[type="radio"]:after {
    width: 16px;
    height: 16px;
    border-radius: 30px;
    top: -2px;
    position: relative;
    content: "";
    display: inline-block;
    visibility: visible;
    background: #f4f5f8;
    border: 1px solid var(--ot-theme-primary);
}

.ot-booking-card-type input[type="radio"]:checked:after {
    width: 10px;
    height: 10px;
    border-radius: 30px;
    top: -5px;
    left: 3px;
    position: relative;
    background-color: var(--ot-theme-primary);
    content: "";
    display: inline-block;
    visibility: visible;
}

@media (max-width: 575px) {
    .ot-booking-card-type {
        margin-bottom: 10px;
    }
}

.ot-booking-card-input input {
    border: 0;
    padding-left: 0;
    border-bottom: 1px solid var(--ot-border-primary);
}

.ot-booking-sidebar {
    margin-left: 48px;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px),
    only screen and (min-width: 1200px) and (max-width: 1399px),
    only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-booking-sidebar {
        margin-left: auto;
    }
}

.ot-booking-sidebar-widget {
    padding: 32px;
    background: #f4f5f8;
    border-radius: 20px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-booking-sidebar-widget {
        margin-top: 40px;
    }
}

@media (max-width: 575px) {
    .ot-booking-sidebar-widget {
        padding: 20px;
    }
}

.ot-booking-info-list {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: var(--ot-body-primary);
}

.ot-booking-info-list:not(:last-child) {
    margin-bottom: 15px;
}

.ot-booking-widget-info {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--ot-border-primary);
}

.ot-booking-widget-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--ot-title-primary);
}

@media (max-width: 575px) {
    .ot-booking-widget-title {
        font-size: 18px;
    }
}

.ot-booking-summary {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--ot-border-primary);
}

.ot-booking-summary-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ot-title-primary);
}

.ot-booking-summary-list ul li {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: var(--ot-title-primary);
}

.ot-booking-summary-list ul li:not(:last-child) {
    margin-bottom: 25px;
}

.ot-booking-summary-list ul li:last-child {
    font-weight: 600;
    color: var(--ot-title-primary);
}

.ot-booking-summary-btn .ot-btn-primary {
    width: 100%;
}

.ot-booking-summary-btn .ot-btn-primary:hover::before {
    width: 850px;
    left: -145px;
    transform: scale(1);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .ot-booking-summary-btn .ot-btn-primary:hover::before {
        width: 153%;
        left: -173px;
    }
}

.ot-booking-space {
    padding-top: 120px;
    padding-bottom: 172px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-booking-space {
        padding-top: 80px;
    }
}

.dashboard-menu-nav {
    list-style: none;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-y: scroll;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #fc097c #f1f1f1;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

/* Chrome, Edge, Safari */
*::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

*::-webkit-scrollbar-track {
    background: var(--ot-theme-primary);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--ot-theme-purple);
    border-radius: 10px;
}

@media (max-width: 1199px) {
    .dashboard-menu-nav {
        max-height: 420px;
    }
}

.dashboard-menu-nav .dashboard-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    position: relative;
    text-decoration: none;
    color: var(--ot-title-primary);
    font-weight: 500;
    transition: color 0.3s;
}

@media (max-width: 1199px) {
    .dashboard-menu-nav .dashboard-menu-item {
        padding: 10px 0;
    }
}

.dashboard-menu-nav .dashboard-menu-item::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 22%;
    width: 2px;
    height: 60%;
    background-color: var(--ot-theme-primary);
    border-radius: 2px;
    transform: scaleY(0);
    transition: transform 0.3s;
}

.dashboard-menu-nav .dashboard-menu-item:hover,
.dashboard-menu-nav .dashboard-menu-item.active {
    color: var(--ot-theme-primary);
}

.dashboard-menu-nav .dashboard-menu-item:hover::before,
.dashboard-menu-nav .dashboard-menu-item.active::before {
    transform: scaleY(1);
}

.dashboard-menu-nav .dashboard-menu-item i {
    font-size: 20px;
}

.dashboard-logout-btn {
    font-weight: bold;
    color: var(--ot-theme-primary);
    padding: 15px;
    border-radius: 99px;
    background: var(--ot-white-common);
    text-align: center;
    z-index: 2;
}

.dashboard-logout-btn::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: var(--ot-theme-primary);
    border-radius: 99px;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
    transition: 0.3s;
}

.dashboard-logout-btn:hover {
    color: var(--ot-white-common);
}

.dashboard-logout-btn:hover::before {
    width: 100%;
    opacity: 1;
    visibility: visible;
}

.dashboard-logout-btn:hover .logout-btn-icon {
    left: 86%;
    background: var(--ot-white-common);
    color: var(--ot-theme-primary);
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .dashboard-logout-btn:hover .logout-btn-icon {
        left: 84%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .dashboard-logout-btn:hover .logout-btn-icon {
        left: 81%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .dashboard-logout-btn:hover .logout-btn-icon {
        left: 77%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .dashboard-logout-btn:hover .logout-btn-icon {
        left: 93%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .dashboard-logout-btn:hover .logout-btn-icon {
        left: 90%;
    }
}

@media (max-width: 575px) {
    .dashboard-logout-btn:hover .logout-btn-icon {
        left: 82%;
    }
}

.dashboard-logout-btn .logout-btn-icon {
    position: absolute;
    width: 48px;
    height: 48px;
    left: 2%;
    top: 4px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 50px;
    text-align: center;
    color: var(--ot-white-common);
    background: var(--ot-theme-primary);
    transition: 0.4s;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px) {
    .dashboard-logout-btn .logout-btn-icon {
        left: 1%;
    }
}

.dashboard-user-img {
    position: absolute;
    top: -30px;
    left: -25px;
    z-index: 1;
    background: #fdf9f8;
    border-radius: 100%;
    padding: 0 10px 10px 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .dashboard-user-img {
        left: -12px;
    }
}

@media (max-width: 1199px) {
    .dashboard-user-img {
        position: static;
        background: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px) {
    .dashboard-user-img {
        left: -12px;
    }
}

.dashboard-user-img img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    line-height: 140px;
    border: 9px solid transparent;
    border-radius: 999px;
}

@media (max-width: 1599px) {
    .dashboard-user-img img {
        width: 80px;
        height: 80px;
        border: 0;
        line-height: 80px;
    }
}

.dashboard-user-info {
    padding-top: 136px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 59px;
    background: var(--ot-white-common);
    border-radius: 10px 10px 40px 10px;
    clip-path: polygon(0 0, 100% 0, 100% 91%, 0% 100%);
}

@media (max-width: 1199px) {
    .dashboard-user-info {
        padding: 0;
        clip-path: none;
        border-radius: 0;
        background: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px) {
    .dashboard-user-info.bg-mask {
        mask-image: none !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .dashboard-user {
        margin-bottom: 30px;
    }
}

.dashboard-user-box-shape {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0 10px 0 0;
    overflow: hidden;
    z-index: -1;
}

@media (max-width: 1199px) {
    .dashboard-user-box-shape {
        top: -16px;
        right: -18px;
        border-radius: 0;
    }
}

.dashboard-user-name {
    font-size: 24px;
    font-weight: 600;
    color: var(--ot-title-primary);
    margin-bottom: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .dashboard-user-name {
        font-size: 20px;
    }
}

@media (max-width: 1199px) {
    .user-sidebar {
        position: fixed;
        width: 315px;
        height: 100%;
        top: 0;
        padding: 16px;
        z-index: 9999;
        left: -105%;
        transition: 0.3s ease-out;
        background: var(--ot-white-primary);
        overflow: hidden;
        border-radius: 0 20px 20px 0;
        box-shadow: 5px 0 5px rgba(0, 0, 0, 0.05);
    }
}

.ot-sidebar-nav {
    padding: 15px;
    margin-bottom: 18px;
    border-radius: 10px;
    background: var(--ot-white-common);
}

.user-sidebar.sidebar-open {
    left: 0;
}

.dashboard-menu-box {
    padding: 24px;
    padding-top: 45px;
    height: calc(100vh - 555px);
    background: var(--ot-white-common);
    clip-path: polygon(0 7%, 100% 0, 100% 100%, 0% 100%);
    border-radius: 35px 10px 10px 10px;
}

@media (max-width: 1599px) {
    .dashboard-menu-box {
        height: calc(100vh - 240px);
    }
}

@media (max-width: 1199px) {
    .dashboard-menu-box {
        clip-path: none;
        border-radius: 0;
        background: none;
        height: auto;
    }
}

.user-sidebar-close {
    position: absolute;
    top: 30px;
    z-index: 10;
    right: 10px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: var(--ot-theme-primary);
    color: var(--ot-white-common);
    font-size: 18px;
    border-radius: 1000px;
}

@media (max-width: 1199px) {
    .dashboard-menu-box {
        height: auto;
    }
}

@media (max-width: 1199px) {
    .dashboard-menu-box {
        padding: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px) {
    .dashboard-menu-box.bg-mask {
        mask-image: none !important;
    }
}

.dashboard-widget-card {
    min-width: 357px;
    min-height: 207px;
    height: 100%;
    background: #d6edda;
    padding: 12px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px),
    only screen and (min-width: 1200px) and (max-width: 1399px),
    only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .dashboard-widget-card {
        min-width: 100%;
        min-height: 100%;
    }
}

@media (max-width: 575px),
    only screen and (min-width: 576px) and (max-width: 767px),
    only screen and (min-width: 768px) and (max-width: 991px) {
    .dashboard-widget-card:not(:last-child) {
        margin-bottom: 20px;
    }
}

.dashboard-widget-wrapp .gy-30 {
    @media (min-width: 992px) {
        --bs-gutter-y: 0;
    }
}

.dashboard-widget-card.style-2 {
    background: #fee0ca;
}

.dashboard-widget-card.style-2 .dashboard-card-title,
.dashboard-widget-card.style-2 .dashboard-card-value {
    color: #ae5029;
}

.dashboard-widget-card.style-2 .dashboard-card-icon {
    color: var(--ot-white-common);
    border-radius: 8px 30px 8px 8px;
    clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 100%);
    background: radial-gradient(
        170.31% 137.05% at 97.57% 96.25%,
        #d77046 0%,
        #ae5029 100%
    );
}

.dashboard-widget-card.style-2 .dashboard-card-icon i {
    position: relative;
    top: 20px;
}

.dashboard-widget-card.style-2 .dashboard-card-shape {
    top: auto;
    bottom: -260px;
}

.dashboard-widget-card.style-3 {
    background: #eadff8;
}

.dashboard-widget-card.style-3 .dashboard-card-title,
.dashboard-widget-card.style-3 .dashboard-card-value {
    color: #6a57a2;
}

.dashboard-widget-card.style-3 .dashboard-card-icon {
    color: var(--ot-white-common);
    background: radial-gradient(
        158.86% 120.42% at 100% 0%,
        #937cd7 0%,
        #6a57a2 100%
    );
}

.dashboard-card-shape {
    position: absolute;
    top: -260px;
    right: -100px;
}

.dashboard-card-title {
    color: #267755;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 15px;
}

.dashboard-card-text {
    font-size: 16px;
    color: #267755;
}

.dashboard-card-value {
    font-size: 40px;
    font-weight: bold;
    color: #267755;
    line-height: 1.1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .dashboard-card-value {
        font-size: 30px;
    }
}

.dashboard-card-icon {
    font-size: 48px;
    min-width: 144px;
    max-height: 120px;
    text-align: center;
    line-height: 120px;
    color: var(--ot-white-common);
    border-radius: 8px 8px 8px 35px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 79%);
    background: radial-gradient(
        152.27% 115.75% at 98.26% 2.08%,
        #23a36d 0%,
        #267755 100%
    );
}

.dashboard-card-icon.bg-mask {
    mask-size: 100% auto;
}

.dashboard-referral-box .ot-newsletter-input input {
    height: 54px;
    border: 0;
}

.dashboard-referral-box .ot-newsletter-input input:focus {
    outline: none;
    border: 0;
}

.dashboard-referral-box .ot-newsletter-input input:read-only {
    background-color: #eadff8;
}

@media (max-width: 575px) {
    .dashboard-copy-btn {
        width: 100%;
    }
}

.dashboard-copy-btn #copyBtn {
    padding: 13.5px 24px;
}

.dashboard-copy-btn #copyBtn::before {
    display: none;
}

.dashboard-referral-search .ot-newsletter-input input {
    height: 54px;
}

.dashboard-referral-search .ot-newsletter-input input:focus {
    outline: none;
}

.dashboard-referral-search .ot-newsletter-input input:read-only {
    background-color: #eadff8;
}

@media (max-width: 575px) {
    .dashboard-referral-search .ot-newsletter-btn {
        width: 100%;
    }
}

.dashboard-referral-search .ot-newsletter-btn button {
    padding: 12.5px 24px;
    font-size: 24px;
}

.dashboard-referral-search .ot-newsletter-btn button::before {
    display: none;
}

.user-submenu {
    width: 220px;
    border: 0;
}

.user-menu-list .dropdown-item {
    font-size: 14px;
}

.user-menu-list .dropdown-item:hover {
    background-color: var(--ot-theme-primary);
    color: var(--ot-white-common);
}

.user-menu-list .dropdown-item i {
    margin-right: 5px;
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--ot-white-common);
    background-color: var(--ot-theme-primary);
}

.ot-newsletter-btn {
    position: relative;
    display: inline-block;
}

.ot-newsletter-btn .tooltip {
    visibility: hidden;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 5px 8px;
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 10;
}

.ot-newsletter-btn .tooltip.show {
    visibility: visible;
    opacity: 1;
}

.dashboard-referral-card {
    min-height: 100%;
}

.dashboard-referral-card .dashboard-card-title {
    margin-bottom: 10px;
}

.dashboard-referral-card .dashboard-card-icon {
    font-size: 32px;
}

.dashboard-referral-card .dashboard-card-text {
    font-size: 14px;
}

.dashboard-referral-card.style-2 .dashboard-card-icon i {
    position: static;
    top: auto;
}

.dashboard-referral-card.style-2 .dashboard-card-text {
    color: #ae5029;
}

.dashboard-referral-card.style-3 .dashboard-card-text {
    color: #6a57a2;
}

.ot-dashboard-chart {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.ot-dashboard-chart.ot-ticket-chart .ot-dashboard-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

@media (max-width: 575px) {
    .ot-dashboard-chart.ot-ticket-chart .ot-dashboard-chart-header {
        display: block;
    }
}

.ot-dashboard-chart.ot-ticket-chart
    .ot-dashboard-chart-header
    .ot-dashboard-chart-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--ot-title-primary);
    margin: 0;
}

@media (max-width: 575px) {
    .ot-dashboard-chart.ot-ticket-chart
        .ot-dashboard-chart-header
        .ot-dashboard-chart-title {
        font-size: 16px;
    }
}

.ot-dashboard-chart.ot-ticket-chart
    .ot-dashboard-chart-header
    .ot-dashboard-chart-legend {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ot-dashboard-chart.ot-ticket-chart
    .ot-dashboard-chart-header
    .ot-dashboard-chart-legend
    .ot-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fba4d1 0%, #c68fff 100%);
}

.ot-dashboard-chart.ot-ticket-chart
    .ot-dashboard-chart-header
    .ot-dashboard-chart-legend
    .ot-legend-text {
    font-size: 14px;
    color: #555;
}

.ot-dashboard-chart.ot-ticket-chart
    .ot-dashboard-chart-body
    #ot-ticket-purchase-chart {
    min-height: 300px;
}

.ot-dashboard-events {
    background: #fff;
    border-radius: 20px;
}

.ot-dashboard-events .events-title {
    color: var(--ot-title-primary);
    font-size: 20px;
    padding: 24px;
    margin-bottom: 0;
}

.ot-dashboard-events .event-card-thumb {
    border-radius: 20px;
}

.ot-dashboard-events .event-card-thumb img {
    border-radius: 20px;
}

@media (max-width: 575px),
    only screen and (min-width: 576px) and (max-width: 767px),
    only screen and (min-width: 768px) and (max-width: 991px) {
    .ot-dashboard-events .event-card-thumb img {
        height: 300px;
        object-fit: cover;
    }
}

.ot-dashboard-events .event-card-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: end;
    position: absolute;
    bottom: 24px;
    padding: 24px;
    width: 100%;
}

@media (max-width: 575px),
    only screen and (min-width: 576px) and (max-width: 767px) {
    .ot-dashboard-events .event-card-wrapper {
        flex-direction: column;
        gap: 18px;
        align-items: start;
    }
}

@media (max-width: 575px),
    only screen and (min-width: 576px) and (max-width: 767px) {
    .ot-dashboard-events .event-card-wrapper .ot-btn-primary {
        padding: 8px 20px;
        font-size: 14px;
    }
}

.ot-dashboard-events .event-card-wrapper .card-content .content-title {
    font-size: 32px;
    font-weight: 500;
    color: var(--ot-white-common);
    margin-bottom: 24px;
    width: 540px;
}

@media (max-width: 575px),
    only screen and (min-width: 576px) and (max-width: 767px) {
    .ot-dashboard-events .event-card-wrapper .card-content .content-title {
        font-size: 20px;
        width: 100%;
        margin-bottom: 10px;
    }
}

.ot-dashboard-events .event-card-wrapper .card-content .content-meta {
    list-style: none;
    display: flex;
    gap: 24px;
}

@media (max-width: 575px) {
    .ot-dashboard-events .event-card-wrapper .card-content .content-meta {
        display: block;
    }
}

.ot-dashboard-events .event-card-wrapper .card-content .content-meta li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ot-dashboard-events .event-card-wrapper .card-content .content-meta li .icon {
    color: var(--ot-theme-primary);
    font-size: 24px;
}

@media (max-width: 575px) {
    .ot-dashboard-events
        .event-card-wrapper
        .card-content
        .content-meta
        li
        .icon {
        font-size: 18px;
    }
}

.ot-dashboard-events .event-card-wrapper .card-content .content-meta li .text {
    color: var(--ot-white-common);
    font-size: 15px;
    font-weight: 500;
}

@media (max-width: 575px) {
    .ot-dashboard-events
        .event-card-wrapper
        .card-content
        .content-meta
        li
        .text {
        font-size: 12px;
    }
}

.ot-dashboard-events .swiper-pagination {
    text-align: left;
    padding-left: 24px;
}

.ot-dashboard-events .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    border: 2px solid var(--ot-white-common);
    background: transparent;
    opacity: 1;
}

.ot-dashboard-events .swiper-pagination-bullet-active {
    background: var(--ot-white-common);
    border-color: var(--ot-white-common);
}

.ot-dashboard-ticket-purchase {
    background: #fff;
    padding: 24px;
    border-radius: 20px;
}

.ot-dashboard-ticket-purchase .ticket-title {
    color: var(--ot-title-primary);
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 24px;
}

.ot-dashboard-ticket-purchase .ot-dashboard-table-wrapper {
    border: 1px solid var(--ot-border-primary);
    border-radius: 8px;
    overflow-x: auto;
}

.ot-dashboard-ticket-purchase .ot-dashboard-table-wrapper .ot-dashboard-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
    only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-dashboard-ticket-purchase
        .ot-dashboard-table-wrapper
        .ot-dashboard-table {
        min-width: 100%;
    }
}

.ot-dashboard-ticket-purchase
    .ot-dashboard-table-wrapper
    .ot-dashboard-table
    th,
.ot-dashboard-ticket-purchase
    .ot-dashboard-table-wrapper
    .ot-dashboard-table
    td {
    padding: 14px 16px;
    text-align: left;
    font-size: 14px;
    border-bottom: 1px solid var(--ot-border-primary);
}

.ot-dashboard-ticket-purchase
    .ot-dashboard-table-wrapper
    .ot-dashboard-table
    th {
    font-weight: 600;
    color: var(--ot-title-primary);
    background: #fdf9f8;
    white-space: nowrap;
}

.ot-dashboard-ticket-purchase
    .ot-dashboard-table-wrapper
    .ot-dashboard-table
    td {
    color: var(--ot-title-primary);
    vertical-align: middle;

    @media (min-width: 1599px) {
        max-width: 250px;
    }

    @media (min-width: 1399px) {
        max-width: 180px;
    }
}

.ot-dashboard-ticket-purchase
    .ot-dashboard-table-wrapper
    .ot-dashboard-table
    .organizer-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.ot-dashboard-ticket-purchase
    .ot-dashboard-table-wrapper
    .ot-dashboard-table
    .status-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
}

.ot-dashboard-ticket-purchase
    .ot-dashboard-table-wrapper
    .ot-dashboard-table
    .status-badge.active {
    background: #d1fae5;
    color: #059669;
}

.ot-dashboard-ticket-purchase
    .ot-dashboard-table-wrapper
    .ot-dashboard-table
    .status-badge.refunded {
    background: #fee2e2;
    color: #dc2626;
}

.ot-dashboard-ticket-purchase
    .ot-dashboard-table-wrapper
    .ot-dashboard-table
    .action-btns {
    display: flex;
    gap: 8px;
}

.ot-dashboard-ticket-purchase
    .ot-dashboard-table-wrapper
    .ot-dashboard-table
    .action-btns
    .action-btn {
    width: 35px;
    height: 35px;
    font-size: 20px;
    line-height: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
}

.ot-dashboard-ticket-purchase
    .ot-dashboard-table-wrapper
    .ot-dashboard-table
    .action-btns
    .action-btn.orange {
    background: #ffedd5;
    color: #c2410c;
}

.ot-dashboard-ticket-purchase
    .ot-dashboard-table-wrapper
    .ot-dashboard-table
    .action-btns
    .action-btn.red {
    background: #fecdd3;
    color: #be123c;
}

.ot-dashboard-ticket-purchase
    .ot-dashboard-table-wrapper
    .ot-dashboard-table
    .action-btns
    .action-btn.purple {
    background: #e9d5ff;
    color: #7e22ce;
}

.ot-dashboard-table th {
    font-weight: 600;
    color: var(--ot-title-primary);
    background: #fb097b !important;
    white-space: nowrap;
    color: #fff !important;
}

.ot-table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    font-size: 13px;
}

@media (max-width: 575px) {
    .ot-table-footer {
        flex-direction: column;
    }
}

.ot-table-footer .table-info {
    margin: 0;
}

.ot-table-footer .table-pagination {
    display: flex;
    gap: 6px;
}

.ot-table-footer .table-pagination .page-btn {
    border: 1px solid var(--ot-border-primary);
    background: var(--ot-white-primary);
    color: var(--ot-title-primary);
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
}

@media (max-width: 575px) {
    .ot-table-footer .table-pagination .page-btn {
        padding: 6px;
    }
}

.ot-table-footer .table-pagination .page-btn.active {
    background: var(--ot-theme-primary);
    color: #fff;
    padding: 5px 15px;
    border-color: var(--ot-theme-primary);
}

/* // ============ custom table css ============= // */
@media only screen and (max-width: 1399px),
    (min-device-width: 320px) and (max-device-width: 1399px) {
    [data-content]:before {
        content: attr(data-content);
    }

    /* Force table to not be like tables anymore */
    .table-mobile-responsive,
    .table-mobile-responsive thead,
    .table-mobile-responsive tbody,
    .table-mobile-responsive th,
    .table-mobile-responsive td,
    .table-mobile-responsive tr {
        display: block;
    }

    .table-mobile-responsive.text-center {
        text-align: left !important;
    }

    .table-mobile-responsive caption {
        width: max-content;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .table-mobile-responsive thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .table-mobile-responsive > :not(:first-child) {
        border-top: none;
    }

    .table-mobile-responsive > :not(caption) > * > * {
        border-color: var(--tmr-bootstrap-border-color);
    }

    .table-mobile-responsive tr:not(.bg-light-blue) {
        border-bottom: 2px solid var(--tmr-row-divider-color);
    }

    /* Default layout */
    .table-mobile-responsive td {
        /* Behave like a "row" */
        border: none;
        border-bottom: 1px solid var(--tmr-white);
        position: relative;
        padding-left: 50%;
    }

    .table-mobile-responsive td:before {
        /* Now like a table header */
        position: relative;
        /* Top/left values mimic padding */
        top: 0;
        left: 0;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
        color: var(--tmr-table-header);
    }
}

.flatpickr-day.today {
    border-color: var(--ot-theme-primary);
    color: var(--ot-theme-primary);
}

/*----------------------------------------*/
/* 7.1 Categorie css
/*----------------------------------------*/
.ot-categorie-card {
    position: relative;
    min-width: 268px;
    min-height: 320px;
    padding: 26px 23px;
    overflow: hidden;
    border-radius: 20px;
}

.ot-categorie-card.style-2 .ot-categorie-shape1 {
    background: #fef08a;
}

.ot-categorie-card.style-2 .ot-categorie-shape2 {
    background: #facc15;
}

.ot-categorie-card.style-3 .ot-categorie-shape1 {
    background: #bfdbfe;
}

.ot-categorie-card.style-3 .ot-categorie-shape2 {
    background: #60a5fa;
}

.ot-categorie-card.style-4 .ot-categorie-shape1 {
    background: #e9d5ff;
}

.ot-categorie-card.style-4 .ot-categorie-shape2 {
    background: #c084fc;
}

.ot-categorie-body-shape {
    position: absolute;
    width: 346px;
    height: 357px;
    top: -65px;
    right: -144px;
    content: "";
    background: #a855f7;
    opacity: 0.05;
    filter: blur(50px);
    border-radius: 100%;
}

.ot-categorie-thumb {
    position: absolute;
    top: 53px;
    right: -45%;
    z-index: 2;
    transform: rotate(-25deg);
}

@media (max-width: 575px) {
    .ot-categorie-thumb {
        right: -66%;
    }
}

.ot-categorie-thumb img {
    max-width: 394px;
    max-height: 349px;
    object-fit: cover;
    border-radius: 0;
}

.ot-categorie-shape1,
.ot-categorie-shape2 {
    position: absolute;
    width: 309px;
    height: 309px;
    bottom: -70%;
    left: -44%;
    content: "";
    transform: rotate(-135deg);
    aspect-ratio: 130/149;
    background: #fecaca;
    border-radius: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .ot-categorie-shape1,
    .ot-categorie-shape2 {
        left: -29%;
        bottom: -50%;
    }
}

@media (max-width: 575px) {
    .ot-categorie-shape1,
    .ot-categorie-shape2 {
        left: -20%;
    }
}

.ot-categorie-shape2 {
    width: 394px;
    height: 394px;
    left: 54%;
    transform: rotate(-9.65deg);
    background: var(--ot-theme-primary);
    opacity: 0.4;
    mix-blend-mode: darken;
    border-radius: 0;
    bottom: -40%;
    z-index: 3;
}

.ot-categorie-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--ot-title-primary);
    z-index: 5;
}

.ot-categorie-tringle-left {
    position: absolute;
    left: 10%;
    top: 35%;
    animation: jumpTwo 5s infinite;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px),
    only screen and (min-width: 1200px) and (max-width: 1399px),
    only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-categorie-tringle-left {
        left: 3%;
        top: 26%;
    }
}

.ot-categorie-tringle-right {
    position: absolute;
    right: 10%;
    animation: jumpTwo 5s infinite;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px),
    only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px) {
    .ot-categorie-tringle-right {
        right: 3%;
        bottom: 0px;
    }
}

.ot-categorie-right-line {
    position: absolute;
    top: 10%;
    right: -50px;
    animation: otMoving 1s infinite alternate;
}

@media (max-width: 1399px) {
    .ot-categorie-right-line {
        top: 26%;
    }
}

@media (max-width: 1199px) {
    .ot-categorie-right-line {
        top: 20%;
    }
}

@media (min-width: 576px) {
    .ot-categorie-right-line {
        top: 15%;
    }
}

@media (max-width: 575px) {
    .ot-categorie-right-line {
        top: 10%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px) {
    .ot-categorie-right-line.footer-line {
        top: 20%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .ot-categorie-right-line.footer-line {
        top: 13%;
    }
}

.ot-categorie-left-line {
    position: absolute;
    bottom: 15%;
    left: -50px;
    animation: otMoving 2s infinite alternate;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px),
    only screen and (min-width: 1200px) and (max-width: 1399px),
    only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-categorie-left-line {
        bottom: 5%;
    }
}

/*----------------------------------------*/
/* 7.1 Countdown css
/*----------------------------------------*/
.ot-countdown-height {
    max-height: 728px;
    background: radial-gradient(
        50.12% 1903.5% at 53.31% 45.4%,
        #7e22ce 0%,
        #56049e 100%
    );
}

@media (max-width: 575px) {
    .ot-countdown-height {
        max-height: 860px;
    }
}

.ot-countdown-banner {
    position: absolute;
    left: 0;
    height: 100%;
}

.ot-countdown-banner img {
    height: 100%;
    object-fit: cover;
}

@media only screen and (min-width: 1700px) and (max-width: 1800px) {
    .ot-countdown-banner img {
        width: 90%;
    }
}

@media only screen and (min-width: 1600px) and (max-width: 1699px) {
    .ot-countdown-banner img {
        width: 85%;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .ot-countdown-banner img {
        width: 70%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .ot-countdown-banner img {
        width: 60%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .ot-countdown-banner img {
        width: 60%;
    }
}

.ot-countdown-textbox {
    padding-top: 160px;
    padding-bottom: 160px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-countdown-textbox {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

.ot-countdown-textbox .ot-sec-title {
    max-width: 544px;
    line-height: 1.5;
}

.ot-countdown-list-box ul li {
    font-size: 14px;
    text-align: center;
    padding: 13px 32px;
    color: var(--ot-white-primary);
    display: inline-block;
    border: 1px solid var(--ot-white-primary);
    border-radius: 16px;
    min-width: 100px;
    min-height: 80px;
}

@media (max-width: 575px) {
    .ot-countdown-list-box ul li {
        padding: 13px 18px;
    }
}

.ot-countdown-list-box ul li:not(:last-child) {
    margin-right: 10px;
}

@media (max-width: 575px) {
    .ot-countdown-list-box ul li:not(:last-child) {
        margin-bottom: 15px;
    }
}

.ot-countdown-number {
    color: var(--ot-white-primary);
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    display: block;
}

.ot-countdown-ring {
    position: absolute;
    top: -15%;
    right: -15%;
}

@media only screen and (min-width: 1700px) and (max-width: 1800px) {
    .ot-countdown-ring {
        right: -8%;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .ot-countdown-ring {
        top: -30%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .ot-countdown-ring {
        top: -40%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-countdown-ring {
        right: -40%;
    }
}

/*----------------------------------------*/
/* 7.1 Ticket css
/*----------------------------------------*/
.ot-ticket-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1;
    background: var(--ot-white-primary);
    padding-top: 136px;
    padding-bottom: 24px;
    border-radius: 20px;
    overflow: hidden;
}

.ot-ticket-card::before {
    position: absolute;
    width: 100%;
    height: 350px;
    top: 0;
    left: 0;
    content: "";
    z-index: -1;
    background: var(--ot-theme-purple);
    clip-path: polygon(100% 0, 100% 60%, 85% 69%, 0 57%, 0 0);
}

.ot-ticket-card.purple-style .ot-ticket-btn .ot-btn-primary {
    width: 100%;
    background: var(--ot-theme-purple);
}

.ot-ticket-card.purple-style .ot-ticket-btn .ot-btn-primary::before {
    background: #7e22ce;
}

.ot-ticket-card.purple-style .ot-ticket-btn .ot-btn-primary::after {
    background: var(--ot-theme-purple);
    transform: translate(-50%, -50%) rotate(-20deg);
}

.ot-ticket-card.pink-style::before {
    background: var(--ot-theme-primary);
}

.ot-ticket-card.pink-style .ot-ticket-btn .ot-btn-primary {
    width: 100%;
    background: var(--ot-theme-primary);
}

.ot-ticket-card.pink-style .ot-ticket-btn .ot-btn-primary::after {
    background: var(--ot-theme-purple);
    transform: translate(-50%, -50%) rotate(-20deg);
}

.ot-ticket-card.yellow-style::before {
    background: var(--ot-theme-yellow);
}

.ot-ticket-card.yellow-style .ot-ticket-btn .ot-btn-primary {
    width: 100%;
    background: var(--ot-theme-yellow);
}

.ot-ticket-card.yellow-style .ot-ticket-btn .ot-btn-primary::before {
    background: #ca8a04;
}

.ot-ticket-card.yellow-style .ot-ticket-btn .ot-btn-primary::after {
    background: var(--ot-theme-purple);
    transform: translate(-50%, -50%) rotate(-20deg);
}

.ot-ticket-title {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

.ot-ticket-list {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.ot-ticket-list ul li {
    display: flex;
    align-items: center;
    color: var(--ot-title-primary);
    gap: 15px;
}

.ot-ticket-list ul li:not(:last-child) {
    margin-bottom: 7.5px;
}

.ot-ticket-list ul li i {
    color: var(--ot-theme-primary);
}

.ot-ticket-price {
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
}

.ot-ticket-currency {
    font-size: 16px;
    top: -16px;
    left: -2px;
}

.ot-ticket-content {
    padding: 0 24px;
}

.ot-ticket-btn {
    line-height: 1;
}

.ot-ticket-btn .ot-btn-primary {
    width: 100%;
    background: var(--ot-theme-purple);
}

.ot-ticket-btn .ot-btn-primary::after {
    transform: translate(-50%, -50%) rotate(-20deg);
}

.ot-ticket-btn .ot-btn-primary:hover::before {
    width: 180%;
}

.ot-ticket-web-shape {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.ot-ticket-shape {
    position: absolute;
    top: -27%;
    left: -18%;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-ticket-shape-box .ot-categorie-right-line {
        top: 2%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-ticket-shape-box .ot-categorie-left-line {
        bottom: 1%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .ot-ticket-shape-box .ot-categorie-tringle-left {
        top: 7%;
    }
}

@media (max-width: 575px) {
    .ot-ticket-shape-box .ot-categorie-tringle-left {
        display: none;
    }
}

/*----------------------------------------*/
/* 7.10 Newsletter css
/*----------------------------------------*/
.ot-newsletter-box {
    position: relative;
}

.ot-newsletter-btn {
    position: absolute;
    right: 0;
    top: 0;
}

@media (max-width: 575px) {
    .ot-newsletter-btn {
        position: static;
    }
}

.ot-newsletter-btn .ot-btn-primary {
    padding: 22.5px 24px;
    text-transform: uppercase;
    border-radius: 0 12px 12px 0;
}

@media (max-width: 575px) {
    .ot-newsletter-btn .ot-btn-primary {
        width: 100%;
        padding: 16px;
        border-radius: 12px;
    }
}

.ot-newsletter-input input {
    border: 0;
    height: 72px;
    padding-right: 155px;
    border-radius: 12px;
    background-color: var(--ot-white-common);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    border: 1px solid var(--ot-border-primary);
}

@media (max-width: 575px) {
    .ot-newsletter-input input {
        height: 60px;
        padding-right: 30px;
        margin-bottom: 10px;
    }
}

.ot-newsletter-input input:focus {
    border: 1px solid var(--ot-theme-primary);
}

.ot-newsletter-input input[type="email"] {
    text-transform: lowercase;
}

.ot-newsletter-input::placeholder {
    font-weight: 400;
    font-size: 14px;
    color: var(--ot-placeholder);
}

/*----------------------------------------*/
/* 7.4 Team css
/*----------------------------------------*/
.ot-team-titlebox .ot-sec-subtitle {
    padding: 8.5px 105px;
}

@media (max-width: 575px) {
    .ot-team-titlebox .ot-sec-subtitle {
        padding: 8.5px 70px;
    }
}

.ot-team-card {
    position: relative;
    padding: 0;
    padding-bottom: 0;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    border: 1px solid transparent;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.ot-team-card:hover {
    border: 1px solid var(--ot-theme-primary);
}

.ot-team-card:hover .ot-team-thumb img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

.ot-team-card:hover .ot-team-social-box {
    left: 0;
}

.ot-team-thumb {
    position: relative;
    z-index: 3;
}

.ot-team-thumb img {
    
    object-fit: cover;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.ot-team-content {
    padding: 35px;
}
@media (max-width: 575px) {
    .ot-team-content {
        padding: 15px;
    }
}

.ot-team-pink,
.ot-team-purple {
    position: absolute;
    top: 31%;
    transform: rotate(-9.65deg);
    right: -52%;
    z-index: 2;
}

.ot-team-purple {
    right: -50%;
    z-index: 1;
    transform: rotate(-30deg);
    top: 28%;
}

@media (max-width: 575px) {
    .ot-team-purple {
        right: -63%;
    }
}

.ot-team-body-shape {
    position: absolute;
    width: 346px;
    min-height: 357px;
    top: -65px;
    right: -144px;
    content: "";
    background: #a855f7;
    opacity: 0.05;
    filter: blur(50px);
    border-radius: 100%;
}

.ot-team-body-shape::before {
    position: absolute;
    width: 346px;
    height: 357px;
    bottom: -80%;
    left: -90%;
    content: "";
    background: #fc097c;
    opacity: 1;
    filter: blur(50px);
    border-radius: 100%;
}

.ot-team-social-box {
    position: absolute;
    bottom: 0;
    left: -50px;
    z-index: 5;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.ot-team-social-box ul {
    background: var(--ot-theme-primary);
    list-style: none;
    max-width: 42px;
    min-height: 202px;
}

.ot-team-social-box ul li:not(:last-child) {
    border-bottom: 1px solid;
}

.ot-team-social-box ul li a {
    padding: 20px 13px;
    line-height: 1.5;
    display: block;
    text-align: center;
    color: var(--ot-white-primary);
    transition: 0.3s;
}

.ot-team-social-box ul li a:hover {
    color: var(--ot-white-primary);
    background: var(--ot-theme-purple);
}

.ot-team-global-shape {
    position: absolute;
    top: 50px;
    right: -150px;
    animation: rotate1 8s linear infinite;
}

@media only screen and (min-width: 1700px) and (max-width: 1800px) {
    .ot-team-global-shape {
        right: -14%;
    }
}

@media only screen and (min-width: 1600px) and (max-width: 1699px) {
    .ot-team-global-shape {
        right: -17%;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .ot-team-global-shape {
        right: -19%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .ot-team-global-shape {
        top: 25px;
        right: -22%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-team-global-shape {
        display: none;
    }
}

.ot-team-cross-shape {
    position: absolute;
    top: 50%;
    left: -30px;
    transform: translateY(-50%);
}

@media only screen and (min-width: 1400px) and (max-width: 1599px),
    only screen and (min-width: 1200px) and (max-width: 1399px),
    only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-team-cross-shape {
        display: none;
    }
}

/*----------------------------------------*/
/* 7.7 Cta css
/*----------------------------------------*/
.ot-cta-wrapp {
    padding: 60px 70px;
    border-radius: 20px;
    overflow: hidden;
    margin-top: -103px;
    background: var(--ot-white-primary);
    box-shadow: 0 0 36px 0 rgba(0, 0, 0, 0.08);
}

@media (max-width: 1599px) {
    .checkout-hero {
        padding-bottom: 10rem !important;
    }
}

@media (max-width: 575px) {
    .ot-cta-wrapp {
        padding: 30px 15px;
    }
}

.ot-cta-titlebox .ot-sec-title {
    margin-bottom: 0;
}

span.discount-timer {
    display: block;
}

span.discount-timer strong {
    color: var(--ot-theme-primary);
}

.ot-event-ticket-counter {
    padding: 16px 0;
}

.ot-event-ticket-counter {
    padding: 16px 0;
}

span.counter-value {
    line-height: 1.2;
    color: var(--ot-theme-primary);
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-cta-titlebox {
        margin-bottom: 30px;
    }
}

.ot-cta-left-sticker {
    position: absolute;
    top: 0;
    left: 0;
}

.ot-cta-right-sticker {
    position: absolute;
    top: 0;
    right: 0;
}

/*----------------------------------------*/
/* 7.9 Testimonial css
/*----------------------------------------*/
.ot-testimonial-thumb-wrapp {
    padding-top: 150px;
    padding-bottom: 150px;
    margin-bottom: 15px;
    padding-left: 20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .ot-testimonial-thumb-wrapp {
        padding-top: 105px;
        padding-left: 100px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .ot-testimonial-thumb-wrapp {
        padding-top: 80px;
        padding-left: 40px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .ot-testimonial-thumb-wrapp {
        padding-top: 80px;
    }
}

@media (max-width: 575px) {
    .ot-testimonial-thumb-wrapp {
        padding-top: 0;
        padding-bottom: 40px;
    }
}

.ot-testimonial-thumb-wrapp .swiper-slide {
    transition: transform 0.4s ease;
    transform: translateY(0);
}

.ot-testimonial-thumb-wrapp .swiper-slide.swiper-slide-prev,
.ot-testimonial-thumb-wrapp .swiper-slide.swiper-slide-next {
    transform: translateY(-30%);
}

@media (max-width: 575px) {
    .ot-testimonial-thumb-wrapp .swiper-slide.swiper-slide-prev,
    .ot-testimonial-thumb-wrapp .swiper-slide.swiper-slide-next {
        transform: translateY(0);
    }
}

.ot-testimonial-thumb-wrapp .swiper-slide.swiper-slide-prev + .swiper-slide,
.ot-testimonial-thumb-wrapp .swiper-slide.swiper-slide-next + .swiper-slide {
    transform: translateY(40%);
}

@media (max-width: 575px) {
    .ot-testimonial-thumb-wrapp .swiper-slide.swiper-slide-prev + .swiper-slide,
    .ot-testimonial-thumb-wrapp
        .swiper-slide.swiper-slide-next
        + .swiper-slide {
        transform: translateY(0);
    }
}

.ot-testimonial-thumb-wrapp
    .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(
        .swiper-slide-next
    ) {
    transform: translateY(-70%);
}

@media (max-width: 575px) {
    .ot-testimonial-thumb-wrapp
        .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(
            .swiper-slide-next
        ) {
        transform: translateY(0);
    }
}

.ot-testimonial-line-shape {
    position: absolute;
    top: 70px;
    left: -100px;
    right: 0;
    text-align: center;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .ot-testimonial-line-shape {
        left: -50px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .ot-testimonial-line-shape {
        transform: scale(0.8);
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px) {
    .ot-testimonial-line-shape {
        top: 120px;
        left: -20px;
        transform: scale(0.7);
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .ot-testimonial-line-shape {
        top: 180px;
    }
}

.ot-testimonial-web-shape {
    position: absolute;
    bottom: 30px;
    left: -130px;
    animation: rotate1 8s linear infinite;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .ot-testimonial-web-shape {
        left: -17%;
    }
}

.testi-author-thumb-wrapp {
    margin: auto;
    max-width: 1540px;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px),
    only screen and (min-width: 1200px) and (max-width: 1399px),
    only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .testi-author-thumb-wrapp {
        max-width: 100%;
    }
}

.testi-author-thumb-wrapp .swiper-slide-active .testi-author-img::before {
    border: 1px solid transparent;
    background: var(--ot-title-primary);
}

.testi-author-thumb-wrapp .swiper-slide-active .testi-author-img img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

.testi-author-img {
    position: relative;
    width: 192.184px;
    height: 212.414px;
}

@media (max-width: 575px) {
    .testi-author-img {
        text-align: center;
        margin: auto;
    }
}

.testi-author-img::before {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 11px;
    left: -15.8px;
    content: "";
    border: 1px solid var(--ot-title-primary);
    border-radius: 999px 999px 0 0;
    z-index: -1;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.testi-author-img img {
    max-width: 192px;
    max-height: 212px;
    object-fit: cover;
    display: inline-block;
    border-radius: 999px 999px 0 0;
    transition: 0.3s;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.testi-author-info-wrapp {
    max-width: 240px;
    display: block;
    margin: auto;
}

.testi-author-title {
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 5px;
}

.testi-author-desig {
    color: var(--ot-title-primary);
}

.testi-author-info-orange .testi-author-desig {
    color: #ffc5b4;
}

.testi-content-slider {
    position: relative;
    margin: auto;
    max-width: 840px;
}

.testi-box-text {
    color: #111;
    text-align: center;
    font-size: 22px;
    font-style: italic;
    font-weight: 500;
    line-height: 1.6;
    max-width: 772px;
    margin: auto;
    margin-bottom: 25px;
    text-transform: capitalize;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .testi-box-text {
        font-size: 18px;
        max-width: 100%;
    }
}

.testi-box-review i {
    font-size: 22px;
    color: var(--ot-theme-yellow);
}

.ot-testi-multiple-box {
    margin: auto;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-testi-multiple-box {
        max-width: 100%;
    }
}

.ot-testi-arrow-box {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-testi-arrow-box {
        display: none;
    }
}

.ot-slider-btn {
    position: relative;
    font-size: 22px;
    width: 50px;
    height: 50px;
    line-height: 54px;
    text-align: center;
    color: var(--ot-title-primary);
    background: none;
    border: 1px solid var(--ot-title-primary);
    border-radius: 100px;
}

.ot-slider-btn:hover {
    color: var(--ot-white-primary);
    border: 1px solid transparent;
}

.ot-slider-btn:hover::before {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.ot-slider-btn .ot-slider-arrow {
    position: relative;
    bottom: 2px;
    z-index: 9;
}

.ot-slider-btn::before {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    content: "";
    background: var(--ot-theme-primary);
    border-radius: 100px;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.2);
    transition: 0.3s;
}

/*----------------------------------------*/
/* 7.8 Faq css
/*----------------------------------------*/
.ot-faq-accordion-box .accordion-items {
    border-radius: 20px;
}

.ot-faq-accordion-box .accordion-items .accordion-header {
    position: relative;
    background: none;
}

.ot-faq-accordion-box .accordion-items .accordion-buttons {
    padding: 28px 80px 28px 98px;
    background: none;
}

@media (max-width: 575px) {
    .ot-faq-accordion-box .accordion-items .accordion-buttons {
        padding: 70px 15px 15px 15px;
    }
}

.ot-faq-accordion-box .accordion-items .accordion-body {
    position: relative;
    margin-top: 0;
    padding: 0 100px 30px 100px;
    background: none;
    z-index: 5;
}

@media (max-width: 575px) {
    .ot-faq-accordion-box .accordion-items .accordion-body {
        margin-top: 0;
        padding: 0 15px 30px 15px;
    }
}

.ot-faq-accordion-box .accordion-icon {
    width: auto;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 575px) {
    .ot-faq-accordion-box .accordion-icon {
        top: 22%;
    }
}

.ot-faq-accordion-box .accordion-icon::before,
.ot-faq-accordion-box .accordion-icon::after {
    background-color: var(--ot-title-primary);
}

.ot-faq-accordion-box .pink-style {
    background-color: rgba(252, 9, 124, 0.15);
}

.ot-faq-accordion-box .pink-style .ot-faq-emogi {
    background: var(--ot-theme-primary);
}

.ot-faq-accordion-box .orange-style {
    background-color: rgba(230, 82, 31, 0.15);
}

.ot-faq-accordion-box .orange-style .ot-faq-emogi {
    background: var(--ot-theme-secondary);
}

.ot-faq-accordion-box .purple-style {
    background-color: rgba(168, 85, 247, 0.15);
}

.ot-faq-accordion-box .purple-style .ot-faq-emogi {
    background: var(--ot-theme-purple);
}

.ot-faq-accordion-box .yellow-style {
    background: rgba(234, 179, 8, 0.15);
}

.ot-faq-accordion-box .yellow-style .ot-faq-emogi {
    background: #eab308;
}

.ot-faq-accordion-box .teal-style {
    background: rgba(20, 184, 166, 0.15);
}

.ot-faq-accordion-box .teal-style .ot-faq-emogi {
    background: #14b8a6;
}

.ot-faq-emogi {
    position: absolute;
    width: 52px;
    height: 52px;
    font-size: 20px;
    color: var(--ot-white-primary);
    line-height: 52px;
    text-align: center;
    top: 50%;
    left: 24px;
    transform: translateY(-50%);
    background: var(--ot-theme-primary);
    border-radius: 50%;
}

@media (max-width: 575px) {
    .ot-faq-emogi {
        top: 7%;
        left: 5px;
        transform: scale(0.7);
    }
}

.ot-faq-web-pink {
    position: absolute;
    top: -10%;
    left: -10%;
    animation: rotate1 8s linear infinite;
}

.ot-faq-titlebox .ot-sec-subtitle {
    padding: 8.5px 110px;
}

@media (max-width: 575px) {
    .ot-faq-titlebox .ot-sec-subtitle {
        padding: 8.5px 80px;
    }
}

/*----------------------------------------*/
/* 7.6 Video css
/*----------------------------------------*/
@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-video-thumb {
        height: 250px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-video-thumb img {
        height: 100%;
        object-fit: cover;
    }
}

.ot-video-play-btn {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
    transform: translateY(-50%);
}

.ot-video-icon {
    position: relative;
    width: 109px;
    height: 109px;
    font-size: 42px;
    line-height: 109px;
    display: inline-block;
    border-radius: 100px;
    color: var(--ot-title-primary);
    background: var(--ot-white-primary);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

@media (max-width: 575px) {
    .ot-video-icon {
        font-size: 32px;
        width: 80px;
        height: 80px;
        line-height: 80px;
    }
}

.ot-video-icon:hover {
    color: var(--ot-white-primary);
    background-color: var(--ot-theme-primary);
}

.ot-video-icon::before,
.ot-video-icon::after {
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 80%;
    width: 80%;
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 253, 0.45);
    animation: borderanimate2 2s linear infinite;
    z-index: -1;
}

.ot-video-icon::after {
    height: 75%;
    width: 75%;
    background-color: rgba(211, 211, 211, 0.4);
    animation: borderanimate2 3s linear infinite;
}

/*----------------------------------------*/
/* 7.3 Feature css
/*----------------------------------------*/
.ot-feature-card {
    padding: 24px;
    border-radius: 20px;
    background: var(--ot-white-common);
    box-shadow: 0 0 36px 0 rgba(0, 0, 0, 0.08);
}

@media (max-width: 575px) {
    .ot-feature-card {
        padding: 12px;
    }
}

.ot-feature-thumb img {
    width: 100%;
    max-height: 165px;
    object-fit: cover;
}

.ot-feature-title {
    font-size: 32px;
    font-weight: 600;
    color: var(--ot-title-primary);
}

.ot-feature-title:hover a {
    color: var(--ot-theme-primary);
}

@media (max-width: 575px) {
    .ot-feature-title {
        font-size: 24px;
    }
}

.ot-feature-icon {
    position: absolute;
    top: 0;
    left: 0;
}

@media (max-width: 575px) {
    .ot-feature-icon {
        top: -8px;
        left: -8px;
        transform: scale(0.8);
    }
}

.ot-feature-metabox ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 575px) {
    .ot-feature-metabox ul {
        display: block;
    }
}

.ot-feature-metabox ul li {
    display: inline-flex;
    gap: 8px;
}

.ot-feature-meta-icon img {
    width: 16px;
    height: 16px;
    filter: brightness(0) contrast(0);
}

.ot-feature-listbox {
    padding-bottom: 32px;
    border-bottom: 1px solid var(--ot-border-primary);
}

.ot-feature-listbox ul li {
    font-size: 16px;
    display: inline-block;
    padding: 5px 12px;
    color: var(--ot-title-primary);
    background: rgba(38, 119, 85, 0.3);
    border-radius: 100px;
}

.ot-feature-listbox ul li:not(:last-child) {
    margin-bottom: 11px;
    margin-right: 11px;
}

.ot-feature-listbox ul li.light-green {
    background: rgba(38, 119, 85, 0.3);
}

.ot-feature-listbox ul li.light-purple {
    background: rgba(168, 85, 247, 0.3);
}

.ot-feature-listbox ul li.light-pink {
    background: rgba(252, 9, 124, 0.3);
}

.ot-feature-btn-icon {
    width: 42px;
    height: 42px;
    background: var(--ot-theme-primary);
    border-radius: 100px;
    line-height: 42px;
    text-align: center;
}

.ot-feature-line {
    position: absolute;
    bottom: 100px;
    left: -50px;
    animation: ottranslateX 5s infinite;
}

@media (max-width: 575px) {
    .ot-feature-line {
        bottom: 50px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-feature-line.web-line {
        bottom: 150px;
    }
}

.ot-feature-tringle {
    position: absolute;
    right: 15px;
    top: 97px;
    animation: jumpTwo 5s infinite;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .ot-feature-tringle {
        top: 0;
    }
}

.ot-feature-rating {
    color: var(--ot-title-primary);
    font-weight: 500;
}

.ot-feature-rating i {
    color: var(--ot-theme-primary);
    margin-right: 5px;
}

/*----------------------------------------*/
/* 7.11 Contact css
/*----------------------------------------*/
/*----------------------------------------*/
/* 10.2 Login Css
/*----------------------------------------*/
.ot-login-wrapp {
    padding: 50px 74px 70px;
    background-color: var(--ot-white-common);
    border-radius: 20px;
}

@media (max-width: 575px) {
    .ot-login-wrapp {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.ot-login-title {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--ot-theme-primary);
}

.ot-login-top p {
    font-size: 16px;
    font-weight: 400;
    color: #49535b;
}

.ot-login-top p a {
    position: relative;
    display: inline-block;
    color: var(--ot-title-primary);
}

.ot-login-top p a::after {
    position: absolute;
    content: "";
    left: auto;
    right: 0;
    bottom: 4px;
    width: 0%;
    height: 1px;
    background-color: var(--ot-title-primary);
    transition: 0.3s;
}

.ot-login-top p a:hover::after {
    left: 0;
    right: auto;
    width: 100%;
}

.ot-login-option-item {
    margin-bottom: 10px;
}

.ot-login-option-item:not(:last-child) {
    margin-right: 10px;
}

.ot-login-option-item.has-google a img {
    margin-right: 7px;
}

.ot-login-option-item a {
    font-size: 16px;
    color: var(--ot-title-primary);
    width: 98px;
    height: 56px;
    line-height: 54px;
    text-align: center;
    border-radius: 8px;
    display: inline-block;
    background: var(--ot-white-primary);
    border: 1px solid var(--ot-border-primary);
}

.ot-login-option-item a img {
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px);
}

.ot-login-option-item a img.apple {
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    -o-transform: translateY(-3px);
    transform: translateY(-3px);
}

.ot-login-option-item a:hover {
    border-color: var(--ot-theme-primary);
}

.ot-login-mail {
    position: relative;
    z-index: 1;
}

.ot-login-mail p {
    font-size: 15px;
    color: #55585b;
    margin-bottom: 0;
    padding: 0 20px;
    position: relative;
    display: inline-block;
    background-color: #fff;
}

.ot-login-mail p a {
    color: var(--ot-title-primary);
}

.ot-login-mail p a:hover {
    color: var(--ot-title-primary);
}

.ot-login-mail::after {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    bottom: 12px;
    width: 100%;
    height: 1px;
    z-index: -1;
    transition: 0.3s;
    background-color: var(--ot-border-primary);
}

.ot-login-input-wrapper {
    margin-bottom: 20px;
}

.ot-login-input-box {
    position: relative;
}

.ot-login-input-box:not(:last-child) {
    margin-bottom: 15px;
}

.ot-login-input input {
    font-size: 14px;
    border: 1px solid transparent;
    color: var(--ot-title-primary);
    background-color: var(--ot-white-primary);
    border: 1px solid var(--ot-border-primary);
    border-radius: 8px;
}

.ot-login-input input::placeholder {
    text-transform: capitalize;
    color: var(--ot-body-primary);
}

.ot-login-input input:focus {
    background-color: transparent;
}

.ot-login-input input[type="text"],
.ot-login-input input[type="password"] {
    padding-right: 60px;
}

.ot-login-input-title label {
    font-size: 16px;
    padding: 0 5px;
    line-height: 1;
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--ot-title-primary);
}

.ot-login-input-title label span {
    color: var(--ot-theme-primary);
}

.ot-login-input-eye {
    position: absolute;
    right: 26px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.ot-login-input-eye .open-eye {
    display: none;
}

.ot-login-input-eye span {
    transition: 0.3s;
}

.ot-login-input-eye:hover {
    cursor: pointer;
}

.ot-login-input-eye:hover span {
    color: var(--ot-title-primary);
}

.ot-login-remeber input {
    display: none;
}

.ot-login-remeber input:checked ~ label::after {
    border-color: var(--ot-theme-primary);
    background-color: var(--ot-theme-primary);
}

.ot-login-remeber input:checked ~ label::before {
    visibility: visible;
    opacity: 1;
}

.ot-login-remeber label {
    font-size: 15px;
    position: relative;
    padding-left: 26px;
    z-index: 1;
    color: var(--ot-title-primary);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

@media (max-width: 440px) {
    .ot-login-remeber label {
        font-size: 12px;
    }
}

.ot-login-remeber label::after {
    position: absolute;
    content: "";
    top: 4px;
    left: 0;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    border: 1px solid #c3c7c9;
    z-index: -1;
    transition: 0.3s;
    border-radius: 4px;
}

.ot-login-remeber label::before {
    position: absolute;
    font-weight: 900;
    content: "\f00c";
    top: 4px;
    left: 0;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    color: var(--ot-white-primary);
    transition: 0.3s;
    font-family: var(--ot-icon-font);
}

.ot-login-remeber label a {
    color: var(--ot-theme-primary);
}

.ot-login-remeber label:hover {
    cursor: pointer;
}

.ot-login-forgot a {
    font-weight: 400;
    font-size: 15px;
    color: var(--ot-title-primary);
    position: relative;
    display: inline-block;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.ot-login-forgot a::after {
    position: absolute;
    content: "";
    left: auto;
    right: 0;
    bottom: 4px;
    width: 0%;
    height: 1px;
    background-color: var(--ot-title-primary);
    transition: 0.3s;
}

@media (max-width: 440px) {
    .ot-login-forgot a {
        font-size: 12px;
    }
}

.ot-login-forgot a:hover {
    color: var(--ot-theme-primary);
}

.ot-login-forgot a:hover::after {
    left: 0;
    right: auto;
    width: 100%;
}

.ot-login-btn {
    font-size: 16px;
    font-weight: 500;
    padding: 14px 30px;
    text-align: center;
    border-radius: 8px;
    display: inline-block;
    color: var(--ot-white-primary);
    border: 1px solid var(--ot-theme-primary);
    background-color: var(--ot-theme-primary);
}

.ot-login-btn:hover {
    color: var(--ot-theme-primary);
    background-color: #fff;
}

.ot-login-alternate {
    color: var(--ot-theme-primary);
}

.ot-login-action .ot-btn-primary {
    border-radius: 8px;
}

.ot-login-action .ot-btn-primary:hover::before {
    width: 750px;
    left: -130px;
}

.ot-register-wrapp {
    max-width: 532px;
    padding: 32px 50px;
    background: var(--ot-white-common);
    border-radius: 20px;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-register-wrapp {
        max-width: 100%;
    }
}

@media (max-width: 575px) {
    .ot-register-wrapp {
        padding: 20px;
    }
}

.ot-register-categorie-box {
    gap: 16px;
}

.ot-register-type {
    background: var(--ot-white-primary);
    border: 1px solid var(--ot-border-primary);
    border-radius: 8px;
    width: 100%;
    padding: 11px 16px;
}

@media (max-width: 575px) {
    .ot-register-type {
        margin-bottom: 10px;
    }
}

.ot-register-title {
    font-size: 14px;
    font-weight: 500;
}

.ot-register-box .ot-right-line {
    right: 26%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .ot-register-box .ot-right-line {
        right: 0;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .ot-register-box .ot-circle-line {
        top: -17%;
    }
}

.ot-grendiant-top {
    position: absolute;
    top: 0;
    right: 0;
}

.ot-grendiant-bottom {
    position: absolute;
    left: 0;
    bottom: -25px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-grendiant-bottom {
        bottom: -30%;
    }
}

.ot-right-line {
    position: absolute;
    top: 20%;
    right: 21%;
    animation: otMoving 1.2s infinite alternate;
    z-index: 1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .ot-right-line {
        right: 0;
    }
}

.ot-left-line {
    position: absolute;
    bottom: 30%;
    left: 20%;
    animation: otMoving 1s infinite alternate;
    z-index: 1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .ot-left-line {
        left: 0;
    }
}

.ot-circle-line {
    position: absolute;
    top: -20%;
    left: 19%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .ot-circle-line {
        left: 0;
    }
}

/*----------------------------------------*/
/* 7.20.3 purchase result css
/*----------------------------------------*/
.ot-result-success-card {
    width: 100%;
    margin: 0 auto;
    border: 1px solid #bbb;
    border-radius: 20px;
    padding-bottom: 30px;
    background: var(--ot-white-common);
}

@media (min-width: 621px) {
    .ot-result-success-card {
        width: 80%;
    }
}

@media (min-width: 769px) {
    .ot-result-success-card {
        width: 60%;
    }
}

@media (min-width: 1225px) {
    .ot-result-success-card {
        width: 40%;
    }
}

@media (min-width: 1525px) {
    .ot-result-success-card {
        width: 32%;
    }
}

.ot-result-success-card .ot-success-img {
    display: flex;
    justify-content: center;
    padding: 24px;
}

.ot-result-success-card .ot-success-title {
    color: var(--ot-theme-green);
    font-weight: 600;
}

.ot-result-success-card .ot-success-details {
    padding: 24px;
}

.ot-result-success-card .ot-success-details .detail {
    display: flex;
    justify-content: space-between;
}

.ot-result-success-card .ot-success-details span {
    border-bottom: 1px solid var(--ot-border-primary);
    width: 100%;
    display: inline-block;
    padding-bottom: 12px;
}

.ot-result-success-card .ot-success-total p {
    font-size: 18px;
    font-weight: 600;
    color: var(--ot-black-common);
    padding: 0 24px;
}

.ot-result-success-card .ot-success-btns {
    border-top: 1px solid var(--ot-border-primary);
    padding: 24px;
}

.ot-result-success-card .ot-success-btns a {
    border: 1px solid var(--ot-border-primary);
    padding: 8px 24px;
    display: inline-block;
    width: 100%;
    border-radius: 20px;
    font-size: 14px;
    text-align: center;
    color: var(--ot-black-common);
}

.ot-result-success-card .ot-success-btns a:hover {
    background: var(--ot-theme-primary);
    color: var(--ot-white-common);
}

@media (max-width: 620px) {
    .ot-result-success-card .ot-success-btns a {
        padding: 8px;
    }
}

.ot-result-failed-card {
    width: 100%;
    margin: 0 auto;
    border: 1px solid #bbb;
    border-radius: 20px;
    background: var(--ot-white-common);
}

@media (min-width: 621px) {
    .ot-result-failed-card {
        width: 80%;
    }
}

@media (min-width: 769px) {
    .ot-result-failed-card {
        width: 60%;
    }
}

@media (min-width: 1225px) {
    .ot-result-failed-card {
        width: 40%;
    }
}

@media (min-width: 1525px) {
    .ot-result-failed-card {
        width: 32%;
    }
}

.ot-result-failed-card .ot-failed-title {
    color: #dc2626;
    font-weight: 600;
}

.ot-result-failed-card .ot-failed-img {
    display: flex;
    justify-content: center;
    padding: 24px;
}

.ot-result-failed-card .ot-failed-btns {
    border-top: 1px solid var(--ot-border-primary);
    padding: 24px;
}

.ot-result-failed-card .ot-failed-btns a {
    border: 1px solid var(--ot-border-primary);
    padding: 8px 24px;
    display: inline-block;
    width: 100%;
    border-radius: 20px;
    font-size: 14px;
    text-align: center;
    color: var(--ot-black-common);
}

.ot-result-failed-card .ot-failed-btns a:hover {
    background: var(--ot-theme-primary);
    color: var(--ot-white-common);
}

@media (max-width: 620px) {
    .ot-result-failed-card .ot-failed-btns a {
        padding: 8px;
    }
}

.ot-empty-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--ot-border-primary);
    border-radius: 4px;
    background: #fff;
}

.ot-empty-table-wrapper .ot-empty-table {
    width: 100%;
    border-collapse: collapse;
}

.ot-empty-table-wrapper .ot-empty-table thead {
    background: #fdf9f8;
    border-bottom: 1px solid var(--ot-border-primary);
}

.ot-empty-table-wrapper .ot-empty-table thead th {
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    color: var(--ot-title-primary);
    padding: 12px 16px;
    white-space: nowrap;
}

.ot-empty-table-wrapper .ot-empty-table thead th .sort-icon {
    font-size: 12px;
    margin-left: 4px;
    color: var(--ot-title-primary);
}

.ot-empty-table-wrapper .ot-empty-table tbody td {
    padding: 16px;
    font-size: 14px;
    color: var(--ot-title-primary);
    border-bottom: 1px solid var(--ot-border-primary);
}

.ot-empty-table-wrapper .ot-empty-table tbody .ot-table-empty td {
    text-align: center;
    padding: 60px 16px;
    border-bottom: none;
}

.ot-empty-table-wrapper .ot-empty-table tbody .ot-table-empty-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ot-empty-table-wrapper .ot-empty-table tbody .ot-table-empty-box .empty-icon {
    padding: 16px;
    border-radius: 12px;
    background-color: #f4f4f5;
}

.ot-empty-table-wrapper
    .ot-empty-table
    tbody
    .ot-table-empty-box
    .empty-icon
    img {
    width: 48px;
    height: 48px;
}

.ot-empty-table-wrapper .ot-empty-table tbody .ot-table-empty-box .empty-text {
    font-size: 20px;
    font-weight: 500;
    color: #696969;
    margin: 0;
}

.ot-dashboard-referral {
    background: #fff;
    padding: 24px;
    border-radius: 20px;
}

.ot-dashboard-referral .ticket-title {
    padding-bottom: 24px;
    margin: 0;
}

@media (max-width: 575px),
    only screen and (min-width: 576px) and (max-width: 767px) {
    .ot-dashboard-referral .referral-cards {
        flex-direction: column;
    }
}

.ot-dashboard-referral .referral-cards .card {
    width: 100%;
    border: none;
}

.ot-dashboard-referral .referral-cards .card .card-top {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    clip-path: polygon(100% 0, 99% 76%, 86% 100%, 0 76%, 0 0);
}

.ot-dashboard-referral .referral-cards .card .card-top-title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .ot-dashboard-referral .referral-cards .card .card-top-title {
        font-size: 14px;
    }
}

.ot-dashboard-referral .referral-cards .card .card-top-icon {
    color: #fff;
    font-size: 32px;
}

.ot-dashboard-referral .referral-cards .card .card-number {
    font-size: 40px;
    font-weight: 600;
    color: var(--ot-title-primary);
    padding: 16px 20px;
    margin: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 576px) and (max-width: 767px) {
    .ot-dashboard-referral .referral-cards .card .card-number {
        font-size: 24px;
    }
}

.ot-dashboard-referral .referral-cards .card .card-number small {
    font-size: 24px;
}

.ot-dashboard-referral .referral-cards .referral {
    background-color: #f3e8ff;
}

.ot-dashboard-referral .referral-cards .referral .card-top {
    background: #9333ea;
}

.ot-dashboard-referral .referral-cards .success {
    background-color: #fce7f3;
}

.ot-dashboard-referral .referral-cards .success .card-top {
    background: #db2777;
}

.ot-dashboard-referral .referral-cards .reward {
    background-color: #ecfdf5;
}

.ot-dashboard-referral .referral-cards .reward .card-top {
    background: #059669;
}

.ot-dashboard-referral .referral-cards .next {
    background-color: #dbeafe;
}

.ot-dashboard-referral .referral-cards .next .card-top {
    background: #2563eb;
}

.ot-ref-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ot-theme-primary);
}

.dashboard-refferal-widgets .widget-card-one {
    border-radius: 12px;
}

.dashboard-refferal-widgets .widget-card-one .info-subtitle {
    color: #267755;
}

.dashboard-refferal-widgets .widget-card-one .card-one-img {
    padding: 16px 32px 32px;
    font-size: 32px;
    background: radial-gradient(circle, #23a36d 0%, #267755 100%);
}

.dashboard-refferal-widgets .style-2 {
    background: #fee0ca;
}

.dashboard-refferal-widgets .style-2 .card-one-info .info-title,
.dashboard-refferal-widgets .style-2 .card-one-info .info-subtitle {
    color: #ae5029;
}

.dashboard-refferal-widgets .style-2 .card-one-img {
    background: radial-gradient(circle, #d77046 0%, #ae5029 100%);
}

.dashboard-refferal-widgets .style-3 {
    background: #eadff8;
}

.dashboard-refferal-widgets .style-3 .card-one-info .info-title,
.dashboard-refferal-widgets .style-3 .card-one-info .info-subtitle {
    color: #6a57a2;
}

.dashboard-refferal-widgets .style-3 .card-one-img {
    background: radial-gradient(circle, #937cd7 0%, #6a57a2 100%);
}

.image-rounded {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
    flex: 0 0 auto;
    margin-right: 5px;
}

.ot-contact-img {
    position: absolute;
    height: 100%;
    top: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-contact-img {
        position: static;
    }
}

@media only screen and (min-width: 1700px) and (max-width: 1800px) {
    .ot-contact-img {
        width: 52%;
    }
}

@media only screen and (min-width: 1600px) and (max-width: 1699px),
    only screen and (min-width: 1400px) and (max-width: 1599px),
    only screen and (min-width: 1200px) and (max-width: 1399px),
    only screen and (min-width: 992px) and (max-width: 1199px) {
    .ot-contact-img {
        width: 50%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-contact-img {
        margin-bottom: 40px;
    }
}

.ot-contact-img img {
    height: 100%;
    object-fit: cover;
    clip-path: polygon(0 0, 100% 0%, 80% 100%, 0% 100%);
}

@media only screen and (min-width: 1600px) and (max-width: 1699px) {
    .ot-contact-img img {
        clip-path: polygon(0 0, 100% 0%, 77% 100%, 0% 100%);
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .ot-contact-img img {
        clip-path: polygon(0 0, 100% 0%, 74% 100%, 0% 100%);
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .ot-contact-img img {
        clip-path: polygon(0 0, 100% 0%, 70% 100%, 0% 100%);
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .ot-contact-img img {
        clip-path: polygon(0 0, 100% 0%, 69% 100%, 0% 100%);
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-contact-img img {
        clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    }
}

.ot-contact-img-shape1 {
    position: absolute;
    width: 285px;
    height: 226.5px;
    top: 0;
    right: 0;
    background: #012648;
    clip-path: polygon(78% 100%, 0 0, 102% 0);
}

.ot-contact-img-shape2 {
    position: absolute;
    width: 181px;
    height: 432px;
    right: 3.5px;
    bottom: 0;
    background: #012648;
    clip-path: polygon(100% 100%, 0% 100%, 67% 1%);
}

.ot-contact-input input,
.ot-contact-input textarea,
.ot-contact-input .nice-select {
    font-size: 14px;
    font-weight: 500;
    border: 0;
    background: var(--ot-white-primary);
    padding: 0 19px;
    border-radius: 10px;
}

.ot-contact-input textarea {
    padding: 14px 22px;
    height: 96px;
    resize: none;
}

.ot-contact-btn1 .ot-btn-primary {
    font-weight: 600;
    padding: 17px 24px;
    text-transform: uppercase;
    border-radius: 6px;
}

.ot-contact-btn1 .ot-btn-primary::after {
    transform: translate(-50%, -50%) rotate(-18deg);
}

.ot-contact-maps iframe {
    width: 100%;
    border-radius: 30px;
    filter: grayscale(1);
}

.ot-contact-info-item {
    padding: 46px 50px 47px 55px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    border-radius: 15px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px) {
    .ot-contact-info-item {
        padding: 46px 30px 47px 30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-contact-info-item {
        padding: 30px 20px 30px 20px;
    }
}

.ot-contact-info-item:not(:last-child) {
    margin-bottom: 18px;
}

.ot-contact-info-title {
    font-weight: 600;
    font-size: 24px;
    text-transform: capitalize;
    color: var(--ot-title-primary);
}

.ot-contact-info-text {
    display: block;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    text-transform: capitalize;
    color: #4b4b4b;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

    @media (max-width: 575px) {
        font-size: 16px;
    }
}

.ot-contact-info-text:not(:last-child) {
    margin-bottom: 8px;
}

.ot-contact-info-text a:hover {
    color: var(--ot-theme-primary);
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
    only screen and (min-width: 768px) and (max-width: 991px) {
    .ot-contact-info-text {
        font-size: 18px;
    }
}

.ot-contact-info-shape {
    position: absolute;
    bottom: -24.36px;
    right: -19.33px;
}

.ot-contact-title {
    font-weight: 600;
    font-size: 30px;
    line-height: 1;
    color: var(--ot-title-primary);
}

@media (max-width: 575px) {
    .ot-contact-title {
        font-size: 20px;
    }
}

.ot-contact-input label {
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    color: #4b4b4b;
    margin-bottom: 5px;
}

.ot-contact-input input,
.ot-contact-input textarea {
    border: 1px solid #d1d4e3;
}

.ot-contact-form-wrapp {
    padding: 60px;
    background: #f5f5f5;
    border-radius: 15px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
    only screen and (min-width: 576px) and (max-width: 767px),
    (max-width: 575px) {
    .ot-contact-form-wrapp {
        padding: 30px 15px;
    }
}

.ot-contact-form-style1 {
    padding: 0;
    background: none;
}

.ot-contact-remember label {
    font-weight: 400;
}

.ot-contact-remember label::after {
    top: 3px;
}

.ot-contact-remember label::before {
    top: 4px;
}

.ot-contact-info-icon {
    position: absolute;
    bottom: -2.36px;
    right: 8.67px;
    font-size: 190px;
    opacity: 0.1;
}

.ot-event-users {
    margin-right: -15px;
}

.ot-event-users img {
    border: 1.5px solid var(--ot-white-primary);
    border-radius: 200px;
    width: 37px;
    height: 37px;
    object-fit: cover;
}

.ot-event-users-counter {
    width: 37px;
    height: 37px;
    line-height: 37px;
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ot-theme-purple);
    text-align: center;
    border: 1.5px solid var(--ot-white-primary);
    background: #f4f5f8;
    border-radius: 200px;
    flex: 0 0 auto;
}

.ot-feature-icon {
    background: #fff;
    border: 10px solid #fff;
    border-radius: 100%;
    top: -9px;
    left: -11px;
}

.ot-feature-icon img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 100%;
}

@media screen and (min-width: 320px) {
    .ot-feature-icon {
        top: -15px;
        left: -15px;
    }
}

.ot-feature-thumb::after {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30px;
    height: 30px;
    content: "";
    background: #fff;
    border-radius: 10px 0 0 0;
}

li.changelang img {
    width: 20px;
    height: 20px;
    object-fit: cover;
}

.ot-main-logo a img {
    max-width: 200px;
    max-height: 30px;
    object-fit: cover;
}

.ot-btn-primary i {
    transform: rotate(-45deg);
    transition: 0.3s;
}

.ot-btn-primary:hover > i {
    transform: rotate(0);
}

.ot-event-social-list ul li a {
    font-size: 24px;
    color: var(--ot-theme-primary);
}

.ot-event-social-list ul li a:hover {
    color: var(--ot-theme-purple);
}

.ot-feature-btn-icon i {
    color: var(--ot-white-common);
    transition: 0.3s;
}

.ot-feature-btn-icon:hover {
    background-color: var(--ot-title-primary);
}

.ot-feature-card {
    display: flex;
    flex-direction: column;
}

.ot-feature-metabox ul li {
    min-width: 85px;
}

.clamp-3-lines {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ot-ticket-icon img {
    max-height: 90px;
    max-width: 100px;
    object-fit: cover;
}

.ot-footer-logo a img {
    width: 140px;
    height: 33px;
    object-fit: cover;
}

.ot-footer-widget-link ul li a:hover {
    color: var(--ot-theme-primary);
}

#cookies-policy.cookies {
    right: auto !important;
    left: 30px !important;
    bottom: 30px !important;
}

@media (max-width: 575px) {
    #cookies-policy.cookies {
        left: 0 !important;
        right: 0 !important;
        text-align: center;
        margin: auto !important;
    }
}

#cookies-policy .cookies__alert {
    margin: 0 !important;
    min-width: 352px !important;
    display: inline-block !important;
}

@media (max-width: 575px) {
    #cookies-policy .cookies__alert {
        min-width: 260px !important;
    }
}

.cookies__title {
    color: var(--ot-title-color);
    font-weight: 700;
    line-height: 1.4em;
    margin-bottom: 0.8em;
    font-size: 24px;
}

.cookiesBtn__link {
    background: var(--ot-theme-primary) !important;
    border: 0 !important;
    transition: 0.3s !important;
}

.cookiesBtn__link:hover {
    background: var(--ot-theme-purple) !important;
}

.cookies__category input:checked + .cookies__box:after {
    background: var(--ot-theme-primary) !important;
}

#cookies-policy .cookies__details {
    color: var(--ot-theme-primary) !important;
}

#cookies-policy .cookiesBtn__link {
    text-transform: capitalize;
}

.table-pagination .page-btn {
    display: inline-flex;
    justify-content: center;
}

.table-pagination .page-btn {
    width: 56px;
    height: 56px;
    line-height: 56px;
    font-size: 20px;
    text-align: center;
    color: var(--ot-title-color);
    display: inline-block;
    background: none;
    border-radius: 6px;
    border: 1px solid var(--ot-border-primary);
    border-radius: 5px;
}

.table-pagination .page-btn.active {
    text-align: center;
    color: var(--ot-white-common);
    display: inline-block;
    background: var(--ot-theme-primary);
    border-color: var(--ot-theme-primary);
    border-radius: 5px;
}

.table-pagination .page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#tidio-chat {
    bottom: 60px !important;
}

.alert ul {
    list-style: none;
}

.ot-btn-primary:disabled,
.ot-btn-primary[disabled] {
    color: #fff;
    /* muted text */
    cursor: not-allowed;
    /* show blocked cursor */
    opacity: 0.7;
    /* faded look */
}

.map-frame {
    width: 100%;
    height: 400px;
    border: 0;
}

.invalid-feedback {
    display: block;
    text-align: start;
}

/* empty-event start */

/* Better & Modern Empty State */
.ot-event-empty-card {
    text-align: center;
    padding: 60px 40px;
    max-width: 650px;
    text-align: center;
    margin: auto;
    background: #ffffff;
    border-radius: 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    /* Soft shadow like your cards */
    border: 1px solid rgba(233, 30, 99, 0.1);
    position: relative;
    overflow: hidden;
}

.ot-event-empty-card.list-style {
    max-width: 100%;
}

.ot-event-empty-card.list-style:not(:last-child) {
    margin-bottom: 20px;
}

/* Emoji Animation Container */
.emoji-wrapper {
    position: relative;
    font-size: 80px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.event-empty-icon {
    font-size: 60px;
    color: var(--ot-theme-primary);
}

/* Typography */
.empty-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--ot-theme-primary);
    margin-bottom: 15px;
}

.empty-text {
    font-size: 16px;
    color: #636e72;
    line-height: 1.6;
    margin-bottom: 30px;
}

.empty-text strong {
    color: var(--ot-title-color);
}

/* Responsive */
@media (max-width: 576px) {
    .ot-event-empty-card {
        padding: 40px 20px;
    }

    .empty-title {
        font-size: 22px;
    }
}

/* interest form css */

.interest-form-wrapper {
    margin: auto;
    padding: 30px;
    background: var(--ot-white-common);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.interest-title {
    font-size: 24px;
    text-align: center;
    font-weight: 600;
    margin-bottom: 30px;
    color: var(--ot-title-primary);
}

.interest-card {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 15px 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Hover effect */
.interest-card:hover {
    background-color: #e5a5ff33;
    border-color: var(--ot-theme-primary);
}

/* Hide the checkbox */
.interest-card input[type="checkbox"] {
    display: none;
}

/* Checked state: style the whole label */
.interest-card input[type="checkbox"]:checked ~ span {
    color: var(--ot-theme-primary);
    font-weight: bold;
}

/* Add check icon to the label itself */
.interest-card input[type="checkbox"]:checked ~ span::after {
    content: "\f00c";
    color: var(--ot-white-common);
    position: absolute;
    right: 4px;
    top: 12px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    background: var(--ot-theme-primary);
    border-radius: 50%;
    font-size: 10px;
    font-family: var(--ot-icon-font);
}

/* support ticket selector css */
.support-select {
    font-size: 16px;
    color: var(--ot-body-primary);
}

.support-ticket-icon i {
    color: var(--ot-theme-primary);
}

.support-ticket-view {
    font-size: 14px;
    border: 1px solid transparent;
    color: var(--ot-white-common);
    background: var(--ot-theme-primary);
}

.support-ticket-view:hover {
    color: var(--ot-theme-primary);
    background: transparent;
    border: 1px solid var(--ot-theme-primary);
}

.message-row.user-message .shwo-message-box {
    background: #f3f4f6;
}

.message-row.user-message .shwo-message-box a {
    color: var(--ot-body-primary);
}

.message-row.user-message .message-text,
.time {
    color: var(--ot-body-primary);
}

.shwo-message-box.message-bubble {
    box-shadow: none;
    border: 2px solid var(--ot-theme-primary);
    border-top: 0;
    border-bottom: 0;
}

.message-row.admin-message .message-bubble {
    border-color: var(--ot-theme-purple);
}

.support-ticket-title {
    font-size: 24px;
}

.theme-text-primary {
    color: var(--ot-theme-primary);
}

.qrcode-card {
    padding: 30px;
    border: 1px solid var(--ot-border-primary);

    @media (max-width: 575px) {
        padding: 0;
    }
}

.qrcode-card .ot-btn-primary:hover::before {
    width: 153%;
    left: -100px;
    top: -100px;
}

.transition-card {
    padding: 15px;
}

.form-datebox input {
    font-size: 14px;
    padding: 15px;
}

.form-datebox input:focus {
    border-color: var(--ot-theme-primary);
}

.transaction-btn.ot-btn-primary i {
    transform: rotate(0deg);
}

/* chat start */
.chat-container {
    display: flex;
    height: 80vh;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    background-color: #fff;

    @media (max-width: 575px) {
        width: 100%;
        height: 100%;
        display: block;
    }
}

.chat-sidebar {
    width: 30%;
    background: var(--ot-smoke-primary);
    padding: 20px;
    overflow-y: auto;
    border-right: 1px solid #b3e0f2;

    @media (max-width: 767px) {
        padding: 10px;
    }

    @media (max-width: 575px) {
        width: 100%;
    }
}

.chat-title {
    font-weight: 700;
    color: var(--ot-title-color);
    margin-bottom: 20px;
}

.chat-user {
    padding: 12px 15px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: 0.3s ease;
}

.chat-user.active {
    background-color: #e5a5ff;
    font-weight: bold;
    color: var(--ot-white-common);
}

.chat-body {
    width: 70%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #f7fcff;

    @media (max-width: 575px) {
        width: 100%;
        padding: 15px;
    }
}

.chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    margin-bottom: 20px;
}

.chat-message {
    max-width: 70%;
    padding: 10px 16px;
    border-radius: 20px;
    margin-bottom: 12px;
    font-size: 0.95rem;
    line-height: 1.4;
    word-wrap: break-word;
}

.sent {
    align-self: flex-end;
    background-color: #d1f0ff;
    color: #333;
}

.received {
    align-self: flex-start;
    background-color: #ffe4d1;
    color: #333;
}

.chat-form {
    display: flex;
    gap: 10px;
}

.chat-form input {
    flex-grow: 1;
    border-radius: 30px;
    padding: 10px 20px;
    border: 1px solid #ccc;
}

.chat-form button:hover {
    background-color: #267aa3;
}

.chat-btn-group .form-control {
    padding: 26px;
    border-radius: 5px 0 0 5px;
}

.chat-btn-group .ot-btn-primary {
    border-radius: 0 5px 5px 0;
}

.ot-dashboard-chart-filter .form-select:focus {
    box-shadow: none;
    border-color: var(--ot-theme-primary);
}

.ot-dashboard-spacing {
    padding-top: 60px;
    padding-bottom: 200px;
}

@media (max-width: 1199px) {
    .ot-dashboard-spacing {
        padding-top: 5px;
        padding-bottom: 150px;
    }
}

.user-sidebar-btn {
    font-size: 18px;
    color: var(--ot-theme-primary);
}

/* mobile system css end */
.ot-mobile-bar {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    display: flex;
    z-index: 9;
    align-items: center;
    transition: all 0.3s;
    padding: 0.625rem 0.9375rem;
    justify-content: space-between;
    background: var(
        --Gradient,
        linear-gradient(254deg, var(--ot-dark-pink) 3%, #8a38f5 95.79%)
    );
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.05);
    border-radius: 0;
}

.ot-mobile-bar-btn {
    font-size: 0.75rem;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    color: var(--ot-title-primary);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.ot-mobile-bar-btn.scanner i {
    width: 50px;
    height: 50px;
    line-height: 55px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--ot-title-primary);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: var(--ot-white-primary);
}

.ot-mobile-bar-btn i {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ot-white-primary);
}

.ot-mobile-bar-text {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ot-white-primary);
}

.ot-mobile-bar-btn:hover {
    color: var(--ot-theme-primary);
}

.no-shadow {
    box-shadow: none !important;
}

/*# sourceMappingURL=main.css.map */

.ot-result-success-card .btn.btn-outline-secondary {
    background: var(--ot-theme-primary);
    color: var(--ot-white-common);
    border: 0;
    padding: 10px 25px;
}

/* select2 start */
.select2-container--default .select2-selection--single {
    border: 0;
    border-radius: 0;
    padding-left: 30px;
    background: none;
}

@media (max-width: 767px) {
    .select2-container--default .select2-selection--single {
        padding-left: 60px;
    }
}

.select2-container .select2-selection--single {
    height: 28px;
    font-size: 14px;
    display: inline-block;
}

.select2-container {
    width: 100% !important;
    line-height: 1;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    height: 30px;
    position: absolute;
    top: 0;
    right: 20px;
}

.select2-search--dropdown {
    padding: 0;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 0;
    padding: 0;
    background: var(--ot-theme-primary);
    color: var(--ot-white-common);
    padding: 5px 10px;
}

.select2-container--default
    .select2-search--dropdown
    .select2-search__field:focus {
    outline: 0;
    border: 0;
}

.select2-results__option {
    padding: 12px;
    font-size: 14px;
    color: var(--ot-title-primary);
}

.select2-container--default
    .select2-results__option--highlighted.select2-results__option--selectable {
    color: var(--ot-title-primary);
    background-color: #dddddd;
}

.select2-container--default .select2-results > .select2-results__options {
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #fc097c #f1f1f1;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    color: #444;
    line-height: 28px;
}

span.event-waring-icon.d-block.mb-3 {
    font-size: 24px;
    color: var(--ot-theme-primary);
}

.progress-bar {
    background-color: var(--ot-theme-primary) !important;
}

@media (max-width: 767px) {
    .ot-event-content-price {
        margin-bottom: 20px;
    }
}

.ot-event-sidebar-select
    .select2-container--default
    .select2-selection--single {
    padding-left: 10px;
    height: 50px;
    width: 100%;
    line-height: 50px;
    border-radius: 12px;
    width: 100%;
    border: 1px solid var(--ot-border-primary);
}
.ot-event-sidebar-select .select2-selection__arrow b {
    top: 80% !important;
}
.ot-event-sidebar-select .select2-selection__rendered {
    line-height: 50px !important;
}