css
/* ==================================================
DATACORB — HIRE REMOTE SUPPORT
Premium Floating + Glass Effect Version
================================================== */

/* ---------- GLOBAL ---------- */

*,
*::before,
*::after{
box-sizing:border-box;
}

/* ---------- VISIBILITY ---------- */

.web-only{
display:block!important;
}

.mobile-only{
display:none!important;
}

@media(max-width:768px){

.web-only{
display:none!important;
}

.mobile-only{
display:block!important;
}

}


/* ---------- SECTION ---------- */

.hire-support,
.hire-support-mobile{
padding:90px 20px 60px;
position:relative;
}

.how-it-works,
.why-choose,
.faq-section{
padding:20px 20px 20px;
position:relative;
}

/* Scoped container so it does not affect other pages */

.hire-support .container,
.how-it-works .container,
.why-choose .container,
.faq-section .container,
.hire-support-mobile .container{
max-width:1200px;
margin:auto;
}


/* ---------- TITLE + PARAGRAPH ---------- */

.hire-support h2,
.how-it-works h2,
.why-choose h2,
.faq-section h2{

display:block;

font-size:34px;

font-weight:800;

text-align:center;

margin-bottom:24px;

position:relative;

overflow:hidden;



}

.hire-support h2::after,
.how-it-works h2::after,
.why-choose h2::after,
.faq-section h2::after{

content:"";

position:absolute;

left:-120%;

top:-120%;

width:70px;

height:400%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.55),
transparent
);

transform:rotate(30deg);

animation:
shineMove 8s linear infinite;

}

.hire-support>.container>p,
.how-it-works>.container>p,
.why-choose>.container>p,
.faq-section>.container>p{

max-width:850px;

margin:
0 auto
55px;

text-align:center;

line-height:1.85;

font-size:17px;

color:#555;

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

}


/* ---------- GRID ---------- */

.plans-grid,
.steps-grid,
.faq-grid{

display:grid;

gap:28px;

}

.plans-grid{
grid-template-columns:repeat(3,1fr);
}

.steps-grid{
grid-template-columns:repeat(3,1fr);
}

.faq-grid{
grid-template-columns:repeat(2,1fr);
align-items:stretch;
}


/* ---------- WHY GRID ---------- */

.why-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:28px;

margin-top:45px;

}


/* ---------- CARDS ---------- */

.plan-card,
.step-card,
.faq-card{

background:#fff;

padding:35px;

border-radius:28px;

box-shadow:
0 25px 60px rgba(0,0,0,.08),
0 5px 18px rgba(0,0,0,.05);

position:relative;

overflow:hidden;

display:flex;

flex-direction:column;

justify-content:flex-start;

height:100%;



transition:
transform .35s ease,
box-shadow .35s ease,
background .35s ease;

}

.plan-card::after,
.step-card::after,
.faq-card::after,
.why-card::after{

content:"";

position:absolute;

top:-170%;

left:-150%;

width:85px;

height:400%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.45),
transparent
);

transform:rotate(30deg);

animation:
shineMove 8s linear infinite;

pointer-events:none;

}
.plan-card:hover,
.step-card:hover,
.faq-card:hover,
.why-card:hover{

transform:
translateY(-8px)
scale(1.03);

box-shadow:
0 28px 70px rgba(0,0,0,.14),
0 10px 24px rgba(0,0,0,.08);

background:#fff;

}


/* ---------- WHY CARD ---------- */

.why-card{

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

text-align:center;

width:100%;
height:100%;
min-height:240px;

padding:34px;

background:#fff;

border-radius:28px;

position:relative;
overflow:hidden;

box-shadow:
0 25px 60px rgba(0,0,0,.08),
0 5px 18px rgba(0,0,0,.05);



transition:
transform .35s ease,
box-shadow .35s ease,
background .35s ease;

cursor:pointer;

}

.why-card:hover{
transform:translateY(-10px) scale(1.03);

box-shadow:
0 28px 70px rgba(0,0,0,.14),
0 10px 24px rgba(0,0,0,.08);

background:#fff;
}

.why-card h3{

width:100%;

text-align:center;

font-size:22px;

font-weight:800;

margin-bottom:18px;

}

