:root {
    --White: #fff;
    --Black: #010101;
    --Text: #3D3E3F;
    --Primary: #c69e71;
    --Secondary: #c69e71;
    --Third: #F8D600;
    --Fourth: #5e83a0;
    --Border: #EBEBEB;
    --Height: #F3F3F3;
    --Nine: #f7f1ec;
    --Ten:#fdfdfd;
    --Error: #bc1d24;

    --Xupito33:#ef7d59;
    --Xupito33Medium:#dd3118;
    --Xupito33Dark:#7c2b1e;

    --Xupito40:#fcea21;
    --Xupito40Dark:#71651b;

    --Xupito50:#f08122;
    --Xupito50Dark:#532b15;

    --Xupito60:#61b87c;
    --Xupito60Dark:#175b4e;

}


#pxb .bg-color-primary { background-color: var(--Primary) !important; }
#pxb .bg-color-xupito-33 { background-color: var(--Xupito33) !important; }
#pxb .bg-color-xupito-33-medium { background-color: var(--Xupito33Medium) !important; }
#pxb .bg-color-xupito-33-dark { background-color: var(--Xupito33Dark) !important; }
#pxb .bg-color-xupito-40 { background-color: var(--Xupito40) !important; }
#pxb .bg-color-xupito-40-dark { background-color: var(--Xupito40Dark) !important; }
#pxb .bg-color-xupito-50 { background-color: var(--Xupito50) !important; }
#pxb .bg-color-xupito-50-dark { background-color: var(--Xupito50Dark) !important; }
#pxb .bg-color-xupito-60 { background-color: var(--Xupito60) !important; }
#pxb .bg-color-xupito-60-dark { background-color: var(--Xupito60Dark) !important; }


#pxb .text-color-primary { color: var(--Primary) !important; }
#pxb .text-color-xupito-33 { color: var(--Xupito33) !important; }
#pxb .text-color-xupito-33-medium { color: var(--Xupito33Medium) !important; }
#pxb .text-color-xupito-33-dark { color: var(--Xupito33Dark) !important; }
#pxb .text-color-xupito-40 { color: var(--Xupito40) !important; }
#pxb .text-color-xupito-40-dark { color: var(--Xupito40Dark) !important; }
#pxb .text-color-xupito-50 { color: var(--Xupito50) !important; }
#pxb .text-color-xupito-50-dark { color: var(--Xupito50Dark) !important; }
#pxb .text-color-xupito-60 { color: var(--Xupito60) !important; }
#pxb .text-color-xupito-60-dark { color: var(--Xupito60Dark) !important; }


#pxb .bg-primary { background: var(--Primary) !important; }
#pxb .bg-xupito-33 { background: var(--Xupito33) !important; }
#pxb .bg-xupito-33-medium { background: var(--Xupito33Medium) !important; }
#pxb .bg-xupito-33-dark { background: var(--Xupito33Dark) !important; }
#pxb .bg-xupito-40 { background: var(--Xupito40) !important; }
#pxb .bg-xupito-40-dark { background: var(--Xupito40Dark) !important; }
#pxb .bg-xupito-50 { background: var(--Xupito50) !important; }
#pxb .bg-xupito-50-dark { background: var(--Xupito50Dark) !important; }
#pxb .bg-xupito-60 { background: var(--Xupito60) !important; }
#pxb .bg-xupito-60-dark { background: var(--Xupito60Dark) !important; }

#pxb .bcolor-primary { border-color: var(--Primary) !important; }
#pxb .bcolor-xupito-33 { border-color: var(--Xupito33) !important; }
#pxb .bcolor-xupito-33-medium { border-color: var(--Xupito33Medium) !important; }
#pxb .bcolor-xupito-33-dark { border-color: var(--Xupito33Dark) !important; }
#pxb .bcolor-xupito-40 { border-color: var(--Xupito40) !important; }
#pxb .bcolor-xupito-40-dark { border-color: var(--Xupito40Dark) !important; }
#pxb .bcolor-xupito-50 { border-color: var(--Xupito50) !important; }
#pxb .bcolor-xupito-50-dark { border-color: var(--Xupito50Dark) !important; }
#pxb .bcolor-xupito-60 { border-color: var(--Xupito60) !important; }
#pxb .bcolor-xupito-60-dark { border-color: var(--Xupito60Dark) !important; }


html body#pxb .blur-primary {
    background: rgba(198, 158, 113, 0.5);
    box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(5px);
}

html body#pxb .blur-xupito-33 {
     background: rgba(239, 125, 89, 0.5);
     box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05);
     backdrop-filter: blur(5px);
 }
html body#pxb .blur-xupito-33-medium {
    background: rgba(221, 49, 24, 0.5);
    box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(5px);
}
html body#pxb .blur-xupito-33-dark {
    background: rgba(123, 43, 30, 0.5);
    box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(5px);
}

html body#pxb .blur-xupito-40 {
    background: rgba(252, 234, 33, 0.5);
    box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(5px);
}
html body#pxb .blur-xupito-40-dark {
    background: rgba(113, 101, 27, 0.5);
    box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(5px);
}

