/*===============================================
Template Name: Pixelevo - Digital Marketing & Creative Agency HTML5 Template
Author:  Dream-IT Solutions.
Author URL : https://www.templatemonster.com/authors/dreamit/
Description: Description
Version: 1.0.0
Text Domain: Pixelevo
Tags: agency, business, case studies, corporate, digital agency, digital marketing, digital marketing agency, html 5, marketing, marketing agency, modern, shop/woocommerce, technology, web design
================================================*/

/*TABLE OF CONTENTS*/
/*=====================
01. pixelevo Header Area Css
03. pixelevo Hero Area Css
04. pixelevo About Area Css
05. pixelevo marquee Area Css
06. pixelevo Counter Area Css
07. pixelevo Service Area Css
08. pixelevo Team Area Css
09. pixelevo Portfolio Area Css
10. pixelevo Testimonial Area Css
11. pixelevo Feature Area Css
12. pixelevo Blog Area Css
13. pixelevo Footer Area Css
15. pixelevo Contact Area Css
16. pixelevo Breadcrumb Area Css
17. pixelevo Chooose Sections Css
18. pixelevo Pricing Area Css
19. pixelevo Team Detialas Page  Css
20. pixelevo Login Page  Css 
21. pixelevo Project details Area Css 
22. pixelevo Sinup Page  Css 
23. pixelevo Blog Details  Css 
24. pixelevo Service Details  Css 
25. pixelevo Sidebar Area  Css 
25. pixelevo Contact Area  Css 
26. pixelevo Loader  Css

=======================*/


/*---=================================
   <!--pixelevo Header Area Css-->
==================================---*/
.header-area {
    position: relative;
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.16);
    margin-bottom: -100px;
    z-index: 2;
}
.pixelevo-menu {
    text-align: right;
}
.header-menu {
    text-align: center;
    display: inline-block;
}
.header-menu ul li {
    display: inline-block;
    margin-right: 32px;
    position: relative;
}
.header-menu ul li a {
    display: inline-block;
    font-size: 15px;
    color: var(--solid-white);
    font-weight: 400;
    padding: 37px 0;
    transition: 0.5s;
    font-family: var(--fonts-title);
    position: relative;
    z-index: 1;
}
.header-menu ul li a:hover {
    color: var(--primary-color);
}
.header-menu ul li a i {
    margin-left: 6px;
    font-size: 15px;
}

/* Sub Menu */

ul.sub-menu {
    position: absolute;
    width: 250px;
    display: block;
    text-align: left;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
    top: 150%;
    z-index: 2;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    border-top: 5px solid var(--primary-color);
    border-radius: 3px 3px 0 0;
}
.header-menu ul li:hover .sub-menu{
    opacity: 1;
    top: 110%;
    visibility: visible;
}
.header-menu ul li .sub-menu li {
    position: relative;
    margin-right: 0;
    display: block;
}
.header-menu ul li .sub-menu li a {
    display: block;
    padding: 8px 19px !important;
    color: #1e1e1e;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 400;
    transition: 0.5s;
    position: relative;
    z-index: 1;
}
.header-menu ul li .sub-menu li a:hover {
    color: var(--body-color);
}
.header-menu ul li .sub-menu li a::after{
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    left: 0;
    bottom: 0;
    background: var(--primary-color);
    z-index: -1;
    transition: 0.5s;
}

.header-menu ul li .sub-menu li a:hover:after{
    height:100%;
    top: 0;
}

.sticky {
    left: 0;
    margin: auto;
    position: fixed !important;
    top: 0;
    width: 100%;
    -webkit-box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    background: var(--bg-color) !important;
    transition: 0.5s;
    z-index: 999 !important;
    -webkit-animation: 300ms running fadeInDown;
    animation: 500ms running fadeInUp;
    animation-name: slideInDown;
}

/* header right right */

.header-right-side {
    display: inline-block;
}
.header-btn {
    display: inline-block;
    margin-left: 105px;
}
.header-btn a {
    display: inline-block;
    border-radius: 25px;
    background-color: var(--primary-color);
    padding: 12px 22px;
    font-size: 15px;
    text-transform: uppercase;
    color: #141414;
    font-weight: 400;
    font-family: "Unbounded";
    position: relative;
    z-index: 1;
}
.header-btn a:before {
    position: absolute;
    content: '';
    right: 0;
    top: 0;
    background: var(--solid-white);
    width: 0;
    height: 100%;
    z-index: -1;
    transition: 0.5s;
    border-radius: 25px;
}
.header-btn a:hover:before {
    width: 100%;
    left: 0;
}
.header-btn a:hover {
    color: var(--primary-color);
}

.header-btn a i {
    font-weight: 700;
    font-size: 15px;
    transform: rotate(-45deg);
    display: inline-block;
    margin-left: 4px;
    transition: 0.5s;
}
.header-btn a:hover i {
    color: var(--primary-color);
}
.header-sidbar {
    display: inline-block;
}
.header-sidbar a {
    display: inline-block;
    background: rgba(252,252,252,0.1)!important;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    color: #fff;
    line-height: 50px;
    text-align: center;
    font-size: 25px;
    margin-left: 10px;
}

/* Header Section Style Two */

.header-area.style_two {
    padding: 45px 85px 0 70px;
    border: 0;
    margin-bottom: -115px;
    z-index: 2;
}
.header-area.style_two .pixelevo-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 105px;
}
.header-area.style_two .header-menu {
    border-radius: 35px;
    background-color: rgba(255,255,255,0.10196078431372549);
    border: 2px solid rgba(255,255,255,0.17);
    padding: 0 50px;
}
.header-area.style_two .header-menu ul li:last-child {
    margin: 0;
}
.header-area.style_two .header-menu ul li a {
    padding: 20px 0;
}
.sticky.header-area.style_two  {
    padding: 20px 85px 20px 70px;
}

/*---=================================
   <!--pixelevo Hero Area Css-->
==================================---*/

.hero-area {
    height: 920px;
    background: url(../images/main-home/banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}
.hero-content {
    position: relative;
    z-index: 1;
    margin-top: 170px;
}
.hero-title h1 {
    font-size: 120px;
    font-weight: 500;
    -webkit-text-stroke: 1px var(--solid-white);
    color: transparent;
    text-align: center;
    line-height: 130px;
    position: relative;

}
.hero-title h1:nth-child(1):before {
    position: absolute;
    content: '';
    left: 16%;
    top: 18px;
    background: var(--primary-color);
    height: 50px;
    width: 50px;
    border-radius: 50%;
    z-index: -1;
    animation-name: float-bob2;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
h1.hero-style-title {
    color: var(--solid-white);
    text-align: left;
    -webkit-text-stroke: 0;
}
h1.hero-style-title span {
    color: var(--primary-color);
    text-align: left;
}
p.hero-description {
    margin: 0;
    position: absolute;
    right: -36px;
    top: 50%;
    transform: translateY(-50%);
    width: 26%;
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
    font-family: var(--fonts-body);
}

.hero-video-box {
    background: url(../images/main-home/button-shape.png);
    background-repeat: no-repeat;
    width: 18%;
    padding: 7px 8px;
    align-items: center;
    position: absolute;
    left: 0;
    display: inline-block;
    bottom: 4%;
}
.video-icon a {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: var(--primary-color);
    display: inline-block;
    text-align: center;
    line-height: 65px;
    color: var(--secondary-color);
    font-size: 30px;
}


.flip-rotate {
    position: absolute;
    top: -15%;
    right: 0;
}
/*animation circle*/
.text-inner {
    animation: circle 15s linear infinite;
    animation: circle 15s linear infinite;
    position: relative;
    z-index: 22;
    fill: transparent;
}
.text-inner svg {
    width: 111px;
    max-width: 100%;
    height: auto;
    overflow: visible;
    word-spacing: 26px;
    transform: rotate(0) scaleX(1) scaleY(1);
    position: relative;
}
.text-inner text {
    fill: #ffffff;
    direction: ltr;
    transition: 0.3s stroke, 0.3s stroke-width, 0.3s fill;
    font-size: 35px;
    font-weight: 400;
    position: relative;
    z-index: 2;
    font-family: "Unbounded";
}
a.banner-play-btn {
    width: 165px;
    height: 165px;
    border-radius: 50%;
    background-color: rgba(252,252,252,0.1)!important;
    overflow: hidden;
    line-height: 165px;
    text-align: center;
    position: relative;
    display: inline-block;
}
.like {
position: absolute;
top: 52%;
transform: translate(-50%, -50%);
left: 50%;
}
@keyframes circle {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(-360deg);
    }
  }
  .circle {
      animation: circle 15s linear infinite;
  }
  .right {
    animation: right 15s linear infinite;
  }
  .spin2 {
    animation: spin2 15s linear infinite;
  }
  @keyframes right {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes animate-positive {
    0% {
      width: 0;
    }
  }
  
  /* get in toouch button */

  .get-in-touch-btn {
    position: absolute;
    bottom: 98px;
    left: 0;
    
}
.get-in-touch-btn a {
    display: block;
    font-size: 14px;
    line-height: 80px;
    color: #f4f4f4;
    font-weight: 400;
    font-family: "Unbounded";
    transform: rotate(-90deg);
    position: relative;
    z-index: 1;
}
.get-in-touch-btn a:before {
    position: absolute;
    content: '';
    left: -19px;
    bottom: 12px;
    height: 55px;
    width: 55px;
    background: rgba(252,252,252,0.1);
    border-radius: 50%;
}

/* Hero Area Style Two */

.hero-area.style_two.d-flex.align-items-center {
    background: url(../images/home-2/banner-bg.jpg);
}
.hero-content.style_two {
    text-align: center;
}
.hero-content.style_two .hero-title h1 {
    font-size: 80px;
    font-weight: 500;
    -webkit-text-stroke: 0;
    color: #fff;
    line-height: 100px;
    margin: 0;
}
.hero-content.style_two .hero-title h1:nth-child(1):before {
    display: none;
}
.hero-content.style_two .hero-title h1 span {
    color: var(--primary-color);
    font-size: 92px;
    font-weight: 600;
    display: inline-block;
    margin-left: 290px;
}
.hero-content.style_two p {
    font-size: 26px;
    line-height: 36px;
    color: #ffffff;
    font-weight: 400;
    font-family: var(--fonts-title);
    width: 65%;
    text-align: center;
    margin: 32px auto 0;
}
.hero-content.style_two .hero-video-box {
    padding: 7px 8px;
    text-align: left;
    left: 19%;
    bottom: 55%;
    background: url(../images/home-2/video-shpae.png);
    background-repeat: no-repeat;
}
.flip-rotate.style_two {
    top: inherit;
    bottom: -13%;
    right: -4%;
}
/* Hero Button */

.hero-main-btn {
    margin-top: 42px;
}
.hero_btn a {
    border-radius: 33px;
    background-color: rgba(51,51,51,0);
    border: 2px solid rgba(255,255,255,0.5);
    display: inline-block;
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Unbounded";
    padding: 17px 34px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: color 0.4s ease-in-out;
}
.hero_btn a::before, .hero_btn a::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    left: 0;
    bottom: -100%;
    transition: bottom 0.4s ease-in-out, opacity 0.4s ease-in-out;
    opacity: 1;
}
.hero_btn a::after {
    background: rgba(255, 255, 255, 0.2);
    transition-delay: 0.1s;
}
.hero_btn a:hover::before, .hero_btn a:hover::after {
    bottom: 0;
    opacity: 0;
}
.hero_btn a i {
    font-size: 19px;
    font-weight: 600;
    margin-left: 8px;
}
.hero_btn a:last-child {
    background: var(--primary-color);
    border: 2px solid var(--primay-color);
    color: var(--body-color);
    margin-left: 15px;
}

/*===============================================
    Start Marquee Area
================================================*/
.marquee_area {
  padding: 37px 0;
  background: var(--primary-color);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.marquee_area .container-fluid {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.marquee.style1 {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
}

.marquee.style1 .marquee__item {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: marquee 25s linear infinite;
}

.marquee.style1 .marquee__item .banner-marque-bottom {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: max-content;
}

.marquee.style1 .marquee__item .banner-marque-bottom p {
  display: flex;
  align-items: center;
  margin: 0 33px 0 0;
  text-align: center;
  font-size: 28px;
  color: var(--title-color);
  font-weight: 500;
  font-family: "Unbounded";
  white-space: nowrap;
}

.marquee.style1 .marquee__item .banner-marque-bottom p .seperator {
  margin-left: 35px;
  display: flex;
  align-items: center;
}

.marquee.style1 .marquee__item .banner-marque-bottom p .seperator img {
  width: 20px;
  height: 20px;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/*Section Title Css*/

.section-main-title {
    margin-bottom: 30px;
}
.section-main-title h4 {
    font-size: 14px;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 400;
    margin: 0 0 15px;
}
.section-main-title h4 i {
    display: inline-block;
    height: 17px;
    width: 17px;
    background: var(--primary-color);
    line-height: 17px;
    border-radius: 50%;
    text-align: center;
    color: var(--body-color);
    font-size: 17px;
    margin-right: 8px;
}
.section-main-title h1 {
    color: #f3f6f3;
    font-size: 42px;
    line-height: 55px;
    margin: 0;
}
.section-main-title span {
    display: inline-block;
    color: var(--primary-color);
}
p.description {
    font-size: 16px;
    color: #ffffffd1;
    width: 59%;
    margin: 15px 0 0;
}
.section-main-title.text-center {
    margin-bottom: 53px;
}

/* Pagination btn */

.pagination_btn {
    text-align: center;
    margin-top: 15px;
}
.pagination_btn a {
    font-size: 16px;
    text-decoration: underline;
    color: var(--primary-color);
    font-weight: 400;
    font-family: "Unbounded";
    text-align: center;
    display: inline-block;
}
.pagination_btn a:hover {
    color: var(--solid-white);
}

/*---=================================
   <!--pixelevo About Area Css-->
==================================---*/

.about-area {
    background: #141414;
    padding: 120px 0 120px  188px;
}
.about-thumb {
    position: relative;
    z-index: 1;
}
.about_coun-box {
    background: #1e1e1e;
    padding: 24px 40px 8px 30px;
    border-radius: 20px;
    position: absolute;
    top: 0;
    width: 36%;
}
.about-left-content h3 {
    font-size: 24px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Unbounded";
    margin: 16px 0 12px;
}
.about-left-content p {
    font-size: 15px;
    line-height: 23px;
    color: #ffffffb5;
    font-weight: 400;
    font-family: "Open Sans";
}

ul.about-list li {
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Unbounded";
    margin-bottom: 18px;
    display: flex;
    gap: 10px;
    align-items: center;
}
.pixelevo-btn {
    margin-top: 48px;
}

.pixelevo-btn a {
    display: inline-block;
    border-top: 1px solid var(--primary-color);
    border-left: 1px solid var(--primary-color);
    border-right: 1px solid var(--primary-color);
    border-bottom: 5px solid var(--primary-color);
    font-size: 14px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Unbounded";
    padding: 10px 24px;
    border-radius: 25px;
    position: relative;
    z-index: 1;
}
.pixelevo-btn a:hover {
    border-top: 1px solid var(--solid-white);
    border-left: 1px solid var(--solid-white);
    border-right: 1px solid var(--solid-white);
    border-bottom: 5px solid var(--solid-white);
    color: var(--secondary-color);
    background: var(--primary-color);

}
.pixelevo-btn a i {
    position: absolute;
    right: -50px;
    height: 51px;
    width: 49px;
    line-height: 46px;
    border-top: 1px solid var(--primary-color);
    border-left: 1px solid var(--primary-color);
    border-right: 1px solid var(--primary-color);
    border-bottom: 5px solid var(--primary-color);
    top: -1px;
    border-radius: 50%;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    transition: 0.5s;
}
.pixelevo-btn a:hover i {
    border-top: 1px solid var(--solid-white);
    border-left: 1px solid var(--solid-white);
    border-right: 1px solid var(--solid-white);
    border-bottom: 5px solid var(--solid-white);
    background: var(--primary-color);
    color: var(--secondary-color);
}
.pixelevo-btn.style_three a {
    padding: 10px 34px;
}
.pixelevo-btn.style_four a {
    display: inline-block;
    text-transform: uppercase;
}
.pixelevo-btn.style_four.text-right {
    text-align: right;
    margin-right: 48px;
}

/* About Section Style two */

.about-area.style_two {
    padding: 120px 0 120px;
}
.about_coun-box.style_two {
    top: inherit;
    bottom: 0;
    width: 48%;
    padding: 17px 40px 8px 30px;
}
/* Boxed */

.boxed {
    position: relative;
    width: calc(100% - 120px);
    margin: 0 0 0 60px;
    height: 100%;
    left: 0;
    z-index: 5;
    border-radius: 25px;
}


/*====================================================
    Start pixelevo Counter Area Css
======================================================*/

.counter_area {
    background: #141414;
    padding: 0 0 90px;
}
.counter_single_item {
    text-align: center;
    border: 1px solid #ffffff6e;
    border-radius: 20px;
    padding: 18px 0 38px;
    margin-bottom: 30px;
}
.counter_content h1 {
    display: inline-block;
    font-size: 60px;
    color: transparent;
    font-weight: 500;
    -webkit-text-stroke: 1px #ffffff;
}
.counter_content p {
    font-size: 17px;
    color: #ffffffd9;
    font-weight: 500;
    font-family: "Open Sans";
    margin: 4px 0 0;
}


/*===============================================
    Start pixelevo Service  Area Css
================================================*/

.service_area {
    background: #1E1E1E;
    padding: 120px 0 90px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.service_single_item {
    background: #141414;
    padding: 45px 40px 21px;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
    border-radius: 20px;
}
.service_single_item::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    transition: .5s;
    border-radius: 20px;
    background: url(../images/main-home/service-shape.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.service_single_item:hover:before{
    transform:rotateX(90deg);
}
.service_single_item::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    transition: .5s;
    border-radius: 20px;
    background: url(../images/main-home/service-shape.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.service_single_item:hover:after{
    transform:rotateY(90deg);
}
.service-icon-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.service-icon {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    background-color: #ffffff0d;
    line-height: 80px;
    text-align: center;
}
.service-btn a i {
    font-size: 20px;
    color: #fff;
    font-weight: 700;
    display: inline-block;
    transition: 0.5s;
}
.service_single_item:hover .service-btn a i {
    transform: rotate(-45deg);
    color: var(--primary-color);
}
.service_content h3 {
    margin: 104px 0 19px;
    transition: 0.5s;
    font-size: 22px;
    color: #ffffff;
    font-weight: 500;
    min-height: 60px;
}

.service_single_item:hover .service_content h3  {
    color: var(--primary-color);
    min-height: 60px;
}
.service_content p {
    transition: 0.5s;
    font-size: 16px;
    color: #ffffffb3;
    font-weight: 400;
    min-height: 160px;
}

.pixelevo-right {
    margin-bottom: 24px;
}
.pixelevo-btn.style_two {
    margin-top: 33px;
}

/* service sections style Two */

.service_area.style_two {
    padding: 120px 0 115px;
}
.service_single_items {
    margin-bottom: 30px;
}
.service-thumb {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 20px;
}
.service-thumb img {
    width: 100%;
}
.service-thumb::before, .service-thumb::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    left: 0;
    bottom: -100%;
    transition: bottom 0.4s ease-in-out, opacity 0.4s ease-in-out;
    opacity: 1;
}
.service-thumb::after {
    background: rgba(255, 255, 255, 0.2);
    transition-delay: 0.1s;
}
.service-thumb:hover::before, .service-thumb:hover::after {
    bottom: 0;
    opacity: 0;
}
.service_contents {
    position: absolute;
    bottom: -150px;
    left: 0;
    right: 0;
    background-color: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.35);
    z-index: 1;
    backdrop-filter: blur(4.4px);
    width: 90%;
    margin: auto;
    border-radius: 10px;
    padding: 4px 20px 20px;
    opacity: 0;
    transition: 0.5s;
}
.service_contents h3 a {
    display: inline-block;
    font-size: 21px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Unbounded";
    position: relative;
    z-index: 1;
    padding-left: 54px;
}
.service_contents h3 a:hover {
    color: var(--primary-color);
}
.service_contents h3 a:before {
    width: 45px;
    height: 3px;
    background-color: #ffffff;
    position: absolute;
    content: '';
    left: 0;
    top: 11px;
}
.service_contents p {
    font-size: 21px;
    line-height: 30px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Unbounded";
    margin: 2px 0 18px;
}
.service_btn a {
    display: inline-block;
    font-size: 15px;
    line-height: 32px;
    color: #141414;
    font-weight: 500;
    font-family: "Unbounded";
    background: #fff;
    border-radius: 21px;
    padding: 5px 22px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.service_btn a::before {
    content: "";
    position: absolute;
    left: 0;
    top: -100%;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    transition: top 0.5s ease-in-out;
    z-index: -1;
    border-radius: 21px;
}
.service_btn a:hover::before {
    top: 0;
}

.service_btn a:not(:hover)::before {
    top: 100%;
}
.active_service .service_contents {
    bottom: 18px;
    opacity: 1;
}
.service_single_items:hover .service_contents {
    opacity: 1;
    bottom: 18px;
}

/* ===========================================
    Start pixelevo Team Area  Css
============================================= */
section.team_area {
    padding: 120px 0 107px;
    background: var(--bg-color);
}
.swiper.wwiper_hiden {
    overflow: hidden;
}
.team_single_box {
    margin-bottom: 30px;
}
.team_thumb {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 15px;
}
.team_thumb::before, .team_thumb:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    left: 0;
    bottom: -100%;
    transition: bottom 0.4s ease-in-out, opacity 0.4s ease-in-out;
    opacity: 1;
}
.team_thumb:after {
    background: rgba(255, 255, 255, 0.2);
    transition-delay: 0.1s;
}
.team_single_box:hover .team_thumb::before, .team_single_box:hover .team_thumb::after {
    bottom: 0;
    opacity: 0;
}
.team_thumb img {
    width: 100%;
}
.team_social {
    right: 0;
    position: absolute;
    top: 30px;
    opacity: 0;
    transition: 0.5s;
}
.team_single_box:hover .team_social {
    opacity: 1;
    right: 20px;
}
.team_social a {
    display: block;
    font-size: 15px;
    color: #fff;
    margin: 06px;
}
.team_social a {
    display: block;
    font-size: 15px;
    color: #000000;
    margin: 06px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: rgb(255 255 255 / 19%);
    text-align: center;
    line-height: 45px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.team_social a:hover {
    color: var(--title-color);
}
.team_social a:before {
    position: absolute;
    z-index: -1;
    content: '';
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: var(--primary-color); 
    transform: scale(0);
    transition: 0.5s;
    border-radius: 50%;
}
.team_social a:hover:before {
    transform: translate(1);
    transform: scale(1);
}
.team_conent h3 {
    font-size: 21px;
    color: #ffffff;
    font-weight: 500;
    margin: 31px 0 10px;
    transition: 0.5s;
}
.team_conent h3:hover {
    color: var(--primary-color);
}
.team_conent p {
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
}

/* dote button  */

.pixelevo-dots.swiper-pagination-clickable.swiper-pagination-bullets {
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    margin-top: 30px;
    position: relative;
}
.pixelevo-dots .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    opacity: 1;
    background: #343E1C;
    margin: 0 5px !important;
    transition: 0.3s;
    position: relative;
    z-index: 1;
}
.pixelevo-dots .swiper-pagination-bullet-active:before {
    position: absolute;
    content: '';
    left: -4px;
    top: -4px;
    height: 18px;
    width: 18px;
    border: 1px solid var(--primary-color);
    z-index: -1;
    border-radius: 50%;
}
.pixelevo-dots .swiper-pagination-bullet-active {
    position: relative;
    z-index: 1;
    background: var(--primary-color);
}

/* Team Section Style Two */
section.team_area.style_two {
    padding: 74px 0 107px;
}
.team_single_box.style_two .team_thumb {
    border-radius: 25px;
}
.team_single_box.style_two .team_conent {
    text-align: center;
}
.team_single_box.style_two:hover .team_social {
    opacity: 1;
    right: 40px;
}
.team_list_2 .pixelevo-dots.swiper-pagination-clickable.swiper-pagination-bullets {
    margin-top: 18px;
}
section.team_area.inner_page{
    padding: 100px 0 107px;
}
section.team_area.style_inner {
    padding: 120px 0 108px;
}

/*===============================================
    Start pixelevo Portfolio Area Css
================================================*/

.portfolio_area {
    padding: 0 0 115px;
}
.portfolio-container {
    position: relative;
}    
.swiper-upper {
    margin: 0 60px 0;
    position: relative;
    overflow: hidden;
}   
.portfolio_single_item {
    margin-bottom: 10px;
}
.portfolio_thumb {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 20px;
}
.portfolio_single_item .portfolio_thumb:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.5);
    content: "";
    -webkit-transition: all .6s;
    transition: all .6s;
    z-index: 2;
    -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,-45deg) translate3d(0,-150%,0);
    transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,-45deg) translate3d(0,-150%,0);
    border-radius: 20px;
}

.portfolio_single_item:hover .portfolio_thumb:before {
    -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,-45deg) translate3d(0,150%,0);
    transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,-45deg) translate3d(0,150%,0);
    border-radius: 20px;
}
.portfolio_thumb img {
    width: 100%;
    transition: 0.5s;
    overflow: hidden;
} 
.portfolio_content {
    display: flex!important;
    justify-content: space-between;
    align-items: center;
    margin: 18px 0 0;
}

.portfolio-text h3 a {
    display: inline-block;
    font-size: 24px;
    color: #ffffff;
    font-weight: 600;
}
.portfolio-text h3 a:hover {
    color: var(--primary-color);
}
.portfolio-text p {
    font-size: 18px;
    margin: 20px 0 0;
}
.port-btn a {
    width: 76px;
    height: 76px;
    border-radius: 38px;
    display: inline-block;
    color: #fff;
    background: rgb(255 255 255 / 19%);
    text-align: center;
    line-height: 76px;
    position: relative;
    z-index: 1;
    top: 13px;
}
.port-btn a:before {
    position: absolute;
    z-index: -1;
    content: '';
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: var(--primary-color); 
    transform: scale(0);
    transition: 0.5s;
    border-radius: 50%;
}
.port-btn a:hover:before {
    transform: translate(1);
    transform: scale(1);
}
.port-btn a i {
    font-weight: 700;
    font-size: 25px;
    transform: rotate(-45deg);
    display: inline-block;
    transition: 0.5s;
}
.port-btn a:hover i {
    color: var(--title-color);
}

/* Swiper slides nav butn */

.swiper-slides {
    position: absolute;
    top: -19%;
    z-index: 1;
    right: 14%;
}
.swiper-slides button {
    background: transparent;
    border: 0;
    outline: 0;
}

/* Portfolio Area Style Two */

.portfolio_area.style_two {
    padding: 120px 0 30px;
}
.portfolio-list_2 .swiper-slide.swiper-slide-active .portfolio_thumb img {
    height: 500px;

} 
.flip-rotate.style_three {
    position: absolute;
    top: 0%;
    transform: translateY(-50%);
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
    opacity: 0;
    transition: 0.5s;
}
.portfolio_single_item.style_two:hover .flip-rotate.style_three {
    opacity: 1;
    top: 50%;
}
.portfolio_single_item.style_two .portfolio-text p {
    margin: 16px 0 0;
}
.flip-rotate.style_three .like img {
    width: inherit !important;
    height: inherit !important;
}
.flip-rotate.style_three a.banner-play-btn {
    background-color: #cfb8b800 !important;
    backdrop-filter: blur(4.4px) !important;
    border: 3px solid #ffffff91;
}
.flip-rotate.style_three .text-inner svg {
    word-spacing: 40px;
}
.portfolio-list_2 .swiper-slide.swiper-slide-active .flip-rotate.style_three {
    top: 50%;
    opacity: 1;
} 


/*====================================================
    Start pixelevo Testimonial Area Css
======================================================*/

