/*==========================================================
GENESIS V2
COMPONENTS CSS
==========================================================*/

@layer components {

/*==========================================================
HERO BADGE
==========================================================*/

.hero-badge{

position:relative;

overflow:hidden;

}

.hero-badge::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:50%;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent);

transform:skewX(-25deg);

animation:badgeShine 5s linear infinite;

}

/*==========================================================
SECTION TAG
==========================================================*/

.section-tag{

letter-spacing:1px;

text-transform:uppercase;

font-weight:700;

}

/*==========================================================
BUTTONS
==========================================================*/

.btn-primary,
.btn-secondary,
.btn-nav,
.service-btn{

position:relative;

overflow:hidden;

isolation:isolate;

}

.btn-primary::before,
.btn-secondary::before,
.btn-nav::before,
.service-btn::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

135deg,

rgba(255,255,255,.15),

transparent);

opacity:0;

transition:.35s;

z-index:-1;

}

.btn-primary:hover::before,
.btn-secondary:hover::before,
.btn-nav:hover::before,
.service-btn:hover::before{

opacity:1;

}

.btn-primary:active,
.btn-secondary:active,
.btn-nav:active,
.service-btn:active{

transform:scale(.98);

}

/*==========================================================
SERVICE CATEGORY
==========================================================*/

.service-category{

box-shadow:

0 0 20px rgba(255,0,85,.15);

}

/*==========================================================
SERVICE ICON
==========================================================*/

.service-icon{

transition:.35s;

}

.service-box:hover .service-icon{

transform:

rotate(-8deg)

scale(1.08);

}

/*==========================================================
STAT ICON
==========================================================*/

.stat-icon{

transition:.35s;

}

.stat-card:hover .stat-icon{

transform:

rotate(10deg)

scale(1.08);

}

/*==========================================================
WHY ICON
==========================================================*/

.why-icon{

transition:.35s;

}

.why-card:hover .why-icon{

transform:

rotate(-10deg)

scale(1.08);

}

/*==========================================================
PROCESS ICON
==========================================================*/

.process-icon{

transition:.35s;

}

.process-card:hover .process-icon{

transform:

translateY(-6px)

scale(1.08);

}

/*==========================================================
CONTACT ICON
==========================================================*/

.contact-icon{

transition:.35s;

}

.contact-card:hover .contact-icon{

transform:scale(1.08);

}

/*==========================================================
SOCIAL ICONS
==========================================================*/

.footer-social a i,
.contact-social a i{

transition:.35s;

}

.footer-social a:hover i,
.contact-social a:hover i{

transform:scale(1.2);

}

/*==========================================================
CARD HOVER BORDER
==========================================================*/

.service-box,
.stat-card,
.why-card,
.process-card,
.contact-card{

position:relative;

}

.service-box::after,
.stat-card::after,
.why-card::after,
.process-card::after,
.contact-card::after{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

border-radius:inherit;

padding:1px;

background:

linear-gradient(

135deg,

rgba(255,0,85,.35),

transparent,

rgba(139,0,255,.35));

-webkit-mask:

linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

opacity:0;

transition:.35s;

pointer-events:none;

}

.service-box:hover::after,
.stat-card:hover::after,
.why-card:hover::after,
.process-card:hover::after,
.contact-card:hover::after{

opacity:1;

}

}
/*==========================================================
LOADER COMPONENTS
==========================================================*/

.loader-wrapper{

position:relative;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

}

.loader-logo{

width:140px;

margin-bottom:1.8rem;

filter:

drop-shadow(0 0 35px rgba(255,0,85,.35));

}

.loader-title{

font-size:3rem;

font-weight:800;

letter-spacing:3px;

margin-bottom:.8rem;

}

.loader-subtitle{

letter-spacing:5px;

font-size:.9rem;

color:var(--text-muted);

margin-bottom:2rem;

text-transform:uppercase;

}

.loader-progress{

width:280px;

height:5px;

border-radius:999px;

background:rgba(255,255,255,.08);

overflow:hidden;

}

