/*=========================================================
INDIANASTROVEDIC
PREMIUM RELATED SERVICES
PART 1
=========================================================*/

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

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

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

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

.related-services .section-title{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:900px;
    margin:0 auto 70px;
}

.related-services .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;
}

.related-services .section-title h2{
    font-size:52px;
    font-weight:800;
    color:#081b3a;
    line-height:1.2;
    margin-bottom:22px;
}

.related-services .section-title p{
    font-size:18px;
    line-height:1.9;
    color:#667085;
    max-width:820px;
    margin:auto;
}

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

.related-card{
    position:relative;
    background:#ffffff;
    border-radius:28px;
    padding:40px 35px;
    height:100%;
    border:1px solid rgba(8,27,58,.06);
    box-shadow:0 18px 45px rgba(0,0,0,.06);
    transition:all .35s ease;
    overflow:hidden;
}

.related-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#D4AF37,#FFD54A);
    transform:scaleX(0);
    transform-origin:left;
    transition:.35s;
}

.related-card:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 70px rgba(0,0,0,.12);
    border-color:rgba(212,175,55,.35);
}

.related-card:hover::before{
    transform:scaleX(1);
}

.related-icon{
    width:82px;
    height:82px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:28px;
    background:linear-gradient(135deg,#D4AF37,#FFD54A);
    color:#081b3a;
    font-size:34px;
    box-shadow:0 15px 35px rgba(212,175,55,.30);
}

.related-card h3{
    font-size:28px;
    font-weight:800;
    color:#081b3a;
    margin-bottom:18px;
    line-height:1.3;
}

.related-card p{
    font-size:16px;
    color:#667085;
    line-height:1.9;
    margin-bottom:30px;
}
/*=========================================================
PRICE
=========================================================*/

.related-price{

display:flex;

align-items:center;

gap:15px;

margin-bottom:30px;

}

.related-price .old-price{

font-size:20px;

text-decoration:line-through;

color:#98A2B3;

font-weight:500;

}

.related-price .new-price{

font-size:34px;

font-weight:800;

color:#D4AF37;

text-shadow:0 2px 12px rgba(212,175,55,.20);

}

/*=========================================================
BUTTON
=========================================================*/

.related-buttons{

margin-top:auto;

}

.btn-view-service{

display:flex;

align-items:center;

justify-content:center;

gap:12px;

width:100%;

height:58px;

border-radius:60px;

text-decoration:none;

font-size:16px;

font-weight:700;

background:linear-gradient(135deg,#081b3a,#10386d);

color:#ffffff;

transition:all .35s ease;

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

}

.btn-view-service:hover{

transform:translateY(-4px);

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

color:#081b3a;

}

.btn-view-service i{

transition:.35s;

}

.btn-view-service:hover i{

transform:translateX(5px);

}

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

.related-bottom{

margin-top:90px;

background:linear-gradient(135deg,#081b3a,#10386d);

border-radius:32px;

padding:55px;

position:relative;

overflow:hidden;

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

}

.related-bottom::before{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:320px;

height:320px;

border-radius:50%;

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

filter:blur(40px);

}

.related-content{

position:relative;

z-index:2;

}

.related-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 22px;

border-radius:50px;

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

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

color:#FFD54A;

font-size:14px;

font-weight:700;

margin-bottom:20px;

}

.related-content h2{

font-size:38px;

font-weight:800;

color:#ffffff;

line-height:1.3;

margin-bottom:18px;

}

.related-content p{

font-size:17px;

line-height:1.9;

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

margin:0;

}

.btn-all-services{

display:inline-flex;

align-items:center;

justify-content:center;

gap:12px;

padding:18px 36px;

border-radius:60px;

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

color:#081b3a;

text-decoration:none;

font-size:16px;

font-weight:700;

transition:all .35s ease;

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

}

.btn-all-services:hover{

transform:translateY(-5px);

color:#081b3a;

}
/*=========================================================
PREMIUM ANIMATIONS
=========================================================*/

.related-card,
.related-icon,
.btn-view-service,
.btn-all-services{
transition:all .35s ease;
}

.related-card:hover .related-icon{

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

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

}

.related-card:hover h3{

color:#0b3d7a;

}

.related-card::after{

content:"";

position:absolute;

top:-140px;

right:-140px;

width:260px;

height:260px;

border-radius:50%;

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

filter:blur(60px);

opacity:0;

transition:.4s;

}

.related-card:hover::after{

opacity:1;

}

.related-card:hover .new-price{

transform:scale(1.05);

}

.related-price .new-price{

transition:.35s;

}

/*=========================================================
BOTTOM CTA EFFECT
=========================================================*/

.related-bottom::after{

content:"";

position:absolute;

left:-140px;

bottom:-140px;

width:300px;

height:300px;

border-radius:50%;

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

filter:blur(50px);

}

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

@media(max-width:1200px){

.related-services .section-title h2{

font-size:46px;

}

.related-card{

padding:35px 30px;

}

.related-content h2{

font-size:34px;

}

}

@media(max-width:991px){

.related-services{

padding:90px 0;

}

.related-services .section-title{

margin-bottom:60px;

}

.related-services .section-title h2{

font-size:38px;

}

.related-bottom{

text-align:center;

padding:45px 35px;

}

.related-content{

margin-bottom:30px;

}

}

@media(max-width:767px){

.related-services{

padding:70px 0;

}

.related-services .section-title h2{

font-size:30px;

}

.related-services .section-title p{

font-size:16px;

}

.related-card{

padding:28px 24px;

border-radius:24px;

}

.related-icon{

width:70px;

height:70px;

font-size:28px;

margin-bottom:22px;

}

.related-card h3{

font-size:24px;

}

.related-card p{

font-size:15px;

line-height:1.8;

}

.related-price .new-price{

font-size:30px;

}

.related-bottom{

padding:30px 24px;

border-radius:24px;

margin-top:60px;

}

.related-content h2{

font-size:28px;

}

.related-content p{

font-size:15px;

}

.btn-all-services{

width:100%;

justify-content:center;

}

}

@media(max-width:480px){

.related-services .section-title span{

font-size:12px;

padding:10px 18px;

}

.related-services .section-title h2{

font-size:26px;

}

.related-card{

padding:22px;

}

.related-card h3{

font-size:22px;

}

.related-price .new-price{

font-size:28px;

}

.btn-view-service{

height:54px;

font-size:15px;

}

.btn-all-services{

height:54px;

font-size:15px;

padding:0 24px;

}

.related-content h2{

font-size:24px;

}

.related-content p{

font-size:14px;

}

}

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