body {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    background-color: #fff;
    color: #10271d;
    line-height: 125%
}

@media(min-width: 1200px) {
    body {
        font-size: 16px
    }
}

a {
    text-decoration: none;
    transition: all 400ms ease
}

a:hover {
    color: #9fd456
}

p,
span {
    margin-bottom: 0;
    line-height: 150%;
    color: #404a60
}

button {
    border: none;
    background-color: rgba(0, 0, 0, 0)
}

input:focus,
textarea:focus {
    outline: none
}

.text-n20 {
    color: #f5f6f7
}

.text-bg2 {
    color: #10271d
}

.text-n100 {
    color: #798090
}

.text-n500 {
    color: #404a60
}

.text-n700 {
    color: #222e48
}

.display-1 {
    font-size: 40px;
    font-weight: 600
}

.display-2 {
    font-size: 36px;
    font-weight: 600
}

.display-3 {
    font-size: 34px;
    font-weight: 600
}

.display-4 {
    font-size: 32px;
    font-weight: 600
}

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

.max-w-full {
    max-width: 100% !important
}

h1 {
    font-size: 28px;
    font-weight: bold;
    line-height: 130%
}

h2 {
    font-size: 24px;
    font-weight: 600;
    line-height: 130%
}

h3 {
    font-size: 22px;
    font-weight: 600;
    line-height: 130%
}

h4 {
    font-size: 18px;
    font-weight: 600
}

h5 {
    font-size: 16px
}

h6 {
    font-size: 14px
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #222e48;
    font-weight: 600
}

.text-n20 {
    color: #f5f6f7
}

.text-n40 {
    color: #dfe0e4
}

.xl-text {
    font-size: 18px
}

.text-sm {
    font-size: 14px
}

.text-lg {
    font-size: 18px
}

.text-secondary2 {
    color: #30584c
}

.text-secondary3 {
    color: #e65e36
}

.bg1 {
    background-color: #e7f0e9
}

@media(min-width: 1200px) {
    .pb-200 {
        padding-bottom: 200px !important
    }
}

@media(min-width: 768px) {
    .display-1 {
        font-size: 50px;
        font-weight: 600
    }
    .display-2 {
        font-size: 52px;
        font-weight: 600
    }
    .display-3 {
        font-size: 48px;
        font-weight: 600
    }
    .display-4 {
        font-size: 40px;
        font-weight: 600
    }
    h1 {
        font-size: 48px;
        font-weight: 600
    }
    h2 {
        font-size: 36px;
        font-weight: 600
    }
    h3 {
        font-size: 28px;
        font-weight: 600
    }
    h4 {
        font-size: 22px
    }
    h5 {
        font-size: 18px
    }
    h6 {
        font-size: 16px
    }
}

@media(min-width: 1400px) {
    .display-1 {
        font-size: 80px;
        font-weight: 600
    }
    .display-2 {
        font-size: 72px;
        font-weight: 600
    }
    .display-3 {
        font-size: 64px;
        font-weight: 600
    }
    .display-4 {
        font-size: 56px;
        font-weight: 600
    }
    h1 {
        font-size: 56px;
        font-weight: 600
    }
    h2 {
        font-size: 40px;
        font-weight: 600
    }
    h3 {
        font-size: 32px;
        font-weight: 600
    }
    h4 {
        font-size: 24px
    }
    h5 {
        font-size: 20px
    }
    h6 {
        font-size: 16px
    }
    .xl-text {
        font-size: 20px
    }
}

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

.black-btn,
.primary-btn,
.secondary3-btn,
.outline-btn {
    background-color: #10271d;
    border-radius: 0;
    padding: 14px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #9fd456 !important;
    border: 1px solid #13203b;
    position: relative;
    overflow: hidden;
    transition: .5s;
    font-weight: 600;
    z-index: 1
}

.black-btn::before,
.primary-btn::before,
.secondary3-btn::before,
.outline-btn::before {
    content: "";
    width: 0;
    height: 900%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    background: #9fd456;
    transition: .5s ease;
    display: block;
    z-index: -1
}

.black-btn:hover,
.primary-btn:hover,
.secondary3-btn:hover,
.outline-btn:hover {
    color: #13203b !important
}

.black-btn:hover::before,
.primary-btn:hover::before,
.secondary3-btn:hover::before,
.outline-btn:hover::before {
    width: 150%
}

.outline-btn {
    background-color: rgba(0, 0, 0, 0);
    padding: .8em 1.8em;
    color: #30584c !important;
    border: 1px solid #30584c
}

.outline-btn.primary {
    color: #9fd456 !important;
    border-color: #9fd456
}

.outline-btn.primary:hover {
    color: #10271d !important
}

.primary-btn,
.secondary3-btn {
    padding: 10px 14px;
    background-color: #9fd456;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222e48 !important;
    font-weight: 600;
    border: 1px solid #9fd456;
    gap: 8px
}

@media(min-width: 768px) {
    .primary-btn,
    .secondary3-btn {
        padding: 14px 14px
    }
}

.primary-btn::before,
.secondary3-btn::before {
    background: #fff
}

.primary-btn i,
.secondary3-btn i {
    font-size: 1.3rem
}

.primary-btn:hover,
.secondary3-btn:hover {
    color: #30584c !important;
    border-color: #30584c
}

.secondary3-btn {
    background-color: #e65e36;
    border: 1px solid #e65e36;
    color: #fff !important
}

.white-btn {
    padding: 8px 16px;
    background-color: #fff;
    color: #10271d;
    font-weight: 600
}

.arrow-up,
.footer .arrow-up-2 {
    height: 80px;
    width: 80px;
    background-color: #9fd456;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #222e48
}

@media(min-width: 1200px) {
    .arrow-up,
    .footer .arrow-up-2 {
        height: 140px;
        width: 140px
    }
}

.arrow-up:hover,
.footer .arrow-up-2:hover {
    color: #222e48
}

.dir-rtl {
    direction: rtl
}

.max-un {
    max-width: 100%
}

@media(min-width: 1200px) {
    .max-un {
        max-width: unset
    }
}

.nice-select {
    border-radius: 0;
    background-color: rgba(231, 240, 233, .6);
    color: #c1c4cc;
    border: none;
    width: 100%;
    height: 45px;
    margin-top: -2px;
    padding: 12px;
    padding-right: 36px !important;
    display: flex;
    align-items: center
}

@media(min-width: 992px) {
    .nice-select {
        height: 45px;
        padding: 12px 24px
    }
}

.nice-select::after {
    right: 20px;
    width: 8px;
    height: 8px;
    margin-top: -5px;
    border-color: #fff
}

.nice-select.sort {
    border: 1px solid #5b6477
}

.nice-select.sort .current {
    color: #404a60
}

.nice-select.sort::after {
    border-color: #404a60;
    right: 12px
}

.nice-select .nice-select-dropdown {
    margin-top: 0 !important;
    background-color: #000 !important;
    border-radius: 0;
    box-shadow: 0 0 0 1px rgba(68, 68, 68, .11);
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    transform-origin: 50% 0;
    transform: scale(0.75) translateY(19px);
    transition: all .2s cubic-bezier(0.5, 0, 0, 1.25), opacity .15s ease-out;
    z-index: 9;
    opacity: 0;
    width: 100%;
    padding-bottom: 0
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected,
.nice-select .option.selected.focus {
    background-color: #9fd456;
    color: #5b6477
}

.nice-select .list {
    border-radius: 0;
    padding-bottom: 0
}

.nice-select .nice-select-dropdown .list .option {
    border-radius: 0
}

.vertical,
.vertical-white,
.vertical-sm,
.vertical-sm-black {
    display: none;
    writing-mode: vertical-lr;
    white-space: nowrap;
    margin: 0;
    font-size: 35px;
    font-weight: 600;
    transform: rotate(-180deg);
    color: rgba(0, 0, 0, 0);
    text-transform: uppercase;
    -webkit-text-stroke: 1px #10271d;
    opacity: .4
}

@media(min-width: 1400px) {
    .vertical,
    .vertical-white,
    .vertical-sm,
    .vertical-sm-black {
        display: block
    }
}

@media(min-width: 1400px) {
    .vertical,
    .vertical-white,
    .vertical-sm,
    .vertical-sm-black {
        font-size: 56px
    }
}

.vertical-sm,
.vertical-sm-black {
    text-transform: none;
    position: relative;
    z-index: 2;
    font-size: 40px;
    -webkit-text-stroke-width: 1;
    -webkit-text-stroke-color: #10271d
}

.vertical-white {
    opacity: .4
}

.vertical-sm-black {
    opacity: .5;
    -webkit-text-stroke-width: .8px;
    -webkit-text-stroke-color: #13203b
}

.arrow {
    color: #9fd456;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    border: 1px dashed rgba(232, 191, 150, .3);
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center
}

@media(min-width: 1600px) {
    .arrow {
        width: 128px;
        height: 128px
    }
}

.line,
.about-line-3,
.about-line-2,
.about-line-1,
.line-right {
    display: none;
    width: 1px;
    height: 100%;
    position: absolute;
    left: 5%;
    top: 0;
    z-index: 2;
    background: rgba(159, 212, 86, .1);
    opacity: 1
}

@media(min-width: 1400px) {
    .line,
    .about-line-3,
    .about-line-2,
    .about-line-1,
    .line-right {
        display: block
    }
}

@media(min-width: 1400px) {
    .line,
    .about-line-3,
    .about-line-2,
    .about-line-1,
    .line-right {
        left: 10%
    }
}

@media(min-width: 1700px) {
    .line,
    .about-line-3,
    .about-line-2,
    .about-line-1,
    .line-right {
        left: 17%
    }
}

.line::after,
.about-line-3::after,
.about-line-2::after,
.about-line-1::after,
.line-right::after {
    content: "";
    height: 70px;
    width: 1px;
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    opacity: 1;
    background: linear-gradient(to bottom, rgba(159, 212, 86, 0.1176470588), #9fd456, rgba(159, 212, 86, 0.1725490196));
    animation: slideToBottom 14s linear infinite alternate
}

.line.two,
.two.about-line-3,
.two.about-line-2,
.two.about-line-1,
.two.line-right {
    left: 34%
}

.line.two::after,
.two.about-line-3::after,
.two.about-line-2::after,
.two.about-line-1::after,
.two.line-right::after {
    animation: slideToBottom 18s linear 1s infinite alternate
}

.line.three,
.three.about-line-3,
.three.about-line-2,
.three.about-line-1,
.three.line-right {
    left: 65%
}

.line.three::after,
.three.about-line-3::after,
.three.about-line-2::after,
.three.about-line-1::after,
.three.line-right::after {
    animation: slideToBottom 22s linear 300ms infinite alternate
}

.line.four,
.four.about-line-3,
.four.about-line-2,
.four.about-line-1,
.four.line-right {
    left: 82%
}

.line.four::after,
.four.about-line-3::after,
.four.about-line-2::after,
.four.about-line-1::after,
.four.line-right::after {
    animation: slideToBottom 28s linear 800ms infinite alternate
}

.line-right {
    left: auto;
    right: 5%
}

@media(min-width: 1400px) {
    .line-right {
        right: 10%
    }
}

@media(min-width: 1700px) {
    .line-right {
        right: 13%
    }
}

@keyframes slideToBottom {
    0% {
        top: 0
    }
    100% {
        top: 88%
    }
}

.left-col {
    padding-left: 0 !important
}

@media(min-width: 576px) {
    .left-col {
        padding-left: calc((100% - 540px)/2) !important
    }
}

@media(min-width: 768px) {
    .left-col {
        padding-left: calc((100% - 720px)/2) !important
    }
}

@media(min-width: 992px) {
    .left-col {
        padding-left: calc((100% - 960px)/2) !important
    }
}

@media(min-width: 1200px) {
    .left-col {
        padding-left: calc((100% - 1140px)/2) !important
    }
}

@media(min-width: 1400px) {
    .left-col {
        padding-left: calc((100% - 1320px)/2) !important
    }
}

.right-col {
    padding-right: 0
}

@media(min-width: 576px) {
    .right-col {
        padding-right: calc((100% - 540px)/2)
    }
}

@media(min-width: 768px) {
    .right-col {
        padding-right: calc((100% - 720px)/2)
    }
}

@media(min-width: 992px) {
    .right-col {
        padding-right: calc((100% - 960px)/2)
    }
}

@media(min-width: 1200px) {
    .right-col {
        padding-right: calc((100% - 1140px)/2)
    }
}

@media(min-width: 1400px) {
    .right-col {
        padding-right: calc((100% - 1320px)/2)
    }
}

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

@media(min-width: 1200px) {
    .pt-120 {
        padding-top: 120px
    }
}

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

@media(min-width: 1200px) {
    .pb-120 {
        padding-bottom: 120px
    }
}

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

@media(min-width: 1200px) {
    .pt-80 {
        padding-top: 80px
    }
}

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

@media(min-width: 1200px) {
    .pb-80 {
        padding-bottom: 80px
    }
}

.container-big {
    max-width: 1752px;
    margin: 0 auto;
    padding: 0 12px
}

.back-to-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 999;
    background-color: #30584c;
    color: #fff;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: .5s;
    visibility: hidden;
    transform: translateX(250px);
    opacity: 0
}

.back-to-top.show {
    transform: translateX(0);
    opacity: 1;
    visibility: visible
}

.reveal {
    visibility: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible
}

.reveal.reveal--overlay {
    background-color: rgba(16, 39, 29, .4)
}

.title-anim {
    top: 100%;
    line-height: 100%;
    overflow: hidden;
    position: relative
}

.solarox-input {
    font-size: 14px;
    border: 1px solid rgba(16, 39, 29, .1);
    background: rgba(16, 39, 29, .05);
    padding: 12px;
    color: #13203b;
    width: 100%
}

@media(min-width: 992px) {
    .solarox-input {
        padding: 12px 24px
    }
}

.solarox-input:focus {
    outline: rgba(0, 0, 0, 0);
    box-shadow: none
}

.solarox-input.bg1 {
    background-color: #e7f0e9
}

.header {
    z-index: 20;
    position: absolute;
    top: 0;
    left: 0;
    padding: 12px 8px
}

.header.fixed {
    position: fixed;
    background-color: #10271d;
    animation-name: fadeInUp;
    animation-duration: 1s;
    box-shadow: rgba(149, 157, 165, .2) 0px 8px 24px;
    z-index: 999999;
}

@media(min-width: 992px) {
    .header {
        padding: 12px
    }
}

@media(min-width: 1400px) {
    .header {
        padding: 24px 12px
    }
}

.header.index-2 {
    padding: 12px
}

@media(min-width: 1400px) {
    .header.index-2 {
        padding: 16px 12px
    }
    .header.index-2 .menu {
        gap: 24px
    }
}

.header.index-3 {
    background-color: #fff
}

.header.index-3 .menu li a,
.header.index-3 .menu li span {
    color: #222e48
}

.header.index-3 .menu li a.active,
.header.index-3 .menu li span.active {
    color: #e65e36
}

.header .menu {
    display: none;
    padding: 20px;
    gap: 12px
}

@media(min-width: 992px) {
    .header .menu {
        display: flex
    }
}

@media(min-width: 1400px) {
    .header .menu {
        gap: 24px
    }
}

.header .menu li {
    display: flex;
    align-items: center
}

.header .menu li span,
.header .menu li a {
    color: #fff;
    display: flex;
    font-weight: 500;
    align-items: center
}

.header .menu li span.active,
.header .menu li a.active {
    color: #9fd456
}

.header .menu .submenu {
    position: relative;
    display: flex;
    flex-direction: column
}

.header .menu .submenu.mega-menu {
    position: static
}

.header .menu .submenu span {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px
}

@media(max-width: 991px) {
    .header .menu .submenu span {
        width: 100%;
        display: flex;
        justify-content: space-between
    }
}

.header .menu .submenu span i {
    font-size: 1.2rem;
    margin-top: 3px
}

.header .menu .submenu span.active {
    color: #9fd456
}

.header .menu .submenu .submenu-dropdown {
    padding: 8px 0;
    z-index: 19;
    list-style: none;
    border: 1px solid #404a60;
    background-color: #10271d
}

@media(max-width: 991px) {
    .header .menu .submenu .submenu-dropdown {
        width: 100%
    }
}

.header .menu .submenu .submenu-dropdown li a {
    position: relative;
    padding: 8px 16px;
    display: block;
    width: 100%;
    font-weight: 500;
    color: #fff
}

.header .menu .submenu .submenu-dropdown li a:hover {
    color: #9fd456
}

.header .menu .submenu .submenu-dropdown li a.active {
    color: #9fd456
}

@media(min-width: 992px) {
    .header .menu .submenu .submenu-dropdown {
        transition: all 300ms ease;
        visibility: hidden;
        opacity: 0;
        transform: translateY(20px);
        position: absolute;
        left: 0;
        top: 150%;
        min-width: 200px;
        max-height: 300px;
        overflow-y: auto
    }
    .header .menu .submenu .submenu-dropdown.mega-dropdown {
        width: 100%;
        top: 85%;
        left: 0;
        display: flex;
        padding: 8px;
        gap: 8px;
        background-color: #10271d
    }
    .header .menu .submenu .submenu-dropdown.mega-dropdown li a {
        display: flex;
        flex-direction: column;
        padding: 8px;
        gap: 12px;
        border-radius: 4px;
        background-color: rgba(159, 212, 86, .2)
    }
    .header .menu .submenu .submenu-dropdown.mega-dropdown li a:hover img {
        transform: scale(1.2)
    }
    .header .menu .submenu .submenu-dropdown.mega-dropdown li a .home-img {
        overflow: hidden;
        border-radius: 4px
    }
    .header .menu .submenu .submenu-dropdown.mega-dropdown li a img {
        transition-duration: 400ms;
        width: 100%;
        height: 100%;
        border-radius: 4px
    }
    .header .menu .submenu .submenu-dropdown.mega-dropdown li a span {
        font-weight: 500;
        font-size: 14px;
        color: #fff
    }
}

@media(min-width: 992px) {
    .header .menu .submenu:hover .submenu-dropdown {
        visibility: visible;
        opacity: 1;
        transform: translateY(0)
    }
    .header .menu .submenu:hover a {
        color: #9fd456
    }
}

.header .toggle-menu {
    flex-shrink: 0;
    color: #fff;
    font-size: 2rem
}

@media(min-width: 992px) {
    .header .toggle-menu {
        display: none
    }
}

.header .toggle-menu.bg2 {
    color: #10271d
}

.header.shop {
    background-color: #fff;
    position: fixed
}

.header.shop .menu li a,
.header.shop .menu li span {
    color: #222e48
}

.header.shop .menu li a.active,
.header.shop .menu li span.active {
    color: #e65e36
}

.header.shop .toggle-menu {
    color: #222e48
}

.left-sidebar {
    max-width: 400px;
    width: 100%;
    background-color: #10271d;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 22;
    transform: translateX(110%);
    transition: all 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

.left-sidebar.open {
    transform: translateX(0)
}

.left-sidebar .offcanvas-body {
    padding: 30px
}

.left-sidebar .offcanvas-body p {
    font-size: 20px;
    margin-top: 28px;
    padding-bottom: 48px;
    border-bottom: 1px solid #404a60
}

.left-sidebar .offcanvas-body h5 {
    margin-top: 30px;
    margin-bottom: 30px
}

.left-sidebar .offcanvas-body .gallery {
    padding-bottom: 48px;
    margin-bottom: 48px;
    border-bottom: 1px solid #404a60
}

.left-sidebar .offcanvas-body .gallery a img {
    width: 98px;
    height: 98px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center
}

.left-sidebar.open+.left-sidebar-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(16, 39, 29, .8);
    z-index: 21;
    transition: all .8s cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

.left-sidebar.open+html {
    overflow: hidden !important
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        top: -100px
    }
    to {
        opacity: 1;
        top: 0
    }
}

.space-header {
    padding-top: 80px
}

@media(min-width: 992px) {
    .space-header {
        padding-top: 104px
    }
}

@media(min-width: 1400px) {
    .space-header {
        padding-top: 128px
    }
}

.search-popup {
    position: fixed;
    inset: 0;
    z-index: 999;
    background-color: #fff;
    width: 100%;
    height: 100vh;
    transform: translateY(-100%);
    transition: all 500ms ease
}

.search-popup.show {
    transform: translateY(0)
}

.search-popup .search-popup-inner {
    z-index: 99;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%
}

.search-popup .search-popup-inner .close-text {
    position: absolute;
    top: 24px;
    left: 24px;
    font-size: 14px;
    color: #979ca8
}

.search-popup .search-popup-inner .search-popup-close {
    height: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
    color: #10271d;
    cursor: pointer;
    z-index: 99
}

.search-popup .search-popup-inner .search-form {
    width: 100%;
    max-width: 720px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 12px
}

.search-popup .search-popup-inner .search-form input {
    width: 100%;
    padding: 16px 24px;
    font-size: 24px;
    color: #222e48;
    text-align: center;
    display: inline-block;
    background-color: #fff
}

.search-popup .search-popup-inner .search-form input::-moz-placeholder {
    color: #5b6477
}

.search-popup .search-popup-inner .search-form input::placeholder {
    color: #5b6477
}

.search-popup .search-popup-inner .search-form .effect {
    border: 0;
    padding: 7px 0;
    border-bottom: 1px solid #ccc
}

.search-popup .search-popup-inner .search-form .effect~.focus-border {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #30584c;
    transition: .4s
}

.search-popup .search-popup-inner .search-form .effect:focus~.focus-border {
    width: 100%;
    transition: .4s;
    left: 0
}

.cart-dropdown .cart-title {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px dashed #dfe0e4
}

.cart-dropdown .dropdown-menu {
    min-width: 260px;
    padding: 12px 16px
}

@media(min-width: 580px) {
    .cart-dropdown .dropdown-menu {
        min-width: 300px
    }
}

.cart-dropdown .cart-item-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 300px;
    overflow-y: auto
}

