:root {
    --base-color: #be9244;
    --base-light: #d78b04;
    --accent-light: #086ea4;
    --secondary-color: #086ea4;
    --font-1: "Noto Serif JP", serif;
    --font-2: "Jost", sans-serif;
    --font-3: "Raleway", sans-serif;
    --card-border: 2px dotted;
}

/* font-family: "Numans", sans-serif;
font-family: "Inter", sans-serif;
font-family: "Poppins", sans-serif; */
body {
    color: var(--color-body);
    /* font-family: var(--font-3); */
    font-weight: normal;
    font-size: 16px;
    /* line-height: 2; */
    overflow-x: hidden !important;
    font-family: var(--font-3);
    /* font-optical-sizing: auto; */
    /* font-style: normal; */
    position: relative;
}

body p {
    font-size: 14px;
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.f1 {
    font-family: var(--font-1) !important;
}

.f2 {
    font-family: var(--font-2) !important;
}

.f3 {
    font-family: var(--font-3) !important;
}

img {
    max-width: 100%;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-3);
    font-weight: var(--fw, 400);
    line-height: 1.2;
    color: #2f3943;
    margin: 0px;
    font-variation-settings: "wght"var(--fw, 400);
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: #212121;
}

ul, ol {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

p,.p {
    margin: 0px;
    font-family: var(--font-2);
    font-variation-settings: "wght"var(--fw, 400);
}

a {
    color: var(--color-secondary, #212121);
    display: inline-block;
    -webkit-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    text-decoration: none;
    font-variation-settings: "wght" var(--fw, 400);
}

a:hover {
    color: #212121;
    text-decoration: none;
}

a:focus {
    text-decoration: none;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

a, span {
    display: inline-block;
}

.text-base {
    color: var(--base-color)
}

.color-primary {
    color: var(--color-primary) !important;
}

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

.color-primary-20 {
    color: var(--color-primary-20) !important;
}

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

.color-secondary {
    color: var(--color-secondary) !important;
}

.bg-color-secondary {
    background-color: var(--color-secondary);
}

.color-secondary-10 {
    color: var(--color-secondary-10) !important;
}

.bg-color-secondary-10 {
    background-color: var(--color-secondary-10);
}

.color-tertiary {
    color: var(--color-tertiary) !important;
}

.bg-color-tertiary {
    background-color: var(--color-tertiary);
}

.color-fourth {
    color: var(--color-fourth) !important;
}

.bg-color-fourth {
    background-color: var(--color-fourth);
}

.color-heading {
    color: var(--color-heading) !important;
}

.bg-color-heading {
    background-color: var(--color-heading);
}

.color-heading-07 {
    color: var(--color-heading-07) !important;
}

.bg-color-heading-07 {
    background-color: var(--color-heading-07);
}

.color-heading-10 {
    color: var(--color-heading-10) !important;
}

.bg-color-heading-10 {
    background-color: var(--color-heading-10);
}

.color-heading-50 {
    color: var(--color-heading-50) !important;
}

.bg-color-heading-50 {
    background-color: var(--color-heading-50);
}

.color-body {
    color: var(--color-body) !important;
}

.bg-color-body {
    background-color: var(--color-body);
}

.color-grey {
    color: var(--color-grey) !important;
}

.bg-color-grey {
    background-color: var(--color-grey);
}

.color-white {
    color: #fff !important;
}

.bg-color-white {
    background-color: #fff;
}

.color-black {
    color: var(--color-black) !important;
}

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

/*  */
.container-1300 {
    max-width: 1300px;
}

.container-1450 {
    max-width: 1450px;
}

.container-1500 {
    max-width: 1500px;
}

.container-1600 {
    max-width: 1600px;
}

@media (min-width: 1300px) {
    .container-1400 {
        max-width: 1300px;
        width: 90%;
    }
}

/*======= Common Class =======*/
.overly-primary-95::before, .widget.cta-widget .cta-content::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.border-top-primary {
    border-top: 1px solid var(--color-primary-10);
}

/*======= Background Sizes =======*/
.bg-size-cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.overly-primary-95 {
    position: relative;
    z-index: 1;
}

.overly-primary-95::before {
    background-color: var(--color-primary);
    opacity: 0.95;
}

/*======= Spacing =======*/
.section-gap {
    padding-top: 60px;
    padding-bottom: 60px;
}

.section-gap-top {
    padding-top: 130px;
}

.section-gap-top-less {
    padding-top: 100px;
    padding-bottom: 130px;
}

.section-gap-bottom {
    padding-bottom: 130px;
}

.section-gap-100 {
    padding-top: 100px;
    padding-bottom: 100px;
}

.section-gap-80 {
    padding-top: 80px;
    padding-bottom: 80px;
}

.about-content-gap {
    padding-left: 30px;
    padding-bottom: 120px;
}

@media (max-width: 1199px) {
    .about-content-gap {
        padding-bottom: 60px;
        padding-left: 0;
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 1199px) {
    .mb-xl-50 {
        margin-bottom: 50px;
    }
}

@media (max-width: 991px) {
    .mb-md-50 {
        margin-bottom: 50px;
    }

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

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

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

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

@media (max-width: 767px) {
    .mt-sm-30 {
        margin-top: 30px;
    }
}

/*======= Input field =======*/
input:focus, textarea:focus, select:focus, button:focus {
    text-decoration: none;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

::-webkit-input-placeholder {
    color: inherit;
    opacity: 1;
}

:-ms-input-placeholder {
    color: inherit;
    opacity: 1;
}

::-ms-input-placeholder {
    color: inherit;
    opacity: 1;
}

::-moz-placeholder {
    color: inherit;
    opacity: 1;
}

::placeholder {
    color: inherit;
    opacity: 1;
}

input[type="search"]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input[type="search"]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

textarea, input, select {
    width: 100%;
    height: 45px;
    color: var(--color-heading-50);
    background-color: var(--color-grey);
    border: 1px solid transparent;
    font-size: 18px;
    font-weight: 400;
    font-family: var(--font-1);
    border-radius: 0;
    line-height: 1.4;
    padding: 0 30px;
    -webkit-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

textarea:focus, input:focus, select:focus {
    border-color: var(--color-secondary);
    color: var(--color-heading);
}

textarea {
    height: 140px;
    padding-top: 20px;
    display: inherit;
    resize: none;
}

button {
    border: none;
}

/*======= keyframes & Animation =======*/
@-webkit-keyframes sticky {
    0% {
        top: -200px;
    }

    100% {
        top: 0;
    }
}

@keyframes sticky {
    0% {
        top: -200px;
    }

    100% {
        top: 0;
    }
}

@-webkit-keyframes float-bob-x {
    0% {
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
    }

    50% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }

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

@keyframes float-bob-x {
    0% {
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
    }

    50% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }

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

@-webkit-keyframes float-bob-y {
    0% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    50% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    100% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}

@keyframes float-bob-y {
    0% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    50% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    100% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}

@-webkit-keyframes pulse-border {
    0% {
        -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
    }
}

@keyframes pulse-border {
    0% {
        -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
    }
}

.animate-float-bob-x {
    -webkit-animation-name: float-bob-x;
    animation-name: float-bob-x;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

.animate-float-bob-y {
    -webkit-animation-name: float-bob-y;
    animation-name: float-bob-y;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

/*======= Header =======*/
.main-header {
    position: sticky;
    z-index: 999;
    top: 0;
}

.main-header .header-navigation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    /* margin-left: -15px; */
    /* margin-right: -15px; */
}

@media (max-width: 1199px) {
    .main-header .header-navigation {
        padding: 3px 0;
    }
}

.main-header .header-left1, .main-header .header-center, .main-header .header-right {
    padding-left: 15px;
    padding-right: 15px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
}

.header-left {
    /* flex: 1 !important; */
}

.header-right {
    flex: 2
}

.header-middle {
    padding: 0 0px;
}

.main-header .extra-icons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.main-header .extra-icons li:not(:first-child) {
    margin-left: 30px;
}

.main-header .header-center .extra-icons li {
    margin-left: 30px;
}

@media (max-width: 1299px) {
    .main-header .header-center .extra-icons li {
        margin-left: 20px;
    }
}

.main-header .header-center .extra-icons li:first-child {
    margin-left: 15px;
}

@media (max-width: 1199px) {
    .main-header .site-logo {
        max-width: 70px;
    }
}

.main-header .site-menu ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    justify-content: flex-end;
}

.main-header .site-menu ul li {
    display: block;
    position: relative;
    z-index: 1;
    padding: 0 0px;
    transition: all 0.2s;
}

@media (max-width: 1299px) {
    .main-header .site-menu ul li {
        padding: 0px 5px;
    }
}

.main-header .site-menu ul li a {
    padding: 5px 0;
    font-size: 15px;
    font-family: var(--font-2);
    --fw: 500;
    text-transform: capitalize;
    white-space: nowrap;
    letter-spacing: normal;
    padding: 0px 10px;
    display: block;
    font-variation-settings: "wght" var(--fw);
}

.main-header .site-menu ul li a .dd-trigger {
    font-size: 12px;
    padding-left: 5px;
    display: none;
}

.main-header .site-menu ul li a:hover, .main-header .site-menu ul li.active>a {
    color: var(--base-color);
}

.main-header .site-menu ul li:hover>.sub-menu {
    visibility: visible;
    opacity: 1;
    top: 150%;
}

.main-header .site-menu ul li .sub-menu {
    position: absolute;
    display: block;
    position: absolute;
    width: 270px;
    background-color: #fff;
    -webkit-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    z-index: 99;
    -webkit-box-shadow: 0 2px 8px 0 rgba(0, 29, 35, 0.05);
    box-shadow: 0 2px 8px 0 rgb(0 29 35 / 19%);
    left: 0;
    top: calc(100% + 40px);
    visibility: hidden;
    opacity: 0;
}

.main-header .site-menu ul li .sub-menu li {
    line-height: 1;
    padding: 0;
}

.main-header .site-menu ul li .sub-menu li.active {
}

.main-header .site-menu ul li .sub-menu li:not(:last-child) {
    border-bottom: 1px solid var(--color-heading-07);
}

.main-header .site-menu ul li .sub-menu li a {
    justify-content: space-between;
    font-size: 17px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    line-height: 1.4;
    color: #262626;
    border-left: 4px dotted transparent;
    transition: border 0.7s ease;
}

.main-header .site-menu ul li .sub-menu li.active a, .main-header .site-menu ul li .sub-menu li a:hover {
    background-color: var(--base-color);
    color: #fff;
    border-left-color: var(--bs-black);
}

.main-header .site-menu ul li .sub-menu li a::before {
    display: none;
}

.main-header .site-menu ul li .sub-menu li .sub-menu {
    left: 100%;
    top: 50%;
}

.main-header .site-menu ul li .sub-menu li:hover .sub-menu {
    top: 0;
}

.main-header .site-menu ul li.active>a {
}

.main-header .site-menu.item-extra-gap ul li {
    padding: 0 15px;
}

@media (max-width: 1599px) {
    .main-header .site-menu.item-extra-gap ul li {
        padding: 0 10px;
    }
}

@media (max-width: 1299px) {
    .main-header .site-menu.item-extra-gap ul li {
        padding: 0px 8px;
    }
}

.main-header .site-menu.menu-gap-left {
    /* margin-left: 90px; */
    /* margin-left: auto; */
    flex: 1;
}

.main-header .site-menu.item-left ul.primary-menu>li:first-child {
    padding-left: 0;
}

.main-header .site-menu.item-left ul.primary-menu>li:first-child>a {
    padding-left: 0;
}

.main-header .header-search-area form {
    position: relative;
    z-index: 1;
}

.main-header .header-search-area input {
    width: 280px;
    height: 55px;
    border-radius: 30px;
    border: 2px solid rgba(77, 101, 129, 0.15);
    background-color: #fff;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-heading);
    padding: 0 45px 0 25px;
}

.main-header .header-search-area input:focus {
    border-color: var(--color-heading);
}

@media (max-width: 1299px) {
    .main-header .header-search-area input {
        width: 220px;
    }
}

@media (max-width: 767px) {
    .main-header .header-search-area input {
        width: 200px;
    }
}

.main-header .header-search-area button {
    position: absolute;
    top: 50%;
    right: 25px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: var(--color-heading);
    background-color: transparent;
    font-size: 15px;
    line-height: 1;
}

.main-header .off-canvas-btn {
    position: relative;
    cursor: pointer;
    padding: 10px 0;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    overflow: hidden;
}

.main-header .off-canvas-btn span {
    width: 35px;
    height: 4px;
    display: block;
    position: relative;
}

.main-header .off-canvas-btn .icon {
    display: inline-block;
    /* position: absolute; */
    top: 50%;
    transform: rotate(-90deg) scale(1.1);
    /* transform: translateY(-50%) rotate(-90deg); */
    color: var(--base-dark);
    margin-right: 6px;
    transition: all 300ms;
}

.main-header .off-canvas-btn:hover .icon {
    transform: rotate(-90deg) scale(1.1, -1) translateY(-7px);
}

.main-header .off-canvas-btn span::before, .main-header .off-canvas-btn span::after {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 35px;
    height: 4px;
    display: block;
}

.main-header .off-canvas-btn span::after {
    top: auto;
    bottom: 0;
}

.main-header .off-canvas-btn span, .main-header .off-canvas-btn span::before, .main-header .off-canvas-btn span::after {
    background-color: var(--base-dark);
}

.main-header .header-toggleside {
    margin: 13px 0;
}

.main-header .header-toggleside span {
    width: 20px;
}

.main-header .header-toggleside span, .main-header .header-toggleside span::before, .main-header .header-toggleside span::after {
    background-color: var(--base-dark);
}

.main-header .header-toggleside span::before {
    width: 40px;
    top: -14px;
    left: -13px;
}

.main-header .header-toggleside span::after {
    width: 40px;
    bottom: -14px;
    left: -13px;
}

.main-header .navbar-toggler {
    display: block;
    width: 52px;
    padding: 7px;
    font-size: 0;
    border: 2px solid var(--base-color);
    border-radius: 5px;
}

.main-header .navbar-toggler span {
    display: block;
    height: 3px;
    background-color: var(--base-color);
}

.main-header .navbar-toggler span:nth-child(2) {
    margin: 6px 0;
}

.main-header .header-topbar {
    background-color: var(--color-primary);
    padding: 15px 0;
}

.main-header .header-topbar, .main-header .header-topbar a {
    color: #fff;
}

.main-header .header-topbar .topbar-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media (max-width: 991px) {
    .main-header .header-topbar .topbar-menu {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

.main-header .header-topbar .topbar-menu li {
    padding-left: 15px;
    padding-right: 20px;
    position: relative;
    line-height: 1.4;
}

@media (max-width: 1199px) {
    .main-header .header-topbar .topbar-menu li {
        font-size: 15px;
    }
}

.main-header .header-topbar .topbar-menu li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 5px;
    width: 5px;
    background-color: #fff;
    border-radius: 50%;
}

.main-header .header-topbar .topbar-menu li a:hover {
    text-decoration: underline;
}

.main-header .header-topbar .contact-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

@media (max-width: 991px) {
    .main-header .header-topbar .contact-info {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-top: 15px;
    }
}

.main-header .header-topbar .contact-info li {
    padding-left: 25px;
    padding-right: 25px;
    border-left: 2px solid rgba(255, 255, 255, 0.2);
    line-height: 1.4;
}

@media (max-width: 1199px) {
    .main-header .header-topbar .contact-info li {
        padding-left: 15px;
        padding-right: 15px;
        font-size: 15px;
    }
}

@media (max-width: 991px) {
    .main-header .header-topbar .contact-info li:first-child {
        border-left: none;
    }
}

.main-header .header-topbar .contact-info li:last-child {
    padding-right: 0;
}

.main-header .header-topbar .contact-info li i {
    margin-right: 5px;
}

.main-header .header-topbar .contact-info li .social-icons a {
    opacity: 0.6;
}

.main-header .header-topbar .contact-info li .social-icons a:not(:first-child) {
    margin-left: 20px;
}

@media (max-width: 1199px) {
    .main-header .header-topbar .contact-info li .social-icons a:not(:first-child) {
        margin-left: 16px;
    }
}

.main-header .header-topbar .contact-info li .social-icons a:hover {
    opacity: 1;
}

.main-header .header-topbar .contact-info li .social-icons a i {
    margin: 0;
}

.main-header.absolute-header:not(.inner-header) {
    /*position: absolute;
    left: 0;
    top: 0px;
    width: 100%;
    height: auto;
    z-index: 9999;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 10px;
    padding-bottom: 10px;*/
}

.main-header {
    background-color: transparent;
}

.main-header.sticky-header.sticky-on {
    /*position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
    -webkit-animation: sticky 1.2s;
    animation: sticky 1.2s;
    -webkit-box-shadow: 0 8px 20px rgba(14, 32, 77, 0.08);
    box-shadow: 0 8px 20px rgba(14, 32, 77, 0.08);
    background-color: #fff;*/
    box-shadow: 1px 1px 10px #00000024;
}

.main-header.sticky-header.sticky-on .site-menu ul li {
    /* line-height: 100px; */
}

.main-header.sticky-header.sticky-on .header-topbar {
    display: none !important;
}

.main-header.sticky-header.sticky-on.sticky-secondary-bg {
    background-color: var(--color-heading);
}

@media (min-width: 992px) {
    .main-header.header-three .header-navigation {
        padding: 0;
    }
}

.main-header.header-five .header-navigation .site-menu ul li .sub-menu li a {
    color: var(--color-heading);
}

.main-header.header-five .header-navigation .site-menu ul li .sub-menu li a:hover {
    background-color: var(--color-tertiary);
    color: #fff;
}

.main-header.header-five .header-navigation .site-menu ul li a:hover, .main-header.header-five .header-navigation .site-menu ul li.active a {
    color: var(--color-tertiary);
}

/*======= Header Panel =======*/
.slide-panel {
    position: fixed;
    left: 0;
    top: 0;
    background-color: transparent;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.4s ease-out 0s;
    -o-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
}

.slide-panel .panel-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: #eee;
    cursor: pointer;
    z-index: 9998;
    -webkit-transition: all 0.4s ease-out 0s;
    -o-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
    opacity: 0;
    visibility: hidden;
}

.slide-panel .panel-inner {
    max-width: 380px;
    height: 100vh;
    background-color: #ffffff;
    padding: 40px;
    position: relative;
    z-index: 9999;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-transition: all 0.4s ease-out 0s;
    -o-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
    margin-left: -380px;
    opacity: 0;
    visibility: hidden;
}

.slide-panel .panel-close {
    position: absolute;
    top: 20px;
    right: 30px;
    z-index: 2;
    font-size: 28px;
    line-height: 1;
    color: var(--base-dark);
}

.slide-panel.show-panel {
    opacity: 1;
    visibility: visible;
}

.slide-panel.show-panel .panel-overlay {
    visibility: visible;
    opacity: 70%;
}

.slide-panel.show-panel .panel-inner {
    visibility: visible;
    opacity: 1;
    margin-left: -20px;
}

/*======= Off Canvas =======*/
.off-canvas-panel .canvas-widget-title {
    font-size: 20px;
    margin-bottom: 5px;
    padding-bottom: 8px;
    position: relative;
    border-bottom: 1px solid var(--color-primary-10);
    color: var(--base-dark);
}

.off-canvas-panel .canvas-logo, .off-canvas-panel .contact-us, .off-canvas-panel .about-us {
    margin-bottom: 40px;
}

.off-canvas-panel .contact-us li {
    position: relative;
    padding-left: 60px;
    line-height: 1.5;
}

.off-canvas-panel .contact-us li:not(:last-child) {
    margin-bottom: 25px;
}

.off-canvas-panel .contact-us li, .off-canvas-panel .contact-us li a {
    color: var(--color-body);
}

.off-canvas-panel .contact-us li a:hover {
    color: var(--color-primary);
}

.off-canvas-panel .contact-us li i {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: var(--base-dark);
    border-radius: 50%;
    font-size: 14px;
    border-radius: 50%;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/*======= Mobile Panel =======*/
.mobile-slide-panel .panel-inner {
    width: 300px;
    margin-left: -300px;
    padding: 40px 30px;
}

.mobile-slide-panel .panel-logo {
    margin-bottom: 30px;
}

.mobile-slide-panel .panel-logo img {
    max-width: 170px;
}

.mobile-slide-panel .mobile-menu li a {
    position: relative;
    display: block;
    line-height: 1.5;
    padding: 10px 45px 10px 10px;
    border-bottom: 1px solid var(--color-primary-10);
    color: #111111;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--font-3);
}

.mobile-slide-panel .mobile-menu li a .dd-trigger {
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    line-height: 1;
    z-index: 2;
    border-left: 1px solid var(--color-primary-10);
    font-size: 14px;
}

.mobile-slide-panel .mobile-menu li a .dd-trigger i {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.mobile-slide-panel .mobile-menu li a .dd-trigger.sub-menu-opened i {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
}

.mobile-slide-panel .mobile-menu li.active>a {
    color: var(--color-secondary);
}

.mobile-slide-panel .mobile-menu li .sub-menu {
    display: none;
    padding-left: 15px;
}

.mobile-slide-panel .mobile-menu li .sub-menu li a {
    font-size: 14px;
}

.odic-btn {
    position: relative;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-1);
    line-height: 1.2;
    background-color: var(--color-3);
    color: #fff;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    padding: 10px 27px 10px 27px;
    border-radius: 30px;
    border: none;
    display: inline-flex;
    align-items: center;
}

.odic-btn span.icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    position: relative;
}

.odic-btn span.icon:before, .odic-btn span.icon:after {
    content: '';
    position: absolute;
    background-color: white;
    background-blend-mode: color-burn;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M153.9 51.5c-34.6 0-65.87 4.45-87.79 11.3c-10.96 3.43-19.55 7.51-24.76 11.37c-5.22 3.85-6.41 6.7-6.41 8.33s1.19 4.48 6.41 8.33c5.21 3.86 13.8 7.94 24.76 11.37c21.92 6.8 53.19 11.3 87.79 11.3s65.9-4.5 87.8-11.3c11-3.43 19.6-7.51 24.8-11.37c5.2-3.85 6.4-6.7 6.4-8.33s-1.2-4.48-6.4-8.33c-5.2-3.86-13.8-7.94-24.8-11.37c-21.9-6.85-53.2-11.3-87.8-11.3M388 70.48c-2.5 0-5 0-7.5.16c-20.2 1.15-42.3 7.56-63.1 15.43c-12.5 4.72-24.5 9.98-35.3 15.03c-1.5 1.5-3.2 2.9-4.9 4.2q-7.65 5.55-18.3 9.9v17.9c13.5-7.4 38.1-20.1 64.8-30.2c19.9-7.5 40.8-13.32 57.8-14.29c17-.98 28.9 2.5 35.4 11.69c6 8.5 5 14.1-.7 23.4c-5.6 9.3-16.8 20.2-29.5 31.6c-12.6 11.3-26.5 23.2-37.4 36.4s-19.2 28.2-18.2 45.2c1.5 24.8 21.4 48.3 39.9 67.4c18.4 19 36.5 32.9 36.5 32.9l11-14.2s-17.2-13.3-34.6-31.2c-17.4-18-33.9-41.4-34.8-56v-.1c-.7-10.3 4.6-21.1 14.1-32.5c9.5-11.5 22.8-23 35.6-34.6c12.8-11.5 25.1-22.8 32.9-35.6c7.7-12.8 9.7-29.2-.2-43.11c-9.8-13.91-26.1-19.1-43.5-19.41M153.9 74.5a48 8 0 0 1 48 8a48 8 0 0 1-48 8a48 8 0 0 1-48-8a48 8 0 0 1 48-8m-87 46.7v10.6c58.3 14 116 13 174 6.9v-17.5c-23.6 6.5-53.9 10.3-87 10.3c-33.2 0-63.38-3.8-87-10.3m0 29.1v24.4c62.9 2.9 119.7-3.4 174-13.9v-4.1c-57.1 6-115 7-174-6.4m174 28.7c-54 10.3-111.1 16.5-174 13.8v18.7c64 1.5 123.2-2.5 174-15.9zm0 35.3c-52 12.9-111.1 16.6-174 15.2v3.2c61.5 8.4 120.8 13.8 174 10.8zm-174 36.5v8.9c53.3 17 112.9 17.8 174 16.9v-15.1c-54.1 2.9-113.2-2.3-174-10.7m0 27.7v31.8c52.7 3.4 102.8-3.5 152.2-15.5c-52 .4-103.9-1.7-152.2-16.3m174 29.4c-55.7 14.7-113.1 24.3-174 20.5v16c57.6.2 114.8-1 174-14.2zm221.7 19a20.5 40.99 51.48 0 0-32.8 14.1a20.5 40.99 51.48 0 0-.2.1l-.6.6a20.5 40.99 51.48 0 0-8.9 8.5L265.9 497.5l176.3-115.9a20.5 40.99 51.48 0 0 13.1-8.5a20.5 40.99 51.48 0 0 19.3-41.5a20.5 40.99 51.48 0 0-12-4.7M452.5 342a10.25 20.5 51.48 0 1 .1 0a10.25 20.5 51.48 0 1 6 2.3a10.25 20.5 51.48 0 1-9.7 20.8a10.25 20.5 51.48 0 1-22.4 4.8a10.25 20.5 51.48 0 1 9.6-20.8a10.25 20.5 51.48 0 1 16.4-7.1m-211.6 6.6c-59.9 12.8-117.3 14-173.99 13.8c0 0 .41.9 3.71 2.8c3.91 2.2 10.75 4.6 19.24 6.5c16.94 3.8 40.54 5.8 64.04 5.8s47.1-2 64-5.8c8.5-1.9 15.4-4.3 19.3-6.5c3.4-2 3.7-3 3.7-2.8zM49.17 365.5c-3.1 1.6-5.74 3.1-7.82 4.7c-5.22 3.8-6.41 6.7-6.41 8.3s1.19 4.5 6.41 8.3c5.21 3.9 13.8 8 24.76 11.4c21.92 6.8 53.19 11.3 87.79 11.3s65.9-4.5 87.8-11.3c11-3.4 19.6-7.5 24.8-11.4c5.2-3.8 6.4-6.7 6.4-8.3s-1.2-4.5-6.4-8.3c-2.1-1.6-4.7-3.2-7.9-4.7c-1.2 6.9-6.7 12-12.5 15.3c-6.6 3.8-14.7 6.4-24.3 8.5c-19 4.2-43.4 6.2-67.9 6.2s-48.9-2-67.95-6.2c-9.51-2.1-17.68-4.7-24.26-8.5c-5.79-3.2-11.27-8.4-12.52-15.3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M153.9 51.5c-34.6 0-65.87 4.45-87.79 11.3c-10.96 3.43-19.55 7.51-24.76 11.37c-5.22 3.85-6.41 6.7-6.41 8.33s1.19 4.48 6.41 8.33c5.21 3.86 13.8 7.94 24.76 11.37c21.92 6.8 53.19 11.3 87.79 11.3s65.9-4.5 87.8-11.3c11-3.43 19.6-7.51 24.8-11.37c5.2-3.85 6.4-6.7 6.4-8.33s-1.2-4.48-6.4-8.33c-5.2-3.86-13.8-7.94-24.8-11.37c-21.9-6.85-53.2-11.3-87.8-11.3M388 70.48c-2.5 0-5 0-7.5.16c-20.2 1.15-42.3 7.56-63.1 15.43c-12.5 4.72-24.5 9.98-35.3 15.03c-1.5 1.5-3.2 2.9-4.9 4.2q-7.65 5.55-18.3 9.9v17.9c13.5-7.4 38.1-20.1 64.8-30.2c19.9-7.5 40.8-13.32 57.8-14.29c17-.98 28.9 2.5 35.4 11.69c6 8.5 5 14.1-.7 23.4c-5.6 9.3-16.8 20.2-29.5 31.6c-12.6 11.3-26.5 23.2-37.4 36.4s-19.2 28.2-18.2 45.2c1.5 24.8 21.4 48.3 39.9 67.4c18.4 19 36.5 32.9 36.5 32.9l11-14.2s-17.2-13.3-34.6-31.2c-17.4-18-33.9-41.4-34.8-56v-.1c-.7-10.3 4.6-21.1 14.1-32.5c9.5-11.5 22.8-23 35.6-34.6c12.8-11.5 25.1-22.8 32.9-35.6c7.7-12.8 9.7-29.2-.2-43.11c-9.8-13.91-26.1-19.1-43.5-19.41M153.9 74.5a48 8 0 0 1 48 8a48 8 0 0 1-48 8a48 8 0 0 1-48-8a48 8 0 0 1 48-8m-87 46.7v10.6c58.3 14 116 13 174 6.9v-17.5c-23.6 6.5-53.9 10.3-87 10.3c-33.2 0-63.38-3.8-87-10.3m0 29.1v24.4c62.9 2.9 119.7-3.4 174-13.9v-4.1c-57.1 6-115 7-174-6.4m174 28.7c-54 10.3-111.1 16.5-174 13.8v18.7c64 1.5 123.2-2.5 174-15.9zm0 35.3c-52 12.9-111.1 16.6-174 15.2v3.2c61.5 8.4 120.8 13.8 174 10.8zm-174 36.5v8.9c53.3 17 112.9 17.8 174 16.9v-15.1c-54.1 2.9-113.2-2.3-174-10.7m0 27.7v31.8c52.7 3.4 102.8-3.5 152.2-15.5c-52 .4-103.9-1.7-152.2-16.3m174 29.4c-55.7 14.7-113.1 24.3-174 20.5v16c57.6.2 114.8-1 174-14.2zm221.7 19a20.5 40.99 51.48 0 0-32.8 14.1a20.5 40.99 51.48 0 0-.2.1l-.6.6a20.5 40.99 51.48 0 0-8.9 8.5L265.9 497.5l176.3-115.9a20.5 40.99 51.48 0 0 13.1-8.5a20.5 40.99 51.48 0 0 19.3-41.5a20.5 40.99 51.48 0 0-12-4.7M452.5 342a10.25 20.5 51.48 0 1 .1 0a10.25 20.5 51.48 0 1 6 2.3a10.25 20.5 51.48 0 1-9.7 20.8a10.25 20.5 51.48 0 1-22.4 4.8a10.25 20.5 51.48 0 1 9.6-20.8a10.25 20.5 51.48 0 1 16.4-7.1m-211.6 6.6c-59.9 12.8-117.3 14-173.99 13.8c0 0 .41.9 3.71 2.8c3.91 2.2 10.75 4.6 19.24 6.5c16.94 3.8 40.54 5.8 64.04 5.8s47.1-2 64-5.8c8.5-1.9 15.4-4.3 19.3-6.5c3.4-2 3.7-3 3.7-2.8zM49.17 365.5c-3.1 1.6-5.74 3.1-7.82 4.7c-5.22 3.8-6.41 6.7-6.41 8.3s1.19 4.5 6.41 8.3c5.21 3.9 13.8 8 24.76 11.4c21.92 6.8 53.19 11.3 87.79 11.3s65.9-4.5 87.8-11.3c11-3.4 19.6-7.5 24.8-11.4c5.2-3.8 6.4-6.7 6.4-8.3s-1.2-4.5-6.4-8.3c-2.1-1.6-4.7-3.2-7.9-4.7c-1.2 6.9-6.7 12-12.5 15.3c-6.6 3.8-14.7 6.4-24.3 8.5c-19 4.2-43.4 6.2-67.9 6.2s-48.9-2-67.95-6.2c-9.51-2.1-17.68-4.7-24.26-8.5c-5.79-3.2-11.27-8.4-12.52-15.3'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    transform: rotate(52deg);
    -webkit-mask-size: 27px;
    transform-origin: center center;
    transition: all 0.5s;
    perspective-origin: center;
    width: 31px;
    height: 46px;
    display: block;
    right: 0;
    top: 0px;
}

.odic-btn span.icon:after {
    /* background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-scissors" viewBox="0 0 16 16"><path d="M3.5 3.5c-.614-.884-.074-1.962.858-2.5L8 7.226 11.642 1c.932.538 1.472 1.616.858 2.5L8.81 8.61l1.556 2.661a2.5 2.5 0 1 1-.794.637L8 9.73l-1.572 2.177a2.5 2.5 0 1 1-.794-.637L7.19 8.61zm2.5 10a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0m7 0a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0" /></svg>'); */
    /* transform: rotate(52deg) translate(-2px, 20px); */
    /* opacity: 0; */
    /* visibility: hidden; */
}

.odic-btn span.icon:before {
    /* opacity: 0; */
    /* visibility: hidden; */
}

.odic-btn:hover span.icon:before {
    /* transform: rotate(90deg); */
}

.odic-btn:hover span.icon:before {
    /* transform: rotate(52deg) translate(2px, -20px); */
    /* opacity: 0; */
    /* visibility: hidden; */
}

.odic-btn:hover span.icon:after {
    /* transform: rotate(52deg) translate(0px, 0px); */
    /* opacity: 1; */
    /* visibility: visible; */
}

@media (max-width: 575px) {
    .odic-btn {
        /* padding: 18px 30px; */ font-size: 15px;
    }

    .form-job .odic-btn {
        padding: 16px 37px !important;
        font-size: 14px !important;
    }
}

.odic-btn i {
    font-size: 15px;
    margin-left: 6px;
}

@media (max-width: 575px) {
    .odic-btn i {
        font-size: 14px;
    }
}

.odic-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.odic-btn:hover:not(:disabled) {
    background-color: var(--color-2);
    color: #fff;
}

.odic-btn-bordered {
    border: 2px solid #fff;
    background-color: transparent;
    color: #fff;
    padding: 18px 40px;
}

@media (max-width: 575px) {
    .odic-btn-bordered {
        padding: 16px 30px;
    }
}

.odic-btn-bordered:hover {
    border-color: var(--color-heading);
}

.odic-btn-white {
    background-color: #fff;
    color: var(--color-heading);
}

.odic-btn-white:hover {
    background-color: var(--color-heading);
    color: #fff;
}

.odic-btn-primary {
    background-color: var(--color-primary);
}

.odic-btn-tertiary {
    background-color: var(--color-tertiary);
}

.odic-btn-tertiary:hover {
    background-color: var(--color-fourth);
}

.odic-btn-fourth {
    background-color: var(--color-fourth);
}

.odic-btn-fourth:hover {
    background-color: var(--color-tertiary);
}

.btn-link:hover {
    text-decoration: none;
}

/*======= Hero Area One =======*/
.main-header.absolute-header:not(.inner-header) {
    background: #ffffff;
}

.hero-section {
    position: relative;
    z-index: 1;
    min-height: 100px;
    /* width: 95%; */
    /* margin: 10px auto 0; */
}

.hero-slider__content h1 {
    font-size: 55px;
    color: #fff;
    font-variation-settings: "wght"600;
    letter-spacing: -1px;
    line-height: 60.5px;
    font-family: var(--font-1);
}

.hero-section .container {
    z-index: 999;
}

.hero-slider {
    position: relative;
}

.hero-slider__content {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    z-index: 31;
    text-align: center;
    width: 100%;
    padding: 0 5px;
}

.hero-slider__content .title {
    font-size: 40px;
    color: var(--base-light);
    font-family: var(--font-2);
    margin-bottom: 20px;
}

.hero-slider__content h1 {
    font-size: 14px;
    color: #fff;
    font-variation-settings: "wght"600;
    letter-spacing: -1px;
    line-height: 60.5px;
    font-family: var(--font-1);
}

.hero-slider__content .hero-btns {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 10px 20px;
    padding-top: 10px;
}

.site-btn {
    --bg: #ffffff;
    --color: #000000;
    font-size: 17px;
    letter-spacing: 0.7px;
    font-family: var(--font-2);
    border-radius: 5px;
    background-color: var(--bg);
    color: var(--color);
    display: inline-block;
    padding: 16px 17px;
    min-width: 150px;
    transform: skew(-6deg, 0deg);
    border: var(--card-border) var(--bg);
    --fw: 500;
}

.site-btn--yellow {
    --bg: var(--base-color);
    --color: #000000;
}

.site-btn--yellow:hover {
    color: #fff;
    background-color: var(--accent-light);
    border-color: #87868647;
}

.site-btn:hover {
    --bg: #f70000;
    --color: #000000;
}

.site-btn--white {
}

.site-btn--white:hover {
    color: #fff;
    background-color: #161616;
    border-color: #87868647;
}

img.br {
    border-radius: 12px;
    overflow: hidden;
}

@media (max-width: 1199px) {
    .hero-section {
    }
}

@media (max-width: 991px) {
    .hero-section {
    }

    .hero-section:after {
        opacity: 80%;
        background: linear-gradient(to top, #fff, #ffffffde);
    }
}

.hero-section .hero-content {
    padding-right: 70px;
    position: relative;
    /* background: #ffffffe8; */
    padding: 27px 35px 32px;
    border-radius: 12px;
    padding-left: 0px;
}

.hero-section .hero-content p {
    font-size: 15px;
    line-height: 28px;
    color: #e0e0e0;
    font-weight: 500;
}

@media (max-width: 1199px) {
    .hero-section .hero-content {
        padding-right: 30px;
    }
}

@media (max-width: 991px) {
    .hero-section .hero-content {
        padding-right: 0;
        margin-bottom: 60px;
    }
}

.hero-section .hero-content::before {
    position: absolute;
    content: none;
    left: -60px;
    top: -60px;
    bottom: 0;
    width: 110px;
    border-radius: 55px;
    z-index: -1;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#499afa), color-stop(74%, rgba(208, 229, 254, 0.5)), to(rgba(255, 255, 255, 0)));
    background-image: -o-linear-gradient(top, #499afa 0%, rgba(208, 229, 254, 0.5) 74%, rgba(255, 255, 255, 0) 100%);
    background-image: linear-gradient(180deg, #fabc49 0%, rgba(208, 229, 254, 0.5) 74%, rgba(255, 255, 255, 0) 100%);
    opacity: 0.15;
}

@media (max-width: 1399px) {
    .hero-section .hero-content::before {
        left: -30px;
        top: -30px;
        width: 100px;
    }
}

@media (max-width: 575px) {
    .hero-section .hero-content::before {
        display: none;
    }
}

.hero-section .hero-content .title {
    font-size: 54px;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
    margin-bottom: 35px;
}

@media (max-width: 1199px) {
    .hero-section .hero-content .title {
        font-size: 72px;
    }
}

@media (max-width: 767px) {
    .hero-section .hero-content .title {
        font-size: 48px;
    }
}

@media (max-width: 575px) {
    .hero-section .hero-content .title {
        font-size: 52px;
    }
}

.hero-section .hero-content .odic-btn {
    margin-top: 30px;
}

@media (max-width: 1199px) {
    .hero-section::before {
        width: 40%;
    }
}

@media (max-width: 991px) {
    .hero-section::before {
        display: none;
    }
}

/*======= Hero Area Two =======*/
.hero-area-two {
    padding-top: 180px;
    padding-bottom: 180px;
    position: relative;
    z-index: 1;
}

@media (max-width: 991px) {
    .hero-area-two {
        padding-top: 140px;
        padding-bottom: 140px;
    }
}

@media (max-width: 424px) {
    .hero-area-two {
        padding-top: 130px;
        padding-bottom: 130px;
    }
}

.hero-area-two .hero-content {
    color: var(--color-heading);
}

.hero-area-two .hero-content .tagline {
    font-weight: 600;
    font-size: 22px;
    color: var(--color-secondary);
    line-height: 1.4;
    margin-bottom: 15px;
}

@media (max-width: 575px) {
    .hero-area-two .hero-content .tagline {
        font-size: 18px;
    }
}

.hero-area-two .hero-content .title {
    font-size: 95px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--color-primary);
    margin-bottom: 35px;
}

@media (max-width: 1199px) {
    .hero-area-two .hero-content .title {
        font-size: 76px;
    }
}

@media (max-width: 767px) {
    .hero-area-two .hero-content .title {
        font-size: 68px;
    }
}

@media (max-width: 575px) {
    .hero-area-two .hero-content .title {
        font-size: 48px;
    }
}

.hero-area-two .hero-content .odic-btn {
    margin-top: 30px;
}

.hero-area-two .hero-content p {
    max-width: 70%;
}

@media (max-width: 767px) {
    .hero-area-two .hero-content p {
        max-width: 100%;
    }
}

.section-heading .tagline {
    font-size: 17px;
    font-weight: 500;
    color: var(--base-dark);
    line-height: 1.2;
    margin-bottom: 12px;
    letter-spacing: 0.22px;
}

.section-heading .title {
    font-size: 45px;
    line-height: 1.2;
    letter-spacing: -2px;
    font-weight: 500;
}

.section-heading .title.light {
    color: #fff;
}

@media (max-width: 1199px) {
    .section-heading .title {
        font-size: 38px;
    }
}

@media (max-width: 991px) {
    .section-heading .title {
        font-size: 32px;
    }
}

@media (max-width: 575px) {
    .section-heading .title {
        font-size: 28px;
    }
}

.section-heading p {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-primary);
    line-height: 1.2;
    margin-top: 25px;
}

@media (max-width: 575px) {
    .section-heading p {
        font-size: 15px;
    }
}

.testimonial-slider-one .testimonial-inner {
    margin-top: 30px;
    margin: 0 auto;
    max-width: 800px;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .testimonial-slider-one .testimonial-inner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

@media (max-width: 575px) {
    .testimonial-slider-one .testimonial-inner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

.testimonial-slider-one .testimonial-inner .avatar {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 85px;
    flex: 0 0 85px;
    margin-right: 30px;
    margin: 0 auto 26px;
    display: none;
}

.testimonial-inner .avatar img {
    width: 85px;
    object-fit: cover;
    height: 85px;
    border-radius: 50%;
    border: 2px dashed var(--bs-color-1);
}

@media (min-width: 992px) and (max-width: 1199px) {
    .testimonial-slider-one .testimonial-inner .avatar {
        margin-bottom: 30px;
    }
}

@media (max-width: 575px) {
    .testimonial-slider-one .testimonial-inner .avatar {
        margin-bottom: 30px;
        margin-bottom: 2px;
    }
}

.testimonial-slider-one .testimonial-inner .testimonial-desc {
    font-size: 15px;
    /* font-style: italic; */
    font-family: var(--font-2);
    font-weight: 500;
    color: #6e593c;
    line-height: 1.75;
}

.content-wrap {
    flex: 1
}

@media (max-width: 1399px) {
    .testimonial-slider-one .testimonial-inner .testimonial-desc {
        font-size: 16px;
    }
}

@media (max-width: 575px) {
    .testimonial-slider-one .testimonial-inner .testimonial-desc {
        font-size: 20px;
    }
}

.testimonial-slider-one .testimonial-inner .author-info {
    margin-top: 25px;
    text-align: center;
}

.testimonial-slider-one .testimonial-inner .author-info .name {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    color: #414141;
}

.testimonial-slider-one .testimonial-inner .author-info .title {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-secondary);
    line-height: 1;
}

.testimonial-slider-one ul.slick-dots {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 70px;
    justify-content: center;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .testimonial-slider-one ul.slick-dots {
        padding-left: 0;
    }
}

@media (max-width: 575px) {
    .testimonial-slider-one ul.slick-dots {
        padding-left: 0;
        margin-top: 50px;
    }
}

.testimonial-slider-one ul.slick-dots li {
    height: 12px;
    width: 12px;
    background-color: rgb(255 255 255 / 73%);
    border-radius: 50%;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    cursor: pointer;
}

.testimonial-slider-one ul.slick-dots li button {
    font-size: 0;
    opacity: 0;
}

.testimonial-slider-one ul.slick-dots li:not(:last-child) {
    margin-right: 10px;
}

.testimonial-slider-one ul.slick-dots li.slick-active {
    background-color: var(--color-secondary);
}

.testimonial-one-wrap {
    padding: 0px 0%;
}

@media (max-width: 1599px) {
    .testimonial-one-wrap {
        padding: 30px 10%;
    }
}

@media (max-width: 1399px) {
    .testimonial-one-wrap {
        padding: 0px 0px;
    }
}

@media (max-width: 767px) {
    .testimonial-one-wrap {
        padding: 130px 5%;
    }
}

@media (max-width: 575px) {
    .testimonial-one-wrap {
        padding: 30px 13px;
    }
}

.testimonial-slider-arrow {
    margin-top: 60px;
    text-align: center;
}

.testimonial-slider-arrow .slick-arrow {
    width: 50px;
    height: 50px;
    border: none;
    font-size: 20px;
    color: var(--color-heading);
    border-radius: 50%;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    margin: 0 5px;
}

.testimonial-slider-arrow .slick-arrow.next-arrow, .testimonial-slider-arrow .slick-arrow:hover {
    background-color: var(--color-secondary);
    color: #fff;
}

.section-footer.have-cta-boxed-one .footer-inner {
    padding-top: 200px;
}

.contact-form .input-field {
    margin-bottom: 15px;
}

.contact-form .input-field label {
    font-size: 16px;
    font-family: var(--font-2);
    color: var(--color-heading);
    display: block;
    margin-bottom: 5px;
    line-height: 24px;
}

@media (max-width: 575px) {
    .contact-form .input-field label {
        font-size: 18px;
    }
}

.contact-form .input-field textarea {
    height: 115px;
}

/*======= Service Details =======*/
.service-details-wrapper {
    padding-left: 70px;
}

@media (max-width: 1199px) {
    .service-details-wrapper {
        padding-left: 0;
    }
}

.service-details-wrapper .service-title {
    font-size: 45px;
    margin-bottom: 30px;
}

@media (max-width: 991px) {
    .service-details-wrapper .service-title {
        font-size: 38px;
    }
}

@media (max-width: 575px) {
    .service-details-wrapper .service-title {
        font-size: 32px;
    }
}

.service-details-wrapper blockquote {
    color: var(--color-primary);
    font-family: var(--font-2);
    font-size: 22px;
    font-weight: 500;
    font-style: italic;
    line-height: 1.6;
}

@media (max-width: 575px) {
    .service-details-wrapper blockquote {
        font-size: 20px;
    }
}

.service-details-wrapper .check-list {
    max-width: 65%;
}

@media (max-width: 767px) {
    .service-details-wrapper .check-list {
        max-width: 100%;
    }
}

/*======= Section Half Bg =======*/
.section-have-half-bg {
    position: relative;
    z-index: 1;
}

.section-have-half-bg .section-half-bg {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 50%;
    background-size: cover;
    background-position: center;
}

@media (max-width: 991px) {
    .section-have-half-bg .section-half-bg {
        display: none;
    }
}

/*======= Footer =======*/
.section-footer {
    position: relative;
    z-index: 1;
    /* background-image: url('../images/bg/bg-footer.webp'); */
    background-color: #1f261e;
}

.section-footer .container {
    /* z-index: 1; */
    position: relative;
}

.section-footer .footer-widgets {
    padding-top: 80px;
    padding-bottom: 40px;
    color: #212121;
}

.section-footer .footer-widgets p {
    color: rgb(191, 191, 191);
    color: #d1d1d1;
    line-height: 26px;
    font-size: 16px;
    --fw: 400;
    letter-spacing: 0.5px;
    line-height: inherit;
}

.section-footer .footer-widgets .widget {
    margin-bottom: 31px;
}

.section-footer .footer-widgets .widget, .section-footer .footer-widgets .widget ul a {
    display: inline-block;
    color: #d1d1d1;
    font-family: var(--font-3);
    font-size: 16px;
    --fw: 500;
    letter-spacing: 0.5px;
    line-height: 34px;
}

.widget-products a {
    line-height: 43px !important;
    display: block;
}

.section-footer .footer-widgets .widget a:hover {
    color: var(--base-color);
}

.section-footer .footer-widgets .widget-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 25px;
    color: #f5f5f7;
    letter-spacing: 0.6px;
    line-height: 27px;
    --fw: 600;
}

.footer-titleb {
    position: relative;
}

.footer-titleb:before {
    content: '';
    position: absolute;
    width: 52px;
    border-bottom: 2px solid var(--base-dark-light);
    display: inline-block;
    padding-bottom: 11px;
    height: 3px;
    bottom: -15px;
}

@media (max-width: 991px) {
    .section-footer .footer-widgets .widget-title {
        margin-bottom: 30px;
    }
}

.section-footer .footer-widgets .widget .footer-logo {
    margin-bottom: 10px;
    max-width: 90px;
    background-color: #fff;
    display: none;
}

.section-footer .footer-widgets .widget.instagram-widget .widget-title {
    margin-bottom: 45px;
}

@media (max-width: 991px) {
    .section-footer .footer-widgets .widget.instagram-widget .widget-title {
        margin-bottom: 40px;
    }
}

@media (max-width: 767px) {
    .section-footer .footer-widgets .widget.instagram-widget .widget-title {
        margin-bottom: 30px;
    }
}

@media (min-width: 1200px) {
    .section-footer .footer-widgets .widget.text-widget {
        margin-right: 40px;
    }
}

.section-footer .footer-widgets .widget.text-widget .contact-list {
    margin-top: 25px;
    font-family: var(--font-3);
}

.section-footer .footer-widgets .widget.text-widget .contact-list li {
    font-size: 18px;
    font-family: var(--font-2);
    line-height: 1.4;
}

.section-footer .footer-widgets .widget.text-widget .contact-list li i {
    color: var(--base-dark);
    font-size: 20px;
    margin-right: 12px;
}

.contact-list li {
    line-height: 38px !important;
}

.section-footer .footer-widgets .widget.text-widget .contact-list li:not(:last-child) {
    margin-bottom: 8px;
}

.section-footer .footer-widgets .widget .nav-links li {
    line-height: 1.5;
}

.section-footer .footer-widgets .widget .nav-links li:not(:last-child) {
    margin-bottom: 14px;
}

.section-footer .copyright-area p {
    font-size: 14px;
    text-align: center;
    line-height: 1.6;
    padding: 30px 0 20px;
    color: #f5f5f5;
    letter-spacing: 0.5px;
}

.footer-bottom {
    border-top: 1px solid #87868647;
}

/*  */
.swiper-banner {
    width: 100%;
    margin: 0 auto;
    /* padding-top: 15px; */
    /* padding-bottom: 10px; */
}

.swiper-banner .swiper-slide {
    background-position: center;
    background-size: cover;
    /* width: 320px; */
    /* background-color: #fff; */
    overflow: hidden;
}

.swiper-banner .picture {
    width: 100%;
    /* height: 320px; */
    overflow: hidden;
    /* background-color: #f6f6f6; */
    transition: all 0.2s;
    object-fit: inherit;
    position: relative;
}

/* animation text */
.swiper-banner h3 {
}

.swiper-slide-active h3 {
}

/*  */
.swiper-banner .picture img {
    position: relative;
    z-index: 1;
}

@keyframes skelton {
    to {
        left: 100%;
    }
}

.swiper-banner .picture img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    filter: brightness(0.6);
    min-height: 548px;
    max-height: 726px;
}

.swiper-banner .picture:after {
    content: '';
    position: absolute;
    background: #0000005c;
    inset: 0;
    top: 0;
    z-index: 1;
    pointer-events: none;
}

.swiper-slide-active .picture {
}

.swiper-banner .detail {
    padding: 15px 20px;
    font-weight: 600;
    text-align: center;
    position: relative;
    z-index: 1;
}

.swiper-banner .detail h3 {
    margin: 0;
    font-size: 21px;
    font-weight: 500;
    color: var(--base-dark-2);
}

.swiper-banner .detail span {
    display: block;
    font-size: 16px;
    color: #f44336;
}

.swiper-scrollbar {
    display: none !important;
}

/* float button */
.float-button {
    position: fixed;
    right: 20px;
    bottom: 109px;
    z-index: 10;
    width: 50px;
    height: 50px;
    background: var(--color-4);
    color: #fff;
    font-size: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 5px;
    -webkit-transform: translateY(84px);
    -ms-transform: translateY(84px);
    transform: translateY(84px);
}

body.body-scrolled .float-button {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}

.float-button:hover::before {
    animation-play-state: paused;
}

.float-button::before {
    content: '';
    position: absolute;
    /* border: 2px dashed #0c4d83; */
    border-radius: 50%;
    /* transform: scale(1); */
    width: 120%;
    height: 120%;
    animation: pulse 2s infinite;
    background-color: var(--base-dark);
    /* transform: scale(0); */
    z-index: -1;
}

@keyframes pulse {
    0%, 40% {
        box-shadow: 0 0 0 0px rgb(28 121 102);
    }

    100% {
        box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
    }
}

.float-button:hover {
    color: #fff;
}

.float-label {
    display: none;
}

@media (min-width: 991px) {
    .float-label {
        position: absolute;
        /* width: 100%; */
        transform: translateX(-100%);
        /* background: var(--base-dark); */
        display: block;
        width: 139px;
        font-size: 13px;
        text-align: center;
        padding: 4px 0;
        border-radius: 20px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease-in;
    }

    .float-button:hover .float-label {
        visibility: visible;
        transform: translateX(-88%);
        opacity: 1;
    }
}

.ab-img {
    position: absolute;
    bottom: 0%;
    right: -5%;
    /* z-index: 0; */
    pointer-events: none;
    max-width: 320px;
}

.ab-img img {
    /* opacity: 10%; */
    /* transform: scale(-1,1); */
    /* filter: drop-shadow(2px 4px 6px rgb(0,0,0,0.5)) saturate(20%); */
}

@media (max-width: 576px) {
    .float-button {
        width: 50px;
        height: 50px;
    }

    .back-to-top {
        right: 24px;
    }

    .hero-section {
    }

    .hero-content {
        padding: 5px 12px 14px !important;
    }

    .hero-section .hero-content .title {
        font-size: 31px;
        margin-bottom: 10px;
    }

    .hero-section .hero-content .odic-btn {
        margin-top: 20px;
    }

    .hero-section .hero-content {
        padding-right: 0;
        margin-bottom: 15px;
    }

    .swiper-container {
    }

    .section-gap {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

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

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

.spin {
    animation: spin 2s linear 0s infinite reverse;
    -moz-animation: 2s linear 0s reverse none infinite spin;
    -webkit-animation: spin 2s linear 0s infinite reverse;
    animation: spin 2s linear 0s infinite reverse;
}

.body-wrapper {
    overflow-x: hidden;
    position: relative;
}

.section-have-half-bg {
    position: relative;
    z-index: 1;
    background-size: cover;
    background-position: top;
    background-color: #f8f5f1;
    background-blend-mode: multiply;
}

.testimonial-one-wrap {
    /* background: #ffffffe8; */
    border-radius: 13px;
    text-align: center;
}

.section-svg:after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20vw;
    background: url("") green;
    background-size: 100%;
    transform: translate(0, 100%);
    background-color: #FFD2B0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 1185 248'><circle cx='76' cy='121.1' r='20' class='a'/><circle cx='870' cy='201.1' r='11' class='a'/><circle cx='814.5' cy='165.6' r='24.5' class='a'/><path d='M0 0v17.7c22.7 14.8 53 31.9 90.7 51.5 150.8 78 322 116.6 424.8 69.3 102.9-47.4 138-69.3 210.8-69.3s118.3 48.6 219.5 38.3 76.3-59.3 188.7-59.3c18.9 0 35.5 2.6 50.5 6.8V0H0z' class='a'/></svg>");
}

.section-product {
}

.section-product h2 {
}

.section-product ul {
}

.section-product ul li {
    margin-bottom: 9px;
    display: flex;
    align-items: center;
}

.section-product ul i {
    padding-right: 10px;
    font-size: 20px;
    color: #0c4d83;
    opacity: 0.6;
}

.section-product ul span {
    /* font-size: 16px;
    color: #4f4f50;
    font-weight: 500; */
    font-size: 14px;
    color: #4f4f50;
    font-weight: 400;
    font-family: var(--font-3);
}

.section-product img {
    border-radius: 12px;
    background: #fff;
    padding: 12px;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important;
    opacity: 0.7;
}

.section-product a.btn-link {
}

.odic-feature-item {
    border: 1px solid #f6f6f6;
    margin-bottom: 30px;
    padding: 40px 30px 35px;
    box-shadow: 0 16px 32px 0 rgba(7, 28, 31, 0.1);
}

.odic-feature-icon {
    margin-bottom: 20px;
    font-size: 60px;
    line-height: 1;
    color: #0A9A73;
}

.odic-feature-icon img {
    width: 75px;
}

.odic-feature-info h3 {
    color: #cccccc;
    clear: both;
    font-family: var(--font-3);
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 15px;
    font-size: 17px;
}

.odic-feature-info h3 a {
    color: #75756e;
}

.odic-feature-info p {
    font-size: 14px;
    margin-bottom: 0;
}

.swiper-clients .picture {
    /* background-color: #f0f0f0; */
    margin: 7px;
    border: 1px solid #98ead5;
}

.swiper-client {
    margin: 10px;
    padding: 7px;
    border: 1px solid #7a99b8;
}

.swiper-clients img {
    width: 100%;
    height: 98px;
    object-fit: contain;
}

.swiper-clients img:hover {
    filter: saturate(1);
    opacity: 100%;
}

#page-title {
    background: #f4f4f4;
}

.core-product {
}

.core-product img {
    width: 75px;
}

.core-product h5 {
    color: rgb(7 7 7 / 76%) !important;
    font-size: 21px;
    font-weight: 500;
}

.p-core-body {
    flex: 1;
}

.gallery_wrap {
    overflow: hidden;
    position: relative;
    border: 1px solid #c5c5c5;
    padding: 10px;
}

.gallery_wrap a {
}

.gallery_icon {
    position: absolute;
    bottom: 8px;
    right: 7px;
    cursor: pointer;
}

/*  */
.about_footer {
    flex: 1;
    align-items: flex-start;
    margin-bottom: 3em;
}

.about_footer img {
    width: 75px;
    margin-right: 1rem;
}

.about_footer .ab_f_desc p {
    text-align: justify;
}

.about-ul p {
    /* "" */
    position: relative;
    padding-left: 22px;
    margin-left: 3px;
}

.about-ul p:before {
    content: "\f192";
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    left: 0;
    position: absolute;
}

/*  */
.section-innerbanner {
    background-image: url('../images/bg/banner-inner.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #353535f2;
    background-blend-mode: multiply;
    background-position: 0 -110px;
    text-align: center;
    padding: 100px 0;
}

.innerbanner-title {
    color: var(--base-color);
    font-size: 39px;
    font-family: var(--font-1);
    /* text-transform: uppercase; */
}

/* 
.p_item li{
    position: relative;
    padding-left: 18px;
    margin-left: 3px;
} */
.p_item li {
    position: relative;
    padding-left: 18px;
    margin-left: 3px;
    color: #6c6c6c;
    font-family: var(--font-3);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 2px;
}

.p_item li::before {
    content: "\f192";
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    left: 0;
    top: 50%;
    position: absolute;
    font-size: 11px;
    transform: translateY(-50%);
}

.ct-breadcrumb {
    justify-content: center;
}

.product-cat-img .p_item {
    border: 1px solid #b8b8b836;
    border-radius: 8px;
    padding-bottom: 10px;
}

.product-cat-img .p_item:hover img {
    /* filter: grayscale(1.5); */
}

.site-logo img {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: bicubic;
}

@media (max-width: 768px) {
    .site-logo img {
        /* max-width: 180px; */
    }
}

@media (min-width: 768px) {
    .site-logo img {
        /* width: 50%; */ max-width: 111px;
    }
}

.section-gray-1 {
    background: #f3f9ff;
}

.form-job {
}

.form-grp {
    margin-bottom: 15px;
}

.form-job label {
    font-family: var(--font-3);
    font-weight: 500;
    color: #646464;
    font-size: 14px;
}

.form-job .form-control {
}

.req-error {
    border: 1px solid #f44336 !important;
}

.button-title {
    --color-btn: #05c904;
}

.button-title h2 {
    flex: 1;
}

.download-btn a {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-btn);
    background: var(--color-btn);
    color: #fff;
    padding: 0.2rem 0.3rem;
    border-radius: 26px;
    -webkit-transition: all 300ms ease, transform 100ms ease;
    -moz-transition: all 300ms ease, transform 100ms ease;
    -ms-transition: all 300ms ease, transform 100ms ease;
    -o-transition: all 300ms ease, transform 100ms ease;
    transition: all 300ms ease, transform 100ms ease;
}

.download-btn a:hover, .download-btn a:focus {
    color: var(--color-btn);
    background: #fff;
}

.download-btn a:focus {
    transform: scale(0.9);
}

.download-btn a i {
    width: 40px;
    height: 40px;
    background: var(--color-btn);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.download-btn a span {
    display: block;
    margin-right: 0.8rem;
    margin-left: 0.5rem;
    font-weight: 600;
    font-size: 15px;
    line-height: 27px;
}

@media (max-width: 768px) {
    .button-title h2 {
        margin-bottom: 15px;
    }
}

@media (min-width: 768px) {
    .button-title {
        --color-btn: #05c904;
        display: flex;
        align-items: center;
    }
}

.pdf_img_wrapper img {
    border: 1px solid #ebebeb;
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: bicubic;
}

@media (max-width: 768px) {
    .copyright-area {
        padding-bottom: 5rem !important;
    }
}

[id*="gb-widget"] a[type="link"] {
    display: none;
}

/*  */
.pointer {
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
    bottom: 39.5%;
    left: 14.5%;
}

.pointer-1 {
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
    bottom: 48.5%;
    left: 39%;
}

.pointer-2 {
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
    bottom: 40.8%;
    left: 48.4%;
}

.point:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    animation: map 1s linear infinite;
    border-radius: 50%;
    transition: .3s;
    z-index: -1;
}

@keyframes map {
    0% {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

    100% {
        top: -150%;
        left: -150%;
        width: 400%;
        height: 400%;
        opacity: 0
    }
}

.c-form {
    background-color: #ffffff;
    height: 100%;
    background: rgb(255 255 255 / 81%);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
    backdrop-filter: blur(11.2px);
    -webkit-backdrop-filter: blur(11.2px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

@media (max-width: 768px) {
    .section-footer .footer-widgets {
        padding-top: 23px;
        padding-bottom: 30px;
    }
}

span.link {
    position: relative;
    font-weight: 500;
    color: #000;
}

.title-anim {
}

.about-section {
    padding-bottom: 70px;
}

.ab-overlay {
    position: absolute;
    bottom: -220px;
    opacity: 50%;
    pointer-events: none;
}

.ab-overlay img {
    opacity: 70%;
}

.social {
    display: flex;
    gap: 10px 20px;
    margin-top: 2rem;
}

.social a {
    font-size: 23px;
    display: block;
    background-color: #7d5a22;
    color: #ffffff;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 50px;
}

.social a:hover {
    background-color: var(--base-color);
    color: #fff !important;
}

.float-icon {
    /* animation: ring 480ms infinite; */
    /* color: var(--color-heading); */
}

@keyframes ring {
    0% {
        transform: translateX(0)
    }

    55% {
        transform: translateX(5px)
    }

    60% {
        transform: translateX(-5px)
    }

    75% {
        transform: translateX(5px)
    }

    100% {
        transform: translateX(0)
    }
}

.sec-clients {
    padding: 100px 0px;
}

/*  */
.bd-offer {
    overflow: hidden;
    position: relative;
    margin-bottom: 11px;
    cursor: pointer;
}

.bd-offer__thumb {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    overflow: hidden;
}

.bd-offer__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -ms-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s;
}

.bd-offer__meta {
    position: absolute;
    top: 30px;
    inset-inline-start: 30px;
}

.bd-offer__content-visble {
    border: 1px solid #ddd;
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -ms-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s;
    text-align: center;
    text-transform: capitalize;
    display: none;
}

.bd-offer__content {
    border: 2px dashed #d9d9d9;
    border-top: 0;
    text-align: center;
    /* background: #f8f5f0; */
    background-color: #ffffff17;
    -webkit-transition: all 0.4s ease-out 0s;
    -moz-transition: all 0.4s ease-out 0s;
    -ms-transition: all 0.4s ease-out 0s;
    -o-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
    /* position: absolute; */
    bottom: 0px;
    /* opacity: 0; */
    /* visibility: hidden; */
    width: 100%;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.bd-offer__title {
    text-transform: capitalize;
    position: relative;
    padding: 16px 35px 9px;
    font-weight: 600;
    font-size: 20px;
}

.bd-offer__content p {
    padding: 0 25px;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 11px;
}

.bd-offer__btn {
    height: 60px;
    border-top: 1px solid #d9d9d9;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    margin-top: auto;
}

.bd-offer__btn a {
    font-weight: 500;
    font-size: 16px;
    line-height: 60px;
    color: var(--base-dark);
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.bd-offer__btn a:hover {
    color: var(--color-heading);
}

.bd-offer__title-2 {
    margin-bottom: 0;
    padding: 19px 10px;
    background-color: var(--bs-color-4);
    font-size: 18px;
    letter-spacing: 0.25px;
}

.bd-offer__title-2 a {
    color: hsl(36.12deg 38.95% 26.92%);
    font-weight: 500;
}

.bd-offer:hover .bd-offer__thumb img {
    transform: scale(1.1);
}

.bd-offer:hover .bd-offer__content-visble {
    opacity: 0;
    visibility: hidden;
}

.bd-offer:hover .bd-offer__thumb .bd-offer__content {
    bottom: 0;
    transition: 0.3s;
    opacity: 1;
    visibility: visible;
    /* background: #f8f5f0f0; */
}

.bd-offer__thumb-overlay {
    position: relative;
}

.bd-offer__thumb-overlay:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #4c3a0c;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 0.2s;
    z-index: 0;
}

.bd-offer__thumb-overlay:after {
    content: '';
    position: absolute;
    display: inline-block;
    width: 65px;
    height: 65px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='m61.67 119.8l-12.69 68.3c-5.47 29.6-1.02 60.1 12.69 86.8h51.03V119.8zm68.63 0v115.6h2.9c6.2 0 11.2-5.1 11.2-11.3V119.8zm31.8 0v104.3c0 15.9-12.9 28.8-28.9 28.8h-2.9v81.7h14.9v-59.7h19.6s7.6-15.3 13.6-27.7c4.7-9.2 14.1-15.1 24.5-15.1h80.2c15 0 27.2 12.1 27.2 27.1v91.5H25.95l10.57 68.5H455.1l10.5-63.1l-21.1-236.3zm310.1 23.4c-4.9.4-8.5 4.7-8 9.5l4.3 47.4c.4 4.8 4.7 8.4 9.5 8c4.9-.4 8.4-4.8 8-9.6l-4.2-47.3c-.4-4.5-4.2-8-8.7-8zm-86.8.1c21.7 0 39.2 17.5 39.2 39.2s-17.5 39.2-39.2 39.2s-39.2-17.5-39.2-39.2s17.5-39.2 39.2-39.2m0 17.5c-11.9 0-21.7 9.8-21.7 21.7c0 12 9.8 21.7 21.7 21.7s21.7-9.7 21.7-21.7c0-11.9-9.8-21.7-21.7-21.7m0 89.9c26.6 0 48.2 21.7 48.2 48.2c0 26.6-21.6 48.2-48.2 48.2s-48.2-21.6-48.2-48.2c0-26.5 21.6-48.2 48.2-48.2m0 17.6c-16.9 0-30.6 13.7-30.6 30.6s13.7 30.5 30.6 30.5s30.5-13.6 30.5-30.5s-13.6-30.6-30.5-30.6M92.71 287.8v17.6h20.09v-17.6zM36.52 438.9v26.5H454.9v-26.5z'/%3E%3C/svg%3E");
    background-color: rgb(188 131 56);
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 41;
    transition: all 0.2s ease 0.1s;
}

.bd-offer:hover .bd-offer__thumb-overlay:after {
    opacity: 1;
}

.bd-offer:hover .bd-offer__thumb-overlay:before {
    opacity: 30%;
    z-index: 1;
}

.bd-offer:hover .overlay-pcard {
    background-color: #c99749;
}

.bd-offer:hover h4 {
    color: #ffffff;
}

.section-s {
    /* background-color: #949f8517; */
    padding: 60px 0px;
    --sec-bg: #ffffff;
    position: relative;
}

.section-book {
    position: relative;
    z-index: 1;
    /* background-image: url(../images/bg/bg-booking.webp); */
    background-color: #e0b87a;
    background-blend-mode: darken;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 50px 0px;
    background-attachment: fixed;
}

.section-book a {
    padding: 14px 30px 12px 30px;
}

.book-content h2 {
    color: #fff;
    font-size: 38px;
    color: #302c2d;
    margin-bottom: 0;
    line-height: 49px;
    font-family: var(--font-3);
}

.book-content p {
    color: #ffffffeb;
    font-size: 15px;
    letter-spacing: 0.35px;
}

.book-content {
}

.section-how {
    padding: 100px 0 50px;
}

.how-box {
}

.how-box .icon {
    /* border: 2px dashed var(--base-dark); */
    /* border-radius: 50%; */
    /* padding: 10px; */
    width: 100px;
    height: 100px;
    background-color: hsl(167 57% 92% / 1);
    border-radius: 50%;
    aspect-ratio: 1;
}

.how-box .icon svg {
    width: 100px;
    height: 100px;
    color: var(--base-dark);
    padding: 24px;
    margin: 0 auto;
    display: block;
    animation: popup 1.4s cubic-bezier(0.3, 0.39, 0.48, 0.64) infinite alternate;
}

@keyframes popup {
    0% {
        transform: scale(0.90)
    }

    30%, 100% {
        transform: scale(1.0)
    }
}

.how-box h2 {
    font-weight: 500;
    font-size: 24px;
    margin: 10px 0 10px;
    color: var(--base-dark);
}

.how-box {
    /* text-align: center; */
    display: flex;
    align-items: center;
    gap: 10px 10px;
    margin-bottom: 30px;
    border: 1px dashed #7a7a7a54;
    padding: 40px 30px;
}

.float-whatsapp {
    --space: 15px;
    background-color: #1d9e43;
    border-radius: 40px;
    bottom: 35px;
    color: #fff;
    display: flex;
    height: 60px;
    min-width: 60px;
    position: fixed;
    text-align: center;
    z-index: 10;
    align-items: center;
    justify-content: center
}

body.body-scrolled .float-whatsapp {
    /* -webkit-transform: translateY(0px); */
    /* -ms-transform: translateY(0px); */
    /* transform: translateY(-77px); */
}

.float-whatsapp:not(.float-whatsapp--left) {
    right: var(--space);
    flex-direction: row-reverse
}

.float-whatsapp--left {
    left: var(--space)
}

.float-whatsapp:hover {
    color: #fff
}

.float-whatsapp span.text {
    display: table-cell;
    vertical-align: middle;
    font-size: 14px;
    letter-spacing: -15px;
    opacity: 0;
    line-height: normal;
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 3px
}

@media (min-width: 567px) {
    .float-whatsapp {
        --space: 18px;
    }

    .float-whatsapp:hover {
        padding: 0 12px 0 20px
    }

    .float-whatsapp:hover span.text {
        opacity: 1;
        letter-spacing: 1px;
        padding-right: 10px
    }

    .float-whatsapp--left:hover span.text {
        opacity: 1;
        letter-spacing: 1px;
        padding-left: 10px
    }
}

@media (max-width: 768px) {
    .section-how {
        padding: 70px 0;
    }

    .section-book {
        padding: 70px 0px;
    }
}

.years-circle {
    position: absolute;
    top: 190px;
    left: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.years {
    width: 197px;
    height: 197px;
    -webkit-filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.1));
    filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.1));
    background-color: #ffffff;
    border-radius: 50%;
    text-align: center;
    font-size: 18px;
    line-height: 26px;
    color: #454456;
    font-weight: 400;
    padding-top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.years:before {
    position: absolute;
    content: '';
    z-index: -1;
    border: 2px dashed var(--color-5);
    top: 11px;
    left: 11px;
    right: 11px;
    bottom: 11px;
    border-radius: 50%;
    /* animation: rotate 10s linear infinite; */
}

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

.years .text {
    display: block;
    font-size: 24px;
    line-height: 26px;
    color: var(--color-3);
    font-weight: 400;
    font-family: "Crimson Text";
    margin-bottom: 1px;
}

.years .icon {
    font-size: 74px;
    line-height: 46px;
    color: var(--color-3);
    font-weight: 400;
    font-family: "Crimson Text";
    margin-bottom: 20px;
}

.site-logo img {
}

.site-logo img {
    transition: all 1s ease;
}

.aboverlay-circle {
    max-width: 290px;
    position: absolute;
    bottom: -10%;
    right: -20%;
}

.ab-overlay-2 {
    position: absolute;
    top: 0;
    opacity: 50%;
    pointer-events: none;
    z-index: 14;
    mix-blend-mode: darken;
    max-width: 480px;
}

.ab-overlay-2 img {
    opacity: 20%;
    pointer-events: none;
}

@media (max-width: 767px) {
    .about-section {
        padding-bottom: 20px;
        padding-top: 30px;
    }

    .years-circle {
        /*position: absolute;
        top: 190px;
        left: 0;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);*/
        right: -70px;
        z-index: 51;
        left: auto;
        top: 290px;
    }

    .years {
        width: 150px;
        height: 150px;
    }

    .years .icon {
        font-size: 64px;
        margin-bottom: 10px;
    }

    .aboverlay-circle {
        max-width: 240px;
        position: absolute;
        bottom: -20%;
        right: auto;
        left: 5%;
    }

    .ab-overlay {
        width: 570px;
        bottom: -270px;
    }

    .ab-overlay-2 {
        max-width: 380px;
        right: -120px;
        top: 10px;
    }
}

@media (max-width: 767px) {
    .how-box {
        flex-direction: column;
    }
}

/*  */
.section-breadcrumb {
    position: relative;
    z-index: 1;
    background-image: var(--img-url, url(../images/bg/breadcrumb-bg.webp));
    /* background-color: #232323de; */
    /* background-blend-mode: multiply; */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 30px 0px;
    /* background-attachment: fixed; */
}

.section-breadcrumb:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    top: 0;
    opacity: 70%;
}

.section-breadcrumb .container {
    position: relative;
    z-index: 1;
}

.breadcrumb-content {
    text-align: center;
}

.breadcrumb-content h2, .breadcrumb-content h1 {
    color: var(--base-dark-2);
    font-size: 30px;
    font-family: var(--font-2);
    font-weight: 300;
}

.breadcrumb-content ul {
    display: flex;
    justify-content: center;
    gap: 10px 10px;
    margin: 10px 0 0px;
    color: var(--base-2);
}

.breadcrumb-content ul li a, .breadcrumb-content ul li span {
    color: #d5d5d5;
}

.breadcrumb-content ul li a:hover {
    color: var(--base-dark-2)
}

/*  */
.about-g {
    background: linear-gradient(to bottom, transparent, #e8fffa73, transparent);
    padding: 40px 0;
    margin: 60px 0;
}

.contactus a {
    color: var(--base-dark);
    font-size: 18px;
    font-weight: 600;
}

/*  */
input.form-control {
    line-height: 37px !important;
    border-radius: 0 !important;
}

.form-control {
    border-radius: 3px;
    height: 52px;
    padding: .375rem 1rem;
    border: none;
    font-family: var(--font-3);
    font-size: 14px;
    margin-bottom: 10px;
    background-color: #ffffff;
}

.form-career .form-control {
    border: 1px solid #eee;
    outline: none;
}

.form-career .form-control.error {
    border-color: #f00;
}

/* -------------- */
.contact-card-box {
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: #7bbbad4d;
    padding: 40px;
    max-width: 731px;
}

.contact-card-box .contact-card-icon {
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 30px;
    width: 64px;
    height: 64px;
    background: #217966;
    border: none;
    border-radius: 50%;
    -webkit-transition: .3s;
    transition: .3s;
    color: #fff;
}

.contact-card-box .contact-card-text {
    max-width: 280px;
    margin: 0 auto
}

.contact-card-box .contact-card-text .contact-card-title {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 400;
    text-transform: capitalize;
    color: #000000eb;
}

.contact-card-box .contact-card-text .contact-card-desc {
    font-family: var(--font-2);
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0.25px;
    color: #000000d4;
}

.contact-card-desc a {
    color: var(--base-dark);
}

.contact-card-desc a:hover {
    color: var(--base-color)
}

.contact-card-box:hover .contact-card-icon {
    /* background: var(--primary-green); */
}

.contact-formwrap {
    background-color: var(--bs-color-2);
    padding: 20px 16px;
    border-radius: 15px;
}

.img-border {
    border-radius: 15px;
    overflow: hidden;
}

.img-border img {
    width: 100%;
    object-fit: cover;
}

.stitching-gall {
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 20px;
}

.stitching-gall img {
    object-fit: cover;
    aspect-ratio: 4/3;
}

/*  */
.ul-list {
    list-style: circle;
    padding-left: 17px;
}

.about-why {
    padding: 30px 35px 30px;
    border: 1px solid #d9d9d9;
    background-color: #f8f5f0;
}

.about-why h2 {
    margin-bottom: 10px;
}

.swal-footer {
    text-align: center;
}

/*  */
.home-welcome__video, .home-about__video {
    max-width: 600px;
    margin: 0 0 0px 0px;
    border-radius: 15px;
    overflow: hidden;
}

.play-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-40%) translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: var(--base-dark-2);
    border-radius: 50%;
    font-size: 0px;
}

.play-btn:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid #ffffff;
    z-index: 100;
    transition: all 400ms ease;
    transform-origin: center;
}

.play-btn:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    height: 100%;
    animation: pulse 2s ease-in-out infinite forwards;
    transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
    /* box-shadow: 0px 0px 0rem 6px rgb(255 255 255 / 22%); */
    border-radius: 50%;
    /* box-shadow: 0px 0px 1rem 19px rgb(255 255 255 / 89%); */
    transition: all 0.2s;
    /* background: red; */
}

@keyframes pulse {
    0%, 60% {
        box-shadow: 0px 0px 0rem 0px rgb(44 161 135);
    }

    100% {
        box-shadow: 0px 0px 1rem 30px rgb(255 255 255 / 0%);
    }
}

.about-video__wrap {
    position: relative;
}

.about-video__wrap img {
    filter: brightness(80%);
    aspect-ratio: 4/2.5;
    object-fit: cover;
}

.overlay-before, .overlay-after {
    content: '';
    position: absolute;
}

@media only screen and (min-width: 991px) {
    .play-btn {
        width: 80px;
        height: 80px;
    }

    .play-btn:after {
        border-top: 13px solid transparent;
        border-bottom: 13px solid transparent;
        border-left: 17px solid #ffffff;
    }

    .section-breadcrumb {
        padding: 50px 0px;
    }

    .breadcrumb-content h2, .breadcrumb-content h1 {
        font-size: 50px;
    }

    body p {
        font-size: 16px;
    }
}

@media only screen and (min-width: 1200px) {
    .about-flex {
        display: flex;
    }

    .about-left {
        flex: 1;
    }

    .about-right__img {
        float: right;
        margin-left: 41px;
    }

    .section-footer .footer-widgets .widget {
        margin-bottom: 11px;
    }

    .hero-section .hero-content p {
        font-size: 18px;
        color: #ffffff;
    }

    .section-breadcrumb {
        padding: 80px 0px;
    }

    .contact-formwrap {
        padding: 28px 36px;
    }
}

@media only screen and (min-width: 1500px) {
    .container-1400 {
        max-width: 1400px;
    }
}

/* needle */
.pane {
    --pane-size: 16rem;
    --sm-pane-size: 12rem;
    --light-gray: #eaeaea;
    --dark-gray: #aeaeae;
    --stitching-background: #ffffff;
    /* cut pane */
    --scissors: #fba919;
    --scissors-shadow: #ee972c;
    --scissor-duration: 2s;
    /* pin pane */
    --fabric-transforms: translate(100%, 100%) scale(1);
    /* needle pane */
    --thread: indianred;
    --bottom-cloth: white;
    --top-margin: 2rem;
    --needle-duration: 0.5s;
}

.pane {
    display: block;
    overflow: hidden;
    min-width: var(--pane-size);
    max-width: var(--pane-size);
    min-height: var(--pane-size);
    max-height: var(--pane-size);
    background-color: white;
    font-size: 1.2rem;
}

@media only screen and (max-width: 56rem) {
    .pane {
        min-width: var(--sm-pane-size);
        max-width: var(--sm-pane-size);
        min-height: var(--sm-pane-size);
        max-height: var(--sm-pane-size);
    }
}

@media only screen and (max-width: 44rem) {
    .pane {
        margin-bottom: 1.5rem;
        min-width: var(--pane-size);
        max-width: var(--pane-size);
        min-height: var(--pane-size);
        max-height: var(--pane-size);
    }
}

/**
Pane 2
**/
#pane2 {
    background-color: var(--stitching-background);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#pane2:hover::after {
    opacity: 1;
}

#pane2::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 50%;
    background-color: var(--bottom-cloth);
    bottom: 0;
}

#pane2 .machine-top {
    position: absolute;
    left: 0;
    top: 0;
    height: 1rem;
    width: 70%;
    background-color: var(--dark-gray);
}

#pane2 .machine-top::before {
    content: '';
    display: block;
    position: absolute;
    border-bottom-right-radius: 40%;
    border-bottom-left-radius: 10%;
    top: 0;
    right: 0;
    border: var(--top-margin) outset var(--dark-gray);
    border-top: 0;
    height: 0;
    width: 20%;
    background-color: var(--light-gray);
}

