/*!**********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js!./assets/scss/landing_page.scss ***!
  \**********************************************************************************************************************************************************************************************/

:root {
    --light-white: 255, 255, 255;
    --white: 255, 255, 255;
    --black: 0, 0, 0;
    --light-color: 118, 118, 118;
    --theme-font-color: 34, 34, 34;
    --bs-heading-color: #222;
    --dark-color: 38, 40, 52;
    --light-background: 242, 242, 242;
    --box-background: 248, 248, 248;
    --light-border: 233, 233, 233;
    --dark-border: 118, 118, 118;
    --star-yellow: 255, 196, 0;
    --theme-default: 229, 117, 43;
    --success-color: 48, 153, 117;
    --danger-color: 255, 79, 79;
    --border: 238, 238, 238
}

:root .layout-2 {
    --theme-default: 238, 144, 81
}

:root .layout-3 {
    --theme-default: 254, 94, 53
}

:root .layout-4 {
    --theme-default: 226, 131, 90
}

.dark {
    --light-white: 26, 25, 25;
    --white: 223, 223, 223;
    --black: 255, 255, 255;
    --light-color: 118, 118, 118;
    --theme-font-color: 255, 255, 255;
    --bs-heading-color: #fff;
    --bs-body-color: #a3a3a3;
    --dark-color: 222, 222, 222;
    --light-background: 242, 242, 242;
    --box-background: 47, 47, 47;
    --light-border: 40, 40, 40;
    --dark-border: 118, 118, 118;
    --border: 58, 57, 57
}

.bg-color-purple {
    background-color: #6570e6
}

.bg-color-blue {
    background-color: #b54747
}

.bg-color-red {
    background-color: #dc9260
}

.bg-color-yellow {
    background-color: #ffc7c7
}

.theme-default {
    background-color: rgba(var(--theme-default), 1) !important
}

.bg-color-brown {
    background-color: #cca270
}

.bg-color-chocolate {
    background-color: #b19a8c
}

.bg-color-coffee {
    background-color: #f0e5d7
}

.bg-color-black {
    background-color: #222
}

.theme-color {
    color: rgba(var(--theme-default), 1)
}

.light-bg {
    background-color: rgba(var(--box-background), 1)
}

.danger-color {
    background-color: rgba(var(--danger-color), 1)
}

.star-color {
    background-color: rgba(var(--star-yellow), 1)
}

body {
    background-color: rgba(var(--light-white), 1);
    color: rgba(var(--theme-font-color), 1);
    font-size: 14px;
    padding-right: 0 !important;
    position: relative
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Outfit, sans-serif
}

h1 {
    font-size: calc(19.2px + 2.125vw);
    line-height: .9
}

h1,
h2 {
    font-weight: 600;
    text-transform: capitalize
}

h2 {
    font-size: calc(18.4px + 1.125vw);
    line-height: 1.2
}

h3 {
    font-size: calc(17px + .9375vw);
    line-height: 1.3
}

h3,
h4 {
    font-weight: 500;
    text-transform: capitalize
}

h4 {
    font-size: calc(16.8px + .375vw)
}

h4,
h5 {
    line-height: 1.2
}

h5 {
    font-size: calc(14.8px + .375vw);
    font-weight: 500
}

h6 {
    font-size: calc(15.8px + .0625vw);
    font-weight: 400;
    line-height: 1.2
}

ul {
    margin-bottom: 0;
    padding-left: 0
}

[dir=rtl] ul {
    padding-right: 0
}

li {
    display: inline-block;
    font-size: 14px
}

li,
p {
    letter-spacing: .03em
}

p {
    font-size: calc(14.8px + .0625vw);
    font-weight: 400;
    margin-bottom: 0
}

p,
span {
    color: rgba(var(--light-color), 1)
}

span {
    font-size: calc(12.8px + .0625vw)
}

a {
    color: rgba(var(--theme-font-color), 1);
    cursor: pointer;
    display: inline-block;
    font-size: calc(14.8px + .0625vw);
    font-weight: 400;
    letter-spacing: .03em
}

a,
a:hover {
    text-decoration: none;
    transition: .4s ease
}

a:focus,
button:focus {
    outline: none
}

.btn:active {
    border-color: transparent !important
}

label {
    margin-bottom: .5rem
}

input:focus {
    border: 1px solid rgba(var(--theme-default), 1);
    box-shadow: none;
    outline: none
}

input::-moz-placeholder {
    color: rgba(var(--light-color), 1);
    font-size: 15px
}

input::placeholder {
    color: rgba(var(--light-color), 1);
    font-size: 15px
}

textarea {
    background-color: transparent
}

textarea:focus {
    border: 1px solid rgba(var(--theme-default), 1);
    box-shadow: none;
    outline: none
}