html body#pxb .blur-xupito-50 {
    background: rgba(240, 129, 34, 0.5);
    box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(5px);
}
html body#pxb .blur-xupito-50-dark {
    background: rgba(83, 43, 21, 0.5);
    box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(5px);
}

html body#pxb .blur-xupito-60 {
    background: rgba(97, 184, 124, 0.5);
    box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(5px);
}
html body#pxb .blur-xupito-60-dark {
    background: rgba(23, 81, 78, 0.5);
    box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(5px);
}


.text-justify {
    text-align: justify;
    /*word-break: break-all;*/
}


#pxb .section-sub-title {
    line-height: 155.556%;
    margin-bottom: 10px;
    position: relative;
    padding-left: 18px;
    color: var(--Primary);
}

#pxb .section-sub-title::before {
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: var(--Primary);
}

#pxb .section-sub-title.double-icon::after {
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: var(--Primary);
}

@keyframes loaderspin {
    0% {
        -webkit-transform: rotate(0deg) scale(0.8);
        -ms-transform: rotate(0deg) scale(0.8);
        transform: rotate(0deg) scale(0.8);
    }
    50% {
        border: 1px solid var(--Primary);
        -webkit-transform: rotate(360deg) scale(1);
        -ms-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }
    100% {
        -webkit-transform: rotate(720deg) scale(0.8);
        -ms-transform: rotate(720deg) scale(0.8);
        transform: rotate(720deg) scale(0.8);
    }
}
@keyframes ball1 {
    0% {
        box-shadow: 30px 0 0 var(--Primary);
    }
    50% {
        box-shadow: 0 0 0 var(--Primary);
        margin-bottom: 0;
        -webkit-transform: translate(15px, 15px);
        -ms-transform: translate(15px, 15px);
        transform: translate(15px, 15px);
    }
    100% {
        box-shadow: 30px 0 0 var(--Primary);
        margin-bottom: 10px;
    }
}

#pxb .header__main-menu nav ul li.active > a {
    background: var(--Primary);
    color: #0e0f11;
}
#pxb .header__main-menu nav ul li:not(.active) > a:hover {
    color: var(--Primary);
}

#pxb .header__main-menu nav ul li .sub-menu li::before {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    width: 0%;
    height: 1px;
    left: 0;
    bottom: -1px;
    background-color: rgba(198, 158, 113, 0.5);
    z-index: -1;
}

#pxb .header__menu-btns .hamburger-menu {
    width: 48px;
    height: 48px;
    font-size: 40px;
    border: none;
    border-radius: 5px;
    color: var(--Primary);
    background-color: transparent;
}

#pxb .offcanvas.offcanvas-end {
    border-left: 5px solid var(--Primary);
}


#pxb .offcanvas-menu .mean-bar .mean-nav > ul li a,
#pxb .mean-container .mean-bar .mean-nav > ul li a {
    line-height: 1;
    background: transparent;
    text-transform: capitalize;
    border-top: 1px solid rgba(198, 158, 113, 0.4);
    border-bottom: none;
    width: 100%;
}

#pxb .offcanvas-menu .mean-bar .mean-nav > ul .sub-menu > li a,
#pxb .mean-container .mean-bar .mean-nav > ul .sub-menu > li a {
    padding-left: 12px;
    margin-left: 25px;
    padding-right: 12%;
    border-left: 1px solid rgba(198, 158, 113, 0.4);
    border-bottom: 1px solid rgba(198, 158, 113, 0.4);
}
#pxb .offcanvas-menu .mean-bar .mean-nav > ul .sub-menu > li .sub-menu > li a,
#pxb .mean-container .mean-bar .mean-nav > ul .sub-menu > li .sub-menu > li a {
    padding-left: 12px;
    margin-left: 50px;
    padding-right: 20%;
    border-left: 1px solid rgba(198, 158, 113, 0.4);
}

#pxb .hamburger-menu-close {
    width: 40px;
    height: 40px;
    font-size: 20px;
    border: none;
    border-radius: 50%;
    background-color: var(--Primary);
    color: #0e0f11;
    margin-left: auto;
}

#pxb .hero-three.section::before, .hero-three.section::after {
    width: 426px;
    height: 426px;
    border-radius: 100%;
    opacity: 0.9;
    background: var(--Primary);
    filter: blur(220px);
}

#pxb .hero-three__content .hero-sub-title {
    color: var(--Primary);
    font-weight: 300;
}

#pxb .hero-three__bottom-content .info label {
    margin-bottom: 24px;
    width: 18px;
    height: 18px;
    border: 2px solid var(--Primary);
    background-color: transparent;
    border-radius: 2px;
    cursor: pointer;
}

#pxb .hero-three__bottom-content .info input:checked + label {
    background-color: var(--Primary);
}

#pxb .hero-four__content .title-l1 svg .logo-path {
    fill: none;
    stroke: var(--Primary);
    stroke-width: 1;
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    animation: draw 5s forwards ease-in-out;
    animation-delay: 1.1s;
}
#pxb .hero-four__content .title-l1 svg .logo-fill {
    fill: var(--Primary);
    opacity: 0;
    animation: fill-in 0.3s forwards ease-in-out 2s;
    animation-delay: 5.2s;
}

