/* =====================================================
   SERVICES HUB PAGE
   Premier Abroad Services
=====================================================*/

/* HERO */

.page-hero{

    position:relative;
    overflow:hidden;
    padding:120px 0;
    background:linear-gradient(135deg,#0a3d91 0%,#1565d8 55%,#2f8fff 100%);
    color:#fff;

}

.page-hero::before{

    content:"";
    position:absolute;
    width:430px;
    height:430px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    top:-170px;
    right:-150px;

}

.page-hero::after{

    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    left:-80px;
    bottom:-80px;

}

.page-hero-content{

    position:relative;
    z-index:2;
    max-width:900px;

}

.page-tag{

    display:inline-block;
    padding:10px 22px;
    border-radius:40px;
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(10px);
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:25px;

}

.page-hero h1{

    font-size:60px;
    line-height:1.15;
    color:#fff;
    margin-bottom:25px;

}

.page-hero p{

    font-size:19px;
    line-height:1.9;
    color:rgba(255,255,255,.92);
    margin-bottom:35px;

}

.page-buttons{

    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:35px;

}

.breadcrumb{

    display:flex;
    gap:12px;
    flex-wrap:wrap;
    color:#dbe7ff;

}

.breadcrumb a{

    color:#fff;
    font-weight:600;

}

/* INTRO */

.services-intro{

    padding:110px 0;
    background:#fff;

}

/* WHY */

.services-why{

    padding:110px 0;
    background:#f8fbff;

}

.why-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    margin-top:60px;

}

.why-card{

    background:#fff;
    border-radius:22px;
    padding:40px 35px;
    text-align:center;
    border:1px solid #edf2fa;
    box-shadow:0 20px 45px rgba(15,23,42,.08);
    transition:.35s;

}

.why-card:hover{

    transform:translateY(-10px);
    box-shadow:0 30px 60px rgba(10,61,145,.15);

}

.why-card i{

    width:80px;
    height:80px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 25px;
    border-radius:50%;
    background:linear-gradient(135deg,#0a3d91,#1976ff);
    color:#fff;
    font-size:32px;

}

.why-card h3{

    font-size:24px;
    color:#10254d;
    margin-bottom:18px;

}

.why-card p{

    color:#5b6474;
    line-height:1.8;

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

.services-cta{

    padding:110px 0;
    background:#ffffff;
    text-align:center;

}

.services-cta .section-title{

    margin-bottom:50px;

}

.services-cta .page-buttons{

    justify-content:center;

}

/* =====================================================
   SERVICES GRID IMPROVEMENTS
===================================================== */

.services-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;

}

.service-card{

    position:relative;
    overflow:hidden;

}

.service-card::before{

    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#0a3d91,#1976ff,#45b8ff);
    transform:scaleX(0);
    transform-origin:left;
    transition:.4s;

}

.service-card:hover::before{

    transform:scaleX(1);

}

.service-card a{

    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    font-weight:700;

}

.service-card a i{

    width:auto;
    height:auto;
    background:none;
    color:inherit;
    margin:0;
    font-size:14px;
    transition:.3s;
    box-shadow:none;

}

.service-card:hover a i{

    transform:translateX(6px) rotate(0deg);

}

.featured-service{

    background:linear-gradient(135deg,#0a3d91,#1565d8);
    color:#ffffff;

}

.featured-service h3,

.featured-service p,

.featured-service a{

    color:#ffffff;

}

.featured-service i{

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

}

.featured-service:hover i{

    background:#ffffff;
    color:#0a3d91;

}

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

.services-intro .section-title,

.services-why .section-title{

    margin-bottom:70px;

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

@media(max-width:1200px){

    .services-grid{

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

    }

    .why-grid{

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

    }

}

@media(max-width:992px){

    .page-hero{

        padding:100px 0;

    }

    .page-hero h1{

        font-size:48px;

    }

    .services-intro,
    .services-why,
    .services-cta{

        padding:90px 0;

    }

}

@media(max-width:768px){

    .page-hero{

        padding:85px 0;

    }

    .page-hero h1{

        font-size:36px;

        line-height:1.25;

    }

    .page-hero p{

        font-size:17px;

    }

    .page-buttons{

        flex-direction:column;

    }

    .page-buttons .btn-primary,
    .page-buttons .btn-secondary{

        width:100%;
        justify-content:center;

    }

    .services-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .why-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .services-intro,
    .services-why,
    .services-cta{

        padding:80px 0;

    }

    .section-title{

        margin-bottom:50px;

    }

}

@media(max-width:576px){

    .page-tag{

        font-size:13px;
        padding:8px 16px;

    }

    .page-hero h1{

        font-size:30px;

    }

    .page-hero p{

        font-size:16px;

    }

    .why-card{

        padding:35px 25px;

    }

    .why-card h3{

        font-size:22px;

    }

}