.testimonial_area {
    padding: 120px 0 108px;
    background: var(--secondary-color);
}
.testimonial_item {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 45px 40px 40px;
    transition: 0.5s;
    position: relative;
    z-index: 1;
    background: var(--bg-color);
}
.testimonial_item::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    transition: .5s;
    border-radius: 20px;
    background: var(--secondary-color);
}
.testimonial_item:hover:before{
    transform:rotateX(90deg);
}
.testimonial_item::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    transition: .5s;
    border-radius: 20px;
    background: var(--secondary-color);
}
.testimonial_item:hover:after{
    transform:rotateY(90deg);
}

.testimonial-content h3 {
    font-size: 22px;
    color: #ffffff;
    font-weight: 500;
    margin: 0;
}
.testimonial-content p {
    font-size: 18px;
    line-height: 30px;
    font-style: italic;
    margin: 20px 0 0;
}
.tesit-auothor {
    display: flex;
    align-items: center;
    margin-top: 28px;
}
.testi-author-thumb {
    margin-right: 20px;
}
.tesit-auothor h4.name {
    margin: 0;
    font-size: 17px;
    color: #ffffff;
    font-weight: 500;
}
.tesit-auothor p.designation {
    margin: 6px 0 0;
    font-weight: 500;
}
.testi_icon {
    float: right;
    margin-top: -58px;
}
.testi_icon img {
    filter: brightness(0.1) invert(0.2);
    transition: 0.5s;
}
.testimonial_item:hover .testi_icon img {
    filter: brightness(1) invert(0);
}
.testimonial_item:hover {
    border: 1px solid var(--primary-color);
}
.testi_list .pixelevo-dots.swiper-pagination-clickable.swiper-pagination-bullets {
    margin-top: 65px;
}

/* Testimonial Section Style Two */

.testimonial_area.style_two {
    position: relative;
    z-index: 1;
}
.testi-thumb-img {
    position: absolute;
    right: 0;
    top: 51%;
    transform: translate(-50%, -50%);
}
.testimonial_area.style_two .section-main-title {
    margin-bottom: 57px;
}
.testimonial_item.style_two {
    border: 3px solid rgba(255,255,255,0.1);
    padding: 45px 55px 50px;
}
.testimonial_item.style_two .tesit-auothor {
    border-top: 1px solid  rgba(255,255,255,0.11);
    padding-top: 40px;
    margin-top: 42px;
}
.testimonial_item.style_two .testi_icon {
    float: inherit;
    margin-top: 0;
    position: absolute;
    top: 12%;
    left: 55px;
}
.testimonial_item.style_two .testi_icon img {
    filter: brightness(1) invert(0);
}
.testimonial_item.style_two .testimonial-content {
    padding-left: 105px;
    padding-right: 25px;
}
.testimonial_item.style_two .testimonial-content h3 {
    margin: 0;
    font-size: 30px;
    color: #ffffff;
    font-weight: 500;
}
.testimonial_item.style_two .testimonial-content p {
    font-style: italic;
    margin: 30px 0 0;
    font-size: 24px;
    line-height: 34px;
    color: #ffffff94;
    font-weight: 400;
}
.testimonial_item.style_two ul.testi-rating {
    border: 2px solid rgba(255,255,255,0.1);
    display: inline-block;
    border-radius: 25px;
    padding: 11px 22px;
    position: absolute;
    right: 60px;
    bottom: 12%;
}
.testimonial_item.style_two ul.testi-rating li {
    color: #fcba52;
    font-size: 17px;
    display: inline-block;
    margin-right: 3px;
}

.swiper.testi_list_2 {
    margin-right: 422px;
}
.swiper.testi_list_2 .pixelevo-dots.swiper-pagination-clickable.swiper-pagination-bullets {
    margin-top: 65px;
}

/*====================================================
    Start pixelevo Feature Area Css
======================================================*/

.feature_area {
    padding: 120px 0 70px;
}
.feature_single_item {
    background: var(--body-color);
    padding: 45px 45px 42px;
    border-radius: 25px;
    margin-bottom: 50px;
}
.feature_single_item.warpper_left {
    margin-right: 25px;
}
.feature_single_item.warpper_right {
    margin-left: 25px;
}
.feature-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 25px;
}
.feature-thumb::before, .feature-thumb:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    left: 0;
    bottom: -100%;
    transition: bottom 0.4s ease-in-out, opacity 0.4s ease-in-out;
    opacity: 1;
}
.feature-thumb:after {
    background: rgba(255, 255, 255, 0.2);
    transition-delay: 0.1s;
}
.feature_single_item:hover .feature-thumb::before, .feature_single_item:hover .feature-thumb::after {
    bottom: 0;
    opacity: 0;
}
.feature_single_item:hover .feature-thumb img {
    animation: pulseEffect 1s ease-out infinite;
}
.feature_content {
    padding: 18px 117px  0 19px;
}
.feature_content h3 a {
    display: inline-block;
    font-size: 24px;
    color: #ffffff;
    font-weight: bold;
    font-family: "Unbounded";
}
.feature_content h3 a:hover {
    color: var(--primary-color);
}
.feature_content p {
    font-size: 18px;
    line-height: 30px;
    margin: 19px 0 0;
}

/*====================================================
    Start pixelevo Blog Area Css
======================================================*/

.blog_area {
    padding: 120px 0 82px;
    background: var(--body-color);
}
.single_blog_warpper_item {
    margin-bottom: 30px;
}
.blog_thumb {
    position: relative;
    height: 315px;
    overflow: hidden;
    border-radius: 15px;
}
.blog_thumb .image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.blog_thumb .hover-image {
    opacity: 0;
}

.single_blog_warpper_item:hover .hover-image {
    opacity: 1;
} 
.childs {
    position: relative;
    width: 100%;
    height: 100%;
}
.single_blog_warpper_item:hover .childs {
    animation: pulseEffect 1s ease-out infinite;
}

@keyframes pulseEffect {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}
.blog_content {
    margin-top: 22px;
}
.blog_content h3 {
    margin: 8px 0 30px;
}
.blog_content h3 a {
    display: inline-block;
    line-height: 34px;
    font-size: 22px;
    color: var(--solid-white);
    font-weight: 500;
    font-family: "Unbounded";
}
.blog_content h3 a:hover {
    color: var(--primary-color);
}
.meta_blog p {
    position: relative;
    font-size: 12px;
    text-transform: uppercase;
    font-family: "Unbounded";
    margin: 0;
}

.blog-btn a {
    display: inline-block;
    border-radius: 22px;
    background-color: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    padding: 7px 22px;
    font-weight: 400;
    position: relative;
    z-index: 1;
    overflow: hidden;
    font-size: 12px;
    color: #ffffff;
    font-family: "Unbounded";
}
.blog-btn a:before {
    position: absolute;
    content: '';
    right: 0;
    top: 0;
    background: var(--primary-color);
    width: 0;
    height: 100%;
    z-index: -1;
    transition: 0.5s;
    border-radius: 25px;
}
.blog-btn a:hover:before {
    width: 100%;
    left: 0;
}
.blog-btn a:hover {
    color: var(--secondary-color);
}
.blog-btn a i {
    font-weight: 700;
    font-size: 10px;
    transform: rotate(-45deg);
    display: inline-block;
    margin-left: 8px;
    transition: 0.5s;
}

/* Start Blog Section Style Two */

.single_blog_warpper_item.style_two {
    border-radius: 20px;
    background-color: #252525;
    padding: 40px 40px 25px;
    position: relative;
    z-index: 1;
}
.single_blog_warpper_item.style_two .blog_thumb {
    height: inherit;
    border-radius: 15px;
}
.single_blog_warpper_item.style_two .blog_thumb:before, .single_blog_warpper_item.style_two .blog_thumb:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    left: 0;
    bottom: -100%;
    transition: bottom 0.4s ease-in-out, opacity 0.4s ease-in-out;
    opacity: 1;
}
.single_blog_warpper_item.style_two .blog_thumb:after {
    background: rgba(255, 255, 255, 0.2);
    transition-delay: 0.1s;
}
.single_blog_warpper_item.style_two:hover .blog_thumb::before, .single_blog_warpper_item.style_two:hover .blog_thumb::after {
    bottom: 0;
    opacity: 0;
}
.single_blog_warpper_item.style_two .blog_thumb img {
    width: 100%;
}
.single_blog_warpper_item.style_two .blog_content h3 {
    margin: 27px 0 30px;
}
.single_blog_warpper_item.style_two .blog_content {
    margin-top: 22px;
    padding: 0 145px 0 20px;
}
.single_blog_warpper_item.style_two .blog-btn {
    position: absolute;
    bottom: 50px;
    right: 40px;
}
.single_blog_warpper_item.style_two .blog-btn a {
    border: 1px solid #141414;
    position: relative;
    z-index: 1;
    overflow: visible;
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background-color: #141414;
    line-height: 80px;
    padding: 0;
    text-align: center;
}
.single_blog_warpper_item.style_two .blog-btn a:before {
    height: 100%;
    border-radius: 40px;
    transform: scale(0);
}
.single_blog_warpper_item.style_two .blog-btn a:hover:before {
    transform: scale(1);
    overflow: hidden;
}
.single_blog_warpper_item.style_two .blog-btn a img {
    left: -35px;
    position: relative;
    transition: 0.5s;
}
.single_blog_warpper_item.style_two .blog-btn a:hover img {
    left: -14px;
    filter: brightness(0);
}

/* blog area style three */

.blog_area.style_three {
    background: #141414;
    padding: 120px 0 120px;
}
/*pagination*/
.pagination {
    margin-top: 20px;
}
.pagination.left {
    margin-top: 38px;
}

.pagination a {
    font-size: 22px;
    color: #fff;
    font-weight: 400;
    font-family: "Unbounded";
    float: left;
    text-decoration: none;
    margin: 0 4px;
    line-height: 55px;
    text-align: center;
    width: 55px;
    height: 55px;
    border-radius: 10px;
    background-color: #1e1e1e;
}

.pagination a:hover {
    background: var(--primary-color);
    color: #141414;

}

/*====================================================
    Start pixelevo Footer Area Css
======================================================*/

.footer_area {
    padding: 107px 0 32px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.footer_area:before {
    position: absolute;
    content: '';
    left: 0;
    top: 28%;
    background: rgb(243 246 243 / 14%);
    width: 68%;
    right: 0;
    margin: auto;
    height: 1px;
}
.footer_area:after {
    position: absolute;
    content: '';
    left: 0;
    bottom: 85px;
    background: rgb(243 246 243 / 14%);
    width: 100%;
    height: 1px;
}

/* footer heading title  */

.heading-title {
    text-align: right;
}
.heading-title h1 {
    font-size: 28px;
    color: #ffffff;
    font-weight: 500;
    margin: 0;
    text-align: right;
    position: relative;
    z-index: 1;
    display: inline-block;
}
.heading-title h1:before {
    position: absolute;
    content: '';
    left: -71px;
    top: 17px;
    z-index: -1;
    width: 60px;
    height: 2px;
    background-color: #b6ec47;
}

/* Footer menu title */

h3.footer_widget_title {
    font-size: 24px;
    font-weight: 500;
    color: var(--solid-white);
    margin-bottom: 28px;
}
p.footer-description {
    color: #ffffffe0;
    margin: 0 0 25px;
    width: 87%;
}
p.footer_address {
    font-size: 15px;
    color: var(--solid-white);
    font-family: var(--fonts-title);
    margin-bottom: 15px;
}
.footer_widget_info p {
    margin: 0 0 8px;
    font-size: 15px;
    font-family: var(--fonts-title);
    color: var(--solid-white);
}

/* footer menu */

ul.footer_widget_menu li a {
    font-size: 14px;
    color: #f3f6f3d1;
    font-weight: 400;
    display: inline-block;
    position: relative;
    transition: 0.5s;
    margin-bottom: 12px;
    font-family: var(--fonts-title);
}
ul.footer_widget_menu li a:hover {
    padding-left: 20px;
    color: var(--primary-color);
}
ul.footer_widget_menu li a:before {
    position: absolute;
    left: 0;
    width: 0;
    height: 8px;
    border-radius: 4px;
    background-color: var(--primary-color);
    content: '';
    top: 9px;
    opacity: 0;
    transition: 0.5s;
}
ul.footer_widget_menu li a:hover:before {
    opacity: 1;
    width: 8px;
}
li.footer_active a {
    padding-left: 20px;
    color: var(--primary-color) !important;
}
ul.footer_widget_menu li.footer_active a:before {
    width: 8px;
    opacity: 1;
}

p.bel-text {
    font-size: 16px;
    line-height: 26px;
    color: #ffffffe0;
    font-weight: 400;
    font-family: "Open Sans";
    display: flex;
    align-items: center;
    gap: 15px;
}
p.bel-text i {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background-color: rgba(182,236,71,0.10196078431372549);
    text-align: center;
    line-height: 36px;
    flex-shrink: 0;
    color: var(--primary-color);
   transition: 0.5s;
}
p:hover.bel-text i{
    animation: shake 0.3s ease-in-out infinite;
}
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-1px); }
    50% { transform: translateX(1px); }
    75% { transform: translateX(-1px); }
    100% { transform: translateX(0); }
  }
  
.subscribe_form {
    position: relative;
    margin-top: 28px;
}
.subscribe_form input {
    width: 100%;
    height: 65px;
    background-color: transparent;
    border: 1px solid rgb(243 246 243 / 32%);
    outline: 0;
    color: var(--solid-white) !important;
    padding: 0 25px;
    border-radius: 10px;
}
.subscribe_form input::placeholder {
    color: rgb(243 246 243 / 90%);
}
.subscribe_form .form-control:focus {
    background: transparent;
    box-shadow: none;
    border: 1px solid var(--primary-color);
}
button.btn i {
    width: 37px;
    height: 37px;
    border-radius: 18px;
    background-color: var(--primary-color);
    text-align: center;
    line-height: 37px;
    display: inline-block;
    font-size: 24px;
    color: var(--title-color);
    position: absolute;
    right: 10px;
    top: 16%;
    transform: rotate(-45deg);
    transition: 0.5s;
}
button.btn i:hover {
    background: var(--solid-white);
    color: var(--title-color);
}
.pixelevo_social_icon a {
    display: inline-block;
    font-size: 13px;
    color: var(--p-color);
    margin: 5px 8px 0 0;
    width: 36px;
    border: 1px solid rgb(243 246 243 / 32%);
    height: 36px;
    border-radius: 50%;
    background-color: transparent;
    text-align: center;
    line-height: 36px;
    position: relative;
    z-index: 1;
    overflow: hidden;

}
 
.pixelevo_social_icon a:hover {
    color: var(--title-color);
    border: 1px solid var(--primary-color);
    animation: zoom-in 0.5s ease-in-out forwards;
}

.pixelevo_social_icon a:before {
    position: absolute;
    z-index: -1;
    content: '';
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: var(--primary-color); 
    transform: scale(0);
    transition: 0.5s;
    border-radius: 50%;
}
.pixelevo_social_icon a:hover:before {
    transform: translate(1);
    transform: scale(1);
}



.footer_shpe1 {
    position: absolute;
    bottom: 85px;
    right: 0;
    margin: auto;
    left: 0;
    z-index: -1;
}
@keyframes auto-run-both {
    0% { transform: translateX(-5%); }
    50% { transform: translateX(90vw); } 
    100% { transform: translateX(-5%); } 
  }
  
  .auto-run-both {
    animation: auto-run-both 30s linear infinite; 
    white-space: nowrap; 
  }

/*  Start Copy Right Botttom Css */

.footer_copy_right {
    display: flex;
    align-items: center;
}
p.copy_right {
    margin: 0;
    color: #ffffff;
    font-weight: 400;
}
p.copy_right span {
    color: var(--primary-color);
}
.footer_social_link {
    text-align: right;
}
.footer_social_link ul li {
    display: inline-block;
}
.footer_social_link ul li a {
    display: inline-block;
    font-size: 14px;
    color: var(--p-color);
    font-weight: 400;
    font-family: "Unbounded";
    margin-left: 26px;
}
.footer_social_link ul li a:hover {
    color: var(--primary-color);
}
.footer_area.style_three {
    background: #1e1e1e;
}


/* =================================
   Start pixelevo Conatct Area Css
==================================== */