#pxb .hero-four__thumb .circle-shape svg {
    margin-bottom: 155px;
    animation: rotate 8s linear infinite;
    color: var(--Primary);
}

#pxb .hero-four__thumb .main-thumb .img-wrapper::before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 80%;
    background-color: var(--Primary);
    border-radius: 500px 500px 9px 9px;
    z-index: -1;
}

#pxb .hero-five__header .title span {
    color: var(--Primary);
    font-family: "Inter", serif;
    font-style: italic;
    font-weight: 200;
}

#pxb .hero-five__thumb .circular-shape-wrapper .circular-shape {
    width: 100%;
    height: 100%;
    color: var(--Primary);
}
#pxb .hero-five__thumb .circular-shape-wrapper .circular-shape .circular-shape-svg {
    color: var(--Primary);
    width: 100%;
    height: 100%;
    animation: rotate 5s linear infinite;
}

#pxb .hero-six__content .title .highlight {
    color: var(--Primary);
}

#pxb .hero-six__statistic {
    max-width: 334.479px;
    width: 100%;
    margin-inline: auto;
    background-color: var(--Primary);
    border-radius: 20px;
    padding: 60px;
}

#pxb .footer-main2__content .news-letter .input-group .form-control:focus,
#pxb .footer-main2__content .news-letter .input-group .form-control:active {
    box-shadow: none;
    border-color: rgba(198, 158, 113, 0.5);
}

#pxb .footer-main2 .footer-widgets .footer-links.f-3 ul li i {
    color: var(--Primary);
}

#pxb .footer-bottom__content a:hover {
    color: var(--Primary);
}

#pxb .social-icons ul li a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background-color: transparent;
    color: #ffffff;
    border: 1px solid var(--Primary);
    font-size: 14px;
}
#pxb .social-icons ul li a:hover {
    background-color: var(--Primary);
    color: #0e0f11;
}
#pxb .social-icons.v2 ul li a:hover {
    border-color: var(--Primary);
    background: var(--Primary);
}


#pxb .footer-widgets .footer-links ul li a:hover {
    color: var(--Primary);
}

#pxb .footer-widgets .footer-links ul li:hover i {
    border-color: var(--Primary);
    color: var(--Primary);
}

#pxb .agx-btn {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    gap: 10px;
    background-color: var(--Primary);
    color: #0e0f11;
    font-size: 16px;
    font-weight: 400;
    line-height: 162.5%;
    border-radius: 999px;
    padding: 11px 28.5px;
    border: 1px solid var(--Primary);
}

#pxb .agx-btn:hover {
    color: var(--Primary);
    background-color: transparent;
}

#pxb .agx-btn2:hover {
    color: #0e0f11;
    background-color: var(--Primary);
    border-color: var(--Primary);
}

#pxb .agx-btn2.v2 {
    border-color: var(--Primary);
    background-color: var(--Primary);
    color: #18191b;
}
#pxb .agx-btn2.v2:hover {
    background-color: transparent;
    color: var(--Primary);
}


#pxb .agx-btn3:hover {
    background-color: var(--Primary);
}

#pxb .agx-btn3.v2 {
    border: none;
    border-radius: 10px;
    background: var(--Primary);
}


#pxb .partner__box:hover,
#pxb .partner__box.active {
    -webkit-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
    background-color: var(--Primary);
    color: #0e0f11;
}


#pxb .video-player-wrapper .play-btn {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 152px;
    height: 152px;
    border-radius: 100%;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--Primary);
    backdrop-filter: blur(7px);
    font-size: 50px;
    color: var(--Primary);
}

#pxb .play-btn,
#pxb .video2-play-btn {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
    transition: all 0.2s;
    width: 152px;
    height: 152px;
    border-radius: 100%;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--Primary);
    backdrop-filter: blur(7px);
    font-size: 50px;
    color: var(--Primary);
}


#pxb .about-us__thumb .brand-info svg,
#pxb .about-us__thumb .brand-info i {
    width: 65px;
    height: 65px;
    color: var(--Primary);
}


#pxb .about-us__thumb .brand-review svg {
    width: 65px;
    height: 65px;
    flex-shrink: 0;
    color: var(--Primary);
}

#pxb .about-us3__info .info-boxes .info-box:first-of-type::after {
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, #0e0f11 0%, var(--Primary) 50%, #0e0f11 100%);
    opacity: 0.6;
}

#pxb .goal-box:hover svg,
#pxb .goal-box.active svg {
    color: var(--Primary);
}

#pxb .about-us4__statistic::before {
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 158px;
    height: 3px;
    background-color: var(--Primary);
}

#pxb .about-us5__info .experience {
    width: 246px;
    height: 246px;
    background: linear-gradient(180deg, #ffffff 0%, #0e0f11 276.22%);
    border: 1.5px solid var(--Primary);
    border-radius: 100%;
}

#pxb .pricing__plan-btns .highlighter {
    width: calc((100% - 6px) / 2);
    height: calc(100% - 6px);
    background-color: var(--Primary);
    z-index: -1;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    border-radius: 500px;
}