#stitching_group {
    width: 100%;
    min-height: inherit;
    position: relative;
    left: 0;
    top: var(--top-margin);
}

#pane2 .stitch {
    margin-top: 0.5rem;
    background-color: transparent;
    width: 4rem;
    border-radius: 50%;
    border: 0.2rem solid var(--thread);
    clip-path: inset(0 0 50% 0);
    transform-origin: center left;
    animation: borderStitching var(--needle-duration) infinite ease-in;
    position: absolute;
    margin-top: var(--top-margin);
}

@keyframes borderStitching {
    0% {
        transform: translateX(2.5rem);
        border-radius: 0;
        height: 0;
        clip-path: inset(0 100% 50% 0);
    }

    10% {
        transform: translateX(2.4rem);
        border-radius: 0;
        height: 0;
        clip-path: inset(0 99% 50% 0);
    }

    15% {
        width: 0.2rem;
        transform: translateX(2.4rem) scaleY(1.8);
        border-radius: 0;
        height: 0.5rem;
        clip-path: inset(0 99% 52% 0);
    }

    50% {
        transform: translateX(0rem) scaleY(2);
        width: 4rem;
        height: 2.2rem;
        border-radius: 50%;
        border: 0.15rem solid var(--thread);
        border-top-right-radius: 0;
        border-right: 0;
        border-bottom: 0;
        clip-path: inset(0 40% 50% 0);
    }

    75% {
        transform: translateX(-1.9rem) scaleY(1);
        width: 4rem;
        height: 1rem;
        border-top-left-radius: 50%;
        border: 0.2rem solid var(--thread);
        border-right: 0;
        clip-path: inset(0 0 0.35rem 0);
    }

    90% {
        transform: translateX(-1.9rem);
        width: 4rem;
        height: 0.6rem;
        border-radius: 20%;
        border: 0.2rem solid var(--thread);
        clip-path: inset(0 0 0.35rem 0);
    }

    100% {
        transform: translateX(-2.2rem);
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        height: 0.5rem;
    }
}

