/*
Theme Name:   Plixsite
Theme URI: https://plixsite.com
Description:  Plixsite - Hosting Wordpress Theme
Author:       aleks rc
Author URL:   https://plixsite.com
Template:     hello-animation
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  hello-animation
Tags: domains, host, hosting, hosting templates, landing page, layout, layout switcher, modern, one page, template, web hosting templates, whmcs, whmcs templates, whmcsdes
Text
*/

body.home {
    background-color: #000;
}

.page-content {
    overflow: hidden;
}


::selection {
    background: #fff !important;
    color: #000 !important;
}


::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #393939;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
      background: #8a8a8a;
}

::-webkit-scrollbar-track {
  background: #000000;
}

.bg-fil {
backdrop-filter: blur(10px);
}

.cleverwa-description p span {
    color: rgba(255, 255, 255, 1) !important;
    font-size: 12px !important;
}







/* HEADER SCROLL */

#Top_bar {
        top: 0;
        z-index: 19;
        -webkit-transition: top .3s 
ease-out;
        transition: top .3s 
ease-out;
}


.sticky-header {
    position: fixed;
    width: 100%;
    margin: 0 auto;
    right: 0;
    left: 0;
    border-bottom: 0px !important;
}

 
 
/* ANIMACIÓN ROTAR INFINITO */ 
 
.rotar-infinito img {
  height: auto;
  animation: giroInfinito 20s linear infinite;
  transform-origin: center center;
}

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