#pxb .pricing__box .pricing-body a:hover,
#pxb .pricing__box .pricing-body a.active {
    color: #0e0f11;
    border-color: var(--Primary);
    background-color: var(--Primary);
}
#pxb .pricing__box.hover .pricing-body a,
#pxb .pricing__box.active .pricing-body a {
    color: #0e0f11;
    border-color: var(--Primary);
    background-color: var(--Primary);
}

#pxb .service__item .service-box-hover {
    border-bottom: 1px solid var(--Primary);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(-180deg) rotateY(0) rotateZ(0);
    -ms-transform: rotateX(-180deg) rotateY(0) rotateZ(0);
    transform: rotateX(-180deg) rotateY(0) rotateZ(0);
    width: 100%;
    height: 200px;
    padding-bottom: 30px;
}

#pxb .service__item .service-box-hover .agx-btn2 {
    background-color: var(--Primary);
}

#pxb .service2__box:hover {
    border-color: var(--Primary);
}

#pxb .service3__box .service-content .service-title a:hover {
    color: var(--Primary);
}

#pxb .service3__box.active .service-thumb,
#pxb .service3__box:hover .service-thumb {
    background-color: var(--Primary);
    perspective: 1000px;
}

#pxb .service4__list .list-item:hover,
#pxb .service4__list .list-item.active {
    border-top-color: var(--Primary);
    border-bottom-color: var(--Primary);
}
#pxb .service4__list .list-item:hover + .list-item,
#pxb .service4__list .list-item.active + .list-item {
    border-top-color: var(--Primary);
}
#pxb .service4__list .list-item:hover .service-title,
#pxb .service4__list .list-item.active .service-title {
    color: var(--Primary);
}
#pxb .service4__list .list-item:hover .agx-btn2,
#pxb .service4__list .list-item.active .agx-btn2 {
    border-color: var(--Primary);
    background-color: var(--Primary);
}


#pxb .service5__box .main-content .content-title {
    color: var(--Primary);
}

#pxb .service5__box .main-content .figure-container {
    margin-top: 35px;
    width: 100%;
    min-height: 400px;
    border-radius: 14px;
    background: var(--Primary);
}

#pxb .service5__box .main-content .figure-container .service-link {
    left: 50%;
    top: -35px;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    background-color: var(--Primary);
    color: #0e0f11;
    border: 3px solid #0e0f11;
    font-size: 28px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

#pxb .service6__row::before {
    width: 293.872px;
    height: 302.235px;
    background: var(--Primary);
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
#pxb .service6__row::after {
    width: 455.483px;
    height: 468.445px;
    background: rgba(127, 255, 57, 0.5);
    top: 50%;
    right: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#pxb .service6__box:hover,
#pxb .service6__box.active {
    border-color: var(--Primary);
    -webkit-transform: scaleY(1.15);
    -ms-transform: scaleY(1.15);
    transform: scaleY(1.15);
}

#pxb .service6__box:hover .icon svg,
#pxb .service6__box.active .icon svg {
    color: var(--Primary);
}

#pxb .service-details__content .service-lists ul li::before {
    font: var(--fa-font-solid);
    content: "\f00c";
    color: var(--Primary);
}

#pxb .widget_category .category-box:hover,
#pxb .widget_category .category-box.active {
    background-color: var(--Primary);
    color: #0e0f11;
}
#pxb .widget_category .category-box:hover .icon,
#pxb .widget_category .category-box.active .icon {
    background-color: #0e0f11;
    color: var(--Primary);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
#pxb .widget_contact {
    background-color: var(--Primary);
    border-radius: 20px;
    padding: 40px 50px;
}

#pxb .widget_search .search-form .input-group input {
    border: 1px solid var(--Primary);
    border-radius: 999px;
    line-height: 58px;
    padding-inline: 20px 45px;
    color: #ffffff;
    font-family: "Inter", serif;
    font-size: 18px;
    font-weight: 400;
}

#pxb .widget_search .search-form .input-group button {
    border: none;
    color: var(--Primary);
    top: 50%;
    right: 20px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#pxb .widget_categorys .category-lists li a:hover {
    color: var(--Primary);
    -webkit-transform: translateX(5px);
    -ms-transform: translateX(5px);
    transform: translateX(5px);
}


#pxb .widget_tags .tags-lists ul li a:hover {
    border-color: var(--Primary);
}

#pxb .widget-post-box .post-content .post-title a:hover {
    color: var(--Primary);
}

#pxb .project-box .project-content .project-sub-title {
    font-size: 18px;
    line-height: 155.556%;
    margin-bottom: 30px;
    position: relative;
    padding-left: 18px;
    color: var(--Primary);
}

#pxb .project-box .project-content .project-sub-title::before {
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: var(--Primary);
}

#pxb .project-box:hover .project-title .project-btn {
    color: var(--Primary);
}

#pxb .portfolio__box .portfolio-thumb .portfolio-tags ul li a:hover {
    border-color: var(--Primary);
    background-color: var(--Primary);
    color: #0e0f11;
}

#pxb .portfolio__box .portfolio-content .title a:hover {
    color: var(--Primary);
}
#pxb .portfolio__box:hover {
    border-color: var(--Primary);
}

#pxb .portfolio4__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
    border-color: var(--Primary);
    background-color: var(--Primary);
}

