:root {
     --primary: #6366f1;
     --primary-dark: #4f46e5;
     --primary-light: #e0e7ff;
     --secondary: #a78bfa;
     --bg-light: #f3f0ff;
     --text-dark: #1f2937;
     --text-light: #6b7280;
     --white: #ffffff;
     --success: #10b981;
 }

 * {
     margin: 0px;
     padding: 0px;
     border: none;
     outline: none;
 }

 .row {
     --bs-gutter-x: 30px;
 }

 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     color: var(--text-dark);
     line-height: 1.6;
     background-color: var(--white);
 }

 .boxed_wrapper {
     position: relative;
     overflow-x: hidden;
     margin: 0 auto;
     width: 100%;
     background-color: #ffffff;
     min-width: 300px;
 }

 .boxed_wrapper.dark-bg {
     background-color: #060702;
 }

 .container-fulid {
     max-width: 1920px;
     width: 100%;
     margin: 0 auto;
 }

 .container {
     max-width: 1320px;
     width: 100%;
 }

 a {
     text-decoration: none;
     transition: all 500ms ease;
     -moz-transition: all 500ms ease;
     -webkit-transition: all 500ms ease;
     -ms-transition: all 500ms ease;
     -o-transition: all 500ms ease;
 }

 a:hover {
     text-decoration: none;
     outline: none;
 }

 input,
 button,
 select,
 textarea {
     font-weight: 400;
     font-size: 14px;
     background: transparent;
 }

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

 ::-moz-input-placeholder {
     color: inherit;
 }

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

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

 button:focus,
 input:focus,
 textarea:focus {
     outline: none;
     box-shadow: none;
 }

 p {
     font-style: normal;
     font-weight: 400;
     font-size: 16px;
     line-height: 24px;
     margin: 0;
     color: var(--primary-color);
     font-family: var(--secondary-font);
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     margin: 0;
     color: var(--primary-color);
     font-family: var(--primary-font);
 }

 h1 {
     font-size: 64px;
     line-height: 74px;
     font-weight: 700;
 }

 h2 {
     font-size: 48px;
     line-height: 56px;
     font-weight: 700;
 }

 h3 {
     font-size: 32px;
     line-height: 42px;
     font-weight: 700;
 }

 h4 {
     font-size: 24px;
     line-height: 30px;
     font-weight: 700;
 }

 h5 {
     font-size: 20px;
     line-height: 30px;
 }

 h6 {
     font-size: 16px;
     line-height: 28px;
 }

 .centred {
     text-align: center;
 }

 figure {
     margin: 0px;
 }

 img {
     display: inline-block;
     max-width: 100%;
     height: auto;
     transition-delay: .1s;
     transition-timing-function: ease-in-out;
     transition-duration: .7s;
     transition-property: all;
 }

 /* Preloader */
 .handle-preloader {
     align-items: center;
     -webkit-align-items: center;
     display: flex;
     display: -ms-flexbox;
     height: 100%;
     justify-content: center;
     -webkit-justify-content: center;
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     background: var(--theme-color);
     z-index: 9999999;
 }

 .preloader-close {
     position: fixed;
     z-index: 99999999;
     font-size: 18px;
     background: #fff;
     width: 30px;
     height: 30px;
     line-height: 26px;
     text-align: center;
     cursor: pointer;
     right: 15px;
     top: 15px;
     border-radius: 50%;
 }

 .handle-preloader .animation-preloader {
     position: absolute;
     z-index: 100;
 }

 .handle-preloader .animation-preloader .spinner {
     animation: spinner 1s infinite linear;
     border-radius: 50%;
     height: 150px;
     margin: 0 auto 45px auto;
     width: 150px;
 }

 .handle-preloader .animation-preloader .txt-loading {
     text-align: center;
     user-select: none;
 }

 .handle-preloader .animation-preloader .txt-loading .letters-loading:before {
     animation: letters-loading 4s infinite;
     content: attr(data-text-preloader);
     left: 0;
     opacity: 0;
     top: 0;
     position: absolute;
 }

 .handle-preloader .animation-preloader .txt-loading .letters-loading {
     font-family: var(--primary-font);
     font-weight: 500;
     letter-spacing: 15px;
     display: inline-block;
     position: relative;
     font-size: 70px;
     line-height: 70px;
     text-transform: uppercase;
     color: transparent;
     -webkit-text-stroke-width: 1px;
     -webkit-text-stroke-color: rgba(255, 255, 255, 0.30);
 }

 .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before {
     animation-delay: 0.2s;
 }

 .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before {
     animation-delay: 0.4s;
 }

 .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before {
     animation-delay: 0.6s;
 }

 .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before {
     animation-delay: 0.8s;
 }

 .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before {
     animation-delay: 1s;
 }

 .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before {
     animation-delay: 1.2s;
 }

 .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before {
     animation-delay: 1.4s;
 }

 .handle-preloader .loader-section {
     background-color: #ffffff;
     height: 100%;
     position: fixed;
     top: 0;
     width: calc(50% + 1px);
 }

 .preloader .loaded .animation-preloader {
     opacity: 0;
     transition: 0.3s ease-out;
 }

 .handle-preloader .animation-preloader .txt-loading .letters-loading {}

 .handle-preloader .animation-preloader .txt-loading .letters-loading:before {
     color: #ffffff;
 }

 .handle-preloader .animation-preloader .spinner {
     border: 3px solid #ffffff;
     border-top-color: rgba(255, 255, 255, 0.5);
 }

 /* Animación del preloader */
 @keyframes spinner {
     to {
         transform: rotateZ(360deg);
     }
 }

 @keyframes letters-loading {

     0%,
     75%,
     100% {
         opacity: 0;
         transform: rotateY(-90deg);
     }

     25%,
     50% {
         opacity: 1;
         transform: rotateY(0deg);
     }
 }

 @media screen and (max-width: 767px) {
     .handle-preloader .animation-preloader .spinner {
         height: 8em;
         width: 8em;
     }
 }

 @media screen and (max-width: 500px) {
     .handle-preloader .animation-preloader .spinner {
         height: 7em;
         width: 7em;
     }

     .handle-preloader .animation-preloader .txt-loading .letters-loading {
         font-size: 30px;
         letter-spacing: 10px;
     }
 }

 .social-links {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-wrap: wrap;
 }

 .social-links li a {
     display: inline-block;
     font-size: 20px;
     width: 44px;
     height: 44px;
     line-height: 44px;
     text-align: center;
     border-radius: 30px;
     color: rgb(255 255 255 / 30%);
     border: 1px solid rgba(255, 255, 255, 0.35);
     transition: all .5s;
 }

 .social-links li a:hover {
     color: #fff;
     background-color: var(--theme-color);
     border-color: var(--theme-color);
 }

 .owl-dots-none .owl-dots,
 .owl-nav-none .owl-nav {
     display: none !important;
 }

 .accordion_box .block .acc-content {
     display: none;
 }

 .accordion_box .block .acc-content.current {
     display: block;
 }

 .mr_30 {
     margin-right: 30px;
 }

 .pt_50 {
     padding-top: 50px;
 }

 .mb_60 {
     margin-bottom: 60px;
 }

 .mb_50 {
     margin-bottom: 50px;
 }

 .mb_30 {
     margin-bottom: 30px;
 }

 .pt_120 {
     padding-top: 120px;
 }

 .pb_120 {
     padding-bottom: 120px;
 }

 .pb_90 {
     padding-bottom: 90px;
 }

 .pb_60 {
     padding-bottom: 60px;
 }

 .section-title-box {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     margin-bottom: 60px;
 }

 .section-title.mb_60 {
     margin-bottom: 60px;
 }

 .section-title span.sub-title {
     font-size: 13px;
     line-height: 19px;
     display: inline-block;
     font-weight: 500;
     margin-bottom: 15px;
     border-radius: 50px;
     color: var(--theme-color);
     padding: 5px 12px;
     background: rgb(255 44 59 / 10%);
     text-transform: uppercase;
     font-family: var(--secondary-font);
 }

 .section-title h2.title {
     font-size: 44px;
     line-height: 56px;
     display: block;
     font-weight: 600;
     color: var(--primary-color);
     text-transform: capitalize;
     font-family: var(--primary-font);
 }

 .section-title.light h2.title {
     color: #ffffff;
 }

 @media only screen and (max-width: 1199px) {
     .section-title h2.title {
         font-size: 36px;
         line-height: 46px;
     }
 }

 @media only screen and (max-width: 500px) {
     .section-title h2.title {
         font-size: 30px;
         line-height: 40px;
     }
 }

 @-webkit-keyframes ripple {
     70% {
         -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
         box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
     }

     100% {
         -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
         box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
     }
 }

 @keyframes ripple {
     70% {
         -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
         box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
     }

     100% {
         -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
         box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
     }
 }

 .btn-style-one {
     font-size: 18px;
     font-style: normal;
     font-weight: 500;
     line-height: 26px;
     display: inline-block;
     border-radius: 5px;
     color: var(--theme-color);
     padding: 6px 30px 6px 30px;
     font-family: var(--primary-font);
     background: transparent;
     border: 1px solid var(--theme-color);
     transition: all .5s;
 }

 .btn-style-one:hover {
     color: var(--bs-white);
     background: var(--theme-color);
 }

 .btn-style-two {
     position: relative;
     display: inline-block;
     padding: 0px 25px;
     border-radius: 50px;
     background: var(--primary-color);
     color: #fff;
     border: 1px solid var(--primary-color);
     line-height: 56px;
     min-width: 160px;
     font-weight: 500;
     font-size: 18px;
     text-align: center;
     transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
     -ms-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
 }

 .btn-style-two:hover {
     background: #fff;
     color: var(--theme-color);
     border-color: var(--theme-color);
 }

 .btn-style-three {
     font-size: 18px;
     line-height: 28px;
     font-weight: 500;
     color: var(--primary-color);
     border-radius: 5px;
     display: inline-block;
     padding: 5px 20px;
     font-family: var(--primary-font);
     border: 1px solid var(--primary-color);
     transition: all 500ms;
 }

 .btn-style-three:hover {
     color: #ffffff;
     background: var(--theme-color);
     border-color: var(--theme-color);
 }

 .btn-style-four {
     color: #fff;
     font-family: var(--primary-font);
     font-size: 18px;
     font-weight: 500;
     line-height: 1;
     display: inline-block;
     letter-spacing: .54px;
     white-space: nowrap;
     background-color: var(--theme-color);
     padding: 20px 50px;
     border-radius: 5px;
     overflow: hidden;
     position: relative;
     z-index: 1;
 }

 .btn-style-four::after {
     position: absolute;
     content: "";
     display: block;
     left: -20%;
     right: -20%;
     top: -4%;
     height: 150%;
     width: 150%;
     bottom: 0;
     border-radius: 2px;
     background-color: #000;
     transform: skewX(45deg) scale(0, 1);
     z-index: -1;
     transition: all .5s ease-out 0s;
 }

 .btn-style-four:hover {
     color: #fff
 }

 .btn-style-four:hover::after {
     transform: skewX(45deg) scale(1, 1)
 }

 .btn-style-five {
     color: #fff;
     font-family: var(--primary-font);
     font-size: 14px;
     font-weight: 500;
     line-height: 20px;
     display: inline-block;
     letter-spacing: .54px;
     white-space: nowrap;
     background-color: var(--primary-color);
     padding: 10px 25px;
     border-radius: 5px;
     overflow: hidden;
     position: relative;
     z-index: 1;
 }

 .btn-style-five::after {
     position: absolute;
     content: "";
     display: block;
     left: -20%;
     right: -20%;
     top: -4%;
     height: 150%;
     width: 150%;
     bottom: 0;
     border-radius: 2px;
     background-color: var(--theme-color);
     transform: skewX(45deg) scale(0, 1);
     z-index: -1;
     transition: all .5s ease-out 0s
 }

 .btn-style-five:hover {
     color: #fff
 }

 .btn-style-five:hover::after {
     transform: skewX(45deg) scale(1, 1)
 }

 .btn-style-six {
     color: #fff;
     font-family: var(--primary-font);
     font-size: 18px;
     font-weight: 500;
     line-height: 20px;
     display: inline-block;
     letter-spacing: .54px;
     white-space: nowrap;
     padding: 10px 25px;
     border-radius: 5px;
     overflow: hidden;
     position: relative;
     z-index: 1;
     background-image: linear-gradient(270deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 35%));
     border: 1px solid rgb(255 255 255 / 10%);
 }

 .btn-style-six::after {
     position: absolute;
     content: "";
     display: block;
     left: -20%;
     right: -20%;
     top: -4%;
     height: 150%;
     width: 150%;
     bottom: 0;
     border-radius: 2px;
     background-color: var(--theme-color);
     transform: skewX(45deg) scale(0, 1);
     z-index: -1;
     transition: all .5s ease-out 0s
 }

 .btn-style-six:hover {
     color: #fff;
     border-color: var(--theme-color);
 }

 .btn-style-six:hover::after {
     transform: skewX(45deg) scale(1, 1)
 }

 .btn-style-seven {
     position: relative;
     font-family: var(--primary-font);
     font-size: 18px;
     font-weight: 500;
     line-height: 30px;
     letter-spacing: .54px;
     white-space: nowrap;
     border-radius: 5px;
     overflow: hidden;
     z-index: 1;
     color: #ffffff;
     background: var(--primary-color);
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 10px 35px;
 }

 .btn-style-seven::after {
     position: absolute;
     content: "";
     display: block;
     left: -20%;
     right: -20%;
     top: -4%;
     height: 150%;
     width: 150%;
     bottom: 0;
     border-radius: 2px;
     background-color: #fff;
     transform: skewX(45deg) scale(0, 1);
     z-index: -1;
     transition: all .5s ease-out 0s;
 }

 .btn-style-seven:hover {
     color: var(--theme-color);
 }

 .btn-style-seven:hover::after {
     transform: skewX(45deg) scale(1, 1)
 }

 .btn-style-eight {
     position: relative;
     font-family: var(--primary-font);
     font-size: 18px;
     font-weight: 500;
     line-height: 30px;
     letter-spacing: .54px;
     white-space: nowrap;
     border-radius: 5px;
     overflow: hidden;
     z-index: 1;
     color: var(--theme-color);
     background: rgb(255 44 59 / 10%);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     padding: 10px 35px;
 }

 .btn-style-eight::after {
     position: absolute;
     content: "";
     display: block;
     left: -20%;
     right: -20%;
     top: -4%;
     height: 150%;
     width: 150%;
     bottom: 0;
     border-radius: 2px;
     background-color: var(--theme-color);
     transform: skewX(45deg) scale(0, 1);
     z-index: -1;
     transition: all .5s ease-out 0s;
 }

 .btn-style-eight:hover {
     color: #ffffff;
 }

 .btn-style-eight:hover::after {
     transform: skewX(45deg) scale(1, 1)
 }

 .border-divider {
     width: 100%;
     height: 1px;
     border-radius: 6px;
     background-color: #E5E5E5;
 }

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

 .owl_nav_one.theme_carousel .owl-nav {
     position: absolute;
     top: calc(50% - 30px);
     left: -90px;
     right: -90px;
 }

 .owl_nav_one.theme_carousel .owl-nav button {
     width: 60px;
     height: 60px;
     text-align: center;
     line-height: 60px;
     border-radius: 50%;
     color: #000000;
     font-size: 20px;
     background: #fff;
     z-index: 99;
     box-shadow: 0 10px 40px rgb(0 0 0 / 8%);
 }

 .owl_nav_one.theme_carousel .owl-nav button:hover {
     color: #ffffff;
     background: var(--theme-color);
 }

 .owl_nav_one.theme_carousel .owl-nav button.owl-prev {
     position: absolute;
     left: 0;
     top: calc(50% - 30px);
 }

 .owl_nav_one.theme_carousel .owl-nav button.owl-next {
     position: absolute;
     right: 0;
     top: calc(50% - 30px);
 }

 .owl_nav_two.theme_carousel .owl-nav {
     position: absolute;
     top: calc(50% - 30px);
     left: -90px;
     right: -90px;
 }

 .owl_nav_two.theme_carousel .owl-nav button {
     width: 60px;
     height: 60px;
     text-align: center;
     line-height: 60px;
     border-radius: 50%;
     color: #fff;
     font-size: 20px;
     z-index: 99;
     box-shadow: 0 8.69px 43.46px rgb(0 0 0 / 25%);
     background: rgb(255 255 255 / 10%);
 }

 .owl_nav_two.theme_carousel .owl-nav button:hover {
     color: #ffffff;
     background: var(--theme-color);
 }

 .owl_nav_two.theme_carousel .owl-nav button.owl-prev {
     position: absolute;
     left: 0;
     top: calc(50% - 30px);
 }

 .owl_nav_two.theme_carousel .owl-nav button.owl-next {
     position: absolute;
     right: 0;
     top: calc(50% - 30px);
 }

 .owl_dot_one.theme_carousel .owl-dots {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
 }

 .owl_dot_one.theme_carousel .owl-dots button.owl-dot {
     position: relative;
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: transparent;
     border: 1px solid #303030;
 }

 .owl_dot_one.theme_carousel .owl-dots button.owl-dot:before {
     position: absolute;
     top: -5px;
     left: -5px;
     width: 18px;
     height: 18px;
     content: '';
     border-radius: 50%;
 }

 .owl_dot_one.theme_carousel .owl-dots button.owl-dot.active {
     background: var(--theme-color);
     border-color: var(--theme-color);
 }

 .owl_dot_one.theme_carousel .owl-dots button.owl-dot.active:before {
     border: 1px solid var(--theme-color);
 }

 /** Styled Pagination */
 .pagination {
     position: relative;
     display: block;
 }

 .pagination {
     position: relative;
     display: flex;
     align-items: center;
     gap: 5px;
     margin-top: 40px;
 }

 .pagination li a {
     position: relative;
     display: inline-block;
     font-size: 18px;
     font-family: var(--primary-font);
     color: var(--primary-color);
     font-weight: 500;
     height: 60px;
     width: 60px;
     line-height: 60px;
     background: #ffffff;
     text-align: center;
     border-radius: 50%;
     z-index: 1;
     transition: all 500ms ease;
 }

 .pagination li a:hover,
 .pagination li a.current {
     color: #fff;
     background-color: var(--theme-color);
 }

 .pagination li a i {
     position: relative;
     font-size: 20px;
 }

 /** Styled Pagination End */

 @media only screen and (max-width: 500px) {
     .pt_120 {
         padding-top: 60px;
     }

     .pb_120 {
         padding-bottom: 60px;
     }

     .pb_90 {
         padding-bottom: 60px;
     }

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