.why-card p{

width:100%;

margin:0;

text-align:center;

font-size:15px;

line-height:1.9;

color:#555;

}


/* ---------- BUTTON ---------- */

.hero-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 32px;

border-radius:10px;

border:2px solid #111;

background:#fff;

color:#000!important;

font-weight:700;

text-decoration:none;

transition:
background .3s ease,
color .3s ease,
transform .3s ease;

}

.hero-btn:hover{

background:#111;

color:#fff!important;

transform:translateY(-3px);

}

.btn-center{

margin-top:40px;

text-align:center;

}


/* ---------- MOBILE ---------- */

.hs-wrapper{

max-width:760px;

margin:auto;

padding:18px;

}

.hs-title{

font-size:34px;

font-weight:800;

text-align:center;

margin-bottom:22px;

}

.hs-intro{

text-align:center;

line-height:1.8;

margin-bottom:40px;

}

.hs-section{

margin-top:35px;

text-align:center;

}

.section-title{

font-size:28px;

font-weight:800;

margin-bottom:30px;

animation:
floating 5s ease infinite;

}

.hs-small-card{

display:inline-block;

width:auto;

max-width:420px;

padding:24px;

margin:12px auto;

background:#fff;

border-radius:22px;

box-shadow:
0 20px 45px rgba(0,0,0,.08);

position:relative;

overflow:hidden;

animation:
floating 5s ease infinite;

}

.hs-small-card strong{

display:block;

font-size:20px;

margin-bottom:14px;

}

.hs-small-card p{

margin:0;

line-height:1.8;

}


/* ---------- EFFECT ---------- */

/* ==================================================
GLOBAL FLOATING + HOVER FOR ALL DATACORB CARDS
================================================== */

.plan-card,
.step-card,
.faq-card,
.why-card,
.hs-small-card,
.service-about-box,
.philosophy-box,
.process-box,
.vision-box,
.who-card,
.about-intro-card,
.about-hero-card,
.commitment-card{

animation:floating 5s ease-in-out infinite;

transition:
transform .35s ease,
box-shadow .35s ease,
background .35s ease;

}

.plan-card:hover,
.step-card:hover,
.faq-card:hover,
.why-card:hover,
.hs-small-card:hover,
.service-about-box:hover,
.philosophy-box:hover,
.process-box:hover,
.vision-box:hover,
.who-card:hover,
.about-intro-card:hover,
.about-hero-card:hover,
.commitment-card:hover{

transform:
translateY(-10px)
scale(1.03);

box-shadow:
0 45px 90px rgba(0,0,0,.16),
0 16px 36px rgba(0,0,0,.10);

}


/* ---------- RESPONSIVE ---------- */

@media(max-width:1024px){

.plans-grid,
.steps-grid,
.faq-grid{
grid-template-columns:1fr;
}

.why-grid{
flex-direction:column;
align-items:center;
}

}

@media(max-width:768px){

.hire-support,
.how-it-works,
.why-choose,
.faq-section{
padding:70px 16px 50px;
}

.hire-support h2,
.how-it-works h2,
.why-choose h2,
.faq-section h2,
.hs-title,
.section-title{
font-size:28px;
}

/* ---------- PLAN CARDS ---------- */

.plan-card{
text-align:center;
align-items:center;
}

.plan-card h3{
font-size:26px;
font-weight:800;
margin-bottom:18px;
}

.plan-card p{
line-height:1.9;
font-size:16px;
margin-bottom:25px;
max-width:95%;
}

.price{
display:block;
font-size:28px;
font-weight:800;
margin:18px 0 24px;
}

}

.mobile-only .hs-section{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.mobile-only .section-title,
.mobile-only .btn-center{
grid-column:1 / -1;
}

.mobile-only .hs-small-card{
display:block;
width:100%;
max-width:none;
margin:0;
}

@media(max-width:768px){

.mobile-only .hs-section{
grid-template-columns:1fr;
}

}

.plan-card,
.step-card,
.faq-card,
.why-card{
text-align:center;
align-items:center;
}

.plan-card h3,
.step-card h3,
.faq-card h3,
.why-card h3{
width:100%;
text-align:center;
}

.plan-card p,
.step-card p,
.faq-card p,
.why-card p{
width:100%;
text-align:center;
margin-left:auto;
margin-right:auto;
}