/*Hiệu ứng menu*/
.centery,.centery-after:after,.centery-before:before{-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
.ease-in-200{-webkit-transition:all 500ms ease-in;-moz-transition:all 500ms ease-in;-ms-transition:all 500ms ease-in;-o-transition:all 500ms ease-in;transition:all 500ms ease-in;}
@-webkit-keyframes slideInDown1{0%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);visibility:visible}
100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
@keyframes slideInDown1{0%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);visibility:visible}
100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
.slideInDown1{-webkit-animation-name:slideInDown1;animation-name:slideInDown1}
/**/
.fixed{position:fixed !important;left:0;right:0;top:0;z-index:999;animation:slideInDown1 1s 0s;}
.fixed-res{position:fixed !important;left:0;right:0;top:0;z-index:999;animation:ease 0.3s;}
/*Hieu ung*/
.hvr-float-shadow{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform}
.hvr-float-shadow:before{pointer-events:none;position:absolute;z-index:-1;content:'';top:100%;left:5%;height:10px;width:90%;opacity:0;background:-webkit-radial-gradient(center,ellipse,rgba(0,0,0,.35) 0,transparent 80%);background:radial-gradient(ellipse at center,rgba(0,0,0,.35) 0,transparent 80%);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform,opacity;transition-property:transform,opacity}
.hvr-float-shadow:active,.hvr-float-shadow:focus,.hvr-float-shadow:hover{-webkit-transform:translateY(-5px);transform:translateY(-5px)}
.hvr-float-shadow:active:before,.hvr-float-shadow:focus:before,.hvr-float-shadow:hover:before{opacity:1;-webkit-transform:translateY(5px);transform:translateY(5px)}
.btn-sweep-center{position:relative;z-index:10;color:var(--color-main);display:inline-block;overflow:hidden;text-transform:uppercase;border:1px solid var(--color-main);}
.btn-sweep-center:hover{color:#fff;}
.btn-sweep-center:before{left:-20px;transform:translate(-50%,-50%);}
.btn-sweep-center:after{right:-20px;transform:translate(50%,-50%);}
.btn-sweep-center:before,.btn-sweep-center:after{position:absolute;top:50%;content:"";width:20px;height:20px;background-color:var(--color-main);border-radius:50%;z-index:-1;}
.btn-sweep-center:hover:before{-webkit-animation:criss-cross-left 0.8s both;animation:criss-cross-left 0.8s both;-webkit-animation-direction:alternate;animation-direction:alternate;}
.btn-sweep-center:hover:after{-webkit-animation:criss-cross-right 0.8s both;animation:criss-cross-right 0.8s both;-webkit-animation-direction:alternate;animation-direction:alternate;}
@-webkit-keyframes criss-cross-left{0%{left:-20px;}
50%{left:50%;width:20px;height:20px;}
100%{left:50%;width:375px;height:375px;}
}
@keyframes criss-cross-left{0%{left:-20px;}
50%{left:50%;width:20px;height:20px;}
100%{left:50%;width:375px;height:375px;}
}
@-webkit-keyframes criss-cross-right{0%{right:-20px;}
50%{right:50%;width:20px;height:20px;}
100%{right:50%;width:375px;height:375px;}
}
@keyframes criss-cross-right{0%{right:-20px;}
50%{right:50%;width:20px;height:20px;}
100%{right:50%;width:375px;height:375px;}
}
.hvr-sweep-to-top{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent;position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:.3s;transition-duration:.3s}
.hvr-sweep-to-top:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#3a0304;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}
.hvr-sweep-to-top:active,.hvr-sweep-to-top:focus,.hvr-sweep-to-top:hover{color:#fff}
.hvr-sweep-to-top:active:before,.hvr-sweep-to-top:focus:before,.hvr-sweep-to-top:hover:before{-webkit-transform:scaleY(1);transform:scaleY(1)}
.hvr-sweep-to-right{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent;position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:.3s;transition-duration:.3s}
.hvr-sweep-to-right:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#33cbcc;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}
.hvr-sweep-to-right:active,.hvr-sweep-to-right:focus,.hvr-sweep-to-right:hover{color:#fff}
.hvr-sweep-to-right:active:before,.hvr-sweep-to-right:focus:before,.hvr-sweep-to-right:hover:before{-webkit-transform:scaleX(1);transform:scaleX(1)}
.btn-hover{position:relative;padding:10px 20px;border-radius:7px;border:1px solid rgb(61,106,255);font-size:14px;text-transform:uppercase;font-weight:600;letter-spacing:2px;background:transparent;color:#fff;overflow:hidden;box-shadow:0 0 0 0 transparent;-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;transition:all 0.2s ease-in;}
.btn-hover:hover{background:rgb(61,106,255);box-shadow:0 0 30px 5px rgba(0,142,236,0.815);-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;transition:all 0.2s ease-out;}
.btn-hover:hover::before{-webkit-animation:sh02 0.5s 0s linear;-moz-animation:sh02 0.5s 0s linear;animation:sh02 0.5s 0s linear;}
.btn-hover::before{content:'';display:block;width:0px;height:86%;position:absolute;top:7%;left:0%;opacity:0;background:#fff;box-shadow:0 0 50px 30px #fff;-webkit-transform:skewX(-20deg);-moz-transform:skewX(-20deg);-ms-transform:skewX(-20deg);-o-transform:skewX(-20deg);transform:skewX(-20deg);}
@keyframes sh02{from{opacity:0;left:0%;}
50%{opacity:1;}
to{opacity:0;left:100%;}
}
.codepen-button{display:block;cursor:pointer;color:#fff;margin:0 auto;position:relative;text-decoration:none;font-weight:600;border-radius:6px;overflow:hidden;padding:3px;isolation:isolate}
.codepen-button::before{content:"";position:absolute;top:0;left:0;width:400%;height:100%;background:linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b);background-size:25% 100%;animation:an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop .75s linear infinite;animation-play-state:paused;translate:-5% 0;transition:translate .25s ease-out}
.codepen-button:hover::before{animation-play-state:running;transition-duration:.75s;translate:0 0}
@keyframes an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop{to{transform:translateX(-25%)}
}
.codepen-button span{position:relative;display:block;padding:1rem 1.5rem;font-size:1.1rem;background:#000;border-radius:3px;height:100%}
.btn-hover:active{box-shadow:0 0 0 0 transparent;-webkit-transition:box-shadow 0.2s ease-in;-moz-transition:box-shadow 0.2s ease-in;transition:box-shadow 0.2s ease-in;}
.box{position:relative;transition:0.5s;-webkit-transition:0.5s}
.box::before,.box::after{pointer-events:none;border-radius:0.5rem;width:100%;height:100%;z-index:1;content:'';position:absolute;top:0;left:0;box-sizing:border-box;-webkit-transform:scale(0);transition:0.5s}
.foo::before{border-radius:0.5rem;border-bottom:3px solid var(--color-main-2);border-left:3px solid var(--color-main-2);-webkit-transform-origin:0 100%}
.foo::after{border-radius:0.5rem;border-top:3px solid var(--color-main-2);border-right:3px solid var(--color-main-2);-webkit-transform-origin:100% 0%}
.box:hover::after,.box:hover::before{-webkit-transform:scale(1)}
.hover_sang2{position:relative;overflow:hidden;}
.hover_sang2:before{position:absolute;top:0;left:-85%;z-index:10;display:block;content:'';width:50%;height:100%;background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 100%);background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 100%);-webkit-transform:skewX(-25deg);transform:skewX(-25deg);}
.hover_sang2:hover:before{transition:1s;left:100%;}
.hover_sang{display:block;position:relative;overflow:hidden;}
.hover_sang:hover:before{left:0;top:0;}
.hover_sang:before{left:-100%;top:-100%;}
.hover_sang:after{bottom:-100%;right:-100%;}
.hover_sang:before,.hover_sang:after{display:block;}
.hover_sang:before,.hover_sang:after{background:rgba(255,255,255,0.3) none repeat scroll 0 0;content:"";height:100%;position:absolute;-webkit-transition:all 0.5s ease 0s;transition:all 0.5s ease 0s;width:100%;z-index:8;}
.hover_sang:hover img{-webkit-transform:scale(1.2,1.2);-moz-transform:scale(1.2,1.2);-o-transform:scale(1.2,1.2);-ms-transform:scale(1.2,1.2);transform:scale(1.2,1.2);}
.hover_sang img{transition:0.7s;}
.hover_sang:hover:after{right:0;bottom:0;}
.hover_xam{position:relative;overflow:hidden;}
.hover_xam::before{content:"";background:rgba(255,255,255,.5);bottom:0;left:0;position:absolute;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);-khtml-opacity:1;-o-opacity:1;-ms-opacity:1;-webkit-opacity:1;-moz-opacity:1;opacity:1;width:0;height:0;z-index:2;}
.hover_xam::after{content:"";background:rgba(255,255,255,.5);top:0;right:0;position:absolute;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);-khtml-opacity:1;-o-opacity:1;-ms-opacity:1;-webkit-opacity:1;-moz-opacity:1;opacity:1;width:0;height:0;z-index:2;}
.hover_xam:hover::before,.hover_xam:hover::after{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);-webkit-transition-duration:1.3s;-moz-transition-duration:1.3s;-ms-transition-duration:1.3s;-o-transition-duration:1.3s;transition-duration:1.3s;-khtml-opacity:0;-o-opacity:0;-ms-opacity:0;-webkit-opacity:0;-moz-opacity:0;opacity:0;height:100%;width:100%;}
.hover_sang3{position: relative;display: block;padding: 1px;}
.hover_sang3:before {content: "";position: absolute;z-index: 1;left: 0px;right: 0px;top: 0px;bottom: 0px;border-top: 1px solid var(--color-main);border-bottom: 1px solid var(--color-main);-o-transform: scale(0, 1);transform: scale(0, 1);-moz-transform: scale(0, 1);-webkit-transform: scale(0, 1);-ms-transform: scale(0, 1);-o-transition: all 0.4s ease-in-out 0s;transition: all 0.4s ease-in-out 0s;-moz-transition: all 0.4s ease-in-out 0s;-webkit-transition: all 0.4s ease-in-out 0s;}
.hover_sang3:after {content: "";position: absolute;z-index: 1;left: 0px;right: 0px;top: 0px;bottom: 0px;border-left: 1px solid var(--color-main);border-right: 1px solid var(--color-main);-o-transform: scale(1, 0);transform: scale(1, 0);-moz-transform: scale(1, 0);-webkit-transform: scale(1, 0);-ms-transform: scale(0, 1);-o-transition: all 0.4s ease-in-out 0s;transition: all 0.4s ease-in-out 0s;-moz-transition: all 0.4s ease-in-out 0s;-webkit-transition: all 0.4s ease-in-out 0s;}
.hover3:hover .hover_sang3:before, .hover3:hover .hover_sang3:after
,.hover_sang3:hover:before, .hover_sang3:hover:after {-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;-o-transform: scale(1, 1);transform: scale(1, 1);-moz-transform: scale(1, 1);-webkit-transform: scale(1, 1);-ms-transform: scale(1, 1);pointer-events: none;}
/* .box__product:hover .scale-img > picture img { -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } */
/*Phone anima*/
.animate__infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}
.animate__tada{-webkit-animation-name:tada;animation-name:tada;}
.animate__animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-duration:var(--animate-duration);animation-duration:var(--animate-duration);-webkit-animation-fill-mode:both;animation-fill-mode:both;}
/* Loading */
.mask{width:100%;height:100vh;position:fixed;left:0;top:0;z-index:999999999;overflow:hidden;}
.mask span:nth-child(1){height:30vh;top:0;-webkit-transition-delay:.3s;transition-delay:.3s;}
.mask span:nth-child(2){height:40vh;top:30vh;-webkit-transition-delay:.5s;transition-delay:.5s;}
.mask span:nth-child(3){height:30vh;top:70vh;-webkit-transition-delay:.6s;transition-delay:.6s;}
.mask span{width:100%;position:absolute;right:0;background:-webkit-linear-gradient(90deg,#fff 0,#fff 100%);background:linear-gradient(90deg,#fff 0,#fff 100%);-webkit-transition:width .9s ease-in-out;transition:width .9s ease-in-out;}
.mask.hideg span{width:0;}
.mask.hideg{pointer-events:none;}
.loadicon{position:fixed;top:50%;left:50%;width:200px;height:140px;margin:-70px 0 0 -100px;z-index:110000;}
#loading{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999999999999;}
#loading.finish{z-index:-9999;}
#loading.finish .logo_2 span,#loading.finish .logo_2 img{display:none;}
#loading .logo_2{width:100%;height:100%;display:flex;align-items:center;justify-content:center;transition:all ease 0.5s;}
#loading .logo_2 span{display:block;border-radius:50%;border:3px solid rgba(255,255,255,0.5);-ms-border-radius:50%;-o-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;box-shadow:0 0 20px rgba(255,255,255,0.5);-webkit-animation:Ani 2s infinite;animation:Ani 2s infinite;width:120px;height:120px;position:absolute;left:0;right:0;margin-left:auto;margin-right:auto;z-index:2;z-index:9999999999;}
#loading .logo_2 img{position:relative;max-width:80px;z-index:4;}
/* @-webkit-keyframes Ani{0%{box-shadow:0 0 0 #242424;border:1px solid #242424;-webkit-transform:scale(0);transform:scale(0);}
}
.start-animate{z-index:999 !important;position:absolute;animation:star linear 1.75s infinite;-moz-animation:star linear 1.75s infinite;-webkit-animation:star linear 1.75s infinite;-o-animation:star linear 1.75s infinite;}
@keyframes star{0%{transform:rotate(0) scale(0);}
50%{transform:rotate(180deg) scale(1.5);}
100%{transform:rotate(360deg) scale(0);}
}
*/
/*Line*/
.animate-border{position:relative;display:block;width:100px;height:3px;background:var(--color-main-2);overflow:hidden}
.animate-border:after{position:absolute;content:"";width:30px;height:3px;left:-15px;bottom:0;border-left:10px solid #fff;border-right:10px solid #fff;-webkit-animation:animborder 2s linear infinite;animation:animborder 2s linear infinite}
@-webkit-keyframes animborder{0%{-webkit-transform:translateX(0);transform:translateX(0)}
100%{-webkit-transform:translateX(113px);transform:translateX(113px)}
}
@keyframes animborder{0%{-webkit-transform:translateX(0);transform:translateX(0)}
100%{-webkit-transform:translateX(113px);transform:translateX(113px)}
}
/*Category__menu*/
.category__menu,.category__menu_show{position:relative;width:300px;z-index:19;}
.category__menu > .nicescl{display:none;top:100%;position:relative;}
.category__menu .title{display:block;line-height:40px;height:100%;cursor:pointer;font-size:15px;text-transform:uppercase;text-align:center;color:#fff;font-family:var(--f-bold);}
.menu__icon{margin-bottom:0px;}
.menu__icon span{background-color:var(--color-main);height:100%;width:100%;padding:5px 15px;font-size:16px;color:#fff;font-family:var(--f-bold);}
.menu__icon span i{font-size:20px;color:#fff;}
.category__menu ul,.category__menu_show ul{padding:0;margin:0;list-style:none;text-align:left;background-color:#fff;}
.category__menu ul > li,.category__menu_show ul > li{padding:0 0% 0% 5%;border-bottom:dashed 1px #F1D8E1;}
.category__menu ul > li:last-child,.category__menu_show ul > li:last-child{border-bottom:0;}
.category__menu ul > li.line,.category__menu_show ul > li.line{border-bottom:solid 1px #F1D8E1;width:100%;margin:0 auto;}
.category__menu .nicescl{position:absolute;box-sizing:border-box;width:100%;left:0;top:100%;border:solid 1px #F1D8E1;border-top:none;}
.category__menu_show .nicescl{position:absolute;box-sizing:border-box;width:100%;left:0;top:0%;border:solid 1px #F1D8E1;border-top:none;}
.category__menu ul.content,.category__menu_show ul.content{overflow:auto;font-size:15px;min-height:300px;}
.category__menu li a,.category__menu_show li a{display:inline-flex;align-items:center;width:100%;position:relative;padding:10px 0px;font-size:15px;color:#2C2C2C;text-transform:capitalize;font-family:var(--f-regular);}
.category__menu li a img,.category__menu_show li a img{margin-right:10px;}
.category__menu ul ul,.category__menu_show ul ul{width:100%;display:block;position:absolute;left:calc(100% - 7px);left:-moz-calc(100% - 7px);left:-webkit-calc(100% - 7px);z-index:9999;}
.category__menu ul ul li,.category__menu_show ul ul li{position:relative;padding-left:10px;padding-right:10px;}
.category__menu ul ul li a,.category__menu_show ul ul li a{padding:8px 0px;text-transform:capitalize;font-size:14px;}
.category__menu ul ul,.category__menu_show ul ul{-webkit-box-shadow:1px 1px 15px rgb(0 0 0 / 15%);box-shadow:1px 1px 15px rgb(0 0 0 / 15%);-webkit-transform:perspective(600px) rotateX(-90deg);transform:perspective(600px) rotateX(-90deg);-webkit-transform-origin:0 0 0;transform-origin:0 0 0;opacity:0;visibility:hidden;transition:all .3s;}
.category__menu ul > li:hover > ul,.category__menu_show ul > li:hover > ul{display:block;-webkit-transform:perspective(600px) rotateX(0);transform:perspective(600px) rotateX(0);-webkit-transform-origin:0 0 0;opacity:1;visibility:visible;transition:all .4s;}
.category__menu ul > li:last-child,.category__menu_show ul > li:last-child{border-bottom:none}
.category__menu ul ul ul,.category__menu_show ul ul ul{left:100%;top:0!important}
.category__menu i.right,.category__menu_show i.right{position:absolute;right:13px;font-size:16px;}
.category__menu i.left,.category__menu_show i.left{font-size:6px;margin-right:10px;}
.category__menu li:hover > a,.category__menu_show li:hover > a{color:var(--color-hover);}
.category__menu .fa-angle-right:before,.category__menu_show .fa-angle-right:before{font-size:15px;}
@-webkit-keyframes scale-up-hor-left{0%{-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 0;transform-origin:0 0}
100%{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transform-origin:0 0;transform-origin:0 0}
}
/* .slideshow .swiper-slide img{transform:scale(1);transition:transform 5s ease-in-out;transform-origin:center center;}
.slideshow .swiper-slide-active img{transform:scale(1.2);}
*/
/* width */
.category__menu ::-webkit-scrollbar,.category__menu_show ::-webkit-scrollbar{width:3px;height:0px;}
/* Track */
.category__menu ::-webkit-scrollbar-track,.category__menu_show ::-webkit-scrollbar-track{background:#ccc;}
/* Handle */
.category__menu ::-webkit-scrollbar-thumb,.category__menu_show ::-webkit-scrollbar-thumb{background:#053217;}
/* Handle on hover */
.category__menu ::-webkit-scrollbar-thumb:hover,.category__menu_show ::-webkit-scrollbar-thumb:hover{background:#053217;}
/*Button*/
/* Button 5 */
.btn-5{position: relative; background:var(--color-main);color:#fff;line-height:24px;font-size:16px;overflow:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;}
.btn-5:active{background:var(--color-main-2);top:2px;}
.btn-5 span{display:inline-block;width:100%;height:100%;-webkit-transition:all 0.3s;-webkit-backface-visibility:hidden;-moz-transition:all 0.3s;-moz-backface-visibility:hidden;transition:all 0.3s;backface-visibility:hidden;}
.btn-5::before{position:absolute;height:100%;width:100%;line-height:2.5;font-size:180%;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s;}
.btn-5:active:before{color:var(--color-main-2);}
/* Button 5a */
.btn-5a:hover span{-webkit-transform:translateY(300%);-moz-transform:translateY(300%);-ms-transform:translateY(300%);transform:translateY(300%);}
.btn-5a:before{left:0;top:-100%;}
.btn-5a:hover:before{top:0;}
/* Button 5b */
.btn-5b:hover span{-webkit-transform:translateX(200%);-moz-transform:translateX(200%);-ms-transform:translateX(200%);transform:translateX(200%);}
.btn-5b:before{left:-100%;top:0;}
.btn-5b:hover:before{left:0;}
/*icon-cart*/
.icon-cart:before{content:"\f218";font-family: 'Font Awesome 5 Pro';color: #fff;font-size: 16px;}
.icon-cart-2:before{content:"\e0dc";font-family: 'Font Awesome 5 Pro';color: #fff;font-size: 16px;}
/*Next*/
.btn-conteiner{display:inline-flex;justify-content:center;--color-text:#ffffff;--color-background:#ff135a;--color-outline:#ff145b80;--color-shadow:#00000080;}
.btn-content{display:inline-flex;align-items:center;padding:5px 30px;text-decoration:none;font-family:'Poppins',sans-serif;color:var(--color-text);background:var(--color-background);transition:1s;border-radius:100px;box-shadow:0 0 0.2em 0 var(--color-background);}
.btn-content:hover,.btn-content:focus{transition:0.5s;-webkit-animation:btn-content 1s;animation:btn-content 1s;outline:0.1em solid transparent;outline-offset:0.2em;box-shadow:0 0 0.4em 0 var(--color-background);}
.btn-content .icon-arrow{transition:0.5s;margin-right:0px;transform:scale(0.6);}
.btn-content:hover .icon-arrow{transition:0.5s;margin-right:25px;}
.icon-arrow{width:20px;margin-left:15px;position:relative;top:6%;}
/* SVG */
#arrow-icon-one{transition:0.4s;transform:translateX(-60%);}
#arrow-icon-two{transition:0.5s;transform:translateX(-30%);}
.btn-content:hover #arrow-icon-three{animation:color_anim 1s infinite 0.2s;}
.btn-content:hover #arrow-icon-one{transform:translateX(0%);animation:color_anim 1s infinite 0.6s;}
.btn-content:hover #arrow-icon-two{transform:translateX(0%);animation:color_anim 1s infinite 0.4s;}
/* SVG animations */
@keyframes color_anim{0%{fill:white;}
50%{fill:var(--color-background);}
100%{fill:white;}
}
/* Button animations */
@-webkit-keyframes btn-content{0%{outline:0.2em solid var(--color-background);outline-offset:0;}
}
@keyframes btn-content{0%{outline:0.2em solid var(--color-background);outline-offset:0;}
}
/* From Uiverse.io by gharsh11032000 */ 
.animated-button{position:relative;display:inline-flex;align-items:center;gap:4px;padding:0.5rem 2rem;border:2px solid;border-color:transparent;font-size:16px;background-color:inherit;border-radius:100px;color:var(--color-main);box-shadow:0 0 0 1px var(--color-main);cursor:pointer;overflow:hidden;transition:all 0.6s cubic-bezier(0.23,1,0.32,1);}
.animated-button svg{position:absolute;width:24px;fill:var(--color-main);z-index:9;transition:all 0.8s cubic-bezier(0.23,1,0.32,1);}
.animated-button .arr-1{right:16px;}
.animated-button .arr-2{left:-25%;}
.animated-button .circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:24px;background-color:var(--color-main);border-radius:50%;opacity:0;transition:all 0.8s cubic-bezier(0.23,1,0.32,1);}
.animated-button .text{position:relative;z-index:1;transform:translateX(-12px);transition:all 0.8s cubic-bezier(0.23,1,0.32,1);}
.animated-button:hover{box-shadow:0 0 0 12px transparent;color:#fff;border-radius:12px;}
.animated-button:hover .arr-1{right:-25%;}
.animated-button:hover .arr-2{left:16px;}
.animated-button:hover .text{transform:translateX(12px);}
.animated-button:hover svg{fill:#fff;}
.animated-button:active{scale:0.95;box-shadow:0 0 0 4px var(--color-main);}
.animated-button:hover .circle{width:220px;height:220px;opacity:1;}
/* From Uiverse.io by BaekCCI */ 
.cta{position:relative;margin:auto;padding:12px 18px;transition:all 0.2s ease;border:none;background:none;cursor:pointer;}
.cta:before{content:"";position:absolute;top:0;left:0;display:block;border-radius:50px;background:var(--color-main);width:45px;height:45px;transition:all 0.3s ease;}
.cta span{position:relative;font-family:"Ubuntu",sans-serif;font-size:18px;font-weight:700;letter-spacing:0.05em;color:#333;}
.cta svg{position:relative;top:0;margin-left:10px;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke:#333;stroke-width:2;transform:translateX(-5px);transition:all 0.3s ease;}
.cta:hover:before{width:100%;background:var(--color-main);}
.cta:hover svg{transform:translateX(0);}
.cta:active{transform:scale(0.95);}