/*
Theme Name: Benklink
Author: Your Name
Version: 1.0
*/

body{
    font-family:'Poppins',sans-serif;
    background:#f9fbfd;
}

/* Navbar */
.navbar{
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
}
.navbar-brand{
    color:#4a6cf7 !important;
    font-weight:600;
}

/* Hero */
.hero{
    height:60vh;
    background:url('https://benklink.com/wp-content/uploads/2026/05/banner-1.png') center/cover no-repeat;
    position:relative;
    display:flex;
    align-items:center;
    color:#fff;
}
.hero::before{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
}
.hero .container{
    position:relative;
    z-index:2;
}

/* Cards */
.card{
    border:none;
    border-radius:12px;
    box-shadow:0 5px 20px rgba(0,0,0,0.08);
    transition:0.3s;
    overflow:hidden; /* fix image overflow */
}
.card:hover{
    transform:translateY(-10px);
}

/* Card Image */
.card img{
    border-top-left-radius:12px;
    border-top-right-radius:12px;
    height:200px;
    object-fit:cover;
}

/* Feature box */
.feature{
    background:#fff;
    padding:20px;
    border-radius:10px;
    box-shadow:0 5px 15px rgba(0,0,0,0.08);
    transition:0.3s;
}
.feature:hover{
    transform:scale(1.05);
}

/* Icons hover */
.bi{
    transition:0.3s;
}
.bi:hover{
    transform:scale(1.2);
}

/* CTA */
.cta{
    background:#4a6cf7;
    color:#fff;
}

/* 🔥 FIXED Animation */
.fade-in{
    opacity:1; /* visible by default */
    transform:translateY(0);
    transition:all 0.8s ease;
}

/* Optional animation when JS adds class */
.fade-in.animate{
    opacity:1;
    transform:translateY(0);
}

/* Icon Badge */
.icon-badge{
    position:absolute;
    top:15px;
    left:15px;
    background:#4a6cf7;
    color:#fff;
    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:20px;
    box-shadow:0 4px 10px rgba(0,0,0,0.2);
    transition:0.3s;
    z-index:2; /* ensure visible over image */
}

/* Hover effect */
.card:hover .icon-badge{
    transform:scale(1.1);
    background:#6a11cb;
}