section.contact_area {
    padding: 0 0 120px;
}
section.contact_area .section-main-title {
    margin-bottom: 35px;
}
.contact_img {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 35px;
}
.contact_img img {
    width: 100%;
}
.contact_img::before, .contact_img:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    left: 0;
    bottom: -100%;
    transition: bottom 0.4s ease-in-out, opacity 0.4s ease-in-out;
    opacity: 1;
}
.contact_img:after {
    background: rgba(255, 255, 255, 0.2);
    transition-delay: 0.1s;
}
.contact_img:hover::before, .contact_img:hover::after {
    bottom: 0;
    opacity: 0;
}
.contact_warpper {
    padding: 60px 60px 60px;
    background-color: #1e1e1e;
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: 40px;
}
.contact-form-box {
    margin-left: 20px;
}
.form-box input {
    border-radius: 0;
    transition: 0.5s;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    border-radius: 10px;
    outline: 0;
    width: 100%;
    height: 60px;
    position: relative;
    margin-bottom: 20px;
    padding: 0 30px;
}
.form-box input::placeholder {
    font-size: 16px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Open Sans";
}
.form-box.message textarea {
    transition: .5s;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.08);
    outline: 0;
    width: 100%;
    height: 200px;
    position: relative;
    padding: 20px 30px;
    color: #fff;
    border-radius: 10px;
    margin-top: 10px;
}
.form-box.message textarea::placeholder {
    font-size: 16px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Open Sans";
}
.contact-form button {
    display: block;
    text-align: center;
    width: 100%;
    border: transparent;
    padding: 16px 0;
    margin-top: 30px;
    transition: 0.5s;
    background: var(--primary-color);
    font-size: 16px;
    text-transform: uppercase;
    color: #141414;
    font-weight: 400;
    font-family: "Unbounded";
    border-radius: 10px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.contact-form button:before {
    position: absolute;
    content: '';
    left: 0;
    width: 100%;
    height: 0;
    background: var(--solid-white);
    z-index: -1;
    transition: 0.5s;
    bottom: 0;
}
.contact-form button:hover:before  {
    height: 100%;
    top: 0;
}

.cotact_info_item:hover {
    filter: drop-shadow(0px 10px 27px rgba(177, 177, 177, 0.3));
    border-color: #fff;
}
.icontact_warpper_icon i {
    display: inline-block;
    font-size: 45px;
    color: var(--primary-color);
}
.contact_warpper_content h3 {
    font-size: 22px;
    margin: 24px 0 10px;
}
.contact_warpper {
    background: var(--bg-color);
    padding: 60px 60px 60px;
}

/* contact form box style two */

.contact-form-box.style_two {
    border-radius: 20px;
    background-color: #1e1e1e;
    padding: 44px 230px 50px 70px;
    margin: 45px 0 0;
}
.contact-form-box.style_two .section-main-title {
    margin-bottom: 38px;
}
.contact-form-box.style_two .section-main-title h1 {
    font-size: 30px;
    color: #ffffff;
    font-weight: 600;
}
.contact-form-box.style_two .form-box input {
    height: 50px;
}
.contact-form-box.style_two .form-box.message textarea {
    height: 155px;
}
.contact-form-box.style_two .contact-form button {
    display: inline-block;
    width: initial;
    padding: 14px 28px;
}
.contact-form button i {
    font-size: 16px;
    margin-left: 5px;
}
section.contact_area.inner_contact {
    padding: 120px 0 120px;
}

/* ===========================================
    Start pixelevo Inner Page  Css
============================================= */

/* Start pixelevo Breadcrumb Area Css  */

/* .breadcrumb_area {
    background: url(../images/inner-page/Breadcrum_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 700px;
}
.breadcrumb_content {
    margin-top: 111px;
}
h2.breadcrumb_title {
    color: var(--solid-white);
    margin-bottom: 40px;
    font-size: 78px;
    font-weight: 600;
}
ul.breadcrumb_list_menu li {
    display: inline-block;
    font-size: 22px;
    font-weight: 400;
    font-family: var(--fonts-title);
    color: var(--primary-color);
}
ul.breadcrumb_list_menu li a {
    display: inline-block;
    color: var(--solid-white);
    position: relative;
    z-index: 1;
}
ul.breadcrumb_list_menu li img {
    margin: 0 10px;
} */





/* ==========================================
   GLOBAL DARK BACKGROUND
   Home + Inner Pages
   Same background for all pages
========================================== */

/* Oculta decoraciones HTML anteriores si las agregaste */
.hero-network,
.breadcrumb-network {
  display: none !important;
}

/* Elimina pseudo-elementos anteriores que podían tapar o mover contenido */
.hero-area::before,
.hero-area::after,
.breadcrumb_area::before,
.breadcrumb_area::after {
  content: none !important;
  display: none !important;
}

/* Fondo global para Home y páginas internas */
.hero-area,
.breadcrumb_area {
  background:
    /* soft green glows */
    radial-gradient(circle at 8% 10%, rgba(182, 236, 71, 0.14), transparent 16%),
    radial-gradient(circle at 78% 22%, rgba(182, 236, 71, 0.09), transparent 18%),
    radial-gradient(circle at 55% 82%, rgba(182, 236, 71, 0.07), transparent 20%),

    /* green dots */
    radial-gradient(circle at 3% 2%, rgba(182, 236, 71, 0.80) 0 5px, transparent 6px),
    radial-gradient(circle at 30% 8%, rgba(182, 236, 71, 0.70) 0 5px, transparent 6px),
    radial-gradient(circle at 8% 24%, rgba(182, 236, 71, 0.70) 0 5px, transparent 6px),
    radial-gradient(circle at 51% 34%, rgba(182, 236, 71, 0.70) 0 5px, transparent 6px),
    radial-gradient(circle at 73% 22%, rgba(182, 236, 71, 0.70) 0 5px, transparent 6px),
    radial-gradient(circle at 97% 12%, rgba(182, 236, 71, 0.70) 0 5px, transparent 6px),
    radial-gradient(circle at 84% 70%, rgba(182, 236, 71, 0.70) 0 5px, transparent 6px),

    /* subtle connection lines */
    linear-gradient(58deg, transparent 0 8%, rgba(182, 236, 71, 0.12) 8.2% 8.4%, transparent 8.6% 100%),
    linear-gradient(25deg, transparent 0 16%, rgba(182, 236, 71, 0.12) 16.2% 16.4%, transparent 16.6% 100%),
    linear-gradient(-18deg, transparent 0 52%, rgba(182, 236, 71, 0.10) 52.2% 52.4%, transparent 52.6% 100%),
    linear-gradient(32deg, transparent 0 72%, rgba(182, 236, 71, 0.10) 72.2% 72.4%, transparent 72.6% 100%),

    /* soft grid */
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),

    /* main dark background */
    linear-gradient(135deg, #101214 0%, #171a1d 52%, #0d0f11 100%) !important;

  background-size:
    100% 100%,
    100% 100%,
    100% 100%,

    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,

    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,

    120px 120px,
    120px 120px,

    100% 100% !important;

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,

    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,

    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,

    repeat,
    repeat,

    no-repeat !important;

  background-position: center center !important;
}

/* ==========================================
   HOME HERO
   No modifica el layout original del Home
========================================== */

.hero-area {
  position: relative;
  overflow: hidden;
}

/* ==========================================
   INNER PAGES / BREADCRUMB AREA
   Baja el contenido para que no quede detrás del menú
========================================== */

.breadcrumb_area {
  position: relative;
  overflow: hidden;
  height: 700px !important;
  padding-top: 170px !important;
}

/* Contenido del breadcrumb */
.breadcrumb_content {
  position: relative;
  z-index: 2;
  margin-top: 0 !important;
  text-align: center;
}

/* Título principal */
h2.breadcrumb_title,
.breadcrumb_title {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 78px;
  font-weight: 700;
  margin-bottom: 35px;
  position: relative;
  z-index: 2;
}

/* ==========================================
   BREADCRUMB MENU STYLE
   Home * Contact Us vuelve al formato anterior
========================================== */

ul.breadcrumb_list_menu {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  z-index: 2;
}

ul.breadcrumb_list_menu li {
  display: inline-block;
  font-size: 22px !important;
  font-weight: 400 !important;
  font-family: var(--fonts-title) !important;
  color: var(--primary-color) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.4 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

ul.breadcrumb_list_menu li a {
  display: inline-block;
  color: var(--solid-white) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  font-family: var(--fonts-title) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.4 !important;
  position: relative;
  z-index: 1;
  opacity: 1 !important;
  visibility: visible !important;
}

ul.breadcrumb_list_menu li img {
  margin: 0 10px;
  max-width: 18px;
}

/* Página actual */
ul.breadcrumb_list_menu li:last-child {
  color: var(--primary-color) !important;
}

/* Texto grande de fondo si el template lo usa */
.breadcrumb_area .section-bg-text,
.breadcrumb_area .bg-text,
.breadcrumb_area .breadcrumb-bg-text,
.breadcrumb_area .breadcumb-bg-text,
.breadcrumb_area .breadcrumb_shape_text {
  color: rgba(255, 255, 255, 0.06) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Header siempre encima */
.header-area,
.sticky-header,
.main-header,
.header-menu,
nav {
  position: relative;
  z-index: 9999;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 991px) {
  .breadcrumb_area {
    height: 580px !important;
    padding-top: 150px !important;
  }

  h2.breadcrumb_title,
  .breadcrumb_title {
    font-size: 58px;
    margin-bottom: 28px;
  }

  ul.breadcrumb_list_menu li,
  ul.breadcrumb_list_menu li a {
    font-size: 20px !important;
  }
}

@media (max-width: 767px) {
  .breadcrumb_area {
    height: 500px !important;
    padding-top: 130px !important;
  }

  h2.breadcrumb_title,
  .breadcrumb_title {
    font-size: 42px;
    margin-bottom: 22px;
  }

  ul.breadcrumb_list_menu li,
  ul.breadcrumb_list_menu li a {
    font-size: 18px !important;
  }

  .hero-area,
  .breadcrumb_area {
    background-size:
      100% 100%,
      100% 100%,
      100% 100%,

      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,

      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,

      90px 90px,
      90px 90px,

      100% 100% !important;
  }
}

@media (max-width: 480px) {
  .breadcrumb_area {
    height: 440px !important;
    padding-top: 120px !important;
  }

  h2.breadcrumb_title,
  .breadcrumb_title {
    font-size: 34px;
  }

  ul.breadcrumb_list_menu li,
  ul.breadcrumb_list_menu li a {
    font-size: 16px !important;
  }
}

/* ===========================================
    Start pixelevo Chooose Sections  Css
============================================= */

.choose_section {
    padding: 120px 0 0;
}
h1.choose_title {
    font-size: 40px;
    line-height: 50px;
    font-weight: 500;
    position: relative;
    z-index: 1;
}
h1.choose_title.style_two {
    padding-left: 80px;
}
h1.choose_title.style_two:before {
    position: absolute;
    content: '';
    left: 0;
    top: 25px;
    background: #fff;
    width: 71px;
    height: 2px;
    background-color: #ffffff;
}

/* choose clints */

.choose_clients {
    border-radius: 50px;
    background-color: #1e1e1e;
    border: 2px solid rgba(255,255,255,0.08);
    display: inline-block;
    padding: 8px 75px 19px 30px;
    width: 450px;
}
.choose_clients h3 {
    font-size: 20px;
    line-height: 30px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Unbounded";
}
/* tabss container */

.tabss_container {
    display: table;
    position: relative;
    overflow: hidden;
    width: 100%;
    text-align: center;
}
.tab_container_inner {
    margin-bottom: 20px;
}
.tab-buttons {
    display: flex;
    flex-direction: column;
}
  
.tab-button {
    padding: 37px 50px 37px;
    background: #1e1e1e;
    border: none;
    cursor: pointer;
    margin-bottom: 0;
    outline: 0;
    font-size: 24px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Unbounded";
    text-align: left;
    border-radius: 12px;
}
button.tab-button span {
    color: var(--primary-color);
}
.tab-button input:focus, button:focus {
    border-color: none !important;
    outline-color: none !important;
    border: none !important;
}
  
.tab-panel {
    padding: 5px 30px 22px;
    background: #1e1e1e;
    border-radius: 0 0 15px 15px;
}
  .tab-panel {
    display: none;
  }
  
  .tab-panel.active {
    display: block;
  }

  .tab-img img {
    width: 100%;
}



/* ===========================================
    Start pixelevo  Pricing Area Css
============================================= */

.pricinga_rea {
    padding: 120px  0 90px;
}
.pricing_warpper_single_item {
    padding: 42px  40px 40px;
    position: relative;
    margin-bottom: 30px;
    z-index: 1;
    background-color: #1e1e1e;
    border-radius: 15px;
    transition: 0.5s;
}
.pricing_warpper_single_item:before {
    position: absolute;
    left: 0;
    top: 0;
    left: 50%;
    height: 100%;
    width: 0;
    background: var(--primary-color);
    transition: .5s;
    content: '';
    z-index: -1;
    border-radius: 15px;
}
.pricing_warpper_single_item:hover:before {
    width: 100%;
    left: 0;
}

span.pricing_stem {
    border-radius: 16px;
    transition: .5s;
    font-size: 15px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Open Sans";
    transition: 0.5s;
}
h4.pricing_plan {
    font-size: 25px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Unbounded";
    margin: 10px 0 0;
    transition: 0.5s;
}
h3.pricing_title {
    margin: 22px 0 48px;
    border-bottom: 1px solid #ffffff1f;
    font-size: 45px;
    color: #ffffff;
    font-weight: 700;
    font-family: "Open Sans";
    padding-bottom: 44px;
    transition: 0.5s;
}
h3.pricing_title span {
    font-size: 17px;
    font-weight: 400;
    transition: 0.5s;
}

ul.pricing_list li {
    position: relative;
    margin-bottom: 11px;
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Open Sans";
    transition: 0.5s;
}
ul.pricing_list li i {
    display: inline-block;
    color: var(--primary-color);
    font-size: 20px;
    position: relative;
    top: 4px;
    margin-right: 10px;
    transition: 0.5s;
}

.pricing_btn {
    margin-top: 44px;
}
.pricing_btn a {
    border-radius: 30px;
    transform: inherit;
    display: block;
    padding: 11px 39px;
    height: inherit;
    width: inherit;
    background: transparent;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid #ffffff42;
    font-size: 16px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Open Sans";
    text-align: center;
}
.pricing_warpper_single_item:hover .pricing_btn a {
    color: var(--primary-color);
    border: 1px solid var(--body-color);
}
.pricing_btn a:before {
    position: absolute;
    content: '';
    left: 0;
    width: 100%;
    height: 0;
    background: var(--body-color);
    z-index: -1;
    transition: 0.5s;
    bottom: 0;
}
.pricing_warpper_single_item:hover .pricing_btn a::before  {
    height: 100%;
    top: 0;
}
.pricing_warpper_single_item:hover ul.pricing_list li,
.pricing_warpper_single_item:hover ul.pricing_list li i, 
.pricing_warpper_single_item:hover h4.pricing_plan, 
.pricing_warpper_single_item:hover span.pricing_stem,
.pricing_warpper_single_item:hover h3.pricing_title,
.pricing_warpper_single_item:hover h3.pricing_title span {
    color: #141414;
}
.pricing_warpper_single_item:hover h3.pricing_title {
    border-bottom: 1px solid #0000001f;
}


/*====================================================
    Start pixelevo Team Detialas Page  Css
======================================================*/

section.team_details_page {
    padding: 120px 0 120px;
}

.team-img img {
    width: 100%;
    margin-bottom: 30px;
}

.information_icon_bx {
    border-radius: 15px;
    background-color: #1e1e1e;
    padding: 50px 30px 30px;
}
.information_icon_bx .icon_bx {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.information_icon_bx .icon i {
    width: 55px;
    height: 55px;
    border-radius: 27px;
    background-color: #b8ed47;
    display: inline-block;
    text-align: center;
    line-height: 55px;
    font-size: 20px;
    color: #141414;
}

.information_icon_bx .information_content h3 {
    font-size: 18px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Unbounded";
    margin: 0 0 3px;
}
.information_icon_bx .information_content p {
    font-size: 15px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Open Sans";
    margin: 0;
}

/* team details about */

.team-sidebar {
    margin-left: 45px;
}
.about_name h3 {
    font-size: 35px;
    color: #ffffff;
    margin: 0 0 8px;
}
.about_name p {
    font-size: 20px;
    color: #b8ed47;
    font-weight: 500;
    font-family: "Open Sans";
    margin: 0;
}
p.team-des {
    font-size: 17px;
    color: #ffffff;
    font-weight: 400;
    line-height: 27px;
    margin: 26px 163px 0 0;
}

/* service list */
h2.service_title {
    font-size: 24px;
    color: #ffffff;
    font-weight: 700;
    font-family: "Unbounded";
    margin: 40px 0 43px;
}
.service_information {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}
.service_list-icon {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: #b6ec47;
    text-align: center;
    line-height: 35px;
}
.service_list p {
    font-size: 15px;
    line-height: 26px;
    color: #ffffff;
    font-weight: 600;
    margin: 0;
}

/*====================================================
    Start pixelevo Login Page  Css
======================================================*/

section.login_page {
    padding: 120px 0 120px;
}
.login_container {
    background: #1c1c1c;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    margin: 0;
    padding: 40px 40px 90px;
}

/* modern btn */

.modern_btn {
    text-align: left;
    margin-bottom: 45px;
}
.modern_btn a {
    display: inline-block;
    font-size: 17px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Open Sans";
    padding: 8px 22px;
    border: 1px solid #ffffff30;
    border-radius: 22px;
}
.form-container {
    padding: 0 63px 0 39px;
    text-align: center;
}
.form-container h2 {
    margin-bottom: 6px;
    font-size: 24px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Unbounded";
}
.form-container p {
    margin-bottom: 20px;
    font-size: 15px;
    color: #ffffffc4;
    font-weight: 400;
    font-family: "Open Sans";
}
.input-group {
    margin-bottom: 15px;
}
.input-group label {
    font-size: 16px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Open Sans";
    margin-bottom: 8px;
}
.input-group input {
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    height: 55px;
    background: transparent;
    color: white;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    margin-bottom: 10px;
}
.input-group input::placeholder {
    font-size: 16px;
    color: #ffffffbd;
    font-weight: 500;
}
.social-login {
    margin: 33px 0 74px;
}
.social-login button {
    cursor: pointer;
    font-size: 15px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Open Sans";
    border-radius: 10px;
    padding: 13px 32px;
    border: 1px solid rgba(255,255,255,0.08);
    background: transparent;
    margin: 0 4px;
}
.social-login button i {
    margin-right: 2px;
}
.social-login input:focus, button:focus {
    border-color: rgba(255,255,255,0.08) !important;
    outline-color: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}
.checkbox {
    display: flex;
    align-items: center;
    font-size: 14px;
}
.checkbox a {
    display: inline-block;
    color: #fff;
    margin-left: 10px;
}
.checkbox input {
    margin-right: 5px;
}
.submit-btn {
    padding: 16px 36px;
    background: #a6ff00;
    border: none;
    cursor: pointer;
    margin-top: 47px;
    font-size: 16px;
    text-transform: uppercase;
    color: #141414;
    font-weight: 400;
    font-family: "Unbounded";
    border-radius: 30px;
    transition: 0.5s;
}
.submit-btn:hover {
    background-color: #b8ed47;
}
.image-container img {
    width: 100%;
    height: 765px;
    margin-top: 50px;
}

/*====================================================
    Start pixelevo Case Study Area Css
======================================================*/

.case-study-area {
    padding: 120px 0 50px;
}

.case-study-single-box {
    margin-bottom: 62px;
}
.case-study-thumb {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 20px;
}
.case-study-thumb img {
    width: 100%;
}
.case-study-thumb::before, .case-study-thumb::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    left: 0;
    bottom: -100%;
    transition: bottom 0.4s ease-in-out, opacity 0.4s ease-in-out;
    opacity: 1;
}
.case-study-thumb::after {
    background: rgba(255, 255, 255, 0.2);
    transition-delay: 0.1s;
}
.case-study-single-box:hover .case-study-thumb::before, .case-study-single-box:hover .case-study-thumb::after {
    bottom: 0;
    opacity: 0;
}
.case-study-contents {
    position: relative;
    transition: .5s;
    z-index: 1;
}
.case-study-title h3 {
    margin: 28px  0 0;
}
.case-study-title h3 a {
    display: inline-block;
    font-size: 24px;
    color: #ffffff;
    font-weight: 600;
    font-family: "Unbounded";
}
.case-title span a {
    font-size: 18px;
    color: #ffffff99;
    font-weight: 400;
    font-family: "Open Sans";
    display: inline-block;
    margin: 22px 0 0;
}

.porject_btn {
    position: absolute;
    bottom: 0;
    right: 0;
}
.porject_btn a {
    position: relative;
    z-index: 1;
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background-color: #1e1e1e;
    line-height: 80px;
    padding: 0;
    text-align: center;
    display: inline-block;
}
.porject_btn a:before {
    height: 100%;
    border-radius: 40px;
    transform: scale(0);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: var(--primary-color);
    z-index: -1;
    content: '';
    transition: 0.5s;
}
.porject_btn a:hover:before {
    transform: scale(1);
}
.porject_btn a:hover img {
    filter: brightness(0);
    transform: rotate(0deg);
}
.porject_btn a img {
    position: relative;
    transition: 0.5s;
    width: 35px;
    transform: rotate(-45deg);
}

/*====================================================
    Start pixelevo Project details Area Css
======================================================*/

.information_icon_bx.style_two  {
    border-radius: 20px;
    padding: 50px 40px 42px;
}
.information_icon_bx.style_two .icon_bx {
    gap: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid #ffffff1a;
    padding-bottom: 30px;
}
.information_icon_bx.style_two .icon_bx:last-child {
    margin-bottom: 0;
}
.information_icon_bx.style_two .icon i {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: #ffffff0f;
    line-height: 65px;
    font-size: 20px;
    color: #fff;
}
.information_icon_bx.style_two .information_content h3 {
    margin: 0 0 6px;
}

.details-share_link {
    display: flex;
    align-items: center;
    gap: 20px;
}
.share-title h3 {
    font-size: 20px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Unbounded";
    margin: 0;
}

/* support info */
.support-info {
    background: var(--primary-color);
    padding: 31px 0 32px;
    text-align: center;
    border-radius: 20px;
    margin-top: 30px;
}
.support-title h3 {
    font-size: 26px;
    line-height: 38px;
    color: #141414;
    font-weight: 500;
    font-family: "Unbounded";
    text-align: center;
    margin: 0;
}
.support-btn a {
    display: inline-block;
    font-size: 15px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Unbounded";
    border-radius: 25px;
    background-color: #141414;
    padding: 12px 28px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-top: 15px;
}
.support-btn a:hover {
    color: #141414;
}
.support-btn a:before {
    position: absolute;
    content: '';
    left: 0;
    width: 100%;
    height: 0;
    background: var(--solid-white);
    z-index: -1;
    transition: 0.5s;
    bottom: 0;
}
.support-btn a:hover:before  {
    height: 100%;
    top: 0;
}

/* project details saidber */

.project-sidebar {
    margin-left: 45px;
}
.project-details-img {
    position: relative;
    z-index: 1;
}
.project-details-img img {
    width: 100%;
}
.category {
    position: absolute;
    top: 30px;
    left: 30px;
}
.category a {
    display: inline-block;
    font-size: 16px;
    color: #141414;
    font-weight: 600;
    font-family: "Open Sans";
    padding: 7px 22px;
    background: var(--primary-color);
    border-radius: 25px;
}
/* details item  */
.details-content {
    background-color: #1e1e1e;
    padding: 45px 35px 26px;
}
.details-content h2 {
    font-size: 28px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Unbounded";
    margin: 0 0 18px;
}
p.qute {
    margin-top: 21px;
}
h2.title_two {
    margin: 43px 0 26px;
}
h2.title_three {
    margin: 36px 0 25px;
}


/*=====================================
<-- pixelevo Search Box Css -->
=======================================*/

.main_sidebar_left {
    margin-right: 17px;
}

/*nav button*/
.search-box-btn.search-box-outer {
    display: inline-block;
}
.nav-btn.navSidebar-button {
    display: inline-block;
    position: relative;
    top: 2px;
    margin: 0 12px;
    cursor: pointer;
}

.nav-btn.navSidebar-button a i {
    font-size: 15px;
    width: 32px;
    line-height: 35px;
    height: 32px;
    border-radius: 50px;
    text-align: center;
    background: #efefef;
    display: inline-block;
    color: #232323;
    position: relative;
    z-index: 1;
    margin-left: 15px;
    transition: .5s;
    cursor: pointer;
}

.nav-btn.navSidebar-button a i:after {
    position: absolute;
    content: "";
    z-index: -1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #6fc06f;
    border-radius: 50%;
    transition: .5s;
    transform: scale(0);
}

.nav-btn.navSidebar-button a i:hover:after {
    transform: scale(1);
}

.nav-btn.navSidebar-button a i:hover {
    color: #fff;
}

.xs-sidebar-group .xs-overlay {
    left: 100%;
    top: 0;
    position: fixed;
    z-index: 101;
    height: 100%;
    opacity: 0;
    width: 100%;
    visibility: hidden;
    -webkit-transition: all 0.4s ease-in 0.8s;
    -o-transition: all 0.4s ease-in 0.8s;
    transition: all 0.4s ease-in 0.8s;
}

.xs-sidebar-group .widget-heading {
    position: absolute;
    top: 23px;
    right: 0;
    padding: 25px;
}

.xs-sidebar-widget {
    position: fixed;
    right: -100%;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 360px;
    z-index: 999999;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #272727;
    -webkit-transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s;
    -o-transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s;
    transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s;
    visibility: hidden;
    opacity: 0;
}

.xs-sidebar-group.isActive .xs-overlay {
    opacity: 0.7;
    visibility: visible;
    -webkit-transition: all 0.8s ease-out 0s;
    -o-transition: all 0.8s ease-out 0s;
    transition: all 0.8s ease-out 0s;
    left: 0;
}

.xs-sidebar-group.isActive .xs-sidebar-widget {
    opacity: 1;
    visibility: visible;
    right: 0;
    -webkit-transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s;
    -o-transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s;
    transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s;
}

.sidebar-textwidget {
    padding: 40px 32px;
}

.close-side-widget i {
    color: #6fc06f;
    font-size: 28px;
    display: block;
}

.sidebar-widget-container {
    position: relative;
    top: 150px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-in 0.3s;
    -o-transition: all 0.3s ease-in 0.3s;
    transition: all 0.3s ease-in 0.3s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.xs-sidebar-group.isActive .sidebar-widget-container {
    top: 0px;
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 1s ease-out 1.2s;
    -o-transition: all 1s ease-out 1.2s;
    transition: all 1s ease-out 1.2s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.xs-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.5;
    z-index: 0;
}

.xs-bg-black {
    background-color: #6fc06f;
}

/*html css*/
.nav-logo {
    margin: 0 0 50px;
}
.content-thumb-box {
    margin-bottom: 20px;
}
.content-thumb-box img {
    width: 100%;
    border-radius: 10px;
}

.content-box h2 {
    color: #fff;
    font-size: 26px;
    font-weight: 600;
}

.content-box p {
    display: inline-block;
    color: #fff;
    padding: 15px 0 0;
}

a.theme-btn.btn-style-two span {
    color: #fff;
    font-size: 20px;
}

a.theme-btn.btn-style-two i {
    color: #6fc06f;
}

.contact-info h2 {
    color: #fff;
    font-size: 26px;
    margin-bottom: 15px;
    font-weight: 600;
}

ul.list-style-one li {
    display: block;
    list-style: none;
    color: #fff;
    padding: 16px 0 0;
    overflow: hidden;
}

ul.list-style-one li i {
    margin-right: 10px;
}

ul.list-style-one li span {
    font-size: 20px;
    font-weight: 600;
    color: #6fc06f;
    margin: 0 10px 0 0px;
}

ul.social-box {
    margin: 30px 0 0;
}

ul.social-box li {
    display: inline-block;
    list-style: none;
    margin: 0 6px 0 0;
}

ul.social-box li a {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 36px;
    text-align: center;
    background: #fff;
    color: #6fc06f;
    transition: .5s;
    font-size: 18px;
    border-radius: 3px;
}

ul.social-box li a:hover {
    background: #6fc06f;
    color: #fff;
}

/* ===========================================
    Start pixelevo Sidebar  Css
============================================= */

.widget_search {
    padding: 30px 30px 30px;
    border-radius: 4px;
    margin-bottom: 30px;
    box-shadow: 0px 0px 70px rgb(0 0 0 / 5%);
    background: var(--bg-color);
    border: 1px solid #E2E5E7;
}
.widget_search form {
    position: relative;
}
.widget_search input {
    border-radius: 4px;
    padding-left: 20px;
    height: 60px;
    width: 100%;
    position: relative;
    color: #fff;
    border: 0;
    outline: 0;
    background: var(--body-color);
}
.widget_search input::placeholder{
    color: #fff;
}
button.icons {
    border: 0;
    font-size: 18px;
    color: #fff;
    padding: 1px 15px;
    position: absolute;
    right: 0;
    top: 0;
    height: 60px;
    width: 60px;
    background: var(--primary-color);
    border-radius: 0 4px 4px 0;
}

/*widget categories box*/

.widget-categories-box {
    padding: 35px 20px 40px;
    border-radius: 5px;
    margin-bottom: 30px;
    background-color: #252525;
}
.widget-categories-box.style_two {
    padding: 35px 40px 40px;
}
.widget-categories-box.style_three {
    padding: 35px 40px 30px;
}
.categories-title h4 {
    font-size: 20px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Unbounded";
    margin: 0 0 18px;
    position: relative;
    z-index: 1;
}
.categories-title.style_two h4 {
    margin-bottom: 42px;
}
.categories-title.style_two h4:before {
    position: absolute;
    content: '';
    left: 0;
    bottom: -14px;
    height: 2px;
    background: #fff;
    width: 35px;
}

/*categories menu*/

.widget-categories-menu ul {
    display: block;
}
.widget-categories-menu ul li {
    display: block;
    margin-bottom: 10px;
}
.widget-categories-menu ul li:last-child {
    margin-bottom: 0;
}
.widget-categories-menu ul li a {
    display: block;
    transition: .5s;
    font-size: 15px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Unbounded";
    border: 1px solid #ffffff1a;
    padding: 12px 22px;
    border-radius: 25px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.widget-categories-menu ul li a:hover {
    border: 1px solid var(--primary-color);
    color: #141414;
}
.widget-categories-menu ul li a:before {
    position: absolute;
    content: '';
    left: 0;
    width: 100%;
    height: 0;
    background: var(--primary-color);
    z-index: -1;
    transition: 0.5s;
    bottom: 0;
    border-radius: 25px;
}
.widget-categories-menu ul li a:hover::before  {
    height: 100%;
    top: 0;
}
.widget-categories-menu ul li a span {
    display: inline-block;
    float: right;
    text-align: center;
    transition: .5s;
    font-size: 18px;
}
.widget-categories-menu ul li:hover a span {
    color: #141414;
}

/* Sidber Recent Post */

.sidber-widget-recent-post {
    margin-bottom: 28px;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.recent-widget-thumb {
    float: left;
    margin-right: 20px;
}
.recent-widget-content span {
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    color: #b6ec47;
    font-weight: 400;
    font-family: "Unbounded";
}
.recent-widget-content a {
    display: inline-block;
    transition: .5s;
    margin-bottom: 7px;
    font-size: 17px;
    line-height: 24px;
    color: #ffffff;
    font-weight: 600;
    font-family: "Open Sans";
}
.recent-widget-content a:hover {
    color: var(--primary-color);
}
.sidber-widget-recent-post:last-child {
    margin-bottom: 0;
}

/* Widget Tag */
.widget-tags ul li {
    display: inline-block;
    margin-right: 6px;
    margin-bottom: 10px;
}
.widget-tags li a {
    display: inline-block;
    background-color: #1e1e1e;
    border: 2px solid rgba(255,255,255,0.08);
    font-size: 13px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Unbounded";
    padding: 3px 18px;
    border-radius: 20px;
}

.widget-tags li a:hover {
    color: var(--primary-color);
}

/* ===========================================
    Start pixelevo Blog Details  Css
============================================= */

.blog-detials-area {
    padding: 120px 0 120px;
}

.main_sidebar_right {
    margin-left: 25px;
}
.details-content.style_two {
    padding: 28px 35px 30px;
}

.blog-details-meta {
    margin-bottom: 20px;
}
.blog-details-meta span {
    margin-right: 25px;
    font-size: 16px;
    color: #ffffffba;
    font-weight: 400;
    position: relative;
    z-index: 1;
}
.blog-details-meta span i {
    color: var(--primary-color);
    padding-right: 5px;
}
span.style_meta {
    padding-left: 35px;
}
span.style_meta:before {
    position: absolute;
    content: '';
    left: 0;
    top: 11px;
    width: 20px;
    height: 2px;
    background: var(--primary-color);
    z-index: -1;
}
.blog_founder_item {
    background-color: #2a2a2a;
    padding: 40px 45px 45px;
    border-radius: 5px;
    margin: 48px 0 54px;
}
.blog-founder_arro {
    float: left;
    margin-top: 7px;
    margin-right: 30px;
    border-radius: 5px;
}
.founder_content {
    overflow: hidden;
}
.founder_content p {
    font-size: 18px;
    line-height: 30px;
    color: #ffffff;
    font-weight: 400;
    font-style: italic;
    font-family: "Open Sans";
}
.founder_content h4 {
    font-size: 15px;
    color: #b6ec47;
    font-weight: 400;
    padding-left: 60px;
    position: relative;
    margin: 25px 0 0;
    z-index: 1;
}
.founder_content h4:before {
    position: absolute;
    content: '';
    left: 0;
    top: 9px;
    width: 50px;
    height: 1px;
    background: var(--primary-color);
    z-index: -1;
}

.blog_dtls-icon i {
    font-size: 11px;
    height: 20px;
    width: 20px;
    border: 1px solid #ddd;
    text-align: center;
    line-height: 18px;
    border-radius: 100%;
    margin-right: 10px;
    background: var(--primary-color);
    float: left;
    margin-top: 5px;
    color: #1e1e1e;
}
.blog-details-content-list p {
    overflow: hidden;
    margin: 0 0 13px;
    font-weight: 500;
}

.social-tag {
    justify-content: space-between;
}
.tag a {
    display: inline-block;
    color: #fff;
    border-radius: 18px;
    background-color: #2b2b2b;
    font-size: 14px;
    padding: 5px 25px;
    margin-right: 8px;
}
.tag a:hover {
    background-color: var(--primary-color);
    color: #2b2b2b;
}

/* recent post */

.details_rcnt {
    border-radius: 15px;
    background-color: #1e1e1e;
    padding: 32px 35px 40px;
    margin-top: 30px;
}
.rcnt-pagination a {
    font-size: 18px;
    color: #ffffff;
    font-weight: 600;
    font-family: "Open Sans";
    margin: 0 0 22px;
    display: inline-block;
}
.rcnt-pagination a i {
    display: inline-block;
    font-size: 14px;
    position: relative;
    top: -1px;
}

.details_rcnt.style_two {
    text-align: right;
}
.details_rcnt.style_two .recent-widget-thumb {
    float: left;
    margin-right: 0;
    margin-left: 20px;
}

/* comment box */
.commet-box {
    background-color: #1e1e1e;
    padding: 60px 60px 60px;
    margin-top: 30px;
}

/* Comment CSS */

.blog-details-content h3 {
    margin-bottom: 19px;
    font-size: 24px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Unbounded";
}
.blog-details-comment {
    margin-bottom: 10px;
    position: relative;
}
.blog-details-comment-thumb {
    float: left;
    margin-right: 30px;
}
.blog-details-comment-content {
    overflow: hidden;
}
.blog-details-comment-content h2 {
    font-size: 18px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Unbounded";
    margin: 0 0 12px;
}
.blog-details-comment-content span {
    font-size: 14px;
    margin-bottom: 6px;
    display: block;
}
.blog-details-comment-reply {
    position: absolute;
    right: 0;
    top: -16px;
}
.blog-details-comment-reply.two {
    top: 18px;
}
.blog-details-comment-reply a {
    background: var(--primary-color);
    padding: 3px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #141414;
    border-radius: 2px;
    display: inline-block;
}
.blog-details-comment.reply {
    margin-left: 90px;
    padding-top: 35px;
}

/* Blog Details Contact */

.blog-details-contact {
    margin-top: 72px;
}
/*input-box*/
.input-box input {
    width: 100%;
    height: 55px;
    margin-bottom: 30px;
    padding: 0 20px;
    outline: 0;
    border-radius: 10px;
    background-color: #272727;
    border: 0;
}
.input-box input::placeholder {
    color: #ffffffad;
}
.input-box textarea {
    width: 100%;
    outline: 0;
    border: 0;
    padding: 22px 20px 0;
    height: 170px;
    border-radius: 15px;
    background-color: #272727;
}
.input-box textarea::placeholder {
    color: #ffffffad;
}

.checkbox.style_two {
    margin: 15px 0 0;
}
.checkbox.style_two p {
    margin: 0;
}
.checkbox.style_two input {
    margin-right: 10px;
}

/*input button*/

.input-button {
    margin-top: 33px;
}
.input-button button {
    display: inline-block;
    padding: 16px 42px;
    outline: 0;
    border: 0;
    color: #fff;
    font-weight: 500;
    background: var(--primary-color);
    transition: .5s;
    font-size: 16px;
    color: #141414;
    font-weight: 500;
    border-radius: 30px;
}
.input-button button:hover {
    background: var(--solid-white);
}

/* =================================
   Start pixelevo Service Details Area
==================================== */

.service_details {
    background: var(--bg-color);
    padding: 120px 0 110px;
}
.project-sidebar.style_two {
    margin-left: 25px;
}
.details-content.style_three {
    background-color: transparent;
    padding: 44px 0 0;
}
.details-content.style_three p {
    font-size: 17px;
    color: #ffffffd1;
    font-weight: 400;
    margin: 0;
    width: 87%;
}
h2.service_details-title {
    font-size: 24px;
    color: #ffffff;
    font-weight: 700;
    font-family: "Unbounded";
    margin: 20px 0 42px;
}

/* service prev item */

.service_prev-item {
    background-color: #1e1e1e;
    padding: 15px;
    border-radius: 10px;
}
.service_prev_bx {
    display: flex;
    align-items: center;
    gap: 20px;
}
.service_prev_content h3 {
    font-size: 18px;
    color: #ffffff;
    font-weight: 500;
    margin: 20px 0 3px;
}
.service_prev_content a {
    font-size: 15px;
    color: #b6ec47;
    font-weight: 400;
    font-family: "Unbounded";
    margin: 0;
    display: inline-block;
}

/* Faq */

h2.faq-title {
    font-size: 22px;
    color: #ffffff;
    font-weight: 700;
    font-family: "Unbounded";
    margin: 45px 0 44px;
}
.faq-item {
    margin-bottom: 10px;
    border-radius: 5px;
    overflow: hidden;
    padding-right: 30px;
}
.faq-question {
    background-color: #1e1e1e;
    font-size: 18px;
    color: #ffffff;
    font-weight: 600;
    font-family: "Open Sans";
    padding: 15px 25px 15px;
    cursor: pointer;
    border-radius: 10px;
    position: relative;
    z-index: 1;
}
.faq-question:before {
    position: absolute;
    right: 25px;
    top: 15px;
    content: "\f285";
    font-family: bootstrap-icons !important;
    font-size: 15px;
    transform: rotate(88deg);
    transition: 0.5s;
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 15px;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 200px;
    padding: 23px 25px 22px;
    border-radius: 10px;
    background-color: #1e1e1e;
}
.faq-item.active .faq-question {
    background-color: var(--primary-color);
    margin-bottom: 15px;
    color: #141414;
}
.faq-item.active .faq-question:before {
    color: 141414;
    transform: rotate(-88deg);
}
.support-info.style_two .support-btn a {
    border-radius: 30px;
    padding: 10px 28px 10px 10px;
}
.support-info.style_two .support-btn a i {
    width: 41px;
    height: 41px;
    border-radius: 20px;
    background-color: #b6ec47;
    display: inline-block;
    color: #141414;
    text-align: center;
    line-height: 41px;
    font-size: 14px;
    margin-right: 10px;
}

/* ================ All Animation CSS ===================*/

.rotate {
    -webkit-animation-name: rotateme;
    animation-name: rotateme;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    background-position: center center;
}
@keyframes rotateme {
from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
}

.bounce-animate {
    animation-name: float-bob;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob;
    -ms-animation-duration: 2s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob;
    -o-animation-duration: 2s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}
.bounce-animate2 {
    animation-name: float-bob2;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob2;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob2;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob2;
    -o-animation-duration: 3s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}
.bounce-animate3 {
    animation-name: float-bob3;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob3;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob3;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob3;
    -o-animation-duration: 3s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

.bounce-animate4 {
    animation-name: float-bob4;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob4;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob4;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob4;
    -o-animation-duration: 5s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}
.bounce-animate5 {
    animation-name: float-bob5;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob5;
    -moz-animation-duration: 6s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob5;
    -ms-animation-duration: 6s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob5;
    -o-animation-duration: 6s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}
.bounce-animate-slow {
    animation-name: float-bob5;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob5;
    -moz-animation-duration: 15s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob5;
    -ms-animation-duration: 15s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob5;
    -o-animation-duration: 15s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}
.bounce-animate-3 {
    animation-name: float-bob6;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob6;
    -moz-animation-duration: 6s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob6;
    -ms-animation-duration: 6s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob6;
    -o-animation-duration: 6s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}
@keyframes float-bob {
    0% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }

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

    100% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
}
@keyframes float-bob2 {
    0% {
        -webkit-transform: translateY(-60px);
        transform: translateY(-60px);
    }

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

    100% {
        -webkit-transform: translateY(-60px);
        transform: translateY(-60px);
    }
}
@keyframes float-bob3 {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }

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

    100% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
}
@keyframes float-bob4 {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }

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

    100% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
}
@keyframes float-bob5 {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }

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

    100% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
}
@keyframes float-bob6 {
    0% {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
    }

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

    100% {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
    }
}
@keyframes movebounce {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }

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

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}
@keyframes moveleftbounce {
    0% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }

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

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

/*--==============================================->
  <!-- Consen Animation Dance -->
 ==================================================-*/
 .dance3 {
    -webkit-animation: dance3 8s alternate infinite;
    animation: dance3 8s alternate infinite;
}

@keyframes dance3 {
    0% {
        -webkit-transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
    }
}

.dance {
    -webkit-animation: dance 2s alternate infinite;
    animation: dance 2s alternate infinite;
}

@keyframes dance {
    0% {
        -webkit-transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1.2);
    }
}

.dance2 {
    -webkit-animation: dance2 4s alternate infinite;
    animation: dance2 4s alternate infinite;
}

@keyframes dance2 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }

    50% {
        -webkit-transform: translate3d(25px, -25px, 0);
    }

    100% {
        -webkit-transform: translate3d(0, -25px, 25px);
    }
}