textarea::-moz-placeholder {
    color: rgba(var(--light-color), 1);
    font-size: 15px
}

textarea::placeholder {
    color: rgba(var(--light-color), 1);
    font-size: 15px
}

select:focus {
    border: 1px solid rgba(var(--light-border), 1) !important;
    box-shadow: none !important;
    outline: none !important
}

@media (min-width:1500px) {
    .custom-container {
        margin: 0 auto;
        max-width: 1440px;
        padding: 0 15px
    }
}

@media (min-width:1700px) {
    .custom-container {
        margin: 0 auto;
        max-width: 1670px;
        padding: 0 15px
    }
}

.form-check-input:checked {
    background-color: var(--theme-color);
    border-color: var(--theme-color)
}

.form-inline {
    align-items: center;
    display: flex;
    flex-flow: row wrap
}

.section-space {
    padding-bottom: calc(30px + 3.125vw)
}

.section-space,
.section-t-space,
section {
    padding-top: calc(30px + 3.125vw)
}

.section-b-space {
    padding-bottom: calc(30px + 3.125vw)
}

.large-section {
    padding-bottom: 120px;
    padding-top: 120px
}

.small-section {
    padding-bottom: 50px;
    padding-top: 50px
}

.x-small-section {
    padding-bottom: 30px;
    padding-top: 30px
}

.custom-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: 1px solid rgba(var(--light-color), .6);
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    height: 20px;
    position: relative;
    transition: all .3s ease-in-out;
    width: 20px
}

.custom-checkbox:before {
    color: rgba(var(--theme-default), 1);
    content: "\f00c";
    font-family: FontAwesome !important;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: all .3s ease-in-out
}

.custom-checkbox:checked {
    background-color: rgba(var(--theme-default), 1);
    border: 1px solid rgba(var(--theme-default), 1)
}

.custom-checkbox:checked:before {
    color: rgba(var(--white), 1);
    transform: translate(-50%, -50%) scale(1)
}

.custom-radio {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    height: 14px;
    margin-left: 3px;
    outline: 1px solid rgba(var(--theme-default), 1);
    outline-offset: 2px;
    transition: all .3s ease-in-out;
    width: 14px
}

[dir=rtl] .custom-radio {
    margin-left: unset;
    margin-right: 3px
}

.custom-radio:checked {
    background-color: rgba(var(--theme-default), 1);
    outline: 1px solid rgba(var(--theme-default), 1)
}

.custom-radio:focus {
    border: none
}

input[type=number] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none
}

.dark input {
    color: rgba(var(--white), 1)
}

.dark input::-moz-placeholder {
    color: rgba(var(--white), .4)
}

.dark input::placeholder {
    color: rgba(var(--white), .4)
}

.form-floating>.form-control:not(:-moz-placeholder-shown)~label {
    color: rgba(var(--light-color), 1)
}

.form-floating>.form-control:not(:placeholder-shown)~label {
    color: rgba(var(--light-color), 1)
}

[dir=rtl] [type=email] {
    direction: rtl
}

/* .switch {
    display: inline-block;
    height: 30px;
    position: relative;
    width: 55px
} */

.switch input {
    height: 0;
    opacity: 0;
    width: 0
}

.dark .switch input:checked+.slider,
.switch input:checked+.slider {
    background-color: rgba(var(--theme-default), 1)
}

.dark .switch input:focus+.slider,
.switch input:focus+.slider {
    box-shadow: 0 0 1px rgba(var(--theme-default), 1)
}

.switch input:checked+.slider:before {
    transform: translateX(23px)
}

@media (max-width:1199px) {
    .switch input:checked+.slider:before {
        transform: translateX(21px)
    }
}

.switch .slider {
    background-color: #eee;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s
}

.dark .switch .slider {
    background-color: rgba(var(--white), .4)
}

.switch .slider:before {
    background-color: rgba(var(--white), 1);
    bottom: 4px;
    content: "";
    height: 23px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 23px
}

.switch .slider.round {
    border-radius: 34px
}

.switch .slider.round:before {
    border-radius: 50%
}

.sticky {
    left: 0;
    position: sticky
}

.sticky,
.sticky.off-50 {
    top: 50px
}

.sticky.off-88 {
    top: 88px
}

html:hover .cursor {
    opacity: 1
}

body div canvas:first-child {
    display: none !important
}

.cursor {
    height: 50px;
    left: 0;
    margin: -25px 0 0 -25px;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transition: opacity .2s cubic-bezier(.165, .84, .44, 1);
    width: 50px;
    z-index: 999
}

.cursor--hover .cursor-inner {
    opacity: 0;
    transform: scale(.5)
}

.cursor--hover .cursor-outer {
    border-color: #cca270;
    opacity: 1;
    transform: scale(1.4)
}