.cart-dropdown .cart-item {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: center
}

.cart-dropdown .cart-item h6 {
    margin-bottom: 4px;
    font-size: 14px
}

.cart-dropdown .cart-item p {
    font-size: 12px
}

.cart-dropdown .cart-item .cart-item-remove {
    position: absolute;
    top: 0;
    right: 4px;
    font-size: 16px;
    color: #5b6477;
    cursor: pointer
}

.cart-dropdown .checkout {
    margin-top: 8px;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #9fd456;
    color: #10271d;
    padding: 12px 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 500
}

.mini-scrollbar ::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

.mini-scrollbar ::-webkit-scrollbar-track {
    background: #10271d
}

.mini-scrollbar ::-webkit-scrollbar-thumb {
    background: #5b6477;
    border-radius: 12px
}

.mobile-menu {
    background-color: #10271d;
    z-index: 22;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    padding: 16px 12px;
    max-width: 350px;
    transform: translateX(-120%);
    transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    padding-bottom: 30px
}

.mobile-menu.open {
    transform: translateX(0)
}

.mobile-menu .menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 20;
    padding: 20px 0;
    margin: 0 auto
}

.mobile-menu .menu li {
    display: flex;
    align-items: center
}

.mobile-menu .menu li span,
.mobile-menu .menu li a {
    color: #fff;
    width: 100%;
    padding: 8px;
    border: 1px solid rgba(159, 212, 86, .4)
}

.mobile-menu .menu li span.active,
.mobile-menu .menu li a.active {
    color: #9fd456
}

.mobile-menu .menu .submenu {
    position: relative;
    display: flex;
    flex-direction: column
}

.mobile-menu .menu .submenu span {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px
}

@media(max-width: 991px) {
    .mobile-menu .menu .submenu span {
        width: 100%;
        display: flex;
        justify-content: space-between
    }
}

.mobile-menu .menu .submenu span i {
    font-size: 1.2rem;
    margin-top: 3px
}

.mobile-menu .menu .submenu span.active {
    color: #9fd456
}

.mobile-menu .menu .submenu .submenu-dropdown {
    padding-left: 16px;
    z-index: 19;
    list-style: none;
    display: none;
    width: 100%;
    margin-top: 6px
}

.mobile-menu .menu .submenu .submenu-dropdown li a {
    position: relative;
    margin-bottom: 6px;
    padding: 8px;
    display: block;
    width: 100%;
    color: #fff
}

.mobile-menu .menu .submenu .submenu-dropdown li a:hover {
    color: #9fd456
}

.mobile-menu .menu .submenu .submenu-dropdown li a.active {
    color: #9fd456
}

.mobile-menu.open+.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(16, 39, 29, .6);
    z-index: 21;
    transition: all .8s cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

.footer {
    background-color: #10271d;
    position: relative
}

.footer.footer-two {
    background-color: #e7f0e9
}

.footer.footer-two form {
    background-color: #e7f0e9;
    max-width: 420px;
    width: 100%
}

.footer.footer-two .logo {
    margin-bottom: 20px
}

@media(min-width: 768px) {
    .footer.footer-two .logo {
        margin-bottom: 40px
    }
}

.footer.footer-two .footer-two-inner {
    max-width: 1752px;
    margin: 0 auto
}

@media(min-width: 768px) {
    .footer.footer-two .footer-two-inner {
        padding: 0 12px
    }
}

@media(min-width: 768px) {
    .footer.footer-two .footer-two-inner .footer-card,
    .footer.footer-two .footer-two-inner .footer-card-3 {
        border-right: 1px solid rgba(16, 39, 29, .2)
    }
}

.footer.footer-three {
    padding-top: 60px
}

@media(min-width: 1200px) {
    .footer.footer-three {
        padding-top: 110px
    }
}

@media(min-width: 1200px) {
    .footer.footer-three::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 25%;
        background-color: #fff
    }
}

@media(min-width: 1200px)and (min-width: 1600px) {
    .footer.footer-three::after {
        width: 30%
    }
}

.footer.footer-three .logo {
    margin-bottom: 20px
}

@media(min-width: 768px) {
    .footer.footer-three .logo {
        margin-bottom: 40px
    }
}

.footer.footer-three form button {
    height: 40px;
    width: 40px;
    font-size: 1.5rem
}

@media(min-width: 992px) {
    .footer.footer-three form button {
        height: 52px;
        width: 52px;
        font-size: 2rem
    }
}

.footer.footer-three a,
.footer.footer-three p {
    color: #fff
}

@media(min-width: 1200px) {
    .footer.footer-three a,
    .footer.footer-three p {
        color: #13203b
    }
}

.footer .cta {
    padding: 30px;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #9fd456;
    margin-bottom: 60px
}

@media(min-width: 576px) {
    .footer .cta {
        padding: 40px
    }
}

@media(min-width: 992px) {
    .footer .cta {
        padding: 80px
    }
}

@media(min-width: 1400px) {
    .footer .cta {
        padding: 120px 110px;
        background-image: url("../images/cta-2.webp")
    }
}

.footer .cta .cta-content {
    max-width: 636px
}

@media(min-width: 1200px) {
    .footer .cta {
        margin-top: -220px;
        margin-bottom: 120px
    }
}

.footer .contact-two {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-left: 0
}

.footer .contact-two .contact-item {
    display: flex;
    align-items: center;
    gap: 20px
}

.footer .contact-two .contact-item a,
.footer .contact-two .contact-item p {
    color: #404a60
}

.footer .contact-two .contact-icon {
    border: 1px solid rgba(48, 88, 76, .2);
    color: #30584c;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    cursor: pointer;
    transition-duration: 300ms;
    display: flex;
    align-items: center;
    justify-content: center
}

.footer .contact-two .contact-icon:hover {
    background: #9fd456
}

.footer .quick-link li>a {
    color: #fff;
    transition: all 400ms ease-in-out
}

.footer .quick-link li>a:hover {
    color: #404a60;
    margin-left: 8px
}

.footer .rotate-text {
    animation: rotate 10s linear infinite
}

.footer .navigate-part {
    padding: 0 12px 40px
}

@media(min-width: 992px) {
    .footer .navigate-part {
        padding-bottom: 40px;
        padding-left: 40px
    }
}

@media(min-width: 1400px) {
    .footer .navigate-part {
        padding-bottom: 110px;
        padding-left: 80px
    }
}

.footer .navigate-part .top {
    padding-bottom: 40px
}

@media(min-width: 992px) {
    .footer .navigate-part .top {
        padding-bottom: 60px
    }
}

@media(min-width: 1200px) {
    .footer .navigate-part .top {
        padding-bottom: 100px
    }
}

.footer .navigate-part .navigation-links {
    padding-left: 0;
    gap: 20px;
    margin-bottom: 0;
    list-style-type: none
}

.footer .navigate-part .navigation-links li a {
    margin-bottom: 12px;
    display: inline-block;
    color: #404a60
}

.footer .navigate-part .navigation-links li a:hover {
    color: #80aa45
}

.footer .copyright-two {
    padding: 24px 0;
    border-top: 1px solid rgba(16, 39, 29, .2)
}

@media(min-width: 768px) {
    .footer .copyright-two {
        padding: 32px 0
    }
}

.footer .copyright-two ul li a {
    color: #222e48
}

@keyframes rotate {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

.banner {
    position: relative
}

.banner video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.banner::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(90deg, rgba(16, 39, 29, 0.8) 0%, rgba(16, 39, 29, 0.6) 45.61%, rgba(16, 39, 29, 0.6) 76.6%, rgba(16, 39, 29, 0.8) 100%)
}

.banner .banner-content {
    position: relative;
    z-index: 8;
    padding: 70px 0
}

@media(min-width: 768px) {
    .banner .banner-content {
        padding: 90px 0
    }
}

@media(min-width: 1200px) {
    .banner .banner-content {
        padding: 155px 0 250px
    }
}

@media(min-width: 1600px) {
    .banner .banner-content {
        padding: 155px 0 280px
    }
}

.banner .hero-text {
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    font-size: 12vw
}

@media(min-width: 580px) {
    .banner .hero-text {
        font-size: 10vw
    }
}

@media(min-width: 670px) {
    .banner .hero-text {
        font-size: 8vw
    }
}

@media(min-width: 768px) {
    .banner .hero-text {
        font-size: 72px
    }
}

@media(min-width: 992px) {
    .banner .hero-text {
        font-size: 90px
    }
}

@media(min-width: 1200px) {
    .banner .hero-text {
        font-size: 100px
    }
}

@media(min-width: 1400px) {
    .banner .hero-text {
        font-size: 148px
    }
}

.banner p {
    color: #f5f6f7
}

.banner .circular-text-big {
    flex-shrink: 0;
    position: relative;
    border-radius: 9999px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #9fd456;
    height: 120px;
    width: 120px
}

.banner .circular-text-big p {
    width: 102px;
    height: 102px;
    position: relative;
    font-size: 12px;
    letter-spacing: .07em;
    animation: effect 8s linear infinite
}

.banner .circular-text-big span {
    position: absolute;
    left: 50%;
    text-transform: uppercase;
    font-weight: 600;
    color: #222e48;
    transform-origin: 0px 52px;
    transform-style: flat
}

.banner .circular-text-big .inner {
    width: 54px;
    height: 54px;
    position: absolute;
    border: 1px solid #222e48;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.banner .circular-text-big .inner button {
    width: 32px;
    height: 32px;
    border: none;
    color: #9fd456;
    border-radius: 100%;
    background-color: #222e48;
    display: flex;
    align-items: center;
    justify-content: center
}

@keyframes effect {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

.banner.banner-6 .banner-content {
    padding-top: 150px;
    padding-bottom: 80px
}



.banner.banner-6 .banner-content .hero-6-text {
    color: #fff;
    font-size: 30px
}

@media(min-width: 768px) {
    .banner.banner-6 .banner-content .hero-6-text {
        font-size: 50px
    }
}


.banner .vertical,
.banner .vertical-sm,
.banner .vertical-white,
.banner .vertical-sm-black {
    -webkit-text-stroke: 1px #9fd456;
    opacity: .5
}

.circular-text-big {
    flex-shrink: 0;
    position: relative;
    border-radius: 9999px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #9fd456;
    height: 120px;
    width: 120px
}

.circular-text-big p {
    width: 102px;
    height: 102px;
    position: relative;
    font-size: 12px;
    letter-spacing: .07em;
    animation: effect 8s linear infinite
}

.circular-text-big span {
    position: absolute;
    left: 50%;
    text-transform: uppercase;
    font-weight: 600;
    color: #222e48;
    transform-origin: 0px 52px;
    transform-style: flat
}

.circular-text-big .inner {
    width: 54px;
    height: 54px;
    position: absolute;
    border: 1px solid #222e48;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.circular-text-big .inner button {
    width: 32px;
    height: 32px;
    border: none;
    color: #9fd456;
    border-radius: 100%;
    background-color: #222e48;
    display: flex;
    align-items: center;
    justify-content: center
}

.side-text {
    position: absolute;
    left: 30px;
    z-index: 5;
    top: 50%;
    transform: translateY(-50%)
}

@media(min-width: 1700px) {
    .side-text {
        left: 80px
    }
}

.about {
    position: relative;
    background-color: #fff
}

.about .about-img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%
}

@media(min-width: 1750px) {
    .about .about-img {
        width: auto;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0
    }
}

.about .vertical,
.about .vertical-sm,
.about .vertical-white,
.about .vertical-sm-black {
    position: absolute;
    right: 20px;
    top: 20%;
    transform: rotate(-180deg) translateY(-50%)
}

@media(min-width: 1200px) {
    .about .vertical,
    .about .vertical-sm,
    .about .vertical-white,
    .about .vertical-sm-black {
        right: 40px
    }
}

@media(max-width: 1199px) {
    .about .counter-wrapper {
        padding: 40px 0;
        background-color: #9fd456;
        margin-bottom: 24px
    }
}

@media(min-width: 1200px) {
    .about .counter-wrapper {
        padding: 60px 30px;
        transform: translateY(-50%);
        width: 100%
    }
    .about .counter-wrapper::after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        right: 0;
        bottom: 0;
        top: 0;
        background-color: #9fd456
    }
}

@media(min-width: 1200px)and (min-width: 992px) {
    .about .counter-wrapper::after {
        width: 94%
    }
}

@media(min-width: 1200px)and (min-width: 1200px) {
    .about .counter-wrapper::after {
        width: 92%
    }
}

@media(min-width: 1200px)and (min-width: 1600px) {
    .about .counter-wrapper::after {
        width: 84%
    }
}

.about .counter-wrapper .counter-inner .display-3 {
    display: flex;
    align-items: center
}

.about .counter-wrapper .counter-inner .display-3 .odometer-value {
    color: #222e48;
    font-weight: 600 !important
}

.about .counter-wrapper .counter-inner span {
    color: #222e48
}

.about .about-content {
    padding: 50px 0
}

@media(min-width: 1200px) {
    .about .about-content {
        padding: 0 0 120px
    }
}