#pane2 .sewing-machine {
    position: absolute;
    top: 0;
    animation: stitchingNeedle var(--needle-duration) infinite ease-in;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

#pane2 .sewing-machine .needle {
    position: relative;
    box-sizing: border-box;
    width: 1rem;
    height: 70%;
    clip-path: polygon(0 0, 0 80%, 50% 100%, 100% 80%, 100% 50%, 100% 0, 51% 0, 51% 75%, 62% 80%, 51% 85%, 39% 80%, 51% 75%, 51% 0);
}

@keyframes stitchingNeedle {
    0% {
        transform: translateY(0.2rem) scaleY(1.1);
    }

    50% {
        transform: translateY(-3.2rem);
    }

    75% {
        transform: translateY(-1.5rem);
    }

    90% {
        transform: translateY(-0.5rem);
    }

    100% {
        transform: translateY(0.2rem) scaleY(1.1);
    }
}

#pane2 .needle-left-half {
    position: absolute;
    left: 0;
    background-color: var(--dark-gray);
    width: 50%;
    height: 100%;
    z-index: 1;
}

#pane2 .needle-right-half {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    height: 100%;
    width: 50%;
    background-color: var(--light-gray);
}

#pane2 .sewing-machine .top-thread {
    position: absolute;
    margin-left: -0.15rem;
    top: -0.4rem;
    height: 60%;
    width: 1.4rem;
    border: 0.2rem solid var(--thread);
    border-bottom-right-radius: 50%;
    border-top: 0;
    border-left: 0;
    clip-path: inset(0 0 0 54%);
    animation: topThread var(--needle-duration) infinite ease-in;
}