.cursor-move-inner {
    height: 10px;
    left: 50%;
    margin-left: -3px;
    margin-top: -3px;
    position: absolute;
    top: 50%;
    width: 10px;
    z-index: 1
}

.cursor-move-outer {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.cursor-inner {
    background: rgba(var(--theme-default), 1);
    border-radius: 50%;
    display: block;
    height: 80%;
    transition: transform .4s cubic-bezier(.23, 1, .32, 1), opacity .4s cubic-bezier(.165, .84, .44, 1);
    width: 80%
}

.cursor-outer {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(var(--theme-default), 1);
    border-radius: 50%;
    box-sizing: border-box;
    display: block;
    height: 70%;
    transition: border .4s cubic-bezier(.165, .84, .44, 1), transform .4s cubic-bezier(.23, 1, .32, 1), opacity .4s cubic-bezier(.165, .84, .44, 1);
    width: 70%
}

.theme-scrollbar::-webkit-scrollbar-track {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 6px rgba(var(--theme-default), .3)
}

.theme-scrollbar::-webkit-scrollbar {
    height: 5px;
    width: 5px
}

.theme-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(var(--theme-default), .4);
    border-radius: 4px
}

.btn_outline {
    border: 1px solid rgba(var(--theme-font-color), 1);
    border-radius: 0;
    color: rgba(var(--theme-font-color), 1);
    font-size: calc(12.8px + .375vw);
    font-weight: 500;
    padding: calc(5.6px + .125vw) calc(4.8px + 1vw);
    position: relative;
    transition: all .5s ease
}

.btn_outline svg {
    height: 20px;
    transition: all .4s ease;
    width: 20px;
    fill: rgba(var(--theme-font-color), 1)
}

.btn_outline:hover {
    background-color: rgba(var(--theme-default), .1);
    border-color: rgba(var(--theme-default), 1);
    color: rgba(var(--theme-default), 1)
}

.btn_outline:hover svg {
    fill: rgba(var(--theme-default), 1)
}

.title {
    margin: 0 auto calc(16px + 1.25vw);
    text-align: center;
    width: 60%
}

@media (max-width:1199px) {
    .title {
        width: 80%
    }
}

@media (max-width:767px) {
    .title {
        width: 100%
    }
}

.title h5 {
    color: rgba(var(--theme-default), 1);
    font-weight: 500;
    position: relative
}

.title h5:after {
    background-image: linear-gradient(to right, rgba(var(--light-white), 1), rgba(var(--theme-default), 1));
    content: "";
    height: 2px;
    left: 29%;
    position: absolute;
    top: 50%;
    transform: translateY(29%);
    width: 10%
}

@media (max-width:767px) {
    .title h5:after {
        left: 24%
    }
}

@media (max-width:480px) {
    .title h5:after {
        left: 22%
    }
}

.title h5:before {
    background-image: linear-gradient(to left, rgba(var(--light-white), 1), rgba(var(--theme-default), 1));
    content: "";
    height: 2px;
    position: absolute;
    right: 29%;
    top: 50%;
    transform: translateY(29%);
    width: 10%
}

@media (max-width:767px) {
    .title h5:before {
        right: 24%
    }
}

@media (max-width:480px) {
    .title h5:before {
        right: 22%
    }
}

.title p {
    margin: auto;
    width: 80%
}

@media (max-width:1199px) {
    .title p {
        width: 100%
    }
}

.title-1 {
    margin-bottom: 15px
}

.title-1 h5 {
    color: rgba(var(--theme-default), 1);
    font-weight: 500;
    position: relative
}

.title-1 h5:before {
    background-image: linear-gradient(to left, rgba(var(--light-white), 1), rgba(var(--theme-default), 1));
    content: "";
    height: 2px;
    left: 30%;
    position: absolute;
    top: 50%;
    transform: translateX(-30%);
    width: 25%
}

@media (max-width:1699px) {
    .title-1 h5:before {
        left: 35%
    }
}

@media (max-width:1400px) {
    .title-1 h5:before {
        left: 40%
    }
}

.header-landing {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background-color: transparent;
    position: relative;
    z-index: 9
}

.header-landing .navbar .brand-logo img {
    width: 130px
}

@media (max-width:576px) {
    .header-landing .navbar .brand-logo img {
        width: 100px
    }
}

.header-landing .navbar .main-nav .navbar-nav {
    gap: 10px
}

@media (max-width:991px) {
    .header-landing .navbar .main-nav .navbar-nav {
        gap: 0
    }
}

.header-landing .navbar .main-nav .navbar-nav .nav-item a {
    color: rgba(var(--theme-font-color), 1);
    font-size: calc(15.6px + .125vw);
    font-weight: 500
}