#pxb .portfolio4__navigation .btn-next:hover,
#pxb .portfolio4__navigation .btn-prev:hover {
    border-color: var(--Primary);
    background-color: var(--Primary);
}

#pxb .portfolio-details__content .short-info p {
    color: #0e0f11;
    font-size: 16px;
    font-weight: 400;
    padding: 10px 0px 12px;
    background-color: var(--Primary);
    margin: 0;
}

#pxb .portfolio-details__content .short-info .info-list .stars li {
    font-size: 16px;
    color: var(--Primary);
}

#pxb .portfolio-details-highlight-box .item-inner svg {
    color: var(--Primary);
}

@media only screen and (max-width: 767.98px) {
    #pxb .team__box {
        border-color: var(--Primary);
    }
}
#pxb .team__box:hover, #pxb .team__box.active {
    border-color: var(--Primary);
}

#pxb .team__content::before {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    width: 100%;
    height: 0px;
    left: 0;
    top: 0px;
    background-color: var(--Primary);
    z-index: -1;
}

#pxb .team2__item .accordion-collapse .accordion-body .body-content .team-title a:hover {
    color: var(--Primary);
}

#pxb .team2__item .accordion-collapse .accordion-body .agx-btn2:hover {
    color: #0e0f11;
    border-color: var(--Primary);
}

#pxb .team3__box .team-content .social-icons ul li a {
    border-color: rgba(198, 158, 113, 0.2);
    background-color: transparent;
    color: #ffffff;
}
#pxb .team3__box .team-content .social-icons ul li a:hover {
    border-color: var(--Primary);
}
#pxb .team3__box:hover {
    background-color: var(--Primary);
}
#pxb .team3__box:hover .team-content .member-name a {
    color: var(--Primary);
}

#pxb .marquee__slider-down {
    -webkit-transform: translateY(-50%) rotate(-3deg);
    -ms-transform: translateY(-50%) rotate(-3deg);
    transform: translateY(-50%) rotate(-3deg);
    background: var(--Primary);
}

#pxb .marquee__slider-common {
    background-color: var(--Primary);
    padding: 10px 0;
}
#pxb .marquee2.section {
    background-color: var(--Primary);
    padding: 30px 0;
}

#pxb .testimonial-box .ratings li {
    color: var(--Primary);
}

#pxb .testimonial__slider .swiper-slide-active .testimonial-box {
    background-color: var(--Primary);
}

#pxb .testimonial__prev:hover,
#pxb .testimonial__next:hover {
    color: var(--Primary);
    border-color: var(--Primary);
}
#pxb .testimonial2__slider .swiper-slide.swiper-slide-active .testimonial-thumb {
    background-color: var(--Primary);
}
#pxb .testimonial2__slider .swiper-slide.swiper-slide-active .testimonial-content .stars {
    color: var(--Primary);
}

#pxb .testimonial2__navigation .testimonial2-next:hover,
#pxb .testimonial2__navigation .testimonial2-prev:hover {
    border-color: var(--Primary);
    color: var(--Primary);
}

#pxb .testimonial3__box .author-info .author-content .stars ul {
    gap: 5px;
    color: var(--Primary);
}

#pxb .testimonial4__thumb-slider .swiper-wrapper .swiper-slide .testimonial4__thumb .shape {
    top: 11px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    color: var(--Primary);
    z-index: -1;
}
#pxb .testimonial4__thumb-slider .swiper-wrapper .swiper-slide-thumb-active .testimonial4__thumb {
    background-color: var(--Primary);
}
#pxb .testimonial5__thumb-box {
    background-color: var(--Primary);
    border-radius: 40px;
    overflow: hidden;
}
#pxb .testimonial5__content-box .quote {
    -webkit-text-stroke-width: 1.7391303778px;
    -webkit-text-stroke-color: var(--Primary);
    font-family: "Font Awesome 6 Pro";
    font-size: 79.599px;
    font-style: normal;
    font-weight: 900;
    line-height: 0.7;
    color: #18191b;
}
#pxb .testimonial5__navigation .testimonial-prev,
#pxb .testimonial5__navigation .testimonial-next {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    border: 1.333px solid var(--Primary);
    font-size: 22px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#pxb .testimonial5__navigation .testimonial-prev i,
#pxb .testimonial5__navigation .testimonial-next i {
    color: var(--Primary);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#pxb .testimonial5__navigation .testimonial-prev:hover,
#pxb .testimonial5__navigation .testimonial-next:hover {
    background-color: var(--Primary);
}

#pxb .testimonial-box6 .testimonial-content .quote-icon i {
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: var(--Primary);
    font-size: 79.599px;
    font-weight: 900;
    line-height: normal;
    color: transparent;
}

#pxb .testimonial-box6 .testimonial-thumb .author-info {
    left: 20px;
    bottom: 20px;
    color: #0e0f11;
    background-color: var(--Primary);
    border-radius: 20px;
    padding: 20px;
}

#pxb .blog-box .blog-content .blog-sub-title {
    font-size: 18px;
    line-height: 155.556%;
    margin-bottom: 30px;
    position: relative;
    padding-left: 18px;
    color: var(--Primary);
}

#pxb .blog-box .blog-content .blog-sub-title::before {
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: var(--Primary);
}