.loader-progress-fill{

width:0;

height:100%;

background:var(--gradient-primary);

border-radius:999px;

}

/*==========================================================
LOGO RINGS
==========================================================*/

.logo-ring{

display:flex;

align-items:center;

justify-content:center;

box-shadow:

inset 0 0 35px rgba(255,255,255,.03);

}

.ring-1{

border-color:rgba(255,0,85,.22);

}

.ring-2{

border-color:rgba(139,0,255,.18);

}

.ring-3{

border-color:rgba(77,163,255,.12);

}

/*==========================================================
FLOATING CARDS
==========================================================*/

.floating-card{

cursor:default;

}

.floating-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background:

linear-gradient(

135deg,

rgba(255,255,255,.08),

transparent);

opacity:.45;

pointer-events:none;

}

.floating-card h4{

font-size:1rem;

margin-bottom:.35rem;

}

.floating-card p{

font-size:.82rem;

color:var(--text-muted);

}

/*==========================================================
SERVICE SEARCH
==========================================================*/

.service-search{

overflow:hidden;

}

.service-search::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:40%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.15),

transparent);

transform:skewX(-25deg);

transition:1s;

}

.service-search:hover::before{

left:160%;

}

/*==========================================================
FILTER BUTTONS
==========================================================*/

.filter-btn{

position:relative;

overflow:hidden;

}

.filter-btn::after{

content:"";

position:absolute;

left:50%;

bottom:8px;

width:0;

height:2px;

background:#fff;

transform:translateX(-50%);

transition:.3s;

}

.filter-btn.active::after{

width:45%;

}

/*==========================================================
SERVICE LIST
==========================================================*/

.service-content li{

transition:.3s;

}

.service-content li:hover{

transform:translateX(8px);

color:#fff;

}

.service-content li::before{

box-shadow:

0 0 10px rgba(255,0,85,.5);

}

/*==========================================================
COUNTERS
==========================================================*/

.counter{

display:inline-block;

font-variant-numeric:

tabular-nums;

}

/*==========================================================
SCROLL INDICATOR
==========================================================*/

.scroll-mouse{

background:rgba(255,255,255,.03);

}

.scroll-wheel{

border-radius:999px;

}

/*==========================================================
CONTACT CARDS
==========================================================*/

.contact-card h3{

margin-bottom:.45rem;

font-size:1.15rem;

}

.contact-card p{

margin-bottom:.35rem;

}

/*==========================================================
FOOTER
==========================================================*/

.footer-column a{

position:relative;

width:max-content;

}

.footer-column a::after{

content:"";

position:absolute;

left:0;

bottom:-4px;

width:0;

height:2px;

background:var(--gradient-primary);

transition:.35s;

}

.footer-column a:hover::after{

width:100%;

}

/*==========================================================
WHATSAPP
==========================================================*/

.whatsapp-float i{

font-size:1.6rem;

}

/*==========================================================
BACK TO TOP
==========================================================*/

.back-top i{

font-size:1.2rem;

}

/*==========================================================
SECTION DIVIDER
==========================================================*/

.section-divider{

width:120px;

height:4px;

margin:1.5rem auto;

border-radius:999px;

background:var(--gradient-primary);

}

/*==========================================================
HERO TRUST
==========================================================*/

.hero-trust div{

padding:.4rem .8rem;

border-radius:999px;

background:rgba(255,255,255,.03);

border:1px solid rgba(255,255,255,.05);

}

/*==========================================================
END BLOCK 2
==========================================================*/

}
/*==========================================================
POPUP
==========================================================*/

.popup-overlay{

position:fixed;

inset:0;

display:flex;

align-items:center;

justify-content:center;

background:rgba(0,0,0,.75);

backdrop-filter:blur(12px);

-webkit-backdrop-filter:blur(12px);

opacity:0;

visibility:hidden;

transition:.4s var(--ease);

z-index:var(--z-popup);

}