.watermark-animate {
    -webkit-animation: watermark-animate 8s infinite;
    animation: watermark-animate 8s infinite;
    animation-direction: alternate-reverse;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@keyframes watermark-animate {
    0% {
        left: 0;
    }

    100% {
        left: 100%;
    }
}



/*
<!-- ============================================================== -->
<!-- ReScrollup Button Cssstu  -->
<!-- ============================================================== -->*/

/*------back-to-top------------*/
.prgoress_indicator {
    position: fixed;
    right: 26px;
    bottom: 35px;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(22, 93, 245, 0.2);
    z-index: 9999999999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transform: translateY(15px) !important;
    transition: all 200ms linear !important;
}

.prgoress_indicator.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) !important;
}

.prgoress_indicator::after {
    position: absolute;
    content: "\f106";
    font-family: "Font Awesome 5 Free";
    text-align: center;
    line-height: 46px;
    font-size: 18px;
    color: #6fc06f;
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    font-weight: 900;
    z-index: 1;
    transition: all 200ms linear !important;
}

.prgoress_indicator::before {
  position: absolute;
  content: "\f106";
  font-family: "Font Awesome 5 Free";
  text-align: center;
  line-height: 46px;
  font-size: 18px;
  font-weight: 900;
  opacity: 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 2;
  transition: all 200ms linear !important;
}
.prgoress_indicator:hover ::after {
  color: #6fc06f;
}
.prgoress_indicator:hover ::before {
  opacity: 1;
}
.prgoress_indicator svg path {
  fill: none;
}
.prgoress_indicator svg.progress-circle path {
  stroke:var(--primary-color);
  stroke-width: 4;
  box-sizing: border-box;
  transition: all 200ms linear !important;
}

/*** 
====================================================================
   pixelevo Search Box Css
====================================================================
***/
.search-popup{
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 99999;
    margin-top: -540px;
    transform: translateY(-100%);
    background-color: rgba(0,0,0,0.90);
    -webkit-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
    -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
}

.search-popup{
    width: 100%;
}

.search-active .search-popup{
    transform: translateY(0%);
    margin-top: 0;
}

.search-popup .close-search {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: -200px;
    border-radius: 50%;
    text-align: center;
    background-color:var(--primary-color);
    width: 70px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    border-bottom: 3px solid #fff;
    border-top: 3px solid #fff;
    border-right: 3px solid #062462;
    border-left: 3px solid #062462;
    -webkit-transition: all 500ms ease;
    height: 70px;
    line-height: 70px;
    text-align: center;
}

.search-active .search-popup .close-search{
    visibility: visible;
    opacity: 1;
    top: 50%;
    -webkit-transition-delay: 1500ms;
    -moz-transition-delay: 1500ms;
    -ms-transition-delay: 1500ms;
    -o-transition-delay: 1500ms;
    transition-delay: 1500ms;
}

.search-popup form{
    position: absolute;
    max-width: 700px;
    top: 50%;
    left: 15px;
    right: 15px;
    margin:-35px auto 0;
    transform: scaleX(0);
    transform-origin: center;
    background-color: #111111;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.search-active .search-popup form{
    transform: scaleX(1);
    -webkit-transition-delay: 1200ms;
    -moz-transition-delay: 1200ms;
    -ms-transition-delay: 1200ms;
    -o-transition-delay: 1200ms;
    transition-delay: 1200ms;
}

.search-popup .form-group{
    position:relative;
    margin:0px; 
    overflow: hidden;
}
.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"]{
    position:relative;
    display:block;
    font-size:18px;
    line-height: 50px;
    color:#000000;
    height:70px;
    width:100%;
    padding: 10px 30px;
    background-color: #ffffff;
    -webkit-transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    transition:all 500ms ease;
    font-weight:500;
    text-transform:capitalize;
}

.search-popup .form-group input[type="submit"], .search-popup .form-group button {
    position: absolute;
    right: 30px;
    top: 0px;
    height: 70px;
    line-height: 70px;
    background: transparent;
    text-align: center;
    font-size: 24px;
    color:var(--primary-color);
    padding: 0;
    cursor: pointer;
    -webkit-transition: all 500ms ease;
    border: none;
}

.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover{
    color: #000000;
}

.search-popup input::placeholder,
.search-popup textarea::placeholder{
    color:#000000;
}

.search-popup .close-search.style-two{
    position: absolute;
    right: 25px;
    left: auto;
    color:#ffffff;
    width:auto;
    height:auto;
    top:25px;
    margin:0px;
    border:none;
    background:none !important;
    box-shadow:none !important;
    -webkit-transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    transition:all 500ms ease;
}

.search-box-btn {
    display: inline-block;
    padding-left: 22px;
}

.search-box-btn i {
    display: inline-block;
    color: #fff;
    line-height: 30px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    transition: .5s;
}

.upp.search-box-btn i {
    color: #9E9FA1;
}

.search-box-btn.search-box-outer span i {
    font-size: 20px;
    display: inline-block;
    color: #fff;
    padding-left: 17px;
    position: relative;
    z-index: 1;
}

.upp.search-box-btn.search-box-outer span i {
    color: #9E9FA1;
}

.search-box-btn.search-box-outer span i:after {
    position: absolute;
    content: "0";
    right: -10px;
    top: -4px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background:var(--primary-color);
    color: #fff;
    border-radius: 50%;
    display: inline-block;
    font-size: 12px;
}

.flaticon-multiply:before {
    content: inherit;
}

button.close-search i {
    font-size: 25px;
    color: #fff;
    display: inline-block;
}


span.flaticon-multiply i {
    display: inline-block;
    color: #6fc06f;
}

.header-search-button.search-box-outer {
    padding: 0px 8px 0 0;
    display: inline-block;
}

.header-search-button.search-box-outer a {
    color: #062462;
    display: inline-block;
    position: relative;
    left: 16px;
}


/*===========================
<-- pixelevo Sidbar Css -->
=============================*/
.nav-btn.navSidebar-button {
    display: inline-block;
}

.nav-btn.navSidebar-button a i {
    font-size: 24px;
    display: inline-block;
    color:var(--primary-color);
    transition: .5s;
}

.xs-sidebar-group .xs-overlay {
    left: 100%;
    top: 0;
    position: fixed;
    z-index: 101;
    height: 100%;
    opacity: 0;
    width: 100%;
    visibility: hidden;
    -webkit-transition: all 0.4s ease-in 0.8s;
    -o-transition: all 0.4s ease-in 0.8s;
    transition: all 0.4s ease-in 0.8s;
}

.xs-sidebar-group .widget-heading {
    position: absolute;
    top: 23px;
    right: 0;
    padding: 25px;
}

.xs-sidebar-widget {
    position: fixed;
    right: -100%;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 360px;
    z-index: 999999;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #272727;
    -webkit-transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s;
    -o-transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s;
    transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s;
    visibility: hidden;
    opacity: 0;
}

.xs-sidebar-group.isActive .xs-overlay {
    opacity: 0.7;
    visibility: visible;
    -webkit-transition: all 0.8s ease-out 0s;
    -o-transition: all 0.8s ease-out 0s;
    transition: all 0.8s ease-out 0s;
    left: 0;
}

.xs-sidebar-group.isActive .xs-sidebar-widget {
    opacity: 1;
    visibility: visible;
    right: 0;
    -webkit-transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s;
    -o-transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s;
    transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s;
}

.sidebar-textwidget {
    padding: 40px 32px;
}

.close-side-widget i {
    color:var(--primary-color);
    font-size: 28px;
    display: block;
}

.sidebar-widget-container {
    position: relative;
    top: 150px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-in 0.3s;
    -o-transition: all 0.3s ease-in 0.3s;
    transition: all 0.3s ease-in 0.3s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.xs-sidebar-group.isActive .sidebar-widget-container {
    top: 0px;
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 1s ease-out 1.2s;
    -o-transition: all 1s ease-out 1.2s;
    transition: all 1s ease-out 1.2s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.xs-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.5;
    z-index: 0;
}

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

/*html css*/
.nav-logo {
    margin: 0 0 50px;
}

.content-box h2 {
    color: #fff;
    font-size: 26px;
    font-weight: 600;
    text-transform: uppercase;
}

.content-box p {
    display: inline-block;
    color: #fff;
    padding: 15px 0 0;
}

a.theme-btn.btn-style-two span {
    color: #fff;
    font-size: 20px;
}

a.theme-btn.btn-style-two i {
    color:var(--primary-color);
}

.contact-info h2 {
    color: #fff;
    font-size: 26px;
    margin-bottom: 15px;
    font-weight: 600;
}

ul.list-style-one li {
    display: block;
    list-style: none;
    color: #fff;
    padding: 16px 0 0;
    overflow: hidden;
}

ul.list-style-one li span {
    font-size: 20px;
    font-weight: 600;
    color:var(--primary-color);
    margin: 0 10px 0 0px;
}

ul.social-box {
    margin: 30px 0 0;
}

ul.social-box li {
    display: inline-block;
    list-style: none;
    margin: 0 6px 0 0;
}

ul.social-box li a {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 36px;
    text-align: center;
    background: #fff;
    color:var(--primary-color);
    transition: .5s;
    font-size: 18px;
    border-radius: 3px;
}

ul.social-box li a:hover {
    background:var(--primary-color);
    color: #fff;
}


/*===========================
<-- pixelevo Start Loader Css -->
=============================*/
.loader-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transition: 0.8s 1s ease;
    z-index: 666;
  }
  
  .loader {
    position: relative;
    display: block;
    z-index: 201;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
    transition: all 1s 1s ease;
    width: 48px;
    height: 48px;
  }
  
  .loader:before,
  .loader:after {
    content: "";
    display: block;
    border: 32px solid transparent;
    border-top-color: var(--primary-color);
    position: absolute;
    left: 0;
    top: 0;
    animation: weld-rotate 2s infinite ease-in;
  }
  .loader:before {
    border-color: transparent transparent transparent var(--secondary-color);
    animation-delay: 0.5s;
  }
  @keyframes weld-rotate {
    0%,
    25% {
      transform: rotate(0deg);
    }
    50%,
    75% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  .loader-wrapper .loder-section {
    position: fixed;
    top: 0;
    width: 50%;
    height: 100%;
    background: rgba(0, 0, 0, 100);
    z-index: 2;
  }
  
  .loader-wrapper .loder-section.left-section {
    left: 0;
    transition: 1s 1.4s ease;
  }
  
  .loader-wrapper .loder-section.right-section {
    right: 0;
    transition: 1s 1.4s ease;
  }
  
  /*/ When page loaded /*/
  .loaded .loder-section.left-section {
    left: -100%;
  }
  
  .loaded .loder-section.right-section {
    right: -100%;
  }
  
  .loaded .loader-wrapper {
    visibility: hidden;
  }
  
  .loaded .loader {
    top: -100%;
    opacity: 0;
  }
  

  
/* Tap Style */

.tab {
    padding-top: 50px;
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
  }
  
  .tabs {
    display: table;
    position: relative;
    overflow: hidden;
    width: 100%;
    text-align: center;
  }
  
  .tabs li {
    line-height: 38px;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
  }
  
  .tabs_item {
    display: none;
    padding: 30px 0;
  }
  
  .tabs_item:first-child {
    display: block;
  }

  /* about us 1 */

/* ======================================
   ABOUT US AGENCY VISUAL
   Ratio: 794 x 580
   Professional / Responsive / No image
====================================== */

.about-left,
.about-box-left {
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow: visible !important;
}

/* Oculta el diseño viejo del template */
.about-thumb,
.about_coun-box,
.about-marketing-shape {
  display: none !important;
}

/* Main visual */
.about-agency-visual {
  width: 100%;
  max-width: 794px;
  aspect-ratio: 794 / 580;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 38px;
  background:
    radial-gradient(circle at 18% 16%, rgba(182, 236, 71, 0.24), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.12), transparent 30%),
    radial-gradient(circle at 50% 82%, rgba(182, 236, 71, 0.12), transparent 36%),
    linear-gradient(135deg, #0f1113 0%, #1b1f22 52%, #0b0d0f 100%);
  border: 1px solid rgba(182, 236, 71, 0.26);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.42),
    inset 0 0 45px rgba(255, 255, 255, 0.04);
}

/* Shine */
.about-agency-visual::before {
  content: "";
  position: absolute;
  top: -34%;
  left: -34%;
  width: 24%;
  height: 170%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.13),
    transparent
  );
  transform: rotate(27deg);
  animation: agencyShine 7s ease-in-out infinite;
}

/* Bottom shadow */
.about-agency-visual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.52), transparent);
  z-index: 1;
}

/* Grid */
.agency-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 5% 6.5%;
  opacity: 0.68;
}

/* Background lights */
.agency-light {
  position: absolute;
  border-radius: 50%;
  background: rgba(182, 236, 71, 0.13);
  filter: blur(45px);
  z-index: 1;
}

.agency-light-one {
  width: 44%;
  height: 42%;
  left: 25%;
  top: 24%;
}

.agency-light-two {
  width: 30%;
  height: 30%;
  right: 8%;
  bottom: 10%;
}

/* Main company card */
.agency-main-card {
  position: absolute;
  left: 27%;
  top: 15%;
  width: 46%;
  height: 42%;
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.17), rgba(255,255,255,0.045));
  border: 1px solid rgba(182, 236, 71, 0.34);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.38),
    0 0 40px rgba(182, 236, 71, 0.14),
    inset 0 0 24px rgba(255,255,255,0.055);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  z-index: 6;
  animation: agencyMainFloat 3.8s ease-in-out infinite;
}

/* Logo */
.agency-logo {
  position: absolute;
  left: 8%;
  top: 16%;
  width: 23%;
  aspect-ratio: 1 / 1;
  border-radius: 24%;
  background:
    linear-gradient(135deg, rgba(182, 236, 71, 0.36), rgba(255,255,255,0.055));
  border: 1px solid rgba(182, 236, 71, 0.56);
  box-shadow:
    0 0 30px rgba(182, 236, 71, 0.22),
    inset 0 0 12px rgba(255,255,255,0.09);
}

.agency-logo span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: clamp(15px, 2vw, 27px);
  font-weight: 800;
  letter-spacing: 1px;
}

/* Main card lines */
.agency-main-lines {
  position: absolute;
  left: 38%;
  top: 19%;
  width: 54%;
}

.agency-line {
  display: block;
  height: 7px;
  border-radius: 20px;
  margin-bottom: 8%;
  background: rgba(255,255,255,0.55);
}

.agency-line-one {
  width: 88%;
}

.agency-line-two {
  width: 66%;
  background: rgba(182, 236, 71, 0.76);
}

.agency-line-three {
  width: 94%;
  background: rgba(255,255,255,0.32);
}

/* Data row */
.agency-data-row {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 12%;
  height: 28%;
  display: flex;
  gap: 5%;
}

.data-box {
  flex: 1;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(182, 236, 71, 0.13), rgba(255,255,255,0.035));
  border: 1px solid rgba(182, 236, 71, 0.22);
  box-shadow: inset 0 0 10px rgba(255,255,255,0.04);
  animation: agencyBoxPulse 2.6s ease-in-out infinite;
}

.data-box:nth-child(2) {
  animation-delay: 0.2s;
}

.data-box:nth-child(3) {
  animation-delay: 0.4s;
}

/* Team card */
.agency-team-card {
  position: absolute;
  left: 32%;
  bottom: 10%;
  width: 36%;
  height: 24%;
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.035));
  border: 1px solid rgba(182, 236, 71, 0.24);
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.32),
    inset 0 0 14px rgba(255,255,255,0.045);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  z-index: 5;
}

.agency-person {
  position: absolute;
  bottom: 14%;
  width: 24%;
  height: 48%;
  animation: agencyPersonFloat 3.6s ease-in-out infinite;
}

.agency-person-one {
  left: 14%;
  opacity: 0.82;
}

.agency-person-two {
  left: 38%;
  height: 56%;
  animation-delay: 0.25s;
}

.agency-person-three {
  right: 14%;
  opacity: 0.82;
  animation-delay: 0.5s;
}

.agency-head {
  position: absolute;
  left: 50%;
  top: -48%;
  width: 64%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.55), transparent 25%),
    linear-gradient(135deg, #f4f4f4, #9da2a6);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.12);
}

.agency-body {
  position: absolute;
  inset: 0;
  border-radius: 36px 36px 14px 14px;
  background:
    linear-gradient(135deg, rgba(182,236,71,0.72), rgba(182,236,71,0.16)),
    linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.04));
  border: 1px solid rgba(182, 236, 71, 0.28);
  box-shadow: 0 0 20px rgba(182, 236, 71, 0.16);
}

/* Feature cards */
.agency-feature-card {
  position: absolute;
  width: 22%;
  height: 17%;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.035));
  border: 1px solid rgba(182, 236, 71, 0.23);
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.26),
    inset 0 0 13px rgba(255,255,255,0.045);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  z-index: 4;
}

.agency-feature-one {
  left: 7%;
  top: 18%;
  animation: agencyCardFloat 4s ease-in-out infinite;
}

.agency-feature-two {
  right: 7%;
  top: 18%;
  animation: agencyCardFloat 4s ease-in-out infinite;
  animation-delay: 0.6s;
}

.agency-feature-three {
  left: 8%;
  bottom: 18%;
  animation: agencyCardFloat 4s ease-in-out infinite;
  animation-delay: 1s;
}

.agency-feature-icon {
  position: absolute;
  left: 13%;
  top: 24%;
  width: 15%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #b6ec47;
  box-shadow:
    0 0 16px rgba(182, 236, 71, 0.68),
    inset 0 0 4px rgba(255,255,255,0.45);
}

.agency-feature-icon.square {
  border-radius: 7px;
}

.agency-feature-icon.diamond {
  border-radius: 5px;
  transform: rotate(45deg);
}

.agency-feature-line {
  position: absolute;
  height: 6px;
  border-radius: 20px;
}

.feature-line-one {
  left: 35%;
  top: 30%;
  width: 42%;
  background: rgba(255,255,255,0.52);
}

.feature-line-two {
  left: 13%;
  top: 66%;
  width: 68%;
  background: rgba(182, 236, 71, 0.64);
}

/* Process panel */
.agency-process-panel {
  position: absolute;
  right: 8%;
  bottom: 18%;
  width: 24%;
  height: 21%;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.035));
  border: 1px solid rgba(182, 236, 71, 0.26);
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.25),
    inset 0 0 13px rgba(255,255,255,0.045);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  z-index: 4;
  animation: agencyPanelFloat 3.8s ease-in-out infinite;
}

.process-title {
  position: absolute;
  left: 11%;
  top: 16%;
  width: 44%;
  height: 6px;
  border-radius: 20px;
  background: rgba(182, 236, 71, 0.76);
}

.process-step {
  position: absolute;
  left: 12%;
  width: 8%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #b6ec47;
  box-shadow: 0 0 12px rgba(182, 236, 71, 0.60);
}

.step-one {
  top: 40%;
}

.step-two {
  top: 58%;
}

.step-three {
  top: 76%;
}

.process-line {
  position: absolute;
  left: 27%;
  height: 5px;
  border-radius: 20px;
  background: rgba(255,255,255,0.48);
}

.process-line-one {
  top: 42%;
  width: 58%;
}

.process-line-two {
  top: 60%;
  width: 44%;
  background: rgba(182, 236, 71, 0.60);
}

.process-line-three {
  top: 78%;
  width: 62%;
}

/* Growth circle */
.agency-growth-circle {
  position: absolute;
  right: 31%;
  bottom: 8%;
  width: 14%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 2px solid rgba(182, 236, 71, 0.84);
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.20), transparent 28%),
    rgba(182, 236, 71, 0.08);
  box-shadow:
    0 0 30px rgba(182, 236, 71, 0.24),
    inset 0 0 18px rgba(182, 236, 71, 0.10);
  z-index: 7;
  animation: agencyCirclePulse 3s ease-in-out infinite;
}

.agency-circle-inner {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.24);
  animation: agencyRotate 8s linear infinite;
}

.agency-circle-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: clamp(9px, 1vw, 14px);
  letter-spacing: 1px;
  font-weight: 800;
}

/* Connections */
.agency-connection {
  position: absolute;
  height: 3px;
  border-radius: 20px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(182, 236, 71, 0.62),
    transparent
  );
  z-index: 2;
}

.agency-connection-one {
  left: 20%;
  top: 43%;
  width: 32%;
}

.agency-connection-two {
  right: 20%;
  top: 43%;
  width: 32%;
}

.agency-connection-three {
  left: 20%;
  bottom: 36%;
  width: 60%;
  opacity: 0.72;
}

/* Animations */
@keyframes agencyShine {
  0% {
    left: -35%;
  }

  45%, 100% {
    left: 120%;
  }
}

@keyframes agencyMainFloat {
  0%, 100% {
    transform: translateY(0);
  }

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

@keyframes agencyCardFloat {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.84;
  }

  50% {
    transform: translateY(-8px);
    opacity: 1;
  }
}

@keyframes agencyPanelFloat {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.86;
  }

  50% {
    transform: translateY(-7px);
    opacity: 1;
  }
}

@keyframes agencyPersonFloat {
  0%, 100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -6px;
  }
}

@keyframes agencyCirclePulse {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.04);
  }
}

@keyframes agencyRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes agencyBoxPulse {
  0%, 100% {
    opacity: 0.75;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .about-agency-visual {
    border-radius: 24px;
  }
}

@media (max-width: 480px) {
  .about-agency-visual {
    border-radius: 20px;
  }
}

  /*  */
  .contact-animation {
  position: relative;
  width: 100%;
  min-height: 500px;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: radial-gradient(circle at center, #141414 0%, #141414 60%, #141414 100%);
  filter: brightness(1.2) contrast(1.1);
}

/* GRID */
.contact-animation .grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.4;
}

/* LINEA CENTRAL */
.contact-animation .glow-line {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
  box-shadow: 0 0 30px rgba(255,255,255,0.6);
}

/* ORB */
.contact-animation .orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255,255,255,0.25) 0%,
    rgba(255,255,255,0.12) 25%,
    rgba(255,255,255,0.05) 50%,
    transparent 75%
  );
  filter: blur(10px);
  animation: pulse 3s ease-in-out infinite;
}

/* ANILLOS */
.contact-animation .ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  transform: translate(-50%, -50%);
  animation: rotate 10s linear infinite;
}

.contact-animation .ring.r1 {
  width: 180px;
  height: 180px;
}

.contact-animation .ring.r2 {
  width: 260px;
  height: 260px;
  animation-direction: reverse;
  opacity: 0.6;
}

.contact-animation .ring.r3 {
  width: 360px;
  height: 360px;
  opacity: 0.3;
}

/* CUADRADOS */
.contact-animation .square {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(255,255,255,0.45);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.25),
    rgba(255,255,255,0.05)
  );
  backdrop-filter: blur(4px);
  box-shadow:
    inset 0 0 25px rgba(255,255,255,0.08),
    0 0 25px rgba(255,255,255,0.12);
}

.contact-animation .square::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255,255,255,0.25);
}

/* POSICIONES */
.contact-animation .s1 {
  width: 180px;
  height: 180px;
  transform: translate(-50%, -50%) rotate(18deg);
  margin-left: -120px;
  animation: drift1 5s ease-in-out infinite alternate;
}

.contact-animation .s2 {
  width: 130px;
  height: 130px;
  transform: translate(-50%, -50%) rotate(45deg);
  margin-left: 0;
  animation: drift2 4s ease-in-out infinite alternate;
}

.contact-animation .s3 {
  width: 180px;
  height: 180px;
  transform: translate(-50%, -50%) rotate(-18deg);
  margin-left: 120px;
  animation: drift3 6s ease-in-out infinite alternate;
}

/* PARTICULAS */
.contact-animation .dots {
  position: absolute;
  inset: 0;
}

.contact-animation .dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 12px rgba(255,255,255,0.6);
  animation: twinkle 2s ease-in-out infinite;
}

/* ANIMACIONES */
@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0.7;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 1;
  }
}

@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes drift1 {
  0% {
    transform: translate(-50%, -50%) rotate(18deg) translateY(-18px);
  }
  100% {
    transform: translate(-50%, -50%) rotate(30deg) translateY(18px);
  }
}

@keyframes drift2 {
  0% {
    transform: translate(-50%, -50%) rotate(45deg) scale(0.94);
  }
  100% {
    transform: translate(-50%, -50%) rotate(60deg) scale(1.08);
  }
}

@keyframes drift3 {
  0% {
    transform: translate(-50%, -50%) rotate(-18deg) translateY(16px);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-32deg) translateY(-16px);
  }
}

@keyframes twinkle {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .contact-animation {
    min-height: 350px;
    margin-bottom: 30px;
  }

  .contact-animation .orb {
    width: 240px;
    height: 240px;
  }

  .contact-animation .ring.r1 {
    width: 140px;
    height: 140px;
  }

  .contact-animation .ring.r2 {
    width: 210px;
    height: 210px;
  }

  .contact-animation .ring.r3 {
    width: 290px;
    height: 290px;
  }

  .contact-animation .s1,
  .contact-animation .s3 {
    width: 140px;
    height: 140px;
  }

  .contact-animation .s2 {
    width: 100px;
    height: 100px;
  }
}



/* aqui es el appoitmnet */

/* ==========================================
   APPOINTMENT CONTACT ANIMATION
   CSS ONLY / RESPONSIVE / NO DISTORTION
========================================== */

