/* ==========================================================
   GENESIS SERVICE PAGES
   Premium V2
========================================================== */

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

.hero{

padding:160px 0 100px;

position:relative;

overflow:hidden;

}

.hero-container{

display:grid;

grid-template-columns:1.1fr .9fr;

align-items:center;

gap:80px;

}

.hero-logo{

width:100%;

max-width:520px;

display:block;

margin:auto;

filter:

drop-shadow(0 25px 60px rgba(0,0,0,.45));

animation:heroFloat 6s ease-in-out infinite;

}

@keyframes heroFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-14px);

}

}

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

.services{

padding:90px 0;

}

.section-description{

max-width:700px;

margin:18px auto 0;

text-align:center;

}

/* ==========================
GRID
========================== */

.services-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(300px,1fr));

gap:38px 30px;

}

/* ==========================
SERVICE ITEM
========================== */

.service-item{

display:flex;

flex-direction:column;

}

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

.service-page-card{

position:relative;

display:flex;

align-items:center;

gap:16px;

padding:18px 22px;

border-radius:20px;

background:

linear-gradient(

145deg,

rgba(255,255,255,.05),

rgba(255,255,255,.02)

);

border:

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

backdrop-filter:blur(20px);

transition:.35s;

overflow:hidden;

}

.service-page-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:4px;

height:100%;

background:var(--primary);

opacity:0;

transition:.35s;

}

.service-page-card:hover{

transform:

translateY(-8px);

border-color:

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

box-shadow:

0 20px 50px rgba(0,0,0,.35);

}

.service-page-card:hover::before{

opacity:1;

}

.service-page-card i{

width:56px;

height:56px;

display:flex;

align-items:center;

justify-content:center;

font-size:1.4rem;

border-radius:16px;

background:

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

color:var(--primary);

flex-shrink:0;

}

.service-page-card h3{

margin:0;

font-size:1.15rem;

font-weight:700;

line-height:1.4;

}

/* ==========================
DESCRIPTION
========================== */

.service-description{

margin-top:10px;

padding-left:8px;

padding-right:8px;

font-size:.95rem;

line-height:1.7;

color:rgba(255,255,255,.72);

}

/* ==========================
CTA
========================== */

.cta{

padding:90px 0;

}

.cta-box{

padding:60px 40px;

border-radius:28px;

background:

linear-gradient(

135deg,

rgba(255,255,255,.05),

rgba(255,255,255,.02)

);

border:

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

backdrop-filter:blur(20px);

text-align:center;

}

.cta-box h2{

font-size:2.4rem;

margin-bottom:15px;

}

.cta-box p{

max-width:650px;

margin:0 auto 28px;

line-height:1.7;

color:rgba(255,255,255,.75);

}

/* ==========================
WHY GENESIS
========================== */

.why{

padding:90px 0 120px;

}

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

.footer{

margin-top:40px;

}

/* ==========================
ANIMATIONS
========================== */

.service-page-card,

.cta-box{

animation-duration:.6s;

}

/* ==========================
TABLET
========================== */

@media(max-width:992px){

.hero{

padding:130px 0 80px;

}

.hero-container{

grid-template-columns:1fr;

gap:55px;

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-logo{

max-width:380px;

}

}

/* ==========================
MOBILE
========================== */

@media(max-width:768px){

.hero{

padding:120px 0 70px;

}

.hero-container{

gap:40px;

}

.hero-logo{

max-width:300px;

}

.services{

padding:70px 0;

}

.services-grid{

grid-template-columns:1fr;

gap:30px;

}

.service-page-card{

padding:16px 18px;

border-radius:18px;

}

.service-page-card i{

width:48px;

height:48px;

font-size:1.2rem;

border-radius:14px;

}

.service-page-card h3{

font-size:1.05rem;

}

.service-description{

font-size:.9rem;

line-height:1.6;

padding-left:6px;

padding-right:6px;

}

.cta{

padding:70px 0;

}

.cta-box{

padding:40px 24px;

}

.cta-box h2{

font-size:1.8rem;

}

}

/* ==========================
SMALL MOBILE
========================== */

@media(max-width:480px){

.hero-logo{

max-width:240px;

}

.hero-title{

font-size:2.3rem;

}

.service-page-card{

padding:15px;

}

.service-page-card i{

width:44px;

height:44px;

font-size:1.1rem;

}

.service-page-card h3{

font-size:1rem;

}

}