/*=========================================================
SERVICES GRID - PREMIUM VERSION
=========================================================*/

.services-grid {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    background: linear-gradient(135deg,#f8fbff 0%,#ffffff 45%,#eef4ff 100%);
}

    /* Floating Decorations */

    .services-grid::before,
    .services-grid::after {
        content: "";
        position: absolute;
        border: 2px solid rgba(255,152,0,.20);
        z-index: 0;
        animation: floatSquares 12s linear infinite;
    }

    .services-grid::before {
        width: 170px;
        height: 170px;
        top: 60px;
        left: -60px;
        transform: rotate(45deg);
    }

    .services-grid::after {
        width: 120px;
        height: 120px;
        right: -40px;
        bottom: 80px;
        transform: rotate(-18deg);
    }

@keyframes floatSquares {

    0% {
        transform: translateY(0) rotate(45deg);
    }

    50% {
        transform: translateY(-25px) rotate(55deg);
    }

    100% {
        transform: translateY(0) rotate(45deg);
    }
}

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

.section-subtitle {
    display: inline-block;
    font-size: 48px;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #123b7a;
    
    margin-bottom: 18px;
}

.section-title {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.15;
    color: #ff9800;
    margin-bottom: 20px;
}

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

.service-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border-radius: 28px;
    padding: 45px 35px;
    text-align: center;
    border: 1px solid rgba(18,59,122,.08);
    box-shadow: 0 18px 45px rgba(20,40,120,.10);
    transition: all .45s ease;
    height: 100%;
    z-index: 1;
}

    .service-card:hover {
        transform: translateY(-14px);
        box-shadow: 0 28px 60px rgba(20,40,120,.20);
    }

    /* Premium Glow */

    .service-card::before {
        content: "";
        position: absolute;
        width: 320px;
        height: 320px;
        top: -160px;
        left: -160px;
        background: radial-gradient(circle,rgba(255,152,0,.15),transparent 70%);
        opacity: 0;
        transition: .5s;
    }

    .service-card:hover::before {
        opacity: 1;
    }

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

.service-icon {
    width: 95px;
    height: 95px;
    margin: auto;
    margin-bottom: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg,#123b7a,#244fa5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    box-shadow: 0 12px 30px rgba(18,59,122,.25);
    transition: .45s;
}

.service-card:hover .service-icon {
    background: linear-gradient(135deg,#ff9800,#ffb74d);
    color: white;
    transform: rotate(10deg) scale(1.1);
}

/*=========================================================
TEXT
=========================================================*/

.service-card h3 {
    font-size: 30px;
    font-weight: 800;
    color: #123b7a;
    margin-bottom: 18px;
}

.service-card p {
    color: #5f6778;
    font-size: 17px;
    line-height: 1.9;
}

.service-card:hover h3,
.service-card:hover p {
    color: white;
}

/*=========================================================
PREMIUM HOVERS
=========================================================*/

.hr-card:hover {
    background: linear-gradient(135deg,#123b7a,#305dc8,#67a8ff);
}

.software-card:hover {
    background: linear-gradient(135deg,#ff9800,#ffb300,#ffd54f);
}

.placement-card:hover {
    background: linear-gradient(135deg,#00a86b,#18c57b,#72f5b4);
}

.corporate-card:hover {
    background: linear-gradient(135deg,#673ab7,#8e44ad,#d16fff);
}

.career-card:hover {
    background: linear-gradient(135deg,#ff4f8b,#ff6ba8,#ff9bc4);
}

.certification-card:hover {
    background: linear-gradient(135deg,#ff9800,#ff7043,#ffc107);
}

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

@media (max-width:991px) {

    .services-grid {
        padding: 90px 0;
    }

    .section-title {
        font-size: 44px;
    }

    .service-card {
        margin-bottom: 30px;
    }
}

@media(max-width:576px) {

    .services-grid {
        padding: 70px 0;
    }

    .section-title {
        font-size: 34px;
    }

    .section-subtitle {
        font-size: 18px;
        letter-spacing: 2px;
    }

    .service-card {
        padding: 35px 25px;
    }

        .service-card h3 {
            font-size: 24px;
        }

        .service-card p {
            font-size: 16px;
        }
}

/*=========================================
PREMIUM FLOATING DECORATIONS
=========================================*/

.floating-squares {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.square {
    position: absolute;
    border: 2px solid;
    animation: floatSquare 12s ease-in-out infinite;
    opacity: .35;
}

.blue {
    border-color: #1f6fff;
}

.orange {
    border-color: #ff9800;
}

.small {
    width: 28px;
    height: 28px;
}

.square:not(.small) {
    width: 90px;
    height: 90px;
}

/*========================
POSITIONS
========================*/

.sq1 {
    top: 4%;
    left: 5%;
    transform: rotate(25deg);
}

.sq2 {
    top: 10%;
    left: 28%;
    transform: rotate(40deg);
}

.sq3 {
    top: 7%;
    left: 52%;
    transform: rotate(12deg);
}

.sq4 {
    top: 15%;
    left: 74%;
    transform: rotate(55deg);
}

.sq5 {
    top: 20%;
    left: 90%;
    transform: rotate(30deg);
}

.sq6 {
    top: 38%;
    left: 6%;
}

.sq7 {
    top: 42%;
    left: 24%;
}

.sq8 {
    top: 48%;
    left: 46%;
}

.sq9 {
    top: 35%;
    left: 69%;
}

.sq10 {
    top: 52%;
    left: 88%;
}

.sq11 {
    top: 18%;
    left: 16%;
}

.sq12 {
    top: 30%;
    left: 34%;
}

.sq13 {
    top: 22%;
    left: 58%;
}

.sq14 {
    top: 32%;
    left: 80%;
}

.sq15 {
    top: 64%;
    left: 12%;
}

.sq16 {
    top: 72%;
    left: 30%;
}

.sq17 {
    top: 70%;
    left: 48%;
}

.sq18 {
    top: 78%;
    left: 66%;
}

.sq19 {
    top: 86%;
    left: 82%;
}

.sq20 {
    top: 90%;
    left: 94%;
}

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

@keyframes floatSquare {

    0% {
        transform: translateY(0px) rotate(0deg);
        opacity: .25;
    }

    25% {
        transform: translateY(-18px) rotate(18deg);
        opacity: .6;
    }

    50% {
        transform: translateY(-35px) rotate(45deg);
        opacity: .35;
    }

    75% {
        transform: translateY(-18px) rotate(20deg);
        opacity: .6;
    }

    100% {
        transform: translateY(0px) rotate(0deg);
        opacity: .25;
    }
}