.appointment-visual-wrapper,
.appointment-visual-wrapper * {
  box-sizing: border-box;
}

.appointment-visual-wrapper {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 570 / 500;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  margin: 0 auto 40px auto;
}

/* Visual principal */
.contact-animation.appointment-shapes {
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 50%, rgba(182, 236, 71, 0.12), transparent 34%),
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.08), transparent 28%),
    linear-gradient(135deg, #101214 0%, #171a1d 52%, #0d0f11 100%);
  border: 1px solid rgba(182, 236, 71, 0.22);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.34),
    inset 0 0 42px rgba(255, 255, 255, 0.04);
  filter: brightness(1.08) contrast(1.05);
}

/* Evita que este bloque invada otras secciones */
.contact_warpper,
.contact_warpper .row,
.contact_warpper .col-lg-6,
.contact_warpper .col-md-12 {
  overflow: hidden;
}

/* GRID */
.contact-animation.appointment-shapes .grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 7.3% 8.4%;
  opacity: 0.45;
}

/* LINEA CENTRAL */
.contact-animation.appointment-shapes .glow-line {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(182, 236, 71, 0.85),
    rgba(255,255,255,0.65),
    transparent
  );
  box-shadow: 0 0 28px rgba(182,236,71,0.32);
  z-index: 2;
}

/* BRILLO CENTRAL */
.contact-animation.appointment-shapes .center-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(182,236,71,0.20) 0%,
    rgba(255,255,255,0.08) 38%,
    rgba(255,255,255,0.03) 58%,
    transparent 76%
  );
  filter: blur(16px);
  z-index: 1;
  animation: pulseGlow 3s ease-in-out infinite;
}

/* TARJETAS CALENDARIO */
.contact-animation.appointment-shapes .calendar-card {
  position: absolute;
  border: 1px solid rgba(182,236,71,0.34);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow:
    inset 0 0 22px rgba(255,255,255,0.06),
    0 0 24px rgba(182,236,71,0.12),
    0 18px 34px rgba(0,0,0,0.22);
  overflow: hidden;
  z-index: 5;
}

.contact-animation.appointment-shapes .card-main {
  width: 34%;
  height: 30%;
  left: 22%;
  top: 40%;
  animation: floatCard1 4.5s ease-in-out infinite alternate;
}

.contact-animation.appointment-shapes .card-small {
  width: 24%;
  height: 21%;
  right: 20%;
  top: 48%;
  animation: floatCard2 4s ease-in-out infinite alternate;
}

.contact-animation.appointment-shapes .card-header {
  width: 100%;
  height: 19%;
  background: rgba(182,236,71,0.16);
  border-bottom: 1px solid rgba(182,236,71,0.20);
  position: relative;
}

.contact-animation.appointment-shapes .card-header::before,
.contact-animation.appointment-shapes .card-header::after {
  content: "";
  position: absolute;
  top: 30%;
  width: 6%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(182,236,71,0.9);
  box-shadow: 0 0 8px rgba(182,236,71,0.45);
}

.contact-animation.appointment-shapes .card-header::before {
  left: 8%;
}

.contact-animation.appointment-shapes .card-header::after {
  left: 18%;
}

.contact-animation.appointment-shapes .card-lines {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 32%;
  bottom: 10%;
  background:
    linear-gradient(rgba(255,255,255,0.32), rgba(255,255,255,0.32)) 0 0 / 100% 3px no-repeat,
    linear-gradient(rgba(182,236,71,0.55), rgba(182,236,71,0.55)) 0 30% / 85% 3px no-repeat,
    linear-gradient(rgba(255,255,255,0.22), rgba(255,255,255,0.22)) 0 60% / 70% 3px no-repeat,
    linear-gradient(rgba(255,255,255,0.16), rgba(255,255,255,0.16)) 0 90% / 55% 3px no-repeat;
}

/* RELOJ */
.contact-animation.appointment-shapes .clock-shape {
  position: absolute;
  left: 50%;
  top: 28%;
  width: 22%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(182,236,71,0.45);
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.18), transparent 28%),
    rgba(182,236,71,0.08);
  box-shadow:
    inset 0 0 20px rgba(255,255,255,0.06),
    0 0 22px rgba(182,236,71,0.16);
  z-index: 6;
  animation: rotateClock 8s linear infinite;
}

.contact-animation.appointment-shapes .clock-shape::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7%;
  aspect-ratio: 1 / 1;
  background: rgba(182,236,71,0.95);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(182,236,71,0.60);
}

.contact-animation.appointment-shapes .clock-hand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: bottom center;
  background: rgba(255,255,255,0.9);
  border-radius: 10px;
}

.contact-animation.appointment-shapes .clock-hand.hour {
  width: 3%;
  height: 24%;
  transform: translate(-50%, -100%) rotate(35deg);
}

.contact-animation.appointment-shapes .clock-hand.minute {
  width: 2.4%;
  height: 34%;
  transform: translate(-50%, -100%) rotate(120deg);
}

/* CHECK */
.contact-animation.appointment-shapes .check-badge {
  position: absolute;
  right: 22%;
  top: 28%;
  width: 13%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(182,236,71,0.48);
  background:
    linear-gradient(135deg, rgba(182,236,71,0.20), rgba(255,255,255,0.05));
  box-shadow:
    inset 0 0 18px rgba(255,255,255,0.06),
    0 0 18px rgba(182,236,71,0.18);
  z-index: 7;
  animation: badgePulse 2.5s ease-in-out infinite;
}

.contact-animation.appointment-shapes .check-badge span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34%;
  height: 18%;
  border-left: 3px solid rgba(182,236,71,0.95);
  border-bottom: 3px solid rgba(182,236,71,0.95);
  transform: translate(-50%, -60%) rotate(-45deg);
}

/* PILLS */
.contact-animation.appointment-shapes .pill {
  position: absolute;
  height: 3.2%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(182,236,71,0.65),
    rgba(255,255,255,0.20)
  );
  box-shadow: 0 0 14px rgba(182,236,71,0.16);
  z-index: 4;
}

.contact-animation.appointment-shapes .p1 {
  width: 22%;
  left: 22%;
  top: 74%;
  animation: pillMove 3s ease-in-out infinite alternate;
}

.contact-animation.appointment-shapes .p2 {
  width: 16%;
  left: 48%;
  top: 77%;
  animation: pillMove 3.6s ease-in-out infinite alternate;
}

.contact-animation.appointment-shapes .p3 {
  width: 11%;
  right: 22%;
  top: 73%;
  animation: pillMove 2.8s ease-in-out infinite alternate;
}

/* DOTS */
.contact-animation.appointment-shapes .dots {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.contact-animation.appointment-shapes .dot {
  position: absolute;
  width: 0.8%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(182,236,71,0.95);
  box-shadow: 0 0 12px rgba(182,236,71,0.65);
  animation: twinkle 2s ease-in-out infinite;
}

.contact-animation.appointment-shapes .d1 {
  top: 18%;
  left: 16%;
  animation-delay: 0s;
}

.contact-animation.appointment-shapes .d2 {
  top: 24%;
  left: 82%;
  animation-delay: .5s;
}

.contact-animation.appointment-shapes .d3 {
  top: 74%;
  left: 18%;
  animation-delay: 1s;
}

.contact-animation.appointment-shapes .d4 {
  top: 82%;
  left: 84%;
  animation-delay: 1.5s;
}

.contact-animation.appointment-shapes .d5 {
  top: 12%;
  left: 52%;
  animation-delay: .3s;
}

.contact-animation.appointment-shapes .d6 {
  top: 88%;
  left: 52%;
  animation-delay: 1.2s;
}

/* ANIMACIONES */
@keyframes pulseGlow {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0.7;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 1;
  }
}

@keyframes floatCard1 {
  0% {
    transform: translateY(-5%) rotate(-3deg);
  }

  100% {
    transform: translateY(5%) rotate(3deg);
  }
}

@keyframes floatCard2 {
  0% {
    transform: translateY(6%) rotate(2deg);
  }

  100% {
    transform: translateY(-6%) rotate(-2deg);
  }
}

@keyframes rotateClock {
  from {
    transform: translateX(-50%) rotate(0deg);
  }

  to {
    transform: translateX(-50%) rotate(360deg);
  }
}

@keyframes badgePulse {
  0%, 100% {
    transform: scale(0.96);
  }

  50% {
    transform: scale(1.08);
  }
}

@keyframes pillMove {
  0% {
    opacity: 0.6;
    transform: scaleX(0.95);
  }

  100% {
    opacity: 1;
    transform: scaleX(1.08);
  }
}

@keyframes twinkle {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}

/* DESKTOP */
@media (min-width: 992px) {
  .appointment-visual-wrapper {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
  }
}

/* TABLET */
@media (max-width: 991px) {
  .appointment-visual-wrapper {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 570 / 500;
    border-radius: 22px;
    margin-bottom: 35px;
  }

  .contact-animation.appointment-shapes {
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    border-radius: 22px;
  }
}

/* MOBILE */
@media (max-width: 575px) {
  .appointment-visual-wrapper {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 570 / 500;
    border-radius: 20px;
    margin-bottom: 30px;
  }

  .contact-animation.appointment-shapes {
    border-radius: 20px;
  }
}









/* services */


.service-icon {
  width: 42px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.web-design-icon {
  width: 42px;
  height: 40px;
  position: relative;
  border: 1.5px solid rgba(182, 236, 71, 0.85);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(182, 236, 71, 0.16), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.03);
  box-shadow:
    0 0 14px rgba(182, 236, 71, 0.22),
    inset 0 0 8px rgba(255, 255, 255, 0.06);
  overflow: hidden;
  animation: webIconFloat 3s ease-in-out infinite;
}

/* barra superior tipo navegador */
.web-design-icon::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(182, 236, 71, 0.35);
}

/* brillo diagonal */
.web-design-icon::after {
  content: "";
  position: absolute;
  top: -18px;
  left: -20px;
  width: 18px;
  height: 70px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );
  transform: rotate(25deg);
  animation: webIconShine 4s ease-in-out infinite;
}

/* puntos del navegador */
.browser-dots {
  position: absolute;
  top: 3px;
  left: 5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(182, 236, 71, 0.95);
  box-shadow:
    6px 0 rgba(182, 236, 71, 0.55),
    12px 0 rgba(182, 236, 71, 0.32);
}

/* líneas que simulan contenido */
.web-line {
  position: absolute;
  left: 6px;
  height: 2px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
}

.line-one {
  top: 15px;
  width: 18px;
}

.line-two {
  top: 21px;
  width: 12px;
  background: rgba(182, 236, 71, 0.65);
}

/* mini card dentro del website */
.web-card {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 13px;
  height: 11px;
  border-radius: 3px;
  border: 1px solid rgba(182, 236, 71, 0.7);
  background: rgba(182, 236, 71, 0.10);
}

/* cursor/pointer para representar diseño web */
.cursor-shape {
  position: absolute;
  right: 8px;
  top: 16px;
  width: 0;
  height: 0;
  border-left: 7px solid rgba(255, 255, 255, 0.85);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transform: rotate(35deg);
  filter: drop-shadow(0 0 4px rgba(182, 236, 71, 0.5));
  animation: cursorMove 2.6s ease-in-out infinite;
}

@keyframes webIconFloat {
  0%, 100% {
    transform: translateY(0);
  }

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

@keyframes webIconShine {
  0% {
    left: -24px;
  }

  45%, 100% {
    left: 54px;
  }
}

@keyframes cursorMove {
  0%, 100% {
    transform: translate(0, 0) rotate(35deg);
  }

  50% {
    transform: translate(-3px, 2px) rotate(35deg);
  }
}

.service_single_item:hover .web-design-icon {
  border-color: #b6ec47;
  box-shadow:
    0 0 20px rgba(182, 236, 71, 0.38),
    inset 0 0 10px rgba(255, 255, 255, 0.08);
}

.service_single_item:hover .cursor-shape {
  border-left-color: #b6ec47;
}



/* Services 2 */

.service-icon {
  width: 42px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lab-system-icon {
  width: 42px;
  height: 40px;
  position: relative;
  border: 1.5px solid rgba(182, 236, 71, 0.85);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(182, 236, 71, 0.15), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.03);
  box-shadow:
    0 0 14px rgba(182, 236, 71, 0.22),
    inset 0 0 8px rgba(255, 255, 255, 0.06);
  overflow: hidden;
  animation: labIconFloat 3s ease-in-out infinite;
}

/* barra superior tipo sistema/dashboard */
.lab-system-icon::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(182, 236, 71, 0.35);
}

/* brillo animado */
.lab-system-icon::after {
  content: "";
  position: absolute;
  top: -18px;
  left: -22px;
  width: 18px;
  height: 70px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );
  transform: rotate(25deg);
  animation: labIconShine 4s ease-in-out infinite;
}

/* líneas del sistema */
.lab-screen-line {
  position: absolute;
  left: 6px;
  height: 2px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
}

.lab-line-one {
  top: 13px;
  width: 15px;
}

.lab-line-two {
  top: 18px;
  width: 10px;
  background: rgba(182, 236, 71, 0.65);
}

/* barras tipo reporte/dashboard */
.lab-chart-bar {
  position: absolute;
  bottom: 6px;
  width: 3px;
  border-radius: 6px;
  background: rgba(182, 236, 71, 0.75);
  box-shadow: 0 0 5px rgba(182, 236, 71, 0.35);
  animation: labBarsPulse 1.8s ease-in-out infinite;
}

.bar-one {
  left: 7px;
  height: 7px;
}

.bar-two {
  left: 13px;
  height: 11px;
  animation-delay: 0.2s;
}

.bar-three {
  left: 19px;
  height: 8px;
  animation-delay: 0.4s;
}

/* tubo de ensayo */
.lab-tube {
  position: absolute;
  right: 8px;
  top: 11px;
  width: 8px;
  height: 20px;
  border: 1.4px solid rgba(255, 255, 255, 0.8);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  transform: rotate(-18deg);
  background:
    linear-gradient(
      to top,
      rgba(182, 236, 71, 0.55) 0%,
      rgba(182, 236, 71, 0.55) 42%,
      transparent 43%
    );
  box-shadow: 0 0 6px rgba(182, 236, 71, 0.35);
  animation: labTubeMove 2.6s ease-in-out infinite;
}

/* borde superior del tubo */
.lab-tube::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -3px;
  width: 12px;
  height: 3px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.85);
}

/* burbujas */
.lab-bubble {
  position: absolute;
  border-radius: 50%;
  background: rgba(182, 236, 71, 0.85);
  box-shadow: 0 0 5px rgba(182, 236, 71, 0.45);
  animation: labBubbleUp 2.3s ease-in-out infinite;
}

.bubble-one {
  width: 3px;
  height: 3px;
  right: 8px;
  bottom: 9px;
}

.bubble-two {
  width: 2px;
  height: 2px;
  right: 17px;
  bottom: 13px;
  animation-delay: 0.5s;
}

@keyframes labIconFloat {
  0%, 100% {
    transform: translateY(0);
  }

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

@keyframes labIconShine {
  0% {
    left: -24px;
  }

  45%, 100% {
    left: 54px;
  }
}

@keyframes labBarsPulse {
  0%, 100% {
    transform: scaleY(1);
    opacity: 0.75;
  }

  50% {
    transform: scaleY(1.25);
    opacity: 1;
  }
}

@keyframes labTubeMove {
  0%, 100% {
    transform: rotate(-18deg) translateY(0);
  }

  50% {
    transform: rotate(-18deg) translateY(-2px);
  }
}

@keyframes labBubbleUp {
  0% {
    transform: translateY(0) scale(0.8);
    opacity: 0.25;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translateY(-8px) scale(1);
    opacity: 0;
  }
}

.service_single_item:hover .lab-system-icon {
  border-color: #b6ec47;
  box-shadow:
    0 0 20px rgba(182, 236, 71, 0.38),
    inset 0 0 10px rgba(255, 255, 255, 0.08);
}




/* service 3 */

.service-icon {
  width: 42px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.graphic-design-icon {
  width: 42px;
  height: 40px;
  position: relative;
  border: 1.5px solid rgba(182, 236, 71, 0.85);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(182, 236, 71, 0.15), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.03);
  box-shadow:
    0 0 14px rgba(182, 236, 71, 0.22),
    inset 0 0 8px rgba(255, 255, 255, 0.06);
  overflow: hidden;
  animation: graphicIconFloat 3s ease-in-out infinite;
}

/* brillo diagonal */
.graphic-design-icon::before {
  content: "";
  position: absolute;
  top: -18px;
  left: -22px;
  width: 18px;
  height: 70px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );
  transform: rotate(25deg);
  animation: graphicIconShine 4s ease-in-out infinite;
}

/* línea superior decorativa tipo interfaz */
.graphic-design-icon::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(182, 236, 71, 0.35);
}

/* formas de diseño */
.graphic-shape {
  position: absolute;
  border: 1.3px solid rgba(182, 236, 71, 0.75);
  background: rgba(182, 236, 71, 0.10);
  box-shadow: 0 0 6px rgba(182, 236, 71, 0.25);
}

.shape-one {
  width: 10px;
  height: 10px;
  left: 6px;
  top: 13px;
  border-radius: 3px;
  animation: graphicShapeMove 2.8s ease-in-out infinite;
}

.shape-two {
  width: 8px;
  height: 8px;
  left: 19px;
  bottom: 7px;
  border-radius: 50%;
  animation: graphicShapeMove 2.8s ease-in-out infinite;
  animation-delay: 0.4s;
}

/* líneas de composición */
.graphic-line {
  position: absolute;
  left: 6px;
  height: 2px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
}

.graphic-line-one {
  top: 27px;
  width: 13px;
}

.graphic-line-two {
  top: 31px;
  width: 8px;
  background: rgba(182, 236, 71, 0.65);
}

/* pluma / pen tool */
.design-pen {
  position: absolute;
  right: 8px;
  top: 12px;
  width: 6px;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.9),
    rgba(182, 236, 71, 0.65)
  );
  transform: rotate(35deg);
  box-shadow: 0 0 6px rgba(182, 236, 71, 0.35);
  animation: penDrawingMove 2.6s ease-in-out infinite;
}

/* punta de la pluma */
.pen-point {
  position: absolute;
  right: 16px;
  bottom: 9px;
  width: 0;
  height: 0;
  border-top: 5px solid rgba(182, 236, 71, 0.9);
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  transform: rotate(35deg);
  filter: drop-shadow(0 0 4px rgba(182, 236, 71, 0.45));
  animation: penPointPulse 2.6s ease-in-out infinite;
}

/* punto de dibujo */
.pen-point::after {
  content: "";
  position: absolute;
  left: -1px;
  top: -7px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #b6ec47;
  box-shadow: 0 0 6px rgba(182, 236, 71, 0.7);
}

@keyframes graphicIconFloat {
  0%, 100% {
    transform: translateY(0);
  }

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

@keyframes graphicIconShine {
  0% {
    left: -24px;
  }

  45%, 100% {
    left: 54px;
  }
}

@keyframes graphicShapeMove {
  0%, 100% {
    transform: translateY(0) scale(1);
  }

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

@keyframes penDrawingMove {
  0%, 100% {
    transform: rotate(35deg) translate(0, 0);
  }

  50% {
    transform: rotate(35deg) translate(-2px, 2px);
  }
}

@keyframes penPointPulse {
  0%, 100% {
    opacity: 0.75;
    transform: rotate(35deg) scale(1);
  }

  50% {
    opacity: 1;
    transform: rotate(35deg) scale(1.12);
  }
}

.service_single_item:hover .graphic-design-icon {
  border-color: #b6ec47;
  box-shadow:
    0 0 20px rgba(182, 236, 71, 0.38),
    inset 0 0 10px rgba(255, 255, 255, 0.08);
}


/* Service 4 */


.service-icon {
  width: 42px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crm-system-icon {
  width: 42px;
  height: 40px;
  position: relative;
  border: 1.5px solid rgba(182, 236, 71, 0.85);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(182, 236, 71, 0.15), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.03);
  box-shadow:
    0 0 14px rgba(182, 236, 71, 0.22),
    inset 0 0 8px rgba(255, 255, 255, 0.06);
  overflow: hidden;
  animation: crmIconFloat 3s ease-in-out infinite;
}

/* barra superior tipo interfaz */
.crm-system-icon::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(182, 236, 71, 0.35);
}

/* brillo diagonal */
.crm-system-icon::after {
  content: "";
  position: absolute;
  top: -18px;
  left: -22px;
  width: 18px;
  height: 70px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );
  transform: rotate(25deg);
  animation: crmIconShine 4s ease-in-out infinite;
}

/* avatar del cliente */
.crm-user-head {
  position: absolute;
  left: 7px;
  top: 13px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(182, 236, 71, 0.9);
  box-shadow: 0 0 6px rgba(182, 236, 71, 0.35);
  animation: crmPulse 2.2s ease-in-out infinite;
}

.crm-user {
  position: absolute;
  left: 6px;
  top: 21px;
  width: 10px;
  height: 6px;
  border-radius: 6px 6px 3px 3px;
  border: 1.2px solid rgba(255, 255, 255, 0.75);
  border-top: none;
  background: rgba(255, 255, 255, 0.06);
}

/* líneas informativas */
.crm-line {
  position: absolute;
  height: 2px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
}

.crm-line-one {
  left: 19px;
  top: 14px;
  width: 13px;
}

.crm-line-two {
  left: 19px;
  top: 19px;
  width: 9px;
  background: rgba(182, 236, 71, 0.65);
}

/* mini tarjetas / registros */
.crm-card {
  position: absolute;
  right: 6px;
  width: 10px;
  border-radius: 3px;
  border: 1px solid rgba(182, 236, 71, 0.75);
  background: rgba(182, 236, 71, 0.12);
  box-shadow: 0 0 5px rgba(182, 236, 71, 0.2);
  animation: crmCardMove 2.8s ease-in-out infinite;
}

.crm-card-one {
  top: 24px;
  height: 6px;
}

.crm-card-two {
  top: 32px;
  height: 4px;
  animation-delay: 0.3s;
}

/* puntos conectores */
.crm-dot {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(182, 236, 71, 0.85);
  box-shadow: 0 0 5px rgba(182, 236, 71, 0.4);
  animation: crmDotFlow 2s ease-in-out infinite;
}

.crm-dot-one {
  left: 15px;
  top: 25px;
}

.crm-dot-two {
  left: 21px;
  top: 28px;
  animation-delay: 0.25s;
}

.crm-dot-three {
  left: 27px;
  top: 31px;
  animation-delay: 0.5s;
}

@keyframes crmIconFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes crmIconShine {
  0% {
    left: -24px;
  }
  45%, 100% {
    left: 54px;
  }
}

@keyframes crmPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes crmCardMove {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-1px);
  }
}

@keyframes crmDotFlow {
  0% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
  100% {
    opacity: 0.4;
    transform: scale(0.9);
  }
}

.service_single_item:hover .crm-system-icon {
  border-color: #b6ec47;
  box-shadow:
    0 0 20px rgba(182, 236, 71, 0.38),
    inset 0 0 10px rgba(255, 255, 255, 0.08);
}


/* Service 5 */
.service-icon {
  width: 42px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-app-icon {
  width: 26px;
  height: 38px;
  position: relative;
  border: 1.5px solid rgba(182, 236, 71, 0.85);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(182, 236, 71, 0.15), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.03);
  box-shadow:
    0 0 14px rgba(182, 236, 71, 0.22),
    inset 0 0 8px rgba(255, 255, 255, 0.06);
  overflow: hidden;
  animation: mobileIconFloat 3s ease-in-out infinite;
}

/* speaker superior */
.mobile-app-icon::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 8px;
  height: 2px;
  border-radius: 10px;
  background: rgba(182, 236, 71, 0.75);
  transform: translateX(-50%);
}

/* brillo diagonal */
.mobile-app-icon::after {
  content: "";
  position: absolute;
  top: -18px;
  left: -20px;
  width: 16px;
  height: 70px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );
  transform: rotate(25deg);
  animation: mobileIconShine 4s ease-in-out infinite;
}

/* líneas de contenido */
.mobile-screen-line {
  position: absolute;
  left: 6px;
  height: 2px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
}

.mobile-line-one {
  top: 11px;
  width: 13px;
}

.mobile-line-two {
  top: 16px;
  width: 9px;
  background: rgba(182, 236, 71, 0.65);
}

/* apps en grid */
.mobile-app-grid {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background: rgba(182, 236, 71, 0.18);
  border: 1px solid rgba(182, 236, 71, 0.75);
  box-shadow: 0 0 5px rgba(182, 236, 71, 0.25);
  animation: mobileAppPulse 2s ease-in-out infinite;
}

.app-grid-one {
  left: 6px;
  top: 23px;
}

.app-grid-two {
  left: 15px;
  top: 23px;
  animation-delay: 0.2s;
}

.app-grid-three {
  left: 6px;
  top: 30px;
  animation-delay: 0.4s;
}

.app-grid-four {
  left: 15px;
  top: 30px;
  animation-delay: 0.6s;
}

/* notificación */
.mobile-notification {
  position: absolute;
  right: -4px;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #b6ec47;
  box-shadow:
    0 0 8px rgba(182, 236, 71, 0.7),
    0 0 14px rgba(182, 236, 71, 0.35);
  animation: mobileNotificationBounce 2.4s ease-in-out infinite;
}

.mobile-notification::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}

/* botón inferior */
.mobile-home-button {
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 5px;
  height: 2px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.65);
  transform: translateX(-50%);
}

@keyframes mobileIconFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-3px) rotate(-1deg);
  }
}

@keyframes mobileIconShine {
  0% {
    left: -24px;
  }

  45%, 100% {
    left: 40px;
  }
}

@keyframes mobileAppPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.75;
  }

  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

@keyframes mobileNotificationBounce {
  0%, 100% {
    transform: scale(1) translateY(0);
  }

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

.service_single_item:hover .mobile-app-icon {
  border-color: #b6ec47;
  box-shadow:
    0 0 20px rgba(182, 236, 71, 0.38),
    inset 0 0 10px rgba(255, 255, 255, 0.08);
}






/* Service 6 */

.service-icon {
  width: 42px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.business-tech-icon {
  width: 42px;
  height: 40px;
  position: relative;
  border: 1.5px solid rgba(182, 236, 71, 0.85);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(182, 236, 71, 0.15), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.03);
  box-shadow:
    0 0 14px rgba(182, 236, 71, 0.22),
    inset 0 0 8px rgba(255, 255, 255, 0.06);
  overflow: hidden;
  animation: btIconFloat 3s ease-in-out infinite;
}

/* barra superior tipo interfaz */
.business-tech-icon::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(182, 236, 71, 0.35);
}

/* brillo diagonal */
.business-tech-icon::after {
  content: "";
  position: absolute;
  top: -18px;
  left: -22px;
  width: 18px;
  height: 70px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );
  transform: rotate(25deg);
  animation: btIconShine 4s ease-in-out infinite;
}

/* líneas de contenido */
.bt-line {
  position: absolute;
  left: 6px;
  height: 2px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
}

.bt-line-one {
  top: 13px;
  width: 14px;
}

.bt-line-two {
  top: 18px;
  width: 10px;
  background: rgba(182, 236, 71, 0.65);
}

/* barras de análisis */
.bt-bar {
  position: absolute;
  bottom: 6px;
  width: 3px;
  border-radius: 6px;
  background: rgba(182, 236, 71, 0.78);
  box-shadow: 0 0 5px rgba(182, 236, 71, 0.35);
  animation: btBarsPulse 2s ease-in-out infinite;
}

.bt-bar-one {
  left: 7px;
  height: 7px;
}

.bt-bar-two {
  left: 13px;
  height: 11px;
  animation-delay: 0.2s;
}

.bt-bar-three {
  left: 19px;
  height: 9px;
  animation-delay: 0.4s;
}

/* engranaje */
.bt-gear {
  position: absolute;
  right: 7px;
  top: 14px;
  width: 12px;
  height: 12px;
  border: 1.4px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(182, 236, 71, 0.25);
  animation: btGearRotate 4s linear infinite;
}

.bt-gear::before,
.bt-gear::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  background: rgba(182, 236, 71, 0.8);
  border-radius: 10px;
  transform: translate(-50%, -50%);
}