.botonne a {
    background: linear-gradient(272deg, #181717 -.51%, #656565 12.46%, #000 22.5%, #646464 46.54%, #000 112.33%);
    background-size: 800% 400%;
    transition: all .5s;
    animation: gradient 6s infinite cubic-bezier(.62, .28, .23, .99) both;
}

.botonpl a {
    background: linear-gradient(45deg, #454545, #bdbdbd, #454444, #3b3a39, #979797, #575757);
    background-size: 800% 400%;
    transition: all .5s;
    animation: gradient 6s infinite cubic-bezier(.62, .28, .23, .99) both;
}
.botonok a  {
    background: linear-gradient(272deg,#ff3407 -.51%,#fc964c 12.46%,#fc964c 22.5%,#f62f03 46.54%,#fd7c34 112.33%);
    background-size: 800% 400%;
    transition: all .5s;
    animation: gradient 6s infinite cubic-bezier(.62, .28, .23, .99) both;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.btn-gris a {
    box-shadow: 0 5px 8.6px 0 #8a8a8a inset, -1px -1px 2px 0 #6e6c6b3d, 1px -1px 2px 0 #444444, 0 -3px 6.5px 0 #3636365e, 0 -6px 17.5px 0 #a38478b5, 0 -7px 8.8px 0 #18181887, 0 -14px 58.2px 0 #1f1f207d;
}

.btn-gris a:hover {
    box-shadow: 0 5px 12.6px 0 #d5d5d5 inset, -1px -1px 2px 0 #8a8a8a, 1px -1px 12px 0 #8a8a8a, 0 -3px 16.5px 0 #8a8a8a, 0 -6px 47.5px 0 #646260, 0 -7px 28.8px 0 #7a7776, 0 -14px 78.2px 0 #8f8d8d;
    transform: scale(1.03);
}


.btn-orange a {
    box-shadow: 0 5px 8.6px 0 #ff8900 inset, -1px -1px 2px 0 #bd3d073d, 1px -1px 2px 0 #eb4d07, 0 -3px 6.5px 0 #ff4c005e, 0 -6px 17.5px 0 #fb4c04b5, 0 -7px 8.8px 0 #18181887, 0 -14px 58.2px 0 #1f1f207d;
}


.btn-orange a:hover {
    box-shadow: 0 5px 12.6px 0 #ffac6e inset, -1px -1px 2px 0 #ff9c64, 1px -1px 12px 0 #fb4c04, 0 -3px 16.5px 0 #fb9804, 0 -6px 47.5px 0 rgb(254 95 2 / 50%), 0 -7px 28.8px 0 rgb(254 117 2 / 85%), 0 -14px 78.2px 0 #ff4c00 !important;
    transform: scale(1.03);
}



.btn-negro a {
    box-shadow: 0 5px 8.6px 0 #6c6c6c inset, -1px -1px 2px 0 #4848483d, 1px -1px 2px 0 #000000, 0 -3px 6.5px 0 #2e2c2b5e, 0 -6px 17.5px 0 #afadad00, 0 -7px 8.8px 0 #18181800, 0 -14px 58.2px 0 #00000000;
}
.btn-negro a:hover {
    box-shadow: 0 5px 12.6px 0 #a5a5a5 inset, -1px -1px 2px 0 #626262, 1px -1px 12px 0 #6c6c6c, 0 -3px 16.5px 0 #8f8f8f, 0 -6px 47.5px 0 rgb(64 64 64 / 50%), 0 -7px 28.8px 0 rgb(147 147 147 / 85%), 0 -14px 78.2px 0 #a1a1a1;
    transform: scale(1.03);
}








.menumain {
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0px;
}


#menu-idioma img {
    background: #000000;
    border-radius: 100px;
}
#menu-idioma .sub-menu, #menu-idioma-1 .sub-menu {
    min-width: 5.5em !important;
}


.maskz {
    -webkit-mask-image: linear-gradient(#00000012, black 20%, #000000 95%);
    mask-image: linear-gradient(#00000003, #000000 20%, #000000 95%);
}

.maskml {
    -webkit-mask-image: linear-gradient(#000000, black 10%, transparent 80%);
    mask-image: linear-gradient(#000000, #000000 10%, #00000000 80%);
}
.maskm .swiper-slide img {
    border-radius: 20px;
}
.slipe .swiper-slide img {
    border-radius: 20px; 
}


 #menu-main-menu .sub-menu {
   backdrop-filter: blur(15px);
}
.blur5 {
   backdrop-filter: blur(50px);
}

.blur60 {
    -webkit-backdrop-filter: blur(60px);
    backdrop-filter: blur(60px);
    background-color: #ffffff80;
    transform: translateZ(0) scale(1);
}    
    
    
#menu-main-menu .sub-menu {
box-shadow: 0 2px 4px #6c718014, 0 7px 7px #6c718012, 0 17px 10px #6c71800a, 0 29px 12px #6c718003, 0 46px 13px #6c718000 !important;
}
.frame-yht {
    height: min-content;
    box-shadow: rgba(108, 113, 128, 0.08) 0px 2px 4px, rgba(108, 113, 128, 0.07) 0px 7px 7px, rgba(108, 113, 128, 0.04) 0px 17px 10px, rgba(108, 113, 128, 0.01) 0px 29px 12px, rgba(108, 113, 128, 0) 0px 46px 13px;
}

.idioma .sub-menu {
    min-width: 5.5em !important;
    margin-top: -5px !important;
}


.logos-canva {
    transform: rotateZ(-5deg);
    margin-left: -2.5vw !important;
    min-width: 105vw !important;
}


.overfl {
    overflow: hidden !important;
}



.btn-hover-up {
    display: inline-block;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.btn-hover-up:hover {
    transform: translateY(-4px) scale(1.05) !important; /* sube + aumenta tamaño */
    box-shadow: 0 6px 18px rgba(0,0,0,0.15); /* sombra opcional */
}
.can_log img, .paci .elementor-icon {
    opacity: .2;
}    


.ima-borde {
    border-radius: 30px !important;
}
 


.sec1 {
    box-shadow: 0 10px 36px #1018200f, 0 0 0 1px #e6ecf214;
    -webkit-box-shadow: 0px 10px 36px 0px rgb(16 24 32 / 6%), 0px 0px 0px 1px rgb(230 236 242 / 8%);
    filter: contrast(1.2) saturate(1.2);
}


.linear {
    box-shadow: 0 1px 24px 4px #ed845d;
    flex: none;
    height: 2px !important;
    left: calc(50.134048257372676% - 80% / 2) !important;
    overflow: visible;
    position: absolute !important;
    top: 0 !important;
    width: 80% !important;
    z-index: 1 !important;
    transition: none !important;
    transform: none !important;
    background: linear-gradient(90deg, #4949497d 0%, #ff4400 50%, #49494963 100%);
    will-change: transform;
    opacity: 1;
}

.linear2 {
    box-shadow: 0 1px 24px 4px #ffc3a9;
    flex: none;
    height: 2px !important;
    left: calc(50.134048257372676% - 80% / 2) !important;
    overflow: visible;
    position: absolute !important;
    top: 0 !important;
    width: 80% !important;
    z-index: 1 !important;
    transition: none !important;
    transform: none !important;
    background: linear-gradient(90deg, rgba(0, 85, 255, 0) 0%, #ff4c00 50%, rgba(0, 85, 255, 0) 100%);
    will-change: transform;
    opacity: 1;
}










.aae-pro-header-sticky-active .top-header {
    display: none; 
}


.aae-pro-header-sticky-active {
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    background-color: #000000eb !important;
    transform: translateZ(0) scale(1);
    box-shadow: 0 1px 0 #292929;
}




.shawin {
   
    box-shadow: inset 0 -4px 16px rgb(255 255 255 / 14%) !important;
    height: min-content;
    backdrop-filter: saturate(180%) brightness(150%) blur(10px);
}






.circ::before {
    background-image: radial-gradient(#6b6b6b61, #2b2b2b85 34%, #050505 70%, #05050500 100%);
    max-height: 500px !important;
    border: 0px !important;
}


.home-hero .canva-x {
    right: -300px;
    transform: rotate(-14deg);
}






.overly-1 {
    width: 50%;
    height: 250px;
    background-image: linear-gradient(130deg, #fc3200 21%, #fc3200 58%, #fb0d1f 100%);
    background-size: 300% 100%;
    display: block;
    filter: blur(41px);
    transform: rotate(17deg) translate(-100px, 200px);
}
.overly-2 {
    width: 50%;
    height: 250px;
    background-image: linear-gradient(130deg, #fc3200 21%, #fc3200 58%, #ff0013 100%);
    background-size: 300% 100%;
    display: block;
    filter: blur(41px);
    transform: rotate(-7deg) translate(20px, 220px);
}









.service-pin .area::after {
    content: "";
    position: absolute;
    width: 652px;
    height: 652px;
    opacity: 0.52;
    filter: blur(160px);
    top: 50%;
    left: 13%;
    transform: translateY(-50%);
    z-index: -2;
    background: #ff3900;
}













@keyframes rotateGradient {
    0% {
      transform: rotateZ(0deg) scale3d(1, 1, 1) skewX(0deg);
    }
    10% {
      transform: rotateZ(2deg) scale3d(1.03, 0.97, 1) skewX(-2deg);
    }
    20% {
      transform: rotateZ(4deg) scale3d(1.05, 0.94, 1) skewX(-4deg);
    }
    30% {
      transform: rotateZ(3deg) scale3d(1.04, 0.96, 1) skewX(-3deg);
    }
    40% {
      transform: rotateZ(1deg) scale3d(1.02, 0.98, 1) skewX(-1deg);
    }
    50% {
      transform: rotateZ(0deg) scale3d(1, 1, 1) skewX(0deg);
    }
    60% {
      transform: rotateZ(-2deg) scale3d(1.06, 0.95, 1) skewX(3deg);
    }
    70% {
      transform: rotateZ(-3deg) scale3d(1.08, 0.92, 1) skewX(4deg);
    }
    80% {
      transform: rotateZ(-1deg) scale3d(1.04, 0.97, 1) skewX(2deg);
    }
    90% {
      transform: rotateZ(0deg) scale3d(1.02, 0.99, 1) skewX(1deg);
    }
    100% {
      transform: rotateZ(0deg) scale3d(1, 1, 1) skewX(0deg);
    }
  }
  






@media screen and (min-width: 1201px) {
  .nm-hero-img {
    width: 40%;
    position: absolute;
    right: 17%;
    bottom: 0;
    z-index: -1;
} 
} 

@media only screen and (min-width: 1200px) and (max-width: 1367px) {    

 .nm-hero-img {
    width: 40%;
    position: absolute;
    right: 17%;
    bottom: 0;
    z-index: -1;
    height: 530px;
}
}



@media screen and (min-width: 1201px) {
  #container:before {
    background: linear-gradient(180deg, #000000, transparent);
    content: "";
    height: 180px;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
 }  
 


.hero-hero-overly {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    perspective: 2000px;
    transform-style: preserve-3d;
    animation: rotateGradient 7s linear infinite;
    pointer-events: none;
    z-index: -1;
}
    
}    
    
@media only screen and (min-width: 400px) and (max-width: 1200px) {    

.nm-hero-img, .hero-hero-overly {
    display: none;
}
}

@media screen and (max-width: 400px) {
  .nm-hero-img {
    width: 90%;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    display: block;
} 

.hero-hero-overly {
    position: absolute;
    bottom: 80px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    perspective: 2000px;
    transform-style: preserve-3d;
    animation: rotateGradient 7s linear infinite;
    pointer-events: none;
}

}