@keyframes topThread {
    0% {
        width: 1.4rem;
        border-bottom-right-radius: 50%;
    }

    50% {
        width: 2.5rem;
        border-bottom-right-radius: 40%;
    }

    90% {
        width: 1.5rem;
        border-bottom-right-radius: 50%;
        clip-path: inset(0 0 0 48%);
    }
}

.bottom-cloth {
    position: absolute;
    left: 0;
    bottom: 0.25rem;
    width: 100%;
    height: 50%;
}

.bottom-cloth::before {
    content: '';
    display: block;
    height: 0.5rem;
    width: 50%;
    background-image: linear-gradient(0.25turn, var(--thread), var(--thread) 4rem, transparent 4rem);
    background-size: 12rem 0.25rem;
    background-position: 4rem;
    background-repeat: repeat-x;
    animation: stitchline var(--needle-duration) infinite ease-out;
}

@keyframes stitchline {
    0% {
        background-position: 4rem;
    }

    50% {
        background-position: 0rem;
    }

    100% {
        background-position: -4rem;
    }
}

.bottom-cloth::after {
    content: '';
    display: block;
    width: 100%;
    height: 49%;
    bottom: 0;
    animation: stitchingHole var(--needle-duration) infinite ease-in;
}

@keyframes stitchingHole {
    0% {
        background-image: radial-gradient(ellipse at 50% 0%, transparent, transparent 0.45rem, #c45d49 0.55rem, var(--bottom-cloth) 0.55rem);
    }

    20% {
        background-image: radial-gradient(ellipse at 50% 0%, transparent, transparent 0.15rem, #c45d49 0.35rem, var(--bottom-cloth) 0.35rem);
    }

    30% {
        background-image: radial-gradient(ellipse at 50% 0%, transparent, transparent 0.1rem, #c45d49 0.15rem, var(--bottom-cloth) 0.15rem);
    }

    50% {
        background-image: none;
    }

    70% {
        background-image: radial-gradient(ellipse at 50% 0%, transparent, transparent 0.15rem, #c45d49 0.2rem, var(--bottom-cloth) 0.2rem);
    }

    80% {
        background-image: radial-gradient(ellipse at 50% 0%, transparent, transparent 0.25rem, #c45d49 0.35rem, var(--bottom-cloth) 0.35rem);
    }

    90% {
        background-image: radial-gradient(ellipse at 50% 0%, transparent, transparent 0.35rem, #c45d49 0.45rem, var(--bottom-cloth) 0.45rem);
    }

    100% {
        background-image: radial-gradient(ellipse at 50% 0%, transparent, transparent 0.4rem, #c45d49 0.5rem, var(--bottom-cloth) 0.5rem);
    }
}

/* anim */
.sewing-stuff, .sewing-stuff *::before, .sewing-stuff *::after {
    margin: 0;
    content: "";
    box-sizing: border-box;
}

.sewing-stuff {
    --color-1: #998066;
    width: 450px;
    align-items: flex-end;
    justify-content: space-around;
    transform: translateY(-3px);
    display: flex;
    margin: 0 auto;
}

.table {
    border-bottom: 5px solid #87868647;
    margin: 0 auto;
    background-color: #f5f5f7;
}

.tape-top {
    height: 11px;
    width: 34px;
    border-radius: 2px 0 0 1px;
    background-color: #fff896;
    box-shadow: 0 2.75px #fdde51;
}

.tape-top::before, .tape-top::after {
    position: absolute;
}

.tape-top::before {
    height: 5.5px;
    width: 34px;
    background-image: repeating-linear-gradient(to right, transparent, transparent 11%, #5796e9 11%, #5796e9 16%);
}

.tape-top::after {
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 14.3px 0 0 14.3px;
    border-color: transparent transparent transparent #fdde51;
    margin-left: 34px;
}

.tape-bottom {
    height: 49.3px;
    width: 11px;
    position: absolute;
    background-color: #fff896;
    margin-left: 34px;
    margin-top: 3.3px;
    box-shadow: 2.75px 0 #fdde51;
}

.tape-bottom::before, .tape-bottom::after {
    content: "";
    position: absolute;
}

.tape-bottom::before {
    height: 47.6px;
    width: 55%;
    background-image: repeating-linear-gradient(to bottom, transparent, transparent 10%, #5796e9 10%, #5796e9 13%);
}

.tape-bottom::after {
    height: 11px;
    width: 11px;
    margin-top: 49.3px;
    border-radius: 0 0 1px 1px;
    box-shadow: 2.75px 0 #a5a4a4;
    background-color: #666666;
    border: 2.2px solid #c2c2c2;
}

.pin-cushion {
    height: 6px;
    width: 50px;
    position: relative;
    border-radius: 1px 1px 1px 1px;
    background-color: #fffefb;
    box-shadow: 0 3px #5796e9;
}

.pin-cushion::before {
    content: "";
    position: absolute;
    z-index: 1;
    height: 22.5px;
    box-shadow: 0 4px #eea0cd;
    width: 45px;
    background-color: #ffd1f8;
    border-radius: 10em 10em 0 0;
    transform: translateY(-27px) translateX(2.4px);
}

.pins {
    display: flex;
    z-index: 5;
    position: absolute;
    justify-content: space-around;
    transform: translateY(-30px);
}

.pin {
    z-index: 5;
    margin-right: 8.5px;
    height: 20px;
    width: 1px;
    background-image: linear-gradient(to bottom, gray, #cfcfcf);
}

.pin::before {
    position: absolute;
    display: flex;
    height: 4px;
    width: 4px;
    border-radius: 50%;
    background-color: #5796e9;
    transform: translateX(-1.4px) translateY(-4px);
}

.pin:nth-child(1) {
    transform: rotate(-35deg) translateY(5px);
}

.pin:nth-child(2) {
    transform: rotate(-20deg);
}

.pin:nth-child(3) {
    transform: rotate(-9deg) translateY(-3px);
}

.pin:nth-child(4) {
    transform: rotate(3deg) translateY(-3px);
}

.pin:nth-child(5) {
    transform: rotate(20deg) translateY(-1px);
}

.pin:nth-child(6) {
    transform: rotate(35deg) translateY(5px);
}

.thread {
    height: 25px;
    width: 16px;
    transform: translateX(142px);
    background-image: repeating-linear-gradient(35deg, #5796e9, #5796e9 0 5%, #fff896 5% 10%);
}

.thread::before {
    display: flex;
    height: 25px;
    width: 19.52px;
    border-radius: 0.5px;
    transform: translateX(-2px);
    border-radius: 2px;
    background-image: linear-gradient(to bottom, #b8a0a0 0 10%, #8f7777 10% 20%, transparent 20% 80%, #b8a0a0 80% 90%, #8f7777 90%);
}

.thread::after {
    display: flex;
    height: 1px;
    width: 105px;
    background-color: #5796e9;
    transform: translateX(-104px) translateY(-9.5px) rotate(-9.5deg);
}

.needle {
    position: absolute;
    height: 20px;
    width: 3.5px;
    background-color: #ffd1f8;
    transform: translateY(61px) translateX(20.4545454545px);
}

.needle::before {
    display: flex;
    height: 18px;
    width: 8px;
    border-radius: 0.5px;
    transform: translateX(-2px) translateY(3px);
    background-image: linear-gradient(to bottom, #3d3d3d 0 20%, transparent 20% 85%, #3d3d3d 85%);
}

.needle::after {
    display: flex;
    height: 15px;
    width: 1px;
    background-color: #3d3d3d;
    transform: translateY(2px) translateX(1.2px);
    border-radius: 0 0 50% 50%;
}

.machine-top {
    display: flex;
    height: 50px;
    width: 185px;
    border-radius: 5px 5px 0 0px;
    background-color: var(--color-1);
    box-shadow: 0 4px #5796e9, 0px 0px 4px #a9c2fa;
}

.machine-top::before {
    content: "";
    height: 11px;
    width: 45px;
    position: absolute;
    border-radius: 0 0 1px 1px;
    transform: translateY(50px);
    box-shadow: 0 3px #5796e9;
    background-color: var(--color-1);
}

.machine-top::after {
    content: "";
    background-image: linear-gradient(#85b44b 0 80%, #3d3d3d 80%);
    height: 15px;
    width: 40px;
    transform: translateX(75px) translateY(20px);
}

.machine-right {
    height: 50px;
    width: 50px;
    background-color: var(--color-1);
    box-shadow: -4px 0px #5796e9, 0px 3px 2px #5796e9;
    transform: translateX(135px);
}

.machine-right::before {
    height: 35.7142857143px;
    width: 12.5px;
    position: absolute;
    border-radius: 0 25% 25% 0;
    transform: translateY(-20px) translateX(50px);
    background-image: linear-gradient(to right, #85b44b 0 70%, #3d3d3d 70%);
}

.machine-right::after {
    display: flex;
    height: 30px;
    width: 10px;
    background-image: repeating-linear-gradient(to bottom, #ffe6e6 0 10%, #3d3d3d 10% 20%, transparent 20% 40%);
    transform: translateX(18px) translateY(10px);
}

.machine-bottom {
    height: 40px;
    width: 200px;
    border-radius: 5px 0 0 0px;
    background-color: #8d7256;
    transform: translateX(-15px);
    box-shadow: 0 3px #5796e9, 0px 2px 2px #5796e9;
}

.machine-bottom::before {
    display: flex;
    height: 85px;
    width: 125px;
    background-image: repeating-linear-gradient(#fff89680, #fff89680 5%, #ffffff80 5% 10%), repeating-linear-gradient(90deg, rgba(255, 184, 223, 0.9), rgba(255, 184, 223, 0.9) 5%, transparent 5% 10%);
    clip-path: polygon(30% 0%, 90% 0%, 90% 20%, 30% 45%);
}

@keyframes needle-animation {
    50% {
        transform: translateY(-4.5px) translateX(1.2px);
    }
}

.needle::after {
    animation: needle-animation 0.2s infinite;
}

@keyframes thread-animation {
    50% {
        background-image: repeating-linear-gradient(35deg, #fff896, #fff896 0 5%, #5796e9 5% 10%);
    }
}

@keyframes thread-animation2 {
    50% {
        transform-origin: center left;
        transform: translateX(-105px) translateY(-1px) rotate(0deg);
    }
}

.thread {
    animation: thread-animation 2s infinite;
}

.thread::after {
    animation: thread-animation2 2s infinite;
}

@keyframes fabric-animation {
    50% {
        content: "bob";
        display: flex;
        height: 200px;
        width: 125px;
        background-image: repeating-linear-gradient(#fff89680, #fff89680 5%, #ffffff80 5% 10%), repeating-linear-gradient(90deg, rgba(255, 184, 223, 0.9), rgba(255, 184, 223, 0.9) 5%, transparent 5% 10%);
        clip-path: polygon(30% 0%, 90% 0%, 90% 20%, 30% 45%);
    }
}

.machine-bottom::before {
    animation: fabric-animation 7s infinite;
}

@keyframes tape-animation1 {
    50% {
        height: 102px;
    }
}

@keyframes tape-animation2 {
    50% {
        height: 102px;
        background-image: repeating-linear-gradient(to bottom, transparent, transparent 6%, #5796e9 6%, #5796e9 7.5%);
    }
}

@keyframes tape-animation3 {
    50% {
        transform: translateY(52.7px);
    }
}

.tape-bottom {
    animation: tape-animation1 3s infinite;
}

.tape-bottom::before {
    animation: tape-animation2 3s infinite;
}

.tape-bottom::after {
    animation: tape-animation3 3s infinite;
}

@keyframes pin-animation {
    50% {
        background-color: #fc93d0;
    }
}

.pin::before {
    animation: pin-animation 3s infinite;
}

/*  */
.bounceInDown {
    animation-fill-mode: both;
    animation-duration: 1s;
}

@keyframes bounceInDown {
    0% {
        opacity: 0;
        transform: translateY(-2000px);
    }

    60% {
        opacity: 1;
        transform: translateY(30px);
    }

    80% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

.bounceInDown {
    /* animation-name: bounceInDown; */
}

.about-text p {
    font-family: var(--font-3);
    color: #000000b0;
    letter-spacing: 0.12px;
}

.about-img img {
    border-radius: 16px;
    overflow: hidden;
}

.overlay-pcard {
    background: rgb(53 54 80 / 70%);
    position: absolute;
    bottom: 10px;
    width: 60%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    padding: 1px 0px;
    z-index: 1;
}

.overlay-pcard h4 {
    color: #d6b07a;
    text-align: center;
    font-family: var(--font-3);
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 8px;
    letter-spacing: 0.1px;
}

/*  */
.bordericon-dash {
    position: relative;
    display: block;
    max-width: 500px;
}

.bordericon-dash img {
    width: 32px;
    height: 32px;
    color: #86b24b;
    background: var(--sec-bg);
}

.bordericon-dash1::before {
    content: '';
    position: absolute;
    display: inline-block;
    width: 40px;
    height: 40px;
    color: #86b24b;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M56.813 18.438c-.47-.005-.938.014-1.407.03q-.939.035-1.875.126c-7.468.72-14.682 4.148-22.31 11.125c-9.985 9.128-12.863 17.66-11.407 27.718c1.455 10.056 8.353 22.236 21.125 34.906c2.895 2.872 6.126 5.737 9.593 8.625c1.27 1.055 2.565 2.13 3.907 3.186a201 201 0 0 0 3.438 2.656c.232.175.454.358.688.532C74.71 119.38 95.558 131.28 120.25 142.22c159.723 161.31 288.815 297.553 374.594 352.124c-51.11-85.624-187.432-214.62-350-375.531c-10.23-23.802-21.115-43.71-32.094-59.282c35.46-10.19 82.517-2.294 125.75 40.94c40.243 40.242 52.642 90.776 41.375 128.343c4.89 4.914 9.883 9.913 14.688 14.75c19.07-46.1 4.573-108.895-42.844-156.313c-35.694-35.693-75.48-50.324-111.032-50.22c-1.147.005-2.3.03-3.438.064c-21.844.65-41.957 6.898-58.344 17.187a102 102 0 0 0-8.312 5.814c1.33 3.094 2.758 5.884 4.406 8.218c1.92 2.72 4.004 4.936 6.906 6.688c2.202-1.717 4.498-3.375 6.938-4.906a89 89 0 0 1 3.25-1.97c8.196 10.088 15.465 24.624 25.47 47.25c-23.907-10.568-38.822-18.04-49.033-27c.024-.03.04-.063.064-.093c-.433-.33-.867-.655-1.28-1q-.018-.013-.033-.03c-11.215-10.375-16.532-22.934-22.31-44.5c5.988 1.605 11.256 3.19 16 4.844a137 137 0 0 1 26.81-15.875c-9.5-7.738-18.552-11.93-26.686-12.97c-1.443-.185-2.87-.3-4.282-.313zM493.28 64.374c-77.985 0-125.587 28.886-146.124 69.406s-13.994 90.39 9.688 131.407c11.385 19.72 17.807 40.687 19.187 61.22a4330 4330 0 0 1 18.47 19.187c2.31-29.955-5.072-61.35-21.47-89.75c-21.13-36.602-26.155-80.112-9.186-113.594s55.94-59.188 129.437-59.188V64.376zM37.907 114.938c-2.894 23.925 6.18 50.21 29.532 73.562l13.218-13.188c-15.97-15.97-23.188-31.833-24.437-46.593c-6.646-4.51-12.754-9.102-18.314-13.782zM124.062 277c-24.466-.028-45.04 4.92-61.343 13.656c-24.842 13.31-39.363 35.865-40.75 60.47c-2.78 49.207 44.38 102.65 140.405 118.28c101.63 16.544 170.303-9.184 205.406-54.062q1.513-1.933 2.94-3.906c-4.552-4.232-9.148-8.52-13.783-12.875c-1.233 1.79-2.52 3.55-3.875 5.28c-29.97 38.315-90.355 62.97-187.687 47.126c-90.394-14.715-126.796-62.527-124.75-98.783c1.023-18.127 10.982-34.37 30.938-45.062c19.955-10.692 50.267-15.364 90.5-7.47c34.077 6.69 62.938 3.47 85.437-6.936c-4.72-4.65-9.49-9.33-14.28-14.064c-17.545 6.452-39.89 8.088-67.564 2.656c-14.895-2.923-28.778-4.297-41.594-4.312z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    left: 0;
    bottom: 0;
}

.bordericon-dash--center::before {
}

.bordericon-dash::before, .bordericon-dash::after {
    content: '';
    position: absolute;
    display: block;
    background: transparent;
    width: 43%;
    height: 1px;
    border-top: 1px dashed #89b44f;
    top: 50%;
    transform: translateY(-50%);
}

.bordericon-dash:not(.bordericon-dash--center)::before {
    left: 35px;
}

.bordericon-dash:not(.bordericon-dash--center)::after {
    opacity: 0
}

.bordericon-dash::after {
    right: 0;
}

.bordericon-dash--center::after {
    /* left: 29%; */
}

.bordericon-dash--center {
    /* text-align: center; */
    margin: 0 auto;
}

.section-products .overlay-img {
    background-color: #e5e5f7;
    background-color: #ffddb3;
    opacity: 0.25;
    background-image: linear-gradient(#b4621d 1px, transparent 1px), linear-gradient(to right, #9a4b08 1px, #e5e5f7 1px);
    background-size: 20px 20px;
    position: absolute;
    inset: 0;
    background-blend-mode: soft-light;
    z-index: 0;
}

@media (max-width: 1199px) {
    .header-middle {
        padding: 0 0px;
    }

    .header-left, .nav-right {
        /* display: none !important; */
    }
}

@media (max-width: 1200px) {
    .swiper-banner {
    }

    .sewing-stuff {
        width: 360px;
    }

    .table {
        height: 15px;
        width: 360px;
    }

    .tape-top {
        height: 11px;
        width: 34px;
    }

    .tape-top::before {
        height: 5.5px;
        width: 34px;
    }

    .tape-top::after {
        border-width: 14.3px 0 0 14.3px;
        margin-left: 34px;
    }

    .tape-bottom {
        height: 49.3px;
        width: 11px;
        margin-left: 34px;
    }

    .tape-bottom::before {
        height: 47.6px;
        width: 55%;
    }

    .tape-bottom::after {
        height: 11px;
        width: 11px;
        margin-top: 49.3px;
        border-radius: 0 0 1px 1px;
        box-shadow: 2.75px 0 #a5a4a4;
        background-color: #666666;
        border: 2.2px solid #c2c2c2;
    }

    .pin-cushion {
        height: 6px;
        width: 50px;
    }

    .pin-cushion::before {
        height: 22.5px;
        width: 45px;
        border-radius: 10em 10em 0 0;
        transform: translateY(-27px) translateX(2.4px);
    }

    .pins {
        transform: translateY(-30px);
    }

    .pin {
        margin-right: 8.5px;
        height: 20px;
        width: 1px;
    }

    .pin::before {
        height: 4px;
        width: 4px;
        transform: translateX(-1.4px) translateY(-4px);
    }

    .thread {
        height: 25px;
        width: 16px;
        transform: translateX(122px);
    }

    .thread::before {
        height: 25px;
        width: 19.52px;
        border-radius: 0.5px;
        transform: translateX(-2px);
    }

    .thread::after {
        height: 1px;
        width: 105px;
        transform: translateX(-104px) translateY(-9.5px) rotate(-9.5deg);
    }

    .needle {
        height: 20px;
        width: 3.5px;
        transform: translateY(61px) translateX(20.4545454545px);
    }

    .needle::before {
        height: 18px;
        width: 8px;
        transform: translateX(-2px) translateY(3px);
    }

    .needle::after {
        height: 15px;
        width: 1px;
        transform: translateY(2px) translateX(1.2px);
        border-radius: 0 0 50% 50%;
    }

    .machine-top {
        height: 50px;
        width: 145px;
        border-radius: 5px 5px 0 0px;
        box-shadow: 0 4px #5796e9, 0px 0px 4px #a9c2fa;
    }

    .machine-top::before {
        height: 11px;
        width: 45px;
        border-radius: 0 0 1px 1px;
        transform: translateY(50px);
    }

    .machine-top::after {
        height: 15px;
        width: 20px;
        transform: translateX(75px) translateY(20px);
    }

    .machine-right {
        height: 50px;
        width: 30px;
        box-shadow: -4px 0px #5796e9, 0px 3px 2px #5796e9;
        transform: translateX(115px);
    }

    .machine-right::before {
        height: 35.7142857143px;
        width: 12.5px;
        border-radius: 0 25% 25% 0;
        transform: translateY(-20px) translateX(30px);
    }

    .machine-right::after {
        height: 30px;
        width: 10px;
        transform: translateX(18px) translateY(10px);
    }

    .machine-bottom {
        height: 40px;
        width: 180px;
        transform: translateX(-15px);
    }

    .machine-bottom::before {
        display: flex;
        height: 85px;
        width: 125px;
    }

    .pin-cushion {
        display: none;
    }
}

/*  */
.banner-left {
    max-width: 500px;
}

/*  */
.news-section {
    position: relative;
    padding: 80px 0 70px
}

.news-block {
    position: relative;
    margin-bottom: 40px
}

.news-block .inner-box {
    position: relative;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
    /* -webkit-box-shadow: 0 0 35px 0 rgba(0,0,0,.07); */
    -moz-box-shadow: 0 0 35px 0 rgba(0, 0, 0, .07);
    /* box-shadow: 0 0 35px 0 rgba(0,0,0,.07); */
    transition: .5s;
    padding: 10px;
    border: 2px dotted var(--color-v4);
    background: #fff6f2;
}

.news-block .inner-box:hover {
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -o-transform: translateY(-15px);
    transform: translateY(-15px)
}

.news-block .image {
    position: relative;
    margin-bottom: 0
}

.news-block .image img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s
}

.news-block .inner-box:hover .image-box .image img {
    opacity: .75
}

.news-block .image-box .date {
    position: absolute;
    right: 0;
    bottom: 0;
    text-align: center;
    font-size: 16px;
    color: #fff;
    background: #1370b5;
    padding: 5px 20px;
    border-radius: 10px 0 0
}

.news-block .image-box .date strong {
    color: #fff;
    font-size: 22px
}

.news-block .lower-content {
    position: relative;
    background: #fff;
    padding: 0px 10px 7px;
}

.news-block .lower-content h4 {
    position: relative;
    font-size: 22px;
    font-weight: 700
}

.news-block .lower-content h4 a {
    display: inline-block;
    color: inherit;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    font-size: 18px;
    font-family: var(--font-3);
    font-weight: 400;
    color: #7c4833;
}

.news-block .lower-content .text {
    color: #4c4c4d;
    margin-top: 4px;
    /* display: none; */
    line-height: 24px;
    font-size: 14px;
}

.news-block .lower-content .post-info {
    position: relative;
    font-size: 16px;
    line-height: initial;
    margin-top: 30px;
    padding-top: 21px;
    border-top: 1px solid #e5e5e5;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    -ms-align-items: flex-start;
    align-items: flex-start;
    margin-bottom: -10px
}

.news-block .post-author {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: #222
}

.news-block .post-author a {
    display: inline-block;
    margin: 0 5px
}

.news-block .post-author img {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    margin-right: 10px
}

.news-block .post-option {
    display: flex;
    align-items: center;
    margin-bottom: 10px
}

.news-block .post-option li {
    position: relative;
    margin-left: 15px
}

.news-block .post-option li a {
    color: inherit;
    font-size: 16px
}

.news-block .post-option li i {
    margin-right: 5px;
    font-size: 14px
}

.news-overlay {
    position: absolute;
    inset: 0;
    background-blend-mode: soft-light;
    background-color: #ffffff;
    opacity: 0.8;
    background-image: linear-gradient(#ffddb3 0.6000000000000001px, transparent 0.6000000000000001px), linear-gradient(to right, #ffddb3 0.6000000000000001px, #ffffff 0.6000000000000001px);
    background-size: 12px 12px;
    z-index: -1;
}

/* respos */
.section-clients {
    padding-top: 21px;
}

.sec-title {
    padding-top: 0px;
    margin-bottom: 30px;
    padding-bottom: 0px;
}

.sec-title.center {
    text-align: center;
}

.sec-title .label {
    padding: 7px 20px;
    background-color: transparent;
    border: var(--card-border) var(--base-color);
    /* border-style: none; */
    border-radius: 15px;
    display: inline-block;
    color: #200000;
    font-size: 14px;
    font-family: var(--font-2);
    text-transform: uppercase;
    font-variation-settings: "wght"600;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.sec-title .title {
    font-size: 36px;
    font-weight: 500;
    letter-spacing: -0.5px;
    line-height: 48.5px;
    font-variation-settings: "wght"600;
    color: rgb(22, 12, 6);
    font-family: var(--font-1);
}

.highlight {
    color: var(--base-dark);
}

.sec-space {
    padding-top: 41px;
    padding-bottom: 41px;
}

/*  */
.whatdo-card {
    text-align: center;
    background-color: #f5f5f7;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 80% auto;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #87868647;
    border-radius: 15px 15px 15px 15px;
    overflow: hidden;
    transition: all 0.4s ease;
    background-color: #161616;
}

.whatdo-card:hover {
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #52a0bc;
    border-radius: 15px 15px 15px 15px;
}

.whatdo-card__img {
    overflow: hidden;
    position: relative;
}

.whatdo-card__img .icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--base-color);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    opacity: 0;
    transform: translateY(60px);
}

.whatdo-card__img .icon svg {
    width: 50px;
    height: 50px;
}

.whatdo-card:hover .icon {
    transform: translateY(0px);
    opacity: 1;
}

.whatdo-card__img img {
    aspect-ratio: 2/2.2;
    object-fit: cover;
}

.whatdo-card__img:hover img {
    filter: brightness(70%);
}

.whatdo-card__info {
    padding: 15px 20px 14px;
}

.whatdo-card__info h2 {
    color: var(--base-color);
    font-size: 20px;
    font-family: var(--font-2);
    --fw: 400;
    margin: 7px 0 7px;
}

.whatdo-card__info p {
    font-size: 15px;
    line-height: 30px;
    color: #000;
}

.whatdo-card:hover {
    transform: translateY(-8px);
}

/* swiper-review */
.section-review, .bg-sec {
    background: #f5eee8;
}

.review-content {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 80% auto;
    overflow: hidden;
    transition: all 0.4s ease;
    background-color: #ffffff;
    margin: 10px 10px 10px 10px;
    padding: 10px 20px 30px 20px;
    border-radius: 15px 15px 15px 15px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #87868647;
}

.review-content p {
    font-size: 16px;
    margin-top: 30px;
    margin-bottom: 30px;
    letter-spacing: 0.5px;
    color: #000;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 20px;
}

.review-author {
}

.review-author__img {
    width: 80px;
    height: 80px;
    border-radius: 60px;
    background: #f2f2f2;
    overflow: hidden;
}

.review-author__img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: none;
}

.review-author__info {
}

.review-rating {
    letter-spacing: 2px;
    color: #fc4e19;
    font-size: 12px;
}

.review-author .title {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin: 12px 0px 10px 0px;
}

.review-icon {
    position: relative;
    width: 65px;
    height: 65px;
    background: transparent;
    color: var(--base-dark);
    margin: 0 auto 1px;
}

.review-icon svg {
    width: 100%;
    height: 100%;
}

/*  */
.desc p {
    color: #4b5863;
    font-size: 16px;
    letter-spacing: 0.5px;
    line-height: 34px;
    margin-bottom: 18px;
}

.banner-inner {
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    gap: 10px 20px;
    margin-bottom: 30px;
}

.banner-inner a, .banner-inner span {
    display: inline-block;
    color: violet;
    color: var(--color-secondary);
    font-size: 17px;
    font-weight: 600;
}

.banner-inner span i {
}

.inner-banner .picture {
    width: 100%;
    /* height: 320px; */
    overflow: hidden;
    /* background-color: #f6f6f6; */
    transition: all 0.2s;
    border-radius: 15px;
    object-fit: inherit;
    position: relative;
}

.inner-banner img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    filter: brightness(0.6);
    min-height: 448px;
    max-height: 576px;
}

/* pinfo */
/*  */
.price {
    font-size: 1.25rem;
    font-weight: bold;
    margin-top: 10px;
    --colors: 87868647;
}

.cta-buttons .btn {
    margin-right: 10px;
}

/* Product Information Styles */
.product-info ul {
    padding-left: 20px;
}

.product-info ul li {
    margin-bottom: 10px;
}

.product-info .lead {
    font-size: 1.1rem;
    color: #555;
}

/* Product Specifications Styles */
.table-bordered td {
    padding: 12px;
}

.table-bordered {
    margin-top: 30px;
}

/* Media Queries for Responsiveness */
@media (max-width: 767px) {
    .product-info ul {
        padding-left: 0;
    }

    .product-info .lead {
        font-size: 1rem;
    }
}

.p-info {
}

.p-info h2 {
    font-size: 36px;
    font-weight: 500;
    /* letter-spacing: -0.5px; */
    line-height: 48.5px;
    font-variation-settings: "wght" 600;
    color: #0a0d53;
    font-family: var(--font-1);
    margin-bottom: 12px;
}

.p-info .code {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    font-variation-settings: "wght" 450;
    color: var(--base-dark-2);
    font-family: var(--font-3);
    margin-bottom: 11px;
}

.p-info p {
    color: #4b5863;
    font-size: 17px;
    letter-spacing: 0.5px;
    line-height: 34px;
    margin-bottom: 20px;
}

.p-info ul {
}

.p-info ul li {
    color: #3a3a3a;
    font-size: 17px;
    letter-spacing: 0.5px;
    line-height: 34px;
    padding-bottom: 8px;
}

.p-info ul li i {
    color: var(--color-secondary);
    margin-right: 8px;
    font-size: 19px;
}

.p-info .price p {
}

.p-info {
}

.pinfo-descr {
    border-top: 1px solid #87868647;
    margin-top: 30px;
    padding-top: 20px;
}

.pinfo-descr h2 {
    font-size: 20px;
    --fw: 500;
    margin-bottom: 20px;
    letter-spacing: 0.6px;
}

.p-table {
    border: 1px solid #87868647;
    margin: 0 auto;
    background-color: #f5f5f7;
    border-radius: 15px;
    padding: 0px 0;
}

.p-table__row {
    /* display: flex; */
    margin-bottom: 10px;
    border-bottom: 1px solid #3030301f;
    padding: 10px 0;
}

.p-table__row:last-child {
    border-bottom: 0px ;
}

.p-table__row .p-table__td:first-child {
    --fw: 600;
}

.p-table__row .p-table__td:last-child {
    font-size: 16px;
}

.p-table__td {
    padding: 3px 9px;
    flex: 1;
    color: #3a3a3a;
    font-size: 17px;
    letter-spacing: 0.5px;
}

.pinfo-thumb {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px 10px;
    margin-top: 17px;
}

.img-border {
    border-radius: 15px;
    overflow: hidden;
}

.pinfo-thumb img {
    object-fit: contain;
    border: 1px solid #dadada;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pinfo-thumb img.active,.pinfo-thumb img:hover {
    border-color: var(--base-dark-light);
    /* border-width: 2px; */
    /* border: 2px solid var(--base-dark-light); */
}

.site-about-para p {
    margin-bottom: 14px;
    font-size: 16.0px;
    color: #484a4a;
    font-family: var(--font-3);
    color: #161616;
    line-height: 151%;
    --fw: 500;
    letter-spacing: 0.65px;
}

.contact-info {
    margin-top: 30px
}

.contact-info .contact-box {
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: center
}

.contact-info .contact-box .heading1 > p {
    margin-bottom: 10px;
    font-size: 18px;
    --fw: 500;
}

.contact-info .contact-box h4 a, .contact-link a {
    font-size: 18px;
    line-height: 30px;
    padding-top: 0px;
    font-weight: 500;
    font-family: var(--font-2);
}

.contact-info .contact-box h4 a:hover, .contact-link a:hover {
    color: var(--accent-light);
}

.contact-info .contact-box .icon {
    background-color: var(--base-color);
    height: 70px;
    width: 70px;
    line-height: 70px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    margin: 0 auto 19px
}

.contact-info .contact-box.contact-box2 {
    position: relative;
    padding-left: 0
}

.contact-info .contact-box.contact-box2::after {
    content: "";
    position: absolute;
    top: 0;
    left: -50px;
    height: 100%;
    width: 1px;
    background-color: #dadbdd
}

.section-client .client {
    border: 1px solid #be924457;
    border-bottom: var(--card-border) var(--base-color);
    text-align: center;
}

.section-client .client:hover img {
    filter: contrast(0.8)
}

.prd-side {
    background-color: #f9f8f8;
    color: #e4e4e4;
    border-radius: 18px;
    border: var(--card-border, 1px solid) var(--base-color);
}

.prd-side ul {
    /* border: 1px solid #ddd; */
    padding: 25px;
    /* list-style: disc; */
    padding-left: 40px;
}

.prd-side ul li {
    position: relative
}

.prd-side ul li a:before {
    content: '';
    width: 6px;
    height: 6px;
    background-color: var(--color);
    border-radius: 50px;
    display: block;
    position: absolute;
    top: 16px;
    left: -2px;
}

.prd-side ul li a.active:before {
    width: 20px;
    height: 20px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 21H7v-2h4zm4.5-2H17v2h-4v-2h.2l-1.4-6.1l-2.5.6c-.1.5-.3.9-.5 1.3c-.9 1.5-2.8 1.9-4.3 1s-1.9-2.8-1-4.3s2.8-1.9 4.3-1c.4.2.7.6.9.9l2.5-.6l-.6-2.5c-.4-.1-.8-.3-1.2-.5C8 6.9 7.5 5 8.4 3.5s2.8-1.9 4.3-1s1.9 2.8 1 4.3c-.2.4-.6.7-.9.9zM7 11.8c-.7-.5-1.7-.2-2.2.5s-.2 1.7.5 2.1c.7.5 1.7.3 2.2-.5c.4-.7.2-1.7-.5-2.1M12.4 6c.5-.7.2-1.7-.5-2.2s-1.7-.2-2.2.5c-.4.7-.2 1.7.6 2.2c.7.4 1.7.2 2.1-.5m.4 5.3c-.2-.1-.4-.1-.5.1s-.1.4.1.5s.4.1.5-.1c.2-.2.1-.4-.1-.5M21 8.5L14.5 10l.5 2.2l7.5-1.8l.5-.7zM23 19h-4v2h4zM5 19H1v2h4z'/%3E%3C/svg%3E");
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 5.997c0 .732-.197 1.419-.54 2.01L12 10.582l6.728-6.728a2 2 0 0 1 2.828 0l-12.11 12.11a4 4 0 1 1-1.414-1.414l2.554-2.554l-2.554-2.554A4 4 0 1 1 10 5.997m-2 0a2 2 0 1 0-4 0a2 2 0 0 0 4 0m13.556 14.142a2 2 0 0 1-2.828 0l-5.317-5.317l1.415-1.414zM16 10.997h2v2h-2zm4 0h2v2h-2zm-14 0h2v2H6zm-4 0h2v2H2zm4 9a2 2 0 1 0 0-4a2 2 0 0 0 0 4'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    top: 9px;
    left: -8px;
}

.prd-side ul li a {
    /* border-bottom: 1px solid var(--base-color); */
    --color: #565656;
    /* box-shadow: 0 1px 0 white; */
    padding: 1px;
    padding: 6px 0px;
    color: #000;
    display: block;
    font-size: 18px;
    font-family: var(--font-2);
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
}

.prd-side ul li a.active, .prd-side ul li a:hover {
    /* background-color: var(--base-color); */
    color: var(--base-color);
    --color: var(--base-color);
}

.prd-img {
    border: 1px solid #ddd;
}

.album-wrap {
    border: var(--card-border) var(--base-color);
    border-radius: 15px;
    overflow: hidden;
}

.album-wrap img {
    width: 100%
}

.album-wrap h2 {
    font-size: 20px;
    text-align: center;
    font-family: var(--font-2);
    margin: 20px 0 10px;
}

.pinner-card {
    border: 1px solid #e6a82c63;
    background-color: #f9f8f8;
    border-radius: 18px;
    overflow: hidden;
}

.pinner-img img {
}

.pinner-img:hover img {
    filter: contrast(0.7);
}

.pinner-text h2 {
    font-size: 21px;
    font-family: var(--font-2);
    margin: 17px 0 17px;
    text-align: center;
    color: #161616;
}

.contact-logo {
    border: 1px solid #a9a9a93d;
    text-align: center;
    margin: 0 auto 22px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-logo {
    /* max-width: 200px; */
    max-width: 220px;
    aspect-ratio: 2/1;
}

.contact-logo.one {
    /* max-width: 180px;
    aspect-ratio: 1; */
}

.contact-logo.two {
    /* max-width: 180px;
    aspect-ratio: 1; */
}

/* zz */
@media only screen and (min-width: 375px) {
    .hero-slider__content h1 {
        font-size: 39px;
        /* line-height: 45.5px; */
    }

    .hero-slider__content--inner h1 {
        font-size: 39px;
    }
}

@media (min-width: 991px) {
    .sec-space {
        padding-top: 51px;
        padding-bottom: 51px;
    }

    .section-clients {
        padding-top: 21px;
    }

    .sec-space {
        padding-top: 51px;
        padding-bottom: 51px;
    }

    .sec-title.gap {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .p-table__td {
        padding: 11px 18px;
        flex: 1;
        color: #3a3a3a;
        font-size: 17px;
        letter-spacing: 0.5px;
    }

    .p-table__row .p-table__td:first-child {
        flex: 1;
    }

    .p-table__row .p-table__td:last-child {
        flex: 3;
    }
}

@media (min-width: 1300px) {
    .main-header.absolute-header:not(.inner-header) {
    }

    .site-logo img {
        max-width: 125px;
        /* margin-bottom: 3px; */
        margin: 3px 0px;
    }

    .sticky-on .site-logo img {
        max-width: 85px;
    }

    .hero-slider__content h1 {
        font-size: 55px;
    }

    .hero-slider__content--inner h1 {
        font-size: 45px;
    }

    .main-header .site-menu ul li a {
        font-size: 18px;
        padding: 0px 20px;
    }

    .sec-title .title {
        font-size: 45px;
        line-height: 58.5px;
    }

    .sec-space {
        padding-top: 71px;
        padding-bottom: 71px;
    }

    .section-clients {
        padding-top: 51px;
        padding-bottom: 51px;
    }

    .inner-banner img {
        min-height: 388px;
        max-height: 536px;
    }
}

@media (max-width: 767px) {
    .hero-slider__content .hero-btns {
        margin-top: 10px;
    }

    .container-1400 {
        /* width: 99%; */
    }

    .section-innerbanner {
        background-position: 0 center;
    }
}