#pxb .blog-box:hover,
#pxb .blog-box.active {
    border-color: var(--Primary);
}
#pxb .blog-box:hover .agx-btn2,
#pxb .blog-box.active .agx-btn2 {
    border-color: var(--Primary);
    background-color: var(--Primary);
    color: #0e0f11;
}

#pxb .blog-box2 .blog-content .blog-meta::before {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    height: 1px;
    width: 0%;
    left: 0;
    bottom: -1px;
    background-color: var(--Primary);
}

#pxb .blog-box3 .blog-content .blog-title a:hover {
    color: var(--Primary);
}
#pxb .blog-box3 .blog-meta a:hover {
    color: var(--Primary);
    border-color: var(--Primary);
}

#pxb .blog-box4 .blog-meta ul li a:hover {
    color: var(--Primary);
}

#pxb .blog-box4 .blog-title a:hover {
    color: var(--Primary);
}

#pxb .blog-box5 .blog-content .blog-meta ul li a {
    color: var(--Primary);
    font-size: 18px;
    font-family: "Rubik", sans-serif;
}
#pxb .blog-box5 .blog-content .blog-meta ul li a:hover {
    color: var(--Primary);
}

#pxb .blog-box6 .blog-content .blog-sub-title {
    line-height: 155.556%;
    margin-bottom: 10px;
    position: relative;
    padding-left: 18px;
    color: var(--Primary);
}

#pxb .blog-box6 .blog-content .blog-sub-title::before {
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: var(--Primary);
}

#pxb .blog-box6 .blog-content .blog-sub-title.double-icon::after {
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: var(--Primary);
}

#pxb .blog-main__pagination .pagination .page-item .page-link {
    width: 67px;
    height: 67px;
    border: 1px solid var(--Primary);
    display: grid;
    place-content: center;
    border-radius: 100%;
    background-color: transparent;
    color: #ffffff;
}

#pxb .blog-main__pagination .pagination .page-item .page-link:hover {
    background-color: var(--Primary);
    color: #0e0f11;
}
#pxb .blog-main__pagination .pagination .page-item.active .page-link {
    background-color: var(--Primary);
    color: #0e0f11;
}

#pxb .blog-main__box .blog-thumb .post-dates {
    left: 30px;
    bottom: 30px;
    background-color: var(--Primary);
    border-radius: 10px;
}

#pxb .blog-main__box .blog-thumb .post-dates .month {
    background-color: #0e0f11;
    color: var(--Primary);
    border-radius: 10px;
}

#pxb .blog-main__box .blog-content .blog-meta a i,
#pxb .blog-main__box .blog-content .blog-meta a svg {
    color: var(--Primary);
}


#pxb .blog-single .blockquote {
    border-radius: 20px;
    border: 2px solid var(--Primary);
    padding: 30px;
    margin-top: 40px;
    margin-bottom: 20px;
}

#pxb .blog-single .blockquote .blockquote-footer cite::before {
    content: "";
    top: 50%;
    left: 0px;
    width: 40px;
    height: 2px;
    background-color: var(--Primary);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#pxb .blog-single .blockquote .blockquote-footer .quote-icon {
    font-size: 42.286px;
    color: var(--Primary);
}

#pxb .blog-single__tagsAndSocial .tags ul li a:hover {
    color: var(--Primary);
}

#pxb .blog-single__tagsAndSocial .social-share ul li a:hover {
    border-color: var(--Primary);
    color: var(--Primary);
}

#pxb .blog-single__navigations .next .arrow {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background-color: var(--Primary);
    color: #0e0f11;
    font-size: 16px;
}

#pxb .comment-item .comment-body a {
    color: var(--Primary);
    margin-top: 4px;
}

#pxb .process__box .shape {
    z-index: -1;
    background-color: var(--Primary);
    border-radius: 100%;
    width: 150%;
    height: 150%;
    top: auto;
    bottom: 0%;
    right: auto;
}

#pxb .fun-facts.section {
    border-top: 10px solid var(--Primary);
}

#pxb .fun-facts-box.active .fun-facts-bottom .fun-facts-info span, .fun-facts-box:hover .fun-facts-bottom .fun-facts-info span {
    background-color: var(--Primary);
}


#pxb .faq2__accordion .accordion-item.active {
    border-color: var(--Primary);
}

#pxb .gallery__box .thumbnail .gallery-link {
    top: 50%;
    left: 50%;
    border-radius: 40px;
    overflow: hidden;
    width: 160px;
    height: 160px;
    border-radius: 100%;
    background-color: var(--Primary);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    opacity: 0;
}


#pxb .choose-us__box svg {
    color: var(--Primary);
    width: 65px;
    height: 65px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#pxb .choose-us__box:hover, #pxb .choose-us__box.active {
    background-color: var(--Primary);
}

#pxb .cta__content .stars svg {
    color: var(--Primary);
    animation: rotate 8s linear infinite;
}

#pxb .feature__review {
    gap: 30px;
    left: 10px;
    bottom: 10px;
    background-color: var(--Primary);
    color: #0e0f11;
    border-radius: 20px;
    padding: 20px 25px;
}


#pxb .feature__content .feature-list span svg {
    color: var(--Primary);
}