.about .about-content .team-feature {
    list-style-type: none;
    padding-left: 0;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.about .about-content .team-feature li {
    display: flex;
    align-items: center;
    gap: 8px
}

.about .about-content .team-feature li i {
    font-size: 1.3rem;
    color: #e65e36
}

.about .about-content .team-feature li span {
    color: #222e48
}

@media(min-width: 992px) {
    .about .about-content .team-feature li span {
        font-size: 20px
    }
}

.about-line-1 {
    left: 0
}

.about-line-2 {
    left: 50%
}

.about-line-2::after {
    animation-duration: 20s;
    animation-delay: 3s
}

.about-line-3 {
    right: 0;
    left: auto
}

.about-line-3::after {
    animation-duration: 14s
}

.left-text {
    position: absolute;
    top: 50%;
    left: 20px;
    margin: 0;
    transform: translateY(-50%)
}

@media(min-width: 1600px) {
    .left-text {
        left: 80px
    }
}

.right-text {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%)
}

@media(min-width: 1400px) {
    .right-text {
        right: 40px
    }
}

.btns,
.btns-client,
.btns-client-3,
.btns-client-2 {
    display: flex;
    gap: 12px
}

.btns button,
.btns-client button,
.btns-client-3 button,
.btns-client-2 button {
    height: 40px;
    width: 40px;
    color: #30584c;
    border: 1px solid #30584c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    transition: all 400ms ease-in-out
}

@media(min-width: 1200px) {
    .btns button,
    .btns-client button,
    .btns-client-3 button,
    .btns-client-2 button {
        height: 56px;
        width: 56px
    }
}

.btns button:hover,
.btns-client button:hover,
.btns-client-3 button:hover,
.btns-client-2 button:hover {
    background-color: #9fd456;
    border-color: #9fd456;
    color: #13203b
}

.section-title {
    margin-bottom: 30px
}



.services {
    background-color: #e7f0e9;
    padding: 40px 0;
    position: relative
}



.services.white {
    background-color: #fff
}

.services p {
    color: #404a60
}


.services .service-card {
    position: relative;
    padding: 20px;
    background: #fef6eb;
    transition: all 400ms ease-in
}

@media(min-width: 992px) {
    .services .service-card {
        padding: 32px
    }
}

.services .service-card.two:hover .arrow-sm {
    left: 0
}

.services .service-card:hover {
    background-color: #9fd456
}

.services .service-card:hover .hr-line {
    background-color: #30584c;
    opacity: .2
}

.services .service-card:hover .arrow-sm {
    background-color: #222e48;
    left: 80%;
    color: #9fd456
}

@media(min-width: 480px) {
    .services .service-card:hover .arrow-sm {
        left: 88%
    }
}

.services .service-card:hover .readmore {
    display: flex;
    bottom: 20px
}

@media(min-width: 992px) {
    .services .service-card:hover .readmore {
        bottom: 32px
    }
}

.services .service-card img {
    margin-bottom: 35px;
    height: 80px;
}

.services .service-card .hr-line {
    background-color: #80aa45;
    width: 100%;
    height: 1px;
    opacity: .5;
    display: block;
    transition: all 400ms ease;
    margin-bottom: 24px
}

.services .service-card .readmore {
    flex-grow: 1;
    display: none;
    position: absolute;
    left: 20px;
    gap: 8px;
    bottom: -20px;
    align-items: flex-end;
    transition: all 400ms ease-in-out
}

@media(min-width: 992px) {
    .services .service-card .readmore {
        left: 32px
    }
}

.services .service-card .readmore a {
    color: #222e48;
    white-space: nowrap
}

.services .service-card .readmore .hr-black {
    min-width: 100px;
    height: 2px;
    background-color: #000
}

@media(min-width: 1400px) {
    .services .service-card .readmore .hr-black {
        min-width: 200px
    }
}

.services .service-card p {
    margin-bottom: 24px
}

.arrow-sm {
    font-size: 1.3rem;
    color: #80aa45;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #80aa45;
    display: inline-block;
    width: 48px;
    height: 48px;
    display: flex;
    position: relative;
    left: 0;
    align-items: center;
    justify-content: center;
    transition: all 400ms ease-in-out
}

.arrow-sm.secondary {
    color: #30584c;
    border-color: #30584c
}

.whychoose {
    background-image: url("../images/why-choose-bg-1.webp");
    background-color: #fff;
    position: relative;
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain
}

@media(max-width: 768px) {
    .whychoose {
        background-size: cover
    }
}

.whychoose .whychoose-card {
    margin: 60px 0;
    padding: 24px 16px;
    background-color: #e7f0e9
}

@media(min-width: 1200px) {
    .whychoose .whychoose-card {
        margin: 120px 0
    }
}

@media(min-width: 768px) {
    .whychoose .whychoose-card {
        padding: 40px 30px
    }
}

@media(min-width: 992px) {
    .whychoose .whychoose-card {
        padding: 50px
    }
}

@media(min-width: 1200px) {
    .whychoose .whychoose-card {
        padding: 80px
    }
}

@media(min-width: 1400px) {
    .whychoose .whychoose-card {
        padding: 120px 110px
    }
}

.why-list {
    -moz-column-count: 1;
    column-count: 1;
    margin-bottom: 30px;
    padding-left: 0;
    list-style-type: none
}

@media(min-width: 992px) {
    .why-list {
        -moz-column-count: 2;
        column-count: 2
    }
}

@media(min-width: 1200px) {
    .why-list {
        margin-bottom: 30px
    }
}

.why-list li {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 150%;
    color: #222e48
}

@media(min-width: 992px) {
    .why-list li {
        font-size: 20px
    }
}

.why-list li i {
    font-size: .8rem
}

.recent {
    background-color: #fff;
    padding: 60px 0;
    background-image: url(../images/recent-bg-1.webp);
    background-repeat: no-repeat;
    background-position: top left
}

@media(min-width: 1200px) {
    .recent {
        padding: 120px 0
    }
}

.recent .right-text {
    right: 40px
}

@media(min-width: 1800px) {
    .recent .right-text {
        right: 120px
    }
}

.recent .recent-projects {
    padding: 16px;
    background-color: #e7f0e9
}

@media(min-width: 768px) {
    .recent .recent-projects {
        padding: 30px
    }
}

@media(min-width: 992px) {
    .recent .recent-projects {
        padding: 60px
    }
}

@media(min-width: 1400px) {
    .recent .recent-projects {
        padding: 110px 100px 120px
    }
}

.recent .recent-projects p {
    color: #222e48
}

.recent .recent-projects .project-box {
    background-color: #fff;
    align-items: center;
    padding: 12px;
    display: flex;
    gap: 20px;
    color: #222e48
}

@media(min-width: 1400px) {
    .recent .recent-projects .project-box {
        gap: 40px
    }
}

.recent .recent-projects .project-box p {
    color: #404a60
}

.recent .recent-projects .project-box h5 {
    min-width: 182px
}

.recent .recent-projects .project-box:hover {
    background-color: #9fd456
}

.recent .recent-projects .project-box:hover .arrow-sm {
    background-color: #222e48;
    color: #fff
}

.recent .recent-projects .project-box .arrow-sm {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border: 1px solid #9fd456;
    transition: all 400ms ease-in-out;
    font-size: 1.6rem;
    color: #9fd456;
    display: flex;
    align-items: center;
    justify-content: center
}

.experts {
    background-color: #e7f0e9
}

.experts.n0 {
    background-color: #fff
}

.experts .expert-card {
    overflow: hidden;
    padding: 16px;
    border: 1px solid #9fd456
}

@media(min-width: 1400px) {
    .experts .expert-card {
        padding: 32px
    }
}

.experts .expert-card .img-box {
    position: relative;
    background-color: #9fd456;
    overflow: hidden;
    text-align: center
}

.experts .expert-card .img-box img {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center
}

.experts .expert-card .img-box .social {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex
}

.experts .expert-card .img-box .social .links {
    position: absolute;
    padding: 0;
    right: -170px;
    bottom: 0;
    flex-direction: row;
    display: flex;
    list-style: none;
    align-items: center;
    flex-grow: 1;
    transition: all .8s cubic-bezier(0.41, 1.01, 0.52, 0.99)
}

.experts .expert-card .img-box .social .links li>a {
    border-right: 1px solid rgba(159, 212, 86, .5)
}

.experts .expert-card .img-box .social .links.active {
    right: 60px
}

@media(min-width: 768px) {
    .experts .expert-card .img-box .social .links.active {
        right: 85px !important
    }
}

.experts .expert-card .img-box .social .social-btn,
.experts .expert-card .img-box .social li>a {
    border: 0;
    background-color: #9fd456;
    transition: all .5s ease;
    color: #222e48;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem
}

.experts .expert-card .img-box .social .social-btn:hover,
.experts .expert-card .img-box .social li>a:hover {
    background-color: #10271d;
    color: #9fd456
}

@media(min-width: 768px) {
    .experts .expert-card .img-box .social .social-btn,
    .experts .expert-card .img-box .social li>a {
        width: 85px;
        height: 85px
    }
}

.experts .expert-card .img-box .social .social-btn:first-child,
.experts .expert-card .img-box .social li>a:first-child {
    border-right: 1px solid rgba(16, 39, 29, .3)
}

.experts .expert-card .number {
    width: 60px;
    height: 60px;
    border: 1px solid #9fd456;
    display: flex;
    align-items: center;
    justify-content: center
}

@media(min-width: 768px) {
    .experts .expert-card .number {
        width: 85px;
        height: 85px
    }
}

.testimonial {
    background-color: #fff;
    position: relative;
    background-image: url(../images/client-bg-1.webp);
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain
}

@media(max-width: 991px) {
    .testimonial {
        background-size: cover
    }
}

.testimonial .testimonial-inner {
    background-color: #e7f0e9;
    padding: 16px
}

@media(min-width: 576px) {
    .testimonial .testimonial-inner {
        padding: 40px
    }
}

@media(min-width: 768px) {
    .testimonial .testimonial-inner {
        padding: 60px
    }
}

@media(min-width: 1200px) {
    .testimonial .testimonial-inner {
        padding: 115px 100px 120px
    }
}

.testimonial-card {
    position: relative;
    padding: 20px;
    background-color: #fff
}

@media(min-width: 768px) {
    .testimonial-card {
        padding: 30px
    }
}

@media(min-width: 1400px) {
    .testimonial-card {
        padding: 40px
    }
}

.testimonial-card.bg2 {
    background-color: #10271d;
    color: #fff
}

.testimonial-card.bg2 span {
    color: #f5f6f7
}

.testimonial-card.bg1 {
    background-color: #e7f0e9
}

.testimonial-card.bg1 .quote {
    opacity: .1;
    transform: scale(0.7);
    filter: brightness(0)
}

.testimonial-card.signup {
    max-width: 410px;
    max-height: -moz-fit-content;
    max-height: fit-content
}

@media(min-width: 1400px) {
    .testimonial-card.signup {
        padding: 32px
    }
}

.testimonial-card span {
    color: #404a60
}

.testimonial-card .quote {
    position: absolute;
    bottom: 30px;
    right: 30px;
    opacity: .2
}

.testimonial-card .stars {
    font-size: 20px
}

.testimonial-card p {
    line-height: 150% !important
}

@media(min-width: 992px) {
    .testimonial-card p {
        font-size: 18px
    }
}

.btns-client,
.btns-client-3,
.btns-client-2 {
    background-color: rgba(0, 0, 0, 0);
    position: relative;
    z-index: 3
}

.btns-client button,
.btns-client-3 button,
.btns-client-2 button {
    color: #30584c;
    border-color: #30584c;
    background-color: rgba(0, 0, 0, 0)
}

.btns-client button:hover,
.btns-client-3 button:hover,
.btns-client-2 button:hover {
    background-color: #9fd456
}

.btns-client-2 {
    padding-right: 0;
    display: flex;
    justify-content: flex-end
}

.btns-client-3 {
    margin-top: 10px;
    justify-content: center
}

@media(min-width: 992px) {
    .btns-client-3 {
        justify-content: start
    }
}

.btns-client-3 button {
    color: #30584c;
    border-color: #30584c
}

.btns-client-3 button:hover {
    background-color: #9fd456;
    border-color: #9fd456
}

.faq {
    background-color: #e7f0e9;
    position: relative;
    padding: 60px 0;
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat
}

@media(min-width: 1200px) {
    .faq {
        padding: 120px 0;
        background-image: url(../images/faq-bg-1.webp)
    }
}

@media(min-width: 1200px) {
    .faq.faq-home {
        padding: 120px 0 340px
    }
}

.faq form {
    padding: 24px 16px;
    background-color: #fff
}

@media(min-width: 576px) {
    .faq form {
        padding: 40px 24px
    }
}

@media(min-width: 768px) {
    .faq form {
        padding: 32px
    }
}

.faq form p {
    padding-bottom: 20px;
    border-bottom: 1px dashed #6a7283
}

.faq form label {
    margin-bottom: 6px
}

@media(min-width: 768px) {
    .faq form label {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 10px
    }
}

.faq form .nice-select {
    border: 1px solid rgba(16, 39, 29, .1);
    background: rgba(16, 39, 29, .05)
}

.faq form .nice-select .current {
    color: #6a7283
}

.faq form .nice-select::after {
    border-color: #6a7283 !important
}

.faq form select {
    display: block
}

.faq .accordion-item {
    border: none;
    background-color: #9fd456;
    box-shadow: none
}

.faq .accordion-item:focus {
    box-shadow: none
}

.faq .accordion-item:first-of-type {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: none
}

.faq .accordion-item:last-of-type {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none
}

.faq .accordion-item:first-of-type .accordion-button.collapsed {
    border-top-right-radius: 0;
    border-top-left-radius: 0
}

.faq .accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.faq .accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}

.faq .accordion-button:not(.collapsed) {
    background-color: #9fd456;
    color: #222e48;
    box-shadow: none
}

.faq .accordion-button:not(.collapsed)::after {
    background-color: #10271d;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-minus' width='28' height='28' viewBox='0 0 24 24' stroke-width='1' stroke='%23FFFFFF' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l14 0' /%3E%3C/svg%3E")
}

.faq .accordion-button.collapsed::after {
    background-color: #9fd456;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-plus' width='28' height='28' viewBox='0 0 24 24' stroke-width='1' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 5l0 14' /%3E%3Cpath d='M5 12l14 0' /%3E%3C/svg%3E")
}

.faq .accordion-body {
    padding: 0 16px 16px
}

.faq .accordion-body p {
    border-top: 1px dashed #6a7283;
    padding-top: 12px
}

@media(min-width: 992px) {
    .faq .accordion-body {
        padding: 0 32px 16px
    }
}

.faq .accordion-button {
    background-color: #fff;
    color: #222e48;
    padding: 16px;
    font-size: 16px;
    line-height: 130% !important;
    padding-right: 10px
}

@media(min-width: 992px) {
    .faq .accordion-button {
        padding: 16px 32px;
        font-size: 18px;
        font-weight: 500
    }
}

.faq .accordion-button:focus {
    box-shadow: none
}

.faq .accordion-button::after {
    transition: none !important
}

.social-link {
    display: flex;
    gap: 12px;
    padding-left: 0;
    list-style: none;
    margin-bottom: 0
}

.social-link li a {
    border: 1px solid rgba(48, 88, 76, .2);
    background: rgba(159, 212, 86, .1);
    color: #9fd456;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.social-link li a:hover {
    background: #9fd456;
    color: #222e48
}

.social-link.two li a {
    border: 1px solid rgba(48, 88, 76, .2);
    background-color: rgba(0, 0, 0, 0);
    color: #30584c
}

.social-link.two li a:hover {
    background: #9fd456;
    color: #222e48;
    border-color: #9fd456
}

.footer {
    background-color: #10271d
}

.footer .footer-card,
.footer .footer-card-3 {
    height: 100%
}

.footer .footer-card .contact,
.footer .footer-card-3 .contact {
    margin-bottom: 0;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 17px
}

.footer .footer-card .contact .contact-item,
.footer .footer-card-3 .contact .contact-item {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 16px
}

.footer .footer-card .contact .contact-item .contact-icon,
.footer .footer-card-3 .contact .contact-item .contact-icon {
    background-color: #9fd456;
    width: 40px;
    height: 40px;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.footer .footer-up {
    padding-bottom: 60px
}

@media(min-width: 1200px) {
    .footer .footer-up {
        padding-bottom: 120px
    }
}

.footer .arrow-up-2 {
    background-color: #10271d;
    color: #9fd456
}

.footer form {
    padding: 8px;
    display: flex;
    justify-content: space-between;
    border: 1px solid rgba(159, 212, 86, .2);
    background: rgba(159, 212, 86, .1)
}

.footer form.two {
    background: #fff
}

.footer form:focus-within {
    border-color: #80aa45
}

.footer form input {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    color: #f5f6f7;
    width: 80%
}

@media(min-width: 768px) {
    .footer form input {
        width: 100%
    }
}

.footer form input:focus {
    border: none;
    outline: none
}

.footer form button {
    flex-shrink: 0;
    background-color: #9fd456;
    height: 40px;
    width: 40px;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none
}

@media(min-width: 992px) {
    .footer form button {
        height: 52px;
        width: 52px;
        font-size: 2rem
    }
}

.footer .footer-card-3 {
    background-color: #e7f0e9;
    padding: 0
}

.footer .copyright {
    border-top: 1px solid rgba(159, 212, 86, .2);
    padding: 20px 0
}

@media(min-width: 1200px) {
    .footer .copyright {
        padding: 32px 0
    }
}

.banner-two {
    position: relative;
    background-image: url(../images/hero-2-bg.webp);
    background-size: cover
}

.banner-two::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(90deg, rgba(16, 39, 29, 0.2) 0%, rgba(16, 39, 29, 0.4) 11.56%, rgba(16, 39, 29, 0.65) 25.64%, rgba(16, 39, 29, 0.8) 49.33%, rgba(16, 39, 29, 0.65) 71.2%, rgba(16, 39, 29, 0.4) 86.08%, rgba(16, 39, 29, 0.2) 100%)
}