.popup-overlay.active{

opacity:1;

visibility:visible;

}

.popup{

position:relative;

width:min(90%,520px);

padding:3rem;

text-align:center;

border-radius:32px;

background:rgba(17,17,17,.92);

border:1px solid rgba(255,255,255,.08);

overflow:hidden;

box-shadow:

0 30px 80px rgba(0,0,0,.45);

}

.popup::before{

content:"";

position:absolute;

top:-160px;

left:-160px;

width:320px;

height:320px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(255,0,85,.18),

transparent);

pointer-events:none;

}

.popup-icon{

width:90px;

height:90px;

margin:0 auto 1.8rem;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:

linear-gradient(

135deg,

rgba(255,0,85,.18),

rgba(139,0,255,.18));

}

.popup-icon i{

font-size:2.8rem;

background:var(--gradient-primary);

background-clip:text;

-webkit-background-clip:text;

color:transparent;

}

.popup h2{

margin-bottom:1rem;

}

.popup p{

margin-bottom:2rem;

color:var(--text-light);

}

/*==========================================================
HERO DECORATION
==========================================================*/

.hero::before{

content:"";

position:absolute;

left:-250px;

top:-250px;

width:500px;

height:500px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(255,0,85,.12),

transparent);

filter:blur(80px);

pointer-events:none;

}

.hero::after{

content:"";

position:absolute;

right:-250px;

bottom:-250px;

width:550px;

height:550px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(139,0,255,.12),

transparent);

filter:blur(90px);

pointer-events:none;

}

/*==========================================================
GLASS REFLECTION
==========================================================*/

.glass::before,

.service-box::before,

.stat-card::before,

.why-card::before,

.process-card::before,

.contact-card::before{

background-size:200% 200%;

}

/*==========================================================
PREMIUM GLOW
==========================================================*/

.glow-primary{

box-shadow:

0 0 30px rgba(255,0,85,.25);

}

.glow-secondary{

box-shadow:

0 0 30px rgba(139,0,255,.22);

}

.glow-blue{

box-shadow:

0 0 30px rgba(77,163,255,.22);

}

/*==========================================================
IMAGE EFFECTS
==========================================================*/

.hero-logo{

transition:

transform .5s var(--ease),

filter .5s var(--ease);

}

.hero-logo:hover{

transform:scale(1.05);

filter:

drop-shadow(0 0 60px rgba(255,0,85,.5));

}

/*==========================================================
BUTTON RIPPLE HOLDER
==========================================================*/

.btn-primary,

.btn-secondary,

.service-btn,

.btn-nav{

position:relative;

overflow:hidden;

}

.btn-primary span,

.btn-secondary span,

.service-btn span,

.btn-nav span{

position:relative;

z-index:2;

}

/*==========================================================
CARD SHINE
==========================================================*/

.service-box:hover,

.stat-card:hover,

.why-card:hover,

.process-card:hover,

.contact-card:hover{

background:

linear-gradient(

180deg,

rgba(255,255,255,.06),

rgba(255,255,255,.03));

}

/*==========================================================
BADGES
==========================================================*/

.badge{

display:inline-flex;

align-items:center;

justify-content:center;

padding:.45rem 1rem;

border-radius:999px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

font-size:.82rem;

font-weight:600;

}

/*==========================================================
ICON BOX
==========================================================*/

.icon-box{

display:flex;

align-items:center;

justify-content:center;

width:70px;

height:70px;

border-radius:20px;

background:

linear-gradient(

135deg,

rgba(255,0,85,.15),

rgba(139,0,255,.15));

}

/*==========================================================
DIVIDER
==========================================================*/

.divider{

width:100%;

height:1px;

background:rgba(255,255,255,.08);

margin:2rem 0;

}

/*==========================================================
HOVER LIFT
==========================================================*/

.hover-lift{

transition:

transform .35s var(--ease);

}

.hover-lift:hover{

transform:translateY(-8px);

}

/*==========================================================
END
==========================================================*/

}