#pxb .contact-info-box .title i {
    color: var(--Primary);
}

#pxb .progress-wrap svg.progress-circle path {
    fill: #222222;
    stroke: var(--Primary);
    stroke-width: 5;
    box-sizing: border-box;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

#pxb .loader:before {
    animation: ball1 1.5s infinite;
    background-color: #cccccc;
    box-shadow: 30px 0 0 var(--Primary);
    margin-bottom: 10px;
}

#pxb .loader:after {
    animation: ball2 1.5s infinite;
    background-color: var(--Primary);
    box-shadow: 30px 0 0 var(--Primary);
}


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

.about-us__thumb .brand-info2 {
    gap: 20px;
    border-radius: 20px;
    background: rgba(65, 65, 65, 0.5);
    box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(5px);
    padding: 30px;
    right: -20px;
    bottom: 40px;
    display: inline-flex;
    position: absolute;
    content: "";
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 1;
    color: #ffffff;
    font-size: 30px;
    font-weight: 600;
    line-height: 133.333%;
}


@media only screen and (max-width: 1439.98px) {
    .about-us__thumb .brand-info2 {
        padding: 15px 20px;
        border-radius: 10px;
    }
}
@media only screen and (max-width: 575.98px) {
    .about-us__thumb .brand-info2 {
        position: relative;
        right: unset;
        bottom: unset;
        width: 100%;
        gap: 20px;
    }
}


#pxb .blog-single .blockquote.xupito-33 .blockquote-footer cite::before {
    background-color: var(--Xupito33);
}
#pxb .blog-single .blockquote.xupito-40 .blockquote-footer cite::before {
    background-color: var(--Xupito40);
}
#pxb .blog-single .blockquote.xupito-50 .blockquote-footer cite::before {
    background-color: var(--Xupito50);
}
#pxb .blog-single .blockquote.xupito-60 .blockquote-footer cite::before {
    background-color: var(--Xupito60);
}

#pxb .project-box .project-content .project-sub-title.xupito-33::before {
    background-color: var(--Xupito33);
}
#pxb .project-box .project-content .project-sub-title.xupito-40::before {
    background-color: var(--Xupito40);
}
#pxb .project-box .project-content .project-sub-title.xupito-50::before {
    background-color: var(--Xupito50);
}
#pxb .project-box .project-content .project-sub-title.xupito-60::before {
    background-color: var(--Xupito60);
}

#pxb .widget_category.xupito-33 .category-box:hover, #pxb .widget_category.xupito-33 .category-box.active {
    background-color: var(--Xupito33);
}
#pxb .widget_category.xupito-40 .category-box:hover, #pxb .widget_category.xupito-40 .category-box.active {
    background-color: var(--Xupito40);
}
#pxb .widget_category.xupito-50 .category-box:hover, #pxb .widget_category.xupito-50 .category-box.active {
    background-color: var(--Xupito50);
}
#pxb .widget_category.xupito-60 .category-box:hover, #pxb .widget_category.xupito-60 .category-box.active {
    background-color: var(--Xupito60);
}


#pxb .service-details__content .service-lists.xupito-33 ul li::before {
    color: var(--Xupito33);
}
#pxb .service-details__content .service-lists.xupito-40 ul li::before {
    color: var(--Xupito40);
}
#pxb .service-details__content .service-lists.xupito-50 ul li::before {
    color: var(--Xupito50);
}
#pxb .service-details__content .service-lists.xupito-60 ul li::before {
    color: var(--Xupito60);
}

#pxb .widget_category.xupito-33 .category-box:hover .icon, #pxb .widget_category.xupito-33 .category-box.active .icon {
    color: var(--Xupito33);
}
#pxb .widget_category.xupito-40 .category-box:hover .icon, #pxb .widget_category.xupito-40 .category-box.active .icon {
    color: var(--Xupito40);
}
#pxb .widget_category.xupito-50 .category-box:hover .icon, #pxb .widget_category.xupito-50 .category-box.active .icon {
    color: var(--Xupito50);
}
#pxb .widget_category.xupito-60 .category-box:hover .icon, #pxb .widget_category.xupito-60 .category-box.active .icon {
    color: var(--Xupito60);
}



.cocktail__wrapper {
    border-radius: 20px;
    padding: 20px;
}

.cocktail-content-box .cocktail-ingredient-list, .cocktail-content-box .cocktail-ingredient-list span {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
}

.cocktail-content-box .cocktail-ingredient-list {
    flex-wrap: wrap;
}

