/*=========================================================
INDIANASTROVEDIC
PREMIUM SERVICE PROCESS
PART 1
=========================================================*/

.service-process{
    position:relative;
    padding:120px 0;
    background:linear-gradient(180deg,#ffffff 0%,#f7f9fc 100%);
    overflow:hidden;
}

.service-process::before{
    content:"";
    position:absolute;
    top:-220px;
    right:-220px;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(212,175,55,.08);
    filter:blur(80px);
}

.service-process::after{
    content:"";
    position:absolute;
    bottom:-220px;
    left:-220px;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(8,27,58,.05);
    filter:blur(80px);
}

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

.service-process .section-title{
    text-align:center;
    max-width:900px;
    margin:0 auto 80px;
    position:relative;
    z-index:2;
}

.service-process .section-title span{

display:inline-flex;

align-items:center;

justify-content:center;

padding:12px 28px;

border-radius:60px;

background:#ffffff;

border:1px solid rgba(212,175,55,.25);

box-shadow:0 15px 40px rgba(0,0,0,.05);

font-size:14px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

color:#081b3a;

margin-bottom:22px;

}

.service-process .section-title h2{

font-size:52px;

font-weight:800;

color:#081b3a;

line-height:1.2;

margin-bottom:22px;

}

.service-process .section-title p{

font-size:18px;

line-height:1.9;

color:#667085;

max-width:820px;

margin:auto;

}

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

.process-card{

position:relative;

height:100%;

padding:45px 30px;

background:#ffffff;

border-radius:28px;

border:1px solid #edf2f7;

box-shadow:0 20px 55px rgba(0,0,0,.05);

transition:.40s;

overflow:hidden;

z-index:2;

}

.process-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:linear-gradient(90deg,#D4AF37,#FFD54A,#081b3a);

transform:scaleX(0);

transform-origin:left;

transition:.40s;

}

.process-card:hover{

transform:translateY(-12px);

box-shadow:0 35px 70px rgba(0,0,0,.12);

}

.process-card:hover::before{

transform:scaleX(1);

}

/*=========================================================
STEP NUMBER
=========================================================*/

.process-number{

position:absolute;

top:22px;

right:22px;

width:52px;

height:52px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#081b3a;

color:#ffffff;

font-size:18px;

font-weight:800;

box-shadow:0 15px 35px rgba(8,27,58,.25);

}

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

.process-icon{

width:90px;

height:90px;

border-radius:24px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,#FFD54A,#D4AF37);

color:#081b3a;

font-size:34px;

margin-bottom:28px;

box-shadow:0 18px 40px rgba(212,175,55,.35);

}

/*=========================================================
PROCESS CONTENT
=========================================================*/

.process-card h4{

font-size:26px;

font-weight:800;

color:#081b3a;

line-height:1.35;

margin-bottom:18px;

}

.process-card p{

font-size:16px;

line-height:1.9;

color:#667085;

margin:0;

}

/*=========================================================
PREMIUM TIMELINE CONNECTOR
=========================================================*/

.service-process .row{

position:relative;

z-index:2;

}

@media(min-width:992px){

.service-process .col-lg{

position:relative;

}

.service-process .col-lg:not(:last-child)::after{

content:"";

position:absolute;

top:82px;

right:-18px;

width:36px;

height:4px;

border-radius:20px;

background:linear-gradient(90deg,#D4AF37,#FFD54A);

box-shadow:0 0 20px rgba(212,175,55,.35);

z-index:1;

}

}

/*=========================================================
PREMIUM HOVER EFFECTS
=========================================================*/

.process-card:hover .process-icon{

transform:rotate(-8deg) scale(1.08);

}

.process-card:hover .process-number{

background:#D4AF37;

color:#081b3a;

transform:scale(1.08);

}

.process-card:hover h4{

color:#0d3b73;

}

.process-icon,

.process-number,

.process-card h4{

transition:all .35s ease;

}

/*=========================================================
LIGHT GLOW EFFECT
=========================================================*/

.process-card::after{

content:"";

position:absolute;

width:180px;

height:180px;

border-radius:50%;

background:rgba(212,175,55,.10);

top:-90px;

right:-90px;

filter:blur(45px);

opacity:0;

transition:.40s;

}

.process-card:hover::after{

opacity:1;

}

/*=========================================================
STEP ANIMATION
=========================================================*/

.process-card{

animation:processFade .8s ease both;

}

.service-process .col-lg:nth-child(1) .process-card{

animation-delay:.1s;

}

.service-process .col-lg:nth-child(2) .process-card{

animation-delay:.2s;

}

.service-process .col-lg:nth-child(3) .process-card{

animation-delay:.3s;

}

.service-process .col-lg:nth-child(4) .process-card{

animation-delay:.4s;

}

.service-process .col-lg:nth-child(5) .process-card{

animation-delay:.5s;

}

.service-process .col-lg:nth-child(6) .process-card{

animation-delay:.6s;

}

@keyframes processFade{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:translateY(0);

}

}
/*=========================================================
PREMIUM GOLD BORDER EFFECT
=========================================================*/

.process-card{
    isolation:isolate;
}

.process-card::before{
    z-index:2;
}

.process-card:hover{
    border-color:rgba(212,175,55,.35);
}

.process-card:hover .process-icon{
    box-shadow:0 25px 60px rgba(212,175,55,.45);
}

.process-card:hover p{
    color:#4b5565;
}

/*=========================================================
ICON PULSE
=========================================================*/

@keyframes pulseGold{

0%{
transform:scale(1);
}

50%{
transform:scale(1.08);
}

100%{
transform:scale(1);
}

}

.process-card:hover .process-icon i{

animation:pulseGold .8s ease;

}

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

.process-card{

position:relative;

overflow:hidden;

}

.process-card .shine{

display:none;

}

.process-card::after{

content:"";

position:absolute;

top:-120%;

left:-40%;

width:60%;

height:250%;

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

transform:rotate(25deg);

transition:all .9s ease;

opacity:0;

}

.process-card:hover::after{

left:150%;

opacity:1;

}

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

.service-process{

background-image:

radial-gradient(circle at 15% 20%,rgba(212,175,55,.06),transparent 18%),

radial-gradient(circle at 85% 80%,rgba(8,27,58,.05),transparent 18%);

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1200px){

.service-process .section-title h2{

font-size:46px;

}

.process-card{

padding:40px 25px;

}

}

@media(max-width:991px){

.service-process{

padding:90px 0;

}

.service-process .section-title{

margin-bottom:60px;

}

.service-process .section-title h2{

font-size:38px;

}

.process-card{

margin-bottom:10px;

}

.process-number{

top:18px;

right:18px;

}

}

@media(max-width:767px){

.service-process{

padding:70px 0;

}

.service-process .section-title h2{

font-size:30px;

}

.service-process .section-title p{

font-size:16px;

}

.process-card{

padding:30px 24px;

border-radius:24px;

}

.process-icon{

width:74px;

height:74px;

font-size:28px;

margin-bottom:22px;

}

.process-number{

width:46px;

height:46px;

font-size:16px;

}

.process-card h4{

font-size:22px;

}

.process-card p{

font-size:15px;

line-height:1.8;

}

}

@media(max-width:480px){

.service-process .section-title span{

font-size:12px;

padding:10px 18px;

}

.service-process .section-title h2{

font-size:26px;

}

.process-card{

padding:26px 20px;

}

.process-icon{

width:66px;

height:66px;

font-size:24px;

}

.process-card h4{

font-size:20px;

}

.process-card p{

font-size:14px;

}

}

/*=========================================================
END OF FILE
=========================================================*/