.banner-two .content {
    display: flex;
    flex-direction: column;
    z-index: 3;
    width: 100%;
    padding-top: 120px;
    padding-bottom: 100px
}

@media(min-width: 768px) {
    .banner-two .content {
        gap: 20px;
        padding-top: 150px;
        padding-bottom: 140px
    }
}

@media(min-width: 992px) {
    .banner-two .content {
        padding-top: 240px;
        padding-bottom: 200px
    }
}

@media(min-width: 1200px) {
    .banner-two .content {
        padding-top: 260px;
        padding-bottom: 280px
    }
}

@media(min-width: 1400px) {
    .banner-two .content {
        padding-top: 380px
    }
}

.banner-two .content h2 {
    font-size: 38px;
    text-transform: uppercase;
    color: #fff
}

.banner-two .content h2.primary {
    color: #9fd456;
    text-decoration: underline
}

@media(min-width: 768px) {
    .banner-two .content h2 {
        font-size: 60px
    }
}

@media(min-width: 992px) {
    .banner-two .content h2 {
        font-size: 64px
    }
}

@media(min-width: 1200px) {
    .banner-two .content h2 {
        font-size: 80px
    }
}

@media(min-width: 1400px) {
    .banner-two .content h2 {
        font-size: 108px
    }
}

.banner-two p {
    color: #f5f6f7
}

.legal-partner {
    position: relative;
    background-color: #fff;
    z-index: 10;
    position: relative
}

.legal-partner .scroll-banner {
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    z-index: 4
}

@media(min-width: 1400px) {
    .legal-partner .scroll-banner {
        top: 40px;
        left: -20px
    }
}

@media(min-width: 1600px) {
    .legal-partner .scroll-banner {
        left: 60px
    }
}

.legal-partner .scroll-banner .arrow-down {
    position: relative
}

.legal-partner .scroll-banner .arrow-down img {
    position: relative;
    z-index: 4;
    width: 25px
}

@media(min-width: 1400px) {
    .legal-partner .scroll-banner .arrow-down img {
        width: auto
    }
}

.legal-partner .scroll-banner .arrow-down::after {
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 5%)
}

@media(min-width: 1400px) {
    .legal-partner .scroll-banner .arrow-down::after {
        width: 80px;
        height: 80px
    }
}

.legal-partner::before {
    content: "";
    width: 40%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #e7f0e9;
    height: 80%;
    z-index: 1
}

.legal-partner .legal-content {
    background-color: #e7f0e9;
    padding-top: 60px;
    position: relative;
    z-index: 11
}

@media(min-width: 1200px) {
    .legal-partner .legal-content {
        padding-top: 120px
    }
}

@media(max-width: 1199px) {
    .legal-partner .legal-content {
        position: relative;
        z-index: 11
    }
}

@media(min-width: 1200px) {
    .legal-partner .legal-content {
        left: 0;
        top: 0;
        z-index: 2;
        transform: translateY(-50%);
        margin-bottom: -185px
    }
    .legal-partner .legal-content::before {
        content: "";
        width: 50%;
        position: absolute;
        left: -50%;
        top: 0;
        background-color: #e7f0e9;
        height: 100%
    }
}

.legal-partner .legal-slider-wrapper {
    right: 0
}

.legal-partner .solar-video {
    overflow-x: hidden;
    position: relative;
    z-index: 3
}

.success-story {
    background-color: #fff;
    position: relative;
    padding: 60px 0
}

.success-story.two {
    background-color: #e7f0e9
}

@media(min-width: 992px) {
    .success-story {
        padding: 120px 0
    }
}

.success-story .story-slide-box {
    position: relative;
    transition: all 400ms ease-in-out
}

.success-story .story-slide-box img {
    width: 100%
}

.success-story .story-slide-box.two .success-info {
    box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, .04);
    background-color: #fff
}

.success-story .story-slide-box .success-info {
    position: absolute;
    max-width: 636px;
    bottom: 0;
    right: 0;
    background-color: #9fd456;
    padding: 16px;
    transform: scale(0.7);
    opacity: 0;
    z-index: 10;
    transition: all 400ms ease-in-out
}

@media(min-width: 768px) {
    .success-story .story-slide-box .success-info {
        padding: 30px
    }
}

@media(min-width: 1400px) {
    .success-story .story-slide-box .success-info {
        padding: 40px;
        left: 10%;
        bottom: 20px
    }
}

.success-story .swiper-slide-active {
    z-index: 10
}

.success-story .swiper-slide-active .story-slide-box:hover .success-info {
    opacity: 1;
    transform: scale(1)
}

.legal-solution {
    position: relative;
    overflow: hidden;
    background-color: #fff
}

.legal-solution .smart-solution-img {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    height: 100%;
    width: 100%
}

.legal-solution .scroll-card,
.legal-solution .faq-2 .scroll-card-2,
.faq-2 .legal-solution .scroll-card-2 {
    width: 280px;
    background-color: #fff;
    position: relative;
    right: 0;
    z-index: 2;
    padding-bottom: 80px;
    position: absolute;
    right: 0;
    bottom: 0
}

.legal-solution .solution-content {
    padding-top: 60px;
    position: relative;
    background-color: #e7f0e9;
    z-index: 3;
    padding: 16px
}

@media(min-width: 992px) {
    .legal-solution .solution-content {
        padding-top: 120px;
        margin-top: 60px
    }
}

@media(min-width: 1400px) {
    .legal-solution .solution-content {
        padding: 110px 0 110px 110px;
        margin-top: 110px
    }
}

.legal-solution .solution-content p {
    max-width: 636px
}

.legal-solution .solution-swiper .service-card {
    background-color: #fff;
    color: #222e48;
    padding: 16px
}

@media(min-width: 576px) {
    .legal-solution .solution-swiper .service-card {
        padding: 24px
    }
}

@media(min-width: 992px) {
    .legal-solution .solution-swiper .service-card {
        padding: 32px
    }
}

.legal-solution .solution-swiper .service-card img {
    margin-bottom: 32px
}

.legal-solution .solution-swiper .service-card .hr-line {
    display: block;
    height: 1px;
    width: 100%;
    background-color: #9fd456;
    opacity: .4;
    margin-bottom: 24px
}

.legal-solution .solution-swiper .service-card a {
    color: #10271d
}

.scroll-card,
.faq-2 .scroll-card-2 {
    background-color: #e7f0e9;
    padding: 20px 0;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px
}

@media(min-width: 768px) {
    .scroll-card,
    .faq-2 .scroll-card-2 {
        padding: 40px 0
    }
}

.scroll-card .arrow-down,
.faq-2 .scroll-card-2 .arrow-down {
    position: relative
}

.scroll-card .arrow-down img,
.faq-2 .scroll-card-2 .arrow-down img {
    position: relative;
    z-index: 1
}

.scroll-card .arrow-down::after,
.faq-2 .scroll-card-2 .arrow-down::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    background-color: #e7f0e9;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -16%)
}

.why-choose-2 {
    background-color: #fff;
    overflow-x: hidden;
    padding: 60px 0
}

@media(min-width: 992px) {
    .why-choose-2 {
        padding: 120px 0
    }
}

.why-choose-2 .player-container {
    position: relative;
    z-index: 1
}

@media(min-width: 1200px) {
    .why-choose-2 .video-img {
        max-width: unset
    }
}

.why-choose-2 .why-2-card {
    padding: 24px;
    background-color: #e7f0e9
}

@media(min-width: 576px) {
    .why-choose-2 .why-2-card {
        padding: 30px
    }
}

@media(min-width: 992px) {
    .why-choose-2 .why-2-card {
        padding: 50px
    }
}

@media(min-width: 1400px) {
    .why-choose-2 .why-2-card {
        padding: 120px 110px
    }
}

.why-choose-2 .why-2-card .why-list {
    -moz-column-count: 1;
    column-count: 1;
    font-weight: 500
}

@media(min-width: 992px) {
    .why-choose-2 .why-2-card .why-list {
        font-size: 20px;
        -moz-column-count: 2;
        column-count: 2;
        margin-bottom: 30px
    }
}

.why-choose-2 .why-counter {
    margin-top: 30px;
    z-index: 3;
    position: relative
}

@media(min-width: 1200px) {
    .why-choose-2 .why-counter {
        margin-top: -380px
    }
}

.play-btn {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    height: 48px;
    width: 48px;
    font-size: 1.3rem;
    background-color: #9fd456;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%
}

@media(min-width: 1400px) {
    .play-btn.unset {
        left: 58%
    }
}

@media(min-width: 1200px) {
    .play-btn {
        font-size: 1.6rem;
        width: 64px;
        height: 64px
    }
}

.play-btn i {
    color: #222e48
}

.counter-card {
    background-color: #10271d;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    padding: 50px 24px;
    transition: all 400ms ease-in-out
}

.counter-card h2 span,
.counter-card h2 {
    color: #9fd456;
    transition-duration: 300ms
}

.counter-card span {
    color: #fff;
    transition-duration: 300ms
}

.counter-card.bg1 {
    background-color: #e7f0e9
}

.counter-card.bg1 h2 {
    color: #10271d
}

.counter-card.bg1 span {
    color: #10271d
}

.counter-card:hover {
    background-color: #9fd456
}

.counter-card:hover h2,
.counter-card:hover h2 span,
.counter-card:hover span {
    color: #222e48
}

@media(min-width: 1200px) {
    .counter-card {
        padding: 80px 24px
    }
}

.expert-card-2 {
    overflow: hidden;
    padding: 8px;
    background-color: #fff;
    border: 1px solid #9fd456;
    transition-duration: 300ms
}

.expert-card-2:hover {
    border-color: #80aa45
}

.expert-card-2 .img-box {
    display: flex;
    justify-content: center;
    background-color: #9fd456
}

.expert-card-2 .img-box img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center
}

.expert-card-2 .links {
    position: absolute;
    padding: 0;
    top: -265%;
    flex-direction: column;
    display: flex;
    left: -30%;
    list-style: none;
    align-items: center;
    flex-grow: 1;
    z-index: 2;
    transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1)
}

.expert-card-2 .links li a {
    border-bottom: 1px solid rgba(192, 162, 134, .4039215686)
}

.expert-card-2 .links.active {
    left: 0
}

.expert-card-2 .social-btn,
.expert-card-2 li>a {
    border: 0;
    background-color: #10271d;
    color: #9fd456;
    transition: all 400ms ease-in-out;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem
}

.expert-card-2 .social-btn:hover,
.expert-card-2 li>a:hover {
    background-color: #9fd456;
    color: #222e48
}

@media(min-width: 768px) {
    .expert-card-2 .social-btn,
    .expert-card-2 li>a {
        width: 85px;
        height: 85px
    }
}

.testimonial-2 {
    position: relative;
    background-color: #fff
}

.testimonial-2::after {
    content: "";
    width: 100%;
    height: 40%;
    position: absolute;
    background: #e7f0e9;
    bottom: 0;
    left: 0
}

.testimonial-2 .testimonial-title {
    padding-top: 30px;
    padding-bottom: 30px
}

@media(min-width: 992px) {
    .testimonial-2 .testimonial-title {
        padding-top: 60px;
        padding-bottom: 40px
    }
}

@media(min-width: 1200px) {
    .testimonial-2 .testimonial-title {
        padding-top: 110px
    }
}

@media(min-width: 1800px) {
    .testimonial-2 .testimonial-title {
        padding-left: 30px
    }
}

.testimonial-2 .left-side {
    z-index: 5;
    position: relative;
    padding-right: 20px;
    padding-bottom: 50px
}

@media(min-width: 992px) {
    .testimonial-2 .left-side {
        padding-right: 60px
    }
}

@media(min-width: 1400px) {
    .testimonial-2 .left-side {
        padding-right: 120px;
        padding-bottom: 100px
    }
}

.testimonial-2 .right-side {
    position: relative;
    z-index: 2
}

.testimonial-card-2 {
    position: relative;
    padding: 20px;
    z-index: 5;
    background: #10271d;
    border: 1px solid #4d453f
}

.testimonial-card-2::after {
    background: #10271d !important
}

@media(min-width: 1200px) {
    .testimonial-card-2 {
        padding: 30px
    }
    .testimonial-card-2 i {
        font-size: 1.3rem
    }
}

@media(min-width: 1400px) {
    .testimonial-card-2 {
        padding: 40px
    }
}

.testimonial-card-2 span {
    color: #f5f6f7
}

.testimonial-card-2 .quote {
    position: absolute;
    bottom: 30px;
    right: 30px
}

.testimonial-card-2 p {
    font-size: 14px
}

@media(min-width: 992px) {
    .testimonial-card-2 p {
        font-size: 16px
    }
}

.testimonial-card-2 .quote {
    opacity: .2
}

.faq-2 {
    background-color: #fff
}

.faq-2 .swiper-wrapper {
    transition-timing-function: linear !important
}

.faq-2 .scroll-card-2 {
    position: absolute;
    right: 0;
    bottom: 0;
    padding-bottom: 80px
}

@media(min-width: 1200px) {
    .faq-2 .scroll-card-2 {
        bottom: 220px
    }
}

.faq-2 .scroll-card-2 .arrow-down::after {
    background-color: #fff
}

.faq-2 .logo-slider-2 {
    background-color: #e7f0e9
}

.faq-2 .logo-slider-2 img {
    padding: 20px
}

@media(min-width: 992px) {
    .faq-2 .logo-slider-2 img {
        padding: 60px 20px
    }
}

.faq-2 .faq-content {
    background-color: #fff;
    padding: 16px
}

@media(min-width: 576px) {
    .faq-2 .faq-content {
        padding: 30px
    }
}

@media(min-width: 1200px) {
    .faq-2 .faq-content {
        padding: 80px 20px 250px 90px
    }
}

@media(min-width: 1200px) {
    .faq-2 .faq-content.no-cta {
        padding: 60px 20px 60px 90px
    }
}

.faq-2 .accordion-item {
    border: none;
    background-color: #9fd456;
    box-shadow: none
}

.faq-2 .accordion-item:focus {
    box-shadow: none
}

.faq-2 .accordion-item:first-of-type {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: none
}

.faq-2 .accordion-item:last-of-type {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none
}

.faq-2 .accordion-item:first-of-type .accordion-button.collapsed {
    border-top-right-radius: 0;
    border-top-left-radius: 0
}

.faq-2 .accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.faq-2 .accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}

.faq-2 .accordion-button:not(.collapsed) {
    background-color: #9fd456;
    color: #222e48;
    box-shadow: none
}

.faq-2 .accordion-button:not(.collapsed)::after {
    background-color: #10271d;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-minus' width='28' height='28' viewBox='0 0 24 24' stroke-width='1' stroke='%23FFFFFF' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l14 0' /%3E%3C/svg%3E")
}

.faq-2 .accordion-button.collapsed::after {
    background-color: #9fd456;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-plus' width='28' height='28' viewBox='0 0 24 24' stroke-width='1' stroke='%23000' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 5l0 14' /%3E%3Cpath d='M5 12l14 0' /%3E%3C/svg%3E")
}

.faq-2 .accordion-body {
    padding: 0 16px 16px
}

.faq-2 .accordion-body p {
    border-top: 1px dashed #6a7283;
    padding-top: 12px;
    font-size: 14px;
    color: #222e48
}

@media(min-width: 1600px) {
    .faq-2 .accordion-body {
        padding: 0 32px 16px
    }
}

.faq-2 .accordion-button {
    background-color: #e7f0e9;
    color: #222e48;
    padding: 16px;
    line-height: 120%;
    font-size: 14px;
    font-weight: 500
}

@media(min-width: 992px) {
    .faq-2 .accordion-button {
        padding: 16px
    }
}

@media(min-width: 1600px) {
    .faq-2 .accordion-button {
        padding: 16px 32px;
        font-size: 18px
    }
}

.faq-2 .accordion-button:focus {
    box-shadow: none
}

.faq-2 .accordion-button::after {
    transform: none !important
}

.banner-3 {
    position: relative;
    background-color: #e7f0e9
}

.banner-3 .scroll-banner {
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    left: 10px;
    bottom: 80px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    z-index: 4;
    display: none
}

@media(min-width: 1400px) {
    .banner-3 .scroll-banner {
        bottom: 280px;
        left: 40px
    }
}

.banner-3 .scroll-banner .arrow-down {
    position: relative
}

.banner-3 .scroll-banner .arrow-down img {
    position: relative;
    z-index: 4
}

.banner-3 .scroll-banner .arrow-down::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    background-color: #e7f0e9;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 0%)
}

@media(min-width: 1750px) {
    .banner-3 .scroll-banner {
        display: flex
    }
}

.banner-3 .banner-content {
    position: relative;
    z-index: 2;
    padding: 60px 12px
}

@media(min-width: 992px) {
    .banner-3 .banner-content {
        padding: 90px 0
    }
}