.cocktail-content-box .cocktail-ingredient-list  span {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.cocktail-content-box .cocktail-thumb {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
}

.cocktail-content-box:hover .cocktail-thumb img {
    -webkit-transform: scale(1.1) rotate(5deg);
    -ms-transform: scale(1.1) rotate(5deg);
    transform: scale(1.1) rotate(5deg);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.cocktail-content-box .title {
    margin-top: 30px;
}

.cocktail-content-box p {
    max-width: 519px;
}
.cocktail-content-box .cocktail-ingredient-list {
    column-gap: 30px;
    row-gap: 20px;
    max-width: 450px;
    margin-block: 20px 30px;
}
@media only screen and (max-width: 575.98px) {
    .cocktail-content-box .cocktail-ingredient-list {
        column-gap: 15px;
        row-gap: 10px;
    }
}
.cocktail-content-box .cocktail-ingredient-list span {
    gap: 15px;
    color: #ffffff;
    font-size: 16px;
}
.cocktail-content-box .cocktail-ingredient-list span.icon {
    color: #d0ff71;
}

@media only screen and (max-width: 991.98px) {
    .cocktail-content-box .title {
        margin-top: 20px;
    }
}

.cocktail-content-box .agx-btn {
    margin-block-start: 20px;
}
@media only screen and (max-width: 991.98px) {
    .cocktail-content-box .agx-btn {
        margin-block-start: 10px;
    }
}
@media only screen and (max-width: 767.98px) {
    /*.cocktail-content-box .agx-btn {
        margin-block-start: 10px;
    }*/
}


.contact .contact-thumb {
    width: 100%;
    border-radius: 40px;
    overflow: hidden;
}


#pxb .project-box.xupito-33 .project-content .project-sub-title::before {
    background-color: var(--Xupito33);
}
#pxb .project-box.xupito-40 .project-content .project-sub-title::before {
    background-color: var(--Xupito40);
}
#pxb .project-box.xupito-50 .project-content .project-sub-title::before {
    background-color: var(--Xupito50);
}
#pxb .project-box.xupito-60 .project-content .project-sub-title::before {
    background-color: var(--Xupito60);
}

#pxb .project-box.xupito-33:hover .project-title .project-btn {
    color: var(--Xupito33);
}
#pxb .project-box.xupito-40:hover .project-title .project-btn {
    color: var(--Xupito40);
}
#pxb .project-box.xupito-50:hover .project-title .project-btn {
    color: var(--Xupito50);
}
#pxb .project-box.xupito-60:hover .project-title .project-btn {
    color: var(--Xupito60);
}


/* Style minimal pour assurer le ratio 1:1 du wrapper */
.svg-wrapper {
 width: 100%;
 aspect-ratio: 1 / 1;
 max-width: 190px;
}


#pxb .service5__box.xupito-33 .main-content .content-title { color: var(--Xupito33); }
#pxb .service5__box.xupito-40 .main-content .content-title { color: var(--Xupito40); }
#pxb .service5__box.xupito-50 .main-content .content-title { color: var(--Xupito50); }
#pxb .service5__box.xupito-60 .main-content .content-title { color: var(--Xupito60); }

#pxb .service5__box.xupito-33 .title { color: var(--Xupito33); }
#pxb .service5__box.xupito-40 .title { color: var(--Xupito40); }
#pxb .service5__box.xupito-50 .title { color: var(--Xupito50); }
#pxb .service5__box.xupito-60 .title { color: var(--Xupito60); }


#pxb .service5__box.xupito-33 .main-content .figure-container .service-link { background-color: var(--Xupito33); }
#pxb .service5__box.xupito-40 .main-content .figure-container .service-link { background-color: var(--Xupito40); }
#pxb .service5__box.xupito-50 .main-content .figure-container .service-link { background-color: var(--Xupito50); }
#pxb .service5__box.xupito-60 .main-content .figure-container .service-link { background-color: var(--Xupito60); }

#pxb .service5__box.xupito-33 .main-content .figure-container { background: var(--Xupito33Dark); }
#pxb .service5__box.xupito-40 .main-content .figure-container { background: var(--Xupito40Dark); }
#pxb .service5__box.xupito-50 .main-content .figure-container { background: var(--Xupito50Dark); }
#pxb .service5__box.xupito-60 .main-content .figure-container { background: var(--Xupito60Dark); }


/* ----- */

 .cocktails__header {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -webkit-box-pack: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: end;
    gap: 15px;
}

@media only screen and (max-width: 991.98px) {
    .cocktails__header {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 25px;
    }
}
.cocktails__header .title {
    font-weight: 600;
    line-height: 120%;
    max-width: 850px;
    width: 100%;
    font-size: 100px;
}
@media only screen and (max-width: 1439.98px) {
    .cocktails__header .title {
        font-size: 90px;
    }
}
@media only screen and (max-width: 991.98px) {
    .cocktails__header .title {
        max-width: 100%;
        font-size: 80px;
    }
}
@media only screen and (max-width: 767.98px) {
    .cocktails__header .title {
        font-size: 65px;
    }
}
@media only screen and (max-width: 575.98px) {
    .cocktails__header .title {
        font-size: 60px;
    }
}
@media only screen and (max-width: 320.98px) {
    .cocktails__header .title {
        font-size: 50px;
    }
}
.cocktails__header .title span {
    color: var(--Primary);
    font-family: "Inter", serif;
    font-style: italic;
    font-weight: 200;
}
.cocktails__header p {
    max-width: 376px;
    width: 100%;
    color: #ffffff;
}
@media only screen and (max-width: 991.98px) {
    .cocktails__header p {
        max-width: 100%;
    }
}


#pxb .contact__form.age_form .form-header-age {
    /*max-width: 800px;*/
    /*width: 100%;*/
    text-align: center;
    padding:20px;
}

#pxb .contact__form.age_form .age_form_error {
    color: var(--Error);
}