.bt-gear::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* centro del engranaje */
.bt-gear-center {
  position: absolute;
  right: 11px;
  top: 18px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #b6ec47;
  box-shadow: 0 0 6px rgba(182, 236, 71, 0.5);
  animation: btCenterPulse 2s ease-in-out infinite;
}

/* nodos de conexión */
.bt-node {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(182, 236, 71, 0.85);
  box-shadow: 0 0 5px rgba(182, 236, 71, 0.45);
  animation: btNodePulse 2.2s ease-in-out infinite;
}

.bt-node-one {
  right: 15px;
  bottom: 8px;
}

.bt-node-two {
  right: 7px;
  bottom: 12px;
  animation-delay: 0.3s;
}

@keyframes btIconFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes btIconShine {
  0% {
    left: -24px;
  }
  45%, 100% {
    left: 54px;
  }
}

@keyframes btBarsPulse {
  0%, 100% {
    transform: scaleY(1);
    opacity: 0.8;
  }
  50% {
    transform: scaleY(1.15);
    opacity: 1;
  }
}

@keyframes btGearRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes btCenterPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}

@keyframes btNodePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.65;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

.service_single_item:hover .business-tech-icon {
  border-color: #b6ec47;
  box-shadow:
    0 0 20px rgba(182, 236, 71, 0.38),
    inset 0 0 10px rgba(255, 255, 255, 0.08);
}




/* Feature 1 */

.feature-visual {
  width: 662px;
  height: 280px;
  position: relative;
  border-radius: 36px;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 18%, rgba(182, 236, 71, 0.24), transparent 30%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.14), transparent 28%),
    linear-gradient(135deg, #101214 0%, #1a1d20 48%, #0d0f11 100%);
  border: 1px solid rgba(182, 236, 71, 0.24);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.38),
    inset 0 0 35px rgba(255, 255, 255, 0.04);
}

/* fondo tipo tecnología */
.visual-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.7;
}

/* brillo general */
.feature-visual::before {
  content: "";
  position: absolute;
  top: -90px;
  left: -120px;
  width: 180px;
  height: 500px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.13),
    transparent
  );
  transform: rotate(27deg);
  animation: featureVisualShine 6s ease-in-out infinite;
}

/* degradado inferior */
.feature-visual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.48),
    transparent
  );
}

/* mesa */
.meeting-table {
  position: absolute;
  left: 105px;
  bottom: 38px;
  width: 455px;
  height: 54px;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 18px 30px rgba(0, 0, 0, 0.35),
    inset 0 0 18px rgba(182, 236, 71, 0.08);
  z-index: 3;
}

/* personas abstractas */
.person {
  position: absolute;
  z-index: 4;
  animation: personFloat 3.5s ease-in-out infinite;
}

.person .head {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.55), transparent 25%),
    linear-gradient(135deg, #f2f2f2, #9fa4a8);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.16);
}

.person .body {
  position: absolute;
  border-radius: 28px 28px 10px 10px;
  background:
    linear-gradient(135deg, rgba(182, 236, 71, 0.72), rgba(182, 236, 71, 0.16)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255,255,255,0.04));
  border: 1px solid rgba(182, 236, 71, 0.28);
  box-shadow:
    0 0 24px rgba(182, 236, 71, 0.16),
    inset 0 0 12px rgba(255, 255, 255, 0.10);
}

.person .arm {
  position: absolute;
  height: 12px;
  border-radius: 20px;
  background: rgba(225, 225, 225, 0.72);
  transform-origin: left center;
}

/* persona izquierda */
.person-left {
  left: 88px;
  top: 82px;
  width: 130px;
  height: 150px;
}

.person-left .head {
  width: 42px;
  height: 42px;
  left: 42px;
  top: 0;
}

.person-left .body {
  width: 86px;
  height: 88px;
  left: 20px;
  top: 48px;
}

.person-left .arm {
  width: 105px;
  left: 82px;
  top: 88px;
  transform: rotate(13deg);
}

/* persona centro */
.person-center {
  left: 268px;
  top: 46px;
  width: 135px;
  height: 180px;
  animation-delay: 0.3s;
}

.person-center .head {
  width: 48px;
  height: 48px;
  left: 44px;
  top: 0;
}

.person-center .body {
  width: 92px;
  height: 108px;
  left: 22px;
  top: 55px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.72), rgba(255,255,255,0.14)),
    linear-gradient(180deg, rgba(182,236,71,0.26), rgba(182,236,71,0.06));
}

.person-center .arm {
  width: 92px;
  left: 62px;
  top: 103px;
  transform: rotate(28deg);
  background: rgba(235, 235, 235, 0.76);
}

/* persona derecha */
.person-right {
  right: 90px;
  top: 86px;
  width: 135px;
  height: 150px;
  animation-delay: 0.6s;
}

.person-right .head {
  width: 42px;
  height: 42px;
  left: 46px;
  top: 0;
}

.person-right .body {
  width: 90px;
  height: 86px;
  left: 24px;
  top: 48px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.58), rgba(255,255,255,0.10)),
    linear-gradient(180deg, rgba(182,236,71,0.20), rgba(182,236,71,0.05));
}

.person-right .arm {
  width: 120px;
  right: 78px;
  top: 88px;
  transform: rotate(-12deg);
  transform-origin: right center;
}

/* laptop */
.laptop {
  position: absolute;
  left: 268px;
  bottom: 65px;
  width: 130px;
  height: 76px;
  border-radius: 10px 10px 4px 4px;
  background:
    linear-gradient(135deg, rgba(182, 236, 71, 0.18), rgba(255, 255, 255, 0.06)),
    #181b1e;
  border: 1.5px solid rgba(182, 236, 71, 0.46);
  box-shadow:
    0 0 22px rgba(182, 236, 71, 0.16),
    inset 0 0 12px rgba(255, 255, 255, 0.05);
  z-index: 5;
  animation: laptopGlow 2.8s ease-in-out infinite;
}

.laptop::after {
  content: "";
  position: absolute;
  left: -16px;
  bottom: -12px;
  width: 162px;
  height: 12px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.06));
}

.screen-line {
  position: absolute;
  left: 18px;
  height: 4px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.55);
}

.line-a {
  top: 20px;
  width: 72px;
}

.line-b {
  top: 34px;
  width: 52px;
  background: rgba(182, 236, 71, 0.75);
}

.line-c {
  top: 48px;
  width: 82px;
  background: rgba(255, 255, 255, 0.28);
}

/* badge de calidad */
.quality-badge {
  position: absolute;
  right: 52px;
  top: 38px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.28), transparent 28%),
    rgba(182, 236, 71, 0.10);
  border: 2px solid rgba(182, 236, 71, 0.86);
  box-shadow:
    0 0 32px rgba(182, 236, 71, 0.30),
    inset 0 0 18px rgba(182, 236, 71, 0.10);
  z-index: 6;
  animation: badgeFloat 3s ease-in-out infinite;
}

.badge-star {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  color: #b6ec47;
  font-size: 28px;
  line-height: 1;
  text-shadow: 0 0 12px rgba(182, 236, 71, 0.65);
}

.badge-check {
  position: absolute;
  left: 31px;
  top: 48px;
  width: 31px;
  height: 16px;
  border-left: 5px solid #ffffff;
  border-bottom: 5px solid #ffffff;
  transform: rotate(-45deg);
  border-radius: 2px;
}

/* tarjetas flotantes */
.floating-card {
  position: absolute;
  width: 92px;
  height: 52px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03));
  border: 1px solid rgba(182, 236, 71, 0.22);
  box-shadow: 0 14px 28px rgba(0,0,0,0.20);
  z-index: 2;
}

.floating-card span {
  position: absolute;
  left: 14px;
  height: 4px;
  border-radius: 20px;
  background: rgba(255,255,255,0.42);
}

.floating-card span:first-child {
  top: 16px;
  width: 54px;
}

.floating-card span:last-child {
  top: 29px;
  width: 36px;
  background: rgba(182, 236, 71, 0.58);
}

.card-one {
  left: 38px;
  top: 34px;
  animation: cardFloat 4s ease-in-out infinite;
}

.card-two {
  right: 170px;
  bottom: 32px;
  animation: cardFloat 4s ease-in-out infinite;
  animation-delay: 0.8s;
}

/* animaciones */
@keyframes featureVisualShine {
  0% {
    left: -170px;
  }

  45%, 100% {
    left: 760px;
  }
}

@keyframes personFloat {
  0%, 100% {
    transform: translateY(0);
  }

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

@keyframes laptopGlow {
  0%, 100% {
    box-shadow:
      0 0 22px rgba(182, 236, 71, 0.16),
      inset 0 0 12px rgba(255, 255, 255, 0.05);
  }

  50% {
    box-shadow:
      0 0 34px rgba(182, 236, 71, 0.28),
      inset 0 0 16px rgba(255, 255, 255, 0.08);
  }
}

@keyframes badgeFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-6px) rotate(2deg);
  }
}

@keyframes cardFloat {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.75;
  }

  50% {
    transform: translateY(-8px);
    opacity: 1;
  }
}

/* responsive */
@media (max-width: 768px) {
  .feature-visual {
    width: 100%;
    height: 260px;
    border-radius: 26px;
  }

  .person-left {
    left: 30px;
    transform: scale(0.82);
  }

  .person-center {
    left: 38%;
    transform: scale(0.82);
  }

  .person-right {
    right: 26px;
    transform: scale(0.82);
  }

  .laptop {
    left: 50%;
    transform: translateX(-50%);
  }

  .quality-badge {
    right: 28px;
    top: 28px;
    width: 76px;
    height: 76px;
  }

  .badge-star {
    font-size: 23px;
  }

  .badge-check {
    left: 26px;
    top: 41px;
    width: 25px;
    height: 13px;
  }
}


/* Feature 2 */

.feature-item {
  width: 430px;
  max-width: 100%;
}

/* Main visual container */
.support-247-visual {
  width: 430px;
  height: 280px;
  max-width: 100%;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 20%, rgba(182, 236, 71, 0.20), transparent 28%),
    radial-gradient(circle at 80% 18%, rgba(255, 255, 255, 0.12), transparent 30%),
    linear-gradient(135deg, #111315 0%, #1b1f22 50%, #0d0f11 100%);
  border: 1px solid rgba(182, 236, 71, 0.22);
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.35),
    inset 0 0 30px rgba(255, 255, 255, 0.04);
}

/* Light sweep effect */
.support-247-visual::before {
  content: "";
  position: absolute;
  top: -90px;
  left: -120px;
  width: 150px;
  height: 460px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent
  );
  transform: rotate(26deg);
  animation: supportShine 6s ease-in-out infinite;
}

/* Bottom shadow */
.support-247-visual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.42), transparent);
  z-index: 1;
}

/* Background grid */
.support-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.65;
}

/* Dashboard panel */
.support-panel {
  position: absolute;
  left: 26px;
  top: 46px;
  width: 145px;
  height: 98px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(182, 236, 71, 0.14), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(182, 236, 71, 0.26);
  box-shadow:
    0 0 20px rgba(182, 236, 71, 0.10),
    inset 0 0 12px rgba(255, 255, 255, 0.04);
  z-index: 2;
  animation: supportPanelFloat 3.5s ease-in-out infinite;
}

.support-panel::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(182, 236, 71, 0.24);
}

.panel-line {
  position: absolute;
  left: 18px;
  height: 4px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.48);
}

.panel-line-one {
  top: 33px;
  width: 72px;
}

.panel-line-two {
  top: 50px;
  width: 95px;
  background: rgba(182, 236, 71, 0.72);
}

.panel-line-three {
  top: 67px;
  width: 58px;
}

/* Agent figure */
.support-agent {
  position: absolute;
  left: 142px;
  bottom: 42px;
  width: 130px;
  height: 150px;
  z-index: 4;
  animation: supportAgentFloat 3.2s ease-in-out infinite;
}

.agent-head {
  position: absolute;
  left: 38px;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.55), transparent 25%),
    linear-gradient(135deg, #f4f4f4, #9da2a6);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.12);
}

.agent-body {
  position: absolute;
  left: 20px;
  top: 52px;
  width: 88px;
  height: 88px;
  border-radius: 28px 28px 12px 12px;
  background:
    linear-gradient(135deg, rgba(182, 236, 71, 0.72), rgba(182, 236, 71, 0.16)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(182, 236, 71, 0.30);
  box-shadow:
    0 0 20px rgba(182, 236, 71, 0.16),
    inset 0 0 10px rgba(255, 255, 255, 0.08);
}

/* Headset */
.agent-headset {
  position: absolute;
  left: 28px;
  top: -3px;
  width: 68px;
  height: 48px;
  border: 4px solid rgba(182, 236, 71, 0.82);
  border-bottom: 0;
  border-radius: 40px 40px 0 0;
  opacity: 0.95;
}

.agent-headset::before,
.agent-headset::after {
  content: "";
  position: absolute;
  top: 17px;
  width: 10px;
  height: 18px;
  border-radius: 10px;
  background: rgba(182, 236, 71, 0.88);
  box-shadow: 0 0 8px rgba(182, 236, 71, 0.35);
}

.agent-headset::before {
  left: -8px;
}

.agent-headset::after {
  right: -8px;
}

/* Microphone */
.agent-mic {
  position: absolute;
  left: 68px;
  top: 38px;
  width: 28px;
  height: 4px;
  border-radius: 12px;
  background: rgba(182, 236, 71, 0.85);
  transform: rotate(28deg);
  transform-origin: left center;
  box-shadow: 0 0 8px rgba(182, 236, 71, 0.35);
}

.agent-mic::after {
  content: "";
  position: absolute;
  right: -4px;
  top: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b6ec47;
}

/* Chat bubbles */
.support-chat {
  position: absolute;
  width: 96px;
  height: 56px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(182, 236, 71, 0.22);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.18);
  z-index: 3;
}

.support-chat::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 18px;
  width: 14px;
  height: 14px;
  background: inherit;
  border-left: 1px solid rgba(182, 236, 71, 0.22);
  border-bottom: 1px solid rgba(182, 236, 71, 0.22);
  transform: rotate(-45deg);
}

.support-chat span {
  position: absolute;
  left: 14px;
  height: 4px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.48);
}

.support-chat span:first-child {
  top: 17px;
  width: 54px;
}

.support-chat span:last-child {
  top: 30px;
  width: 36px;
  background: rgba(182, 236, 71, 0.65);
}

.chat-one {
  left: 38px;
  bottom: 38px;
  animation: supportChatFloat 4s ease-in-out infinite;
}

.chat-two {
  right: 30px;
  top: 58px;
  animation: supportChatFloat 4s ease-in-out infinite;
  animation-delay: 0.8s;
}

/* 24/7 ring */
.support-ring {
  position: absolute;
  right: 32px;
  bottom: 34px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 2px solid rgba(182, 236, 71, 0.86);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.20), transparent 28%),
    rgba(182, 236, 71, 0.08);
  box-shadow:
    0 0 28px rgba(182, 236, 71, 0.22),
    inset 0 0 18px rgba(182, 236, 71, 0.10);
  z-index: 4;
  animation: supportRingPulse 3s ease-in-out infinite;
}

.ring-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(182, 236, 71, 0.35);
}

.ring-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b6ec47;
  box-shadow: 0 0 10px rgba(182, 236, 71, 0.65);
}

.ring-dot-one {
  top: 12px;
  left: 48px;
}

.ring-dot-two {
  right: 12px;
  top: 48px;
}

.ring-dot-three {
  bottom: 12px;
  left: 48px;
}

/* Status card */
.support-status-card {
  position: absolute;
  left: 208px;
  top: 28px;
  width: 118px;
  height: 58px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(182, 236, 71, 0.22);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.18);
  z-index: 3;
  animation: statusFloat 3.8s ease-in-out infinite;
}

.status-icon {
  position: absolute;
  left: 14px;
  top: 17px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #b6ec47;
  box-shadow:
    0 0 12px rgba(182, 236, 71, 0.65),
    inset 0 0 4px rgba(255, 255, 255, 0.4);
}

.status-line {
  position: absolute;
  left: 42px;
  height: 4px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.48);
}

.status-line-one {
  top: 18px;
  width: 52px;
}

.status-line-two {
  top: 31px;
  width: 38px;
  background: rgba(182, 236, 71, 0.60);
}

/* Text below visual */
.feature-content {
  margin-top: 18px;
}

.feature-content h3 {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1.2;
  color: #ffffff;
  font-weight: 700;
}

.feature-content p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

/* Animations */
@keyframes supportShine {
  0% {
    left: -160px;
  }

  45%, 100% {
    left: 520px;
  }
}

@keyframes supportPanelFloat {
  0%, 100% {
    transform: translateY(0);
  }

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

@keyframes supportAgentFloat {
  0%, 100% {
    transform: translateY(0);
  }

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

@keyframes supportChatFloat {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.78;
  }

  50% {
    transform: translateY(-7px);
    opacity: 1;
  }
}

@keyframes supportRingPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 28px rgba(182, 236, 71, 0.22),
      inset 0 0 18px rgba(182, 236, 71, 0.10);
  }

  50% {
    transform: scale(1.04);
    box-shadow:
      0 0 36px rgba(182, 236, 71, 0.30),
      inset 0 0 20px rgba(182, 236, 71, 0.12);
  }
}

@keyframes statusFloat {
  0%, 100% {
    transform: translateY(0);
  }

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

/* Responsive */
@media (max-width: 768px) {
  .feature-item {
    width: 100%;
  }

  .support-247-visual {
    width: 100%;
    height: auto;
    aspect-ratio: 430 / 280;
    border-radius: 22px;
  }

  .support-panel {
    left: 18px;
    top: 44px;
    width: 128px;
    height: 90px;
  }

  .support-agent {
    left: 118px;
    bottom: 38px;
    transform: scale(0.9);
  }

  .support-ring {
    right: 20px;
    bottom: 28px;
    width: 88px;
    height: 88px;
  }

  .ring-text {
    font-size: 20px;
  }

  .ring-dot-one {
    left: 40px;
  }

  .ring-dot-two {
    top: 40px;
  }

  .ring-dot-three {
    left: 40px;
  }

  .support-status-card {
    left: 178px;
    top: 24px;
    width: 104px;
  }

  .chat-two {
    right: 18px;
  }

  .feature-content h3 {
    font-size: 24px;
  }
}

/* Feature 3 */

.feature-item {
  width: 430px;
  max-width: 100%;
}

/* Main visual container */
.transparency-efficiency-visual {
  width: 430px;
  height: 280px;
  max-width: 100%;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 18%, rgba(182, 236, 71, 0.20), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(255, 255, 255, 0.12), transparent 30%),
    linear-gradient(135deg, #111315 0%, #1b1f22 52%, #0d0f11 100%);
  border: 1px solid rgba(182, 236, 71, 0.22);
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.35),
    inset 0 0 30px rgba(255, 255, 255, 0.04);
}

/* Light sweep effect */
.transparency-efficiency-visual::before {
  content: "";
  position: absolute;
  top: -90px;
  left: -120px;
  width: 150px;
  height: 460px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent
  );
  transform: rotate(26deg);
  animation: teShine 6s ease-in-out infinite;
}

/* Bottom depth */
.transparency-efficiency-visual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.42), transparent);
  z-index: 1;
}

/* Background grid */
.te-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.65;
}

/* Main transparent dashboard */
.te-main-panel {
  position: absolute;
  left: 70px;
  top: 54px;
  width: 215px;
  height: 148px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(182, 236, 71, 0.30);
  box-shadow:
    0 18px 35px rgba(0, 0, 0, 0.28),
    0 0 24px rgba(182, 236, 71, 0.10),
    inset 0 0 18px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 3;
  animation: tePanelFloat 3.4s ease-in-out infinite;
}

.te-panel-header {
  position: absolute;
  top: 16px;
  left: 18px;
  width: 78px;
  height: 6px;
  border-radius: 20px;
  background: rgba(182, 236, 71, 0.76);
  box-shadow: 0 0 10px rgba(182, 236, 71, 0.35);
}

.te-line {
  position: absolute;
  left: 56px;
  height: 5px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.52);
}

.te-line-one {
  top: 52px;
  width: 118px;
}

.te-line-two {
  top: 82px;
  width: 96px;
  background: rgba(182, 236, 71, 0.62);
}

.te-line-three {
  top: 112px;
  width: 132px;
}

/* Check marks */
.te-check {
  position: absolute;
  left: 24px;
  width: 18px;
  height: 10px;
  border-left: 3px solid #b6ec47;
  border-bottom: 3px solid #b6ec47;
  transform: rotate(-45deg);
  border-radius: 2px;
  filter: drop-shadow(0 0 5px rgba(182, 236, 71, 0.55));
  animation: teCheckPulse 2.2s ease-in-out infinite;
}

.te-check-one {
  top: 50px;
}

.te-check-two {
  top: 80px;
  animation-delay: 0.2s;
}

.te-check-three {
  top: 110px;
  animation-delay: 0.4s;
}

/* Glass cards */
.te-glass-card {
  position: absolute;
  width: 122px;
  height: 72px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(182, 236, 71, 0.22);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.22),
    inset 0 0 10px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 4;
}

.te-card-left {
  left: 28px;
  bottom: 38px;
  animation: teCardFloat 4s ease-in-out infinite;
}

.te-card-right {
  right: 30px;
  top: 46px;
  animation: teCardFloat 4s ease-in-out infinite;
  animation-delay: 0.7s;
}

.te-card-dot {
  position: absolute;
  left: 15px;
  top: 18px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #b6ec47;
  box-shadow:
    0 0 12px rgba(182, 236, 71, 0.65),
    inset 0 0 4px rgba(255, 255, 255, 0.4);
}

.te-card-line {
  position: absolute;
  left: 42px;
  height: 4px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.48);
}

.te-card-line-one {
  top: 19px;
  width: 52px;
}

.te-card-line-two {
  top: 34px;
  width: 38px;
  background: rgba(182, 236, 71, 0.60);
}

/* Efficiency ring */
.te-efficiency-ring {
  position: absolute;
  right: 42px;
  bottom: 38px;
  width: 102px;
  height: 102px;
  border-radius: 50%;
  border: 2px solid rgba(182, 236, 71, 0.86);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.20), transparent 28%),
    rgba(182, 236, 71, 0.08);
  box-shadow:
    0 0 28px rgba(182, 236, 71, 0.22),
    inset 0 0 18px rgba(182, 236, 71, 0.10);
  z-index: 5;
  animation: teRingPulse 3s ease-in-out infinite;
}

.te-efficiency-ring::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  animation: teRotate 8s linear infinite;
}

.te-ring-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 800;
  color: #ffffff;
  font-size: 22px;
  letter-spacing: 0.5px;
  text-shadow: 0 0 10px rgba(182, 236, 71, 0.35);
}

.te-ring-arrow {
  position: absolute;
  right: 15px;
  top: 18px;
  width: 16px;
  height: 16px;
  border-top: 3px solid #b6ec47;
  border-right: 3px solid #b6ec47;
  transform: rotate(35deg);
  filter: drop-shadow(0 0 6px rgba(182, 236, 71, 0.55));
}

/* Flow line */
.te-flow {
  position: absolute;
  left: 62px;
  bottom: 86px;
  width: 250px;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(182, 236, 71, 0.65),
    transparent
  );
  z-index: 2;
}

.te-flow-dot {
  position: absolute;
  top: -4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #b6ec47;
  box-shadow: 0 0 12px rgba(182, 236, 71, 0.7);
  animation: teFlowDot 2.6s ease-in-out infinite;
}

.te-flow-dot-one {
  left: 35px;
}

.te-flow-dot-two {
  left: 118px;
  animation-delay: 0.3s;
}

.te-flow-dot-three {
  right: 28px;
  animation-delay: 0.6s;
}

/* Text below visual */
.feature-content {
  margin-top: 18px;
}

.feature-content h3 {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1.2;
  color: #ffffff;
  font-weight: 700;
}

.feature-content p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

/* Animations */
@keyframes teShine {
  0% {
    left: -160px;
  }

  45%, 100% {
    left: 520px;
  }
}

@keyframes tePanelFloat {
  0%, 100% {
    transform: translateY(0);
  }

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

@keyframes teCheckPulse {
  0%, 100% {
    opacity: 0.75;
    transform: rotate(-45deg) scale(1);
  }

  50% {
    opacity: 1;
    transform: rotate(-45deg) scale(1.12);
  }
}

@keyframes teCardFloat {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.78;
  }

  50% {
    transform: translateY(-7px);
    opacity: 1;
  }
}

@keyframes teRingPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 28px rgba(182, 236, 71, 0.22),
      inset 0 0 18px rgba(182, 236, 71, 0.10);
  }

  50% {
    transform: scale(1.04);
    box-shadow:
      0 0 36px rgba(182, 236, 71, 0.30),
      inset 0 0 20px rgba(182, 236, 71, 0.12);
  }
}

@keyframes teRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes teFlowDot {
  0%, 100% {
    transform: translateX(0) scale(0.9);
    opacity: 0.55;
  }

  50% {
    transform: translateX(12px) scale(1.15);
    opacity: 1;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .feature-item {
    width: 100%;
  }

  .transparency-efficiency-visual {
    width: 100%;
    height: auto;
    aspect-ratio: 430 / 280;
    border-radius: 22px;
  }

  .te-main-panel {
    left: 50px;
    top: 54px;
    width: 190px;
    height: 138px;
  }

  .te-card-left {
    left: 18px;
    bottom: 34px;
    width: 108px;
  }

  .te-card-right {
    right: 18px;
    top: 42px;
    width: 108px;
  }

  .te-efficiency-ring {
    right: 22px;
    bottom: 34px;
    width: 88px;
    height: 88px;
  }

  .te-ring-text {
    font-size: 19px;
  }

  .te-flow {
    left: 44px;
    width: 230px;
  }

  .feature-content h3 {
    font-size: 24px;
  }
}

/* Feature 4 */

/* ================================
   AFFORDABLE PRICING - RESPONSIVE
   Size original: 662 x 280
================================ */

/* Contenedor general */
.feature-item-wide {
  width: 662px;
  max-width: 100%;
}

/* Wrapper responsive que evita distorsión */
.feature-visual-scale-wide {
  width: 100%;
  max-width: 662px;
  aspect-ratio: 662 / 280;
  position: relative;
  overflow: hidden;
  border-radius: 30px;
}

/* Diseño original fijo */
.feature-visual-scale-wide .affordable-pricing-visual {
  width: 662px;
  height: 280px;
  max-width: none;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
}

/* Main visual */
.affordable-pricing-visual {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(182, 236, 71, 0.20), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.12), transparent 28%),
    linear-gradient(135deg, #101214 0%, #1a1d20 50%, #0d0f11 100%);
  border: 1px solid rgba(182, 236, 71, 0.24);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.36),
    inset 0 0 30px rgba(255, 255, 255, 0.04);
}

/* Shine */
.affordable-pricing-visual::before {
  content: "";
  position: absolute;
  top: -90px;
  left: -120px;
  width: 170px;
  height: 500px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent
  );
  transform: rotate(26deg);
  animation: apShine 6s ease-in-out infinite;
}

/* Bottom depth */
.affordable-pricing-visual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.44), transparent);
  z-index: 1;
}

/* Background grid */
.ap-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.65;
}

/* Price tag */
.ap-price-tag {
  position: absolute;
  left: 46px;
  top: 58px;
  width: 142px;
  height: 94px;
  clip-path: polygon(0 0, 84% 0, 100% 50%, 84% 100%, 0 100%);
  background:
    linear-gradient(135deg, rgba(182, 236, 71, 0.24), rgba(255, 255, 255, 0.05)),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(182, 236, 71, 0.34);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.22),
    0 0 22px rgba(182, 236, 71, 0.12),
    inset 0 0 12px rgba(255, 255, 255, 0.05);
  z-index: 4;
  transform: rotate(-10deg);
  animation: apTagFloat 3.8s ease-in-out infinite;
}

.ap-tag-hole {
  position: absolute;
  right: 22px;
  top: 18px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(16, 18, 20, 0.85);
  border: 1px solid rgba(182, 236, 71, 0.45);
}