.banner-3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 29%;
    background-color: #fff
}

.nav-btns-home-3,
.major-brands .brand-btns-home4,
.counter-3 .counter-nav-btns-home-3 {
    display: flex;
    gap: 12px;
    position: absolute;
    bottom: 20px;
    right: 20px
}

@media(min-width: 992px) {
    .nav-btns-home-3,
    .major-brands .brand-btns-home4,
    .counter-3 .counter-nav-btns-home-3 {
        bottom: 40px;
        right: 0
    }
}

.nav-btns-home-3 button,
.major-brands .brand-btns-home4 button,
.counter-3 .counter-nav-btns-home-3 button {
    border: 1px solid #9fd456;
    width: 40px;
    height: 40px;
    background-color: #fff;
    color: #9fd456;
    font-size: 1.4rem;
    transition: all 400ms ease-in-out;
    top: 30%;
    z-index: 5
}

@media(min-width: 576px) {
    .nav-btns-home-3 button,
    .major-brands .brand-btns-home4 button,
    .counter-3 .counter-nav-btns-home-3 button {
        width: 56px;
        height: 56px
    }
}

.nav-btns-home-3 button:hover,
.major-brands .brand-btns-home4 button:hover,
.counter-3 .counter-nav-btns-home-3 button:hover {
    background-color: #9fd456;
    color: #222e48
}

.brand-slider {
    background-color: #fff;
    padding: 60px 0
}

@media(min-width: 992px) {
    .brand-slider p {
        font-size: 20px
    }
}

.brand-slider .swiper-slide {
    display: flex;
    justify-content: center;
    max-width: -moz-max-content;
    max-width: max-content
}

.brand-slider .swiper-slide img {
    padding: 0 16px
}

.empower {
    background-color: #e7f0e9;
    background-image: url(../images/turbine.webp);
    background-position: left top;
    background-size: auto;
    background-repeat: no-repeat;
    padding-top: 150px
}

@media(min-width: 992px) {
    .empower {
        padding-top: 300px
    }
}

@media(min-width: 1200px) {
    .empower {
        padding-top: 416px
    }
}

.empower .empower-card {
    background-color: #fff;
    padding: 16px
}

@media(min-width: 576px) {
    .empower .empower-card {
        padding: 30px
    }
}

@media(min-width: 768px) {
    .empower .empower-card {
        padding: 60px
    }
}

@media(min-width: 1200px) {
    .empower .empower-card {
        padding: 120px 80px
    }
}

.read-more-three {
    padding: 12px 24px;
    border-radius: 40px;
    color: #10271d;
    display: inline-flex;
    align-items: center;
    gap: 24px;
    border: 1px solid #10271d
}

@media(min-width: 1200px) {
    .read-more-three {
        border-radius: 90px;
        padding: 32px 60px
    }
}

.empower-home-three {
    position: relative;
    background-color: #fff;
    padding: 60px 0
}

@media(min-width: 1200px) {
    .empower-home-three {
        padding: 112px 0 120px
    }
}

.empower-home-three .empower-pagination {
    margin-top: 20px;
    display: flex
}

.empower-home-three .empower-pagination .swiper-pagination-bullet {
    background-color: rgba(16, 39, 29, .3);
    opacity: 1;
    height: 8px;
    width: 8px;
    transition-duration: 300ms
}

@media(min-width: 768px) {
    .empower-home-three .empower-pagination .swiper-pagination-bullet {
        height: 12px;
        width: 12px
    }
}

.empower-home-three .empower-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 28px;
    border-radius: 20px;
    background-color: #10271d
}

.triumph-card {
    position: relative
}

.triumph-card::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 400ms ease-in-out;
    background: linear-gradient(180deg, rgba(16, 39, 29, 0) 0%, rgba(16, 39, 29, 0.4) 33.16%, rgba(16, 39, 29, 0.75) 58.88%, #10271D 100%);
    bottom: 0;
    left: 0
}

.triumph-card::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 400ms ease-in-out;
    transform: translateY(100%);
    bottom: 0;
    left: 0
}

@media(min-width: 768px) {
    .triumph-card:hover .card-content .arrow-sm,
    .triumph-card:hover .card-content p {
        opacity: 1;
        transform: translateY(0)
    }
}

.triumph-card:hover .card-content h3 {
    transform: translateY(0)
}

.triumph-card .card-content {
    position: absolute;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    color: #fff;
    bottom: 0;
    left: 0;
    padding: 10px;
    z-index: 3;
    transition: all 400ms ease-in-out
}

@media(min-width: 992px) {
    .triumph-card .card-content {
        padding: 20px
    }
}

.triumph-card .card-content h3 {
    transition-duration: 400ms;
    transform: translateY(60px);
    color: #fff
}

.triumph-card .card-content p {
    transition-duration: 400ms;
    color: #fff;
    margin-bottom: 0;
    opacity: 0;
    transform: translateY(60px)
}

@media(min-width: 1200px) {
    .triumph-card .card-content {
        padding: 40px
    }
}

.triumph-card .card-content .arrow-sm {
    transition: all 400ms ease-in-out;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    margin-top: 20px;
    background-color: #9fd456;
    color: #222e48;
    font-size: 1.6rem;
    transition-duration: 300ms;
    opacity: 0;
    align-items: center;
    justify-content: center;
    display: flex;
    transform: translateY(60px)
}

.legal-solution-3 {
    background-color: #e7f0e9;
    padding: 60px 0
}

.legal-solution-3 .scroll-banner {
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    right: 30px;
    bottom: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    z-index: 4
}

@media(min-width: 1400px) {
    .legal-solution-3 .scroll-banner {
        bottom: 120px;
        right: 90px
    }
}

.legal-solution-3 .scroll-banner .arrow-down {
    position: relative
}

.legal-solution-3 .scroll-banner .arrow-down img {
    position: relative;
    z-index: 4
}

.legal-solution-3 .scroll-banner .arrow-down::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    background-color: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 0%)
}

@media(min-width: 1200px) {
    .legal-solution-3 {
        padding: 120px 0
    }
}

.legal-card {
    background-color: #fff;
    padding: 16px;
    transition: all 400ms ease-in-out;
    border: 1px solid #fff;
    z-index: 2;
    display: block;
    position: relative
}

.legal-card:hover {
    border-color: #80aa45
}

@media(min-width: 576px) {
    .legal-card {
        padding: 24px
    }
}

@media(min-width: 768px) {
    .legal-card {
        padding: 32px
    }
}

.legal-card p, .legal-card ul li {
    color: #404a60
}

.legal-card h4 {
    color: #222e48
}

.legal-card.bg1 {
    background-color: #e7f0e9;
    border: 1px solid #e7f0e9
}

.legal-card.bg1:hover {
    background-color: #fff;
    border: 1px solid #30584c
}

.counter-3 {
    background-color: #fff;
    padding: 60px 0
}

@media(min-width: 1200px) {
    .counter-3 {
        padding: 120px 0
    }
}

.counter-3 .counter-swiper img {
    height: 220px
}

@media(min-width: 576px) {
    .counter-3 .counter-swiper img {
        height: 350px
    }
}

@media(min-width: 768px) {
    .counter-3 .counter-swiper img {
        height: 450px
    }
}

@media(min-width: 768px) {
    .counter-3 .counter-swiper img {
        height: auto
    }
}

.counter-3 .counter-nav-btns-home-3 {
    right: 20px
}

@media(min-width: 768px) {
    .counter-3 .counter-nav-btns-home-3 {
        right: 40px
    }
}

.counter-3 .counter-content {
    max-width: 636px;
    padding-top: 60px
}

@media(min-width: 1200px) {
    .counter-3 .counter-content {
        padding-top: 110px
    }
}

.testimonial-3 {
    background-color: #e7f0e9;
    position: relative
}

.testimonial-3::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    height: 15%
}

@media(min-width: 992px) {
    .testimonial-3::after {
        height: 46%
    }
}

.testimonial-3 .left-side {
    padding: 60px 0 0
}

@media(min-width: 1200px) {
    .testimonial-3 .left-side {
        padding: 120px 0
    }
}

.testimonial-3 .left-side p {
    max-width: 636px
}

.experts-3 {
    background-color: #fff;
    padding: 60px 0
}

@media(min-width: 1200px) {
    .experts-3 {
        padding: 60px 0
    }
}

.experts-3 .expert-card {
    padding: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #9fd456
}

.experts-3 .expert-card .img-box {
    border-radius: 50%;
    background-color: #9fd456;
    height: 282px;
    width: 282px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center
}

.experts-3 .expert-card .img-box img {
    border-radius: 50%
}

.experts-3 .expert-card .img-box .social {
    position: absolute;
    bottom: 28px;
    right: 0;
    border: 2px solid #fff;
    border-radius: 50px;
    background-color: #9fd456;
    overflow: hidden
}

.experts-3 .expert-card .img-box .social .social-btn {
    height: 64px;
    border: none;
    background-color: rgba(0, 0, 0, 0);
    width: 64px;
    color: #222e48;
    font-size: 1.3rem
}

.experts-3 .expert-card .img-box .social .links {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    max-height: 0;
    visibility: hidden;
    height: 0;
    transition: all 800ms ease
}

.experts-3 .expert-card .img-box .social .links li>a {
    color: #222e48;
    font-size: 1.5rem;
    padding: 10px;
    display: inline-flex
}

.experts-3 .expert-card .img-box .social .links.active {
    position: static;
    opacity: 1;
    max-height: 400px;
    visibility: visible;
    height: 100%
}

.footer-3 {
    padding: 60px 0
}

@media(min-width: 1200px) {
    .footer-3 {
        padding: 120px 0
    }
}

.footer-3 .form-3 {
    background-color: #10271d
}

.banner-four {
    background-color: #e7f0e9
}

.banner-four .swiper-slide {
    min-height: 450px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat
}

.banner-four .swiper-slide .slide-content {
    width: 100%;
    height: 480px;
    position: relative;
    display: flex;
    align-items: center;
    z-index: 5
}

.banner-four .swiper-slide .slide-content.one {
    padding-bottom: 80px;
    padding-top: 100px
}

@media(min-width: 992px) {
    .banner-four .swiper-slide .slide-content.one {
        padding-top: 260px;
        padding-bottom: 100px
    }
}

@media(min-width: 1200px) {
    .banner-four .swiper-slide .slide-content.one {
        padding-top: 400px
    }
}

@media(min-width: 1400px) {
    .banner-four .swiper-slide .slide-content.one {
        padding-top: 480px;
        padding-bottom: 120px
    }
}

.banner-four .swiper-slide .slide-content.two {
    padding: 150px 0
}

@media(min-width: 992px) {
    .banner-four .swiper-slide .slide-content.two {
        padding: 250px
    }
}

@media(min-width: 1200px) {
    .banner-four .swiper-slide .slide-content.two {
        padding: 300px
    }
}

.banner-four .swiper-slide .slide-content.three {
    padding: 150px 0
}

@media(min-width: 992px) {
    .banner-four .swiper-slide .slide-content.three {
        padding: 250px 0
    }
}

@media(min-width: 1200px) {
    .banner-four .swiper-slide .slide-content.three {
        padding: 360px 0
    }
}

.banner-four .swiper-slide .slide-content .subheading-4 {
    font-size: 28px;
    color: #fff
}

.banner-four .swiper-slide .slide-content .heading-4 {
    font-size: 48px;
    color: #fff;
    font-weight: 700
}

.banner-four .swiper-slide .slide-content .heading-4_3 {
    color: #fff;
    font-weight: 700;
    font-size: 45px
}

@media(min-width: 992px) {
    .banner-four .swiper-slide .slide-content {
        height: 572px
    }
    .banner-four .swiper-slide .slide-content .subheading-4 {
        font-size: 60px
    }
    .banner-four .swiper-slide .slide-content .heading-4 {
        font-size: 80px
    }
    .banner-four .swiper-slide .slide-content .heading-4_3 {
        font-size: 70px
    }
}

@media(min-width: 1200px) {
    .banner-four .swiper-slide .slide-content {
        height: 738px
    }
    .banner-four .swiper-slide .slide-content .subheading-4 {
        font-size: 60px
    }
    .banner-four .swiper-slide .slide-content .heading-4 {
        font-size: 100px
    }
    .banner-four .swiper-slide .slide-content .heading-4_3 {
        font-size: 90px
    }
}

@media(min-width: 1400px) {
    .banner-four .swiper-slide .slide-content {
        height: 900px
    }
    .banner-four .swiper-slide .slide-content .subheading-4 {
        font-size: 80px
    }
    .banner-four .swiper-slide .slide-content .heading-4 {
        font-size: 132px
    }
    .banner-four .swiper-slide .slide-content .heading-4_3 {
        font-size: 128px
    }
}

.banner-four .swiper-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(19, 32, 59, 0.9) 0%, rgba(19, 32, 59, 0.7) 52.66%, rgba(19, 32, 59, 0.1) 77.69%, rgba(19, 32, 59, 0.3) 100%);
    z-index: 1
}

.banner-four .hero4-pagination {
    position: absolute;
    display: flex;
    bottom: 40px;
    z-index: 4;
    justify-content: center
}

.banner-four .hero4-pagination .swiper-pagination-bullet {
    background-color: #fff;
    opacity: 1;
    height: 12px;
    width: 12px;
    transition-duration: 300ms
}

.banner-four .hero4-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 28px;
    border-radius: 20px;
    background-color: #9fd456
}

.legal-journey {
    background-color: #fff;
    padding-top: 60px
}

@media(min-width: 1200px) {
    .legal-journey {
        padding: 120px 0
    }
}

.legal-journey .container {
    background-repeat: no-repeat;
    background-position: bottom center
}

@media(min-width: 768px) {
    .legal-journey .container {
        background-size: 40% 70%;
        background-image: url(../images/journey-2.webp)
    }
}

@media(min-width: 992px) {
    .legal-journey .container {
        background-size: 50%
    }
}

.legal-journey .journey-1 {
    animation: growBig 3s ease-in-out 50ms infinite
}

.legal-journey .journey-2 {
    animation: growBig 3s ease-in-out 700ms infinite
}

@keyframes growBig {
    0% {
        transform: scale(0.9)
    }
    50% {
        transform: scale(1)
    }
    100% {
        transform: scale(0.9)
    }
}

.read-more,
.see-all {
    border: 1px solid #9fd456;
    border-radius: 93.5px;
    padding: 50px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #404a60
}

@media(min-width: 768px) {
    .read-more,
    .see-all {
        padding: 80px 40px
    }
}

.read-more i,
.see-all i {
    background-color: #9fd456;
    height: 64px;
    width: 64px;
    border-radius: 50%;
    color: #222e48;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.destination {
    background-image: url("../assets/images/destination-1.webp"), url("../assets/images/destination-2.webp");
    background-repeat: no-repeat, no-repeat;
    background-position: left top, right bottom;
    background-size: contain 50%;
    background-color: #e7f0e9;
    position: relative;
    height: 100%;
    padding: 60px 0
}

@media(max-width: 1650px) {
    .destination::after {
        content: "";
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .7)
    }
}

@media(min-width: 1200px) {
    .destination {
        padding: 120px 0
    }
}

.destination .destination-img-1 {
    position: absolute;
    left: 0;
    top: 0
}

.destination .destination-img-2 {
    position: absolute;
    right: 0;
    bottom: 0
}

@media(min-width: 1200px) {
    .destination .solutions {
        margin-top: -120px
    }
}

.see-all {
    display: inline-flex
}

.impactful-project {
    background-color: #e7f0e9
}

.impactful-project .impactful-card {
    padding: 12px;
    background-color: #fff;
    transition: all 400ms ease;
    text-align: center
}

.impactful-project .impactful-card img {
    width: 100%
}

.impactful-project .impactful-card:hover {
    background-color: #9fd456
}

.impactful-project .impactful-card .content {
    display: block;
    padding: 40px 0 28px;
    color: #222e48
}

.impactful-project .see-projects {
    margin-top: 40px
}

@media(min-width: 992px) {
    .impactful-project .see-projects {
        margin-top: 60px
    }
}

.impactful-project .see-projects a {
    padding: 40px 80px;
    border-radius: 93.5px;
    border: 1px solid #9fd456;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #222e48
}

.major-brands {
    background-color: #e7f0e9;
    padding: 60px 0
}

@media(min-width: 1200px) {
    .major-brands {
        padding: 120px 0
    }
}

.major-brands .first-row {
    margin-bottom: 60px
}

@media(min-width: 1200px) {
    .major-brands .first-row {
        margin-bottom: 115px
    }
}

.major-brands .brand-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #10271d;
    padding: 30px;
    transition: all 400ms linear
}

@media(min-width: 992px) {
    .major-brands .brand-img {
        padding: 48px
    }
}

.major-brands .brand-img:hover {
    background-color: #9fd456
}

.major-brands .brand-img:hover img {
    filter: grayscale(100) invert(100)
}

.major-brands .brand-btns-home4 {
    left: 40px
}

.read-more-vertical {
    flex-direction: column;
    gap: 20px;
    align-items: center;
    padding: 40px 25px;
    border-radius: 70px;
    color: #30584c;
    border: 1px solid #30584c
}

@media(min-width: 768px) {
    .read-more-vertical {
        padding: 60px 30px;
        border-radius: 93px
    }
}

.advocate-card {
    background-color: #9fd456;
    position: relative
}

.advocate-card .img-box {
    display: flex;
    align-items: flex-end
}

