/* ================= GLOBAL ================= */
body{
    background: radial-gradient(circle at top,#eef2ff,#f8fbff,#ffffff);
    font-family: 'Inter',sans-serif;
    color:#2c3e50;
    overflow-x:hidden;
}

/* ================= NAVBAR ================= */
.navbar{
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(14px);
    box-shadow:0 8px 30px rgba(0,0,0,0.05);
    border-bottom:1px solid rgba(0,0,0,0.05);
}

.navbar-brand{
    font-weight:800;
    font-size:22px;
    background:linear-gradient(135deg,#4e73df,#6f86ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.nav-link{
    font-weight:500;
    color:#555 !important;
    position:relative;
}

/* underline animation */
.nav-link::after{
    content:'';
    position:absolute;
    width:0%;
    height:2px;
    bottom:-3px;
    left:0;
    background:#4e73df;
    transition:0.3s;
}

.nav-link:hover::after{
    width:100%;
}

/* ================= SECTION ================= */
.section-title{
    font-size:24px;
    font-weight:700;
    margin:35px 0 20px;
    position:relative;
}

/* animated gradient underline */
.section-title::after{
    content:'';
    width:80px;
    height:4px;
    background:linear-gradient(90deg,#4e73df,#6f86ff,#00c9ff);
    background-size:200% auto;
    animation:gradientMove 3s linear infinite;
    position:absolute;
    bottom:-6px;
    left:0;
    border-radius:10px;
}

@keyframes gradientMove{
    0%{background-position:0%}
    100%{background-position:200%}
}

/* ================= CARD ================= */
.service-card{
    background:rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    border-radius:20px;
    padding:25px 10px;
    text-align:center;
    border:1px solid rgba(0,0,0,0.05);
    transition:all 0.4s ease;
    position:relative;
    overflow:hidden;
}

/* glow border animation */
.service-card::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:20px;
    padding:1px;
    background:linear-gradient(120deg,#4e73df,#6f86ff,#00c9ff);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity:0;
    transition:0.5s;
}

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

/* hover effect */
.service-card:hover{
    transform:translateY(-8px) scale(1.03);
    box-shadow:0 20px 40px rgba(0,0,0,0.12);
}

/* ================= ICON ================= */
.icon{
    width:65px;
    height:65px;
    margin:auto;
    margin-bottom:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg,#4e73df,#6f86ff,#00c9ff);
    background-size:200% 200%;
    color:#fff;
    font-size:24px;
    animation:iconFlow 5s infinite linear;
    transition:0.4s;
}

/* animated gradient */
@keyframes iconFlow{
    0%{background-position:0%}
    100%{background-position:200%}
}

/* hover bounce */
.service-card:hover .icon{
    transform:translateY(-6px) scale(1.15) rotate(5deg);
    box-shadow:0 8px 25px rgba(78,115,223,0.5);
}

/* ================= LOCK ================= */
.lock{
    position:absolute;
    top:10px;
    left:10px;
    background:#fff;
    padding:6px 8px;
    border-radius:50%;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
    font-size:12px;
}

/* ================= BADGES ================= */
.badge-new,
.badge-hot,
.badge-pro{
    position:absolute;
    top:10px;
    right:10px;
    padding:5px 10px;
    border-radius:30px;
    font-size:11px;
    font-weight:600;
    animation:pulseGlow 1.5s infinite;
}

.badge-new{
    background:linear-gradient(135deg,#00c853,#69f0ae);
    color:#fff;
}

.badge-hot{
    background:linear-gradient(135deg,#ff416c,#ff4b2b);
    color:#fff;
}

.badge-pro{
    background:linear-gradient(135deg,#f7971e,#ffd200);
    color:#000;
}

/* glow animation */
@keyframes pulseGlow{
    0%{transform:scale(1);box-shadow:0 0 0 rgba(0,0,0,0)}
    50%{transform:scale(1.1);box-shadow:0 0 12px rgba(0,0,0,0.2)}
    100%{transform:scale(1)}
}

/* ================= BUTTON ================= */
.btn-primary{
    border-radius:30px;
    background:linear-gradient(135deg,#4e73df,#6f86ff);
    border:none;
    transition:0.3s;
}

.btn-primary:hover{
    transform:scale(1.07);
    box-shadow:0 8px 20px rgba(78,115,223,0.4);
}

/* ================= FOOTER ================= */
.footer{
    background:#fff;
    padding:20px;
    text-align:center;
    margin-top:50px;
    border-top:1px solid #eee;
    font-size:14px;
}

/* ================= PORTAL MODAL ================= */
.portal-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.5);
    backdrop-filter: blur(6px);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.portal-content{
    background:rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    border-radius:20px;
    padding:25px;
    width:90%;
    max-width:900px;
    box-shadow:0 30px 60px rgba(0,0,0,0.2);
    animation:zoomIn 0.3s ease;
}

@keyframes zoomIn{
    from{opacity:0;transform:scale(0.9)}
    to{opacity:1;transform:scale(1)}
}

/* HEADER */
.portal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

.close-btn{
    font-size:22px;
    cursor:pointer;
    transition:0.3s;
}

.close-btn:hover{
    color:red;
    transform:rotate(90deg);
}

/* GRID */
.portal-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:14px;
}

/* ITEMS */
.portal-item{
    padding:14px;
    background:#f8faff;
    border-radius:12px;
    text-decoration:none;
    color:#333;
    display:flex;
    gap:10px;
    align-items:center;
    transition:0.3s;
    border:1px solid #eee;
}

.portal-item:hover{
    background:linear-gradient(135deg,#4e73df,#6f86ff);
    color:#fff;
    transform:translateX(8px) scale(1.02);
}

/* ================= MOBILE ================= */
@media(max-width:768px){

    .icon{
        width:50px;
        height:50px;
        font-size:20px;
    }

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

}