:root {
    --primary: #145a6c;
    --accent: #e6c46a
}

::-webkit-scrollbar {
    width: 8px
}

::-webkit-scrollbar-track {
    background: #f1f1f1
}

::-webkit-scrollbar-thumb {
    background: #145a6c;
    border-radius: 3px
}

::-webkit-scrollbar-thumb:hover {
    background: #ccc
}

::-moz-selection {
    background-color: #00271f;
    color: #fdd301
}

::selection {
    background-color: #00271f;
    color: #fdd301
}

.primary {
    fill: #145a6c;
    fill: var(--primary)
}

.secondary {
    fill: var(--secondary)
}

.bg-rtl {
    background-position: 100%
}

.bg-ltr,
[dir=rtl] .bg-rtl {
    background-position: 0
}

[dir=rtl] .bg-ltr {
    background-position: 100%
}

@-webkit-keyframes bounce-in-fwd {
    0% {
        transform: scale(0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    38% {
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1
    }

    55% {
        transform: scale(.7);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    72% {
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    81% {
        transform: scale(.84);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    89% {
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    95% {
        transform: scale(.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    to {
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes bounce-in-fwd {
    0% {
        transform: scale(0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    38% {
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1
    }

    55% {
        transform: scale(.7);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    72% {
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    81% {
        transform: scale(.84);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    89% {
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    95% {
        transform: scale(.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    to {
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@-webkit-keyframes spinner {
    0% {
        transform: rotate(0deg) scale3d(.8, .8, .8)
    }

    to {
        transform: rotate(1turn) scaleX(1)
    }
}

@keyframes spinner {
    0% {
        transform: rotate(0deg) scale3d(.8, .8, .8)
    }

    to {
        transform: rotate(1turn) scaleX(1)
    }
}

@-webkit-keyframes pulse-shadow {
    to {
        box-shadow: 0 0 0 10px rgba(255, 102, 0, 0), 0 0 0 20px rgba(255, 102, 0, 0)
    }
}

@keyframes pulse-shadow {
    to {
        box-shadow: 0 0 0 10px rgba(255, 102, 0, 0), 0 0 0 20px rgba(255, 102, 0, 0)
    }
}

@-webkit-keyframes pulse {
    0% {
        transform: scaleX(1);
        opacity: 0
    }

    50% {
        transform: scale3d(.8, .8, .8);
        opacity: .5
    }

    to {
        transform: scaleX(1);
        opacity: 1
    }
}

@keyframes pulse {
    0% {
        transform: scaleX(1);
        opacity: 0
    }

    50% {
        transform: scale3d(.8, .8, .8);
        opacity: .5
    }

    to {
        transform: scaleX(1);
        opacity: 1
    }
}

@-webkit-keyframes dropdown-animate {
    0% {
        opacity: 0;
        transform: rotateX(-90deg)
    }

    50% {
        transform: rotateX(20deg)
    }

    to {
        opacity: 1;
        transform: rotateX(0deg)
    }
}

@keyframes dropdown-animate {
    0% {
        opacity: 0;
        transform: rotateX(-90deg)
    }

    50% {
        transform: rotateX(20deg)
    }

    to {
        opacity: 1;
        transform: rotateX(0deg)
    }
}

@-webkit-keyframes rotation {
    0% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(5deg)
    }

    to {
        transform: rotate(0deg)
    }
}

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

    50% {
        transform: rotate(5deg)
    }

    to {
        transform: rotate(0deg)
    }
}

@-webkit-keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

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

    to {
        transform: rotate(1turn)
    }
}

@-webkit-keyframes wave {

    0%,
    to {
        -webkit-clip-path: polygon(0 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0 100%);
        clip-path: polygon(0 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0 100%)
    }

    50% {
        -webkit-clip-path: polygon(0 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0 100%);
        clip-path: polygon(0 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0 100%)
    }
}

@keyframes wave {

    0%,
    to {
        -webkit-clip-path: polygon(0 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0 100%);
        clip-path: polygon(0 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0 100%)
    }

    50% {
        -webkit-clip-path: polygon(0 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0 100%);
        clip-path: polygon(0 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0 100%)
    }
}

@-webkit-keyframes niceAnimate {
    0% {
        transform: scaleX(1)
    }

    50% {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

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

    50% {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

@-webkit-keyframes translation {
    0% {
        transform: translateZ(0)
    }

    to {
        transform: translateZ(10%)
    }
}

@keyframes translation {
    0% {
        transform: translateZ(0)
    }

    to {
        transform: translateZ(10%)
    }
}

@-webkit-keyframes rotate-scale-up {
    0% {
        transform: scale(1) rotate(0)
    }

    50% {
        transform: scale(2) rotate(180deg)
    }

    to {
        transform: scale(1) rotate(1turn)
    }
}

@keyframes rotate-scale-up {
    0% {
        transform: scale(1) rotate(0)
    }

    50% {
        transform: scale(2) rotate(180deg)
    }

    to {
        transform: scale(1) rotate(1turn)
    }
}

@-webkit-keyframes vibrate {
    0% {
        transform: translate(0)
    }

    50% {
        transform: translate(-10px, 10px)
    }

    to {
        transform: translate(0)
    }
}

@keyframes vibrate {
    0% {
        transform: translate(0)
    }

    50% {
        transform: translate(-10px, 10px)
    }

    to {
        transform: translate(0)
    }
}

@-webkit-keyframes translateX {

    0%,
    to {
        transform: translateX(2px)
    }

    50% {
        transform: translateX(-2px)
    }
}

@keyframes translateX {

    0%,
    to {
        transform: translateX(2px)
    }

    50% {
        transform: translateX(-2px)
    }
}

@-webkit-keyframes translateY {

    0%,
    to {
        transform: translateY(2px)
    }

    50% {
        transform: translateY(-2px)
    }
}

@keyframes translateY {

    0%,
    to {
        transform: translateY(2px)
    }

    50% {
        transform: translateY(-2px)
    }
}

@-webkit-keyframes flip-in-hor-bottom {
    0% {
        transform: rotateX(80deg) translate(-50%, -50%);
        opacity: 0
    }

    to {
        transform: rotateX(0) translate(-50%, -50%);
        opacity: 1
    }
}

@keyframes flip-in-hor-bottom {
    0% {
        transform: rotateX(80deg) translate(-50%, -50%);
        opacity: 0
    }

    to {
        transform: rotateX(0) translate(-50%, -50%);
        opacity: 1
    }
}

@-webkit-keyframes shadow {
    0% {
        box-shadow: 0 0 35px -4px #00a4e6;
        opacity: 0 !important
    }

    to {
        box-shadow: 0 0 35px -4px rgba(0, 164, 230, 0)
    }
}

@keyframes shadow {
    0% {
        box-shadow: 0 0 35px -4px #00a4e6;
        opacity: 0 !important
    }

    to {
        box-shadow: 0 0 35px -4px rgba(0, 164, 230, 0)
    }
}

@-webkit-keyframes rotate {
    0% {
        border-top-left-radius: 50%;
        border-top-right-radius: 60%;
        border-bottom-left-radius: 40%;
        border-bottom-right-radius: 55%
    }

    25% {
        border-top-left-radius: 30%;
        border-top-right-radius: 10%;
        border-bottom-left-radius: 20%;
        border-bottom-right-radius: 70%
    }

    50% {
        border-top-left-radius: 20%;
        border-top-right-radius: 40%;
        border-bottom-left-radius: 60%;
        border-bottom-right-radius: 30%
    }

    75% {
        border-top-left-radius: 70%;
        border-top-right-radius: 20%;
        border-bottom-left-radius: 30%;
        border-bottom-right-radius: 50%
    }

    to {
        border-top-left-radius: 50%;
        border-top-right-radius: 60%;
        border-bottom-left-radius: 40%;
        border-bottom-right-radius: 55%
    }
}

@keyframes rotate {
    0% {
        border-top-left-radius: 50%;
        border-top-right-radius: 60%;
        border-bottom-left-radius: 40%;
        border-bottom-right-radius: 55%
    }

    25% {
        border-top-left-radius: 30%;
        border-top-right-radius: 10%;
        border-bottom-left-radius: 20%;
        border-bottom-right-radius: 70%
    }

    50% {
        border-top-left-radius: 20%;
        border-top-right-radius: 40%;
        border-bottom-left-radius: 60%;
        border-bottom-right-radius: 30%
    }

    75% {
        border-top-left-radius: 70%;
        border-top-right-radius: 20%;
        border-bottom-left-radius: 30%;
        border-bottom-right-radius: 50%
    }

    to {
        border-top-left-radius: 50%;
        border-top-right-radius: 60%;
        border-bottom-left-radius: 40%;
        border-bottom-right-radius: 55%
    }
}

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

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

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

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

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

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(30px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@-webkit-keyframes move {
    25% {
        opacity: 1
    }

    33% {
        opacity: 1;
        transform: translateX(30px)
    }

    67% {
        opacity: 1;
        transform: translateX(40px)
    }

    to {
        opacity: 0;
        transform: translateX(55px) scale3d(.5, .5, .5)
    }
}

@keyframes move {
    25% {
        opacity: 1
    }

    33% {
        opacity: 1;
        transform: translateX(30px)
    }

    67% {
        opacity: 1;
        transform: translateX(40px)
    }

    to {
        opacity: 0;
        transform: translateX(55px) scale3d(.5, .5, .5)
    }
}

@-webkit-keyframes clip {
    0% {
        -webkit-clip-path: polygon(57% 41%, 100% 0, 52% 46%, 0 100%);
        clip-path: polygon(57% 41%, 100% 0, 52% 46%, 0 100%)
    }

    50% {
        -webkit-clip-path: polygon(57% 41%, 100% 0, 0 0, 0 100%);
        clip-path: polygon(57% 41%, 100% 0, 0 0, 0 100%)
    }

    to {
        -webkit-clip-path: polygon(100% 100%, 100% 0, 0 0, 0 100%);
        clip-path: polygon(100% 100%, 100% 0, 0 0, 0 100%)
    }
}

@keyframes clip {
    0% {
        -webkit-clip-path: polygon(57% 41%, 100% 0, 52% 46%, 0 100%);
        clip-path: polygon(57% 41%, 100% 0, 52% 46%, 0 100%)
    }

    50% {
        -webkit-clip-path: polygon(57% 41%, 100% 0, 0 0, 0 100%);
        clip-path: polygon(57% 41%, 100% 0, 0 0, 0 100%)
    }

    to {
        -webkit-clip-path: polygon(100% 100%, 100% 0, 0 0, 0 100%);
        clip-path: polygon(100% 100%, 100% 0, 0 0, 0 100%)
    }
}

@-webkit-keyframes sideClip {
    0% {
        -webkit-clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);
        clip-path: polygon(0 0, 100% 0, 0 0, 0 100%)
    }

    50% {
        -webkit-clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%)
    }

    to {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
    }
}

@keyframes sideClip {
    0% {
        -webkit-clip-path: polygon(0 0, 100% 0, 0 0, 0 100%);
        clip-path: polygon(0 0, 100% 0, 0 0, 0 100%)
    }

    50% {
        -webkit-clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%)
    }

    to {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
    }
}

@-webkit-keyframes sideClip_2 {
    0% {
        -webkit-clip-path: polygon(50% 0, 100% 0, 100% 60%, 100% 100%, 55% 100%, 31% 100%, 46% 68%, 70% 53%, 60% 26%);
        clip-path: polygon(50% 0, 100% 0, 100% 60%, 100% 100%, 55% 100%, 31% 100%, 46% 68%, 70% 53%, 60% 26%)
    }

    50% {
        -webkit-clip-path: polygon(50% 0, 100% 0, 100% 60%, 100% 100%, 55% 100%, 31% 100%, 46% 68%, 26% 33%, 11% 10%);
        clip-path: polygon(50% 0, 100% 0, 100% 60%, 100% 100%, 55% 100%, 31% 100%, 46% 68%, 26% 33%, 11% 10%)
    }

    to {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 60%, 100% 100%, 55% 100%, 0 100%, 0 59%, 0 31%, 0 14%);
        clip-path: polygon(0 0, 100% 0, 100% 60%, 100% 100%, 55% 100%, 0 100%, 0 59%, 0 31%, 0 14%)
    }
}

@keyframes sideClip_2 {
    0% {
        -webkit-clip-path: polygon(50% 0, 100% 0, 100% 60%, 100% 100%, 55% 100%, 31% 100%, 46% 68%, 70% 53%, 60% 26%);
        clip-path: polygon(50% 0, 100% 0, 100% 60%, 100% 100%, 55% 100%, 31% 100%, 46% 68%, 70% 53%, 60% 26%)
    }

    50% {
        -webkit-clip-path: polygon(50% 0, 100% 0, 100% 60%, 100% 100%, 55% 100%, 31% 100%, 46% 68%, 26% 33%, 11% 10%);
        clip-path: polygon(50% 0, 100% 0, 100% 60%, 100% 100%, 55% 100%, 31% 100%, 46% 68%, 26% 33%, 11% 10%)
    }

    to {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 60%, 100% 100%, 55% 100%, 0 100%, 0 59%, 0 31%, 0 14%);
        clip-path: polygon(0 0, 100% 0, 100% 60%, 100% 100%, 55% 100%, 0 100%, 0 59%, 0 31%, 0 14%)
    }
}

@-webkit-keyframes toRightFromLeft {
    49% {
        transform: translate(100%)
    }

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

    51% {
        opacity: 1
    }
}

@keyframes toRightFromLeft {
    49% {
        transform: translate(100%)
    }

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

    51% {
        opacity: 1
    }
}

.button-content {
    display: flex;
    align-items: center;
    align-content: center
}

.small-bnt {
    padding: 10px;
    background-color: #e6c46a
}

.small-bnt span {
    font-size: 16px;
    font-weight: 500;
    color: #00271f
}

.swiper-pagination-bullet {
    width: 40px;
    height: 6px;
    background-color: #e6c46a;
    opacity: .3;
    border-radius: 0;
    transform: scale(1) !important
}

.swiper-pagination-bullet-active {
    opacity: 1 !important
}

.custom-btn {
    padding: 12px;
    background-color: #145a6c;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    position: relative;
    z-index: 999;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 141px;
    text-align: center
}

.custom-btn img {
    width: 24px;
    height: 24px;
    -o-object-fit: contain;
    object-fit: contain;
    transition: all .3s linear
}

.custom-btn span {
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    margin: 0 10px 0 0
}

.custom-btn:after,
.custom-btn:before {
    content: "";
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all .3s linear
}

.custom-btn:after {
    border-top: 1px solid #e6c46a;
    border-bottom: 1px solid #e6c46a;
    width: 0;
    height: 100%
}

.custom-btn:before {
    border-left: 1px solid #e6c46a;
    border-right: 1px solid #e6c46a;
    height: 0%;
    width: 100%
}

.custom-btn.yellow-btn {
    background-color: #e6c46a;
    color: #00271f
}

.custom-btn.yellow-btn:after,
.custom-btn.yellow-btn:before {
    border-color: #00271f
}

.custom-btn:hover .rotate {
    transform: rotate(-45deg)
}

.custom-btn:hover .rotate-reverse {
    transform: rotate(45deg)
}

.custom-btn:hover:after {
    width: 100%
}

.custom-btn:hover:before {
    height: 100%
}

.swiper-container {
    width: 100%;
    overflow: hidden
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999
}

.navbar.navscroll {
    background-color: #00271f !important
}

.navbar .hamburger {
    display: none
}

.navbar .hamburger .line {
    width: 30px;
    height: 3px;
    background-color: #e6c46a;
    display: block;
    margin: 8px auto;
    transition: all .3s ease-in-out
}

.navbar .hamburger.active {
    transition: all .3s ease-in-out;
    transition-delay: .6s;
    transform: rotate(45deg)
}

.navbar .hamburger.active .line:nth-child(2) {
    width: 0
}

.navbar .hamburger.active .line:first-child,
.navbar .hamburger.active .line:nth-child(3) {
    transition-delay: .3s
}

.navbar .hamburger.active .line:first-child {
    transform: translateY(6.5px)
}

.navbar .hamburger.active .line:nth-child(3) {
    transform: translateY(-15px) rotate(90deg)
}

.navbar .navbar-nav .nav-link {
    z-index: 99;
    position: relative
}

.navbar .navbar-nav .nav-link:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 10px;
    background-color: #145a6c;
    left: 0;
    bottom: 0;
    z-index: -1;
    transform: scaleX(0);
    transition: all .3s linear
}

.navbar .navbar-nav .nav-link.activeLink:after,
.navbar .navbar-nav .nav-link:hover:after {
    transform: scaleX(1)
}

.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    right: 0 !important;
    left: unset !important;
    transform: translate(0) !important;
    justify-content: flex-end !important;
    display: flex
}

.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    right: 0 !important
}

.form-content,
footer,
header {
    background-size: cover !important
}

.general-box {
    width: 100%;
    padding: 60px 15px;
    box-shadow: 0 0 30px rgba(0, 98, 77, .1);
    position: relative;
    z-index: 99;
    overflow: hidden
}

.general-box.hover-box .custom-bnt {
    padding: 10px 15px;
    border: 1px solid #00271f;
    color: #00271f;
    font-size: 15px;
    font-weight: 500;
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto
}

.general-box.hover-box:after,
.general-box.hover-box:before {
    content: "";
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    z-index: -2;
    transition: all .35s linear
}

.general-box.hover-box:after {
    background-color: #145a6c;
    left: -100%
}

.general-box.hover-box:before {
    background-color: #145a6c;
    right: -100%
}

.general-box.hover-box:hover h3 {
    color: #fff
}

.general-box.hover-box:hover p {
    color: hsla(0, 0%, 100%, .7)
}

.general-box.hover-box:hover .custom-bnt {
    color: #e6c46a;
    border-color: #e6c46a
}

.general-box.hover-box:hover:after {
    left: 0
}

.general-box.hover-box:hover:before {
    right: 0
}

.general-box.border-hover span {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    pointer-events: none
}

.general-box.border-hover span:first-child {
    transform: rotate(0deg)
}

.general-box.border-hover span:first-child:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 98, 77, .5);
    transform-origin: left;
    transition: .5s;
    transform: scaleX(0);
    top: 0;
    left: 0
}

.general-box.border-hover span:nth-child(2):before {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: rgba(0, 98, 77, .5);
    transform-origin: left;
    transition: .5s;
    transform: scaleY(0);
    top: 0;
    right: 0
}

.general-box.border-hover span:nth-child(3) {
    transform: rotate(180deg)
}

.general-box.border-hover span:nth-child(3):after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 98, 77, .5);
    transform-origin: left;
    transition: .5s;
    transform: scaleX(0);
    top: 0;
    left: 0
}

.general-box.border-hover span:nth-child(4):before {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: rgba(0, 98, 77, .5);
    transform-origin: left;
    transition: .5s;
    transform: scaleY(0);
    top: 0;
    left: 0
}

.general-box.border-hover span:nth-child(2n):after {
    transform-origin: right;
    transition-delay: .25s
}

.general-box.border-hover:hover img {
    -webkit-animation: bounce-in-fwd 1s both;
    animation: bounce-in-fwd 1s both
}

.general-box.border-hover:hover span:After {
    transform: scaleX(1)
}

.general-box.border-hover:hover span:before {
    transform: scaleY(1)
}

.prices .box {
    z-index: 99 !important;
    transition: all .4s
}

.prices .box:hover {
    transform: translateY(-10px)
}

.form-content,
.prices .box:hover {
    box-shadow: 0 0 30px rgba(0, 39, 31, .1)
}

.form .form-group {
    position: relative
}

.form .form-group:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    transform: translateY(-50%);
    right: 11px;
    background-size: contain !important;
    background-repeat: no-repeat !important
}

.form .form-group.project:After {
    background: url(../../img/lap.svg)
}

.form .form-group.project select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #b2b2b2
}

.form .form-group.project select:focus {
    outline: none;
    border-color: #e6c46a
}

.form .form-group.project:before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background: url(../../img/down.svg);
    z-index: 99 !important
}

.form .form-group.message:after {
    background: url(../../img/message.svg)
}

.form .form-group.name:after {
    background: url(../../img/name.svg)
}

.form .form-group.call:after {
    background: url(../../img/call.svg)
}

.form .form-group input {
    color: #00271f
}

.form .form-group input:focus-visible {
    outline: none
}

.form .form-group input:focus {
    border-color: #e6c46a
}

.form .form-group input:focus::-moz-placeholder {
    color: #00271f
}

.form .form-group input:focus:-ms-input-placeholder {
    color: #00271f
}

.form .form-group input:focus::placeholder {
    color: #00271f
}

.form .custom-btn {
    width: 100% !important;
    text-align: center;
    justify-content: center !important
}

.form .custom-btn span {
    color: #00271f
}

.form input::-moz-placeholder {
    color: #b2b2b2;
    font-size: 16px;
    font-weight: 400
}

.form input:-ms-input-placeholder {
    color: #b2b2b2;
    font-size: 16px;
    font-weight: 400
}

.form input::placeholder,
.form option,
.form select {
    color: #b2b2b2;
    font-size: 16px;
    font-weight: 400
}

.simple-box,
.simple-box .icon {
    transition: all .45s linear
}

.simple-box .icon img {
    filter: invert(96%) sepia(100%) saturate(15%) hue-rotate(249deg) brightness(105%) contrast(105%)
}

.simple-box:hover {
    background-color: rgba(230, 196, 106, .06)
}

.simple-box:hover .icon {
    background-color: #e6c46a
}

.simple-box:hover .icon img {
    -webkit-animation: bounce-in-fwd 1s both;
    animation: bounce-in-fwd 1s both;
    filter: invert(13%) sepia(10%) saturate(4931%) hue-rotate(125deg) brightness(86%) contrast(102%)
}

footer .socail-media li a {
    transition: all .4s linear
}

footer .socail-media li a img {
    filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(138deg) brightness(102%) contrast(101%)
}

footer .socail-media li a:hover {
    background-color: #e6c46a;
    border-color: transparent
}

footer .socail-media li a:hover img {
    -webkit-animation: bounce-in-fwd 1s both;
    animation: bounce-in-fwd 1s both;
    filter: invert(12%) sepia(13%) saturate(5562%) hue-rotate(133deg) brightness(90%) contrast(101%)
}

footer .list {
    position: relative;
    height: 100%
}

footer .list:after {
    content: "";
    position: absolute;
    width: 2px;
    height: 60%;
    right: -80px;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(230, 196, 106, .2)
}

[dir=ltr] .form .form-group:after {
    left: 11px;
    right: unset
}

[dir=ltr] .form .form-group.project:before {
    right: 15px;
    left: unset
}

[dir=ltr] footer .list:after {
    left: -80px;
    right: unset
}

@media(max-width:1120px)and (min-width:900px) {
    .navbar .brand-name img {
        width: 8rem !important
    }
}

@media(max-width:900px) {
    .navbar {
        z-index: 99999 !important;
        position: fixed;
        width: 100%;
        top: 0 !important;
        right: 0 !important;
        background-color: #00271f
    }

    .navbar .brand-name {
        width: 150px
    }

    .navbar .hamburger {
        display: block
    }

    .navbar .navbar-nav {
        width: 100%;
        height: 100vh;
        position: absolute;
        top: 100px;
        right: -100%;
        transition: all .4s linear;
        background-color: #00271f;
        flex-direction: column;
        justify-content: flex-start
    }

    .navbar .navbar-nav li {
        margin-bottom: 50px !important
    }

    .banner {
        background-size: cover !important
    }

    .activeNav {
        right: 0 !important
    }

    footer .list:after {
        display: none
    }

    .contact-us-now {
        padding: 50px 0
    }
}

@media(max-width:500px) {
    .navbar .custom-btn img {
        display: none
    }

    .navbar .custom-btn span {
        margin: 0 !important;
        font-size: 11px !important
    }

    .navbar .custom-btn {
        padding: 7px
    }

    .simple-box {
        padding: 20px 10px !important;
        flex-direction: column;
        justify-content: center
    }

    .simple-box .content {
        padding: 10px 0 0 !important;
        text-align: center
    }

    .form-content {
        padding: 20px 10px
    }

    footer .content {
        padding-bottom: 30px !important
    }
}