.advocate-card::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 60%;
    transition: all 400ms ease-in-out;
    background: linear-gradient(180deg, rgba(232, 191, 150, 0) 0%, rgba(232, 191, 150, 0.75) 37.85%, #e8bf96 100%);
    transform: translateY(100%);
    bottom: 0;
    left: 0
}

.advocate-card:hover::before {
    transform: translateY(0)
}

.advocate-card:hover .card-content {
    bottom: 0
}

.advocate-card .card-content {
    position: absolute;
    bottom: -200px;
    transition: all 400ms ease;
    left: 0;
    right: 0
}

.advocate-card .card-content .links {
    display: flex;
    justify-content: center;
    font-size: 1.4rem;
    gap: 10px
}

.advocate-card .card-content .links li>a {
    color: #222e48
}

.testimonial-4 {
    background-color: #fff;
    background-image: url(../images/testimonial-bg-4.webp);
    background-repeat: no-repeat;
    background-position: left top;
    position: relative
}

.testimonial-4 .content {
    background-color: #fff;
    padding-top: 60px;
    padding-bottom: 60px;
    position: relative;
    border: 1px solid #ebecef
}

@media(min-width: 1200px) {
    .testimonial-4 .content {
        padding-left: 50px;
        padding-top: 120px;
        padding-bottom: 120px;
        padding-left: 100px
    }
}

.testimonial-4 .content .swiper-slide-active .testimonial-card {
    border: 1px solid #9fd456
}

.footer-four {
    background-color: #10271d
}

.footer-four .row {
    padding: 40px 0
}

@media(min-width: 992px) {
    .footer-four .row {
        padding: 60px 0
    }
}

.footer-four .row .links {
    align-items: center;
    list-style: none;
    margin-bottom: 0;
    gap: 12px
}

@media(min-width: 1200px) {
    .footer-four .row .links {
        gap: 24px
    }
}

.footer-four .row .links li>a {
    color: #f5f6f7;
    transition: color 400ms ease
}

.footer-four .row .links li>a:hover {
    color: #9fd456
}

.divider {
    height: 1px;
    width: 100%;
    background-color: #9fd456;
    opacity: .2
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
    justify-content: center;
    align-items: center;
    list-style: none;
    gap: 20px;
    font-size: 1.4rem
}

@media(min-width: 992px) {
    .social-links {
        justify-content: flex-end
    }
}

.social-links li>a {
    border: 1px solid #80aa45;
    color: #80aa45;
    height: 32px;
    width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 500ms ease
}

@media(min-width: 768px) {
    .social-links li>a {
        height: 40px;
        width: 40px
    }
}

.social-links li>a:hover {
    background-color: #9fd456;
    color: #222e48
}

.hero-5 {
    margin-top: 72px;
    position: relative;
    background-color: #fff
}

@media(min-width: 992) {
    .hero-5 {
        margin-top: 96px
    }
}

@media(min-width: 1400px) {
    .hero-5 {
        margin-top: 112px
    }
}

.hero-5 .swiper-slide {
    position: relative;
    background-size: cover
}

.hero-5 .swiper-slide .hero5-banner-content {
    padding: 60px 0
}

@media(min-width: 768px) {
    .hero-5 .swiper-slide .hero5-banner-content {
        padding: 100px 0
    }
}

@media(min-width: 1200px) {
    .hero-5 .swiper-slide .hero5-banner-content {
        padding: 120px 0
    }
}

.hero-5 .swiper-slide .hero5-banner-content::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(16, 39, 29, 0.9) 0%, rgba(16, 39, 29, 0.7) 52.66%, rgba(16, 39, 29, 0.3) 77.69%, rgba(16, 39, 29, 0.7) 100%)
}

.hero-5 .swiper-slide .hero5-banner-content .container {
    position: relative;
    z-index: 3
}

.hero-5 .swiper-slide .hero5-banner-content .container .deal-heading {
    color: #9fd456;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 4px;
    padding: 10px 35px;
    position: relative;
    display: inline-block
}

@media(min-width: 768px) {
    .hero-5 .swiper-slide .hero5-banner-content .container .deal-heading {
        font-size: 24px
    }
}

.hero-5 .swiper-slide .hero5-banner-content .container .deal-heading::after {
    content: "";
    position: absolute;
    top: 0;
    left: 12px;
    width: 100%;
    height: 100%;
    transform: skew(-20deg);
    border: 1px solid #9fd456
}

.hero-5 .swiper-slide .hero5-banner-content .container .discount {
    font-size: 80px;
    font-weight: 600;
    color: #fff;
    line-height: 100%;
    margin-bottom: 8px
}

@media(min-width: 768px) {
    .hero-5 .swiper-slide .hero5-banner-content .container .discount {
        font-size: 140px
    }
}

@media(min-width: 992px) {
    .hero-5 .swiper-slide .hero5-banner-content .container .discount {
        font-size: 160px
    }
}

@media(min-width: 1200px) {
    .hero-5 .swiper-slide .hero5-banner-content .container .discount {
        font-size: 280px
    }
}

.hero-5 .swiper-slide .hero5-banner-content .container .percent {
    font-size: 48px;
    color: #fff;
    line-height: 100%
}

@media(min-width: 768px) {
    .hero-5 .swiper-slide .hero5-banner-content .container .percent {
        font-size: 80px
    }
}

@media(min-width: 992px) {
    .hero-5 .swiper-slide .hero5-banner-content .container .percent {
        font-size: 90px
    }
}

@media(min-width: 1200px) {
    .hero-5 .swiper-slide .hero5-banner-content .container .percent {
        font-size: 140px
    }
}

@media(min-width: 1400px) {
    .hero-5 .swiper-slide .hero5-banner-content .container .percent {
        font-size: 160px
    }
}

.hero-5 .swiper-slide .hero5-banner-content .container .off {
    font-size: 30px;
    color: #fff;
    text-transform: uppercase;
    line-height: 100%
}

@media(min-width: 768px) {
    .hero-5 .swiper-slide .hero5-banner-content .container .off {
        font-size: 40px
    }
}

@media(min-width: 992px) {
    .hero-5 .swiper-slide .hero5-banner-content .container .off {
        font-size: 52px
    }
}

@media(min-width: 1200px) {
    .hero-5 .swiper-slide .hero5-banner-content .container .off {
        font-size: 72px
    }
}

.hero-5 .swiper-slide .hero5-banner-content .container .subheading {
    font-size: 40px;
    color: #fff;
    font-weight: 600;
    line-height: 100%;
    margin-bottom: 24px
}

@media(min-width: 768px) {
    .hero-5 .swiper-slide .hero5-banner-content .container .subheading {
        font-size: 50px
    }
}

@media(min-width: 992px) {
    .hero-5 .swiper-slide .hero5-banner-content .container .subheading {
        font-size: 60px
    }
}

@media(min-width: 1200px) {
    .hero-5 .swiper-slide .hero5-banner-content .container .subheading {
        font-size: 80px;
        margin-bottom: 40px
    }
}

@media(min-width: 1400px) {
    .hero-5 .swiper-slide .hero5-banner-content .container .subheading {
        font-size: 100px
    }
}

.hero-5 .hero5-pagination {
    position: absolute;
    right: 32px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: -moz-max-content;
    max-width: max-content;
    max-height: -moz-max-content;
    max-height: max-content
}

@media(min-width: 1400px) {
    .hero-5 .hero5-pagination {
        right: 72px
    }
}

.hero-5 .hero5-pagination .swiper-pagination-bullet {
    background-color: #fff;
    opacity: 1;
    position: relative;
    transition-duration: 300ms
}

.hero-5 .hero5-pagination .swiper-pagination-bullet::after {
    content: "";
    transition-duration: 300ms;
    width: 24px;
    height: 24px;
    border: 1px solid #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%
}

.hero-5 .hero5-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #9fd456
}

.hero-5 .hero5-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
    border-color: #9fd456
}

.discounts {
    background-color: #fff
}

.discount-card {
    background-color: #e7f0e9;
    position: relative;
    padding: 16px;
    overflow: hidden;
    height: 100%;
    transition: all .5s ease;
}


.sidebarr-block {

      background-color: #d2e7ff;
      padding: 25px 25px;

}


.discount-card:hover {

    background-color: #b9eac4;

}

.sidebarr:hover {

      background-color: #aed5ff;

}

.discount-card .discount-percent {
    height: 88px;
    width: 88px;
    position: absolute;
    top: 20px;
    left: 55%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff
}

.discount-card .discount-percent span {
    font-size: 12px
}

@media(min-width: 1400px) {
    .discount-card {
        padding: 24px
    }
}

@media(min-width: 1800px) {
    .discount-card {
        padding: 40px
    }
}


.sidebarr {

      background-color: #e6f2ff;
      padding: 15px;
}

.discount-card h2,
.discount-card h5,
.discount-card a {
    position: relative;
    z-index: 2
}

.discount-card h5 {
    color: #e65e36;
    font-weight: 600;
    margin-bottom: 16px
}

.discount-card h6.highlighted {

      color: #e65e36;

}

.sidebarr h6.highlighted {

  color: #3665e6;

}

.sidebarr .primary-btn {

  background: #6cb6ff;
  border-color: #6cb6ff;
  padding: .5em 1em;

}



.bontitle-sm {

  font-size: .7em;

}



.discount-card .solar {
    position: absolute;
    right: -20px;
    top: 10px
}

.discount-card .battery {
    position: absolute;
    bottom: -4px;
    right: -2px
}

.products {
    background-color: #fff
}

.products .section-title {
    text-align: center;
    max-width: 526px;
    margin-left: auto;
    margin-right: auto
}

.product-card {
    overflow: hidden;
    border: 1px solid rgba(16, 39, 29, .1);
    background-color: #fff;
    transition-duration: 300ms;
    padding: 12px
}

.product-card .img {
    border: 1px solid rgba(16, 39, 29, .1);
    padding: 12px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    margin-bottom: 16px
}

@media(min-width: 1400px) {
    .product-card .img {
        padding: 16px;
        margin-bottom: 20px
    }
}

.off {
    display: inline-block;
    position: absolute;
    top: 16px;
    left: 16px;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    background-color: #e65e36;
    padding: 4px 8px
}


.bonbadges {

  position: absolute;
  top: 10px;
  left: 0px;
  display: flex;
  flex-direction: column;
  grid-gap: 2px;

}

.bonbadge {

  color: #fff;
  font-weight: 600;
  font-size: .6em;
  line-height: 1;
  background-color: #e65e36;
  padding: .4em .5em;

}

.vipbadge {

      background-color: #ffa719;

}

.bonbadge-2 {

      background-color: #9fd456;

}

.bonbadge-3 {

      background-color: #646dff;

}

.product-card .img .new {
    display: inline-block;
    position: absolute;
    top: 16px;
    left: 16px;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    background-color: #9fd456;
    padding: 4px 8px
}

.product-card .action-btns {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.product-card .action-btns button {
    transition-duration: 300ms;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    border: 1px solid rgba(16, 39, 29, .1);
    transform: translateX(150px);
    font-size: 1.1rem
}

.product-card .action-btns button:nth-child(2) {
    transition-delay: 100ms
}

.product-card .action-btns button:nth-child(3) {
    transition-delay: 200ms
}

.product-card .action-btns button:hover {
    background-color: #9fd456;
    color: #222e48
}

.product-card .desc {
    padding: 0 12px 12px;
    display: block
}

@media(min-width: 1200px) {
    .product-card .desc {
        padding: 0 20px 12px
    }
}

.product-card .desc h4 {
    color: #222e48
}

.product-card .desc .rating {
    color: #6a7283
}

.product-card .desc .sp-price {
    font-weight: 600;
    font-size: 24px;
    color: #e65e36
}

.product-card .desc .main-price {
    font-size: 18px;
    text-decoration-line: line-through;
    color: #798090
}

.product-card .desc i {
    color: #fc0
}

.product-card:hover {
    border-color: #30584c
}

.product-card:hover .action-btns button {
    transform: translateX(0)
}

.about-five {
    background-color: #fff
}

.about-five .about-five-content {
    background-color: #e7f0e9
}

.about-five .quote {
    display: flex;
    align-items: start;
    gap: 16px;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 24px;
    border: 1px solid rgba(16, 39, 29, .15)
}

@media(min-width: 1400px) {
    .about-five .quote {
        padding: 32px;
        margin-bottom: 40px
    }
}

.about-five .quote i {
    color: #e65e36;
    font-size: 3rem
}

.about-five .feature button {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background-color: #30584c;
    color: #fff;
    font-size: 14px
}

.about-five .feature h5 {
    margin-bottom: 0
}

@media(min-width: 768px) {
    .about-five .feature.one {
        border-right: 1px dashed #80aa45;
        padding-right: 20px
    }
}

@media(min-width: 1400px) {
    .about-five .feature.one {
        padding-right: 32px
    }
}

@media(min-width: 768px) {
    .about-five .feature.two {
        padding-left: 20px
    }
}

@media(min-width: 1400px) {
    .about-five .feature.two {
        padding-left: 32px
    }
}

.about-five .about-img {
    position: relative
}

@media(min-width: 1600px) {
    .about-five .about-img {
        transform: translateX(120px)
    }
}

.about-five .about-img .about-img-1 {
    position: absolute;
    left: 0;
    border: 2px solid #fff;
    z-index: 2;
    top: 20px
}

@media(min-width: 1200px) {
    .about-five .about-img .about-img-1 {
        top: 215px
    }
}

.about-five .about-img .about-img-2 {
    position: relative;
    padding-bottom: 80px
}

.about-five .about-img .about-img-2 .about-line {
    display: none
}

@media(min-width: 1200px) {
    .about-five .about-img .about-img-2 .about-line {
        display: block;
        position: absolute;
        left: -36px;
        top: 0;
        width: 16px;
        height: 194px;
        border-radius: 4px;
        background: #ffa65e
    }
}

.about-five .about-img .rating {
    position: absolute;
    border: 2px solid #fff;
    display: flex;
    gap: 16px;
    background-color: #9fd456;
    align-items: center;
    padding: 16px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(40px);
    z-index: 3
}

.about-five .about-img .rating .icon {
    background-color: #10271d;
    padding: 24px
}

@media(min-width: 1400px) {
    .about-five .about-img .rating {
        gap: 32px;
        min-width: 390px
    }
}

.trending-pagination {
    margin-top: 40px;
    display: flex;
    z-index: 4;
    justify-content: center
}

@media(min-width: 1200px) {
    .trending-pagination {
        margin-top: 60px
    }
}

.trending-pagination .swiper-pagination-bullet {
    background-color: #e7f0e9;
    opacity: 1;
    height: 12px;
    width: 12px;
    transition-duration: 300ms
}

.trending-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 28px;
    border-radius: 20px;
    background-color: #30584c
}

.features {
    background-color: #e7f0e9;
    padding: 40px 0
}

@media(min-width: 992px) {
    .features {
        padding: 60px 0
    }
}

@media(min-width: 1200px) {
    .features .feature-card {
        border-right: 1px solid rgba(48, 88, 76, .2)
    }
    .features .feature-card:last-child {
        border-right: none
    }
}

@media(min-width: 1400px) {
    .features .feature-card {
        padding: 0 16px
    }
}

.features-6 {
    background-color: #e7f0e9
}

.features-6 .exp-img {
    position: relative
}

.features-6 .exp-img .exp-info {
    position: absolute;
    bottom: 20px;
    right: 0;
    background-color: #fff;
    text-align: center;
    padding: 16px
}

.features-6 .exp-img .exp-info p {
    font-size: 18px;
    font-weight: 500
}

@media(min-width: 1600px) {
    .features-6 .exp-img {
        transform: translateX(-120px)
    }
    .features-6 .exp-img .exp-info {
        right: -60px;
        padding: 20px 24px;
        bottom: 40px
    }
}

@media(min-width: 768px) {
    .features-6 .about-info-1 {
        border-right: 1px dashed rgba(48, 88, 76, .4)
    }
}

.recent-projects6 {
    background-color: #fff
}

.recent-projects6 .section-title {
    max-width: 636px;
    margin: 0 auto 40px;
    text-align: center
}

@media(min-width: 1200px) {
    .recent-projects6 .section-title {
        margin: 0 auto 60px
    }
}

.recent-projects6 .project-card {
    position: relative;
    overflow: hidden
}

.recent-projects6 .project-card img {
    width: 100%
}

.recent-projects6 .project-card::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(16, 39, 29, 0) 0%, rgba(16, 39, 29, 0.1) 40.5%, rgba(16, 39, 29, 0.2) 48.53%, rgba(16, 39, 29, 0.4) 57.88%, rgba(16, 39, 29, 0.6) 70.98%, rgba(16, 39, 29, 0.8) 100%)
}

.recent-projects6 .project-card .info {
    transition-duration: 300ms;
    position: absolute;
    inset: 0;
    display: flex;
    z-index: 2;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 20px
}

@media(min-width: 1200px) {
    .recent-projects6 .project-card .info {
        padding: 32px
    }
}

.recent-projects6 .project-card .info a {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #9fd456;
    background-color: #10271d;
    transition-duration: 300ms;
    opacity: 0
}

.recent-projects6 .project-card .info p {
    color: #9fd456;
    transition-duration: 300ms
}

.recent-projects6 .project-card .info h4 {
    color: #fff;
    transition-duration: 300ms
}

.recent-projects6 .project-card:hover .info {
    background-color: rgba(159, 212, 86, .8)
}

.recent-projects6 .project-card:hover .info a {
    opacity: 1
}