.header-landing .navbar .main-nav .navbar-nav .nav-item a.active,
.header-landing .navbar .main-nav .navbar-nav .nav-item a:hover {
    color: rgba(var(--theme-default), 1)
}

@media (max-width:991px) {
    .header-landing .navbar .main-nav {
        background: rgba(var(--white), 1);
        border-radius: 8px;
        box-shadow: 0 2px 8px 0 rgba(99, 99, 99, .2);
        left: 0;
        padding: 12px 20px;
        position: absolute;
        top: 100%;
        width: 100%;
        z-index: 9
    }
}

.header-landing .navbar .navbar-toggler {
    border: 1px solid rgba(var(--border), 1);
    padding: 8px;
    transition: all .4s ease-in-out
}

.header-landing .navbar .navbar-toggler:focus {
    box-shadow: none
}

.header-landing .navbar .navbar-toggler:hover {
    background-color: rgba(var(--theme-default), 1)
}

.header-landing .navbar .navbar-toggler:hover span {
    filter: invert(1)
}

.header-landing .navbar form {
    animation: horizontal-shaking 6s ease infinite;
    background-image: linear-gradient(to right, rgba(var(--theme-default), 1) 0, #c28f51 51%, rgba(var(--theme-default), 1) 100%);
    border-radius: 4px
}

.header-landing .navbar form button {
    color: rgba(var(--white), 1);
    font-weight: 500;
    padding: 6px 12px
}

.header-landing .navbar form button:hover {
    color: rgba(var(--white), 1)
}

.header-landing.sticky {
    animation: smoothScroll 1s forwards;
    background-color: rgba(var(--white), 1);
    box-shadow: 0 0 8px #eee;
    position: fixed;
    top: 0;
    transition: all .5s ease;
    width: 100%;
    z-index: 9
}

.landing-home-section {
    background-color: rgba(var(--theme-default), .1);
    background-image: url(70232f18fd21fe9d6c10.png);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    position: relative
}

.landing-home-section .home-section-content {
    align-items: flex-start;
    display: flex;
    justify-content: center;
    width: 100%
}

@media (max-width:991px) {
    .landing-home-section .home-section-content {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        z-index: 7
    }
}

.landing-home-section .home-section-content div {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background-blend-mode: overlay;
    background-color: rgba(var(--theme-default), .01);
    border-radius: 6px;
    padding: 0 0 22px;
    text-align: center;
    width: 60%;
    z-index: 8
}

@media (max-width:991px) {
    .landing-home-section .home-section-content div {
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        background-color: rgba(var(--white), .4);
        height: 100%;
        padding: calc(16px + 4.375vw) 20px 30px;
        width: 100%
    }
}

.landing-home-section .home-section-content h5 {
    color: rgba(var(--theme-default), 1);
    font-weight: 600;
    margin-bottom: 12px
}

.landing-home-section .home-section-content h1 {
    line-height: 1.4;
    margin-bottom: 16px
}

.landing-home-section .home-section-content p {
    margin: 0 auto calc(16px + 1.25vw);
    text-transform: capitalize;
    width: 60%
}

@media (max-width:1199px) {
    .landing-home-section .home-section-content p {
        width: 100%
    }
}

@media (max-width:991px) {
    .landing-home-section .home-section-content p {
        color: rgba(var(--theme-font-color), 1)
    }
}

.landing-home-section .home-section-content .btn_outline {
    background-image: linear-gradient(to right, rgba(var(--theme-default), 1) 0, #c28f51 51%, rgba(var(--theme-default), 1) 100%);
    border: none;
    border-radius: 4px;
    color: rgba(var(--white), 1)
}

.landing-home-section .home-section-content .btn_outline svg {
    fill: rgba(var(--white), 1)
}

.landing-home-section .home-section-content .btn_outline.active {
    color: rgba(var(--white), 1) !important
}

.landing-home-section .home-images {
    margin-top: calc(256px + 4.375vw)
}

.landing-home-section .home-images img {
    border-radius: 10px;
    box-shadow: 0 2px 8px 0 rgba(99, 99, 99, .2);
    position: absolute
}

.landing-home-section .home-images img.img-1 {
    bottom: 23%;
    left: 7%
}

@media (max-width:1840px) {
    .landing-home-section .home-images img.img-1 {
        width: 350px
    }
}

@media (max-width:1550px) {
    .landing-home-section .home-images img.img-1 {
        width: 300px
    }
}

@media (max-width:1320px) {
    .landing-home-section .home-images img.img-1 {
        width: 270px
    }
}

@media (max-width:1199px) {
    .landing-home-section .home-images img.img-1 {
        width: 250px
    }
}

@media (max-width:1100px) {
    .landing-home-section .home-images img.img-1 {
        width: 220px
    }
}

@media (max-width:991px) {
    .landing-home-section .home-images img.img-1 {
        bottom: 50%;
        left: 4%;
        width: 180px
    }
}

.landing-home-section .home-images img.img-2 {
    bottom: 4%;
    left: 27%
}

@media (max-width:1840px) {
    .landing-home-section .home-images img.img-2 {
        width: 350px
    }
}

@media (max-width:1550px) {
    .landing-home-section .home-images img.img-2 {
        width: 300px
    }
}

@media (max-width:1320px) {
    .landing-home-section .home-images img.img-2 {
        width: 270px
    }
}

@media (max-width:1199px) {
    .landing-home-section .home-images img.img-2 {
        bottom: 10%;
        width: 250px
    }
}

@media (max-width:1100px) {
    .landing-home-section .home-images img.img-2 {
        width: 220px
    }
}

@media (max-width:991px) {
    .landing-home-section .home-images img.img-2 {
        left: 24%;
        width: 180px
    }
}

.landing-home-section .home-images img.img-4 {
    bottom: 23%;
    right: 7%
}

@media (max-width:1840px) {
    .landing-home-section .home-images img.img-4 {
        width: 350px
    }
}

@media (max-width:1550px) {
    .landing-home-section .home-images img.img-4 {
        width: 300px
    }
}

@media (max-width:1320px) {
    .landing-home-section .home-images img.img-4 {
        width: 270px
    }
}

@media (max-width:1199px) {
    .landing-home-section .home-images img.img-4 {
        width: 250px
    }
}

@media (max-width:1100px) {
    .landing-home-section .home-images img.img-4 {
        width: 220px
    }
}

@media (max-width:991px) {
    .landing-home-section .home-images img.img-4 {
        bottom: 50%;
        right: 4%;
        width: 180px
    }
}

.landing-home-section .home-images img.img-3 {
    bottom: 4%;
    right: 27%
}

@media (max-width:1840px) {
    .landing-home-section .home-images img.img-3 {
        width: 350px
    }
}

@media (max-width:1550px) {
    .landing-home-section .home-images img.img-3 {
        width: 300px
    }
}

@media (max-width:1320px) {
    .landing-home-section .home-images img.img-3 {
        width: 270px
    }
}

@media (max-width:1199px) {
    .landing-home-section .home-images img.img-3 {
        bottom: 10%;
        width: 250px
    }
}

@media (max-width:1100px) {
    .landing-home-section .home-images img.img-3 {
        width: 220px
    }
}

@media (max-width:991px) {
    .landing-home-section .home-images img.img-3 {
        right: 24%;
        width: 180px
    }
}

.landing-home-section .home-images img.img-5 {
    animation: movebounce 3.2s linear infinite;
    left: 3%;
    top: 18%
}

@media (max-width:1700px) {
    .landing-home-section .home-images img.img-5 {
        width: 340px
    }
}

@media (max-width:1500px) {
    .landing-home-section .home-images img.img-5 {
        width: 310px
    }
}

@media (max-width:1120px) {
    .landing-home-section .home-images img.img-5 {
        width: 270px
    }
}

@media (max-width:991px) {
    .landing-home-section .home-images img.img-5 {
        display: none;
        width: 220px
    }
}

.landing-home-section .home-images img.img-6 {
    animation: movebounce 2.2s linear infinite;
    bottom: -3%;
    left: 0
}

@media (max-width:1700px) {
    .landing-home-section .home-images img.img-6 {
        width: 340px
    }
}

@media (max-width:1500px) {
    .landing-home-section .home-images img.img-6 {
        width: 310px
    }
}

@media (max-width:1120px) {
    .landing-home-section .home-images img.img-6 {
        width: 270px
    }
}

@media (max-width:991px) {
    .landing-home-section .home-images img.img-6 {
        display: none;
        width: 220px
    }
}

.landing-home-section .home-images img.img-7 {
    animation: movebounce 3.2s linear infinite;
    right: 3%;
    top: 18%
}

@media (max-width:1700px) {
    .landing-home-section .home-images img.img-7 {
        width: 340px
    }
}

@media (max-width:1500px) {
    .landing-home-section .home-images img.img-7 {
        width: 310px
    }
}

@media (max-width:1120px) {
    .landing-home-section .home-images img.img-7 {
        width: 270px
    }
}

@media (max-width:991px) {
    .landing-home-section .home-images img.img-7 {
        display: none;
        width: 220px
    }
}

.landing-home-section .home-images img.img-8 {
    animation: movebounce 2.2s linear infinite;
    bottom: -1%;
    right: 0
}

@media (max-width:1700px) {
    .landing-home-section .home-images img.img-8 {
        width: 340px
    }
}

@media (max-width:1500px) {
    .landing-home-section .home-images img.img-8 {
        width: 310px
    }
}

@media (max-width:1120px) {
    .landing-home-section .home-images img.img-8 {
        width: 270px
    }
}

@media (max-width:991px) {
    .landing-home-section .home-images img.img-8 {
        display: none;
        width: 220px
    }
}

.demo-section {
    position: relative
}

.demo-section .landing-tab-1 .nav-tabs {
    border: none;
    gap: 20px;
    justify-content: center
}

.demo-section .landing-tab-1 .nav-tabs .nav-link {
    background-color: rgba(var(--theme-default), .1);
    background-image: unset;
    border: 1px solid rgba(var(--theme-default), .1);
    border-radius: 4px;
    cursor: pointer;
    padding: 15px 25px;
    transition: all .4s ease-in-out
}

.demo-section .landing-tab-1 .nav-tabs .nav-link h6 {
    color: rgba(var(--theme-default), 1);
    font-weight: 400;
    margin: 0;
    transition: all .4s ease-in-out
}

.demo-section .landing-tab-1 .nav-tabs .nav-link.active,
.demo-section .landing-tab-1 .nav-tabs .nav-link:hover {
    background-color: transparent;
    background-image: linear-gradient(to right, rgba(var(--theme-default), 1) 0, #c28f51 51%, rgba(var(--theme-default), 1) 100%);
    border-color: rgba(var(--theme-default), 1)
}

.demo-section .landing-tab-1 .nav-tabs .nav-link.active h6,
.demo-section .landing-tab-1 .nav-tabs .nav-link:hover h6 {
    color: rgba(var(--white), 1)
}

.demo-section .main-home-demo {
    margin-top: 30px
}

.demo-section .main-home-demo .img-box {
    background-color: #fbf8f5;
    border: 1px solid rgba(var(--border), 1);
    border-radius: 4px;
    overflow: hidden;
    padding: 10px;
    position: relative;
    transition: all .4s ease-in-out;
    z-index: 1
}

.demo-section .main-home-demo .img-box a {
    position: relative
}

.demo-section .main-home-demo .img-box a:after {
    background-image: linear-gradient(180deg, rgba(var(--light-white), .01), rgba(var(--light-white), .01), rgba(var(--theme-default), .3));
    border-radius: 4px;
    bottom: 0;
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    transition: all .4s ease-in-out;
    width: 100%
}

.demo-section .main-home-demo .img-box a img {
    border-radius: 4px
}

.demo-section .main-home-demo .img-box a .icon {
    background-color: rgba(var(--theme-default), 1);
    border-radius: 4px;
    bottom: -25%;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    transition: all .4s ease-in-out;
    width: -moz-fit-content;
    width: fit-content;
    z-index: 1
}

.demo-section .main-home-demo .img-box a .icon h4 {
    color: rgba(var(--white), 1);
    margin-bottom: 0;
    padding: 8px 16px
}

.demo-section .main-home-demo .img-box:after {
    left: 0;
    top: 0
}

.demo-section .main-home-demo .img-box:after,
.demo-section .main-home-demo .img-box:before {
    background-image: linear-gradient(180deg, rgba(var(--light-white), 1), rgba(var(--theme-default), 1), rgba(var(--light-white), 1));
    content: "";
    height: 0;
    position: absolute;
    transition: all .4s ease-in-out;
    width: 2px
}

.demo-section .main-home-demo .img-box:before {
    bottom: 0;
    right: 0
}

.demo-section .main-home-demo .img-box:hover a:after,
.demo-section .main-home-demo .img-box:hover:after,
.demo-section .main-home-demo .img-box:hover:before {
    height: 100%
}

.demo-section .main-home-demo .img-box:hover a .icon {
    bottom: 6%
}

.demo-section .deme-section-img {
    position: absolute;
    right: 0;
    top: 20%;
    z-index: -1
}

.demo-section .deme-section-img img {
    width: 280px
}

.demo-section .patten {
    bottom: -10%;
    left: 0;
    opacity: .5;
    position: absolute;
    z-index: -1
}

.demo-section .patten img {
    width: 70%
}

.marquee-section {
    overflow: hidden
}

.marquee-section .marquee {
    display: flex;
    white-space: nowrap
}

[dir=rtl] .marquee-section .marquee {
    left: unset;
    right: 27%
}

@media (max-width:767px) {
    .marquee-section .marquee {
        left: 40%
    }
}

@media (max-width:550px) {
    .marquee-section .marquee {
        left: 30%
    }
}

@media (max-width:430px) {
    .marquee-section .marquee {
        left: 25%
    }
}

.marquee-section .marquee .marquee__item {
    animation-duration: 27s;
    animation-iteration-count: infinite;
    animation-name: marquee-content;
    animation-timing-function: linear
}

.marquee-section .marquee .marquee__item .animation-text {
    background: linear-gradient(rgba(var(--light-white), 1), rgba(var(--theme-default), .1), rgba(var(--light-white), 1));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: calc(-14.4px + 10.125vw);
    font-weight: 800;
    margin-bottom: -18px;
    margin-top: -42px
}

@media (max-width:767px) {
    .marquee-section .marquee .marquee__item .animation-text {
        font-size: calc(20px + 3.125vw)
    }
}

.feature-section .feature-box {
    background-image: linear-gradient(206deg, rgba(var(--white), 1), rgba(var(--theme-default), .1));
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border: 2px solid rgba(var(--theme-default), .1);
    border-radius: 4px;
    padding: calc(8.4px + 1.125vw) calc(7.6px + 1.375vw);
    text-align: center;
    transition: all .4s ease-in-out
}

.feature-section .feature-box .icon {
    align-items: center;
    background-color: var(--white);
    border-radius: 300px;
    box-shadow: 8px 8px 26px 10px rgba(3, 11, 41, .04);
    display: flex;
    height: 90px;
    justify-content: center;
    margin: 0 auto 30px;
    position: relative;
    transition: .5s;
    width: 90px;
    z-index: 2
}

.feature-section .feature-box .icon:before {
    background-image: linear-gradient(125deg, #b8905e 14.31%, rgba(var(--theme-default), .7) 86.5%);
    border-radius: 50%;
    content: "";
    height: 95%;
    position: absolute;
    transition: .7s;
    width: 91%;
    z-index: 1
}

.feature-section .feature-box .icon:after {
    background: linear-gradient(125deg, #b8905e 25.31%, rgba(var(--theme-default), .7));
    border-radius: 50%;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: .5s;
    width: 0;
    z-index: 0
}

.feature-section .feature-box .icon img {
    position: relative;
    z-index: 2
}

.feature-section .feature-box:hover {
    background-image: linear-gradient(206deg, rgba(var(--theme-default), .1), rgba(var(--white), 1)), url(f248403bacd4b6a15e08.png);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1)
}

.feature-section .feature-box:hover .icon:before {
    transform: rotate(180deg)
}

.feature-section .feature-box:hover .icon:after {
    height: 100%;
    width: 100%
}

.attributes-section .attributes-box {
    background-image: linear-gradient(206deg, rgba(var(--theme-default), .15), rgba(var(--white), .5), rgba(var(--theme-default), .15)), url(f248403bacd4b6a15e08.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 4px;
    padding: calc(10px + 1.25vw) calc(-1.6px + .5vw);
    position: relative;
    text-align: center;
    transition: all .4s ease-in-out
}

.attributes-section .attributes-box:after {
    left: 0;
    top: 0
}

.attributes-section .attributes-box:after,
.attributes-section .attributes-box:before {
    background-image: linear-gradient(180deg, rgba(var(--light-white), 1), rgba(var(--theme-default), 1), rgba(var(--light-white), 1));
    content: "";
    height: 0;
    position: absolute;
    transition: all .4s ease-in-out;
    width: 2px
}

.attributes-section .attributes-box:before {
    bottom: 0;
    right: 0
}

.attributes-section .attributes-box .icon {
    margin-bottom: 14px
}

.attributes-section .attributes-box h5 {
    font-size: calc(12.4px + .5vw);
    text-transform: capitalize;
    transition: all .4s ease-in-out
}

.attributes-section .attributes-box:hover:after,
.attributes-section .attributes-box:hover:before {
    height: 100%
}

.attributes-section .attributes-box:hover h5 {
    color: rgba(var(--theme-default), 1)
}

.tap-top {
    background: rgba(var(--theme-default));
    border: none;
    bottom: 30px;
    color: rgba(var(--white), 1);
    cursor: pointer;
    font-size: 22px;
    height: 35px;
    padding: 6px 5px 5px;
    position: fixed;
    right: -60px;
    text-align: center;
    transform: rotate(-10deg);
    transition: all .5s ease;
    width: 35px;
    z-index: 7
}

@media (max-width:577px) {
    .tap-top {
        bottom: 80px
    }
}

.tap-top i {
    font-size: 20px
}

.tap-top:after {
    background-color: rgba(var(--black), 1);
    background: radial-gradient(ellipse at center, rgba(var(--black), .07) 0, rgba(var(--black), 0) 100%);
    bottom: -12px;
    content: "";
    height: 11px;
    left: 0;
    position: absolute;
    transform: rotate(8deg);
    width: 100%
}

.tap-top>div {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-top: 2px
}

.tap-top.top {
    display: block;
    right: 40px;
    transition: all .5s ease
}

.all-pages-section {
    background-color: rgba(var(--theme-default), .1)
}

.all-pages-section .landing-tab-2 .nav {
    gap: 12px;
    justify-content: center
}

@media (max-width:767px) {
    .all-pages-section .landing-tab-2 .nav {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: scroll
    }
}

.all-pages-section .landing-tab-2 .nav .nav-item .nav-link {
    background-color: rgba(var(--white), 1);
    color: rgba(var(--theme-font-color), 1);
    font-size: calc(15.6px + .125vw);
    white-space: nowrap
}

.all-pages-section .landing-tab-2 .nav .nav-item .nav-link.active {
    background-color: transparent;
    background-image: linear-gradient(to right, rgba(var(--theme-default), 1) 0, #c28f51 51%, rgba(var(--theme-default), 1) 100%);
    color: rgba(var(--white), 1)
}

.all-pages-section .tab-content .img-boxes {
    background-color: rgba(var(--light-background), .8);
    border: 1px solid rgba(var(--border), 1);
    border-radius: 4px;
    padding: 7px
}

.widget-section {
    position: relative
}

.widget-section .widget-box {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background-color: rgba(var(--light-background), .8);
    border-radius: 10px;
    box-shadow: 0 2px 8px 0 rgba(99, 99, 99, .2);
    padding: calc(8.8px + .375vw);
    transition: all .4s ease-in-out
}

.widget-section .widget-box .widget-content {
    padding: 0 calc(4px + 1.25vw) calc(8.4px + 1.125vw);
    text-align: center
}

.widget-section .widget-box .widget-content h4 {
    transition: all .4s ease-in-out
}

.widget-section .widget-box .widget-content p {
    display: -webkit-box !important;
    margin: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 90%;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal
}

@media (max-width:1399px) {
    .widget-section .widget-box .widget-content p {
        width: 100%
    }
}

.widget-section .widget-box:hover {
    background-color: rgba(var(--theme-default), .2)
}

.widget-section .widget-box:hover .widget-content h4 {
    color: rgba(var(--theme-default), 1)
}

.widget-section .widget-bg-img-1 {
    left: 0;
    opacity: .2;
    position: absolute;
    top: 10%;
    width: 50%;
    z-index: -1
}

.widget-section .widget-bg-img-2 {
    bottom: 0;
    opacity: .2;
    position: absolute;
    right: 0;
    width: 50%;
    z-index: -1
}

.footer-landing {
    background-color: #2a2a2a;
    background-image: url(55f3315c21c95e285169.png);
    background-repeat: no-repeat;
    background-size: cover
}

.footer-landing .footer-contant {
    text-align: center
}

.footer-landing .footer-contant h3 {
    color: rgba(var(--white), 1);
    margin-bottom: 12px
}

.footer-landing .footer-contant p {
    color: rgba(var(--white), .8);
    font-size: calc(15.2px + .25vw);
    margin-bottom: 30px
}

.footer-landing .footer-contant a {
    background-image: linear-gradient(to right, rgba(var(--theme-default), 1) 0, #c28f51 51%, rgba(var(--theme-default), 1) 100%);
    border-radius: 4px;
    color: rgba(var(--white), 1);
    font-size: calc(14.8px + .375vw);
    padding: 8px 20px;
    transform: scale(1);
    transition: all .4s ease-in-out
}

.footer-landing .footer-contant a:hover {
    transform: scale(1.1)
}

@keyframes smoothScroll {
    0% {
        transform: translateY(-40px)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes horizontal-shaking {

    0%,
    18%,
    to {
        transform: translateZ(0)
    }

    10%,
    14%,
    2%,
    6% {
        transform: translate3d(-1px, 0, 0)
    }

    12%,
    16%,
    4%,
    8% {
        transform: translate3d(1px, 0, 0)
    }
}

@keyframes marquee-content {
    0% {
        transform: translateX(-100%)
    }

    to {
        transform: translateX(0)
    }
}

@keyframes movebounce {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(5px)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes tada {
    0% {
        transform: scaleX(1)
    }

    10% {
        transform: scale3d(.8, .8, .8) rotate(-3deg)
    }

    20% {
        transform: scale3d(.8, .8, .8) rotate(-3deg)
    }

    30% {
        transform: scaleX(1) rotate(3deg)
    }

    50% {
        transform: scaleX(1) rotate(3deg)
    }

    70% {
        transform: scaleX(1) rotate(3deg)
    }

    90% {
        transform: scaleX(1) rotate(3deg)
    }

    40% {
        transform: scaleX(1) rotate(-3deg)
    }

    60% {
        transform: scaleX(1) rotate(-3deg)
    }

    80% {
        transform: scaleX(1) rotate(-3deg)
    }

    to {
        transform: scaleX(1)
    }
}