.ap-tag-currency {
  position: absolute;
  left: 24px;
  top: 18px;
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 0 12px rgba(182, 236, 71, 0.28);
}

.ap-tag-line {
  position: absolute;
  left: 25px;
  height: 4px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.46);
}

.ap-tag-line-one {
  top: 60px;
  width: 54px;
}

.ap-tag-line-two {
  top: 73px;
  width: 38px;
  background: rgba(182, 236, 71, 0.70);
}

/* Main pricing panel */
.ap-main-panel {
  position: absolute;
  left: 206px;
  top: 52px;
  width: 248px;
  height: 154px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(182, 236, 71, 0.30);
  box-shadow:
    0 18px 35px rgba(0, 0, 0, 0.28),
    0 0 24px rgba(182, 236, 71, 0.10),
    inset 0 0 18px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 4;
  animation: apPanelFloat 3.5s ease-in-out infinite;
}

.ap-panel-header {
  position: absolute;
  top: 18px;
  left: 20px;
  width: 86px;
  height: 6px;
  border-radius: 20px;
  background: rgba(182, 236, 71, 0.78);
  box-shadow: 0 0 10px rgba(182, 236, 71, 0.35);
}

.ap-check {
  position: absolute;
  left: 22px;
  width: 16px;
  height: 9px;
  border-left: 3px solid #b6ec47;
  border-bottom: 3px solid #b6ec47;
  transform: rotate(-45deg);
  border-radius: 2px;
  filter: drop-shadow(0 0 5px rgba(182, 236, 71, 0.55));
  animation: apCheckPulse 2.4s ease-in-out infinite;
}

.ap-check-one {
  top: 52px;
}

.ap-check-two {
  top: 84px;
  animation-delay: 0.2s;
}

.ap-check-three {
  top: 116px;
  animation-delay: 0.4s;
}

.ap-line {
  position: absolute;
  left: 52px;
  height: 5px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.52);
}

.ap-line-one {
  top: 50px;
  width: 104px;
}

.ap-line-two {
  top: 82px;
  width: 84px;
}

.ap-line-three {
  top: 114px;
  width: 112px;
}

.ap-pill {
  position: absolute;
  right: 20px;
  height: 22px;
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(182, 236, 71, 0.20), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(182, 236, 71, 0.35);
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.04);
}

.ap-pill-one {
  top: 42px;
  width: 46px;
}

.ap-pill-two {
  top: 74px;
  width: 58px;
}

.ap-pill-three {
  top: 106px;
  width: 42px;
}

/* Wallet */
.ap-wallet-card {
  position: absolute;
  left: 126px;
  bottom: 34px;
  width: 132px;
  height: 78px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
  border: 1px solid rgba(182, 236, 71, 0.24);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.22),
    inset 0 0 12px rgba(255, 255, 255, 0.04);
  z-index: 3;
  animation: apWalletFloat 4s ease-in-out infinite;
}

.ap-wallet-flap {
  position: absolute;
  left: 10px;
  top: 18px;
  width: 92px;
  height: 28px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(182, 236, 71, 0.18), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(182, 236, 71, 0.28);
}

.ap-wallet-button {
  position: absolute;
  left: 84px;
  top: 28px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #b6ec47;
  box-shadow: 0 0 10px rgba(182, 236, 71, 0.55);
}

.ap-wallet-line {
  position: absolute;
  left: 16px;
  height: 4px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.42);
}

.ap-wallet-line-one {
  bottom: 22px;
  width: 58px;
}

.ap-wallet-line-two {
  bottom: 10px;
  width: 40px;
  background: rgba(182, 236, 71, 0.60);
}

/* Coins */
.ap-coin-stack {
  position: absolute;
  left: 310px;
  bottom: 38px;
  width: 78px;
  height: 56px;
  z-index: 5;
  animation: apCoinFloat 3s ease-in-out infinite;
}

.ap-coin {
  position: absolute;
  left: 50%;
  width: 58px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.32), rgba(182,236,71,0.16));
  border: 1px solid rgba(182, 236, 71, 0.40);
  box-shadow:
    0 0 12px rgba(182, 236, 71, 0.18),
    inset 0 0 8px rgba(255, 255, 255, 0.06);
}

.coin-one {
  bottom: 0;
}

.coin-two {
  bottom: 12px;
}

.coin-three {
  bottom: 24px;
}

/* Mini floating cards */
.ap-mini-card {
  position: absolute;
  width: 120px;
  height: 64px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
  border: 1px solid rgba(182, 236, 71, 0.22);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.20),
    inset 0 0 10px rgba(255, 255, 255, 0.04);
  z-index: 3;
}

.ap-card-top {
  right: 170px;
  top: 32px;
  animation: apMiniFloat 4s ease-in-out infinite;
}

.ap-card-bottom {
  right: 184px;
  bottom: 26px;
  animation: apMiniFloat 4s ease-in-out infinite;
  animation-delay: 0.8s;
}

.ap-mini-dot {
  position: absolute;
  left: 14px;
  top: 18px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #b6ec47;
  box-shadow:
    0 0 12px rgba(182, 236, 71, 0.60),
    inset 0 0 4px rgba(255,255,255,0.4);
}

.ap-mini-line {
  position: absolute;
  left: 40px;
  height: 4px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.48);
}

.ap-mini-line-one {
  top: 20px;
  width: 52px;
}

.ap-mini-line-two {
  top: 34px;
  width: 34px;
  background: rgba(182, 236, 71, 0.62);
}

/* Flow line */
.ap-flow-line {
  position: absolute;
  left: 454px;
  top: 138px;
  width: 88px;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(182, 236, 71, 0.65),
    transparent
  );
  z-index: 2;
}

.ap-flow-dot {
  position: absolute;
  top: -4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #b6ec47;
  box-shadow: 0 0 12px rgba(182, 236, 71, 0.70);
  animation: apFlowDot 2.5s ease-in-out infinite;
}

.ap-flow-dot-one {
  left: 10px;
}

.ap-flow-dot-two {
  left: 36px;
  animation-delay: 0.25s;
}

.ap-flow-dot-three {
  right: 10px;
  animation-delay: 0.5s;
}

/* Savings ring */
.ap-savings-ring {
  position: absolute;
  right: 46px;
  top: 78px;
  width: 122px;
  height: 122px;
  border-radius: 50%;
  border: 2px solid rgba(182, 236, 71, 0.86);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.20), transparent 28%),
    rgba(182, 236, 71, 0.08);
  box-shadow:
    0 0 30px rgba(182, 236, 71, 0.22),
    inset 0 0 18px rgba(182, 236, 71, 0.10);
  z-index: 5;
  animation: apRingPulse 3s ease-in-out infinite;
}

.ap-ring-inner {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.24);
  animation: apRotate 8s linear infinite;
}

.ap-ring-text {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #ffffff;
}

.ap-ring-symbol {
  position: absolute;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  font-weight: 800;
  color: #b6ec47;
  text-shadow: 0 0 10px rgba(182, 236, 71, 0.34);
}

.ap-ring-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b6ec47;
  box-shadow: 0 0 10px rgba(182, 236, 71, 0.65);
}

.ap-ring-dot-one {
  top: 12px;
  left: 57px;
}

.ap-ring-dot-two {
  right: 14px;
  top: 55px;
}

.ap-ring-dot-three {
  bottom: 12px;
  left: 57px;
}

/* Text below */
.feature-content {
  margin-top: 18px;
}

.feature-content h3 {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.2;
  color: #ffffff;
  font-weight: 700;
}

.feature-content p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  max-width: 620px;
}

/* Animations */
@keyframes apShine {
  0% {
    left: -170px;
  }

  45%, 100% {
    left: 760px;
  }
}

@keyframes apTagFloat {
  0%, 100% {
    transform: rotate(-10deg) translateY(0);
  }

  50% {
    transform: rotate(-10deg) translateY(-6px);
  }
}

@keyframes apPanelFloat {
  0%, 100% {
    transform: translateY(0);
  }

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

@keyframes apCheckPulse {
  0%, 100% {
    opacity: 0.75;
    transform: rotate(-45deg) scale(1);
  }

  50% {
    opacity: 1;
    transform: rotate(-45deg) scale(1.1);
  }
}

@keyframes apWalletFloat {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.8;
  }

  50% {
    transform: translateY(-7px);
    opacity: 1;
  }
}

@keyframes apCoinFloat {
  0%, 100% {
    transform: translateY(0);
  }

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

@keyframes apMiniFloat {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.78;
  }

  50% {
    transform: translateY(-8px);
    opacity: 1;
  }
}

@keyframes apFlowDot {
  0%, 100% {
    transform: translateX(0) scale(0.9);
    opacity: 0.55;
  }

  50% {
    transform: translateX(8px) scale(1.15);
    opacity: 1;
  }
}

@keyframes apRingPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 30px rgba(182, 236, 71, 0.22),
      inset 0 0 18px rgba(182, 236, 71, 0.10);
  }

  50% {
    transform: scale(1.04);
    box-shadow:
      0 0 38px rgba(182, 236, 71, 0.30),
      inset 0 0 22px rgba(182, 236, 71, 0.12);
  }
}

@keyframes apRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ================================
   RESPONSIVE FIX
   Esto evita distorsión en móvil
================================ */

@media (min-width: 769px) {
  .feature-visual-scale-wide .affordable-pricing-visual {
    transform: scale(1);
  }
}

@media (max-width: 768px) {
  .feature-item-wide {
    width: 100%;
    max-width: 100%;
  }

  .feature-visual-scale-wide {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 662 / 280;
    border-radius: 22px;
  }

  .feature-visual-scale-wide .affordable-pricing-visual {
    transform: scale(calc((100vw - 30px) / 662));
  }

  .feature-content h3 {
    font-size: 26px;
  }

  .feature-content p {
    font-size: 14px;
  }
}

/* Para pantallas muy pequeñas */
@media (max-width: 380px) {
  .feature-visual-scale-wide .affordable-pricing-visual {
    transform: scale(calc((100vw - 24px) / 662));
  }
}



/* Feature 5 */

/* ================================
   SECURITY AND RELIABILITY
   Size original: 662 x 280
================================ */

.feature-item-wide {
  width: 662px;
  max-width: 100%;
}

/* Wrapper responsive que evita distorsión */
.feature-visual-scale-wide {
  width: 100%;
  max-width: 662px;
  aspect-ratio: 662 / 280;
  position: relative;
  overflow: hidden;
  border-radius: 30px;
}

/* Diseño original fijo */
.feature-visual-scale-wide .security-reliability-visual {
  width: 662px;
  height: 280px;
  max-width: none;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
}

/* Main visual */
.security-reliability-visual {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(182, 236, 71, 0.20), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.12), transparent 28%),
    linear-gradient(135deg, #101214 0%, #1a1d20 50%, #0d0f11 100%);
  border: 1px solid rgba(182, 236, 71, 0.24);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.36),
    inset 0 0 30px rgba(255, 255, 255, 0.04);
}

/* Shine */
.security-reliability-visual::before {
  content: "";
  position: absolute;
  top: -90px;
  left: -120px;
  width: 170px;
  height: 500px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent
  );
  transform: rotate(26deg);
  animation: srShine 6s ease-in-out infinite;
}

/* Bottom depth */
.security-reliability-visual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.44), transparent);
  z-index: 1;
}

/* Background grid */
.sr-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.65;
}

/* Shield */
.sr-shield {
  position: absolute;
  left: 48px;
  top: 52px;
  width: 150px;
  height: 170px;
  z-index: 5;
  animation: srShieldFloat 3.8s ease-in-out infinite;
}

.sr-shield::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 0;
  width: 118px;
  height: 142px;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(135deg, rgba(182, 236, 71, 0.28), rgba(255, 255, 255, 0.04));
  border: 2px solid rgba(182, 236, 71, 0.75);
  clip-path: polygon(50% 0, 92% 18%, 84% 72%, 50% 100%, 16% 72%, 8% 18%);
  box-shadow:
    0 0 32px rgba(182, 236, 71, 0.24),
    inset 0 0 20px rgba(255, 255, 255, 0.06);
}

.sr-shield-glow {
  position: absolute;
  left: 6px;
  top: -10px;
  width: 138px;
  height: 160px;
  clip-path: polygon(50% 0, 92% 18%, 84% 72%, 50% 100%, 16% 72%, 8% 18%);
  background: rgba(182, 236, 71, 0.10);
  filter: blur(12px);
  z-index: -1;
}

/* Lock */
.sr-lock-body {
  position: absolute;
  left: 52px;
  top: 70px;
  width: 46px;
  height: 38px;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(182, 236, 71, 0.42));
  box-shadow:
    0 0 18px rgba(182, 236, 71, 0.28),
    inset 0 0 8px rgba(255, 255, 255, 0.25);
}

.sr-lock-body::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 13px;
  width: 7px;
  height: 13px;
  border-radius: 4px;
  background: rgba(16, 18, 20, 0.75);
  transform: translateX(-50%);
}

.sr-lock-shackle {
  position: absolute;
  left: 59px;
  top: 45px;
  width: 32px;
  height: 34px;
  border: 6px solid rgba(255, 255, 255, 0.78);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 0 12px rgba(182, 236, 71, 0.24);
}

/* Check */
.sr-check {
  position: absolute;
  left: 58px;
  top: 118px;
  width: 34px;
  height: 18px;
  border-left: 5px solid #b6ec47;
  border-bottom: 5px solid #b6ec47;
  transform: rotate(-45deg);
  border-radius: 2px;
  filter: drop-shadow(0 0 8px rgba(182, 236, 71, 0.65));
  animation: srCheckPulse 2.5s ease-in-out infinite;
}

/* Main security panel */
.sr-main-panel {
  position: absolute;
  left: 210px;
  top: 52px;
  width: 250px;
  height: 154px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(182, 236, 71, 0.30);
  box-shadow:
    0 18px 35px rgba(0, 0, 0, 0.28),
    0 0 24px rgba(182, 236, 71, 0.10),
    inset 0 0 18px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 4;
  animation: srPanelFloat 3.5s ease-in-out infinite;
}

.sr-panel-header {
  position: absolute;
  top: 18px;
  left: 20px;
  width: 96px;
  height: 6px;
  border-radius: 20px;
  background: rgba(182, 236, 71, 0.78);
  box-shadow: 0 0 10px rgba(182, 236, 71, 0.35);
}

.sr-status {
  position: absolute;
  left: 22px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #b6ec47;
  box-shadow:
    0 0 12px rgba(182, 236, 71, 0.60),
    inset 0 0 4px rgba(255, 255, 255, 0.45);
  animation: srStatusPulse 2.2s ease-in-out infinite;
}

.sr-status-one {
  top: 48px;
}

.sr-status-two {
  top: 82px;
  animation-delay: 0.25s;
}

.sr-status-three {
  top: 116px;
  animation-delay: 0.5s;
}

.sr-line {
  position: absolute;
  left: 52px;
  height: 5px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.52);
}

.sr-line-one {
  top: 52px;
  width: 108px;
}

.sr-line-two {
  top: 86px;
  width: 86px;
  background: rgba(182, 236, 71, 0.62);
}

.sr-line-three {
  top: 120px;
  width: 116px;
}

.sr-pill {
  position: absolute;
  right: 20px;
  height: 24px;
  padding: 0 12px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 700;
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(182, 236, 71, 0.20), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(182, 236, 71, 0.35);
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.04);
}

.sr-pill-one {
  top: 44px;
}

.sr-pill-two {
  top: 78px;
}

/* Server card */
.sr-server-card {
  position: absolute;
  left: 118px;
  bottom: 32px;
  width: 142px;
  height: 78px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
  border: 1px solid rgba(182, 236, 71, 0.24);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.22),
    inset 0 0 12px rgba(255, 255, 255, 0.04);
  z-index: 3;
  animation: srServerFloat 4s ease-in-out infinite;
}

.sr-server-card::before,
.sr-server-card::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  height: 1px;
  background: rgba(182, 236, 71, 0.25);
}

.sr-server-card::before {
  top: 27px;
}

.sr-server-card::after {
  top: 52px;
}

.sr-server-light {
  position: absolute;
  left: 18px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #b6ec47;
  box-shadow: 0 0 10px rgba(182, 236, 71, 0.60);
  animation: srLightBlink 1.8s ease-in-out infinite;
}

.sr-light-one {
  top: 13px;
}

.sr-light-two {
  top: 38px;
  animation-delay: 0.4s;
}

.sr-server-line {
  position: absolute;
  left: 38px;
  height: 4px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.45);
}

.sr-server-line-one {
  top: 15px;
  width: 64px;
}

.sr-server-line-two {
  top: 40px;
  width: 82px;
  background: rgba(182, 236, 71, 0.55);
}

.sr-server-line-three {
  top: 62px;
  width: 48px;
}

/* Reliability ring */
.sr-reliability-ring {
  position: absolute;
  right: 46px;
  top: 78px;
  width: 122px;
  height: 122px;
  border-radius: 50%;
  border: 2px solid rgba(182, 236, 71, 0.86);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.20), transparent 28%),
    rgba(182, 236, 71, 0.08);
  box-shadow:
    0 0 30px rgba(182, 236, 71, 0.22),
    inset 0 0 18px rgba(182, 236, 71, 0.10);
  z-index: 5;
  animation: srRingPulse 3s ease-in-out infinite;
}

.sr-ring-inner {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.24);
  animation: srRotate 8s linear infinite;
}

.sr-ring-text {
  position: absolute;
  top: 38px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 25px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-shadow: 0 0 10px rgba(182, 236, 71, 0.34);
}

.sr-ring-label {
  position: absolute;
  top: 68px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.3px;
  color: #b6ec47;
}

.sr-ring-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b6ec47;
  box-shadow: 0 0 10px rgba(182, 236, 71, 0.65);
}

.sr-ring-dot-one {
  top: 12px;
  left: 57px;
}

.sr-ring-dot-two {
  right: 14px;
  top: 55px;
}

.sr-ring-dot-three {
  bottom: 12px;
  left: 57px;
}

/* Mini cards */
.sr-mini-card {
  position: absolute;
  width: 120px;
  height: 64px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
  border: 1px solid rgba(182, 236, 71, 0.22);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.20),
    inset 0 0 10px rgba(255, 255, 255, 0.04);
  z-index: 3;
}

.sr-card-top {
  right: 170px;
  top: 30px;
  animation: srMiniFloat 4s ease-in-out infinite;
}

.sr-card-bottom {
  right: 184px;
  bottom: 26px;
  animation: srMiniFloat 4s ease-in-out infinite;
  animation-delay: 0.8s;
}

.sr-mini-icon {
  position: absolute;
  left: 14px;
  top: 18px;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: #b6ec47;
  box-shadow:
    0 0 12px rgba(182, 236, 71, 0.60),
    inset 0 0 4px rgba(255,255,255,0.4);
}

.sr-mini-icon::before {
  content: "";
  position: absolute;
  left: 4px;
  top: -8px;
  width: 8px;
  height: 9px;
  border: 2px solid rgba(182, 236, 71, 0.95);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.sr-mini-line {
  position: absolute;
  left: 42px;
  height: 4px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.48);
}

.sr-mini-line-one {
  top: 20px;
  width: 52px;
}

.sr-mini-line-two {
  top: 34px;
  width: 34px;
  background: rgba(182, 236, 71, 0.62);
}

/* Flow line */
.sr-flow-line {
  position: absolute;
  left: 458px;
  top: 138px;
  width: 84px;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(182, 236, 71, 0.65),
    transparent
  );
  z-index: 2;
}

.sr-flow-dot {
  position: absolute;
  top: -4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #b6ec47;
  box-shadow: 0 0 12px rgba(182, 236, 71, 0.70);
  animation: srFlowDot 2.5s ease-in-out infinite;
}

.sr-flow-dot-one {
  left: 10px;
}

.sr-flow-dot-two {
  left: 35px;
  animation-delay: 0.25s;
}

.sr-flow-dot-three {
  right: 10px;
  animation-delay: 0.5s;
}

/* Text below */
.feature-content {
  margin-top: 18px;
}

.feature-content h3 {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.2;
  color: #ffffff;
  font-weight: 700;
}

.feature-content p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  max-width: 620px;
}

/* Animations */
@keyframes srShine {
  0% {
    left: -170px;
  }

  45%, 100% {
    left: 760px;
  }
}

@keyframes srShieldFloat {
  0%, 100% {
    transform: translateY(0);
  }

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

@keyframes srCheckPulse {
  0%, 100% {
    opacity: 0.78;
    transform: rotate(-45deg) scale(1);
  }

  50% {
    opacity: 1;
    transform: rotate(-45deg) scale(1.12);
  }
}

@keyframes srPanelFloat {
  0%, 100% {
    transform: translateY(0);
  }

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

@keyframes srStatusPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.78;
  }

  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}

@keyframes srServerFloat {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.82;
  }

  50% {
    transform: translateY(-7px);
    opacity: 1;
  }
}

@keyframes srLightBlink {
  0%, 100% {
    opacity: 0.45;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@keyframes srRingPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 30px rgba(182, 236, 71, 0.22),
      inset 0 0 18px rgba(182, 236, 71, 0.10);
  }

  50% {
    transform: scale(1.04);
    box-shadow:
      0 0 38px rgba(182, 236, 71, 0.30),
      inset 0 0 22px rgba(182, 236, 71, 0.12);
  }
}

@keyframes srRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes srMiniFloat {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.78;
  }

  50% {
    transform: translateY(-8px);
    opacity: 1;
  }
}

@keyframes srFlowDot {
  0%, 100% {
    transform: translateX(0) scale(0.9);
    opacity: 0.55;
  }

  50% {
    transform: translateX(8px) scale(1.15);
    opacity: 1;
  }
}

/* ================================
   RESPONSIVE FIX
   Evita distorsión en móvil
================================ */

@media (min-width: 769px) {
  .feature-visual-scale-wide .security-reliability-visual {
    transform: scale(1);
  }
}

@media (max-width: 768px) {
  .feature-item-wide {
    width: 100%;
    max-width: 100%;
  }

  .feature-visual-scale-wide {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 662 / 280;
    border-radius: 22px;
  }

  .feature-visual-scale-wide .security-reliability-visual {
    transform: scale(calc((100vw - 30px) / 662));
  }

  .feature-content h3 {
    font-size: 26px;
  }

  .feature-content p {
    font-size: 14px;
  }
}

@media (max-width: 380px) {
  .feature-visual-scale-wide .security-reliability-visual {
    transform: scale(calc((100vw - 24px) / 662));
  }
}


/* Feature 6 */

.feature-item {
  width: 430px;
  max-width: 100%;
}

/* Main visual */
.client-focused-visual {
  width: 430px;
  height: 280px;
  max-width: 100%;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 18%, rgba(182, 236, 71, 0.20), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(255, 255, 255, 0.12), transparent 30%),
    linear-gradient(135deg, #111315 0%, #1b1f22 52%, #0d0f11 100%);
  border: 1px solid rgba(182, 236, 71, 0.22);
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.35),
    inset 0 0 30px rgba(255, 255, 255, 0.04);
}

/* Light sweep */
.client-focused-visual::before {
  content: "";
  position: absolute;
  top: -90px;
  left: -120px;
  width: 150px;
  height: 460px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent
  );
  transform: rotate(26deg);
  animation: cfShine 6s ease-in-out infinite;
}

/* Bottom shadow */
.client-focused-visual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.42), transparent);
  z-index: 1;
}

/* Grid */
.cf-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.65;
}

/* Focus ring */
.cf-focus-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 122px;
  height: 122px;
  border-radius: 50%;
  border: 2px solid rgba(182, 236, 71, 0.86);
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.16), transparent 30%),
    rgba(182, 236, 71, 0.07);
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 30px rgba(182, 236, 71, 0.22),
    inset 0 0 18px rgba(182, 236, 71, 0.10);
  z-index: 3;
  animation: cfRingPulse 3s ease-in-out infinite;
}

.cf-ring-inner {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  animation: cfRotate 10s linear infinite;
}

.cf-ring-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b6ec47;
  box-shadow: 0 0 10px rgba(182, 236, 71, 0.65);
}

.cf-ring-dot-one {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.cf-ring-dot-two {
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.cf-ring-dot-three {
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.cf-ring-dot-four {
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* Client figure */
.cf-client {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 82px;
  height: 98px;
  transform: translate(-50%, -50%);
  z-index: 5;
  animation: cfClientFloat 3.2s ease-in-out infinite;
}

.cf-client-head {
  position: absolute;
  left: 50%;
  top: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.55), transparent 25%),
    linear-gradient(135deg, #f4f4f4, #9da2a6);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.12);
}

.cf-client-body {
  position: absolute;
  left: 50%;
  top: 40px;
  width: 64px;
  height: 52px;
  transform: translateX(-50%);
  border-radius: 24px 24px 12px 12px;
  background:
    linear-gradient(135deg, rgba(182, 236, 71, 0.72), rgba(182, 236, 71, 0.16)),
    linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.04));
  border: 1px solid rgba(182, 236, 71, 0.30);
  box-shadow:
    0 0 20px rgba(182, 236, 71, 0.16),
    inset 0 0 10px rgba(255, 255, 255, 0.08);
}

/* Chat cards */
.cf-chat-card {
  position: absolute;
  width: 96px;
  height: 58px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
  border: 1px solid rgba(182, 236, 71, 0.22);
  box-shadow: 0 12px 22px rgba(0,0,0,0.18);
  z-index: 4;
}

.cf-chat-card::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 20px;
  width: 14px;
  height: 14px;
  background: inherit;
  border-left: 1px solid rgba(182, 236, 71, 0.22);
  border-bottom: 1px solid rgba(182, 236, 71, 0.22);
  transform: rotate(-45deg);
}

.cf-chat-left {
  left: 28px;
  top: 78px;
  animation: cfCardFloat 4s ease-in-out infinite;
}

.cf-chat-right {
  right: 28px;
  top: 78px;
  animation: cfCardFloat 4s ease-in-out infinite;
  animation-delay: 0.7s;
}

.cf-chat-icon {
  position: absolute;
  left: 14px;
  top: 18px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #b6ec47;
  box-shadow:
    0 0 10px rgba(182, 236, 71, 0.65),
    inset 0 0 4px rgba(255,255,255,0.4);
}

.cf-chat-line {
  position: absolute;
  left: 40px;
  height: 4px;
  border-radius: 20px;
  background: rgba(255,255,255,0.48);
}

.cf-chat-line-one {
  top: 19px;
  width: 40px;
}

.cf-chat-line-two {
  top: 33px;
  width: 28px;
  background: rgba(182, 236, 71, 0.60);
}

/* Info cards */
.cf-info-card {
  position: absolute;
  width: 118px;
  height: 62px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
  border: 1px solid rgba(182, 236, 71, 0.22);
  box-shadow: 0 12px 22px rgba(0,0,0,0.18);
  z-index: 4;
}

.cf-info-top {
  left: 156px;
  top: 22px;
  animation: cfInfoFloat 3.8s ease-in-out infinite;
}

.cf-info-bottom {
  left: 156px;
  bottom: 24px;
  animation: cfInfoFloat 3.8s ease-in-out infinite;
  animation-delay: 0.6s;
}

.cf-info-avatar {
  position: absolute;
  left: 14px;
  top: 16px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #b6ec47;
  box-shadow:
    0 0 12px rgba(182, 236, 71, 0.65),
    inset 0 0 4px rgba(255,255,255,0.4);
}

.cf-info-line {
  position: absolute;
  left: 42px;
  height: 4px;
  border-radius: 20px;
  background: rgba(255,255,255,0.48);
}

.cf-info-line-one {
  top: 18px;
  width: 52px;
}

.cf-info-line-two {
  top: 32px;
  width: 34px;
  background: rgba(182, 236, 71, 0.60);
}

/* Connections */
.cf-connection {
  position: absolute;
  z-index: 2;
  opacity: 0.9;
}

.cf-connection-left {
  left: 116px;
  top: 138px;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(182, 236, 71, 0.70), transparent);
}

.cf-connection-right {
  right: 116px;
  top: 138px;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(182, 236, 71, 0.70), transparent);
}

.cf-connection-top {
  left: 214px;
  top: 82px;
  width: 2px;
  height: 34px;
  background: linear-gradient(180deg, transparent, rgba(182, 236, 71, 0.70), transparent);
}