.recent-projects6 .project-card:hover .info p,
.recent-projects6 .project-card:hover .info h4 {
    color: #222e48
}

.testimonial-6 {
    background-color: #fff
}

@media(min-width: 1650px) {
    .testimonial-6 {
        background-image: url(../images/testimonial-bg-6.webp);
        background-position: right top;
        background-repeat: no-repeat
    }
    .testimonial-6 .image img {
        display: none
    }
}

@media(min-width: 1800px) {
    .testimonial-6 .play-btn {
        left: 65%
    }
}

.testimonial-6 .title {
    text-align: center;
    margin-bottom: 40px
}

@media(min-width: 1200px) {
    .testimonial-6 .title {
        margin-bottom: 60px
    }
}

.testimonial-6 .slider {
    position: relative
}

.testimonial-6 .slider .testimonial-card-6 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

.testimonial-6 .slider .testimonial-card-6 .stars {
    color: #fc0
}

.testimonial-6 .slider .btns,
.testimonial-6 .slider .btns-client,
.testimonial-6 .slider .btns-client-2,
.testimonial-6 .slider .btns-client-3 {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3
}

.testimonial-6 .image {
    position: relative
}

@media(min-width: 1400px) {
    .testimonial-6 .image {
        transform: translateX(50px)
    }
}

@media(min-width: 1600px) {
    .testimonial-6 .image {
        transform: translateX(120px)
    }
}

.brand-slide {
    display: inline-flex;
    justify-content: center;
    text-align: center;
    max-width: -moz-max-content;
    max-width: max-content
}

.testimonial-img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    -o-object-position: left;
    object-position: left
}

.about-banner {
    position: relative;
    background-image: url(../images/about-bg.webp);
    background-repeat: no-repeat;
    background-size: cover
}

.about-banner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    background: linear-gradient(90deg, rgba(16, 39, 29, 0) 0%, rgba(16, 39, 29, 0.4) 11.56%, rgba(16, 39, 29, 0.5) 25.64%, rgba(16, 39, 29, 0.6) 49.33%, rgba(16, 39, 29, 0.5) 71.2%, rgba(16, 39, 29, 0.24) 86.08%, rgba(16, 39, 29, 0) 100%)
}

.about-banner .banner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 12px
}

@media(min-width: 1200px) {
    .about-banner .banner-content {
        padding-bottom: 270px
    }
}

.about-page {
    background-color: #fff
}

@media(min-width: 1200px) {
    .about-page .counter-wrapper {
        margin-top: -80px
    }
}

.page-banner {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    background-position: center;
    padding-top: 50px
}

.page-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5)
}

@media(min-width: 992px) {
    .page-banner {
        padding-top: 90px
    }
}

.page-banner .banner-content {
    padding: 60px 12px
}

@media(min-width: 1200px) {
    .page-banner .banner-content {
        padding: 120px 0
    }
}

.all-services {
    background-color: #e7f0e9;
    padding: 60px 0
}

@media(min-width: 1200px) {
    .all-services {
        padding: 120px 0
    }
}

.pagination {
    flex-wrap: wrap
}

.pagination li>a {
    border: 1px solid #80aa45;
    height: 32px;
    width: 32px;
    color: #10271d;
    display: flex;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    transition: all 400ms ease
}

@media(min-width: 768px) {
    .pagination li>a {
        height: 40px;
        width: 40px
    }
}

.pagination li>a i {
    font-weight: 600
}

.pagination li>a:hover,
.pagination li>a.active {
    background-color: #9fd456;
    color: #10271d
}

.service-details {
    background-color: #e7f0e9
}

@media(max-width: 1199px) {
    .service-details {
        overflow-x: hidden !important
    }
}

.service-details p {
    color: #404a60
}

.service-details .details-left {
    padding: 12px;
    background-color: #fff;
    z-index: 2;
    position: relative
}

.service-details .details-left .details-content {
    padding-bottom: 12px
}

@media(min-width: 576px) {
    .service-details .details-left .details-content {
        padding: 12px
    }
}

@media(min-width: 992px) {
    .service-details .details-left .details-content {
        padding: 48px 20px 32px
    }
}

.service-details .details-left .details-content h2,
.service-details .details-left .details-content h3,
.service-details .details-left .details-content h4,
.service-details .details-left .details-content h5,
.service-details .details-left .details-content h6 {
    margin-bottom: 16px
}

.service-details .details-left .details-content p {
    margin-bottom: 18px
}

@media(min-width: 1200px) {
    .service-details .details-left .details-content p {
        margin-bottom: 32px
    }
}

.service-details .details-left .details-content .tag {
    display: inline-block;
    padding: 12px 16px;
    background-color: #e7f0e9;
    color: #222e48;
    font-weight: 600
}

.details-bottom {
    margin: 0;
    margin-top: 20px;
    padding-top: 8px
}

.details-faq {
    margin-top: 24px;
    padding: 16px;
    background-color: #fff
}

@media(min-width: 768px) {
    .details-faq {
        padding: 32px;
        margin-top: 40px
    }
}

.details-faq .accordion-item {
    border: none;
    background-color: #9fd456;
    box-shadow: none
}

.details-faq .accordion-item:focus {
    box-shadow: none
}

.details-faq .accordion-item:first-of-type {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: none
}

.details-faq .accordion-item:last-of-type {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none
}

.details-faq .accordion-item:first-of-type .accordion-button.collapsed {
    border-top-right-radius: 0;
    border-top-left-radius: 0
}

.details-faq .accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.details-faq .accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}

.details-faq .accordion-button:not(.collapsed) {
    background-color: #9fd456;
    color: #222e48;
    box-shadow: none
}

.details-faq .accordion-button:not(.collapsed)::after {
    background-color: #10271d;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-minus' width='28' height='28' viewBox='0 0 24 24' stroke-width='1' stroke='%23FFFFFF' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l14 0' /%3E%3C/svg%3E")
}

.details-faq .accordion-button.collapsed::after {
    background-color: #9fd456;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-plus' width='28' height='28' viewBox='0 0 24 24' stroke-width='1' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 5l0 14' /%3E%3Cpath d='M5 12l14 0' /%3E%3C/svg%3E")
}

.details-faq .accordion-body {
    padding: 0 16px 16px
}

.details-faq .accordion-body p:first-child {
    border-top: 1px dashed #6a7283;
    padding-top: 12px;
    color: #222e48
}

.details-faq .accordion-body p {
    color: #222e48
}

@media(min-width: 992px) {
    .details-faq .accordion-body {
        padding: 0 32px 16px
    }
}

.details-faq .accordion-button {
    background-color: #e7f0e9;
    color: #222e48;
    padding: 16px;
    line-height: 130% !important;
    font-size: 16px;
    font-weight: 500
}

@media(min-width: 992px) {
    .details-faq .accordion-button {
        padding: 16px 32px;
        font-size: 18px
    }
}

.details-faq .accordion-button:focus {
    box-shadow: none
}

.details-faq .accordion-button::after {
    transition: none !important
}

.white-box {
    background-color: #fff;
    margin-bottom: 24px;
    padding: 16px
}

@media(min-width: 1200px) {
    .white-box {
        box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, .04);
        padding: 24px
    }
}

.white-box form {
    background-color: #e7f0e9;
    width: 100%;
    padding: 12px 20px;
    color: #222e48;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e7f0e9;
    justify-content: space-between
}

.white-box form:focus-within {
    border: 1px solid #9fd456
}

.white-box form.n0 {
    border-color: #dfe0e4;
    background-color: #fff
}

.white-box form input {
    border: none;
    color: #222e48;
    width: 50%;
    background-color: rgba(0, 0, 0, 0)
}

@media(min-width: 768px) {
    .white-box form input {
        width: 100%
    }
}

.white-box form input:focus {
    outline: none
}

.white-box form i {
    flex-shrink: 0
}

.white-box .category-list {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style-type: none
}

.white-box .category-list li>a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background-color: #e7f0e9;
    border: 1px solid #e7f0e9;
    transition: all 400ms ease;
    color: #222e48
}

@media(min-width: 1400px) {
    .white-box .category-list li>a {
        padding: 12px 20px
    }
}

.white-box .category-list li>a:hover {
    background-color: #fff;
    border-color: #30584c
}

.white-box .category-list li>a .img-wrapper {
    height: 44px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center
}

@media(min-width: 768px) {
    .white-box .category-list span {
        font-size: 18px;
        font-weight: 500
    }
}

.white-box .cta {
    background-image: url(../images/cta-bg.webp);
    background-size: cover;
    padding: 20px;
    text-align: center;
    position: relative
}

@media(min-width: 768px) {
    .white-box .cta {
        padding: 40px 32px
    }
}

.white-box .cta::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(16, 39, 29, .7);
    z-index: 1
}

.white-box .cta a {
    display: inline-flex;
    padding: 16px 24px;
    background-color: #9fd456;
    color: #222e48;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    font-weight: 500
}

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

.project-page .container {
    padding-top: 60px;
    z-index: 22;
    position: relative
}

@media(min-width: 1200px) {
    .project-page .container {
        padding-top: 110px
    }
}

.project-details {
    background-color: #e7f0e9
}

.project-details h2,
.project-details h3,
.project-details h4,
.project-details h5,
.project-details h6 {
    color: #10271d;
    margin-bottom: 20px
}

.project-details p {
    color: #404a60
}

.project-details .details-left {
    padding: 12px;
    background-color: #fff;
    z-index: 2;
    position: relative
}

.project-details .details-left .details-content {
    padding-bottom: 12px
}

@media(min-width: 576px) {
    .project-details .details-left .details-content {
        padding: 12px
    }
}

@media(min-width: 992px) {
    .project-details .details-left .details-content {
        padding: 42px 20px 32px
    }
}

.project-details .details-left .details-content .tag {
    display: inline-block;
    padding: 12px 16px;
    background-color: #e7f0e9;
    color: #222e48;
    font-weight: 600
}

.project-details .details-left .details-content p {
    margin-bottom: 18px
}

@media(min-width: 992px) {
    .project-details .details-left .details-content p {
        margin-bottom: 26px
    }
}

.project-details .details-left .project-video {
    position: relative
}

.project-details .details-left .project-video::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    inset: 0;
    opacity: .4;
    background: #10271d
}

.project-details .details-left .project-video .play-btn {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 56px;
    width: 56px;
    display: flex;
    font-size: 1.2rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #10271d
}

table td {
    padding: 8px
}

.more-projects {
    display: flex;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    flex-direction: column
}

.more-projects li:first-child a {
    padding-top: 0 !important
}

.more-projects li:last-child a {
    border-bottom: none
}

.more-projects li a {
    padding: 12px 0;
    border-bottom: 1px dashed #ebecef;
    display: flex;
    align-items: center;
    gap: 12px
}

@media(min-width: 1400px) {
    .more-projects li a {
        padding: 24px 0;
        gap: 24px
    }
    .more-projects li a span {
        font-size: 18px
    }
}

.products-page {
    background-color: #e7f0e9
}

@media(max-width: 1199px) {
    .product-filter {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        border-right: 1px solid #dfe0e4;
        background-color: #fff;
        z-index: 99;
        width: 320px;
        height: 100%;
        overflow-y: auto;
        transition-duration: 300ms;
        transform: translateX(-100%)
    }
    .product-filter.active {
        transform: translateX(0)
    }
    .filter-btn {
        padding: 12px 20px;
        border: 1px solid #404a60;
        font-size: 18px
    }
    .filter-close {
        position: absolute;
        top: 16px;
        right: 12px;
        font-size: 18px;
        color: #404a60;
        cursor: pointer
    }
}

.range-slider {
    --primary-color: #000;
    --thumb-size: 18px;
    --show-min-max: none;
    min-width: 100%
}

.range-slider input {
    min-width: 100%
}

.range-slider input.range-slider__progress {
    min-width: 100%
}

.form-check-input:focus,
.form-control:focus {
    box-shadow: none
}

.form-check-input:checked {
    background-color: #10271d;
    border-color: #10271d
}

.form-check-input:checked::before {
    background-color: #fff
}

.form-check-input {
    transition-duration: 300ms
}

.form-check-input:hover {
    border-color: #798090
}

.text-yellow {
    color: #fc0
}

.tag {
    border: 1px solid #dfe0e4;
    padding: 8px 20px;
    font-size: 14px;
    color: #404a60;
    transition-duration: 300ms;
    background-color: #e7f0e9
}

.tag.cons {
    border: 1px solid #edd2d2;
    background-color: #f0dfdf;
}


.tag.round {
    border-radius: 32px;
    background-color: #fff;
    border: 1px solid #ebecef
}

.tag:hover {
    background-color: #9fd456;
    color: #222e48
}


.tag.cons:hover {
    background-color: #d45656;
    color: #fff
}
.reset {
    width: 100%;
    padding: 12px 20px;
    border: 1px solid #404a60;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition-duration: 300ms
}

.reset:hover {
    color: #fff;
    background-color: #10271d
}

.product-details-img {
    background-color: #e7f0e9;
    min-width: 220px
}

@media(max-width: 767px) {
    .product-details-img {
        width: 100%
    }
}

.bb-dashed-32 {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px dashed #dfe0e4
}

@media(min-width: 1400px) {
    .bb-dashed-32 {
        padding-bottom: 32px !important;
        margin-bottom: 32px !important
    }
}

.bb-dashed-24 {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px dashed #c1c4cc
}

@media(min-width: 1400px) {
    .bb-dashed-24 {
        padding-bottom: 24px !important;
        margin-bottom: 24px !important
    }
}

.product-details-left {
    padding: 12px;
    background-color: #fff
}

@media(min-width: 1200px) {
    .product-details-left {
        padding: 20px
    }
}

@media(min-width: 1400px) {
    .product-details-left {
        padding: 32px
    }
}

.rating-info {
    display: flex;
    gap: 20px;
    flex-direction: column
}

@media(min-width: 580px) {
    .rating-info {
        flex-direction: row
    }
    .rating-info .rating-box {
        padding: 24px 45px
    }
}

.rating-info .rating-box {
    background-color: #fc0;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    align-items: center
}

.rating-info .rating-progress {
    width: 100%;
    height: 12px;
    background-color: #e7f0e9;
    flex: 1
}

.rating-info .rating-progress .inner {
    height: 100%;
    background-color: #fc0;
    width: attr(data-width)
}

.review-card {
    background-color: #e7f0e9;
    padding: 16px
}

@media(min-width: 1200px) {
    .review-card {
        padding: 24px
    }
}

.review-card .reply-container {
    display: none
}

.review-form input,
.review-form textarea {
    padding: 12px 24px;
    width: 100%;
    background-color: #f5f6f7;
    border: 1px solid #b2b6bf;
    display: flex;
    margin-bottom: 16px
}

@media(min-width: 1200px) {
    .review-form input,
    .review-form textarea {
        margin-bottom: 24px
    }
}

.quantity {
    background-color: #e7f0e9;
    padding: 4px;
    display: flex;
    justify-content: space-between
}

.quantity input {
    width: 40px;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    text-align: center
}

.quantity button {
    width: 40px;
    height: 40px;
    background-color: #9fd456;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #10271d;
    font-size: 24px;
    transition-duration: 300ms
}

.quantity button.white {
    color: #10271d;
    background-color: #fff
}

.quantity button:hover {
    color: #9fd456;
    background-color: #10271d
}


.buy-now {
    width: 100%;
    padding: 12px 20px;
    background-color: #9fd456;
    color: #222e48;
    font-weight: 600
}

.cart-btn {
    width: 44px;
    height: 44px;
    border: 1px solid #30584c;
    color: #30584c;
    display: flex;
    align-items: center;
    justify-content: center;
    transition-duration: 300ms
}

.cart-btn:hover {
    color: #fff;
    background-color: #30584c
}

.coupon-input {
    width: 100%;
    padding: 4px;
    display: flex;
    align-items: center;
    border: 1px solid #ebecef
}

.coupon-input input {
    width: 100%;
    border: none;
    padding-left: 12px
}

.coupon-input button {
    width: 40px;
    flex-shrink: 0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background-color: #9fd456
}

.cart-table {
    width: 100%
}

.cart-table thead th {
    background-color: #e7f0e9;
    padding: 16px 20px
}

.cart-table tbody td {
    padding: 16px 20px;
    white-space: nowrap
}

.cart-table tbody tr {
    border-bottom: 1px dashed #dfe0e4
}

.cart-table tbody tr:last-child {
    border-bottom: none
}

.cart-table .product-img {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #dfe0e4
}

.cart-table .available {
    color: #979ca8;
    margin-top: 6px;
    font-size: 12px
}

.address-card {
    padding: 16px;
    background-color: #e7f0e9;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items: center
}

@media(min-width: 768px) {
    .address-card {
        flex-wrap: nowrap
    }
}

@media(min-width: 1200px) {
    .address-card {
        padding: 24px
    }
}

@media(min-width: 1400px) {
    .address-card {
        padding: 32px
    }
}

.delivery-card {
    cursor: pointer;
    padding: 16px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: start;
    transition-duration: 300ms;
    border: 1px solid #dfe0e4
}

@media(min-width: 1200px) {
    .delivery-card {
        padding: 24px
    }
}

@media(min-width: 1400px) {
    .delivery-card {
        padding: 32px
    }
}

.delivery-card.active {
    border-color: #30584c
}

.rating i {
    color: #ffc107;
    cursor: pointer;
    transition: color .3s
}

.rating i.ti-start-filled {
    color: #ffc107
}

.current-rating {
    font-size: 1rem;
    font-weight: bold;
    margin-top: 10px
}