.cf-connection-bottom {
  left: 214px;
  bottom: 78px;
  width: 2px;
  height: 34px;
  background: linear-gradient(180deg, transparent, rgba(182, 236, 71, 0.70), transparent);
}

/* Heart badge */
.cf-heart-badge {
  position: absolute;
  right: 32px;
  bottom: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.22), transparent 28%),
    rgba(182, 236, 71, 0.12);
  border: 1px solid rgba(182, 236, 71, 0.75);
  box-shadow:
    0 0 20px rgba(182, 236, 71, 0.20),
    inset 0 0 12px rgba(182, 236, 71, 0.08);
  z-index: 5;
  animation: cfHeartPulse 2.4s ease-in-out infinite;
}

.cf-heart-shape {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  font-size: 20px;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(182, 236, 71, 0.30);
}

/* Text below */
.feature-content {
  margin-top: 18px;
}

.feature-content h3 {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1.2;
  color: #ffffff;
  font-weight: 700;
}

.feature-content p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

/* Animations */
@keyframes cfShine {
  0% {
    left: -160px;
  }
  45%, 100% {
    left: 520px;
  }
}

@keyframes cfRingPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow:
      0 0 30px rgba(182, 236, 71, 0.22),
      inset 0 0 18px rgba(182, 236, 71, 0.10);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.04);
    box-shadow:
      0 0 38px rgba(182, 236, 71, 0.30),
      inset 0 0 22px rgba(182, 236, 71, 0.12);
  }
}

@keyframes cfRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes cfClientFloat {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-5px);
  }
}

@keyframes cfCardFloat {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.78;
  }
  50% {
    transform: translateY(-7px);
    opacity: 1;
  }
}

@keyframes cfInfoFloat {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.80;
  }
  50% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

@keyframes cfHeartPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.88;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .feature-item {
    width: 100%;
  }

  .client-focused-visual {
    width: 100%;
    height: auto;
    aspect-ratio: 430 / 280;
    border-radius: 22px;
  }

  .cf-focus-ring {
    width: 108px;
    height: 108px;
  }

  .cf-chat-left {
    left: 16px;
    width: 90px;
  }

  .cf-chat-right {
    right: 16px;
    width: 90px;
  }

  .cf-info-top,
  .cf-info-bottom {
    left: 150px;
    width: 106px;
  }

  .cf-heart-badge {
    right: 18px;
    bottom: 20px;
  }

  .feature-content h3 {
    font-size: 24px;
  }
}

/* ======================================
   FAQ HELP CENTER VISUAL
   Ratio: 794 x 580
   Different from About Us
   Responsive / No image / No crop
====================================== */

.about-left,
.about-box-left {
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow: visible !important;
}

/* Oculta estructura vieja */
.about-thumb,
.about_coun-box,
.about-marketing-shape {
  display: none !important;
}

/* Main visual */
.faq-center-visual {
  width: 100%;
  max-width: 794px;
  aspect-ratio: 794 / 580;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 38px;
  background:
    radial-gradient(circle at 18% 14%, rgba(182, 236, 71, 0.18), transparent 28%),
    radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.10), transparent 26%),
    radial-gradient(circle at 48% 82%, rgba(182, 236, 71, 0.10), transparent 34%),
    linear-gradient(135deg, #0f1113 0%, #181c1f 52%, #0b0d0f 100%);
  border: 1px solid rgba(182, 236, 71, 0.24);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.42),
    inset 0 0 45px rgba(255, 255, 255, 0.04);
}

.faq-center-visual::before {
  content: "";
  position: absolute;
  top: -34%;
  left: -34%;
  width: 24%;
  height: 170%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent
  );
  transform: rotate(27deg);
  animation: faqCenterShine 7s ease-in-out infinite;
}

.faq-center-visual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.50), transparent);
  z-index: 1;
}

/* Grid */
.faq-center-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 5% 6.5%;
  opacity: 0.65;
}

/* Glow */
.faq-center-glow {
  position: absolute;
  border-radius: 50%;
  background: rgba(182, 236, 71, 0.12);
  filter: blur(45px);
  z-index: 1;
}

.faq-center-glow-one {
  width: 38%;
  height: 30%;
  left: 24%;
  top: 10%;
}

.faq-center-glow-two {
  width: 30%;
  height: 26%;
  right: 10%;
  bottom: 10%;
}

/* Search card */
.faq-search-card {
  position: absolute;
  left: 24%;
  top: 10%;
  width: 52%;
  height: 13%;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
  border: 1px solid rgba(182,236,71,0.28);
  box-shadow:
    0 20px 40px rgba(0,0,0,0.28),
    inset 0 0 12px rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 6;
  animation: faqSearchFloat 3.8s ease-in-out infinite;
}

.faq-search-icon {
  position: absolute;
  left: 5%;
  top: 50%;
  width: 9%;
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
}

.faq-search-icon span {
  position: absolute;
  inset: 0;
  border: 3px solid #b6ec47;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(182,236,71,0.35);
}

.faq-search-icon::after {
  content: "";
  position: absolute;
  width: 38%;
  height: 3px;
  background: #b6ec47;
  right: -18%;
  bottom: 10%;
  transform: rotate(45deg);
  transform-origin: center;
  border-radius: 10px;
}

.faq-search-bar {
  position: absolute;
  left: 18%;
  top: 50%;
  width: 56%;
  transform: translateY(-50%);
}

.faq-search-line {
  display: block;
  height: 6px;
  border-radius: 20px;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.50);
}

.faq-search-line-one {
  width: 92%;
}

.faq-search-line-two {
  width: 66%;
  background: rgba(182,236,71,0.65);
}

.faq-search-button {
  position: absolute;
  right: 5%;
  top: 50%;
  width: 14%;
  height: 40%;
  transform: translateY(-50%);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(182,236,71,0.75), rgba(182,236,71,0.30));
  box-shadow:
    0 0 16px rgba(182,236,71,0.28),
    inset 0 0 8px rgba(255,255,255,0.15);
}

/* Accordion cards */
.faq-accordion-card {
  position: absolute;
  left: 8%;
  width: 44%;
  height: 14%;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03));
  border: 1px solid rgba(182,236,71,0.20);
  box-shadow:
    0 18px 34px rgba(0,0,0,0.24),
    inset 0 0 10px rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 4;
}

.faq-accordion-one {
  top: 28%;
  animation: faqAccordionFloat 4s ease-in-out infinite;
}

.faq-accordion-two {
  top: 45%;
  animation: faqAccordionFloat 4s ease-in-out infinite;
  animation-delay: 0.4s;
}

.faq-accordion-three {
  top: 62%;
  animation: faqAccordionFloat 4s ease-in-out infinite;
  animation-delay: 0.8s;
}

.faq-accordion-title {
  position: absolute;
  left: 7%;
  top: 22%;
  width: 58%;
  height: 6px;
  border-radius: 20px;
  background: rgba(255,255,255,0.56);
}

.faq-accordion-plus {
  position: absolute;
  right: 8%;
  top: 18%;
  width: 18px;
  height: 18px;
}

.faq-accordion-plus::before,
.faq-accordion-plus::after {
  content: "";
  position: absolute;
  background: #b6ec47;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(182,236,71,0.35);
}

.faq-accordion-plus::before {
  width: 100%;
  height: 3px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.faq-accordion-plus::after {
  width: 3px;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.faq-accordion-text {
  position: absolute;
  left: 7%;
  height: 5px;
  border-radius: 20px;
}

.faq-text-one {
  top: 56%;
  width: 72%;
  background: rgba(182,236,71,0.60);
}

.faq-text-two {
  top: 74%;
  width: 54%;
  background: rgba(255,255,255,0.32);
}

/* Help panel */
.faq-help-panel {
  position: absolute;
  right: 8%;
  top: 24%;
  width: 28%;
  height: 34%;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
  border: 1px solid rgba(182,236,71,0.26);
  box-shadow:
    0 22px 42px rgba(0,0,0,0.28),
    inset 0 0 12px rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 5;
  animation: faqPanelFloat 3.8s ease-in-out infinite;
}

.faq-help-badge {
  position: absolute;
  left: 10%;
  top: 10%;
  width: 24%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(182,236,71,0.35), rgba(255,255,255,0.05));
  border: 1px solid rgba(182,236,71,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 18px rgba(182,236,71,0.22),
    inset 0 0 8px rgba(255,255,255,0.08);
}

.faq-help-badge span {
  color: #ffffff;
  font-size: clamp(12px, 1.2vw, 16px);
  font-weight: 800;
  letter-spacing: 1px;
}

.faq-help-title {
  position: absolute;
  left: 40%;
  top: 16%;
  width: 42%;
  height: 6px;
  border-radius: 20px;
  background: rgba(255,255,255,0.56);
}

.faq-help-line {
  position: absolute;
  left: 10%;
  height: 5px;
  border-radius: 20px;
}

.faq-help-line-one {
  top: 38%;
  width: 72%;
  background: rgba(182,236,71,0.60);
}

.faq-help-line-two {
  top: 48%;
  width: 60%;
  background: rgba(255,255,255,0.34);
}

.faq-help-line-three {
  top: 58%;
  width: 76%;
  background: rgba(255,255,255,0.26);
}

.faq-help-mini-row {
  position: absolute;
  left: 10%;
  right: 10%;
  height: 12%;
}

.faq-help-mini-row.row-one {
  bottom: 24%;
}

.faq-help-mini-row.row-two {
  bottom: 8%;
}

.faq-help-dot {
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #b6ec47;
  box-shadow: 0 0 10px rgba(182,236,71,0.55);
}

.faq-help-mini-line {
  position: absolute;
  left: 18px;
  top: 50%;
  width: 62%;
  height: 5px;
  transform: translateY(-50%);
  border-radius: 20px;
  background: rgba(255,255,255,0.42);
}

/* Chat bubbles */
.faq-chat-bubble {
  position: absolute;
  width: 18%;
  height: 12%;
  border-radius: 20px 20px 20px 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03));
  border: 1px solid rgba(182,236,71,0.20);
  box-shadow:
    0 18px 34px rgba(0,0,0,0.22),
    inset 0 0 10px rgba(255,255,255,0.03);
  z-index: 4;
}

.faq-chat-bubble-one {
  right: 16%;
  bottom: 20%;
  animation: faqBubbleFloat 4s ease-in-out infinite;
}

.faq-chat-bubble-two {
  right: 6%;
  bottom: 8%;
  animation: faqBubbleFloat 4s ease-in-out infinite;
  animation-delay: 0.6s;
}

.faq-chat-dot {
  position: absolute;
  left: 10%;
  top: 28%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #b6ec47;
  box-shadow: 0 0 10px rgba(182,236,71,0.55);
}

.faq-chat-msg {
  position: absolute;
  left: 24%;
  height: 5px;
  border-radius: 20px;
}

.faq-chat-msg-one {
  top: 28%;
  width: 54%;
  background: rgba(255,255,255,0.52);
}

.faq-chat-msg-two {
  top: 52%;
  width: 38%;
  background: rgba(182,236,71,0.58);
}

/* Support widget */
.faq-support-widget {
  position: absolute;
  left: 34%;
  bottom: 8%;
  width: 20%;
  height: 14%;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
  border: 1px solid rgba(182,236,71,0.22);
  box-shadow:
    0 18px 34px rgba(0,0,0,0.22),
    inset 0 0 10px rgba(255,255,255,0.03);
  z-index: 5;
}

.faq-support-avatar {
  position: absolute;
  left: 10%;
  top: 22%;
  width: 20%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.55), transparent 25%),
    linear-gradient(135deg, #f4f4f4, #9da2a6);
  box-shadow: 0 0 14px rgba(255,255,255,0.12);
}

.faq-support-line {
  position: absolute;
  left: 36%;
  height: 5px;
  border-radius: 20px;
  background: rgba(255,255,255,0.44);
}

.faq-support-line-a {
  top: 24%;
  width: 40%;
}

.faq-support-line-b {
  top: 44%;
  width: 54%;
  background: rgba(182,236,71,0.58);
}

.faq-support-line-c {
  top: 64%;
  width: 30%;
}

/* Ring */
.faq-center-ring {
  position: absolute;
  left: 56%;
  bottom: 8%;
  width: 13%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 2px solid rgba(182,236,71,0.84);
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.18), transparent 28%),
    rgba(182,236,71,0.08);
  box-shadow:
    0 0 26px rgba(182,236,71,0.22),
    inset 0 0 16px rgba(182,236,71,0.10);
  z-index: 6;
  animation: faqRingPulse 3s ease-in-out infinite;
}

.faq-center-ring-inner {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.24);
  animation: faqRotate 8s linear infinite;
}

.faq-center-ring-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: clamp(10px, 1vw, 14px);
  letter-spacing: 1px;
  font-weight: 800;
}

/* Connections */
.faq-center-connection {
  position: absolute;
  height: 3px;
  border-radius: 20px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(182,236,71,0.58),
    transparent
  );
  z-index: 2;
}

.connection-one {
  left: 22%;
  top: 40%;
  width: 20%;
}

.connection-two {
  right: 22%;
  top: 40%;
  width: 18%;
}

.connection-three {
  left: 34%;
  bottom: 22%;
  width: 34%;
  opacity: 0.75;
}

/* Animations */
@keyframes faqCenterShine {
  0% {
    left: -35%;
  }
  45%, 100% {
    left: 120%;
  }
}

@keyframes faqSearchFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

@keyframes faqAccordionFloat {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.86;
  }
  50% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

@keyframes faqPanelFloat {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.88;
  }
  50% {
    transform: translateY(-7px);
    opacity: 1;
  }
}

@keyframes faqBubbleFloat {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.82;
  }
  50% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

@keyframes faqRingPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

@keyframes faqRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .faq-center-visual {
    border-radius: 24px;
  }
}

@media (max-width: 480px) {
  .faq-center-visual {
    border-radius: 20px;
  }
}











/* ================================
   Custom Toast Notification
   Overside Development Style
================================ */

/* Open Sans Font */
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/opensans/v44/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWtU6FxZCJgvAQ.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}

/* Main toast container */
.custom-toast {
  position: fixed;
  right: 30px;
  bottom: 30px;
  min-width: 300px;
  max-width: 380px;
  background: #b6ec47;
  color: #111111;
  padding: 18px 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Open Sans", sans-serif;
  font-style: italic;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid rgba(17, 17, 17, 0.18);
  box-shadow: 0 10px 28px rgba(182, 236, 71, 0.35);
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  overflow: hidden;
}

/* Show toast */
.custom-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Icon */
.custom-toast-icon {
  font-size: 28px;
  line-height: 1;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Message text */
.custom-toast-message {
  flex: 1;
  color: #111111;
  line-height: 1.4;
}

/* Progress bar */
.custom-toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: #111111;
  animation: toastProgress 5s linear forwards;
}

/* Error toast version */
.custom-toast.error {
  background: #ff4d4d;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 28px rgba(255, 77, 77, 0.35);
}

.custom-toast.error .custom-toast-icon,
.custom-toast.error .custom-toast-message {
  color: #ffffff;
}

.custom-toast.error .custom-toast-progress {
  background: rgba(0, 0, 0, 0.45);
}

/* Progress animation */
@keyframes toastProgress {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

/* Mobile responsive */
@media (max-width: 575px) {
  .custom-toast {
    right: 15px;
    left: 15px;
    bottom: 20px;
    min-width: auto;
    max-width: none;
    padding: 16px 18px;
    font-size: 13px;
  }

  .custom-toast-icon {
    font-size: 24px;
  }
}



















/* ==========================================
   CONTACT US EXECUTIVE DESIGN
   Size base: 570 x 680
   CSS only / Responsive / No distortion
========================================== */

.contact-executive-wrapper,
.contact-executive-wrapper * {
  box-sizing: border-box;
}

.contact-executive-wrapper {
  width: 100%;
  max-width: 570px;
  aspect-ratio: 570 / 680;
  position: relative;
  overflow: hidden;
  border-radius: 36px;
  margin: 0 auto;
}

.contact-executive-visual {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 16%, rgba(182, 236, 71, 0.22), transparent 32%),
    radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.11), transparent 30%),
    radial-gradient(circle at 50% 88%, rgba(182, 236, 71, 0.10), transparent 34%),
    linear-gradient(135deg, #101214 0%, #1b1f22 52%, #0d0f11 100%);
  border: 1px solid rgba(182, 236, 71, 0.24);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.40),
    inset 0 0 42px rgba(255, 255, 255, 0.04);
}

/* Evita que el template corte el diseño */
.contact_area,
.contact-section,
.contact-left,
.contact-right,
.contact-form-box,
.contact-box,
.contact-wrapper,
.contact-info,
.contact-thumb {
  overflow: visible !important;
}

/* Shine */
.contact-executive-visual::before {
  content: "";
  position: absolute;
  top: -22%;
  left: -35%;
  width: 32%;
  height: 135%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent
  );
  transform: rotate(27deg);
  animation: ceShine 7s ease-in-out infinite;
}

/* Bottom shadow */
.contact-executive-visual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.48), transparent);
  z-index: 1;
}

/* Grid */
.ce-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 6.4% 5.3%;
  opacity: 0.66;
}

/* Glows */
.ce-glow {
  position: absolute;
  border-radius: 50%;
  background: rgba(182, 236, 71, 0.12);
  filter: blur(56px);
  z-index: 1;
}

.ce-glow-one {
  width: 46%;
  height: 35%;
  left: 9%;
  top: 14%;
}

.ce-glow-two {
  width: 44%;
  height: 34%;
  right: 6%;
  bottom: 13%;
}

/* Header card */
.ce-header-card {
  position: absolute;
  left: 12%;
  top: 7%;
  width: 53%;
  height: 13%;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
  border: 1px solid rgba(182,236,71,0.24);
  box-shadow:
    0 18px 34px rgba(0,0,0,0.24),
    inset 0 0 12px rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 6;
  animation: ceFloatOne 4s ease-in-out infinite;
}

.ce-header-icon {
  position: absolute;
  left: 8%;
  top: 29%;
  width: 12%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: #b6ec47;
  box-shadow:
    0 0 16px rgba(182,236,71,0.62),
    inset 0 0 5px rgba(255,255,255,0.42);
}

.ce-header-icon::before {
  content: "";
  position: absolute;
  left: 25%;
  top: 31%;
  width: 50%;
  height: 32%;
  border-top: 3px solid rgba(16,18,20,0.72);
  border-left: 3px solid rgba(16,18,20,0.72);
  transform: rotate(-45deg);
}

.ce-header-line {
  position: absolute;
  left: 26%;
  height: 8%;
  border-radius: 20px;
}

.ce-header-line-one {
  top: 34%;
  width: 52%;
  background: rgba(255,255,255,0.52);
}

.ce-header-line-two {
  top: 61%;
  width: 36%;
  background: rgba(182,236,71,0.66);
}

/* Main card */
.ce-main-card {
  position: absolute;
  left: 13%;
  top: 24%;
  width: 74%;
  height: 52%;
  border-radius: 38px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.17), rgba(255,255,255,0.045));
  border: 1px solid rgba(182,236,71,0.32);
  box-shadow:
    0 26px 52px rgba(0,0,0,0.36),
    0 0 36px rgba(182,236,71,0.14),
    inset 0 0 24px rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 5;
  animation: ceMainFloat 3.8s ease-in-out infinite;
}

.ce-main-top {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 7%;
  height: 10%;
  border-bottom: 1px solid rgba(182,236,71,0.22);
}

.ce-window-dot {
  display: inline-block;
  width: 2.2%;
  aspect-ratio: 1 / 1;
  margin-right: 2%;
  border-radius: 50%;
  background: #b6ec47;
  opacity: 0.78;
  box-shadow: 0 0 8px rgba(182,236,71,0.5);
}

/* Envelope */
.ce-envelope {
  position: absolute;
  left: 8%;
  top: 24%;
  width: 28%;
  height: 24%;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(182,236,71,0.22), rgba(255,255,255,0.04));
  border: 1px solid rgba(182,236,71,0.34);
  box-shadow:
    0 0 24px rgba(182,236,71,0.16),
    inset 0 0 14px rgba(255,255,255,0.05);
}

.ce-envelope::before,
.ce-envelope::after {
  content: "";
  position: absolute;
  top: 22%;
  width: 60%;
  height: 2px;
  background: rgba(182,236,71,0.78);
}

.ce-envelope::before {
  left: 0;
  transform: rotate(32deg);
  transform-origin: left center;
}

.ce-envelope::after {
  right: 0;
  transform: rotate(-32deg);
  transform-origin: right center;
}

.ce-envelope-flap {
  position: absolute;
  left: 17%;
  bottom: 24%;
  width: 66%;
  height: 2px;
  background: rgba(255,255,255,0.36);
}

/* Main lines */
.ce-main-lines {
  position: absolute;
  left: 43%;
  top: 27%;
  width: 45%;
}

.ce-main-line {
  display: block;
  height: 7px;
  border-radius: 20px;
  margin-bottom: 9%;
}

.ce-main-line-one {
  width: 90%;
  background: rgba(255,255,255,0.52);
}

.ce-main-line-two {
  width: 66%;
  background: rgba(182,236,71,0.66);
}

.ce-main-line-three {
  width: 98%;
  background: rgba(255,255,255,0.30);
}

/* Form preview */
.ce-form-preview {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 60%;
  height: 25%;
}

.ce-field {
  position: absolute;
  left: 0;
  height: 18%;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03));
  border: 1px solid rgba(182,236,71,0.20);
}

.ce-field-one {
  top: 0;
  width: 68%;
}

.ce-field-two {
  top: 32%;
  width: 84%;
}

.ce-field-three {
  top: 64%;
  width: 62%;
}

.ce-field-four {
  top: 96%;
  width: 44%;
  height: 16%;
  background:
    linear-gradient(135deg, rgba(182,236,71,0.13), rgba(255,255,255,0.03));
}

/* Send button */
.ce-send-button {
  position: absolute;
  right: 8%;
  bottom: 8%;
  width: 23%;
  height: 12%;
  border-radius: 30px;
  background: #b6ec47;
  box-shadow:
    0 0 22px rgba(182,236,71,0.40),
    inset 0 0 8px rgba(255,255,255,0.28);
}

.ce-send-arrow {
  position: absolute;
  left: 35%;
  top: 34%;
  width: 31%;
  height: 36%;
  background: #101214;
  clip-path: polygon(0 0, 100% 50%, 0 100%, 20% 50%);
}

/* Side cards */
.ce-side-card {
  position: absolute;
  width: 31%;
  height: 12.7%;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
  border: 1px solid rgba(182,236,71,0.22);
  box-shadow:
    0 18px 34px rgba(0,0,0,0.24),
    inset 0 0 12px rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 6;
}

.ce-phone-card {
  right: 8%;
  top: 12%;
  animation: ceFloatTwo 4s ease-in-out infinite;
}

.ce-email-card {
  left: 8%;
  bottom: 13%;
  animation: ceFloatTwo 4s ease-in-out infinite;
  animation-delay: 0.6s;
}

.ce-location-card {
  right: 8%;
  bottom: 13%;
  animation: ceFloatTwo 4s ease-in-out infinite;
  animation-delay: 1s;
}

.ce-card-icon {
  position: absolute;
  left: 12%;
  top: 29%;
  width: 16%;
  aspect-ratio: 1 / 1;
  background: #b6ec47;
  box-shadow:
    0 0 15px rgba(182,236,71,0.65),
    inset 0 0 4px rgba(255,255,255,0.45);
}

/* Phone icon */
.ce-phone-icon {
  border-radius: 8px;
  transform: rotate(-18deg);
}

.ce-phone-icon::before {
  content: "";
  position: absolute;
  inset: 25%;
  border-radius: 4px;
  background: rgba(16,18,20,0.58);
}

/* Email icon */
.ce-email-icon {
  border-radius: 7px;
}

.ce-email-icon::before {
  content: "";
  position: absolute;
  left: 18%;
  top: 28%;
  width: 64%;
  height: 42%;
  border-top: 2px solid rgba(16,18,20,0.65);
  border-left: 2px solid rgba(16,18,20,0.65);
  transform: rotate(-45deg);
}

/* Location icon */
.ce-location-icon {
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.ce-location-icon::before {
  content: "";
  position: absolute;
  left: 32%;
  top: 32%;
  width: 36%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(16,18,20,0.62);
}

/* Card text lines */
.ce-card-line {
  position: absolute;
  left: 36%;
  height: 7%;
  border-radius: 20px;
}

.ce-card-line-one {
  top: 33%;
  width: 44%;
  background: rgba(255,255,255,0.48);
}

.ce-card-line-two {
  top: 60%;
  width: 30%;
  background: rgba(182,236,71,0.62);
}

/* Status card */
.ce-status-card {
  position: absolute;
  left: 8%;
  top: 45%;
  width: 25%;
  height: 11.5%;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
  border: 1px solid rgba(182,236,71,0.22);
  box-shadow:
    0 16px 30px rgba(0,0,0,0.22),
    inset 0 0 10px rgba(255,255,255,0.04);
  z-index: 6;
  animation: ceFloatThree 4s ease-in-out infinite;
}

.ce-status-dot {
  position: absolute;
  left: 14%;
  top: 36%;
  width: 13%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #b6ec47;
  box-shadow: 0 0 14px rgba(182,236,71,0.70);
}

.ce-status-line {
  position: absolute;
  left: 37%;
  height: 8%;
  border-radius: 20px;
}

.ce-status-line-one {
  top: 33%;
  width: 46%;
  background: rgba(255,255,255,0.48);
}

.ce-status-line-two {
  top: 61%;
  width: 30%;
  background: rgba(182,236,71,0.62);
}

/* Ring */
.ce-response-ring {
  position: absolute;
  right: 9%;
  top: 40%;
  width: 22%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 2px solid rgba(182,236,71,0.82);
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.20), transparent 28%),
    rgba(182,236,71,0.08);
  box-shadow:
    0 0 30px rgba(182,236,71,0.22),
    inset 0 0 18px rgba(182,236,71,0.10);
  z-index: 6;
  animation: ceRingPulse 3s ease-in-out infinite;
}

.ce-ring-inner {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.24);
  animation: ceRotate 9s linear infinite;
}

.ce-ring-text {
  position: absolute;
  left: 50%;
  top: 51%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: clamp(11px, 3vw, 19px);
  font-weight: 800;
  letter-spacing: 1px;
}

.ce-ring-dot {
  position: absolute;
  width: 7%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #b6ec47;
  box-shadow: 0 0 10px rgba(182,236,71,0.65);
}

.ce-ring-dot-one {
  top: 11%;
  left: 46%;
}

.ce-ring-dot-two {
  right: 13%;
  top: 46%;
}

.ce-ring-dot-three {
  bottom: 11%;
  left: 46%;
}

/* Flow lines */
.ce-flow {
  position: absolute;
  height: 3px;
  border-radius: 20px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(182,236,71,0.65),
    transparent
  );
  z-index: 2;
}

.ce-flow-one {
  left: 15%;
  top: 43%;
  width: 70%;
}

.ce-flow-two {
  left: 14%;
  top: 62%;
  width: 72%;
}

.ce-flow-three {
  left: 20%;
  bottom: 23%;
  width: 60%;
}

/* Animations */
@keyframes ceShine {
  0% {
    left: -35%;
  }

  45%, 100% {
    left: 120%;
  }
}

@keyframes ceMainFloat {
  0%, 100% {
    transform: translateY(0);
  }

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

@keyframes ceFloatOne {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.86;
  }

  50% {
    transform: translateY(-8px);
    opacity: 1;
  }
}

@keyframes ceFloatTwo {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.86;
  }

  50% {
    transform: translateY(-8px);
    opacity: 1;
  }
}

@keyframes ceFloatThree {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.82;
  }

  50% {
    transform: translateY(-8px);
    opacity: 1;
  }
}

@keyframes ceRingPulse {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.04);
  }
}

@keyframes ceRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .contact-executive-wrapper {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 570 / 680;
    border-radius: 24px;
  }

  .contact-executive-visual {
    width: 100%;
    height: 100%;
    border-radius: 24px;
  }
}

@media (max-width: 380px) {
  .contact-executive-wrapper,
  .contact-executive-visual {
    border-radius: 20px;
  }
}