.blog-standard {
    padding: 12px;
    background-color: #fff;
    margin-bottom: 24px;
    color: #222e48
}

.blog-standard .blog-content {
    padding: 0 8px 8px
}

@media(min-width: 576px) {
    .blog-standard .blog-content {
        padding: 0 12px 12px
    }
}

@media(min-width: 992px) {
    .blog-standard .blog-content {
        padding: 0 20px 20px
    }
}

.blog-standard .blog-content p {
    color: #404a60;
    margin-bottom: 24px
}

@media(min-width: 992px) {
    .blog-standard .blog-content p {
        margin-bottom: 40px
    }
}

.blog-standard .blog-content ul li {
    font-size: 14px
}

@media(min-width: 992px) {
    .blog-standard .blog-content ul li {
        font-size: 16px
    }
}

.blog-grid {
    padding: 12px;
    border: 1px solid rgba(16, 39, 29, .15);
    background-color: #fff;
    transition-duration: 300ms
}

.blog-grid:hover {
    border: 1px solid #30584c
}

.blog-grid .blog-img {
    position: relative
}

.blog-grid .blog-img .date {
    display: inline-block;
    padding: 10px 20px;
    background-color: #e65e36;
    color: #fff;
    position: absolute;
    right: 8px;
    bottom: 8px;
    font-weight: 500;
    text-align: center;
    border-radius: 4px
}

.blog-grid .blog-img .date h3 {
    font-size: 32px;
    font-weight: 600;
    line-height: 100%;
    color: #fff;
    margin-bottom: 0
}

.blog-grid .blog-img .date p {
    font-size: 14px;
    color: #fafafb;
    font-weight: 500
}

.blog-grid .blog-content {
    padding: 12px;
    color: #222e48
}

@media(min-width: 992px) {
    .blog-grid .blog-content {
        padding: 26px 20px 12px
    }
}

.blog-grid .blog-content a {
    color: #222e48;
    font-weight: 600
}

.blog-list {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid rgba(16, 39, 29, .15);
    background-color: #fff;
    transition-duration: 300ms
}

.blog-list:hover {
    border: 1px solid #30584c
}

@media(min-width: 768px) {
    .blog-list {
        flex-direction: row;
        align-items: center
    }
}

@media(min-width: 992px) {
    .blog-list {
        gap: 24px
    }
}

@media(min-width: 1400px) {
    .blog-list {
        gap: 32px
    }
}

.blog-list .blog-img {
    position: relative;
    overflow: hidden;
    height: 100%;
    flex-shrink: 0
}

@media(max-width: 767px) {
    .blog-list .blog-img {
        max-width: 100%;
        width: 100%
    }
}

.blog-list .blog-img img {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center
}

@media(min-width: 768px) {
    .blog-list .blog-img {
        min-width: 296px;
        max-width: 296px
    }
}

.blog-list .blog-img .date {
    display: inline-block;
    padding: 10px 20px;
    background-color: #e65e36;
    color: #fff;
    position: absolute;
    right: 8px;
    bottom: 8px;
    font-weight: 500;
    text-align: center;
    border-radius: 4px
}

.blog-list .blog-img .date h3 {
    font-size: 32px;
    font-weight: 600;
    line-height: 100%;
    margin-bottom: 0;
    color: #fff
}

.blog-list .blog-img .date p {
    font-size: 14px;
    color: #fafafb;
    font-weight: 500
}

.blog-list .blog-content {
    color: #222e48
}

.blog-list .blog-content h4 {
    margin-bottom: 16px
}

.blog-list .blog-content p {
    margin-bottom: 24px
}

@media(min-width: 992px) {
    .blog-list .blog-content p {
        margin-bottom: 32px
    }
}

.blog-list .blog-content a {
    color: #222e48;
    font-weight: 600;
    padding: 12px 24px
}

.comments {
    background-color: #10271d;
    padding: 16px
}

@media(min-width: 576px) {
    .comments {
        padding: 24px
    }
}

@media(min-width: 992px) {
    .comments {
        padding: 32px
    }
}

.comments select {
    color: #fff
}

.comments select:focus {
    outline: none
}

.comments select option {
    background-color: #e7f0e9
}

.comments .comment-box {
    margin-bottom: 32px;
    background-color: #e7f0e9;
    padding: 16px
}

@media(min-width: 768px) {
    .comments .comment-box {
        padding: 24px
    }
}

.comments .comment-box .user-part {
    padding-bottom: 24px;
    border-bottom: 1px dashed #594e43
}

.comments .comment-box .review-part {
    padding: 16px 0;
    border-bottom: 1px dashed #594e43
}

@media(min-width: 768px) {
    .comments .comment-box .review-part {
        padding: 22px 0
    }
}

.comments .comment-box input {
    background-color: #10271d;
    border: none;
    padding: 16px;
    color: #fff
}

.comments .comment-box input:focus {
    outline: none
}

.comments .comment-box .comment-input {
    margin-top: -85px;
    display: flex;
    opacity: 0;
    transition: all 400ms ease-in
}

.comments .comment-box .comment-input.active {
    margin-top: 0;
    opacity: 1
}

.comments .comment-box .reply-btn {
    color: #fff
}

.write-comment-box {
    background-color: #10271d;
    padding: 16px
}

@media(min-width: 576px) {
    .write-comment-box {
        padding: 24px
    }
}

@media(min-width: 768px) {
    .write-comment-box {
        padding: 32px
    }
}

.write-comment-box h4 {
    padding-bottom: 16px;
    border-bottom: 1px dashed #594e43
}

.write-comment-box form {
    color: #fff
}

.write-comment-box form label {
    margin-bottom: 8px;
    margin-top: 12px
}

@media(min-width: 992px) {
    .write-comment-box form label {
        margin-top: 16px
    }
}

.write-comment-box form label,
.write-comment-box form input {
    display: block
}

.write-comment-box form input,
.write-comment-box form textarea {
    padding: 12px 24px;
    background-color: #e7f0e9;
    border: none;
    width: 100%;
    color: #fff;
    border: 1px solid #e7f0e9
}

.write-comment-box form input:focus,
.write-comment-box form textarea:focus {
    outline: none;
    border: 1px solid #9fd456
}

.contact-page {
    background-color: #fff;
    position: relative;
    z-index: 10
}

.contact-page .contact-form {
    background-color: #e7f0e9;
    padding: 16px
}

@media(min-width: 576px) {
    .contact-page .contact-form {
        padding: 24px
    }
}

@media(min-width: 768px) {
    .contact-page .contact-form {
        padding: 32px
    }
}

.contact-page .contact-form .contact-title {
    text-align: center
}

.contact-page .contact-form form {
    padding-top: 20px;
    border-top: 1px dashed #c1c4cc
}

.contact-page .contact-form form p {
    padding-bottom: 20px;
    border-bottom: 1px dashed #6a7283
}

.contact-page .contact-form form label {
    margin-bottom: 6px
}

@media(min-width: 768px) {
    .contact-page .contact-form form label {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 10px
    }
}

.contact-page .contact-form form textarea,
.contact-page .contact-form form input {
    background: #fff;
    padding: 12px;
    color: #13203b;
    border: 1px solid rgba(0, 0, 0, 0);
    width: 100%
}

@media(min-width: 1200px) {
    .contact-page .contact-form form textarea,
    .contact-page .contact-form form input {
        padding: 12px 24px
    }
}

.contact-page .contact-form form textarea:focus,
.contact-page .contact-form form input:focus {
    outline: rgba(0, 0, 0, 0);
    box-shadow: none
}

.contact-page .contact-form form .nice-select {
    background: #fff
}

.contact-page .contact-form form .nice-select .current {
    color: #6a7283
}

.contact-page .contact-form form .nice-select::after {
    border-color: #6a7283 !important
}

.contact-page .contact-form form select {
    display: block
}

.more-help {
    background-color: #e7f0e9;
    padding: 60px 0
}

@media(min-width: 1200px) {
    .more-help {
        padding: 110px 0
    }
}

.more-help p {
    margin-bottom: 30px
}

@media(min-width: 992px) {
    .more-help p {
        margin-bottom: 60px
    }
}

.more-help .help-card {
    padding: 16px;
    background-color: #fff;
    text-align: center
}

@media(min-width: 576px) {
    .more-help .help-card {
        padding: 24px
    }
}

@media(min-width: 992px) {
    .more-help .help-card {
        padding: 32px
    }
}

.more-help .help-card i {
    padding: 20px;
    background-color: #e7f0e9;
    font-size: 2.5rem;
    display: inline-flex;
    margin-bottom: 28px;
    font-weight: 200 !important
}

.more-help .help-card a,
.more-help .help-card span {
    line-height: 130% !important;
    color: #10271d
}

.faqs-page {
    background-color: #e7f0e9
}

.faqs-page .accordion-item {
    border: none;
    background-color: #9fd456;
    box-shadow: none
}

.faqs-page .accordion-item:focus {
    box-shadow: none
}

.faqs-page .accordion-item:first-of-type {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: none
}

.faqs-page .accordion-item:last-of-type {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none
}

.faqs-page .accordion-item:first-of-type .accordion-button.collapsed {
    border-top-right-radius: 0;
    border-top-left-radius: 0
}

.faqs-page .accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.faqs-page .accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}

.faqs-page .accordion-button:not(.collapsed) {
    background-color: #9fd456;
    color: #222e48;
    box-shadow: none
}

.faqs-page .accordion-button:not(.collapsed)::after {
    background-color: #e7f0e9;
    border: 1px solid #dfe0e4;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-minus' width='28' height='28' viewBox='0 0 24 24' stroke-width='1' stroke='%23000000' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l14 0' /%3E%3C/svg%3E")
}

.faqs-page .accordion-button.collapsed::after {
    background-color: #e7f0e9;
    border: 1px solid #dfe0e4;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-plus' width='28' height='28' viewBox='0 0 24 24' stroke-width='1' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 5l0 14' /%3E%3Cpath d='M5 12l14 0' /%3E%3C/svg%3E")
}

.faqs-page .accordion-body {
    padding: 0 12px 12px
}

.faqs-page .accordion-body p {
    border-top: 1px dashed #6a7283;
    padding-top: 12px;
    margin-bottom: 0
}

@media(min-width: 992px) {
    .faqs-page .accordion-body {
        padding: 0 32px 12px
    }
}

.faqs-page .accordion-button {
    background-color: #fff;
    color: #222e48;
    padding: 12px;
    line-height: 130%;
    font-weight: 500
}

@media(min-width: 992px) {
    .faqs-page .accordion-button {
        padding: 12px 32px;
        font-size: 18px
    }
}

.faqs-page .accordion-button:focus {
    box-shadow: none
}

.faqs-page .accordion-button::after {
    transform: none !important
}

.error {
    background-color: #e7f0e9;
    min-height: 100vh;
    padding: 60px 0
}

@media(min-width: 1200px) {
    .error {
        padding: 120px 0
    }
}

.error img {
    max-width: 856px
}

.error h2 {
    margin-top: 40px;
    margin-bottom: 16px
}

@media(min-width: 992px) {
    .error h2 {
        margin-top: 60px
    }
}

.error p {
    max-width: 636px;
    margin-bottom: 30px
}

@media(min-width: 992px) {
    .error p {
        margin-bottom: 40px
    }
}

.signup-page {
    min-height: 100vh;
    position: relative;
    background-repeat: no-repeat;
    background-position: right
}

.signup-page.signup-bg {
    background-image: url(../images/signup-bg.webp)
}

.signup-page.signin-bg {
    background-image: url(../images/signin-bg.webp)
}

.signup-page::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    background-color: #fff
}

@media(min-width: 992px) {
    .signup-page::before {
        width: 55%
    }
}

.signup-page .page-content {
    position: relative;
    z-index: 3
}

.signup-page .copyright {
    padding: 24px 0;
    margin-top: 60px
}

@media(min-width: 1200px) {
    .signup-page .copyright {
        margin-top: 80px
    }
}

.password-toggle {
    position: relative
}

.password-toggle .eye-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    font-size: 1.4rem;
    color: #6a7283;
    cursor: pointer;
    transform: translateY(-50%)
}

.loader-container {
    position: relative;
    inset: 0;
    background-color: #10271d;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-width: 100vw;
    z-index: 9999;
    position: fixed;
    overflow: hidden
}

.loader-container .loader {
    height: 30px;
    aspect-ratio: 2.5;
    --_g: no-repeat radial-gradient(farthest-side, #9FD456 90%, #0000);
    background: var(--_g), var(--_g), var(--_g), var(--_g);
    background-size: 20% 50%;
    animation: l43 1s infinite linear
}

@keyframes l43 {
    0% {
        background-position: 0% 50%, 33.3333333333% 50%, 66.6666666667% 50%, 100% 50%
    }
    16.67% {
        background-position: 0% 0, 33.3333333333% 50%, 66.6666666667% 50%, 100% 50%
    }
    33.33% {
        background-position: 0% 100%, 33.3333333333% 0, 66.6666666667% 50%, 100% 50%
    }
    50% {
        background-position: 0% 50%, 33.3333333333% 100%, 66.6666666667% 0, 100% 50%
    }
    66.67% {
        background-position: 0% 50%, 33.3333333333% 50%, 66.6666666667% 100%, 100% 0
    }
    83.33% {
        background-position: 0% 50%, 33.3333333333% 50%, 66.6666666667% 50%, 100% 100%
    }
    100% {
        background-position: 0% 50%, 33.3333333333% 50%, 66.6666666667% 50%, 100% 50%
    }
}

.cc-window {

      font-family: "Inter", sans-serif!important;
      font-size: .7em!important;
      line-height: 1.4!important;
      justify-content: center!important;
      padding: .5em 1em!important;

}

.cc-message {

  flex: none!important;

}


.cc-btn {

  position: relative!important;
  padding: 6px 14px!important;
  font-size: 1.2em!important;
  background-color: #9fd456!important;
  color: #222e48 !important;
  font-weight: 600!important;
  border: 1px solid #9fd456!important;
  border-radius: 0!important;
  overflow: hidden!important;
  z-index: 2!important;

}


.cc-btn:before {
    content: "";
    width: 0;
    height: 500%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    background: #fff;
    transition: .5s ease;
    display: block;
    z-index: -1;

}

.cc-btn:hover {
    color: #13203b!important;
    border-color: #30584c!important;
}

.cc-btn:hover::before {
    width: 150%
}


.bonlogo {

  padding: 10px;
  background: #fff;
  border: 1px solid #30584c;
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1/1;

}

.bonlogo img {

  width: 100%;
  height: 100%;
  object-fit: contain;

}


.tc-text {

  background: rgba(0,0,0,.1);
  padding: .5em .5em;

}

.tc-text p {

  line-height: 1.3;
  font-size: .6em;
  margin: 0;

}

.tc-text a {

  color: #646dff;

}

.ad-disco {

  background: #c4dda1;
  border-radius: 0;
    border: 1px solid #30584c;
}

.ad-disco .modal-header {

  border-color: rgba(0,0,0,.1);

}

.didukno {

  background-color: #e6efff;
  position: relative;
  padding: 40px;
  overflow: hidden;
  height: 100%;
  transition: all .5s ease;

}

.didukno.risks {

  background-color: #ffece6;


}

.didukno svg {

  width: 100px;
  height: 100px;

}

.diduknotitle {

  background: #72a5ff;
  display: inline-block;
  padding: .3em .5em;
  line-height: 1;
  color: #fff;

}



.risks .diduknotitle {

  background: #ff8b72;

}

.txtarea p {

  margin-bottom: 20px;

}

.txtarea p:last-child {

  margin: 0;

}

.txtarea ul li {

  margin-bottom: 15px;

}

.prosabs {

  position: absolute;
  top: 20px;
  left: -30px;
  padding: 10px 10px;
  border: 1px solid #222e48;
  background: #9fd456

}

.conscard .prosabs {

  border: 1px solid #482222;
  background: #d46c56

}




.proscard {

  padding-left: 40px;
  border: 1px solid #9fd456

}

.expertscard {

  padding: 30px;
  border: 1px solid #9fd456;
  background: #f5ffe6;

}


.conscard {


  border: 1px solid #d46c56

}

.proscard:hover {

    background: #f5ffe6;
    border: 1px solid #9fd456

}

.conscard:hover {

    background: #ffefe6;
    border: 1px solid #d46c56

}

.prosabs svg {

  width: 24px;
  height: 24px;

}

.prosabs svg * {

  fill: #fff;

}

.txtbg {

  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;

}

.txtbg:after {

  position: absolute;
  content: " ";
  background: rgba(0,0,0,.3);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;

}

.txtablok {

  background-color: #e7f0e9;
  border: 1px solid #e7f0e9;
  padding: 30px;

}


  .footer-logos {
      display: flex;
      flex-wrap: wrap;
      justify-content:flex-end;
      grid-gap: 50px;
  }

  .footer-logos svg {
      display: block;
      width: auto;
      max-width: 130px;
      height: 27px;
    }

  .footer-logos svg * {
      fill: #222e48;
      opacity: 1;
      transition: all .5s ease;
   }


   .casirati {

     background: #fc0;
     color: #000;
     font-size: .7em;
     line-height: 1;
     padding: .5em .5em;
     top: 0;
     right:0;
     position: absolute;

   }


.revxtra {

  background: #e7f0e9;
  padding: 10px 10px;

}

.crev-card {

      background-color: #e7edf0;

}


.navlogo {

  height: 50px;

}

.fflogo {

  height: 65px;

}